add z-index to icon button in password input in order to make it clic…

…kable

common/changes/pcln-design-system/bugfix-password-input_2024-11-13-19-16.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-design-system",
+      "comment": "add zindex to IconButton in PasswordInput",
+      "type": "patch"
+    }
+  ],
+  "packageName": "pcln-design-system"
+}

common/changes/pcln-icons/bugfix-password-input_2024-11-13-19-16.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-icons",
+      "comment": "",
+      "type": "none"
+    }
+  ],
+  "packageName": "pcln-icons"
+}

packages/core/src/PasswordInput/PasswordInput.tsx

@@ -15,6 +15,10 @@ const NoWrapText = styled(Text)`
   white-space: nowrap;
 `
 
+const ClickableIconButton = styled(IconButton)`
+  z-index: 1;
+`
+
 const maxProgressBarLength = 4
 
 /**
@@ -96,7 +100,7 @@ export function PasswordInput({
           autoComplete={autoComplete}
         />
         {showCheckIcon && <Check color='secondary' data-testid='check-mark-icon' />}
-        <IconButton
+        <ClickableIconButton
           title='visibility-button'
           icon={<VisibilityIcon color='text.light' />}
           onClick={changeVisibility}

packages/icons/src/index.js

@@ -40,13 +40,13 @@ export { default as Cancel } from './Cancel.jsx'
 export { default as CarAutomatic } from './CarAutomatic.jsx'
 export { default as CarCircle } from './CarCircle.jsx'
 export { default as CarDoor } from './CarDoor.jsx'
-export { default as CardTravel } from './CardTravel.jsx'
 export { default as CarManual } from './CarManual.jsx'
+export { default as CarWash } from './CarWash.jsx'
+export { default as CardTravel } from './CardTravel.jsx'
 export { default as Carriage } from './Carriage.jsx'
 export { default as CarryOnBag } from './CarryOnBag.jsx'
 export { default as Cars } from './Cars.jsx'
 export { default as CarsBrand } from './CarsBrand.jsx'
-export { default as CarWash } from './CarWash.jsx'
 export { default as Casino } from './Casino.jsx'
 export { default as Celebration } from './Celebration.jsx'
 export { default as ChargeStation } from './ChargeStation.jsx'
@@ -126,8 +126,8 @@ export { default as Gps } from './Gps.jsx'
 export { default as Graph } from './Graph.jsx'
 export { default as Grid } from './Grid.jsx'
 export { default as Group } from './Group.jsx'
-export { default as Guests } from './Guests.jsx'
 export { default as GuestScore } from './GuestScore.jsx'
+export { default as Guests } from './Guests.jsx'
 export { default as Help } from './Help.jsx'
 export { default as History } from './History.jsx'
 export { default as Home } from './Home.jsx'