From 849440f561a973c0bceb428ab935290b9058f40e Mon Sep 17 00:00:00 2001
From: Williams Tardif <32278060+WilliamsTardif@users.noreply.github.com>
Date: Mon, 22 Jul 2024 11:09:38 -0400
Subject: [PATCH 1/9] feat(textInput): new adornment added

---
 .../password-creation-input.tsx               |   5 +-
 .../password-input/password-input.tsx         |   5 +-
 .../components/text-input/text-input.test.tsx |  50 ++
 .../text-input/text-input.test.tsx.snap       | 762 ++++++++++++++++--
 .../src/components/text-input/text-input.tsx  | 138 +++-
 packages/storybook/stories/text-input.mdx     |  11 +-
 .../storybook/stories/text-input.stories.tsx  |  16 +-
 7 files changed, 878 insertions(+), 109 deletions(-)

diff --git a/packages/react/src/components/password-creation-input/password-creation-input.tsx b/packages/react/src/components/password-creation-input/password-creation-input.tsx
index 6f0219ddc3..86bcb8e333 100644
--- a/packages/react/src/components/password-creation-input/password-creation-input.tsx
+++ b/packages/react/src/components/password-creation-input/password-creation-input.tsx
@@ -3,7 +3,6 @@ import styled from 'styled-components';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { IconButton } from '../buttons/icon-button';
 import { FieldContainer } from '../field-container/field-container';
-import { Input } from '../text-input/text-input';
 import { useTranslation } from '../../i18n/use-translation';
 import { Tooltip } from '../tooltip/tooltip';
 import { getPasswordStrength } from './password-strength';
@@ -12,6 +11,7 @@ import { getDefaultValidationConditions, ValidationCondition } from './validatio
 import { v4 as uuid } from '../../utils/uuid';
 import { PasswordStrengthContainer } from './password-strength-container';
 import { useDataAttributes } from '../../hooks/use-data-attributes';
+import { inputsStyle } from '../text-input/styles/inputs';
 
 const StyledUl = styled.ul`
     font-size: 0.75rem;
@@ -26,7 +26,8 @@ const PasswordInputContainer = styled.div`
     position: relative;
 `;
 
-const StyledInput = styled(Input)`
+const StyledInput = styled.input<{ isMobile: boolean }>`
+    ${({ theme, isMobile }) => inputsStyle({ theme, isMobile, isFocusable: false })};
     padding-right: var(--size-2x);
 `;
 
diff --git a/packages/react/src/components/password-input/password-input.tsx b/packages/react/src/components/password-input/password-input.tsx
index 483adb9c03..995f9eefdb 100644
--- a/packages/react/src/components/password-input/password-input.tsx
+++ b/packages/react/src/components/password-input/password-input.tsx
@@ -13,8 +13,8 @@ import { v4 as uuid } from '../../utils/uuid';
 import { useDataAttributes } from '../../hooks/use-data-attributes';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { FieldContainer } from '../field-container/field-container';
-import { Input } from '../text-input/text-input';
 import { Tooltip } from '../tooltip/tooltip';
+import { inputsStyle } from '../text-input/styles/inputs';
 
 interface PasswordInputProps {
     id?: string;
@@ -37,7 +37,8 @@ const PasswordInputContainer = styled.div`
     position: relative;
 `;
 
-const StyledInput = styled(Input)`
+const StyledInput = styled.input<{ isMobile: boolean }>`
+    ${({ theme, isMobile }) => inputsStyle({ theme, isMobile, isFocusable: false })};
     padding-right: var(--size-2x);
 `;
 
diff --git a/packages/react/src/components/text-input/text-input.test.tsx b/packages/react/src/components/text-input/text-input.test.tsx
index fd47712801..64b60f299a 100644
--- a/packages/react/src/components/text-input/text-input.test.tsx
+++ b/packages/react/src/components/text-input/text-input.test.tsx
@@ -4,6 +4,7 @@ import { doNothing } from '../../test-utils/callbacks';
 import { getByTestId } from '../../test-utils/enzyme-selectors';
 import { mountWithTheme, renderWithTheme } from '../../test-utils/renderer';
 import { TextInput } from './text-input';
+import { Icon } from '../icon/icon';
 
 describe('TextInput', () => {
     const initialProps = {
@@ -186,6 +187,55 @@ describe('TextInput', () => {
         expect(tree).toMatchSnapshot();
     });
 
+    test('Matches the snapshot adornment text', () => {
+        const tree = renderWithTheme(
+            <TextInput
+                label="Telephone"
+                pattern="[0-9]{3}-?[0-9]{3}-?[0-9]{4}"
+                placeholder="Ex.: 555-123-4567"
+                type="tel"
+                validationErrorMessage="Please enter a valid phone number"
+                defaultValue="foo"
+                adornment='#'
+            />,
+        );
+
+        expect(tree).toMatchSnapshot();
+    });
+
+    test('Matches the snapshot adornment icon', () => {
+        const tree = renderWithTheme(
+            <TextInput
+                label="Telephone"
+                pattern="[0-9]{3}-?[0-9]{3}-?[0-9]{4}"
+                placeholder="Ex.: 555-123-4567"
+                type="tel"
+                validationErrorMessage="Please enter a valid phone number"
+                defaultValue="foo"
+                adornment={<Icon name='phone' />}
+            />,
+        );
+
+        expect(tree).toMatchSnapshot();
+    });
+
+    test('matches the snapshot (Normal - Adornment at end)', () => {
+        const tree = renderWithTheme(
+            <TextInput
+                label="Telephone"
+                pattern="[0-9]{3}-?[0-9]{3}-?[0-9]{4}"
+                placeholder="Ex.: 555-123-4567"
+                type="tel"
+                validationErrorMessage="Please enter a valid phone number"
+                defaultValue="foo"
+                adornment='#'
+                adornmentPosition='end'
+            />,
+        );
+
+        expect(tree).toMatchSnapshot();
+    });
+
     test('Matches the snapshot [disabled = true]', () => {
         const tree = renderWithTheme(
             <TextInput
diff --git a/packages/react/src/components/text-input/text-input.test.tsx.snap b/packages/react/src/components/text-input/text-input.test.tsx.snap
index 1974734edd..e904214eb9 100644
--- a/packages/react/src/components/text-input/text-input.test.tsx.snap
+++ b/packages/react/src/components/text-input/text-input.test.tsx.snap
@@ -35,7 +35,7 @@ input + .c1 {
   margin-bottom: var(--spacing-half);
 }
 
-.c3 {
+.c4 {
   background: #FFFFFF;
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
@@ -53,56 +53,83 @@ input + .c1 {
   outline: none;
   padding: 0 var(--spacing-1x);
   width: 100%;
+  border: 0;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  min-height: 100%;
+  text-align: left;
 }
 
-.c3::-webkit-input-placeholder {
+.c4::-webkit-input-placeholder {
   color: #60666E;
 }
 
-.c3::-moz-placeholder {
+.c4::-moz-placeholder {
   color: #60666E;
 }
 
-.c3:-ms-input-placeholder {
+.c4:-ms-input-placeholder {
   color: #60666E;
 }
 
-.c3::placeholder {
+.c4::placeholder {
   color: #60666E;
 }
 
-.c3:disabled {
+.c4:disabled {
   background-color: #F1F2F2;
   border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
-.c3:disabled,
-.c3:disabled::-webkit-input-placeholder {
+.c4:disabled,
+.c4:disabled::-webkit-input-placeholder {
   color: #B7BBC2;
 }
 
-.c3:disabled,
-.c3:disabled::-moz-placeholder {
+.c4:disabled,
+.c4:disabled::-moz-placeholder {
   color: #B7BBC2;
 }
 
-.c3:disabled,
-.c3:disabled:-ms-input-placeholder {
+.c4:disabled,
+.c4:disabled:-ms-input-placeholder {
   color: #B7BBC2;
 }
 
-.c3:disabled,
-.c3:disabled::placeholder {
+.c4:disabled,
+.c4:disabled::placeholder {
   color: #B7BBC2;
 }
 
+.c4:focus,
+.c4:disabled {
+  border: 0;
+  box-shadow: none;
+}
+
+.c3 {
+  background: #FFFFFF;
+  border: 1px solid #60666E;
+  border-radius: var(--border-radius);
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: var(--size-2x);
+  border-color: #CD2C23;
+  background-color: #F1F2F2;
+  border-color: #B7BBC2;
+}
+
 .c3 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c3:focus {
+.c3:focus-within {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
@@ -119,16 +146,20 @@ input + .c1 {
   >
     Telephone
   </label>
-  <input
+  <div
     class="c3"
-    data-testid="text-input"
-    disabled=""
-    id="uuid1"
-    pattern="[0-9]{3}-?[0-9]{3}-?[0-9]{4}"
-    placeholder="Ex.: 555-123-4567"
-    type="tel"
-    value="foo"
-  />
+  >
+    <input
+      class="c4"
+      data-testid="text-input"
+      disabled=""
+      id="uuid1"
+      pattern="[0-9]{3}-?[0-9]{3}-?[0-9]{4}"
+      placeholder="Ex.: 555-123-4567"
+      type="tel"
+      value="foo"
+    />
+  </div>
 </div>
 `;
 
@@ -167,7 +198,7 @@ input + .c1 {
   margin-bottom: var(--spacing-half);
 }
 
-.c3 {
+.c4 {
   background: #FFFFFF;
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
@@ -185,56 +216,81 @@ input + .c1 {
   outline: none;
   padding: 0 var(--spacing-1x);
   width: 100%;
+  border: 0;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  min-height: 100%;
+  text-align: left;
 }
 
-.c3::-webkit-input-placeholder {
+.c4::-webkit-input-placeholder {
   color: #60666E;
 }
 
-.c3::-moz-placeholder {
+.c4::-moz-placeholder {
   color: #60666E;
 }
 
-.c3:-ms-input-placeholder {
+.c4:-ms-input-placeholder {
   color: #60666E;
 }
 
-.c3::placeholder {
+.c4::placeholder {
   color: #60666E;
 }
 
-.c3:disabled {
+.c4:disabled {
   background-color: #F1F2F2;
   border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
-.c3:disabled,
-.c3:disabled::-webkit-input-placeholder {
+.c4:disabled,
+.c4:disabled::-webkit-input-placeholder {
   color: #B7BBC2;
 }
 
-.c3:disabled,
-.c3:disabled::-moz-placeholder {
+.c4:disabled,
+.c4:disabled::-moz-placeholder {
   color: #B7BBC2;
 }
 
-.c3:disabled,
-.c3:disabled:-ms-input-placeholder {
+.c4:disabled,
+.c4:disabled:-ms-input-placeholder {
   color: #B7BBC2;
 }
 
-.c3:disabled,
-.c3:disabled::placeholder {
+.c4:disabled,
+.c4:disabled::placeholder {
   color: #B7BBC2;
 }
 
+.c4:focus,
+.c4:disabled {
+  border: 0;
+  box-shadow: none;
+}
+
+.c3 {
+  background: #FFFFFF;
+  border: 1px solid #60666E;
+  border-radius: var(--border-radius);
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: var(--size-2x);
+  border-color: #CD2C23;
+}
+
 .c3 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c3:focus {
+.c3:focus-within {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
@@ -251,16 +307,20 @@ input + .c1 {
   >
     Telephone (required)
   </label>
-  <input
+  <div
     class="c3"
-    data-testid="text-input"
-    id="uuid1"
-    pattern="[0-9]{3}-?[0-9]{3}-?[0-9]{4}"
-    placeholder="Ex.: 555-123-4567"
-    required=""
-    type="tel"
-    value="foo"
-  />
+  >
+    <input
+      class="c4"
+      data-testid="text-input"
+      id="uuid1"
+      pattern="[0-9]{3}-?[0-9]{3}-?[0-9]{4}"
+      placeholder="Ex.: 555-123-4567"
+      required=""
+      type="tel"
+      value="foo"
+    />
+  </div>
 </div>
 `;
 
@@ -299,7 +359,524 @@ input + .c1 {
   margin-bottom: var(--spacing-half);
 }
 
+.c4 {
+  background: #FFFFFF;
+  border: 1px solid #60666E;
+  border-radius: var(--border-radius);
+  box-sizing: border-box;
+  color: #1B1C1E;
+  font-family: inherit;
+  font-size: 0.875rem;
+  -webkit-letter-spacing: 0.015rem;
+  -moz-letter-spacing: 0.015rem;
+  -ms-letter-spacing: 0.015rem;
+  letter-spacing: 0.015rem;
+  line-height: 1.5rem;
+  margin: 0;
+  min-height: var(--size-2x);
+  outline: none;
+  padding: 0 var(--spacing-1x);
+  width: 100%;
+  border: 0;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  min-height: 100%;
+  text-align: left;
+}
+
+.c4::-webkit-input-placeholder {
+  color: #60666E;
+}
+
+.c4::-moz-placeholder {
+  color: #60666E;
+}
+
+.c4:-ms-input-placeholder {
+  color: #60666E;
+}
+
+.c4::placeholder {
+  color: #60666E;
+}
+
+.c4:disabled {
+  background-color: #F1F2F2;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
+}
+
+.c4:disabled,
+.c4:disabled::-webkit-input-placeholder {
+  color: #B7BBC2;
+}
+
+.c4:disabled,
+.c4:disabled::-moz-placeholder {
+  color: #B7BBC2;
+}
+
+.c4:disabled,
+.c4:disabled:-ms-input-placeholder {
+  color: #B7BBC2;
+}
+
+.c4:disabled,
+.c4:disabled::placeholder {
+  color: #B7BBC2;
+}
+
+.c4:focus,
+.c4:disabled {
+  border: 0;
+  box-shadow: none;
+}
+
+.c3 {
+  background: #FFFFFF;
+  border: 1px solid #60666E;
+  border-radius: var(--border-radius);
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: var(--size-2x);
+  border-color: #CD2C23;
+}
+
+.c3 {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.c3:focus-within {
+  box-shadow: 0 0 0 2px #006296;
+  outline: 2px solid #84C6EA;
+  outline-offset: -2px;
+}
+
+<div
+  class="c0"
+  data-testid="field-container"
+>
+  <label
+    class="c1 c2"
+    for="uuid1"
+    id="uuid1_label"
+  >
+    Telephone
+  </label>
+  <div
+    class="c3"
+  >
+    <input
+      class="c4"
+      data-testid="text-input"
+      id="uuid1"
+      pattern="[0-9]{3}-?[0-9]{3}-?[0-9]{4}"
+      placeholder="Ex.: 555-123-4567"
+      type="tel"
+      value="foo"
+    />
+  </div>
+</div>
+`;
+
+exports[`TextInput Matches the snapshot adornment icon 1`] = `
+.c2 {
+  color: #1B1C1E;
+  display: block;
+  font-size: 0.75rem;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.02rem;
+  -moz-letter-spacing: 0.02rem;
+  -ms-letter-spacing: 0.02rem;
+  letter-spacing: 0.02rem;
+  line-height: 1.25rem;
+  margin: 0;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+input + .c1 {
+  margin-left: var(--spacing-half);
+}
+
+.c0 {
+  margin: 0 0 var(--spacing-3x);
+}
+
+.c0 input,
+.c0 select,
+.c0 textarea {
+  border-color: #60666E;
+}
+
+.c0 > :nth-child(1) {
+  margin-bottom: var(--spacing-half);
+}
+
+.c5 {
+  background: #FFFFFF;
+  border: 1px solid #60666E;
+  border-radius: var(--border-radius);
+  box-sizing: border-box;
+  color: #1B1C1E;
+  font-family: inherit;
+  font-size: 0.875rem;
+  -webkit-letter-spacing: 0.015rem;
+  -moz-letter-spacing: 0.015rem;
+  -ms-letter-spacing: 0.015rem;
+  letter-spacing: 0.015rem;
+  line-height: 1.5rem;
+  margin: 0;
+  min-height: var(--size-2x);
+  outline: none;
+  padding: 0 var(--spacing-1x);
+  width: 100%;
+  border: 0;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  min-height: 100%;
+  text-align: left;
+}
+
+.c5::-webkit-input-placeholder {
+  color: #60666E;
+}
+
+.c5::-moz-placeholder {
+  color: #60666E;
+}
+
+.c5:-ms-input-placeholder {
+  color: #60666E;
+}
+
+.c5::placeholder {
+  color: #60666E;
+}
+
+.c5:disabled {
+  background-color: #F1F2F2;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
+}
+
+.c5:disabled,
+.c5:disabled::-webkit-input-placeholder {
+  color: #B7BBC2;
+}
+
+.c5:disabled,
+.c5:disabled::-moz-placeholder {
+  color: #B7BBC2;
+}
+
+.c5:disabled,
+.c5:disabled:-ms-input-placeholder {
+  color: #B7BBC2;
+}
+
+.c5:disabled,
+.c5:disabled::placeholder {
+  color: #B7BBC2;
+}
+
+.c5:focus,
+.c5:disabled {
+  border: 0;
+  box-shadow: none;
+}
+
+.c4 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding-left: var(--spacing-1x);
+}
+
+.c3 {
+  background: #FFFFFF;
+  border: 1px solid #60666E;
+  border-radius: var(--border-radius);
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: var(--size-2x);
+  border-color: #CD2C23;
+}
+
+.c3 {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.c3:focus-within {
+  box-shadow: 0 0 0 2px #006296;
+  outline: 2px solid #84C6EA;
+  outline-offset: -2px;
+}
+
+<div
+  class="c0"
+  data-testid="field-container"
+>
+  <label
+    class="c1 c2"
+    for="uuid1"
+    id="uuid1_label"
+  >
+    Telephone
+  </label>
+  <div
+    class="c3"
+  >
+    <span
+      class="c4"
+    >
+      <svg
+        color="currentColor"
+        focusable="false"
+        height="24"
+        width="24"
+      />
+    </span>
+    <input
+      class="c5"
+      data-testid="text-input"
+      id="uuid1"
+      pattern="[0-9]{3}-?[0-9]{3}-?[0-9]{4}"
+      placeholder="Ex.: 555-123-4567"
+      type="tel"
+      value="foo"
+    />
+  </div>
+</div>
+`;
+
+exports[`TextInput Matches the snapshot adornment text 1`] = `
+.c2 {
+  color: #1B1C1E;
+  display: block;
+  font-size: 0.75rem;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.02rem;
+  -moz-letter-spacing: 0.02rem;
+  -ms-letter-spacing: 0.02rem;
+  letter-spacing: 0.02rem;
+  line-height: 1.25rem;
+  margin: 0;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+input + .c1 {
+  margin-left: var(--spacing-half);
+}
+
+.c0 {
+  margin: 0 0 var(--spacing-3x);
+}
+
+.c0 input,
+.c0 select,
+.c0 textarea {
+  border-color: #60666E;
+}
+
+.c0 > :nth-child(1) {
+  margin-bottom: var(--spacing-half);
+}
+
+.c5 {
+  background: #FFFFFF;
+  border: 1px solid #60666E;
+  border-radius: var(--border-radius);
+  box-sizing: border-box;
+  color: #1B1C1E;
+  font-family: inherit;
+  font-size: 0.875rem;
+  -webkit-letter-spacing: 0.015rem;
+  -moz-letter-spacing: 0.015rem;
+  -ms-letter-spacing: 0.015rem;
+  letter-spacing: 0.015rem;
+  line-height: 1.5rem;
+  margin: 0;
+  min-height: var(--size-2x);
+  outline: none;
+  padding: 0 var(--spacing-1x);
+  width: 100%;
+  border: 0;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  min-height: 100%;
+  text-align: left;
+}
+
+.c5::-webkit-input-placeholder {
+  color: #60666E;
+}
+
+.c5::-moz-placeholder {
+  color: #60666E;
+}
+
+.c5:-ms-input-placeholder {
+  color: #60666E;
+}
+
+.c5::placeholder {
+  color: #60666E;
+}
+
+.c5:disabled {
+  background-color: #F1F2F2;
+  border-color: #B7BBC2;
+  color: #B7BBC2;
+}
+
+.c5:disabled,
+.c5:disabled::-webkit-input-placeholder {
+  color: #B7BBC2;
+}
+
+.c5:disabled,
+.c5:disabled::-moz-placeholder {
+  color: #B7BBC2;
+}
+
+.c5:disabled,
+.c5:disabled:-ms-input-placeholder {
+  color: #B7BBC2;
+}
+
+.c5:disabled,
+.c5:disabled::placeholder {
+  color: #B7BBC2;
+}
+
+.c5:focus,
+.c5:disabled {
+  border: 0;
+  box-shadow: none;
+}
+
+.c4 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding-left: var(--spacing-1x);
+}
+
 .c3 {
+  background: #FFFFFF;
+  border: 1px solid #60666E;
+  border-radius: var(--border-radius);
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: var(--size-2x);
+  border-color: #CD2C23;
+}
+
+.c3 {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.c3:focus-within {
+  box-shadow: 0 0 0 2px #006296;
+  outline: 2px solid #84C6EA;
+  outline-offset: -2px;
+}
+
+<div
+  class="c0"
+  data-testid="field-container"
+>
+  <label
+    class="c1 c2"
+    for="uuid1"
+    id="uuid1_label"
+  >
+    Telephone
+  </label>
+  <div
+    class="c3"
+  >
+    <span
+      class="c4"
+    >
+      #
+    </span>
+    <input
+      class="c5"
+      data-testid="text-input"
+      id="uuid1"
+      pattern="[0-9]{3}-?[0-9]{3}-?[0-9]{4}"
+      placeholder="Ex.: 555-123-4567"
+      type="tel"
+      value="foo"
+    />
+  </div>
+</div>
+`;
+
+exports[`TextInput matches the snapshot (Normal - Adornment at end) 1`] = `
+.c2 {
+  color: #1B1C1E;
+  display: block;
+  font-size: 0.75rem;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.02rem;
+  -moz-letter-spacing: 0.02rem;
+  -ms-letter-spacing: 0.02rem;
+  letter-spacing: 0.02rem;
+  line-height: 1.25rem;
+  margin: 0;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+input + .c1 {
+  margin-left: var(--spacing-half);
+}
+
+.c0 {
+  margin: 0 0 var(--spacing-3x);
+}
+
+.c0 input,
+.c0 select,
+.c0 textarea {
+  border-color: #60666E;
+}
+
+.c0 > :nth-child(1) {
+  margin-bottom: var(--spacing-half);
+}
+
+.c4 {
   background: #FFFFFF;
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
@@ -317,56 +894,92 @@ input + .c1 {
   outline: none;
   padding: 0 var(--spacing-1x);
   width: 100%;
+  border: 0;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  min-height: 100%;
+  text-align: right;
 }
 
-.c3::-webkit-input-placeholder {
+.c4::-webkit-input-placeholder {
   color: #60666E;
 }
 
-.c3::-moz-placeholder {
+.c4::-moz-placeholder {
   color: #60666E;
 }
 
-.c3:-ms-input-placeholder {
+.c4:-ms-input-placeholder {
   color: #60666E;
 }
 
-.c3::placeholder {
+.c4::placeholder {
   color: #60666E;
 }
 
-.c3:disabled {
+.c4:disabled {
   background-color: #F1F2F2;
   border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
-.c3:disabled,
-.c3:disabled::-webkit-input-placeholder {
+.c4:disabled,
+.c4:disabled::-webkit-input-placeholder {
   color: #B7BBC2;
 }
 
-.c3:disabled,
-.c3:disabled::-moz-placeholder {
+.c4:disabled,
+.c4:disabled::-moz-placeholder {
   color: #B7BBC2;
 }
 
-.c3:disabled,
-.c3:disabled:-ms-input-placeholder {
+.c4:disabled,
+.c4:disabled:-ms-input-placeholder {
   color: #B7BBC2;
 }
 
-.c3:disabled,
-.c3:disabled::placeholder {
+.c4:disabled,
+.c4:disabled::placeholder {
   color: #B7BBC2;
 }
 
+.c4:focus,
+.c4:disabled {
+  border: 0;
+  box-shadow: none;
+}
+
+.c5 {
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding-right: var(--spacing-1x);
+}
+
+.c3 {
+  background: #FFFFFF;
+  border: 1px solid #60666E;
+  border-radius: var(--border-radius);
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: var(--size-2x);
+  border-color: #CD2C23;
+}
+
 .c3 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c3:focus {
+.c3:focus-within {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
@@ -383,14 +996,23 @@ input + .c1 {
   >
     Telephone
   </label>
-  <input
+  <div
     class="c3"
-    data-testid="text-input"
-    id="uuid1"
-    pattern="[0-9]{3}-?[0-9]{3}-?[0-9]{4}"
-    placeholder="Ex.: 555-123-4567"
-    type="tel"
-    value="foo"
-  />
+  >
+    <input
+      class="c4"
+      data-testid="text-input"
+      id="uuid1"
+      pattern="[0-9]{3}-?[0-9]{3}-?[0-9]{4}"
+      placeholder="Ex.: 555-123-4567"
+      type="tel"
+      value="foo"
+    />
+    <span
+      class="c5"
+    >
+      #
+    </span>
+  </div>
 </div>
 `;
diff --git a/packages/react/src/components/text-input/text-input.tsx b/packages/react/src/components/text-input/text-input.tsx
index 731ee6cc6b..2f7c21295a 100644
--- a/packages/react/src/components/text-input/text-input.tsx
+++ b/packages/react/src/components/text-input/text-input.tsx
@@ -8,12 +8,14 @@ import {
     KeyboardEvent,
     MouseEvent,
     ReactElement,
+    ReactNode,
     Ref,
     useCallback,
-    useEffect,
+    useEffect, useImperativeHandle,
+    useMemo, useRef,
     useState,
 } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { useDataAttributes } from '../../hooks/use-data-attributes';
 import { useTranslation } from '../../i18n/use-translation';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
@@ -22,15 +24,67 @@ import { TooltipProps } from '../tooltip/tooltip';
 import { inputsStyle } from './styles/inputs';
 import { useAriaConditionalIds } from '../../hooks/use-aria-conditional-ids';
 import { useId } from '../../hooks/use-id';
+import { focus } from '../../utils/css-state';
 
-export const Input = styled.input<{ isMobile: boolean; }>`
-    ${({ theme, isMobile }) => inputsStyle({ theme, isMobile })}
+interface StyledInputProps {
+    isMobile: boolean;
+    $textAlign?: 'left' | 'right';
+}
+
+const StyleInput = styled.input<StyledInputProps>`
+    ${({ theme, isMobile }) => inputsStyle({ theme, isMobile, isFocusable: false })};
+    border: 0;
+    flex: 1 1 auto;
+    min-height: 100%;
+    text-align: ${({ $textAlign }) => $textAlign};
+    &:focus,
+    &:disabled {
+        border: 0;
+        box-shadow: none;
+    }
+`;
+
+const Adornment = styled.span<{ $position: 'start' | 'end' }>`
+    align-self: center;
+    display: flex;
+    padding-left: ${({ $position }) => ($position === 'start' ? 'var(--spacing-1x)' : undefined)};
+    padding-right: ${({ $position }) => ($position === 'end' ? 'var(--spacing-1x)' : undefined)};
+`;
+
+interface StyledWrapperProps {
+    $disabled?: boolean;
+    $invalid?: boolean;
+}
+
+const Wrapper = styled.div<StyledWrapperProps>`
+    background: ${({ theme }) => theme.component['numeric-input-background-color']};
+    border: 1px solid ${({ theme }) => theme.component['numeric-input-border-color']};
+    border-radius: var(--border-radius);
+    box-sizing: border-box;
+    display: flex;
+    height: var(--size-2x);
+
+    ${({ theme }) => focus({ theme }, { focusType: 'focus-within' })};
+
+    ${({ $invalid, theme }) => $invalid && css`
+        border-color: ${theme.component['numeric-input-error-border-color']};
+`};
+    ${({ $disabled, theme }) => $disabled && css`
+        background-color: ${theme.component['numeric-input-disabled-background-color']};
+        border-color: ${theme.component['numeric-input-disabled-border-color']};
+
+        ${Adornment} {
+            color: ${theme.component['numeric-input-disabled-adornment-text-color']};
+        }
+    `};
 `;
 
 type PartialInputProps = Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
     'inputMode' | 'name' | 'value' | 'autoComplete'>;
 
 interface TextInputProps extends PartialInputProps {
+    adornment?: ReactNode;
+    adornmentPosition?: 'start' | 'end';
     ariaDescribedBy?: string;
     ariaInvalid?: boolean;
     className?: string;
@@ -63,6 +117,8 @@ interface TextInputProps extends PartialInputProps {
 }
 
 export const TextInput = forwardRef(({
+    adornment,
+    adornmentPosition = 'start',
     ariaDescribedBy,
     ariaInvalid,
     className,
@@ -96,6 +152,7 @@ export const TextInput = forwardRef(({
     const [{ validity }, setValidity] = useState({ validity: valid ?? true });
     const fieldId = useId(providedId);
     const dataAttributes = useDataAttributes(otherProps);
+    const inputRef = useRef<HTMLInputElement>(null);
 
     const processedAriaDescribedBy = useAriaConditionalIds([
         { id: ariaDescribedBy },
@@ -103,6 +160,11 @@ export const TextInput = forwardRef(({
         { id: `${fieldId}_hint`, include: !!hint },
     ]);
 
+    useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);
+    const handleAdornmentClick = (): void => {
+        inputRef.current?.focus();
+    };
+
     const handleBlur: (event: FocusEvent<HTMLInputElement>) => void = useCallback((event) => {
         if (valid === undefined) {
             setValidity({ validity: event.currentTarget.checkValidity() });
@@ -131,6 +193,17 @@ export const TextInput = forwardRef(({
         }
     }, [onFocus]);
 
+    const adornmentContent = useMemo(() => (
+        adornment ? (
+            <Adornment
+                onClick={handleAdornmentClick}
+                $position={adornmentPosition}
+            >
+                {adornment}
+            </Adornment>
+        ) : null
+    ), [adornment, adornmentPosition]);
+
     useEffect(() => {
         if (valid !== undefined) {
             setValidity({ validity: valid });
@@ -150,32 +223,37 @@ export const TextInput = forwardRef(({
             hint={hint}
             data-testid="field-container"
         >
-            <Input
-                aria-describedby={processedAriaDescribedBy || undefined}
-                aria-invalid={ariaInvalid}
-                autoComplete={autoComplete}
-                data-testid="text-input"
-                isMobile={isMobile}
-                defaultValue={defaultValue}
-                disabled={disabled}
-                id={fieldId}
-                inputMode={inputMode}
-                name={name}
-                ref={ref}
-                onBlur={handleBlur}
-                onChange={handleChange}
-                onFocus={handleFocus}
-                onMouseUp={onMouseUp}
-                onKeyUp={onKeyUp}
-                onKeyDown={onKeyDown}
-                onInvalid={handleOnInvalid}
-                pattern={pattern}
-                placeholder={placeholder}
-                required={required}
-                type={type || 'text'}
-                value={value}
-                {...dataAttributes /* eslint-disable-line react/jsx-props-no-spreading */}
-            />
+            <Wrapper $disabled={disabled} $invalid={validity}>
+                {(adornment && adornmentPosition === 'start') && adornmentContent}
+                <StyleInput
+                    $textAlign={adornmentPosition === 'end' ? 'right' : 'left'}
+                    aria-describedby={processedAriaDescribedBy || undefined}
+                    aria-invalid={ariaInvalid}
+                    autoComplete={autoComplete}
+                    data-testid="text-input"
+                    isMobile={isMobile}
+                    defaultValue={defaultValue}
+                    disabled={disabled}
+                    id={fieldId}
+                    inputMode={inputMode}
+                    name={name}
+                    ref={inputRef}
+                    onBlur={handleBlur}
+                    onChange={handleChange}
+                    onFocus={handleFocus}
+                    onMouseUp={onMouseUp}
+                    onKeyUp={onKeyUp}
+                    onKeyDown={onKeyDown}
+                    onInvalid={handleOnInvalid}
+                    pattern={pattern}
+                    placeholder={placeholder}
+                    required={required}
+                    type={type || 'text'}
+                    value={value}
+                    {...dataAttributes /* eslint-disable-line react/jsx-props-no-spreading */}
+                />
+                {(adornment && adornmentPosition === 'end') && adornmentContent}
+            </Wrapper>
         </FieldContainer>
     );
 });
diff --git a/packages/storybook/stories/text-input.mdx b/packages/storybook/stories/text-input.mdx
index c59edce886..3c48ea6015 100644
--- a/packages/storybook/stories/text-input.mdx
+++ b/packages/storybook/stories/text-input.mdx
@@ -11,25 +11,28 @@ import * as TextInputStories  from './text-input.stories';
 4. [Properties](#properties)
 
 ## Definition
-Text input allows users to enter a single line of text into a form. 
+Text input allows users to enter a single line of text into a form.
 <Canvas of={TextInputStories.Default} />
 
 ## Usage
-### When to use 
+### When to use
 - Use to enter a short text (usually one or two words) [1].
     - E.g. Name, Last Name, Role, Organization, etc.
 - Use for input that needs unique information that cannot be predicted with a preset of options [2]
 - Use to input data that can be entered more quickly in a free-hand format versus a more complex control [2].
 
-### When not to use 
+### When not to use
 - Do not use for numeric inputs, date input, passwords or long text strings.
     - For long text strings, consider using the text area component.
 - Do not use if a user can only enter an option from a predefined list as it is likely to result in an error. Consider using a control component such as a dropdown, select, or radio button group instead [2].
 
-## Variants 
+## Variants
 ### Default
 <Canvas of={TextInputStories.Default} />
 
+### With icon as adornment
+<Canvas of={TextInputStories.IconAsAdornment} />
+
 ## Properties
 <ArgTypes of={TextInput} />
 
diff --git a/packages/storybook/stories/text-input.stories.tsx b/packages/storybook/stories/text-input.stories.tsx
index 236cf54b16..09164b90c9 100644
--- a/packages/storybook/stories/text-input.stories.tsx
+++ b/packages/storybook/stories/text-input.stories.tsx
@@ -1,4 +1,4 @@
-import { TextInput } from '@equisoft/design-elements-react';
+import {Icon, TextInput} from '@equisoft/design-elements-react';
 import { Meta, StoryObj } from '@storybook/react';
 import { rawCodeParameters } from './utils/parameters';
 
@@ -7,8 +7,12 @@ const TextInputMeta: Meta<typeof TextInput> = {
     component: TextInput,
     args: {
         type: 'text',
+        adornment: '%',
     },
     argTypes: {
+        adornment: {
+            control: { disable: true },
+        },
         onBlur: {
             control: { disable: true },
         },
@@ -45,6 +49,16 @@ export const Default: Story = {
     },
 };
 
+export const IconAsAdornment: Story = {
+    ...TextInputMeta,
+    args: {
+        label: 'First Name',
+        validationErrorMessage: 'Error message',
+        adornment: <Icon name="user" />,
+        hint: 'Hint',
+    },
+};
+
 export const EventCallbacks: Story = {
     ...TextInputMeta,
     parameters: rawCodeParameters,

From a495961a17b200e646092b9e126581a01cc05756 Mon Sep 17 00:00:00 2001
From: Williams Tardif <32278060+WilliamsTardif@users.noreply.github.com>
Date: Mon, 22 Jul 2024 11:53:51 -0400
Subject: [PATCH 2/9] fix(textInput): clean the code

---
 .../src/components/text-input/text-input.tsx  | 34 ++++++++++---------
 .../tokens/component/text-input-tokens.ts     |  5 ++-
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/packages/react/src/components/text-input/text-input.tsx b/packages/react/src/components/text-input/text-input.tsx
index 2f7c21295a..f70a1bbbc6 100644
--- a/packages/react/src/components/text-input/text-input.tsx
+++ b/packages/react/src/components/text-input/text-input.tsx
@@ -11,8 +11,10 @@ import {
     ReactNode,
     Ref,
     useCallback,
-    useEffect, useImperativeHandle,
-    useMemo, useRef,
+    useEffect,
+    useImperativeHandle,
+    useMemo,
+    useRef,
     useState,
 } from 'react';
 import styled, { css } from 'styled-components';
@@ -53,12 +55,12 @@ const Adornment = styled.span<{ $position: 'start' | 'end' }>`
 
 interface StyledWrapperProps {
     $disabled?: boolean;
-    $invalid?: boolean;
+    $valid?: boolean;
 }
 
 const Wrapper = styled.div<StyledWrapperProps>`
-    background: ${({ theme }) => theme.component['numeric-input-background-color']};
-    border: 1px solid ${({ theme }) => theme.component['numeric-input-border-color']};
+    background: ${({ theme }) => theme.component['text-input-background-color']};
+    border: 1px solid ${({ theme }) => theme.component['text-input-border-color']};
     border-radius: var(--border-radius);
     box-sizing: border-box;
     display: flex;
@@ -66,15 +68,15 @@ const Wrapper = styled.div<StyledWrapperProps>`
 
     ${({ theme }) => focus({ theme }, { focusType: 'focus-within' })};
 
-    ${({ $invalid, theme }) => $invalid && css`
-        border-color: ${theme.component['numeric-input-error-border-color']};
+    ${({ $valid, theme }) => !$valid && css`
+        border-color: ${theme.component['text-input-error-border-color']};
 `};
     ${({ $disabled, theme }) => $disabled && css`
-        background-color: ${theme.component['numeric-input-disabled-background-color']};
-        border-color: ${theme.component['numeric-input-disabled-border-color']};
+        background-color: ${theme.component['text-input-disabled-background-color']};
+        border-color: ${theme.component['text-input-disabled-border-color']};
 
         ${Adornment} {
-            color: ${theme.component['numeric-input-disabled-adornment-text-color']};
+            color: ${theme.component['text-input-disabled-adornment-text-color']};
         }
     `};
 `;
@@ -160,11 +162,6 @@ export const TextInput = forwardRef(({
         { id: `${fieldId}_hint`, include: !!hint },
     ]);
 
-    useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);
-    const handleAdornmentClick = (): void => {
-        inputRef.current?.focus();
-    };
-
     const handleBlur: (event: FocusEvent<HTMLInputElement>) => void = useCallback((event) => {
         if (valid === undefined) {
             setValidity({ validity: event.currentTarget.checkValidity() });
@@ -193,6 +190,11 @@ export const TextInput = forwardRef(({
         }
     }, [onFocus]);
 
+    useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);
+    const handleAdornmentClick = (): void => {
+        inputRef.current?.focus();
+    };
+
     const adornmentContent = useMemo(() => (
         adornment ? (
             <Adornment
@@ -223,7 +225,7 @@ export const TextInput = forwardRef(({
             hint={hint}
             data-testid="field-container"
         >
-            <Wrapper $disabled={disabled} $invalid={validity}>
+            <Wrapper $disabled={disabled} $valid={validity}>
                 {(adornment && adornmentPosition === 'start') && adornmentContent}
                 <StyleInput
                     $textAlign={adornmentPosition === 'end' ? 'right' : 'left'}
diff --git a/packages/react/src/themes/tokens/component/text-input-tokens.ts b/packages/react/src/themes/tokens/component/text-input-tokens.ts
index c28cf83442..26491cf073 100644
--- a/packages/react/src/themes/tokens/component/text-input-tokens.ts
+++ b/packages/react/src/themes/tokens/component/text-input-tokens.ts
@@ -10,7 +10,8 @@ export type TextInputTokens =
     | 'text-input-disabled-background-color'
     | 'text-input-disabled-border-color'
     | 'text-input-disabled-text-color'
-    | 'text-input-placeholder-disabled-text-color';
+    | 'text-input-placeholder-disabled-text-color'
+    | 'text-input-disabled-adornment-text-color';
 
 export type TextInputTokenValue = AliasTokens | RefTokens;
 
@@ -32,4 +33,6 @@ export const defaultTextInputTokens: TextInputTokenMap = {
 
     'text-input-placeholder-text-color': 'color-control-auxiliary',
     'text-input-placeholder-disabled-text-color': 'color-control-auxiliary-disabled',
+
+    'text-input-disabled-adornment-text-color': 'color-control-auxiliary-disabled',
 };

From 22e275d395f46e972ca0f19d89bd9b6507f43f4c Mon Sep 17 00:00:00 2001
From: Williams Tardif <32278060+WilliamsTardif@users.noreply.github.com>
Date: Mon, 22 Jul 2024 16:34:56 -0400
Subject: [PATCH 3/9] fix(TextInput): fixing tests

---
 .../money-input/money-input.test.tsx.snap     | 222 +++++++----
 .../password-input.test.tsx.snap              | 354 ++++++++----------
 .../text-input/text-input.test.tsx.snap       |   6 -
 3 files changed, 309 insertions(+), 273 deletions(-)

diff --git a/packages/react/src/components/money-input/money-input.test.tsx.snap b/packages/react/src/components/money-input/money-input.test.tsx.snap
index 8f48aa6938..6430252aa9 100644
--- a/packages/react/src/components/money-input/money-input.test.tsx.snap
+++ b/packages/react/src/components/money-input/money-input.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`CurrencyInput Component matches snapshot (en-CA) 1`] = `
   margin-bottom: var(--spacing-half);
 }
 
-.c2 {
+.c3 {
   background: #FFFFFF;
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
@@ -33,56 +33,80 @@ exports[`CurrencyInput Component matches snapshot (en-CA) 1`] = `
   outline: none;
   padding: 0 var(--spacing-1x);
   width: 100%;
+  border: 0;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  min-height: 100%;
+  text-align: left;
 }
 
-.c2::-webkit-input-placeholder {
+.c3::-webkit-input-placeholder {
   color: #60666E;
 }
 
-.c2::-moz-placeholder {
+.c3::-moz-placeholder {
   color: #60666E;
 }
 
-.c2:-ms-input-placeholder {
+.c3:-ms-input-placeholder {
   color: #60666E;
 }
 
-.c2::placeholder {
+.c3::placeholder {
   color: #60666E;
 }
 
-.c2:disabled {
+.c3:disabled {
   background-color: #F1F2F2;
   border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
-.c2:disabled,
-.c2:disabled::-webkit-input-placeholder {
+.c3:disabled,
+.c3:disabled::-webkit-input-placeholder {
   color: #B7BBC2;
 }
 
-.c2:disabled,
-.c2:disabled::-moz-placeholder {
+.c3:disabled,
+.c3:disabled::-moz-placeholder {
   color: #B7BBC2;
 }
 
-.c2:disabled,
-.c2:disabled:-ms-input-placeholder {
+.c3:disabled,
+.c3:disabled:-ms-input-placeholder {
   color: #B7BBC2;
 }
 
-.c2:disabled,
-.c2:disabled::placeholder {
+.c3:disabled,
+.c3:disabled::placeholder {
   color: #B7BBC2;
 }
 
+.c3:focus,
+.c3:disabled {
+  border: 0;
+  box-shadow: none;
+}
+
+.c2 {
+  background: #FFFFFF;
+  border: 1px solid #60666E;
+  border-radius: var(--border-radius);
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: var(--size-2x);
+}
+
 .c2 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c2:focus {
+.c2:focus-within {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
@@ -100,15 +124,19 @@ exports[`CurrencyInput Component matches snapshot (en-CA) 1`] = `
     class="c1"
     data-testid="field-container"
   >
-    <input
+    <div
       class="c2"
-      data-testid="text-input"
-      id="uuid1"
-      inputmode="numeric"
-      placeholder="$"
-      type="text"
-      value="$100.00"
-    />
+    >
+      <input
+        class="c3"
+        data-testid="text-input"
+        id="uuid1"
+        inputmode="numeric"
+        placeholder="$"
+        type="text"
+        value="$100.00"
+      />
+    </div>
   </div>
 </div>
 `;
@@ -128,7 +156,7 @@ exports[`CurrencyInput Component matches snapshot (en-US) 1`] = `
   margin-bottom: var(--spacing-half);
 }
 
-.c2 {
+.c3 {
   background: #FFFFFF;
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
@@ -146,56 +174,80 @@ exports[`CurrencyInput Component matches snapshot (en-US) 1`] = `
   outline: none;
   padding: 0 var(--spacing-1x);
   width: 100%;
+  border: 0;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  min-height: 100%;
+  text-align: left;
 }
 
-.c2::-webkit-input-placeholder {
+.c3::-webkit-input-placeholder {
   color: #60666E;
 }
 
-.c2::-moz-placeholder {
+.c3::-moz-placeholder {
   color: #60666E;
 }
 
-.c2:-ms-input-placeholder {
+.c3:-ms-input-placeholder {
   color: #60666E;
 }
 
-.c2::placeholder {
+.c3::placeholder {
   color: #60666E;
 }
 
-.c2:disabled {
+.c3:disabled {
   background-color: #F1F2F2;
   border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
-.c2:disabled,
-.c2:disabled::-webkit-input-placeholder {
+.c3:disabled,
+.c3:disabled::-webkit-input-placeholder {
   color: #B7BBC2;
 }
 
-.c2:disabled,
-.c2:disabled::-moz-placeholder {
+.c3:disabled,
+.c3:disabled::-moz-placeholder {
   color: #B7BBC2;
 }
 
-.c2:disabled,
-.c2:disabled:-ms-input-placeholder {
+.c3:disabled,
+.c3:disabled:-ms-input-placeholder {
   color: #B7BBC2;
 }
 
-.c2:disabled,
-.c2:disabled::placeholder {
+.c3:disabled,
+.c3:disabled::placeholder {
   color: #B7BBC2;
 }
 
+.c3:focus,
+.c3:disabled {
+  border: 0;
+  box-shadow: none;
+}
+
+.c2 {
+  background: #FFFFFF;
+  border: 1px solid #60666E;
+  border-radius: var(--border-radius);
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: var(--size-2x);
+}
+
 .c2 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c2:focus {
+.c2:focus-within {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
@@ -213,15 +265,19 @@ exports[`CurrencyInput Component matches snapshot (en-US) 1`] = `
     class="c1"
     data-testid="field-container"
   >
-    <input
+    <div
       class="c2"
-      data-testid="text-input"
-      id="uuid1"
-      inputmode="numeric"
-      placeholder="$"
-      type="text"
-      value="$100.00"
-    />
+    >
+      <input
+        class="c3"
+        data-testid="text-input"
+        id="uuid1"
+        inputmode="numeric"
+        placeholder="$"
+        type="text"
+        value="$100.00"
+      />
+    </div>
   </div>
 </div>
 `;
@@ -241,7 +297,7 @@ exports[`CurrencyInput Component matches snapshot (fr-CA) 1`] = `
   margin-bottom: var(--spacing-half);
 }
 
-.c2 {
+.c3 {
   background: #FFFFFF;
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
@@ -259,56 +315,80 @@ exports[`CurrencyInput Component matches snapshot (fr-CA) 1`] = `
   outline: none;
   padding: 0 var(--spacing-1x);
   width: 100%;
+  border: 0;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  min-height: 100%;
+  text-align: left;
 }
 
-.c2::-webkit-input-placeholder {
+.c3::-webkit-input-placeholder {
   color: #60666E;
 }
 
-.c2::-moz-placeholder {
+.c3::-moz-placeholder {
   color: #60666E;
 }
 
-.c2:-ms-input-placeholder {
+.c3:-ms-input-placeholder {
   color: #60666E;
 }
 
-.c2::placeholder {
+.c3::placeholder {
   color: #60666E;
 }
 
-.c2:disabled {
+.c3:disabled {
   background-color: #F1F2F2;
   border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
-.c2:disabled,
-.c2:disabled::-webkit-input-placeholder {
+.c3:disabled,
+.c3:disabled::-webkit-input-placeholder {
   color: #B7BBC2;
 }
 
-.c2:disabled,
-.c2:disabled::-moz-placeholder {
+.c3:disabled,
+.c3:disabled::-moz-placeholder {
   color: #B7BBC2;
 }
 
-.c2:disabled,
-.c2:disabled:-ms-input-placeholder {
+.c3:disabled,
+.c3:disabled:-ms-input-placeholder {
   color: #B7BBC2;
 }
 
-.c2:disabled,
-.c2:disabled::placeholder {
+.c3:disabled,
+.c3:disabled::placeholder {
   color: #B7BBC2;
 }
 
+.c3:focus,
+.c3:disabled {
+  border: 0;
+  box-shadow: none;
+}
+
+.c2 {
+  background: #FFFFFF;
+  border: 1px solid #60666E;
+  border-radius: var(--border-radius);
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: var(--size-2x);
+}
+
 .c2 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c2:focus {
+.c2:focus-within {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
@@ -326,15 +406,19 @@ exports[`CurrencyInput Component matches snapshot (fr-CA) 1`] = `
     class="c1"
     data-testid="field-container"
   >
-    <input
+    <div
       class="c2"
-      data-testid="text-input"
-      id="uuid1"
-      inputmode="numeric"
-      placeholder="$"
-      type="text"
-      value="100,00 $"
-    />
+    >
+      <input
+        class="c3"
+        data-testid="text-input"
+        id="uuid1"
+        inputmode="numeric"
+        placeholder="$"
+        type="text"
+        value="100,00 $"
+      />
+    </div>
   </div>
 </div>
 `;
diff --git a/packages/react/src/components/password-input/password-input.test.tsx.snap b/packages/react/src/components/password-input/password-input.test.tsx.snap
index 459d17d005..51e243f824 100644
--- a/packages/react/src/components/password-input/password-input.test.tsx.snap
+++ b/packages/react/src/components/password-input/password-input.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
-.c6 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -41,23 +41,24 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
   user-select: none;
 }
 
-.c6 {
+.c5 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c6:focus {
+.c5:focus {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
-.c6 > svg {
+.c5 > svg {
+  color: inherit;
   height: var(--size-1x);
   width: var(--size-1x);
 }
 
-.c7 {
+.c6 {
   background-color: transparent;
   border-color: transparent;
   color: #60666E;
@@ -66,43 +67,42 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
   width: var(--size-1halfx);
 }
 
-.c7 {
+.c6 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c7:focus {
+.c6:focus {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
-.c7:hover,
-.c7[aria-expanded='true'] {
+.c6:hover,
+.c6[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
   color: #000000;
 }
 
-.c7[aria-disabled='true'] {
+.c6:disabled {
   background-color: transparent;
   border-color: transparent;
   color: #B7BBC2;
-  cursor: not-allowed;
 }
 
-.c7 > svg {
+.c6 > svg {
   height: var(--size-1x);
   width: var(--size-1x);
 }
 
-.c10 {
+.c9 {
   height: 1.25rem;
   position: absolute;
   width: 1rem;
 }
 
-.c10::before {
+.c9::before {
   border-style: solid;
   content: '';
   display: block;
@@ -111,7 +111,7 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
   width: 0;
 }
 
-.c10::after {
+.c9::after {
   border-style: solid;
   content: '';
   display: block;
@@ -121,7 +121,7 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
   width: 0;
 }
 
-.c8 {
+.c7 {
   background-color: #60666E;
   border: 1px solid #FFFFFF;
   border-radius: var(--border-radius-half);
@@ -147,7 +147,7 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
   z-index: 1000;
 }
 
-.c8[data-popper-placement*="bottom"] > .c9 {
+.c7[data-popper-placement*="bottom"] > .c8 {
   height: 1rem;
   left: 0;
   margin-top: -0.375rem;
@@ -155,19 +155,19 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
   width: 1rem;
 }
 
-.c8[data-popper-placement*="bottom"] > .c9::before {
+.c7[data-popper-placement*="bottom"] > .c8::before {
   border-color: transparent transparent #FFFFFF transparent;
   border-width: 0 0.5rem 0.5rem;
   position: absolute;
   top: -2px;
 }
 
-.c8[data-popper-placement*="bottom"] > .c9::after {
+.c7[data-popper-placement*="bottom"] > .c8::after {
   border-color: transparent transparent #60666E transparent;
   border-width: 0 0.5rem 0.5rem;
 }
 
-.c8[data-popper-placement*="top"] > .c9 {
+.c7[data-popper-placement*="top"] > .c8 {
   bottom: 0;
   height: 0;
   left: 0;
@@ -175,58 +175,58 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
   width: 1rem;
 }
 
-.c8[data-popper-placement*="top"] > .c9::before {
+.c7[data-popper-placement*="top"] > .c8::before {
   border-color: #FFFFFF transparent transparent transparent;
   border-width: 0.5rem 0.5rem 0;
   position: absolute;
   top: 0;
 }
 
-.c8[data-popper-placement*="top"] > .c9::after {
+.c7[data-popper-placement*="top"] > .c8::after {
   border-color: #60666E transparent transparent transparent;
   border-width: 0.5rem 0.5rem 0;
   top: -0.1rem;
 }
 
-.c8[data-popper-placement*="right"] > .c9 {
+.c7[data-popper-placement*="right"] > .c8 {
   height: 1rem;
   left: 0;
   margin-left: -0.8rem;
   width: 1rem;
 }
 
-.c8[data-popper-placement*="right"] > .c9::before {
+.c7[data-popper-placement*="right"] > .c8::before {
   border-color: transparent #FFFFFF transparent transparent;
   border-width: 0.5rem 0.5rem 0.5rem 0;
 }
 
-.c8[data-popper-placement*="right"] > .c9::after {
+.c7[data-popper-placement*="right"] > .c8::after {
   border-color: transparent #60666E transparent transparent;
   border-width: 0.5rem 0.5rem 0.5rem 0;
   left: 0.375rem;
   top: 0;
 }
 
-.c8[data-popper-placement*="left"] > .c9 {
+.c7[data-popper-placement*="left"] > .c8 {
   height: 1rem;
   margin-right: -0.7rem;
   right: -1px;
   width: 1rem;
 }
 
-.c8[data-popper-placement*="left"] > .c9::before {
+.c7[data-popper-placement*="left"] > .c8::before {
   border-color: transparent transparent transparent #FFFFFF;
   border-width: 0.5rem 0 0.5rem 0.5rem;
 }
 
-.c8[data-popper-placement*="left"] > .c9::after {
+.c7[data-popper-placement*="left"] > .c8::after {
   border-color: transparent transparent transparent #60666E;
   border-width: 0.5rem 0 0.5rem 0.5rem;
   left: 0.17rem;
   top: 0;
 }
 
-.c11 {
+.c10 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -237,7 +237,7 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
   display: flex;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -251,12 +251,12 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
   width: fit-content;
 }
 
-.c5 {
+.c4 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c5:focus {
+.c4:focus {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
@@ -276,6 +276,18 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
   margin-bottom: var(--spacing-half);
 }
 
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
 .c2 {
   background: #FFFFFF;
   border: 1px solid #60666E;
@@ -294,6 +306,7 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
   outline: none;
   padding: 0 var(--spacing-1x);
   width: 100%;
+  padding-right: var(--size-2x);
 }
 
 .c2::-webkit-input-placeholder {
@@ -338,34 +351,7 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
   color: #B7BBC2;
 }
 
-.c2 {
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-}
-
-.c2:focus {
-  box-shadow: 0 0 0 2px #006296;
-  outline: 2px solid #84C6EA;
-  outline-offset: -2px;
-}
-
-.c1 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-}
-
 .c3 {
-  padding-right: var(--size-2x);
-}
-
-.c4 {
   position: absolute;
   right: 0.25rem;
 }
@@ -379,7 +365,7 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
     <input
       aria-invalid="false"
       autocomplete="current-password"
-      class="c2 c3"
+      class="c2"
       data-testid="password-input"
       disabled=""
       id="uuid1"
@@ -388,11 +374,11 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
       value="Pass123"
     />
     <div
-      class="c4"
+      class="c3"
     >
       <span
         aria-describedby="uuid2"
-        class="c5"
+        class="c4"
         data-testid="tooltip"
         id="tooltip-trigger-uuid2"
         tabindex="-1"
@@ -400,7 +386,7 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
         <button
           aria-label="Show password in plain text."
           aria-pressed="false"
-          class="c6 c7"
+          class="c5 c6"
           data-testid="show-password-button"
           disabled=""
           type="button"
@@ -416,7 +402,7 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
       </span>
       <div
         aria-hidden="true"
-        class="c8"
+        class="c7"
         data-popper-interactive="false"
         data-testid="tooltip-content-container"
         id="uuid2"
@@ -424,12 +410,12 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
         style="position:absolute;left:0;top:0"
       >
         <div
-          class="c9 c10"
+          class="c8 c9"
           data-popper-arrow="true"
           style="position:absolute"
         />
         <div
-          class="c11"
+          class="c10"
         >
           Show password in plain text.
         </div>
@@ -440,7 +426,7 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
 `;
 
 exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
-.c8 {
+.c7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -480,23 +466,24 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
   user-select: none;
 }
 
-.c8 {
+.c7 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c8:focus {
+.c7:focus {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
-.c8 > svg {
+.c7 > svg {
+  color: inherit;
   height: var(--size-1x);
   width: var(--size-1x);
 }
 
-.c9 {
+.c8 {
   background-color: transparent;
   border-color: transparent;
   color: #60666E;
@@ -505,32 +492,31 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
   width: var(--size-1halfx);
 }
 
-.c9 {
+.c8 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c9:focus {
+.c8:focus {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
-.c9:hover,
-.c9[aria-expanded='true'] {
+.c8:hover,
+.c8[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
   color: #000000;
 }
 
-.c9[aria-disabled='true'] {
+.c8:disabled {
   background-color: transparent;
   border-color: transparent;
   color: #B7BBC2;
-  cursor: not-allowed;
 }
 
-.c9 > svg {
+.c8 > svg {
   height: var(--size-1x);
   width: var(--size-1x);
 }
@@ -561,13 +547,13 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
   margin-right: var(--spacing-base);
 }
 
-.c12 {
+.c11 {
   height: 1.25rem;
   position: absolute;
   width: 1rem;
 }
 
-.c12::before {
+.c11::before {
   border-style: solid;
   content: '';
   display: block;
@@ -576,7 +562,7 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
   width: 0;
 }
 
-.c12::after {
+.c11::after {
   border-style: solid;
   content: '';
   display: block;
@@ -586,7 +572,7 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
   width: 0;
 }
 
-.c10 {
+.c9 {
   background-color: #60666E;
   border: 1px solid #FFFFFF;
   border-radius: var(--border-radius-half);
@@ -612,7 +598,7 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
   z-index: 1000;
 }
 
-.c10[data-popper-placement*="bottom"] > .c11 {
+.c9[data-popper-placement*="bottom"] > .c10 {
   height: 1rem;
   left: 0;
   margin-top: -0.375rem;
@@ -620,19 +606,19 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
   width: 1rem;
 }
 
-.c10[data-popper-placement*="bottom"] > .c11::before {
+.c9[data-popper-placement*="bottom"] > .c10::before {
   border-color: transparent transparent #FFFFFF transparent;
   border-width: 0 0.5rem 0.5rem;
   position: absolute;
   top: -2px;
 }
 
-.c10[data-popper-placement*="bottom"] > .c11::after {
+.c9[data-popper-placement*="bottom"] > .c10::after {
   border-color: transparent transparent #60666E transparent;
   border-width: 0 0.5rem 0.5rem;
 }
 
-.c10[data-popper-placement*="top"] > .c11 {
+.c9[data-popper-placement*="top"] > .c10 {
   bottom: 0;
   height: 0;
   left: 0;
@@ -640,58 +626,58 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
   width: 1rem;
 }
 
-.c10[data-popper-placement*="top"] > .c11::before {
+.c9[data-popper-placement*="top"] > .c10::before {
   border-color: #FFFFFF transparent transparent transparent;
   border-width: 0.5rem 0.5rem 0;
   position: absolute;
   top: 0;
 }
 
-.c10[data-popper-placement*="top"] > .c11::after {
+.c9[data-popper-placement*="top"] > .c10::after {
   border-color: #60666E transparent transparent transparent;
   border-width: 0.5rem 0.5rem 0;
   top: -0.1rem;
 }
 
-.c10[data-popper-placement*="right"] > .c11 {
+.c9[data-popper-placement*="right"] > .c10 {
   height: 1rem;
   left: 0;
   margin-left: -0.8rem;
   width: 1rem;
 }
 
-.c10[data-popper-placement*="right"] > .c11::before {
+.c9[data-popper-placement*="right"] > .c10::before {
   border-color: transparent #FFFFFF transparent transparent;
   border-width: 0.5rem 0.5rem 0.5rem 0;
 }
 
-.c10[data-popper-placement*="right"] > .c11::after {
+.c9[data-popper-placement*="right"] > .c10::after {
   border-color: transparent #60666E transparent transparent;
   border-width: 0.5rem 0.5rem 0.5rem 0;
   left: 0.375rem;
   top: 0;
 }
 
-.c10[data-popper-placement*="left"] > .c11 {
+.c9[data-popper-placement*="left"] > .c10 {
   height: 1rem;
   margin-right: -0.7rem;
   right: -1px;
   width: 1rem;
 }
 
-.c10[data-popper-placement*="left"] > .c11::before {
+.c9[data-popper-placement*="left"] > .c10::before {
   border-color: transparent transparent transparent #FFFFFF;
   border-width: 0.5rem 0 0.5rem 0.5rem;
 }
 
-.c10[data-popper-placement*="left"] > .c11::after {
+.c9[data-popper-placement*="left"] > .c10::after {
   border-color: transparent transparent transparent #60666E;
   border-width: 0.5rem 0 0.5rem 0.5rem;
   left: 0.17rem;
   top: 0;
 }
 
-.c13 {
+.c12 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -702,7 +688,7 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
   display: flex;
 }
 
-.c7 {
+.c6 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -716,12 +702,12 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
   width: fit-content;
 }
 
-.c7 {
+.c6 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c7:focus {
+.c6:focus {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
@@ -741,6 +727,18 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
   margin-bottom: var(--spacing-half);
 }
 
+.c3 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
 .c4 {
   background: #FFFFFF;
   border: 1px solid #60666E;
@@ -759,6 +757,7 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
   outline: none;
   padding: 0 var(--spacing-1x);
   width: 100%;
+  padding-right: var(--size-2x);
 }
 
 .c4::-webkit-input-placeholder {
@@ -803,34 +802,7 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
   color: #B7BBC2;
 }
 
-.c4 {
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-}
-
-.c4:focus {
-  box-shadow: 0 0 0 2px #006296;
-  outline: 2px solid #84C6EA;
-  outline-offset: -2px;
-}
-
-.c3 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-}
-
 .c5 {
-  padding-right: var(--size-2x);
-}
-
-.c6 {
   position: absolute;
   right: 0.25rem;
 }
@@ -860,7 +832,7 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
     <input
       aria-invalid="true"
       autocomplete="current-password"
-      class="c4 c5"
+      class="c4"
       data-testid="password-input"
       id="uuid1"
       name="password"
@@ -868,11 +840,11 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
       value="Pass123"
     />
     <div
-      class="c6"
+      class="c5"
     >
       <span
         aria-describedby="uuid2"
-        class="c7"
+        class="c6"
         data-testid="tooltip"
         id="tooltip-trigger-uuid2"
         tabindex="-1"
@@ -880,7 +852,7 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
         <button
           aria-label="Show password in plain text."
           aria-pressed="false"
-          class="c8 c9"
+          class="c7 c8"
           data-testid="show-password-button"
           type="button"
         >
@@ -895,7 +867,7 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
       </span>
       <div
         aria-hidden="true"
-        class="c10"
+        class="c9"
         data-popper-interactive="false"
         data-testid="tooltip-content-container"
         id="uuid2"
@@ -903,12 +875,12 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
         style="position:absolute;left:0;top:0"
       >
         <div
-          class="c11 c12"
+          class="c10 c11"
           data-popper-arrow="true"
           style="position:absolute"
         />
         <div
-          class="c13"
+          class="c12"
         >
           Show password in plain text.
         </div>
@@ -919,7 +891,7 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
 `;
 
 exports[`PasswordInput matches the snapshot (Normal) 1`] = `
-.c6 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -959,23 +931,24 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
   user-select: none;
 }
 
-.c6 {
+.c5 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c6:focus {
+.c5:focus {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
-.c6 > svg {
+.c5 > svg {
+  color: inherit;
   height: var(--size-1x);
   width: var(--size-1x);
 }
 
-.c7 {
+.c6 {
   background-color: transparent;
   border-color: transparent;
   color: #60666E;
@@ -984,43 +957,42 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
   width: var(--size-1halfx);
 }
 
-.c7 {
+.c6 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c7:focus {
+.c6:focus {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
-.c7:hover,
-.c7[aria-expanded='true'] {
+.c6:hover,
+.c6[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
   color: #000000;
 }
 
-.c7[aria-disabled='true'] {
+.c6:disabled {
   background-color: transparent;
   border-color: transparent;
   color: #B7BBC2;
-  cursor: not-allowed;
 }
 
-.c7 > svg {
+.c6 > svg {
   height: var(--size-1x);
   width: var(--size-1x);
 }
 
-.c10 {
+.c9 {
   height: 1.25rem;
   position: absolute;
   width: 1rem;
 }
 
-.c10::before {
+.c9::before {
   border-style: solid;
   content: '';
   display: block;
@@ -1029,7 +1001,7 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
   width: 0;
 }
 
-.c10::after {
+.c9::after {
   border-style: solid;
   content: '';
   display: block;
@@ -1039,7 +1011,7 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
   width: 0;
 }
 
-.c8 {
+.c7 {
   background-color: #60666E;
   border: 1px solid #FFFFFF;
   border-radius: var(--border-radius-half);
@@ -1065,7 +1037,7 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
   z-index: 1000;
 }
 
-.c8[data-popper-placement*="bottom"] > .c9 {
+.c7[data-popper-placement*="bottom"] > .c8 {
   height: 1rem;
   left: 0;
   margin-top: -0.375rem;
@@ -1073,19 +1045,19 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
   width: 1rem;
 }
 
-.c8[data-popper-placement*="bottom"] > .c9::before {
+.c7[data-popper-placement*="bottom"] > .c8::before {
   border-color: transparent transparent #FFFFFF transparent;
   border-width: 0 0.5rem 0.5rem;
   position: absolute;
   top: -2px;
 }
 
-.c8[data-popper-placement*="bottom"] > .c9::after {
+.c7[data-popper-placement*="bottom"] > .c8::after {
   border-color: transparent transparent #60666E transparent;
   border-width: 0 0.5rem 0.5rem;
 }
 
-.c8[data-popper-placement*="top"] > .c9 {
+.c7[data-popper-placement*="top"] > .c8 {
   bottom: 0;
   height: 0;
   left: 0;
@@ -1093,58 +1065,58 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
   width: 1rem;
 }
 
-.c8[data-popper-placement*="top"] > .c9::before {
+.c7[data-popper-placement*="top"] > .c8::before {
   border-color: #FFFFFF transparent transparent transparent;
   border-width: 0.5rem 0.5rem 0;
   position: absolute;
   top: 0;
 }
 
-.c8[data-popper-placement*="top"] > .c9::after {
+.c7[data-popper-placement*="top"] > .c8::after {
   border-color: #60666E transparent transparent transparent;
   border-width: 0.5rem 0.5rem 0;
   top: -0.1rem;
 }
 
-.c8[data-popper-placement*="right"] > .c9 {
+.c7[data-popper-placement*="right"] > .c8 {
   height: 1rem;
   left: 0;
   margin-left: -0.8rem;
   width: 1rem;
 }
 
-.c8[data-popper-placement*="right"] > .c9::before {
+.c7[data-popper-placement*="right"] > .c8::before {
   border-color: transparent #FFFFFF transparent transparent;
   border-width: 0.5rem 0.5rem 0.5rem 0;
 }
 
-.c8[data-popper-placement*="right"] > .c9::after {
+.c7[data-popper-placement*="right"] > .c8::after {
   border-color: transparent #60666E transparent transparent;
   border-width: 0.5rem 0.5rem 0.5rem 0;
   left: 0.375rem;
   top: 0;
 }
 
-.c8[data-popper-placement*="left"] > .c9 {
+.c7[data-popper-placement*="left"] > .c8 {
   height: 1rem;
   margin-right: -0.7rem;
   right: -1px;
   width: 1rem;
 }
 
-.c8[data-popper-placement*="left"] > .c9::before {
+.c7[data-popper-placement*="left"] > .c8::before {
   border-color: transparent transparent transparent #FFFFFF;
   border-width: 0.5rem 0 0.5rem 0.5rem;
 }
 
-.c8[data-popper-placement*="left"] > .c9::after {
+.c7[data-popper-placement*="left"] > .c8::after {
   border-color: transparent transparent transparent #60666E;
   border-width: 0.5rem 0 0.5rem 0.5rem;
   left: 0.17rem;
   top: 0;
 }
 
-.c11 {
+.c10 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1155,7 +1127,7 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
   display: flex;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1169,12 +1141,12 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
   width: fit-content;
 }
 
-.c5 {
+.c4 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c5:focus {
+.c4:focus {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
@@ -1194,6 +1166,18 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
   margin-bottom: var(--spacing-half);
 }
 
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+}
+
 .c2 {
   background: #FFFFFF;
   border: 1px solid #60666E;
@@ -1212,6 +1196,7 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
   outline: none;
   padding: 0 var(--spacing-1x);
   width: 100%;
+  padding-right: var(--size-2x);
 }
 
 .c2::-webkit-input-placeholder {
@@ -1256,34 +1241,7 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
   color: #B7BBC2;
 }
 
-.c2 {
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-}
-
-.c2:focus {
-  box-shadow: 0 0 0 2px #006296;
-  outline: 2px solid #84C6EA;
-  outline-offset: -2px;
-}
-
-.c1 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-}
-
 .c3 {
-  padding-right: var(--size-2x);
-}
-
-.c4 {
   position: absolute;
   right: 0.25rem;
 }
@@ -1297,7 +1255,7 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
     <input
       aria-invalid="false"
       autocomplete="current-password"
-      class="c2 c3"
+      class="c2"
       data-testid="password-input"
       id="uuid1"
       name="password"
@@ -1305,11 +1263,11 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
       value="Pass123"
     />
     <div
-      class="c4"
+      class="c3"
     >
       <span
         aria-describedby="uuid2"
-        class="c5"
+        class="c4"
         data-testid="tooltip"
         id="tooltip-trigger-uuid2"
         tabindex="-1"
@@ -1317,7 +1275,7 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
         <button
           aria-label="Show password in plain text."
           aria-pressed="false"
-          class="c6 c7"
+          class="c5 c6"
           data-testid="show-password-button"
           type="button"
         >
@@ -1332,7 +1290,7 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
       </span>
       <div
         aria-hidden="true"
-        class="c8"
+        class="c7"
         data-popper-interactive="false"
         data-testid="tooltip-content-container"
         id="uuid2"
@@ -1340,12 +1298,12 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
         style="position:absolute;left:0;top:0"
       >
         <div
-          class="c9 c10"
+          class="c8 c9"
           data-popper-arrow="true"
           style="position:absolute"
         />
         <div
-          class="c11"
+          class="c10"
         >
           Show password in plain text.
         </div>
diff --git a/packages/react/src/components/text-input/text-input.test.tsx.snap b/packages/react/src/components/text-input/text-input.test.tsx.snap
index e904214eb9..bc9b5b58ca 100644
--- a/packages/react/src/components/text-input/text-input.test.tsx.snap
+++ b/packages/react/src/components/text-input/text-input.test.tsx.snap
@@ -119,7 +119,6 @@ input + .c1 {
   display: -ms-flexbox;
   display: flex;
   height: var(--size-2x);
-  border-color: #CD2C23;
   background-color: #F1F2F2;
   border-color: #B7BBC2;
 }
@@ -282,7 +281,6 @@ input + .c1 {
   display: -ms-flexbox;
   display: flex;
   height: var(--size-2x);
-  border-color: #CD2C23;
 }
 
 .c3 {
@@ -443,7 +441,6 @@ input + .c1 {
   display: -ms-flexbox;
   display: flex;
   height: var(--size-2x);
-  border-color: #CD2C23;
 }
 
 .c3 {
@@ -614,7 +611,6 @@ input + .c1 {
   display: -ms-flexbox;
   display: flex;
   height: var(--size-2x);
-  border-color: #CD2C23;
 }
 
 .c3 {
@@ -795,7 +791,6 @@ input + .c1 {
   display: -ms-flexbox;
   display: flex;
   height: var(--size-2x);
-  border-color: #CD2C23;
 }
 
 .c3 {
@@ -971,7 +966,6 @@ input + .c1 {
   display: -ms-flexbox;
   display: flex;
   height: var(--size-2x);
-  border-color: #CD2C23;
 }
 
 .c3 {

From 1d204d19f6fbf818ea30d0631ea948799ee3768b Mon Sep 17 00:00:00 2001
From: Williams Tardif <32278060+WilliamsTardif@users.noreply.github.com>
Date: Mon, 22 Jul 2024 16:51:26 -0400
Subject: [PATCH 4/9] fix(TextInput): fix linting

---
 packages/storybook/stories/text-input.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/storybook/stories/text-input.stories.tsx b/packages/storybook/stories/text-input.stories.tsx
index 09164b90c9..75e0e85707 100644
--- a/packages/storybook/stories/text-input.stories.tsx
+++ b/packages/storybook/stories/text-input.stories.tsx
@@ -1,4 +1,4 @@
-import {Icon, TextInput} from '@equisoft/design-elements-react';
+import { Icon, TextInput } from '@equisoft/design-elements-react';
 import { Meta, StoryObj } from '@storybook/react';
 import { rawCodeParameters } from './utils/parameters';
 

From 6e19e99ac44dd5d39144bbed4e51d3e44abe0d8c Mon Sep 17 00:00:00 2001
From: Williams Tardif <32278060+WilliamsTardif@users.noreply.github.com>
Date: Fri, 2 Aug 2024 11:57:26 -0400
Subject: [PATCH 5/9] feat(TextInput, MoneyInput): test and new props for
 textInput

---
 .../money-input/money-input.test.tsx.snap     |  3 -
 .../components/text-input/text-input.test.tsx |  8 +--
 .../text-input/text-input.test.tsx.snap       | 68 ++++++++++++-------
 .../src/components/text-input/text-input.tsx  | 63 +++++++++--------
 .../tokens/component/text-input-tokens.ts     |  5 +-
 packages/storybook/stories/text-input.mdx     |  3 +
 .../storybook/stories/text-input.stories.tsx  | 16 +++--
 7 files changed, 99 insertions(+), 67 deletions(-)

diff --git a/packages/react/src/components/money-input/money-input.test.tsx.snap b/packages/react/src/components/money-input/money-input.test.tsx.snap
index 6430252aa9..1a7338f42d 100644
--- a/packages/react/src/components/money-input/money-input.test.tsx.snap
+++ b/packages/react/src/components/money-input/money-input.test.tsx.snap
@@ -38,7 +38,6 @@ exports[`CurrencyInput Component matches snapshot (en-CA) 1`] = `
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   min-height: 100%;
-  text-align: left;
 }
 
 .c3::-webkit-input-placeholder {
@@ -179,7 +178,6 @@ exports[`CurrencyInput Component matches snapshot (en-US) 1`] = `
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   min-height: 100%;
-  text-align: left;
 }
 
 .c3::-webkit-input-placeholder {
@@ -320,7 +318,6 @@ exports[`CurrencyInput Component matches snapshot (fr-CA) 1`] = `
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   min-height: 100%;
-  text-align: left;
 }
 
 .c3::-webkit-input-placeholder {
diff --git a/packages/react/src/components/text-input/text-input.test.tsx b/packages/react/src/components/text-input/text-input.test.tsx
index 64b60f299a..ccff23e80a 100644
--- a/packages/react/src/components/text-input/text-input.test.tsx
+++ b/packages/react/src/components/text-input/text-input.test.tsx
@@ -196,7 +196,7 @@ describe('TextInput', () => {
                 type="tel"
                 validationErrorMessage="Please enter a valid phone number"
                 defaultValue="foo"
-                adornment='#'
+                leftAdornment='#'
             />,
         );
 
@@ -212,7 +212,7 @@ describe('TextInput', () => {
                 type="tel"
                 validationErrorMessage="Please enter a valid phone number"
                 defaultValue="foo"
-                adornment={<Icon name='phone' />}
+                leftAdornment={<Icon name='phone' />}
             />,
         );
 
@@ -228,8 +228,8 @@ describe('TextInput', () => {
                 type="tel"
                 validationErrorMessage="Please enter a valid phone number"
                 defaultValue="foo"
-                adornment='#'
-                adornmentPosition='end'
+                leftAdornment='#'
+                rightAdornment='end'
             />,
         );
 
diff --git a/packages/react/src/components/text-input/text-input.test.tsx.snap b/packages/react/src/components/text-input/text-input.test.tsx.snap
index bc9b5b58ca..3608e1df55 100644
--- a/packages/react/src/components/text-input/text-input.test.tsx.snap
+++ b/packages/react/src/components/text-input/text-input.test.tsx.snap
@@ -58,7 +58,6 @@ input + .c1 {
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   min-height: 100%;
-  text-align: left;
 }
 
 .c4::-webkit-input-placeholder {
@@ -220,7 +219,6 @@ input + .c1 {
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   min-height: 100%;
-  text-align: left;
 }
 
 .c4::-webkit-input-placeholder {
@@ -380,7 +378,6 @@ input + .c1 {
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   min-height: 100%;
-  text-align: left;
 }
 
 .c4::-webkit-input-placeholder {
@@ -539,7 +536,6 @@ input + .c1 {
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   min-height: 100%;
-  text-align: left;
 }
 
 .c5::-webkit-input-placeholder {
@@ -594,6 +590,7 @@ input + .c1 {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
+  color: #60666E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -601,6 +598,11 @@ input + .c1 {
   padding-left: var(--spacing-1x);
 }
 
+.c4 > svg {
+  height: 16px;
+  width: 16px;
+}
+
 .c3 {
   background: #FFFFFF;
   border: 1px solid #60666E;
@@ -719,7 +721,6 @@ input + .c1 {
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   min-height: 100%;
-  text-align: left;
 }
 
 .c5::-webkit-input-placeholder {
@@ -774,6 +775,7 @@ input + .c1 {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
+  color: #60666E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -781,6 +783,11 @@ input + .c1 {
   padding-left: var(--spacing-1x);
 }
 
+.c4 > svg {
+  height: 16px;
+  width: 16px;
+}
+
 .c3 {
   background: #FFFFFF;
   border: 1px solid #60666E;
@@ -871,7 +878,7 @@ input + .c1 {
   margin-bottom: var(--spacing-half);
 }
 
-.c4 {
+.c5 {
   background: #FFFFFF;
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
@@ -894,68 +901,74 @@ input + .c1 {
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   min-height: 100%;
-  text-align: right;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   color: #60666E;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   color: #60666E;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   color: #60666E;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   color: #60666E;
 }
 
-.c4:disabled {
+.c5:disabled {
   background-color: #F1F2F2;
   border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
-.c4:disabled,
-.c4:disabled::-webkit-input-placeholder {
+.c5:disabled,
+.c5:disabled::-webkit-input-placeholder {
   color: #B7BBC2;
 }
 
-.c4:disabled,
-.c4:disabled::-moz-placeholder {
+.c5:disabled,
+.c5:disabled::-moz-placeholder {
   color: #B7BBC2;
 }
 
-.c4:disabled,
-.c4:disabled:-ms-input-placeholder {
+.c5:disabled,
+.c5:disabled:-ms-input-placeholder {
   color: #B7BBC2;
 }
 
-.c4:disabled,
-.c4:disabled::placeholder {
+.c5:disabled,
+.c5:disabled::placeholder {
   color: #B7BBC2;
 }
 
-.c4:focus,
-.c4:disabled {
+.c5:focus,
+.c5:disabled {
   border: 0;
   box-shadow: none;
 }
 
-.c5 {
+.c4 {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
+  color: #60666E;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  padding-left: var(--spacing-1x);
   padding-right: var(--spacing-1x);
 }
 
+.c4 > svg {
+  height: 16px;
+  width: 16px;
+}
+
 .c3 {
   background: #FFFFFF;
   border: 1px solid #60666E;
@@ -993,8 +1006,13 @@ input + .c1 {
   <div
     class="c3"
   >
-    <input
+    <span
       class="c4"
+    >
+      #
+    </span>
+    <input
+      class="c5"
       data-testid="text-input"
       id="uuid1"
       pattern="[0-9]{3}-?[0-9]{3}-?[0-9]{4}"
@@ -1003,7 +1021,7 @@ input + .c1 {
       value="foo"
     />
     <span
-      class="c5"
+      class="c4"
     >
       #
     </span>
diff --git a/packages/react/src/components/text-input/text-input.tsx b/packages/react/src/components/text-input/text-input.tsx
index f70a1bbbc6..cdf293b65a 100644
--- a/packages/react/src/components/text-input/text-input.tsx
+++ b/packages/react/src/components/text-input/text-input.tsx
@@ -28,17 +28,11 @@ import { useAriaConditionalIds } from '../../hooks/use-aria-conditional-ids';
 import { useId } from '../../hooks/use-id';
 import { focus } from '../../utils/css-state';
 
-interface StyledInputProps {
-    isMobile: boolean;
-    $textAlign?: 'left' | 'right';
-}
-
-const StyleInput = styled.input<StyledInputProps>`
+const StyleInput = styled.input<{ isMobile: boolean }>`
     ${({ theme, isMobile }) => inputsStyle({ theme, isMobile, isFocusable: false })};
     border: 0;
     flex: 1 1 auto;
     min-height: 100%;
-    text-align: ${({ $textAlign }) => $textAlign};
     &:focus,
     &:disabled {
         border: 0;
@@ -46,11 +40,23 @@ const StyleInput = styled.input<StyledInputProps>`
     }
 `;
 
-const Adornment = styled.span<{ $position: 'start' | 'end' }>`
+interface AdornmentProps {
+    isMobile: boolean;
+    hasLeftAdornment: boolean;
+    hasRightAdornment: boolean;
+}
+
+const Adornment = styled.span<AdornmentProps>`
     align-self: center;
+    color: ${({ theme }) => (theme.component['text-input-adornment-text-color'])};
     display: flex;
-    padding-left: ${({ $position }) => ($position === 'start' ? 'var(--spacing-1x)' : undefined)};
-    padding-right: ${({ $position }) => ($position === 'end' ? 'var(--spacing-1x)' : undefined)};
+    padding-left: ${({ hasLeftAdornment }) => (hasLeftAdornment ? 'var(--spacing-1x)' : undefined)};
+    padding-right: ${({ hasRightAdornment }) => (hasRightAdornment ? 'var(--spacing-1x)' : undefined)};
+
+    > svg {
+        height: ${({ isMobile }) => (isMobile ? '24px' : '16px')};
+        width: ${({ isMobile }) => (isMobile ? '24px' : '16px')};
+    }
 `;
 
 interface StyledWrapperProps {
@@ -58,7 +64,7 @@ interface StyledWrapperProps {
     $valid?: boolean;
 }
 
-const Wrapper = styled.div<StyledWrapperProps>`
+const StyleWrapper = styled.div<StyledWrapperProps>`
     background: ${({ theme }) => theme.component['text-input-background-color']};
     border: 1px solid ${({ theme }) => theme.component['text-input-border-color']};
     border-radius: var(--border-radius);
@@ -85,8 +91,8 @@ type PartialInputProps = Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputEle
     'inputMode' | 'name' | 'value' | 'autoComplete'>;
 
 interface TextInputProps extends PartialInputProps {
-    adornment?: ReactNode;
-    adornmentPosition?: 'start' | 'end';
+    leftAdornment?: ReactNode;
+    rightAdornment?: ReactNode;
     ariaDescribedBy?: string;
     ariaInvalid?: boolean;
     className?: string;
@@ -119,8 +125,8 @@ interface TextInputProps extends PartialInputProps {
 }
 
 export const TextInput = forwardRef(({
-    adornment,
-    adornmentPosition = 'start',
+    leftAdornment,
+    rightAdornment,
     ariaDescribedBy,
     ariaInvalid,
     className,
@@ -196,15 +202,15 @@ export const TextInput = forwardRef(({
     };
 
     const adornmentContent = useMemo(() => (
-        adornment ? (
-            <Adornment
-                onClick={handleAdornmentClick}
-                $position={adornmentPosition}
-            >
-                {adornment}
-            </Adornment>
-        ) : null
-    ), [adornment, adornmentPosition]);
+        <Adornment
+            onClick={handleAdornmentClick}
+            hasLeftAdornment={!!leftAdornment}
+            hasRightAdornment={!!rightAdornment}
+            isMobile={isMobile}
+        >
+            {leftAdornment || rightAdornment}
+        </Adornment>
+    ), [leftAdornment, rightAdornment, isMobile]);
 
     useEffect(() => {
         if (valid !== undefined) {
@@ -225,10 +231,9 @@ export const TextInput = forwardRef(({
             hint={hint}
             data-testid="field-container"
         >
-            <Wrapper $disabled={disabled} $valid={validity}>
-                {(adornment && adornmentPosition === 'start') && adornmentContent}
+            <StyleWrapper $disabled={disabled} $valid={validity}>
+                {leftAdornment && adornmentContent}
                 <StyleInput
-                    $textAlign={adornmentPosition === 'end' ? 'right' : 'left'}
                     aria-describedby={processedAriaDescribedBy || undefined}
                     aria-invalid={ariaInvalid}
                     autoComplete={autoComplete}
@@ -254,8 +259,8 @@ export const TextInput = forwardRef(({
                     value={value}
                     {...dataAttributes /* eslint-disable-line react/jsx-props-no-spreading */}
                 />
-                {(adornment && adornmentPosition === 'end') && adornmentContent}
-            </Wrapper>
+                {rightAdornment && adornmentContent}
+            </StyleWrapper>
         </FieldContainer>
     );
 });
diff --git a/packages/react/src/themes/tokens/component/text-input-tokens.ts b/packages/react/src/themes/tokens/component/text-input-tokens.ts
index 26491cf073..75bcd1a349 100644
--- a/packages/react/src/themes/tokens/component/text-input-tokens.ts
+++ b/packages/react/src/themes/tokens/component/text-input-tokens.ts
@@ -11,7 +11,8 @@ export type TextInputTokens =
     | 'text-input-disabled-border-color'
     | 'text-input-disabled-text-color'
     | 'text-input-placeholder-disabled-text-color'
-    | 'text-input-disabled-adornment-text-color';
+    | 'text-input-disabled-adornment-text-color'
+    | 'text-input-adornment-text-color';
 
 export type TextInputTokenValue = AliasTokens | RefTokens;
 
@@ -35,4 +36,6 @@ export const defaultTextInputTokens: TextInputTokenMap = {
     'text-input-placeholder-disabled-text-color': 'color-control-auxiliary-disabled',
 
     'text-input-disabled-adornment-text-color': 'color-control-auxiliary-disabled',
+
+    'text-input-adornment-text-color': 'color-control-auxiliary',
 };
diff --git a/packages/storybook/stories/text-input.mdx b/packages/storybook/stories/text-input.mdx
index 3c48ea6015..e856924552 100644
--- a/packages/storybook/stories/text-input.mdx
+++ b/packages/storybook/stories/text-input.mdx
@@ -33,6 +33,9 @@ Text input allows users to enter a single line of text into a form.
 ### With icon as adornment
 <Canvas of={TextInputStories.IconAsAdornment} />
 
+### With text as adornment
+<Canvas of={TextInputStories.TextAsAdornment} />
+
 ## Properties
 <ArgTypes of={TextInput} />
 
diff --git a/packages/storybook/stories/text-input.stories.tsx b/packages/storybook/stories/text-input.stories.tsx
index 75e0e85707..d40d53397e 100644
--- a/packages/storybook/stories/text-input.stories.tsx
+++ b/packages/storybook/stories/text-input.stories.tsx
@@ -7,12 +7,8 @@ const TextInputMeta: Meta<typeof TextInput> = {
     component: TextInput,
     args: {
         type: 'text',
-        adornment: '%',
     },
     argTypes: {
-        adornment: {
-            control: { disable: true },
-        },
         onBlur: {
             control: { disable: true },
         },
@@ -54,7 +50,17 @@ export const IconAsAdornment: Story = {
     args: {
         label: 'First Name',
         validationErrorMessage: 'Error message',
-        adornment: <Icon name="user" />,
+        leftAdornment: <Icon name='user' />,
+        hint: 'Hint',
+    },
+};
+
+export const TextAsAdornment: Story = {
+    ...TextInputMeta,
+    args: {
+        label: 'First Name',
+        validationErrorMessage: 'Error message',
+        rightAdornment: '%',
         hint: 'Hint',
     },
 };

From 2de3dc2b4e43e4048b6287aa02741a87bba666cf Mon Sep 17 00:00:00 2001
From: Williams Tardif <32278060+WilliamsTardif@users.noreply.github.com>
Date: Mon, 5 Aug 2024 15:07:25 -0400
Subject: [PATCH 6/9] fix(PasswordInput): fix snapshot tests

---
 .../components/password-input/password-input.test.tsx.snap  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/password-input/password-input.test.tsx.snap b/packages/react/src/components/password-input/password-input.test.tsx.snap
index 51e243f824..4bb59d9ce1 100644
--- a/packages/react/src/components/password-input/password-input.test.tsx.snap
+++ b/packages/react/src/components/password-input/password-input.test.tsx.snap
@@ -85,7 +85,7 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
   color: #000000;
 }
 
-.c6:disabled {
+.c6[aria-disabled='true'] {
   background-color: transparent;
   border-color: transparent;
   color: #B7BBC2;
@@ -510,7 +510,7 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
   color: #000000;
 }
 
-.c8:disabled {
+.c8[aria-disabled='true'] {
   background-color: transparent;
   border-color: transparent;
   color: #B7BBC2;
@@ -975,7 +975,7 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
   color: #000000;
 }
 
-.c6:disabled {
+.c6[aria-disabled='true'] {
   background-color: transparent;
   border-color: transparent;
   color: #B7BBC2;

From 977787b81f9241e7aac607239eeb67e738c9764f Mon Sep 17 00:00:00 2001
From: Williams Tardif <32278060+WilliamsTardif@users.noreply.github.com>
Date: Fri, 6 Sep 2024 13:53:24 -0400
Subject: [PATCH 7/9] fix(TextInput): fix bug and rename token

---
 .../src/components/text-input/text-input.tsx  | 60 +++++++++++--------
 .../tokens/component/text-input-tokens.ts     |  4 +-
 packages/storybook/stories/text-input.mdx     |  2 +-
 3 files changed, 37 insertions(+), 29 deletions(-)

diff --git a/packages/react/src/components/text-input/text-input.tsx b/packages/react/src/components/text-input/text-input.tsx
index cdf293b65a..4fd0e5e5ab 100644
--- a/packages/react/src/components/text-input/text-input.tsx
+++ b/packages/react/src/components/text-input/text-input.tsx
@@ -13,7 +13,6 @@ import {
     useCallback,
     useEffect,
     useImperativeHandle,
-    useMemo,
     useRef,
     useState,
 } from 'react';
@@ -41,24 +40,28 @@ const StyleInput = styled.input<{ isMobile: boolean }>`
 `;
 
 interface AdornmentProps {
-    isMobile: boolean;
-    hasLeftAdornment: boolean;
-    hasRightAdornment: boolean;
+    $isMobile: boolean;
 }
 
 const Adornment = styled.span<AdornmentProps>`
     align-self: center;
-    color: ${({ theme }) => (theme.component['text-input-adornment-text-color'])};
+    color: ${({ theme }) => theme.component['text-input-adornment-color']};
     display: flex;
-    padding-left: ${({ hasLeftAdornment }) => (hasLeftAdornment ? 'var(--spacing-1x)' : undefined)};
-    padding-right: ${({ hasRightAdornment }) => (hasRightAdornment ? 'var(--spacing-1x)' : undefined)};
+    flex-shrink: 0;
 
     > svg {
-        height: ${({ isMobile }) => (isMobile ? '24px' : '16px')};
-        width: ${({ isMobile }) => (isMobile ? '24px' : '16px')};
+        height: ${({ $isMobile }) => ($isMobile ? '24px' : '16px')};
+        width: ${({ $isMobile }) => ($isMobile ? '24px' : '16px')};
     }
 `;
 
+const LeftAdornment = styled(Adornment)`
+    padding-left: var(--spacing-1x);
+`;
+const RightAdornment = styled(Adornment)`
+    padding-right: var(--spacing-1x);
+`;
+
 interface StyledWrapperProps {
     $disabled?: boolean;
     $valid?: boolean;
@@ -91,8 +94,6 @@ type PartialInputProps = Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputEle
     'inputMode' | 'name' | 'value' | 'autoComplete'>;
 
 interface TextInputProps extends PartialInputProps {
-    leftAdornment?: ReactNode;
-    rightAdornment?: ReactNode;
     ariaDescribedBy?: string;
     ariaInvalid?: boolean;
     className?: string;
@@ -102,10 +103,12 @@ interface TextInputProps extends PartialInputProps {
     noMargin?: boolean;
     id?: string;
     label?: string;
+    leftAdornment?: ReactNode;
     tooltip?: TooltipProps;
     pattern?: string;
     placeholder?: string;
     required?: boolean;
+    rightAdornment?: ReactNode;
     type?: string;
     valid?: boolean;
     validationErrorMessage?: string;
@@ -125,8 +128,6 @@ interface TextInputProps extends PartialInputProps {
 }
 
 export const TextInput = forwardRef(({
-    leftAdornment,
-    rightAdornment,
     ariaDescribedBy,
     ariaInvalid,
     className,
@@ -136,12 +137,14 @@ export const TextInput = forwardRef(({
     id: providedId,
     inputMode,
     label,
+    leftAdornment,
     tooltip,
     name,
     noMargin,
     pattern,
     placeholder,
     required,
+    rightAdornment,
     type,
     valid,
     validationErrorMessage,
@@ -201,17 +204,6 @@ export const TextInput = forwardRef(({
         inputRef.current?.focus();
     };
 
-    const adornmentContent = useMemo(() => (
-        <Adornment
-            onClick={handleAdornmentClick}
-            hasLeftAdornment={!!leftAdornment}
-            hasRightAdornment={!!rightAdornment}
-            isMobile={isMobile}
-        >
-            {leftAdornment || rightAdornment}
-        </Adornment>
-    ), [leftAdornment, rightAdornment, isMobile]);
-
     useEffect(() => {
         if (valid !== undefined) {
             setValidity({ validity: valid });
@@ -232,7 +224,15 @@ export const TextInput = forwardRef(({
             data-testid="field-container"
         >
             <StyleWrapper $disabled={disabled} $valid={validity}>
-                {leftAdornment && adornmentContent}
+                {leftAdornment && (
+                    <LeftAdornment
+                        onClick={handleAdornmentClick}
+                        $isMobile={isMobile}
+                    >
+                        {leftAdornment}
+                    </LeftAdornment>
+                )}
+
                 <StyleInput
                     aria-describedby={processedAriaDescribedBy || undefined}
                     aria-invalid={ariaInvalid}
@@ -259,7 +259,15 @@ export const TextInput = forwardRef(({
                     value={value}
                     {...dataAttributes /* eslint-disable-line react/jsx-props-no-spreading */}
                 />
-                {rightAdornment && adornmentContent}
+                {rightAdornment && (
+                    <RightAdornment
+                        onClick={handleAdornmentClick}
+                        $isMobile={isMobile}
+                    >
+                        {rightAdornment}
+                    </RightAdornment>
+                )}
+
             </StyleWrapper>
         </FieldContainer>
     );
diff --git a/packages/react/src/themes/tokens/component/text-input-tokens.ts b/packages/react/src/themes/tokens/component/text-input-tokens.ts
index 75bcd1a349..e1e4d6b8c3 100644
--- a/packages/react/src/themes/tokens/component/text-input-tokens.ts
+++ b/packages/react/src/themes/tokens/component/text-input-tokens.ts
@@ -12,7 +12,7 @@ export type TextInputTokens =
     | 'text-input-disabled-text-color'
     | 'text-input-placeholder-disabled-text-color'
     | 'text-input-disabled-adornment-text-color'
-    | 'text-input-adornment-text-color';
+    | 'text-input-adornment-color';
 
 export type TextInputTokenValue = AliasTokens | RefTokens;
 
@@ -37,5 +37,5 @@ export const defaultTextInputTokens: TextInputTokenMap = {
 
     'text-input-disabled-adornment-text-color': 'color-control-auxiliary-disabled',
 
-    'text-input-adornment-text-color': 'color-control-auxiliary',
+    'text-input-adornment-color': 'color-control-auxiliary',
 };
diff --git a/packages/storybook/stories/text-input.mdx b/packages/storybook/stories/text-input.mdx
index e856924552..6852ef5801 100644
--- a/packages/storybook/stories/text-input.mdx
+++ b/packages/storybook/stories/text-input.mdx
@@ -11,7 +11,7 @@ import * as TextInputStories  from './text-input.stories';
 4. [Properties](#properties)
 
 ## Definition
-Text input allows users to enter a single line of text into a form.
+- Text input allows users to enter a single line of text into a form.
 <Canvas of={TextInputStories.Default} />
 
 ## Usage

From 2a69c54cfb63820c5afb7b75b09d76f7b4f3bfcf Mon Sep 17 00:00:00 2001
From: Williams Tardif <32278060+WilliamsTardif@users.noreply.github.com>
Date: Fri, 6 Sep 2024 14:08:29 -0400
Subject: [PATCH 8/9] fix(TextInput, PasswordInput): fix snapshot

---
 .../password-input.test.tsx.snap              |   3 +
 .../text-input/text-input.test.tsx.snap       | 141 ++++++++++--------
 2 files changed, 84 insertions(+), 60 deletions(-)

diff --git a/packages/react/src/components/password-input/password-input.test.tsx.snap b/packages/react/src/components/password-input/password-input.test.tsx.snap
index 4bb59d9ce1..54a5d585de 100644
--- a/packages/react/src/components/password-input/password-input.test.tsx.snap
+++ b/packages/react/src/components/password-input/password-input.test.tsx.snap
@@ -89,6 +89,7 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
   background-color: transparent;
   border-color: transparent;
   color: #B7BBC2;
+  cursor: not-allowed;
 }
 
 .c6 > svg {
@@ -514,6 +515,7 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
   background-color: transparent;
   border-color: transparent;
   color: #B7BBC2;
+  cursor: not-allowed;
 }
 
 .c8 > svg {
@@ -979,6 +981,7 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
   background-color: transparent;
   border-color: transparent;
   color: #B7BBC2;
+  cursor: not-allowed;
 }
 
 .c6 > svg {
diff --git a/packages/react/src/components/text-input/text-input.test.tsx.snap b/packages/react/src/components/text-input/text-input.test.tsx.snap
index 3608e1df55..56cf4e0e81 100644
--- a/packages/react/src/components/text-input/text-input.test.tsx.snap
+++ b/packages/react/src/components/text-input/text-input.test.tsx.snap
@@ -513,7 +513,7 @@ input + .c1 {
   margin-bottom: var(--spacing-half);
 }
 
-.c5 {
+.c6 {
   background: #FFFFFF;
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
@@ -538,50 +538,50 @@ input + .c1 {
   min-height: 100%;
 }
 
-.c5::-webkit-input-placeholder {
+.c6::-webkit-input-placeholder {
   color: #60666E;
 }
 
-.c5::-moz-placeholder {
+.c6::-moz-placeholder {
   color: #60666E;
 }
 
-.c5:-ms-input-placeholder {
+.c6:-ms-input-placeholder {
   color: #60666E;
 }
 
-.c5::placeholder {
+.c6::placeholder {
   color: #60666E;
 }
 
-.c5:disabled {
+.c6:disabled {
   background-color: #F1F2F2;
   border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
-.c5:disabled,
-.c5:disabled::-webkit-input-placeholder {
+.c6:disabled,
+.c6:disabled::-webkit-input-placeholder {
   color: #B7BBC2;
 }
 
-.c5:disabled,
-.c5:disabled::-moz-placeholder {
+.c6:disabled,
+.c6:disabled::-moz-placeholder {
   color: #B7BBC2;
 }
 
-.c5:disabled,
-.c5:disabled:-ms-input-placeholder {
+.c6:disabled,
+.c6:disabled:-ms-input-placeholder {
   color: #B7BBC2;
 }
 
-.c5:disabled,
-.c5:disabled::placeholder {
+.c6:disabled,
+.c6:disabled::placeholder {
   color: #B7BBC2;
 }
 
-.c5:focus,
-.c5:disabled {
+.c6:focus,
+.c6:disabled {
   border: 0;
   box-shadow: none;
 }
@@ -595,7 +595,9 @@ input + .c1 {
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  padding-left: var(--spacing-1x);
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
 .c4 > svg {
@@ -603,6 +605,10 @@ input + .c1 {
   width: 16px;
 }
 
+.c5 {
+  padding-left: var(--spacing-1x);
+}
+
 .c3 {
   background: #FFFFFF;
   border: 1px solid #60666E;
@@ -641,7 +647,7 @@ input + .c1 {
     class="c3"
   >
     <span
-      class="c4"
+      class="c4 c5"
     >
       <svg
         color="currentColor"
@@ -651,7 +657,7 @@ input + .c1 {
       />
     </span>
     <input
-      class="c5"
+      class="c6"
       data-testid="text-input"
       id="uuid1"
       pattern="[0-9]{3}-?[0-9]{3}-?[0-9]{4}"
@@ -698,7 +704,7 @@ input + .c1 {
   margin-bottom: var(--spacing-half);
 }
 
-.c5 {
+.c6 {
   background: #FFFFFF;
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
@@ -723,50 +729,50 @@ input + .c1 {
   min-height: 100%;
 }
 
-.c5::-webkit-input-placeholder {
+.c6::-webkit-input-placeholder {
   color: #60666E;
 }
 
-.c5::-moz-placeholder {
+.c6::-moz-placeholder {
   color: #60666E;
 }
 
-.c5:-ms-input-placeholder {
+.c6:-ms-input-placeholder {
   color: #60666E;
 }
 
-.c5::placeholder {
+.c6::placeholder {
   color: #60666E;
 }
 
-.c5:disabled {
+.c6:disabled {
   background-color: #F1F2F2;
   border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
-.c5:disabled,
-.c5:disabled::-webkit-input-placeholder {
+.c6:disabled,
+.c6:disabled::-webkit-input-placeholder {
   color: #B7BBC2;
 }
 
-.c5:disabled,
-.c5:disabled::-moz-placeholder {
+.c6:disabled,
+.c6:disabled::-moz-placeholder {
   color: #B7BBC2;
 }
 
-.c5:disabled,
-.c5:disabled:-ms-input-placeholder {
+.c6:disabled,
+.c6:disabled:-ms-input-placeholder {
   color: #B7BBC2;
 }
 
-.c5:disabled,
-.c5:disabled::placeholder {
+.c6:disabled,
+.c6:disabled::placeholder {
   color: #B7BBC2;
 }
 
-.c5:focus,
-.c5:disabled {
+.c6:focus,
+.c6:disabled {
   border: 0;
   box-shadow: none;
 }
@@ -780,7 +786,9 @@ input + .c1 {
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  padding-left: var(--spacing-1x);
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
 .c4 > svg {
@@ -788,6 +796,10 @@ input + .c1 {
   width: 16px;
 }
 
+.c5 {
+  padding-left: var(--spacing-1x);
+}
+
 .c3 {
   background: #FFFFFF;
   border: 1px solid #60666E;
@@ -826,12 +838,12 @@ input + .c1 {
     class="c3"
   >
     <span
-      class="c4"
+      class="c4 c5"
     >
       #
     </span>
     <input
-      class="c5"
+      class="c6"
       data-testid="text-input"
       id="uuid1"
       pattern="[0-9]{3}-?[0-9]{3}-?[0-9]{4}"
@@ -878,7 +890,7 @@ input + .c1 {
   margin-bottom: var(--spacing-half);
 }
 
-.c5 {
+.c6 {
   background: #FFFFFF;
   border: 1px solid #60666E;
   border-radius: var(--border-radius);
@@ -903,50 +915,50 @@ input + .c1 {
   min-height: 100%;
 }
 
-.c5::-webkit-input-placeholder {
+.c6::-webkit-input-placeholder {
   color: #60666E;
 }
 
-.c5::-moz-placeholder {
+.c6::-moz-placeholder {
   color: #60666E;
 }
 
-.c5:-ms-input-placeholder {
+.c6:-ms-input-placeholder {
   color: #60666E;
 }
 
-.c5::placeholder {
+.c6::placeholder {
   color: #60666E;
 }
 
-.c5:disabled {
+.c6:disabled {
   background-color: #F1F2F2;
   border-color: #B7BBC2;
   color: #B7BBC2;
 }
 
-.c5:disabled,
-.c5:disabled::-webkit-input-placeholder {
+.c6:disabled,
+.c6:disabled::-webkit-input-placeholder {
   color: #B7BBC2;
 }
 
-.c5:disabled,
-.c5:disabled::-moz-placeholder {
+.c6:disabled,
+.c6:disabled::-moz-placeholder {
   color: #B7BBC2;
 }
 
-.c5:disabled,
-.c5:disabled:-ms-input-placeholder {
+.c6:disabled,
+.c6:disabled:-ms-input-placeholder {
   color: #B7BBC2;
 }
 
-.c5:disabled,
-.c5:disabled::placeholder {
+.c6:disabled,
+.c6:disabled::placeholder {
   color: #B7BBC2;
 }
 
-.c5:focus,
-.c5:disabled {
+.c6:focus,
+.c6:disabled {
   border: 0;
   box-shadow: none;
 }
@@ -960,8 +972,9 @@ input + .c1 {
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  padding-left: var(--spacing-1x);
-  padding-right: var(--spacing-1x);
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
 .c4 > svg {
@@ -969,6 +982,14 @@ input + .c1 {
   width: 16px;
 }
 
+.c5 {
+  padding-left: var(--spacing-1x);
+}
+
+.c7 {
+  padding-right: var(--spacing-1x);
+}
+
 .c3 {
   background: #FFFFFF;
   border: 1px solid #60666E;
@@ -1007,12 +1028,12 @@ input + .c1 {
     class="c3"
   >
     <span
-      class="c4"
+      class="c4 c5"
     >
       #
     </span>
     <input
-      class="c5"
+      class="c6"
       data-testid="text-input"
       id="uuid1"
       pattern="[0-9]{3}-?[0-9]{3}-?[0-9]{4}"
@@ -1021,9 +1042,9 @@ input + .c1 {
       value="foo"
     />
     <span
-      class="c4"
+      class="c4 c7"
     >
-      #
+      end
     </span>
   </div>
 </div>

From 6db6cef5a6e605db12c66c4e3236c8ac8119f9a0 Mon Sep 17 00:00:00 2001
From: Williams Tardif <32278060+WilliamsTardif@users.noreply.github.com>
Date: Wed, 25 Sep 2024 16:39:15 -0400
Subject: [PATCH 9/9] fix(passwordInput): fix snapshot

---
 .../src/components/password-input/password-input.test.tsx.snap | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/react/src/components/password-input/password-input.test.tsx.snap b/packages/react/src/components/password-input/password-input.test.tsx.snap
index 54a5d585de..69c406502f 100644
--- a/packages/react/src/components/password-input/password-input.test.tsx.snap
+++ b/packages/react/src/components/password-input/password-input.test.tsx.snap
@@ -53,7 +53,6 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
 }
 
 .c5 > svg {
-  color: inherit;
   height: var(--size-1x);
   width: var(--size-1x);
 }
@@ -479,7 +478,6 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
 }
 
 .c7 > svg {
-  color: inherit;
   height: var(--size-1x);
   width: var(--size-1x);
 }
@@ -945,7 +943,6 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
 }
 
 .c5 > svg {
-  color: inherit;
   height: var(--size-1x);
   width: var(--size-1x);
 }