From 33b8349931ff2fd8f1dc27d66da9143f027336c2 Mon Sep 17 00:00:00 2001
From: Tai-DucTran <taitran.deve@gmail.com>
Date: Wed, 11 Sep 2024 17:29:48 +0700
Subject: [PATCH] Input: created the floating placeholder added new props
 height, border, borderRadius, isPlaceholderPloating, required

---
 src/@next/Input/Input.tsx                     | 53 +++++++++++++++++--
 src/@next/Input/InputStyle.ts                 | 38 ++++++++++---
 src/@next/NumberInput/NumberInput.tsx         | 30 +++++++++--
 src/@next/PasswordInput/PasswordInput.tsx     | 22 +++++++-
 src/@next/TextArea/TextArea.stories.tsx       | 23 ++++++++
 src/@next/TextArea/TextArea.tsx               | 24 +++++++++
 src/@next/TextArea/TextAreaStyle.ts           |  9 +++-
 src/@next/TextInput/TextInput.stories.tsx     | 24 +++++++++
 src/@next/TextInput/TextInput.tsx             | 27 +++++++++-
 .../PhoneNumberInput.stories.tsx              | 12 +++++
 .../PhoneNumberInput/PhoneNumberInput.tsx     | 27 ++++++++--
 .../PhoneNumberInputStyles.ts                 |  7 ++-
 .../PhoneNumberInput.test.tsx.snap            | 32 +++++------
 13 files changed, 289 insertions(+), 39 deletions(-)

diff --git a/src/@next/Input/Input.tsx b/src/@next/Input/Input.tsx
index dc225fe6a..8b3a82c23 100644
--- a/src/@next/Input/Input.tsx
+++ b/src/@next/Input/Input.tsx
@@ -1,5 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import {
+  AsteriskIcon,
+  FloatingLabel,
   StyledContainer,
   StyledInput,
   StyledPrefixContainer,
@@ -9,6 +11,12 @@ import {
 export interface InputProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> {
   error?: boolean;
+  height?: string;
+  border?: string;
+  borderRadius?: string;
+  floatingFontSize?: string;
+  isPlaceholderFloating?: boolean;
+  required?: boolean;
   prefix?: React.ReactNode;
   suffix?: React.ReactNode;
   inputRef?: React.Ref<HTMLInputElement>;
@@ -16,7 +24,21 @@ export interface InputProps
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
   function Input(
-    { error, disabled, prefix, suffix, inputRef, ...props }: InputProps,
+    {
+      error,
+      disabled,
+      prefix,
+      suffix,
+      inputRef,
+      height,
+      border,
+      borderRadius,
+      floatingFontSize,
+      isPlaceholderFloating,
+      placeholder,
+      required,
+      ...props
+    }: InputProps,
     ref
   ) {
     const hasPrefix = !!prefix;
@@ -27,12 +49,16 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
 
     const Prefix = () =>
       hasPrefix ? (
-        <StyledPrefixContainer ref={prefixRef}>{prefix}</StyledPrefixContainer>
+        <StyledPrefixContainer ref={prefixRef} height={height}>
+          {prefix}
+        </StyledPrefixContainer>
       ) : null;
 
     const Suffix = () =>
       hasSuffix ? (
-        <StyledSuffixContainer ref={suffixRef}>{suffix}</StyledSuffixContainer>
+        <StyledSuffixContainer ref={suffixRef} height={height}>
+          {suffix}
+        </StyledSuffixContainer>
       ) : null;
 
     const [prefixWidth, setPrefixWidth] = React.useState(0);
@@ -52,6 +78,8 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       }
     }, [hasSuffix, suffix]);
 
+    const selectedPlaceholder = required ? `${placeholder}*` : placeholder;
+
     return (
       <StyledContainer
         ref={ref}
@@ -63,7 +91,24 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
         suffixWidth={suffixWidth}
       >
         <Prefix />
-        <StyledInput ref={inputRef} disabled={disabled} {...props} />
+        <StyledInput
+          ref={inputRef}
+          placeholder={isPlaceholderFloating ? undefined : selectedPlaceholder}
+          borderRadius={borderRadius}
+          border={border}
+          height={height}
+          disabled={disabled}
+          {...props}
+        />
+        {isPlaceholderFloating && (
+          <FloatingLabel
+            data-testid="textarea-label"
+            fontSize={floatingFontSize}
+          >
+            {placeholder}
+            {required && <AsteriskIcon>*</AsteriskIcon>}
+          </FloatingLabel>
+        )}
         <Suffix />
       </StyledContainer>
     );
diff --git a/src/@next/Input/InputStyle.ts b/src/@next/Input/InputStyle.ts
index 0c6ccb999..6160ef298 100644
--- a/src/@next/Input/InputStyle.ts
+++ b/src/@next/Input/InputStyle.ts
@@ -5,6 +5,7 @@ import { InputProps } from './Input';
 import { space12, space4, space8 } from '../utilities/spacing';
 import { NotoSans } from '../utilities/fonts';
 import { borderRadius4 } from '../utilities/borderRadius';
+import { Greyscale } from '../../Utils/Colors';
 
 export interface PreffixSuffixWidthProps {
   prefixWidth: number;
@@ -56,13 +57,15 @@ export const StyledContainer = styled.div<InputProps & PreffixSuffixWidthProps>`
   }
 `;
 
-export const StyledPrefixContainer = styled.div`
+export const StyledPrefixContainer = styled.div<{
+  height?: string;
+}>`
   position: absolute;
   left: 0;
   color: ${Neutral.B40};
   display: flex;
   align-items: center;
-  height: 36px;
+  height: ${({ height }) => height ?? '36px'};
   padding: 0px ${space8} 0 ${space12};
 
   svg {
@@ -72,18 +75,35 @@ export const StyledPrefixContainer = styled.div`
   }
 `;
 
-export const StyledSuffixContainer = styled(StyledPrefixContainer)`
+export const StyledSuffixContainer = styled(StyledPrefixContainer)<{
+  height?: string;
+}>`
   left: auto;
   right: 0;
 
   padding: 0px ${space12} 0 ${space4};
 `;
 
+export const FloatingLabel = styled.label<{
+  top?: number;
+  left?: number;
+  fontSize?: string;
+}>`
+  position: absolute;
+  left: ${({ left }) => left ?? '0.5'}em;
+  top: ${({ top }) => top ?? '-1.25'}em;
+  visibility: visible;
+  padding: 0 0.3em;
+  background: white;
+  font-size: ${({ fontSize }) => fontSize ?? '12px'};
+  color: ${Greyscale.devilsgrey};
+`;
+
 export const StyledInput = styled.input<InputProps>`
   background: ${Neutral.B100};
   box-sizing: border-box;
-  border: 1px solid ${Neutral.B68};
-  border-radius: ${borderRadius4};
+  border: ${({ border }) => border ?? `1px solid ${Neutral.B68}`};
+  border-radius: ${({ borderRadius }) => borderRadius ?? borderRadius4};
   padding: 0 12px;
 
   font-family: ${NotoSans}, sans-serif;
@@ -98,7 +118,7 @@ export const StyledInput = styled.input<InputProps>`
   order: 1;
   align-self: stretch;
   flex-grow: 0;
-  height: 36px;
+  height: ${({ height }) => height ?? `36px`};
 
   &::placeholder {
     color: ${Neutral.B68};
@@ -115,3 +135,9 @@ export const StyledInput = styled.input<InputProps>`
     font-size: 14px;
   }
 `;
+
+export const AsteriskIcon = styled.span`
+  color: ${Red.B93};
+  font-size: 20px;
+  vertical-align: middle;
+`;
diff --git a/src/@next/NumberInput/NumberInput.tsx b/src/@next/NumberInput/NumberInput.tsx
index 083ed25d4..ff0104064 100644
--- a/src/@next/NumberInput/NumberInput.tsx
+++ b/src/@next/NumberInput/NumberInput.tsx
@@ -2,7 +2,12 @@ import React from 'react';
 import styled from 'styled-components';
 import { Input, InputProps } from '../Input/Input';
 
-export type NumberInputProps = Omit<InputProps, 'type' | 'prefix'>;
+export type NumberInputProps = Omit<InputProps, 'type' | 'prefix'> & {
+  border?: string;
+  borderRadius?: string;
+  required?: boolean;
+  isPlaceholderFloating?: boolean;
+};
 
 const StyledInput = styled(Input)`
   &[type='number'] {
@@ -17,7 +22,26 @@ const StyledInput = styled(Input)`
 `;
 
 export const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
-  function NumberInput(props: NumberInputProps, ref) {
-    return <StyledInput ref={ref} type="number" {...props} />;
+  function NumberInput(
+    {
+      border,
+      borderRadius,
+      isPlaceholderFloating,
+      required,
+      ...props
+    }: NumberInputProps,
+    ref
+  ) {
+    return (
+      <StyledInput
+        ref={ref}
+        type="number"
+        {...props}
+        border={border}
+        borderRadius={borderRadius}
+        required={required}
+        isPlaceholderFloating={isPlaceholderFloating}
+      />
+    );
   }
 );
diff --git a/src/@next/PasswordInput/PasswordInput.tsx b/src/@next/PasswordInput/PasswordInput.tsx
index 36b7880fc..c8979527e 100644
--- a/src/@next/PasswordInput/PasswordInput.tsx
+++ b/src/@next/PasswordInput/PasswordInput.tsx
@@ -9,13 +9,28 @@ export type PasswordInputProps = Omit<
 > & {
   onChange?: (value: string) => void;
   error?: boolean;
+  height?: string;
+  border?: string;
+  borderRadius?: string;
+  required?: boolean;
+  isPlaceholderFloating?: boolean;
 };
 
 export const PasswordInput = React.forwardRef<
   HTMLInputElement,
   PasswordInputProps
 >(function PasswordInput(
-  { value, onChange, error, ...props }: PasswordInputProps,
+  {
+    value,
+    onChange,
+    error,
+    height,
+    border,
+    borderRadius,
+    required,
+    isPlaceholderFloating,
+    ...props
+  }: PasswordInputProps,
   ref
 ) {
   const [showPassword, setShowPassword] = useState<boolean>(false);
@@ -44,6 +59,11 @@ export const PasswordInput = React.forwardRef<
         onChange={e => onChange?.(e.currentTarget.value)}
         error={error}
         suffix={!props.disabled && suffixComponent}
+        height={height}
+        border={border}
+        borderRadius={borderRadius}
+        required={required}
+        isPlaceholderFloating={isPlaceholderFloating}
         {...props}
       />
     </>
diff --git a/src/@next/TextArea/TextArea.stories.tsx b/src/@next/TextArea/TextArea.stories.tsx
index 3702664f7..e0280e3eb 100644
--- a/src/@next/TextArea/TextArea.stories.tsx
+++ b/src/@next/TextArea/TextArea.stories.tsx
@@ -29,3 +29,26 @@ Interactive.args = {
   maxLength: 0,
   width: '520px',
 };
+
+const WithFloatingPlaceholderTemplate: Story<TextAreaProps> = args => {
+  const [value, setValue] = useState<string>('');
+
+  return (
+    <TextArea
+      {...args}
+      value={value}
+      onChange={val => setValue(val)}
+      floatingFontSize={'16px'}
+      isPlaceholderFloating={true}
+    />
+  );
+};
+export const WithFloatingPlaceholder = WithFloatingPlaceholderTemplate.bind({});
+WithFloatingPlaceholder.args = {
+  placeholder: 'Please enter...',
+  disabled: false,
+  error: false,
+  rows: 3,
+  maxLength: 0,
+  width: '520px',
+};
diff --git a/src/@next/TextArea/TextArea.tsx b/src/@next/TextArea/TextArea.tsx
index b9fab7ee3..8b8f0bb4b 100644
--- a/src/@next/TextArea/TextArea.tsx
+++ b/src/@next/TextArea/TextArea.tsx
@@ -10,6 +10,7 @@ import {
   StyledWordCountContainer,
 } from './TextAreaStyle';
 import { Typography } from '../Typography';
+import { AsteriskIcon, FloatingLabel } from '../Input/InputStyle';
 
 export type TextAreaProps = Omit<
   TextareaHTMLAttributes<HTMLTextAreaElement>,
@@ -28,6 +29,11 @@ export type TextAreaProps = Omit<
    * **defaults to** `true`
    */
   canExceedMaxLength: boolean;
+  border?: string;
+  borderRadius?: string;
+  required?: boolean;
+  isPlaceholderFloating?: boolean;
+  floatingFontSize?: string;
 };
 
 const _TextArea = ({
@@ -40,6 +46,12 @@ const _TextArea = ({
   onChange,
   forwardedRef,
   canExceedMaxLength = true,
+  required,
+  border,
+  borderRadius,
+  isPlaceholderFloating,
+  floatingFontSize,
+  placeholder,
   ...props
 }: TextAreaProps) => {
   const [isFocused, setIsFocused] = useState<boolean>(false);
@@ -71,6 +83,9 @@ const _TextArea = ({
       data-has-counter={hasMaxLengthEnforced}
       width={width}
       onClick={handleContainerClick}
+      border={border}
+      borderRadius={borderRadius}
+      isPlaceholderFloating={isPlaceholderFloating}
     >
       <StyledTextArea
         ref={textAreaInputRef}
@@ -82,6 +97,9 @@ const _TextArea = ({
         maxLength={!canExceedMaxLength && maxLength}
         onFocus={() => setIsFocused(true)}
         onBlur={() => setIsFocused(false)}
+        border={border}
+        borderRadius={borderRadius}
+        placeholder={isPlaceholderFloating ? undefined : placeholder}
         {...props}
       />
       {hasMaxLengthEnforced && (
@@ -94,6 +112,12 @@ const _TextArea = ({
           </Typography>
         </StyledWordCountContainer>
       )}
+      {isPlaceholderFloating && (
+        <FloatingLabel data-testid="textarea-label" fontSize={floatingFontSize}>
+          {placeholder}
+          {required && <AsteriskIcon>*</AsteriskIcon>}
+        </FloatingLabel>
+      )}
     </StyledTextAreaContainer>
   );
 };
diff --git a/src/@next/TextArea/TextAreaStyle.ts b/src/@next/TextArea/TextAreaStyle.ts
index 95f9ceeed..d71f2880b 100644
--- a/src/@next/TextArea/TextAreaStyle.ts
+++ b/src/@next/TextArea/TextAreaStyle.ts
@@ -2,17 +2,21 @@ import styled from 'styled-components';
 import { borderRadius4 } from '../utilities/borderRadius';
 import { Neutral, Red } from '../utilities/colors';
 import { body1 as typographyBody1 } from '../Typography/TypographyStyles';
+import { FloatingLabel } from '../Input/InputStyle';
 
 interface TextAreaProp {
   width: string;
+  border?: string;
+  borderRadius?: string;
+  isPlaceholderFloating?: boolean;
 }
 
 export const StyledTextAreaContainer = styled.div<TextAreaProp>`
   position: relative;
   width: ${props => props.width};
 
-  border: 1px solid ${Neutral.B68};
-  border-radius: ${borderRadius4};
+  border: ${({ border }) => border ?? `1px solid ${Neutral.B68}`};
+  border-radius: ${({ borderRadius }) => borderRadius ?? borderRadius4};
   padding: 8px 12px 25px 12px;
   cursor: text;
 
@@ -46,6 +50,7 @@ export const StyledTextArea = styled.textarea<TextAreaProp>`
   box-sizing: border-box;
   border: none;
 
+  ${({ isPlaceholderFloating }) => isPlaceholderFloating && FloatingLabel}
   ${typographyBody1}
 
   color: ${Neutral.B18};
diff --git a/src/@next/TextInput/TextInput.stories.tsx b/src/@next/TextInput/TextInput.stories.tsx
index a4f3d5eb1..63377bf21 100644
--- a/src/@next/TextInput/TextInput.stories.tsx
+++ b/src/@next/TextInput/TextInput.stories.tsx
@@ -43,3 +43,27 @@ WithPrefixAndSuffix.args = {
   prefix: <Icon name="ri-search" />,
   disabled: false,
 };
+
+const WithFloatingPlaceholderAndRequiredInputTemplate: Story<
+  TextInputProps
+> = args => {
+  const [value, setValue] = useState('Hi');
+
+  return (
+    <TextInput
+      {...args}
+      value={value}
+      onChange={e => setValue(e)}
+      isPlaceholderFloating={true}
+      required={true}
+      suffix={<div>{value.length}/20</div>}
+    />
+  );
+};
+export const WithFloatingPlaceholderAndRequiredInput =
+  WithFloatingPlaceholderAndRequiredInputTemplate.bind({});
+WithFloatingPlaceholderAndRequiredInput.args = {
+  placeholder: 'Placeholder',
+  prefix: <Icon name="ri-search" />,
+  disabled: false,
+};
diff --git a/src/@next/TextInput/TextInput.tsx b/src/@next/TextInput/TextInput.tsx
index 8cb93b73b..23eb3851a 100644
--- a/src/@next/TextInput/TextInput.tsx
+++ b/src/@next/TextInput/TextInput.tsx
@@ -5,11 +5,30 @@ import { Input, InputProps } from '../Input/Input';
 export type TextInputProps = Omit<InputProps, 'type' | 'onChange'> & {
   canClear?: boolean;
   onChange?: (value: string) => void;
+  height?: string;
+  border?: string;
+  borderRadius?: string;
+  required?: boolean;
+  isPlaceholderFloating?: boolean;
+  floatingFontSize?: string;
 };
 
 export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
   function TextInput(
-    { canClear, suffix, value, onChange, error, ...props }: TextInputProps,
+    {
+      canClear,
+      suffix,
+      value,
+      onChange,
+      error,
+      height,
+      border,
+      borderRadius,
+      required,
+      floatingFontSize,
+      isPlaceholderFloating,
+      ...props
+    }: TextInputProps,
     ref
   ) {
     const ClearIcon = () => (
@@ -45,6 +64,12 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
         value={value}
         onChange={handleChange}
         error={error}
+        border={border}
+        borderRadius={borderRadius}
+        floatingFontSize={floatingFontSize}
+        isPlaceholderFloating={isPlaceholderFloating}
+        required={required}
+        height={height}
         {...props}
       />
     );
diff --git a/src/Input/PhoneNumberInput/PhoneNumberInput.stories.tsx b/src/Input/PhoneNumberInput/PhoneNumberInput.stories.tsx
index f662afde9..d5b662a76 100644
--- a/src/Input/PhoneNumberInput/PhoneNumberInput.stories.tsx
+++ b/src/Input/PhoneNumberInput/PhoneNumberInput.stories.tsx
@@ -100,6 +100,9 @@ const Template: ComponentStory<typeof PhoneNumberInput> = (
         onChange={setValue}
         onInputChange={setFilterInput}
         onBlur={console.log}
+        isPlaceholderFloating={args.isPlaceholderFloating}
+        isRequired={args.isRequired}
+        isDisableCallingCode={args.isDisableCallingCode}
       />
     </>
   );
@@ -119,3 +122,12 @@ Loading.args = { filterDelayMs: 1000 };
 
 export const WithAddon = Template.bind({});
 WithAddon.args = { addon: <Tag>I am an addon :)</Tag> };
+
+export const DisableCallingCodeOptionsAndFloatingPlaceholder = Template.bind(
+  {}
+);
+DisableCallingCodeOptionsAndFloatingPlaceholder.args = {
+  isPlaceholderFloating: true,
+  isRequired: true,
+  isDisableCallingCode: true,
+};
diff --git a/src/Input/PhoneNumberInput/PhoneNumberInput.tsx b/src/Input/PhoneNumberInput/PhoneNumberInput.tsx
index b0212b7b4..30965a9c4 100644
--- a/src/Input/PhoneNumberInput/PhoneNumberInput.tsx
+++ b/src/Input/PhoneNumberInput/PhoneNumberInput.tsx
@@ -7,6 +7,7 @@ import { ArrowDownIcon, ArrowUpIcon } from '../../General/Icon/components';
 import { Flex } from '../../Layout/Flex';
 import { useOutsideAlerter } from '../../Utils/useOutsideAlerter';
 import * as S from './PhoneNumberInputStyles';
+import { AsteriskIcon } from '../../@next/Input/InputStyle';
 
 // Downshift wants a ref to this, but we need one ourselves, and there is no way
 // to share.
@@ -28,6 +29,9 @@ export const PhoneNumberInput = ({
   otherOptionsLabel,
   callingCodeFilterInputPlaceholder,
   callingCodeNoOptionsLabel,
+  isDisableCallingCode,
+  isPlaceholderFloating,
+  isRequired,
   error,
   addon,
   ...restProps
@@ -84,18 +88,26 @@ export const PhoneNumberInput = ({
 
   const [significantNumberInputId] = useId(1, 'significant-number-input-');
 
+  const placeholder = isRequired ? `${label}*` : label;
+
   return (
     <S.PhoneNumberInputContainer ref={containerRef} {...restProps}>
       <S.TopRow data-invalid={Boolean(error)}>
         <S.CallingCodeInputToggle
           {...getToggleButtonProps()}
           type="button"
-          onClick={toggleIsCallingCodeOpen}
+          onClick={isDisableCallingCode ? undefined : toggleIsCallingCodeOpen}
           data-testid="calling-code-input-toggle"
         >
           +{value.callingCode}
           <S.CallingCodeInputOpenIndicator>
-            {isCallingCodeInputOpen ? <ArrowUpIcon /> : <ArrowDownIcon />}
+            {isDisableCallingCode ? (
+              <span>&nbsp;</span>
+            ) : isCallingCodeInputOpen ? (
+              <ArrowUpIcon />
+            ) : (
+              <ArrowDownIcon />
+            )}
           </S.CallingCodeInputOpenIndicator>
         </S.CallingCodeInputToggle>
         <S.SignificantNumberInput
@@ -111,11 +123,15 @@ export const PhoneNumberInput = ({
           }
           onFocus={onFocus}
           onBlur={onBlur}
-          placeholder={label}
+          placeholder={isPlaceholderFloating ? undefined : placeholder}
           data-invalid={Boolean(error)}
           aria-label={label}
+          isPlaceholderFloating={isPlaceholderFloating}
         />
-        <S.Label htmlFor={significantNumberInputId}>{label}</S.Label>
+        <S.Label htmlFor={significantNumberInputId}>
+          {label}
+          {isRequired && <AsteriskIcon />}
+        </S.Label>
         <S.TopRowAddon data-testid="addon">{addon}</S.TopRowAddon>
       </S.TopRow>
       <S.CallingCodeInput
@@ -195,6 +211,9 @@ export interface Props {
   otherOptionsLabel: string;
   callingCodeFilterInputPlaceholder: string;
   callingCodeNoOptionsLabel: string;
+  isDisableCallingCode?: boolean;
+  isPlaceholderFloating?: boolean;
+  isRequired?: boolean;
 }
 
 export interface PhoneNumber {
diff --git a/src/Input/PhoneNumberInput/PhoneNumberInputStyles.ts b/src/Input/PhoneNumberInput/PhoneNumberInputStyles.ts
index a6df26818..af0faf02f 100644
--- a/src/Input/PhoneNumberInput/PhoneNumberInputStyles.ts
+++ b/src/Input/PhoneNumberInput/PhoneNumberInputStyles.ts
@@ -48,7 +48,7 @@ export const CallingCodeInputOpenIndicator = styled.span`
 export const Label = styled.label`
   position: absolute;
   left: 0.5em;
-  top: -0.5em;
+  top: -1.25em;
   visibility: hidden;
 
   padding: 0 0.3em;
@@ -65,7 +65,9 @@ const visibleLabel = css`
   }
 `;
 
-export const SignificantNumberInput = styled.input`
+export const SignificantNumberInput = styled.input<{
+  isPlaceholderFloating?: boolean;
+}>`
   border: none;
 
   width: 100%;
@@ -81,6 +83,7 @@ export const SignificantNumberInput = styled.input`
   }
 
   ${({ value }) => value && visibleLabel}
+  ${({ isPlaceholderFloating }) => isPlaceholderFloating && visibleLabel}
 
   &[data-invalid='true']:focus {
     outline: 2px solid ${PrimaryColor.glintsred};
diff --git a/src/Input/PhoneNumberInput/__snapshots__/PhoneNumberInput.test.tsx.snap b/src/Input/PhoneNumberInput/__snapshots__/PhoneNumberInput.test.tsx.snap
index bcb41b62a..341aac52e 100644
--- a/src/Input/PhoneNumberInput/__snapshots__/PhoneNumberInput.test.tsx.snap
+++ b/src/Input/PhoneNumberInput/__snapshots__/PhoneNumberInput.test.tsx.snap
@@ -36,7 +36,7 @@ exports[`<PhoneNumberInput> should match default snapshot 1`] = `
       </button>
       <input
         aria-label="Mobile Number"
-        class="PhoneNumberInputStyles__SignificantNumberInput-sc-80kraj-5 dEiocW"
+        class="PhoneNumberInputStyles__SignificantNumberInput-sc-80kraj-5 jzSVfN"
         data-invalid="false"
         data-testid="significant-number-input"
         id="significant-number-input-1"
@@ -45,7 +45,7 @@ exports[`<PhoneNumberInput> should match default snapshot 1`] = `
         value=""
       />
       <label
-        class="PhoneNumberInputStyles__Label-sc-80kraj-4 jnJeTY"
+        class="PhoneNumberInputStyles__Label-sc-80kraj-4 blJjKL"
         for="significant-number-input-1"
       >
         Mobile Number
@@ -350,7 +350,7 @@ exports[`<PhoneNumberInput> should match snapshot after input has been made 1`]
       </button>
       <input
         aria-label="Mobile Number"
-        class="PhoneNumberInputStyles__SignificantNumberInput-sc-80kraj-5 dEiocW"
+        class="PhoneNumberInputStyles__SignificantNumberInput-sc-80kraj-5 jzSVfN"
         data-invalid="false"
         data-testid="significant-number-input"
         id="significant-number-input-1"
@@ -359,7 +359,7 @@ exports[`<PhoneNumberInput> should match snapshot after input has been made 1`]
         value=""
       />
       <label
-        class="PhoneNumberInputStyles__Label-sc-80kraj-4 jnJeTY"
+        class="PhoneNumberInputStyles__Label-sc-80kraj-4 blJjKL"
         for="significant-number-input-1"
       >
         Mobile Number
@@ -664,7 +664,7 @@ exports[`<PhoneNumberInput> should match snapshot when a value is given 1`] = `
       </button>
       <input
         aria-label="Mobile Number"
-        class="PhoneNumberInputStyles__SignificantNumberInput-sc-80kraj-5 gVdvEE"
+        class="PhoneNumberInputStyles__SignificantNumberInput-sc-80kraj-5 erKVtz"
         data-invalid="false"
         data-testid="significant-number-input"
         id="significant-number-input-1"
@@ -673,7 +673,7 @@ exports[`<PhoneNumberInput> should match snapshot when a value is given 1`] = `
         value="12345678"
       />
       <label
-        class="PhoneNumberInputStyles__Label-sc-80kraj-4 jnJeTY"
+        class="PhoneNumberInputStyles__Label-sc-80kraj-4 blJjKL"
         for="significant-number-input-1"
       >
         Mobile Number
@@ -978,7 +978,7 @@ exports[`<PhoneNumberInput> should render an empty state when loading 1`] = `
       </button>
       <input
         aria-label="Mobile Number"
-        class="PhoneNumberInputStyles__SignificantNumberInput-sc-80kraj-5 dEiocW"
+        class="PhoneNumberInputStyles__SignificantNumberInput-sc-80kraj-5 jzSVfN"
         data-invalid="false"
         data-testid="significant-number-input"
         id="significant-number-input-1"
@@ -987,7 +987,7 @@ exports[`<PhoneNumberInput> should render an empty state when loading 1`] = `
         value=""
       />
       <label
-        class="PhoneNumberInputStyles__Label-sc-80kraj-4 jnJeTY"
+        class="PhoneNumberInputStyles__Label-sc-80kraj-4 blJjKL"
         for="significant-number-input-1"
       >
         Mobile Number
@@ -1303,7 +1303,7 @@ exports[`<PhoneNumberInput> should render an empty state when there are no calli
       </button>
       <input
         aria-label="Mobile Number"
-        class="PhoneNumberInputStyles__SignificantNumberInput-sc-80kraj-5 dEiocW"
+        class="PhoneNumberInputStyles__SignificantNumberInput-sc-80kraj-5 jzSVfN"
         data-invalid="false"
         data-testid="significant-number-input"
         id="significant-number-input-1"
@@ -1312,7 +1312,7 @@ exports[`<PhoneNumberInput> should render an empty state when there are no calli
         value=""
       />
       <label
-        class="PhoneNumberInputStyles__Label-sc-80kraj-4 jnJeTY"
+        class="PhoneNumberInputStyles__Label-sc-80kraj-4 blJjKL"
         for="significant-number-input-1"
       >
         Mobile Number
@@ -1403,7 +1403,7 @@ exports[`<PhoneNumberInput> should render the given addon 1`] = `
       </button>
       <input
         aria-label="Mobile Number"
-        class="PhoneNumberInputStyles__SignificantNumberInput-sc-80kraj-5 dEiocW"
+        class="PhoneNumberInputStyles__SignificantNumberInput-sc-80kraj-5 jzSVfN"
         data-invalid="false"
         data-testid="significant-number-input"
         id="significant-number-input-1"
@@ -1412,7 +1412,7 @@ exports[`<PhoneNumberInput> should render the given addon 1`] = `
         value=""
       />
       <label
-        class="PhoneNumberInputStyles__Label-sc-80kraj-4 jnJeTY"
+        class="PhoneNumberInputStyles__Label-sc-80kraj-4 blJjKL"
         for="significant-number-input-1"
       >
         Mobile Number
@@ -1730,7 +1730,7 @@ exports[`<PhoneNumberInput> should render the given error 1`] = `
       </button>
       <input
         aria-label="Mobile Number"
-        class="PhoneNumberInputStyles__SignificantNumberInput-sc-80kraj-5 dEiocW"
+        class="PhoneNumberInputStyles__SignificantNumberInput-sc-80kraj-5 jzSVfN"
         data-invalid="true"
         data-testid="significant-number-input"
         id="significant-number-input-1"
@@ -1739,7 +1739,7 @@ exports[`<PhoneNumberInput> should render the given error 1`] = `
         value=""
       />
       <label
-        class="PhoneNumberInputStyles__Label-sc-80kraj-4 jnJeTY"
+        class="PhoneNumberInputStyles__Label-sc-80kraj-4 blJjKL"
         for="significant-number-input-1"
       >
         Mobile Number
@@ -2046,7 +2046,7 @@ exports[`<PhoneNumberInput> should toggle the calling code input on clicking the
       </button>
       <input
         aria-label="Mobile Number"
-        class="PhoneNumberInputStyles__SignificantNumberInput-sc-80kraj-5 dEiocW"
+        class="PhoneNumberInputStyles__SignificantNumberInput-sc-80kraj-5 jzSVfN"
         data-invalid="false"
         data-testid="significant-number-input"
         id="significant-number-input-1"
@@ -2055,7 +2055,7 @@ exports[`<PhoneNumberInput> should toggle the calling code input on clicking the
         value=""
       />
       <label
-        class="PhoneNumberInputStyles__Label-sc-80kraj-4 jnJeTY"
+        class="PhoneNumberInputStyles__Label-sc-80kraj-4 blJjKL"
         for="significant-number-input-1"
       >
         Mobile Number