@transferwise/components 46.162.1 → 46.162.2

package/build/PhoneNumberInput/PhoneNumberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneNumberInput.js","sources":["../../src/PhoneNumberInput/PhoneNumberInput.tsx"],"sourcesContent":["import { useState, useEffect, useMemo, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { useFieldLabelRef, useInputAttributes } from '../Inputs/contexts';\nimport { useInputPaddings } from '../Inputs/InputGroup/InputGroup';\nimport { SelectInput, SelectInputOptionContent, SelectInputProps } from '../Inputs/SelectInput';\nimport messages from './PhoneNumberInput.messages';\nimport countries from './Data/countries';\nimport {\n  explodeNumberModel,\n  isValidPhoneNumber,\n  cleanNumber,\n  setDefaultPrefix,\n  sortArrayByProperty,\n  groupCountriesByPrefix,\n  excludeCountries,\n  findCountryByPrefix,\n} from './utils';\nimport { PhoneNumber } from './utils/explodeNumberModel';\nimport { Input } from '../Inputs/Input/Input';\n\nconst ALLOWED_PHONE_CHARS = /^$|^[\\d-\\s]+$/;\n\nexport interface PhoneNumberInputProps {\n  id?: string;\n  'aria-labelledby'?: string;\n  required?: boolean;\n  disabled?: boolean;\n  initialValue?: string;\n  onChange: (value: string | null, prefix: string) => void;\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  onBlur?: () => void;\n  countryCode?: string;\n  /** @default 'Prefix' */\n  searchPlaceholder?: string;\n  /** @default 'md' */\n  size?: SizeSmall | SizeMedium | SizeLarge;\n  placeholder?: string;\n  /** @default {} */\n  selectProps?: Partial<SelectInputProps<string | null>>;\n  /**\n   * List of iso3 codes of countries to remove from the list\n   * @default []\n   */\n  disabledCountries?: readonly string[];\n}\n\nconst defaultSelectProps = {} satisfies PhoneNumberInputProps['selectProps'];\nconst defaultDisabledCountries = [] satisfies PhoneNumberInputProps['disabledCountries'];\n\nconst PhoneNumberInput = ({\n  id,\n  'aria-labelledby': ariaLabelledByProp,\n  required,\n  disabled,\n  initialValue,\n  onChange,\n  onFocus,\n  onBlur,\n  countryCode,\n  searchPlaceholder,\n  size = Size.MEDIUM,\n  placeholder,\n  selectProps = defaultSelectProps,\n  disabledCountries = defaultDisabledCountries,\n}: PhoneNumberInputProps) => {\n  const countryCodeSelectRef = useRef<HTMLButtonElement>(null);\n  const phoneNumberInputRef = useRef<HTMLInputElement>(null);\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n  const { paddingInlineStart } = useInputPaddings();\n  const hasInputGroupAddonStart = paddingInlineStart != null;\n  const fieldLabelRef = useFieldLabelRef();\n  const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];\n\n  const { locale, formatMessage } = useIntl();\n\n  const [randomId] = useState(() => Math.random().toString(36).slice(2, 8));\n\n  const createId = (customID: string | undefined, backup: string): string => {\n    if (customID) {\n      return customID + (backup ? `-${backup}` : '');\n    }\n    return `${backup}-${randomId}`;\n  };\n\n  // Link the first non-disabled input to the the Field label, if present\n  const ids = {\n    countryCode: {\n      label: createId(id, 'country-code-label'),\n      select: createId(id, 'country-code-select'),\n    },\n    phoneNumber: {\n      label: createId(id, 'phone-number-label'),\n      input: createId(id, id ? '' : 'phone-number-input'),\n    },\n  };\n\n  const [internalValue, setInternalValue] = useState<PhoneNumber>(() => {\n    const cleanValue = initialValue ? cleanNumber(initialValue) : null;\n\n    if (!cleanValue || !isValidPhoneNumber(cleanValue, 1)) {\n      return {\n        prefix: setDefaultPrefix(locale, countryCode),\n        suffix: '',\n      };\n    }\n\n    return explodeNumberModel(cleanValue);\n  });\n  const broadcastedValueRef = useRef<PhoneNumber>(internalValue);\n\n  const [suffixDirty, setSuffixDirty] = useState(false);\n\n  useEffect(() => {\n    if (!suffixDirty && internalValue.suffix) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- Tracking when suffix becomes dirty\n      setSuffixDirty(true);\n    }\n  }, [internalValue.suffix, suffixDirty]);\n\n  const countriesByPrefix = useMemo(\n    () =>\n      groupCountriesByPrefix(\n        sortArrayByProperty(excludeCountries(countries, disabledCountries), 'iso3'),\n      ),\n    [disabledCountries],\n  );\n\n  const onSuffixChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n    const suffix = event.target.value;\n    if (ALLOWED_PHONE_CHARS.test(suffix)) {\n      setInternalValue((prev) => ({ ...prev, suffix }));\n    }\n  };\n\n  const onPaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {\n    if (!event.nativeEvent.clipboardData) {\n      return;\n    }\n\n    const pastedValue = (event.nativeEvent.clipboardData.getData('text/plain') || '').replace(\n      /(\\s|-)+/g,\n      '',\n    );\n    const pastedNumber = explodeNumberModel(pastedValue);\n\n    if (\n      pastedNumber.prefix != null &&\n      countriesByPrefix.has(pastedNumber.prefix) &&\n      ALLOWED_PHONE_CHARS.test(pastedNumber.suffix)\n    ) {\n      setInternalValue(pastedNumber);\n    }\n  };\n\n  useEffect(() => {\n    const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;\n    const broadcastedPhoneNumber = `${broadcastedValueRef.current.prefix ?? ''}${broadcastedValueRef.current.suffix}`;\n\n    if (internalPhoneNumber === broadcastedPhoneNumber) {\n      return;\n    }\n\n    const newValue = isValidPhoneNumber(internalPhoneNumber)\n      ? cleanNumber(internalPhoneNumber)\n      : null;\n\n    onChange(\n      newValue,\n      internalValue.prefix ?? '', // TODO: Allow `null` in public API\n    );\n    broadcastedValueRef.current = internalValue;\n  }, [onChange, internalValue]);\n\n  useEffect(() => {\n    const labelRef = fieldLabelRef?.current;\n\n    if (labelRef) {\n      const handleLabelClick = () => {\n        if (!selectProps.disabled) {\n          countryCodeSelectRef.current?.click();\n        } else {\n          phoneNumberInputRef.current?.focus();\n        }\n      };\n\n      labelRef.addEventListener('click', handleLabelClick);\n\n      return () => {\n        labelRef?.removeEventListener('click', handleLabelClick);\n      };\n    }\n  }, [fieldLabelRef, selectProps.disabled]);\n\n  return (\n    <fieldset {...inputAttributes} aria-labelledby={ariaLabelledBy} className=\"tw-telephone\">\n      <label className=\"sr-only\" id={ids.countryCode.label} htmlFor={ids.countryCode.select}>\n        {formatMessage(messages.countryCodeLabel)}\n      </label>\n      <div\n        className={`tw-telephone__country-select${\n          hasInputGroupAddonStart\n            ? ' tw-telephone__country-select--with-input-group-addon-start'\n            : ''\n        }`}\n      >\n        <SelectInput\n          triggerRef={countryCodeSelectRef}\n          placeholder={formatMessage(messages.selectInputPlaceholder)}\n          items={[...countriesByPrefix].map(([prefix, countries]) => ({\n            type: 'option',\n            value: prefix,\n            filterMatchers: [\n              prefix,\n              ...countries.map((country) => country.name),\n              ...countries.map((country) => country.iso3),\n            ],\n          }))}\n          value={internalValue.prefix}\n          renderValue={(prefix, withinTrigger) => (\n            <SelectInputOptionContent\n              title={prefix}\n              note={\n                withinTrigger\n                  ? undefined\n                  : countriesByPrefix\n                      .get(prefix)\n                      ?.map((country) => country.iso3)\n                      .join(', ')\n              }\n            />\n          )}\n          filterable\n          filterPlaceholder={searchPlaceholder ?? formatMessage(messages.phoneNumberPrefix)}\n          disabled={disabled}\n          size={size}\n          id={ids.countryCode.select}\n          UNSAFE_triggerButtonProps={{\n            id: ids.countryCode.select,\n            'aria-labelledby': ids.countryCode.label,\n            'aria-describedby': undefined,\n            'aria-invalid': undefined,\n          }}\n          onChange={(prefix) => {\n            const country = prefix != null ? findCountryByPrefix(prefix) : null;\n            setInternalValue((prev) => ({ ...prev, prefix, format: country?.phoneFormat }));\n          }}\n          onClose={() => {\n            if (suffixDirty) {\n              onBlur?.();\n            }\n          }}\n          {...selectProps}\n        />\n      </div>\n      <label className=\"sr-only\" id={ids.phoneNumber.label} htmlFor={ids.phoneNumber.input}>\n        {formatMessage(messages.phoneNumberLabel)}\n      </label>\n      <div className=\"tw-telephone__number-input\">\n        <div className={`input-group input-group-${size} ${disabled ? 'disabled' : ''}`}>\n          <Input\n            ref={phoneNumberInputRef}\n            className=\"tw-telephone__number-input-field\"\n            id={ids.phoneNumber.input}\n            autoComplete=\"tel-national\"\n            name=\"phoneNumber\"\n            inputMode=\"numeric\"\n            value={internalValue.suffix}\n            disabled={disabled}\n            required={required}\n            placeholder={placeholder}\n            aria-labelledby={ids.phoneNumber.label}\n            onChange={onSuffixChange}\n            onPaste={onPaste}\n            onFocus={onFocus}\n            onBlur={() => onBlur?.()}\n          />\n        </div>\n      </div>\n    </fieldset>\n  );\n};\n\nexport default PhoneNumberInput;\n"],"names":["ALLOWED_PHONE_CHARS","defaultSelectProps","defaultDisabledCountries","PhoneNumberInput","id","ariaLabelledByProp","required","disabled","initialValue","onChange","onFocus","onBlur","countryCode","searchPlaceholder","size","Size","MEDIUM","placeholder","selectProps","disabledCountries","countryCodeSelectRef","useRef","phoneNumberInputRef","inputAttributes","useInputAttributes","nonLabelable","paddingInlineStart","useInputPaddings","hasInputGroupAddonStart","fieldLabelRef","useFieldLabelRef","ariaLabelledBy","locale","formatMessage","useIntl","randomId","useState","Math","random","toString","slice","createId","customID","backup","ids","label","select","phoneNumber","input","internalValue","setInternalValue","cleanValue","cleanNumber","isValidPhoneNumber","prefix","setDefaultPrefix","suffix","explodeNumberModel","broadcastedValueRef","suffixDirty","setSuffixDirty","useEffect","countriesByPrefix","useMemo","groupCountriesByPrefix","sortArrayByProperty","excludeCountries","countries","onSuffixChange","event","target","value","test","prev","onPaste","nativeEvent","clipboardData","pastedValue","getData","replace","pastedNumber","has","internalPhoneNumber","broadcastedPhoneNumber","current","newValue","labelRef","handleLabelClick","click","focus","addEventListener","removeEventListener","_jsxs","className","children","_jsx","htmlFor","messages","countryCodeLabel","SelectInput","triggerRef","selectInputPlaceholder","items","map","type","filterMatchers","country","name","iso3","renderValue","withinTrigger","SelectInputOptionContent","title","note","undefined","get","join","filterable","filterPlaceholder","phoneNumberPrefix","UNSAFE_triggerButtonProps","findCountryByPrefix","format","phoneFormat","onClose","phoneNumberLabel","Input","ref","autoComplete","inputMode"],"mappings":"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"}
+{"version":3,"file":"PhoneNumberInput.js","sources":["../../src/PhoneNumberInput/PhoneNumberInput.tsx"],"sourcesContent":["import { useState, useEffect, useMemo, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { useFieldLabelRef, useInputAttributes } from '../Inputs/contexts';\nimport { useInputPaddings } from '../Inputs/InputGroup/InputGroup';\nimport { SelectInput, SelectInputOptionContent, SelectInputProps } from '../Inputs/SelectInput';\nimport messages from './PhoneNumberInput.messages';\nimport countries from './Data/countries';\nimport {\n  explodeNumberModel,\n  isValidPhoneNumber,\n  cleanNumber,\n  setDefaultPrefix,\n  sortArrayByProperty,\n  groupCountriesByPrefix,\n  excludeCountries,\n  findCountryByPrefix,\n} from './utils';\nimport { PhoneNumber } from './utils/explodeNumberModel';\nimport { Input } from '../Inputs/Input/Input';\n\nconst ALLOWED_PHONE_CHARS = /^$|^[\\d-\\s]+$/;\n\nexport interface PhoneNumberInputProps {\n  id?: string;\n  'aria-labelledby'?: string;\n  required?: boolean;\n  disabled?: boolean;\n  initialValue?: string;\n  onChange: (value: string | null, prefix: string) => void;\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  onBlur?: () => void;\n  countryCode?: string;\n  /** @default 'Prefix' */\n  searchPlaceholder?: string;\n  /** @default 'md' */\n  size?: SizeSmall | SizeMedium | SizeLarge;\n  placeholder?: string;\n  /** @default {} */\n  selectProps?: Partial<SelectInputProps<string | null>>;\n  /**\n   * List of iso3 codes of countries to remove from the list\n   * @default []\n   */\n  disabledCountries?: readonly string[];\n}\n\nconst defaultSelectProps = {} satisfies PhoneNumberInputProps['selectProps'];\nconst defaultDisabledCountries = [] satisfies PhoneNumberInputProps['disabledCountries'];\n\nconst PhoneNumberInput = ({\n  id,\n  'aria-labelledby': ariaLabelledByProp,\n  required,\n  disabled,\n  initialValue,\n  onChange,\n  onFocus,\n  onBlur,\n  countryCode,\n  searchPlaceholder,\n  size = Size.MEDIUM,\n  placeholder,\n  selectProps = defaultSelectProps,\n  disabledCountries = defaultDisabledCountries,\n}: PhoneNumberInputProps) => {\n  const countryCodeSelectRef = useRef<HTMLButtonElement>(null);\n  const phoneNumberInputRef = useRef<HTMLInputElement>(null);\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n  const { paddingInlineStart } = useInputPaddings();\n  const hasInputGroupAddonStart = paddingInlineStart != null;\n  const fieldLabelRef = useFieldLabelRef();\n  const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];\n\n  const { locale, formatMessage } = useIntl();\n\n  const [randomId] = useState(() => Math.random().toString(36).slice(2, 8));\n\n  const createId = (customID: string | undefined, backup: string): string => {\n    if (customID) {\n      return customID + (backup ? `-${backup}` : '');\n    }\n    return `${backup}-${randomId}`;\n  };\n\n  // Link the first non-disabled input to the the Field label, if present\n  const ids = {\n    countryCode: {\n      label: createId(id, 'country-code-label'),\n      select: createId(id, 'country-code-select'),\n    },\n    phoneNumber: {\n      label: createId(id, 'phone-number-label'),\n      input: createId(id, id ? '' : 'phone-number-input'),\n    },\n  };\n\n  const [internalValue, setInternalValue] = useState<PhoneNumber>(() => {\n    const cleanValue = initialValue ? cleanNumber(initialValue) : null;\n\n    if (!cleanValue || !isValidPhoneNumber(cleanValue, 1)) {\n      return {\n        prefix: setDefaultPrefix(locale, countryCode),\n        suffix: '',\n      };\n    }\n\n    return explodeNumberModel(cleanValue);\n  });\n  const broadcastedValueRef = useRef<PhoneNumber>(internalValue);\n\n  const [suffixDirty, setSuffixDirty] = useState(false);\n\n  useEffect(() => {\n    if (!suffixDirty && internalValue.suffix) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- Tracking when suffix becomes dirty\n      setSuffixDirty(true);\n    }\n  }, [internalValue.suffix, suffixDirty]);\n\n  const countriesByPrefix = useMemo(\n    () =>\n      groupCountriesByPrefix(\n        sortArrayByProperty(excludeCountries(countries, disabledCountries), 'iso3'),\n      ),\n    [disabledCountries],\n  );\n\n  const onSuffixChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n    const suffix = event.target.value;\n    if (ALLOWED_PHONE_CHARS.test(suffix)) {\n      setInternalValue((prev) => ({ ...prev, suffix }));\n    }\n  };\n\n  const onPaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {\n    if (!event.nativeEvent.clipboardData) {\n      return;\n    }\n\n    const pastedValue = (event.nativeEvent.clipboardData.getData('text/plain') || '').replace(\n      /(\\s|-)+/g,\n      '',\n    );\n    const pastedNumber = explodeNumberModel(pastedValue);\n\n    if (\n      pastedNumber.prefix != null &&\n      countriesByPrefix.has(pastedNumber.prefix) &&\n      ALLOWED_PHONE_CHARS.test(pastedNumber.suffix)\n    ) {\n      setInternalValue(pastedNumber);\n    }\n  };\n\n  useEffect(() => {\n    const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;\n    const broadcastedPhoneNumber = `${broadcastedValueRef.current.prefix ?? ''}${broadcastedValueRef.current.suffix}`;\n\n    if (internalPhoneNumber === broadcastedPhoneNumber) {\n      return;\n    }\n\n    const newValue = isValidPhoneNumber(internalPhoneNumber)\n      ? cleanNumber(internalPhoneNumber)\n      : null;\n\n    onChange(\n      newValue,\n      internalValue.prefix ?? '', // TODO: Allow `null` in public API\n    );\n    broadcastedValueRef.current = internalValue;\n  }, [onChange, internalValue]);\n\n  useEffect(() => {\n    const labelRef = fieldLabelRef?.current;\n\n    if (labelRef) {\n      const handleLabelClick = () => {\n        if (!selectProps.disabled) {\n          countryCodeSelectRef.current?.click();\n        } else {\n          phoneNumberInputRef.current?.focus();\n        }\n      };\n\n      labelRef.addEventListener('click', handleLabelClick);\n\n      return () => {\n        labelRef?.removeEventListener('click', handleLabelClick);\n      };\n    }\n  }, [fieldLabelRef, selectProps.disabled]);\n\n  return (\n    <fieldset {...inputAttributes} aria-labelledby={ariaLabelledBy} className=\"tw-telephone\">\n      <label className=\"sr-only\" id={ids.countryCode.label} htmlFor={ids.countryCode.select}>\n        {formatMessage(messages.countryCodeLabel)}\n      </label>\n      <div\n        className={`tw-telephone__country-select${\n          hasInputGroupAddonStart\n            ? ' tw-telephone__country-select--with-input-group-addon-start'\n            : ''\n        }`}\n      >\n        <SelectInput\n          triggerRef={countryCodeSelectRef}\n          placeholder={formatMessage(messages.selectInputPlaceholder)}\n          items={[...countriesByPrefix].map(([prefix, countries]) => ({\n            type: 'option',\n            value: prefix,\n            filterMatchers: [\n              prefix,\n              ...countries.map((country) => country.name),\n              ...countries.map((country) => country.iso3),\n            ],\n          }))}\n          value={internalValue.prefix}\n          renderValue={(prefix, withinTrigger) => (\n            <SelectInputOptionContent\n              title={prefix}\n              note={\n                withinTrigger\n                  ? undefined\n                  : countriesByPrefix\n                      .get(prefix)\n                      ?.map((country) => country.iso3)\n                      .join(', ')\n              }\n              className={withinTrigger ? undefined : 'tw-telephone__prefix-option'}\n            />\n          )}\n          filterable\n          filterPlaceholder={searchPlaceholder ?? formatMessage(messages.phoneNumberPrefix)}\n          disabled={disabled}\n          size={size}\n          id={ids.countryCode.select}\n          UNSAFE_triggerButtonProps={{\n            id: ids.countryCode.select,\n            'aria-labelledby': ids.countryCode.label,\n            'aria-describedby': undefined,\n            'aria-invalid': undefined,\n          }}\n          onChange={(prefix) => {\n            const country = prefix != null ? findCountryByPrefix(prefix) : null;\n            setInternalValue((prev) => ({ ...prev, prefix, format: country?.phoneFormat }));\n          }}\n          onClose={() => {\n            if (suffixDirty) {\n              onBlur?.();\n            }\n          }}\n          {...selectProps}\n        />\n      </div>\n      <label className=\"sr-only\" id={ids.phoneNumber.label} htmlFor={ids.phoneNumber.input}>\n        {formatMessage(messages.phoneNumberLabel)}\n      </label>\n      <div className=\"tw-telephone__number-input\">\n        <div className={`input-group input-group-${size} ${disabled ? 'disabled' : ''}`}>\n          <Input\n            ref={phoneNumberInputRef}\n            className=\"tw-telephone__number-input-field\"\n            id={ids.phoneNumber.input}\n            autoComplete=\"tel-national\"\n            name=\"phoneNumber\"\n            inputMode=\"numeric\"\n            value={internalValue.suffix}\n            disabled={disabled}\n            required={required}\n            placeholder={placeholder}\n            aria-labelledby={ids.phoneNumber.label}\n            onChange={onSuffixChange}\n            onPaste={onPaste}\n            onFocus={onFocus}\n            onBlur={() => onBlur?.()}\n          />\n        </div>\n      </div>\n    </fieldset>\n  );\n};\n\nexport default PhoneNumberInput;\n"],"names":["ALLOWED_PHONE_CHARS","defaultSelectProps","defaultDisabledCountries","PhoneNumberInput","id","ariaLabelledByProp","required","disabled","initialValue","onChange","onFocus","onBlur","countryCode","searchPlaceholder","size","Size","MEDIUM","placeholder","selectProps","disabledCountries","countryCodeSelectRef","useRef","phoneNumberInputRef","inputAttributes","useInputAttributes","nonLabelable","paddingInlineStart","useInputPaddings","hasInputGroupAddonStart","fieldLabelRef","useFieldLabelRef","ariaLabelledBy","locale","formatMessage","useIntl","randomId","useState","Math","random","toString","slice","createId","customID","backup","ids","label","select","phoneNumber","input","internalValue","setInternalValue","cleanValue","cleanNumber","isValidPhoneNumber","prefix","setDefaultPrefix","suffix","explodeNumberModel","broadcastedValueRef","suffixDirty","setSuffixDirty","useEffect","countriesByPrefix","useMemo","groupCountriesByPrefix","sortArrayByProperty","excludeCountries","countries","onSuffixChange","event","target","value","test","prev","onPaste","nativeEvent","clipboardData","pastedValue","getData","replace","pastedNumber","has","internalPhoneNumber","broadcastedPhoneNumber","current","newValue","labelRef","handleLabelClick","click","focus","addEventListener","removeEventListener","_jsxs","className","children","_jsx","htmlFor","messages","countryCodeLabel","SelectInput","triggerRef","selectInputPlaceholder","items","map","type","filterMatchers","country","name","iso3","renderValue","withinTrigger","SelectInputOptionContent","title","note","undefined","get","join","filterable","filterPlaceholder","phoneNumberPrefix","UNSAFE_triggerButtonProps","findCountryByPrefix","format","phoneFormat","onClose","phoneNumberLabel","Input","ref","autoComplete","inputMode"],"mappings":"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"}

package/build/PhoneNumberInput/PhoneNumberInput.mjs

@@ -184,7 +184,8 @@ const PhoneNumberInput = ({
         value: internalValue.prefix,
         renderValue: (prefix, withinTrigger) => /*#__PURE__*/jsx(SelectInputOptionContent, {
           title: prefix,
-          note: withinTrigger ? undefined : countriesByPrefix.get(prefix)?.map(country => country.iso3).join(', ')
+          note: withinTrigger ? undefined : countriesByPrefix.get(prefix)?.map(country => country.iso3).join(', '),
+          className: withinTrigger ? undefined : 'tw-telephone__prefix-option'
         }),
         filterable: true,
         filterPlaceholder: searchPlaceholder ?? formatMessage(messages.phoneNumberPrefix),

package/build/PhoneNumberInput/PhoneNumberInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneNumberInput.mjs","sources":["../../src/PhoneNumberInput/PhoneNumberInput.tsx"],"sourcesContent":["import { useState, useEffect, useMemo, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { useFieldLabelRef, useInputAttributes } from '../Inputs/contexts';\nimport { useInputPaddings } from '../Inputs/InputGroup/InputGroup';\nimport { SelectInput, SelectInputOptionContent, SelectInputProps } from '../Inputs/SelectInput';\nimport messages from './PhoneNumberInput.messages';\nimport countries from './Data/countries';\nimport {\n  explodeNumberModel,\n  isValidPhoneNumber,\n  cleanNumber,\n  setDefaultPrefix,\n  sortArrayByProperty,\n  groupCountriesByPrefix,\n  excludeCountries,\n  findCountryByPrefix,\n} from './utils';\nimport { PhoneNumber } from './utils/explodeNumberModel';\nimport { Input } from '../Inputs/Input/Input';\n\nconst ALLOWED_PHONE_CHARS = /^$|^[\\d-\\s]+$/;\n\nexport interface PhoneNumberInputProps {\n  id?: string;\n  'aria-labelledby'?: string;\n  required?: boolean;\n  disabled?: boolean;\n  initialValue?: string;\n  onChange: (value: string | null, prefix: string) => void;\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  onBlur?: () => void;\n  countryCode?: string;\n  /** @default 'Prefix' */\n  searchPlaceholder?: string;\n  /** @default 'md' */\n  size?: SizeSmall | SizeMedium | SizeLarge;\n  placeholder?: string;\n  /** @default {} */\n  selectProps?: Partial<SelectInputProps<string | null>>;\n  /**\n   * List of iso3 codes of countries to remove from the list\n   * @default []\n   */\n  disabledCountries?: readonly string[];\n}\n\nconst defaultSelectProps = {} satisfies PhoneNumberInputProps['selectProps'];\nconst defaultDisabledCountries = [] satisfies PhoneNumberInputProps['disabledCountries'];\n\nconst PhoneNumberInput = ({\n  id,\n  'aria-labelledby': ariaLabelledByProp,\n  required,\n  disabled,\n  initialValue,\n  onChange,\n  onFocus,\n  onBlur,\n  countryCode,\n  searchPlaceholder,\n  size = Size.MEDIUM,\n  placeholder,\n  selectProps = defaultSelectProps,\n  disabledCountries = defaultDisabledCountries,\n}: PhoneNumberInputProps) => {\n  const countryCodeSelectRef = useRef<HTMLButtonElement>(null);\n  const phoneNumberInputRef = useRef<HTMLInputElement>(null);\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n  const { paddingInlineStart } = useInputPaddings();\n  const hasInputGroupAddonStart = paddingInlineStart != null;\n  const fieldLabelRef = useFieldLabelRef();\n  const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];\n\n  const { locale, formatMessage } = useIntl();\n\n  const [randomId] = useState(() => Math.random().toString(36).slice(2, 8));\n\n  const createId = (customID: string | undefined, backup: string): string => {\n    if (customID) {\n      return customID + (backup ? `-${backup}` : '');\n    }\n    return `${backup}-${randomId}`;\n  };\n\n  // Link the first non-disabled input to the the Field label, if present\n  const ids = {\n    countryCode: {\n      label: createId(id, 'country-code-label'),\n      select: createId(id, 'country-code-select'),\n    },\n    phoneNumber: {\n      label: createId(id, 'phone-number-label'),\n      input: createId(id, id ? '' : 'phone-number-input'),\n    },\n  };\n\n  const [internalValue, setInternalValue] = useState<PhoneNumber>(() => {\n    const cleanValue = initialValue ? cleanNumber(initialValue) : null;\n\n    if (!cleanValue || !isValidPhoneNumber(cleanValue, 1)) {\n      return {\n        prefix: setDefaultPrefix(locale, countryCode),\n        suffix: '',\n      };\n    }\n\n    return explodeNumberModel(cleanValue);\n  });\n  const broadcastedValueRef = useRef<PhoneNumber>(internalValue);\n\n  const [suffixDirty, setSuffixDirty] = useState(false);\n\n  useEffect(() => {\n    if (!suffixDirty && internalValue.suffix) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- Tracking when suffix becomes dirty\n      setSuffixDirty(true);\n    }\n  }, [internalValue.suffix, suffixDirty]);\n\n  const countriesByPrefix = useMemo(\n    () =>\n      groupCountriesByPrefix(\n        sortArrayByProperty(excludeCountries(countries, disabledCountries), 'iso3'),\n      ),\n    [disabledCountries],\n  );\n\n  const onSuffixChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n    const suffix = event.target.value;\n    if (ALLOWED_PHONE_CHARS.test(suffix)) {\n      setInternalValue((prev) => ({ ...prev, suffix }));\n    }\n  };\n\n  const onPaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {\n    if (!event.nativeEvent.clipboardData) {\n      return;\n    }\n\n    const pastedValue = (event.nativeEvent.clipboardData.getData('text/plain') || '').replace(\n      /(\\s|-)+/g,\n      '',\n    );\n    const pastedNumber = explodeNumberModel(pastedValue);\n\n    if (\n      pastedNumber.prefix != null &&\n      countriesByPrefix.has(pastedNumber.prefix) &&\n      ALLOWED_PHONE_CHARS.test(pastedNumber.suffix)\n    ) {\n      setInternalValue(pastedNumber);\n    }\n  };\n\n  useEffect(() => {\n    const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;\n    const broadcastedPhoneNumber = `${broadcastedValueRef.current.prefix ?? ''}${broadcastedValueRef.current.suffix}`;\n\n    if (internalPhoneNumber === broadcastedPhoneNumber) {\n      return;\n    }\n\n    const newValue = isValidPhoneNumber(internalPhoneNumber)\n      ? cleanNumber(internalPhoneNumber)\n      : null;\n\n    onChange(\n      newValue,\n      internalValue.prefix ?? '', // TODO: Allow `null` in public API\n    );\n    broadcastedValueRef.current = internalValue;\n  }, [onChange, internalValue]);\n\n  useEffect(() => {\n    const labelRef = fieldLabelRef?.current;\n\n    if (labelRef) {\n      const handleLabelClick = () => {\n        if (!selectProps.disabled) {\n          countryCodeSelectRef.current?.click();\n        } else {\n          phoneNumberInputRef.current?.focus();\n        }\n      };\n\n      labelRef.addEventListener('click', handleLabelClick);\n\n      return () => {\n        labelRef?.removeEventListener('click', handleLabelClick);\n      };\n    }\n  }, [fieldLabelRef, selectProps.disabled]);\n\n  return (\n    <fieldset {...inputAttributes} aria-labelledby={ariaLabelledBy} className=\"tw-telephone\">\n      <label className=\"sr-only\" id={ids.countryCode.label} htmlFor={ids.countryCode.select}>\n        {formatMessage(messages.countryCodeLabel)}\n      </label>\n      <div\n        className={`tw-telephone__country-select${\n          hasInputGroupAddonStart\n            ? ' tw-telephone__country-select--with-input-group-addon-start'\n            : ''\n        }`}\n      >\n        <SelectInput\n          triggerRef={countryCodeSelectRef}\n          placeholder={formatMessage(messages.selectInputPlaceholder)}\n          items={[...countriesByPrefix].map(([prefix, countries]) => ({\n            type: 'option',\n            value: prefix,\n            filterMatchers: [\n              prefix,\n              ...countries.map((country) => country.name),\n              ...countries.map((country) => country.iso3),\n            ],\n          }))}\n          value={internalValue.prefix}\n          renderValue={(prefix, withinTrigger) => (\n            <SelectInputOptionContent\n              title={prefix}\n              note={\n                withinTrigger\n                  ? undefined\n                  : countriesByPrefix\n                      .get(prefix)\n                      ?.map((country) => country.iso3)\n                      .join(', ')\n              }\n            />\n          )}\n          filterable\n          filterPlaceholder={searchPlaceholder ?? formatMessage(messages.phoneNumberPrefix)}\n          disabled={disabled}\n          size={size}\n          id={ids.countryCode.select}\n          UNSAFE_triggerButtonProps={{\n            id: ids.countryCode.select,\n            'aria-labelledby': ids.countryCode.label,\n            'aria-describedby': undefined,\n            'aria-invalid': undefined,\n          }}\n          onChange={(prefix) => {\n            const country = prefix != null ? findCountryByPrefix(prefix) : null;\n            setInternalValue((prev) => ({ ...prev, prefix, format: country?.phoneFormat }));\n          }}\n          onClose={() => {\n            if (suffixDirty) {\n              onBlur?.();\n            }\n          }}\n          {...selectProps}\n        />\n      </div>\n      <label className=\"sr-only\" id={ids.phoneNumber.label} htmlFor={ids.phoneNumber.input}>\n        {formatMessage(messages.phoneNumberLabel)}\n      </label>\n      <div className=\"tw-telephone__number-input\">\n        <div className={`input-group input-group-${size} ${disabled ? 'disabled' : ''}`}>\n          <Input\n            ref={phoneNumberInputRef}\n            className=\"tw-telephone__number-input-field\"\n            id={ids.phoneNumber.input}\n            autoComplete=\"tel-national\"\n            name=\"phoneNumber\"\n            inputMode=\"numeric\"\n            value={internalValue.suffix}\n            disabled={disabled}\n            required={required}\n            placeholder={placeholder}\n            aria-labelledby={ids.phoneNumber.label}\n            onChange={onSuffixChange}\n            onPaste={onPaste}\n            onFocus={onFocus}\n            onBlur={() => onBlur?.()}\n          />\n        </div>\n      </div>\n    </fieldset>\n  );\n};\n\nexport default PhoneNumberInput;\n"],"names":["ALLOWED_PHONE_CHARS","defaultSelectProps","defaultDisabledCountries","PhoneNumberInput","id","ariaLabelledByProp","required","disabled","initialValue","onChange","onFocus","onBlur","countryCode","searchPlaceholder","size","Size","MEDIUM","placeholder","selectProps","disabledCountries","countryCodeSelectRef","useRef","phoneNumberInputRef","inputAttributes","useInputAttributes","nonLabelable","paddingInlineStart","useInputPaddings","hasInputGroupAddonStart","fieldLabelRef","useFieldLabelRef","ariaLabelledBy","locale","formatMessage","useIntl","randomId","useState","Math","random","toString","slice","createId","customID","backup","ids","label","select","phoneNumber","input","internalValue","setInternalValue","cleanValue","cleanNumber","isValidPhoneNumber","prefix","setDefaultPrefix","suffix","explodeNumberModel","broadcastedValueRef","suffixDirty","setSuffixDirty","useEffect","countriesByPrefix","useMemo","groupCountriesByPrefix","sortArrayByProperty","excludeCountries","countries","onSuffixChange","event","target","value","test","prev","onPaste","nativeEvent","clipboardData","pastedValue","getData","replace","pastedNumber","has","internalPhoneNumber","broadcastedPhoneNumber","current","newValue","labelRef","handleLabelClick","click","focus","addEventListener","removeEventListener","_jsxs","className","children","_jsx","htmlFor","messages","countryCodeLabel","SelectInput","triggerRef","selectInputPlaceholder","items","map","type","filterMatchers","country","name","iso3","renderValue","withinTrigger","SelectInputOptionContent","title","note","undefined","get","join","filterable","filterPlaceholder","phoneNumberPrefix","UNSAFE_triggerButtonProps","findCountryByPrefix","format","phoneFormat","onClose","phoneNumberLabel","Input","ref","autoComplete","inputMode"],"mappings":"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"}
+{"version":3,"file":"PhoneNumberInput.mjs","sources":["../../src/PhoneNumberInput/PhoneNumberInput.tsx"],"sourcesContent":["import { useState, useEffect, useMemo, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { useFieldLabelRef, useInputAttributes } from '../Inputs/contexts';\nimport { useInputPaddings } from '../Inputs/InputGroup/InputGroup';\nimport { SelectInput, SelectInputOptionContent, SelectInputProps } from '../Inputs/SelectInput';\nimport messages from './PhoneNumberInput.messages';\nimport countries from './Data/countries';\nimport {\n  explodeNumberModel,\n  isValidPhoneNumber,\n  cleanNumber,\n  setDefaultPrefix,\n  sortArrayByProperty,\n  groupCountriesByPrefix,\n  excludeCountries,\n  findCountryByPrefix,\n} from './utils';\nimport { PhoneNumber } from './utils/explodeNumberModel';\nimport { Input } from '../Inputs/Input/Input';\n\nconst ALLOWED_PHONE_CHARS = /^$|^[\\d-\\s]+$/;\n\nexport interface PhoneNumberInputProps {\n  id?: string;\n  'aria-labelledby'?: string;\n  required?: boolean;\n  disabled?: boolean;\n  initialValue?: string;\n  onChange: (value: string | null, prefix: string) => void;\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  onBlur?: () => void;\n  countryCode?: string;\n  /** @default 'Prefix' */\n  searchPlaceholder?: string;\n  /** @default 'md' */\n  size?: SizeSmall | SizeMedium | SizeLarge;\n  placeholder?: string;\n  /** @default {} */\n  selectProps?: Partial<SelectInputProps<string | null>>;\n  /**\n   * List of iso3 codes of countries to remove from the list\n   * @default []\n   */\n  disabledCountries?: readonly string[];\n}\n\nconst defaultSelectProps = {} satisfies PhoneNumberInputProps['selectProps'];\nconst defaultDisabledCountries = [] satisfies PhoneNumberInputProps['disabledCountries'];\n\nconst PhoneNumberInput = ({\n  id,\n  'aria-labelledby': ariaLabelledByProp,\n  required,\n  disabled,\n  initialValue,\n  onChange,\n  onFocus,\n  onBlur,\n  countryCode,\n  searchPlaceholder,\n  size = Size.MEDIUM,\n  placeholder,\n  selectProps = defaultSelectProps,\n  disabledCountries = defaultDisabledCountries,\n}: PhoneNumberInputProps) => {\n  const countryCodeSelectRef = useRef<HTMLButtonElement>(null);\n  const phoneNumberInputRef = useRef<HTMLInputElement>(null);\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n  const { paddingInlineStart } = useInputPaddings();\n  const hasInputGroupAddonStart = paddingInlineStart != null;\n  const fieldLabelRef = useFieldLabelRef();\n  const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];\n\n  const { locale, formatMessage } = useIntl();\n\n  const [randomId] = useState(() => Math.random().toString(36).slice(2, 8));\n\n  const createId = (customID: string | undefined, backup: string): string => {\n    if (customID) {\n      return customID + (backup ? `-${backup}` : '');\n    }\n    return `${backup}-${randomId}`;\n  };\n\n  // Link the first non-disabled input to the the Field label, if present\n  const ids = {\n    countryCode: {\n      label: createId(id, 'country-code-label'),\n      select: createId(id, 'country-code-select'),\n    },\n    phoneNumber: {\n      label: createId(id, 'phone-number-label'),\n      input: createId(id, id ? '' : 'phone-number-input'),\n    },\n  };\n\n  const [internalValue, setInternalValue] = useState<PhoneNumber>(() => {\n    const cleanValue = initialValue ? cleanNumber(initialValue) : null;\n\n    if (!cleanValue || !isValidPhoneNumber(cleanValue, 1)) {\n      return {\n        prefix: setDefaultPrefix(locale, countryCode),\n        suffix: '',\n      };\n    }\n\n    return explodeNumberModel(cleanValue);\n  });\n  const broadcastedValueRef = useRef<PhoneNumber>(internalValue);\n\n  const [suffixDirty, setSuffixDirty] = useState(false);\n\n  useEffect(() => {\n    if (!suffixDirty && internalValue.suffix) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- Tracking when suffix becomes dirty\n      setSuffixDirty(true);\n    }\n  }, [internalValue.suffix, suffixDirty]);\n\n  const countriesByPrefix = useMemo(\n    () =>\n      groupCountriesByPrefix(\n        sortArrayByProperty(excludeCountries(countries, disabledCountries), 'iso3'),\n      ),\n    [disabledCountries],\n  );\n\n  const onSuffixChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n    const suffix = event.target.value;\n    if (ALLOWED_PHONE_CHARS.test(suffix)) {\n      setInternalValue((prev) => ({ ...prev, suffix }));\n    }\n  };\n\n  const onPaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {\n    if (!event.nativeEvent.clipboardData) {\n      return;\n    }\n\n    const pastedValue = (event.nativeEvent.clipboardData.getData('text/plain') || '').replace(\n      /(\\s|-)+/g,\n      '',\n    );\n    const pastedNumber = explodeNumberModel(pastedValue);\n\n    if (\n      pastedNumber.prefix != null &&\n      countriesByPrefix.has(pastedNumber.prefix) &&\n      ALLOWED_PHONE_CHARS.test(pastedNumber.suffix)\n    ) {\n      setInternalValue(pastedNumber);\n    }\n  };\n\n  useEffect(() => {\n    const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;\n    const broadcastedPhoneNumber = `${broadcastedValueRef.current.prefix ?? ''}${broadcastedValueRef.current.suffix}`;\n\n    if (internalPhoneNumber === broadcastedPhoneNumber) {\n      return;\n    }\n\n    const newValue = isValidPhoneNumber(internalPhoneNumber)\n      ? cleanNumber(internalPhoneNumber)\n      : null;\n\n    onChange(\n      newValue,\n      internalValue.prefix ?? '', // TODO: Allow `null` in public API\n    );\n    broadcastedValueRef.current = internalValue;\n  }, [onChange, internalValue]);\n\n  useEffect(() => {\n    const labelRef = fieldLabelRef?.current;\n\n    if (labelRef) {\n      const handleLabelClick = () => {\n        if (!selectProps.disabled) {\n          countryCodeSelectRef.current?.click();\n        } else {\n          phoneNumberInputRef.current?.focus();\n        }\n      };\n\n      labelRef.addEventListener('click', handleLabelClick);\n\n      return () => {\n        labelRef?.removeEventListener('click', handleLabelClick);\n      };\n    }\n  }, [fieldLabelRef, selectProps.disabled]);\n\n  return (\n    <fieldset {...inputAttributes} aria-labelledby={ariaLabelledBy} className=\"tw-telephone\">\n      <label className=\"sr-only\" id={ids.countryCode.label} htmlFor={ids.countryCode.select}>\n        {formatMessage(messages.countryCodeLabel)}\n      </label>\n      <div\n        className={`tw-telephone__country-select${\n          hasInputGroupAddonStart\n            ? ' tw-telephone__country-select--with-input-group-addon-start'\n            : ''\n        }`}\n      >\n        <SelectInput\n          triggerRef={countryCodeSelectRef}\n          placeholder={formatMessage(messages.selectInputPlaceholder)}\n          items={[...countriesByPrefix].map(([prefix, countries]) => ({\n            type: 'option',\n            value: prefix,\n            filterMatchers: [\n              prefix,\n              ...countries.map((country) => country.name),\n              ...countries.map((country) => country.iso3),\n            ],\n          }))}\n          value={internalValue.prefix}\n          renderValue={(prefix, withinTrigger) => (\n            <SelectInputOptionContent\n              title={prefix}\n              note={\n                withinTrigger\n                  ? undefined\n                  : countriesByPrefix\n                      .get(prefix)\n                      ?.map((country) => country.iso3)\n                      .join(', ')\n              }\n              className={withinTrigger ? undefined : 'tw-telephone__prefix-option'}\n            />\n          )}\n          filterable\n          filterPlaceholder={searchPlaceholder ?? formatMessage(messages.phoneNumberPrefix)}\n          disabled={disabled}\n          size={size}\n          id={ids.countryCode.select}\n          UNSAFE_triggerButtonProps={{\n            id: ids.countryCode.select,\n            'aria-labelledby': ids.countryCode.label,\n            'aria-describedby': undefined,\n            'aria-invalid': undefined,\n          }}\n          onChange={(prefix) => {\n            const country = prefix != null ? findCountryByPrefix(prefix) : null;\n            setInternalValue((prev) => ({ ...prev, prefix, format: country?.phoneFormat }));\n          }}\n          onClose={() => {\n            if (suffixDirty) {\n              onBlur?.();\n            }\n          }}\n          {...selectProps}\n        />\n      </div>\n      <label className=\"sr-only\" id={ids.phoneNumber.label} htmlFor={ids.phoneNumber.input}>\n        {formatMessage(messages.phoneNumberLabel)}\n      </label>\n      <div className=\"tw-telephone__number-input\">\n        <div className={`input-group input-group-${size} ${disabled ? 'disabled' : ''}`}>\n          <Input\n            ref={phoneNumberInputRef}\n            className=\"tw-telephone__number-input-field\"\n            id={ids.phoneNumber.input}\n            autoComplete=\"tel-national\"\n            name=\"phoneNumber\"\n            inputMode=\"numeric\"\n            value={internalValue.suffix}\n            disabled={disabled}\n            required={required}\n            placeholder={placeholder}\n            aria-labelledby={ids.phoneNumber.label}\n            onChange={onSuffixChange}\n            onPaste={onPaste}\n            onFocus={onFocus}\n            onBlur={() => onBlur?.()}\n          />\n        </div>\n      </div>\n    </fieldset>\n  );\n};\n\nexport default PhoneNumberInput;\n"],"names":["ALLOWED_PHONE_CHARS","defaultSelectProps","defaultDisabledCountries","PhoneNumberInput","id","ariaLabelledByProp","required","disabled","initialValue","onChange","onFocus","onBlur","countryCode","searchPlaceholder","size","Size","MEDIUM","placeholder","selectProps","disabledCountries","countryCodeSelectRef","useRef","phoneNumberInputRef","inputAttributes","useInputAttributes","nonLabelable","paddingInlineStart","useInputPaddings","hasInputGroupAddonStart","fieldLabelRef","useFieldLabelRef","ariaLabelledBy","locale","formatMessage","useIntl","randomId","useState","Math","random","toString","slice","createId","customID","backup","ids","label","select","phoneNumber","input","internalValue","setInternalValue","cleanValue","cleanNumber","isValidPhoneNumber","prefix","setDefaultPrefix","suffix","explodeNumberModel","broadcastedValueRef","suffixDirty","setSuffixDirty","useEffect","countriesByPrefix","useMemo","groupCountriesByPrefix","sortArrayByProperty","excludeCountries","countries","onSuffixChange","event","target","value","test","prev","onPaste","nativeEvent","clipboardData","pastedValue","getData","replace","pastedNumber","has","internalPhoneNumber","broadcastedPhoneNumber","current","newValue","labelRef","handleLabelClick","click","focus","addEventListener","removeEventListener","_jsxs","className","children","_jsx","htmlFor","messages","countryCodeLabel","SelectInput","triggerRef","selectInputPlaceholder","items","map","type","filterMatchers","country","name","iso3","renderValue","withinTrigger","SelectInputOptionContent","title","note","undefined","get","join","filterable","filterPlaceholder","phoneNumberPrefix","UNSAFE_triggerButtonProps","findCountryByPrefix","format","phoneFormat","onClose","phoneNumberLabel","Input","ref","autoComplete","inputMode"],"mappings":"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"}

package/build/PromoCard/Indicator/PromoCardIndicator.js

@@ -43,7 +43,7 @@ const PromoCardIndicator = ({
   const isIconString = icon && typeof icon === 'string';
   const IconComponent = isIconString && {
     check: icons.Check,
-    arrow: icons.ArrowRight,
+    arrow: icons.ArrowEnd,
     download: icons.Download
   }[icon];
   return /*#__PURE__*/jsxRuntime.jsxs("div", {

package/build/PromoCard/Indicator/PromoCardIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"PromoCardIndicator.js","sources":["../../../src/PromoCard/Indicator/PromoCardIndicator.tsx"],"sourcesContent":["import { ArrowRight, Check, Download } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ReactElement, ReactNode } from 'react';\n\nimport Body from '../../Body';\nimport { Typography } from '../../common';\nimport AvatarView from '../../AvatarView';\n\nexport type PromoCardIndicatorProps = {\n  /** Optional class name(s) to add to the indicator container. */\n  className?: string;\n\n  /** Optional label to display next to the indicator. */\n  label?: string;\n\n  /** Optional icon to display in the indicator. */\n  icon?: 'check' | 'arrow' | 'download' | ReactElement;\n\n  /** Optional prop to specify whether the indicator is sized small or not. */\n  isSmall?: boolean;\n\n  /** Optional ID to add to the indicator container for testing purposes. */\n  testid?: string;\n\n  /** Optional children to display inside the indicator. */\n  children?: ReactNode;\n};\n\n/**\n * PromoCardIndicator component.\n *\n * A PromoCardIndicator is a small component that can be used to display\n * additional information or actions related to a PromoCard. It can be\n * customized with various props to suit different use cases.\n *\n * @param {string} className - Optional class name(s) to add to the indicator container.\n * @param {string} label - Optional label to display next to the indicator.\n * @param {string | ReactElement} icon - Optional icon to display in the indicator.\n * @param {string} testid - Optional ID to add to the indicator container for testing purposes.\n * @param {ReactNode} children - Optional children to display inside the indicator.\n * @returns {React.JSX.Element} - The PromoCardIndicator component.\n * @example\n * <PromoCardIndicator label=\"Download\" icon=\"download\" />\n */\nconst PromoCardIndicator: React.FC<PromoCardIndicatorProps> = ({\n  className,\n  children,\n  label,\n  icon,\n  isSmall = false,\n  testid,\n  ...rest\n}) => {\n  const isIconString = icon && typeof icon === 'string';\n\n  const IconComponent =\n    isIconString &&\n    {\n      check: Check,\n      arrow: ArrowRight,\n      download: Download,\n    }[icon];\n\n  return (\n    <div className={clsx('np-Card-indicator', className)} data-testid={testid} {...rest}>\n      {label && (\n        <Body as=\"span\" type={Typography.BODY_LARGE_BOLD} className=\"np-Card-indicatorText\">\n          {label}\n        </Body>\n      )}\n      {icon && (\n        <AvatarView\n          interactive\n          size={isSmall ? 40 : 56}\n          style={{ backgroundColor: 'var(--Card-indicator-icon-background-color)' }}\n          className=\"np-Card-indicatorIcon\"\n        >\n          {IconComponent ? <IconComponent size={24} aria-hidden=\"true\" /> : icon}\n        </AvatarView>\n      )}\n      {children}\n    </div>\n  );\n};\n\nexport default PromoCardIndicator;\n"],"names":["PromoCardIndicator","className","children","label","icon","isSmall","testid","rest","isIconString","IconComponent","check","Check","arrow","ArrowRight","download","Download","_jsxs","clsx","_jsx","Body","as","type","Typography","BODY_LARGE_BOLD","AvatarView","interactive","size","style","backgroundColor"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,MAAMA,kBAAkB,GAAsCA,CAAC;EAC7DC,SAAS;EACTC,QAAQ;EACRC,KAAK;EACLC,IAAI;AACJC,EAAAA,OAAO,GAAG,KAAK;EACfC,MAAM;EACN,GAAGC;AAAI,CACR,KAAI;AACH,EAAA,MAAMC,YAAY,GAAGJ,IAAI,IAAI,OAAOA,IAAI,KAAK,QAAQ;EAErD,MAAMK,aAAa,GACjBD,YAAY,IACZ;AACEE,IAAAA,KAAK,EAAEC,WAAK;AACZC,IAAAA,KAAK,EAAEC,gBAAU;AACjBC,IAAAA,QAAQ,EAAEC;GACX,CAACX,IAAI,CAAC;AAET,EAAA,oBACEY,eAAA,CAAA,KAAA,EAAA;AAAKf,IAAAA,SAAS,EAAEgB,SAAI,CAAC,mBAAmB,EAAEhB,SAAS,CAAE;AAAC,IAAA,aAAA,EAAaK,MAAO;AAAA,IAAA,GAAKC,IAAI;AAAAL,IAAAA,QAAA,EAAA,CAChFC,KAAK,iBACJe,cAAA,CAACC,YAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACC,IAAI,EAAEC,qBAAU,CAACC,eAAgB;AAACtB,MAAAA,SAAS,EAAC,uBAAuB;AAAAC,MAAAA,QAAA,EAChFC;AAAK,KACF,CACP,EACAC,IAAI,iBACHc,cAAA,CAACM,kBAAU,EAAA;MACTC,WAAW,EAAA,IAAA;AACXC,MAAAA,IAAI,EAAErB,OAAO,GAAG,EAAE,GAAG,EAAG;AACxBsB,MAAAA,KAAK,EAAE;AAAEC,QAAAA,eAAe,EAAE;OAAgD;AAC1E3B,MAAAA,SAAS,EAAC,uBAAuB;AAAAC,MAAAA,QAAA,EAEhCO,aAAa,gBAAGS,cAAA,CAACT,aAAa,EAAA;AAACiB,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAM,QAAG,GAAGtB;KACxD,CACb,EACAF,QAAQ;AAAA,GACN,CAAC;AAEV;;"}
+{"version":3,"file":"PromoCardIndicator.js","sources":["../../../src/PromoCard/Indicator/PromoCardIndicator.tsx"],"sourcesContent":["import { ArrowEnd, Check, Download } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ReactElement, ReactNode } from 'react';\n\nimport Body from '../../Body';\nimport { Typography } from '../../common';\nimport AvatarView from '../../AvatarView';\n\nexport type PromoCardIndicatorProps = {\n  /** Optional class name(s) to add to the indicator container. */\n  className?: string;\n\n  /** Optional label to display next to the indicator. */\n  label?: string;\n\n  /** Optional icon to display in the indicator. */\n  icon?: 'check' | 'arrow' | 'download' | ReactElement;\n\n  /** Optional prop to specify whether the indicator is sized small or not. */\n  isSmall?: boolean;\n\n  /** Optional ID to add to the indicator container for testing purposes. */\n  testid?: string;\n\n  /** Optional children to display inside the indicator. */\n  children?: ReactNode;\n};\n\n/**\n * PromoCardIndicator component.\n *\n * A PromoCardIndicator is a small component that can be used to display\n * additional information or actions related to a PromoCard. It can be\n * customized with various props to suit different use cases.\n *\n * @param {string} className - Optional class name(s) to add to the indicator container.\n * @param {string} label - Optional label to display next to the indicator.\n * @param {string | ReactElement} icon - Optional icon to display in the indicator.\n * @param {string} testid - Optional ID to add to the indicator container for testing purposes.\n * @param {ReactNode} children - Optional children to display inside the indicator.\n * @returns {React.JSX.Element} - The PromoCardIndicator component.\n * @example\n * <PromoCardIndicator label=\"Download\" icon=\"download\" />\n */\nconst PromoCardIndicator: React.FC<PromoCardIndicatorProps> = ({\n  className,\n  children,\n  label,\n  icon,\n  isSmall = false,\n  testid,\n  ...rest\n}) => {\n  const isIconString = icon && typeof icon === 'string';\n\n  const IconComponent =\n    isIconString &&\n    {\n      check: Check,\n      arrow: ArrowEnd,\n      download: Download,\n    }[icon];\n\n  return (\n    <div className={clsx('np-Card-indicator', className)} data-testid={testid} {...rest}>\n      {label && (\n        <Body as=\"span\" type={Typography.BODY_LARGE_BOLD} className=\"np-Card-indicatorText\">\n          {label}\n        </Body>\n      )}\n      {icon && (\n        <AvatarView\n          interactive\n          size={isSmall ? 40 : 56}\n          style={{ backgroundColor: 'var(--Card-indicator-icon-background-color)' }}\n          className=\"np-Card-indicatorIcon\"\n        >\n          {IconComponent ? <IconComponent size={24} aria-hidden=\"true\" /> : icon}\n        </AvatarView>\n      )}\n      {children}\n    </div>\n  );\n};\n\nexport default PromoCardIndicator;\n"],"names":["PromoCardIndicator","className","children","label","icon","isSmall","testid","rest","isIconString","IconComponent","check","Check","arrow","ArrowEnd","download","Download","_jsxs","clsx","_jsx","Body","as","type","Typography","BODY_LARGE_BOLD","AvatarView","interactive","size","style","backgroundColor"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,MAAMA,kBAAkB,GAAsCA,CAAC;EAC7DC,SAAS;EACTC,QAAQ;EACRC,KAAK;EACLC,IAAI;AACJC,EAAAA,OAAO,GAAG,KAAK;EACfC,MAAM;EACN,GAAGC;AAAI,CACR,KAAI;AACH,EAAA,MAAMC,YAAY,GAAGJ,IAAI,IAAI,OAAOA,IAAI,KAAK,QAAQ;EAErD,MAAMK,aAAa,GACjBD,YAAY,IACZ;AACEE,IAAAA,KAAK,EAAEC,WAAK;AACZC,IAAAA,KAAK,EAAEC,cAAQ;AACfC,IAAAA,QAAQ,EAAEC;GACX,CAACX,IAAI,CAAC;AAET,EAAA,oBACEY,eAAA,CAAA,KAAA,EAAA;AAAKf,IAAAA,SAAS,EAAEgB,SAAI,CAAC,mBAAmB,EAAEhB,SAAS,CAAE;AAAC,IAAA,aAAA,EAAaK,MAAO;AAAA,IAAA,GAAKC,IAAI;AAAAL,IAAAA,QAAA,EAAA,CAChFC,KAAK,iBACJe,cAAA,CAACC,YAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACC,IAAI,EAAEC,qBAAU,CAACC,eAAgB;AAACtB,MAAAA,SAAS,EAAC,uBAAuB;AAAAC,MAAAA,QAAA,EAChFC;AAAK,KACF,CACP,EACAC,IAAI,iBACHc,cAAA,CAACM,kBAAU,EAAA;MACTC,WAAW,EAAA,IAAA;AACXC,MAAAA,IAAI,EAAErB,OAAO,GAAG,EAAE,GAAG,EAAG;AACxBsB,MAAAA,KAAK,EAAE;AAAEC,QAAAA,eAAe,EAAE;OAAgD;AAC1E3B,MAAAA,SAAS,EAAC,uBAAuB;AAAAC,MAAAA,QAAA,EAEhCO,aAAa,gBAAGS,cAAA,CAACT,aAAa,EAAA;AAACiB,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAM,QAAG,GAAGtB;KACxD,CACb,EACAF,QAAQ;AAAA,GACN,CAAC;AAEV;;"}

package/build/PromoCard/Indicator/PromoCardIndicator.mjs

@@ -1,4 +1,4 @@
-import { Download, ArrowRight, Check } from '@transferwise/icons';
+import { Download, ArrowEnd, Check } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import Body from '../../Body/Body.mjs';
 import '../../common/theme.mjs';
@@ -39,7 +39,7 @@ const PromoCardIndicator = ({
   const isIconString = icon && typeof icon === 'string';
   const IconComponent = isIconString && {
     check: Check,
-    arrow: ArrowRight,
+    arrow: ArrowEnd,
     download: Download
   }[icon];
   return /*#__PURE__*/jsxs("div", {

package/build/PromoCard/Indicator/PromoCardIndicator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PromoCardIndicator.mjs","sources":["../../../src/PromoCard/Indicator/PromoCardIndicator.tsx"],"sourcesContent":["import { ArrowRight, Check, Download } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ReactElement, ReactNode } from 'react';\n\nimport Body from '../../Body';\nimport { Typography } from '../../common';\nimport AvatarView from '../../AvatarView';\n\nexport type PromoCardIndicatorProps = {\n  /** Optional class name(s) to add to the indicator container. */\n  className?: string;\n\n  /** Optional label to display next to the indicator. */\n  label?: string;\n\n  /** Optional icon to display in the indicator. */\n  icon?: 'check' | 'arrow' | 'download' | ReactElement;\n\n  /** Optional prop to specify whether the indicator is sized small or not. */\n  isSmall?: boolean;\n\n  /** Optional ID to add to the indicator container for testing purposes. */\n  testid?: string;\n\n  /** Optional children to display inside the indicator. */\n  children?: ReactNode;\n};\n\n/**\n * PromoCardIndicator component.\n *\n * A PromoCardIndicator is a small component that can be used to display\n * additional information or actions related to a PromoCard. It can be\n * customized with various props to suit different use cases.\n *\n * @param {string} className - Optional class name(s) to add to the indicator container.\n * @param {string} label - Optional label to display next to the indicator.\n * @param {string | ReactElement} icon - Optional icon to display in the indicator.\n * @param {string} testid - Optional ID to add to the indicator container for testing purposes.\n * @param {ReactNode} children - Optional children to display inside the indicator.\n * @returns {React.JSX.Element} - The PromoCardIndicator component.\n * @example\n * <PromoCardIndicator label=\"Download\" icon=\"download\" />\n */\nconst PromoCardIndicator: React.FC<PromoCardIndicatorProps> = ({\n  className,\n  children,\n  label,\n  icon,\n  isSmall = false,\n  testid,\n  ...rest\n}) => {\n  const isIconString = icon && typeof icon === 'string';\n\n  const IconComponent =\n    isIconString &&\n    {\n      check: Check,\n      arrow: ArrowRight,\n      download: Download,\n    }[icon];\n\n  return (\n    <div className={clsx('np-Card-indicator', className)} data-testid={testid} {...rest}>\n      {label && (\n        <Body as=\"span\" type={Typography.BODY_LARGE_BOLD} className=\"np-Card-indicatorText\">\n          {label}\n        </Body>\n      )}\n      {icon && (\n        <AvatarView\n          interactive\n          size={isSmall ? 40 : 56}\n          style={{ backgroundColor: 'var(--Card-indicator-icon-background-color)' }}\n          className=\"np-Card-indicatorIcon\"\n        >\n          {IconComponent ? <IconComponent size={24} aria-hidden=\"true\" /> : icon}\n        </AvatarView>\n      )}\n      {children}\n    </div>\n  );\n};\n\nexport default PromoCardIndicator;\n"],"names":["PromoCardIndicator","className","children","label","icon","isSmall","testid","rest","isIconString","IconComponent","check","Check","arrow","ArrowRight","download","Download","_jsxs","clsx","_jsx","Body","as","type","Typography","BODY_LARGE_BOLD","AvatarView","interactive","size","style","backgroundColor"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,MAAMA,kBAAkB,GAAsCA,CAAC;EAC7DC,SAAS;EACTC,QAAQ;EACRC,KAAK;EACLC,IAAI;AACJC,EAAAA,OAAO,GAAG,KAAK;EACfC,MAAM;EACN,GAAGC;AAAI,CACR,KAAI;AACH,EAAA,MAAMC,YAAY,GAAGJ,IAAI,IAAI,OAAOA,IAAI,KAAK,QAAQ;EAErD,MAAMK,aAAa,GACjBD,YAAY,IACZ;AACEE,IAAAA,KAAK,EAAEC,KAAK;AACZC,IAAAA,KAAK,EAAEC,UAAU;AACjBC,IAAAA,QAAQ,EAAEC;GACX,CAACX,IAAI,CAAC;AAET,EAAA,oBACEY,IAAA,CAAA,KAAA,EAAA;AAAKf,IAAAA,SAAS,EAAEgB,IAAI,CAAC,mBAAmB,EAAEhB,SAAS,CAAE;AAAC,IAAA,aAAA,EAAaK,MAAO;AAAA,IAAA,GAAKC,IAAI;AAAAL,IAAAA,QAAA,EAAA,CAChFC,KAAK,iBACJe,GAAA,CAACC,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACC,IAAI,EAAEC,UAAU,CAACC,eAAgB;AAACtB,MAAAA,SAAS,EAAC,uBAAuB;AAAAC,MAAAA,QAAA,EAChFC;AAAK,KACF,CACP,EACAC,IAAI,iBACHc,GAAA,CAACM,UAAU,EAAA;MACTC,WAAW,EAAA,IAAA;AACXC,MAAAA,IAAI,EAAErB,OAAO,GAAG,EAAE,GAAG,EAAG;AACxBsB,MAAAA,KAAK,EAAE;AAAEC,QAAAA,eAAe,EAAE;OAAgD;AAC1E3B,MAAAA,SAAS,EAAC,uBAAuB;AAAAC,MAAAA,QAAA,EAEhCO,aAAa,gBAAGS,GAAA,CAACT,aAAa,EAAA;AAACiB,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAM,QAAG,GAAGtB;KACxD,CACb,EACAF,QAAQ;AAAA,GACN,CAAC;AAEV;;"}
+{"version":3,"file":"PromoCardIndicator.mjs","sources":["../../../src/PromoCard/Indicator/PromoCardIndicator.tsx"],"sourcesContent":["import { ArrowEnd, Check, Download } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ReactElement, ReactNode } from 'react';\n\nimport Body from '../../Body';\nimport { Typography } from '../../common';\nimport AvatarView from '../../AvatarView';\n\nexport type PromoCardIndicatorProps = {\n  /** Optional class name(s) to add to the indicator container. */\n  className?: string;\n\n  /** Optional label to display next to the indicator. */\n  label?: string;\n\n  /** Optional icon to display in the indicator. */\n  icon?: 'check' | 'arrow' | 'download' | ReactElement;\n\n  /** Optional prop to specify whether the indicator is sized small or not. */\n  isSmall?: boolean;\n\n  /** Optional ID to add to the indicator container for testing purposes. */\n  testid?: string;\n\n  /** Optional children to display inside the indicator. */\n  children?: ReactNode;\n};\n\n/**\n * PromoCardIndicator component.\n *\n * A PromoCardIndicator is a small component that can be used to display\n * additional information or actions related to a PromoCard. It can be\n * customized with various props to suit different use cases.\n *\n * @param {string} className - Optional class name(s) to add to the indicator container.\n * @param {string} label - Optional label to display next to the indicator.\n * @param {string | ReactElement} icon - Optional icon to display in the indicator.\n * @param {string} testid - Optional ID to add to the indicator container for testing purposes.\n * @param {ReactNode} children - Optional children to display inside the indicator.\n * @returns {React.JSX.Element} - The PromoCardIndicator component.\n * @example\n * <PromoCardIndicator label=\"Download\" icon=\"download\" />\n */\nconst PromoCardIndicator: React.FC<PromoCardIndicatorProps> = ({\n  className,\n  children,\n  label,\n  icon,\n  isSmall = false,\n  testid,\n  ...rest\n}) => {\n  const isIconString = icon && typeof icon === 'string';\n\n  const IconComponent =\n    isIconString &&\n    {\n      check: Check,\n      arrow: ArrowEnd,\n      download: Download,\n    }[icon];\n\n  return (\n    <div className={clsx('np-Card-indicator', className)} data-testid={testid} {...rest}>\n      {label && (\n        <Body as=\"span\" type={Typography.BODY_LARGE_BOLD} className=\"np-Card-indicatorText\">\n          {label}\n        </Body>\n      )}\n      {icon && (\n        <AvatarView\n          interactive\n          size={isSmall ? 40 : 56}\n          style={{ backgroundColor: 'var(--Card-indicator-icon-background-color)' }}\n          className=\"np-Card-indicatorIcon\"\n        >\n          {IconComponent ? <IconComponent size={24} aria-hidden=\"true\" /> : icon}\n        </AvatarView>\n      )}\n      {children}\n    </div>\n  );\n};\n\nexport default PromoCardIndicator;\n"],"names":["PromoCardIndicator","className","children","label","icon","isSmall","testid","rest","isIconString","IconComponent","check","Check","arrow","ArrowEnd","download","Download","_jsxs","clsx","_jsx","Body","as","type","Typography","BODY_LARGE_BOLD","AvatarView","interactive","size","style","backgroundColor"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,MAAMA,kBAAkB,GAAsCA,CAAC;EAC7DC,SAAS;EACTC,QAAQ;EACRC,KAAK;EACLC,IAAI;AACJC,EAAAA,OAAO,GAAG,KAAK;EACfC,MAAM;EACN,GAAGC;AAAI,CACR,KAAI;AACH,EAAA,MAAMC,YAAY,GAAGJ,IAAI,IAAI,OAAOA,IAAI,KAAK,QAAQ;EAErD,MAAMK,aAAa,GACjBD,YAAY,IACZ;AACEE,IAAAA,KAAK,EAAEC,KAAK;AACZC,IAAAA,KAAK,EAAEC,QAAQ;AACfC,IAAAA,QAAQ,EAAEC;GACX,CAACX,IAAI,CAAC;AAET,EAAA,oBACEY,IAAA,CAAA,KAAA,EAAA;AAAKf,IAAAA,SAAS,EAAEgB,IAAI,CAAC,mBAAmB,EAAEhB,SAAS,CAAE;AAAC,IAAA,aAAA,EAAaK,MAAO;AAAA,IAAA,GAAKC,IAAI;AAAAL,IAAAA,QAAA,EAAA,CAChFC,KAAK,iBACJe,GAAA,CAACC,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACC,IAAI,EAAEC,UAAU,CAACC,eAAgB;AAACtB,MAAAA,SAAS,EAAC,uBAAuB;AAAAC,MAAAA,QAAA,EAChFC;AAAK,KACF,CACP,EACAC,IAAI,iBACHc,GAAA,CAACM,UAAU,EAAA;MACTC,WAAW,EAAA,IAAA;AACXC,MAAAA,IAAI,EAAErB,OAAO,GAAG,EAAE,GAAG,EAAG;AACxBsB,MAAAA,KAAK,EAAE;AAAEC,QAAAA,eAAe,EAAE;OAAgD;AAC1E3B,MAAAA,SAAS,EAAC,uBAAuB;AAAAC,MAAAA,QAAA,EAEhCO,aAAa,gBAAGS,GAAA,CAACT,aAAa,EAAA;AAACiB,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAM,QAAG,GAAGtB;KACxD,CACb,EACAF,QAAQ;AAAA,GACN,CAAC;AAEV;;"}

package/build/main.css

@@ -21502,9 +21502,6 @@ a[data-toggle="tooltip"] {
 .np-theme-personal--bright-green .wds-Button--secondary-neutral .wds-Button-avatars .np-circle {
   --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
 }
-[dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right,[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-down,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-up,[dir="rtl"] .wds-Button .tw-icon-list,[dir="rtl"] .wds-Button .tw-icon-activity {
-  scale: -1 1;
-}
 .np-btn {
   position: relative;
 }
@@ -22660,6 +22657,19 @@ button.np-option {
 .tw-date .tw-date--day {
   margin-block-end: 0;
 }
+[dir="rtl"] .tw-date .np-input {
+  text-align: end;
+}
+[dir="rtl"] .tw-date .np-input::-moz-placeholder {
+  text-align: start;
+}
+[dir="rtl"] .tw-date .np-input:-moz-placeholder {
+  text-align: start;
+}
+[dir="rtl"] .tw-date .np-input::placeholder,
+[dir="rtl"] .tw-date .np-input:placeholder-shown {
+  text-align: start;
+}
 @media (min-width: 600px) {
   .np-theme-personal .tw-date label {
     margin-block-end: 0;
@@ -23970,7 +23980,7 @@ button.np-option {
 .wds-list-item-control-wrapper {
   grid-area: control;
 }
-.wds-list-item-navigation .tw-icon-chevron-right {
+.wds-list-item-navigation .tw-icon-chevron-end {
   color: #c9cbce;
   color: var(--color-interactive-secondary);
   display: block;
@@ -25380,6 +25390,9 @@ button.np-link {
 .tw-telephone__number-input {
   flex: auto 1 1;
 }
+[dir="rtl"] .tw-telephone__prefix-option .np-select-input-option-content-title {
+  direction: ltr;
+}
 .np-theme-personal .np-popover__container {
   border-radius: 16px;
   border-radius: var(--radius-medium);
@@ -25515,9 +25528,6 @@ button.np-link {
 .np-Card-indicatorIcon .tw-icon {
   color: var(--Card-indicator-icon-color);
 }
-[dir="rtl"] .np-Card-indicatorIcon .tw-icon {
-  transform: scaleX(-1);
-}
 .np-Card--checked,
 .np-Card--link {
   color: currentColor;

package/build/styles/Button/Button.css

@@ -241,6 +241,3 @@
 .np-theme-personal--bright-green .wds-Button--secondary-neutral .wds-Button-avatars .np-circle {
   --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
 }
-[dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right,[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-down,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-up,[dir="rtl"] .wds-Button .tw-icon-list,[dir="rtl"] .wds-Button .tw-icon-activity {
-  scale: -1 1;
-}

package/build/styles/DateInput/DateInput.css

@@ -9,6 +9,19 @@
 .tw-date .tw-date--day {
   margin-block-end: 0;
 }
+[dir="rtl"] .tw-date .np-input {
+  text-align: end;
+}
+[dir="rtl"] .tw-date .np-input::-moz-placeholder {
+  text-align: start;
+}
+[dir="rtl"] .tw-date .np-input:-moz-placeholder {
+  text-align: start;
+}
+[dir="rtl"] .tw-date .np-input::placeholder,
+[dir="rtl"] .tw-date .np-input:placeholder-shown {
+  text-align: start;
+}
 @media (min-width: 600px) {
   .np-theme-personal .tw-date label {
     margin-block-end: 0;

package/build/styles/ListItem/ListItem.css

@@ -567,7 +567,7 @@
 .wds-list-item-control-wrapper {
   grid-area: control;
 }
-.wds-list-item-navigation .tw-icon-chevron-right {
+.wds-list-item-navigation .tw-icon-chevron-end {
   color: #c9cbce;
   color: var(--color-interactive-secondary);
   display: block;

package/build/styles/PhoneNumberInput/PhoneNumberInput.css

@@ -27,3 +27,6 @@
 .tw-telephone__number-input {
   flex: auto 1 1;
 }
+[dir="rtl"] .tw-telephone__prefix-option .np-select-input-option-content-title {
+  direction: ltr;
+}

package/build/styles/PromoCard/PromoCard.css

@@ -53,9 +53,6 @@
 .np-Card-indicatorIcon .tw-icon {
   color: var(--Card-indicator-icon-color);
 }
-[dir="rtl"] .np-Card-indicatorIcon .tw-icon {
-  transform: scaleX(-1);
-}
 .np-Card--checked,
 .np-Card--link {
   color: currentColor;

package/build/styles/main.css

@@ -21502,9 +21502,6 @@ a[data-toggle="tooltip"] {
 .np-theme-personal--bright-green .wds-Button--secondary-neutral .wds-Button-avatars .np-circle {
   --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
 }
-[dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right,[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-down,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-up,[dir="rtl"] .wds-Button .tw-icon-list,[dir="rtl"] .wds-Button .tw-icon-activity {
-  scale: -1 1;
-}
 .np-btn {
   position: relative;
 }
@@ -22660,6 +22657,19 @@ button.np-option {
 .tw-date .tw-date--day {
   margin-block-end: 0;
 }
+[dir="rtl"] .tw-date .np-input {
+  text-align: end;
+}
+[dir="rtl"] .tw-date .np-input::-moz-placeholder {
+  text-align: start;
+}
+[dir="rtl"] .tw-date .np-input:-moz-placeholder {
+  text-align: start;
+}
+[dir="rtl"] .tw-date .np-input::placeholder,
+[dir="rtl"] .tw-date .np-input:placeholder-shown {
+  text-align: start;
+}
 @media (min-width: 600px) {
   .np-theme-personal .tw-date label {
     margin-block-end: 0;
@@ -23970,7 +23980,7 @@ button.np-option {
 .wds-list-item-control-wrapper {
   grid-area: control;
 }
-.wds-list-item-navigation .tw-icon-chevron-right {
+.wds-list-item-navigation .tw-icon-chevron-end {
   color: #c9cbce;
   color: var(--color-interactive-secondary);
   display: block;
@@ -25380,6 +25390,9 @@ button.np-link {
 .tw-telephone__number-input {
   flex: auto 1 1;
 }
+[dir="rtl"] .tw-telephone__prefix-option .np-select-input-option-content-title {
+  direction: ltr;
+}
 .np-theme-personal .np-popover__container {
   border-radius: 16px;
   border-radius: var(--radius-medium);
@@ -25515,9 +25528,6 @@ button.np-link {
 .np-Card-indicatorIcon .tw-icon {
   color: var(--Card-indicator-icon-color);
 }
-[dir="rtl"] .np-Card-indicatorIcon .tw-icon {
-  transform: scaleX(-1);
-}
 .np-Card--checked,
 .np-Card--link {
   color: currentColor;

package/build/types/Body/Body.d.ts

@@ -11,7 +11,7 @@ export type BodyProps = HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> &
      */
     preserveNewlines?: boolean;
 };
-declare const Body: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> & {
+declare const Body: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement | HTMLSpanElement> & {
     /** @default 'body-default' */
     type?: BodyTypes;
     /** @default 'div' */
@@ -21,6 +21,6 @@ declare const Body: import("react").ForwardRefExoticComponent<HTMLAttributes<HTM
      * @default false
      */
     preserveNewlines?: boolean;
-} & import("react").RefAttributes<HTMLDivElement | HTMLSpanElement | HTMLParagraphElement | null>>;
+} & import("react").RefAttributes<HTMLDivElement | HTMLParagraphElement | HTMLSpanElement | null>>;
 export default Body;
 //# sourceMappingURL=Body.d.ts.map

package/build/types/IconButton/IconButton.d.ts

@@ -16,6 +16,6 @@ declare const IconButton: import("react").ForwardRefExoticComponent<{
     /** @default 'default' */
     type?: "default" | "negative";
     'data-testid'?: string;
-} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "target" | "href"> & Pick<ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "onClick"> & Pick<HTMLAttributes<HTMLDivElement>, "children" | "className" | "id" | "tabIndex" | "role" | "aria-label"> & import("react").RefAttributes<unknown>>;
+} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "target" | "href"> & Pick<ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "onClick"> & Pick<HTMLAttributes<HTMLDivElement>, "id" | "className" | "tabIndex" | "role" | "aria-label" | "children"> & import("react").RefAttributes<unknown>>;
 export default IconButton;
 //# sourceMappingURL=IconButton.d.ts.map

package/build/types/Inputs/SelectInput/OptionContent/SelectInputOptionContent.d.ts

@@ -3,11 +3,12 @@ export interface SelectInputOptionContentProps {
     note?: string;
     description?: string;
     icon?: React.ReactNode;
+    className?: string;
 }
 /**
  * Component for rendering structured content within a SelectInput option.
  * Supports title, optional note, description, and icon with different styling
  * based on whether it's rendered within the trigger button or the dropdown.
  */
-export declare function SelectInputOptionContent({ title, note, description, icon, }: SelectInputOptionContentProps): import("react").JSX.Element;
+export declare function SelectInputOptionContent({ title, note, description, icon, className, }: SelectInputOptionContentProps): import("react").JSX.Element;
 //# sourceMappingURL=SelectInputOptionContent.d.ts.map

package/build/types/Inputs/SelectInput/OptionContent/SelectInputOptionContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInputOptionContent.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/SelectInput/OptionContent/SelectInputOptionContent.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,6BAA6B;IAC5C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,IAAI,EACJ,WAAW,EACX,IAAI,GACL,EAAE,6BAA6B,+BAkD/B"}
+{"version":3,"file":"SelectInputOptionContent.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/SelectInput/OptionContent/SelectInputOptionContent.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,6BAA6B;IAC5C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,SAAS,GACV,EAAE,6BAA6B,+BAmD/B"}

package/build/types/MoneyInput/MoneyInput.d.ts

@@ -55,6 +55,7 @@ declare const _default: import("react").FC<{
     selectProps?: Partial<SelectInputProps<CurrencyOptionItem>> | undefined;
     amount: number | null;
     searchPlaceholder?: string | undefined;
+    decimals?: number | undefined;
     currencies: readonly CurrencyItem[];
     selectedCurrency: CurrencyOptionItem;
     onCurrencyChange?: ((value: CurrencyOptionItem) => void) | undefined;
@@ -66,7 +67,6 @@ declare const _default: import("react").FC<{
     }) => void) | undefined;
     customActionLabel?: import("react").ReactNode;
     onCustomAction?: (() => void) | undefined;
-    decimals?: number | undefined;
 }>;
 export default _default;
 //# sourceMappingURL=MoneyInput.d.ts.map

package/build/types/MoneyInput/MoneyInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MoneyInput.d.ts","sourceRoot":"","sources":["../../../src/MoneyInput/MoneyInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAE9E,OAAO,EAGL,SAAS,EACT,UAAU,EACV,SAAS,EAEV,MAAM,WAAW,CAAC;AACnB,OAAO,EAAuB,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAEnF,OAAO,EAKL,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAO/B,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAoDnE,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,EAAE,SAAS,YAAY,EAAE,CAAC;IACpC,gBAAgB,EAAE,kBAAkB,CAAC;IACrC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3F,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC5D;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,kCAAkC,GAAG,eAAe,GAC9D,OAAO,CAAC,wBAAwB,CAAC,CAAC;;SA5B7B,MAAM;wBACS,MAAM;YAMnB,SAAS,GAAG,UAAU,GAAG,SAAS;kBAF3B,MAAM;iBAYP,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;kBACrB,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;YAZnD,MAAM,GAAG,IAAI;wBAID,MAAM;gBARd,SAAS,YAAY,EAAE;sBACjB,kBAAkB;wBACjB,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI;sBAIrC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI;;sBAM9B,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI;;sBAEzE,MAAM,IAAI;eAQhB,MAAM;;AA0anB,wBAA2F"}
+{"version":3,"file":"MoneyInput.d.ts","sourceRoot":"","sources":["../../../src/MoneyInput/MoneyInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAE9E,OAAO,EAGL,SAAS,EACT,UAAU,EACV,SAAS,EAEV,MAAM,WAAW,CAAC;AACnB,OAAO,EAAuB,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAEnF,OAAO,EAKL,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAO/B,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAoDnE,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,EAAE,SAAS,YAAY,EAAE,CAAC;IACpC,gBAAgB,EAAE,kBAAkB,CAAC;IACrC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3F,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC5D;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,kCAAkC,GAAG,eAAe,GAC9D,OAAO,CAAC,wBAAwB,CAAC,CAAC;;SA5B7B,MAAM;wBACS,MAAM;YAMnB,SAAS,GAAG,UAAU,GAAG,SAAS;kBAF3B,MAAM;iBAYP,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;kBACrB,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;YAZnD,MAAM,GAAG,IAAI;wBAID,MAAM;eAcf,MAAM;gBAtBL,SAAS,YAAY,EAAE;sBACjB,kBAAkB;wBACjB,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI;sBAIrC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI;;sBAM9B,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI;;sBAEzE,MAAM,IAAI;;AAkb7B,wBAA2F"}

package/build/types/PhoneNumberInput/PhoneNumberInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneNumberInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneNumberInput/PhoneNumberInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAQ,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAGnE,OAAO,EAAyC,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAkBhG,MAAM,WAAW,qBAAqB;IACpC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACpD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB;IACpB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IACvD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CACvC;AAKD,QAAA,MAAM,gBAAgB,GAAI,gMAevB,qBAAqB,gCAwNvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"PhoneNumberInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneNumberInput/PhoneNumberInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAQ,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAGnE,OAAO,EAAyC,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAkBhG,MAAM,WAAW,qBAAqB;IACpC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACpD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB;IACpB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IACvD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CACvC;AAKD,QAAA,MAAM,gBAAgB,GAAI,gMAevB,qBAAqB,gCAyNvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/build/types/Title/Title.d.ts

@@ -10,7 +10,7 @@ export type TitleProps = LabelHTMLAttributes<HTMLHeadingElement | HTMLSpanElemen
      */
     type?: TitleTypes;
 };
-declare const Title: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<HTMLSpanElement | HTMLHeadingElement | HTMLLabelElement> & React.LiHTMLAttributes<HTMLLIElement> & {
+declare const Title: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<HTMLHeadingElement | HTMLLabelElement | HTMLSpanElement> & React.LiHTMLAttributes<HTMLLIElement> & {
     /**
      * Default value will based one `type` prop
      */
@@ -19,6 +19,6 @@ declare const Title: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<H
      * Default value: {@link DEFAULT_TYPE}
      */
     type?: TitleTypes;
-} & React.RefAttributes<HTMLSpanElement | HTMLHeadingElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement>>;
+} & React.RefAttributes<HTMLHeadingElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLSpanElement>>;
 export default Title;
 //# sourceMappingURL=Title.d.ts.map

package/build/types/Upload/Steps/UploadImageStep/UploadImageStep.d.ts

@@ -15,7 +15,7 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
     uploadInputRef: import("react").RefObject<HTMLInputElement>;
     onManualUpload: () => void;
     onKeyDown: (event: React.KeyboardEvent<HTMLLabelElement>) => void;
-    getImage: () => number | true | import("react").JSX.Element | Iterable<import("react").ReactNode>;
+    getImage: () => number | true | Iterable<import("react").ReactNode> | import("react").JSX.Element;
     render(): import("react").JSX.Element;
 }
 //# sourceMappingURL=UploadImageStep.d.ts.map

package/build/types/UploadInput/UploadItem/UploadItemLink.d.ts

@@ -5,5 +5,5 @@ export declare const UploadItemLink: import("react").ForwardRefExoticComponent<{
     singleFileUpload: boolean;
 } & {
     children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLDivElement | HTMLAnchorElement>>;
+} & import("react").RefAttributes<HTMLAnchorElement | HTMLDivElement>>;
 //# sourceMappingURL=UploadItemLink.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.162.1",
+  "version": "46.162.2",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -96,7 +96,7 @@
     "storybook-addon-test-codegen": "^3.0.4"
   },
   "peerDependencies": {
-    "@transferwise/icons": "^3 || ^4",
+    "@transferwise/icons": "^4.5.0",
     "@wise/art": "^2.31.1",
     "@wise/components-theming": "^1.10.1",
     "motion": "^12.23.26",

package/src/Button/Button.css

@@ -241,6 +241,3 @@
 .np-theme-personal--bright-green .wds-Button--secondary-neutral .wds-Button-avatars .np-circle {
   --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
 }
-[dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right,[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-down,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-up,[dir="rtl"] .wds-Button .tw-icon-list,[dir="rtl"] .wds-Button .tw-icon-activity {
-  scale: -1 1;
-}