diff --git a/components/Icons/EyeHide.tsx b/components/Icons/EyeHide.tsx
new file mode 100644
index 000000000..cc1db5926
--- /dev/null
+++ b/components/Icons/EyeHide.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function EyeHideIcon({ className, color, ...props }: IconProps) {
+ const classNames = iconVariants({ className, color })
+ return (
+
+ )
+}
diff --git a/components/Icons/EyeShow.tsx b/components/Icons/EyeShow.tsx
new file mode 100644
index 000000000..c3fdaf17d
--- /dev/null
+++ b/components/Icons/EyeShow.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function EyeShowIcon({ className, color, ...props }: IconProps) {
+ const classNames = iconVariants({ className, color })
+ return (
+
+ )
+}
diff --git a/components/Icons/get-icon-by-icon-name.ts b/components/Icons/get-icon-by-icon-name.ts
index 3a443cea2..9bfc4d9c7 100644
--- a/components/Icons/get-icon-by-icon-name.ts
+++ b/components/Icons/get-icon-by-icon-name.ts
@@ -29,6 +29,8 @@ import {
DoorOpenIcon,
ElectricBikeIcon,
EmailIcon,
+ EyeHideIcon,
+ EyeShowIcon,
FitnessIcon,
GiftIcon,
GlobeIcon,
@@ -114,6 +116,10 @@ export function getIconByIconName(icon?: IconName): FC | null {
return ElectricBikeIcon
case IconName.Email:
return EmailIcon
+ case IconName.EyeHide:
+ return EyeHideIcon
+ case IconName.EyeShow:
+ return EyeShowIcon
case IconName.Facebook:
return FacebookIcon
case IconName.Fitness:
diff --git a/components/Icons/index.tsx b/components/Icons/index.tsx
index f26933255..31b77b1e5 100644
--- a/components/Icons/index.tsx
+++ b/components/Icons/index.tsx
@@ -28,6 +28,8 @@ export { default as EditIcon } from "./Edit"
export { default as ElectricBikeIcon } from "./ElectricBike"
export { default as EmailIcon } from "./Email"
export { default as ErrorCircleIcon } from "./ErrorCircle"
+export { default as EyeHideIcon } from "./EyeHide"
+export { default as EyeShowIcon } from "./EyeShow"
export { default as FitnessIcon } from "./Fitness"
export { default as GiftIcon } from "./Gift"
export { default as GlobeIcon } from "./Globe"
diff --git a/components/TempDesignSystem/Form/NewPassword/index.tsx b/components/TempDesignSystem/Form/NewPassword/index.tsx
index 558247e04..3cd9ac2f2 100644
--- a/components/TempDesignSystem/Form/NewPassword/index.tsx
+++ b/components/TempDesignSystem/Form/NewPassword/index.tsx
@@ -1,14 +1,18 @@
"use client"
+import { useState } from "react"
import { Text, TextField } from "react-aria-components"
import { Controller, useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"
+import {
+ CheckIcon,
+ CloseIcon,
+ EyeHideIcon,
+ EyeShowIcon,
+ InfoCircleIcon,
+} from "@/components/Icons"
import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
-import Image from "next/image"
-import { useState } from "react"
-
-import { CheckIcon, CloseIcon, InfoCircleIcon } from "@/components/Icons"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import {
PasswordValidatorKey,
@@ -85,12 +89,7 @@ export default function NewPassword({
intent="tertiary"
onClick={() => setPasswordVisible(!isPasswordVisible)}
>
-
+ {isPasswordVisible ? : }
{field.value ? (
diff --git a/components/TempDesignSystem/Form/NewPassword/newPassword.module.css b/components/TempDesignSystem/Form/NewPassword/newPassword.module.css
index 7d57c6850..4617dfa35 100644
--- a/components/TempDesignSystem/Form/NewPassword/newPassword.module.css
+++ b/components/TempDesignSystem/Form/NewPassword/newPassword.module.css
@@ -81,8 +81,6 @@
right: var(--Spacing-x2);
top: 50%;
transform: translateY(-50%);
- width: 24px;
- height: 24px;
}
.inputWrapper {
diff --git a/types/components/icon.ts b/types/components/icon.ts
index c0fdf6ee0..174d95cf6 100644
--- a/types/components/icon.ts
+++ b/types/components/icon.ts
@@ -32,6 +32,8 @@ export enum IconName {
DoorOpen = "DoorOpen",
ElectricBike = "ElectricBike",
Email = "Email",
+ EyeHide = "EyeHide",
+ EyeShow = "EyeShow",
Facebook = "Facebook",
Fitness = "Fitness",
Gift = "Gift",