npm - @transferwise/components - Versions diffs - 46.130.1 → 46.130.3 - Mend

@transferwise/components 46.130.1 → 46.130.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (255) hide show

package/build/phoneNumberInput/PhoneNumberInput.js.map CHANGED Viewed

	@@ -1 +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 { 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';\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 = 'Prefix',\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 fieldLabelRef = useFieldLabelRef();\n const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];\n\n const { locale, formatMessage } = useIntl();\n\n const createId = (customID: string \| undefined, backup: string): string => {\n if (customID) {\n return customID + (backup ? `-${backup}` : '');\n }\n const random = Math.random().toString(36).slice(2, 8);\n return `${backup}-${random}`;\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 [broadcastedValue, setBroadcastedValue] = useState<PhoneNumber \| null>(null);\n\n const [suffixDirty, setSuffixDirty] = useState(false);\n useEffect(() => {\n if (internalValue.suffix) {\n setSuffixDirty(true);\n }\n }, [internalValue.suffix]);\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 if (broadcastedValue === null) {\n setBroadcastedValue(internalValue);\n return;\n }\n\n const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;\n const broadcastedPhoneNumber = `${broadcastedValue.prefix ?? ''}${broadcastedValue.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 setBroadcastedValue(internalValue);\n }, [onChange, broadcastedValue, 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 className=\"tw-telephone__country-select\">\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}\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 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","fieldLabelRef","useFieldLabelRef","ariaLabelledBy","locale","formatMessage","useIntl","createId","customID","backup","random","Math","toString","slice","ids","label","select","phoneNumber","input","internalValue","setInternalValue","useState","cleanValue","cleanNumber","isValidPhoneNumber","prefix","setDefaultPrefix","suffix","explodeNumberModel","broadcastedValue","setBroadcastedValue","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","newValue","labelRef","current","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","UNSAFE_triggerButtonProps","findCountryByPrefix","format","phoneFormat","onClose","phoneNumberLabel","Input","ref","autoComplete","inputMode"],"mappings":"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"}
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 { 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';\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 = 'Prefix',\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 fieldLabelRef = useFieldLabelRef();\n const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];\n\n const { locale, formatMessage } = useIntl();\n\n const createId = (customID: string \| undefined, backup: string): string => {\n if (customID) {\n return customID + (backup ? `-${backup}` : '');\n }\n const random = Math.random().toString(36).slice(2, 8);\n return `${backup}-${random}`;\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 [broadcastedValue, setBroadcastedValue] = useState<PhoneNumber \| null>(null);\n\n const [suffixDirty, setSuffixDirty] = useState(false);\n useEffect(() => {\n if (internalValue.suffix) {\n setSuffixDirty(true);\n }\n }, [internalValue.suffix]);\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 if (broadcastedValue === null) {\n setBroadcastedValue(internalValue);\n return;\n }\n\n const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;\n const broadcastedPhoneNumber = `${broadcastedValue.prefix ?? ''}${broadcastedValue.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 setBroadcastedValue(internalValue);\n }, [onChange, broadcastedValue, 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 className=\"tw-telephone__country-select\">\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}\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 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","fieldLabelRef","useFieldLabelRef","ariaLabelledBy","locale","formatMessage","useIntl","createId","customID","backup","random","Math","toString","slice","ids","label","select","phoneNumber","input","internalValue","setInternalValue","useState","cleanValue","cleanNumber","isValidPhoneNumber","prefix","setDefaultPrefix","suffix","explodeNumberModel","broadcastedValue","setBroadcastedValue","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","newValue","labelRef","current","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","UNSAFE_triggerButtonProps","findCountryByPrefix","format","phoneFormat","onClose","phoneNumberLabel","Input","ref","autoComplete","inputMode"],"mappings":"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"}

package/build/phoneNumberInput/PhoneNumberInput.mjs CHANGED Viewed

@@ -24,7 +24,15 @@ import 'clsx';
 import '../common/closeButton/CloseButton.messages.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useInputAttributes, useFieldLabelRef } from '../inputs/contexts.mjs';
-import { SelectInput, SelectInputOptionContent } from '../inputs/SelectInput.mjs';
+import { SelectInput } from '../inputs/SelectInput/SelectInput.mjs';
+import '../dateLookup/dateTrigger/DateTrigger.messages.mjs';
+import '@headlessui/react';
+import { SelectInputOptionContent } from '../inputs/SelectInput/OptionContent/SelectInputOptionContent.mjs';
+import 'merge-props';
+import '../header/Header.mjs';
+import 'virtua';
+import { Input } from '../inputs/Input.mjs';
+import '../inputs/SelectInput/SelectInput.messages.mjs';
 import messages from './PhoneNumberInput.messages.mjs';
 import countries from './data/countries.mjs';
 import { setDefaultPrefix } from './utils/setDefaultPrefix/index.mjs';
@@ -35,7 +43,6 @@ import { cleanNumber } from './utils/cleanNumber/cleanNumber.mjs';
 import { sortArrayByProperty } from './utils/sortArrayByProperty/sortArrayByProperty.mjs';
 import { groupCountriesByPrefix } from './utils/groupCountriesByPrefix/groupCountriesByPrefix.mjs';
 import { excludeCountries } from './utils/excludeCountries/excludeCountries.mjs';
-import { Input } from '../inputs/Input.mjs';
 const ALLOWED_PHONE_CHARS = /^$|^[\d-\s]+$/;
 const defaultSelectProps = {};

package/build/phoneNumberInput/PhoneNumberInput.mjs.map CHANGED Viewed

	@@ -1 +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 { 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';\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 = 'Prefix',\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 fieldLabelRef = useFieldLabelRef();\n const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];\n\n const { locale, formatMessage } = useIntl();\n\n const createId = (customID: string \| undefined, backup: string): string => {\n if (customID) {\n return customID + (backup ? `-${backup}` : '');\n }\n const random = Math.random().toString(36).slice(2, 8);\n return `${backup}-${random}`;\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 [broadcastedValue, setBroadcastedValue] = useState<PhoneNumber \| null>(null);\n\n const [suffixDirty, setSuffixDirty] = useState(false);\n useEffect(() => {\n if (internalValue.suffix) {\n setSuffixDirty(true);\n }\n }, [internalValue.suffix]);\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 if (broadcastedValue === null) {\n setBroadcastedValue(internalValue);\n return;\n }\n\n const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;\n const broadcastedPhoneNumber = `${broadcastedValue.prefix ?? ''}${broadcastedValue.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 setBroadcastedValue(internalValue);\n }, [onChange, broadcastedValue, 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 className=\"tw-telephone__country-select\">\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}\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 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","fieldLabelRef","useFieldLabelRef","ariaLabelledBy","locale","formatMessage","useIntl","createId","customID","backup","random","Math","toString","slice","ids","label","select","phoneNumber","input","internalValue","setInternalValue","useState","cleanValue","cleanNumber","isValidPhoneNumber","prefix","setDefaultPrefix","suffix","explodeNumberModel","broadcastedValue","setBroadcastedValue","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","newValue","labelRef","current","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","UNSAFE_triggerButtonProps","findCountryByPrefix","format","phoneFormat","onClose","phoneNumberLabel","Input","ref","autoComplete","inputMode"],"mappings":"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"}
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 { 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';\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 = 'Prefix',\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 fieldLabelRef = useFieldLabelRef();\n const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];\n\n const { locale, formatMessage } = useIntl();\n\n const createId = (customID: string \| undefined, backup: string): string => {\n if (customID) {\n return customID + (backup ? `-${backup}` : '');\n }\n const random = Math.random().toString(36).slice(2, 8);\n return `${backup}-${random}`;\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 [broadcastedValue, setBroadcastedValue] = useState<PhoneNumber \| null>(null);\n\n const [suffixDirty, setSuffixDirty] = useState(false);\n useEffect(() => {\n if (internalValue.suffix) {\n setSuffixDirty(true);\n }\n }, [internalValue.suffix]);\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 if (broadcastedValue === null) {\n setBroadcastedValue(internalValue);\n return;\n }\n\n const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;\n const broadcastedPhoneNumber = `${broadcastedValue.prefix ?? ''}${broadcastedValue.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 setBroadcastedValue(internalValue);\n }, [onChange, broadcastedValue, 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 className=\"tw-telephone__country-select\">\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}\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 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","fieldLabelRef","useFieldLabelRef","ariaLabelledBy","locale","formatMessage","useIntl","createId","customID","backup","random","Math","toString","slice","ids","label","select","phoneNumber","input","internalValue","setInternalValue","useState","cleanValue","cleanNumber","isValidPhoneNumber","prefix","setDefaultPrefix","suffix","explodeNumberModel","broadcastedValue","setBroadcastedValue","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","newValue","labelRef","current","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","UNSAFE_triggerButtonProps","findCountryByPrefix","format","phoneFormat","onClose","phoneNumberLabel","Input","ref","autoComplete","inputMode"],"mappings":"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"}

package/build/styles/criticalBanner/CriticalCommsBanner.css CHANGED Viewed

@@ -31,6 +31,15 @@
   --Button-background-hover: var(--color-sentiment-interactive-primary-hover);
   --Button-background-active: var(--color-sentiment-interactive-primary-active);
 }
+.critical-comms .wds-Button[class] {
+  color: var(--Button-color);
+}
+.critical-comms .wds-Button[class]:hover {
+  color: var(--Button-color-hover);
+}
+.critical-comms .wds-Button[class]:active {
+  color: var(--Button-color-active);
+}
 .critical-comms .alert-warning .wds-Button {
   --Button-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover);
   --Button-background-active: var(--color-sentiment-interactive-secondary-neutral-active);

package/build/styles/inputs/SelectInput/BottomSheet/SelectInputBottomSheet.css ADDED Viewed

@@ -0,0 +1,96 @@
+.np-bottom-sheet-v2-container {
+  position: relative;
+  z-index: 1060;
+}
+.np-bottom-sheet-v2-backdrop {
+  position: fixed;
+  inset: 0px;
+  background-color: #37517e;
+  background-color: var(--color-content-primary);
+  opacity: 0.4;
+  transition-property: opacity;
+  transition-timing-function: ease-out;
+  transition-duration: 300ms;
+}
+.np-bottom-sheet-v2-backdrop--closed {
+  opacity: 0;
+}
+.np-bottom-sheet-v2 {
+  position: fixed;
+  inset: 0px;
+  bottom: env(keyboard-inset-height, 0px);
+  margin-left: 8px;
+  margin-left: var(--size-8);
+  margin-right: 8px;
+  margin-right: var(--size-8);
+  margin-top: 64px;
+  margin-top: var(--size-64);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+.np-bottom-sheet-v2-content {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  border-top-left-radius: 32px;
+  /* TODO: Tokenize */
+  border-top-right-radius: 32px;
+  /* TODO: Tokenize */
+  background-color: #ffffff;
+  background-color: var(--color-background-elevated);
+  box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
+}
+.np-bottom-sheet-v2-content:focus {
+  outline: none;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .np-bottom-sheet-v2-content {
+    transition-property: transform;
+    transition-timing-function: ease-out;
+    transition-duration: 300ms;
+  }
+  .np-bottom-sheet-v2-content--closed {
+    transform: translateY(100%);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .np-bottom-sheet-v2-content {
+    transition-property: opacity;
+    transition-timing-function: ease-out;
+    transition-duration: 300ms;
+  }
+  .np-bottom-sheet-v2-content--closed {
+    opacity: 0;
+  }
+}
+.np-bottom-sheet-v2-header {
+  align-self: flex-end;
+  padding: 16px;
+  padding: var(--size-16);
+}
+.np-bottom-sheet-v2-content-inner {
+  display: grid;
+  grid-template-rows: minmax(0, 1fr);
+  grid-row-gap: 8px;
+  grid-row-gap: var(--size-8);
+  row-gap: 8px;
+  row-gap: var(--size-8);
+  overflow: auto;
+}
+.np-bottom-sheet-v2-content-inner--has-title {
+  grid-template-rows: auto minmax(0, 1fr);
+}
+.np-bottom-sheet-v2-content-inner--padding-md {
+  padding: 16px;
+  padding: var(--size-16);
+  padding-top: 0px;
+}
+.np-bottom-sheet-v2-title {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.np-bottom-sheet-v2-body {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}

package/build/styles/inputs/SelectInput/ButtonInput/SelectInputButtonInput.css ADDED Viewed

@@ -0,0 +1,16 @@
+.np-button-input {
+  display: inline-grid;
+  grid-auto-columns: minmax(0, 1fr);
+  align-content: center;
+  border-radius: 10px;
+  border-radius: var(--size-10);
+  text-align: start;
+}
+.np-button-input:has(.np-select-input-option-description-in-trigger) {
+  height: auto !important;
+  align-content: start;
+  padding-top: 12px !important;
+  padding-top: var(--size-12) !important;
+  padding-bottom: 12px !important;
+  padding-bottom: var(--size-12) !important;
+}

package/build/styles/inputs/SelectInput/ClearButton/SelectInputClearButton.css ADDED Viewed

@@ -0,0 +1,46 @@
+.np-select-input-addon-container {
+  pointer-events: none;
+  margin-inline-start: 4px;
+  margin-inline-start: var(--size-4);
+  display: inline-flex;
+  align-items: center;
+}
+.np-select-input-addon-container > :not([hidden]) ~ :not([hidden]) {
+  margin-inline-start: 4px;
+  margin-inline-start: var(--size-4);
+}
+.np-select-input-addon {
+  border-width: 0;
+  background: none;
+  display: inline-flex;
+  height: 24px;
+  height: var(--size-24);
+  width: 24px;
+  width: var(--size-24);
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.125rem /* 2px */;
+  /* TODO: Tokenize */
+}
+.np-select-input-addon--interactive {
+  pointer-events: auto;
+  color: #c9cbce;
+  color: var(--color-interactive-secondary);
+}
+.np-select-input-addon--interactive:hover {
+  color: #b5b7ba;
+  color: var(--color-interactive-secondary-hover);
+}
+.np-select-input-addon--interactive:focus {
+  outline: none;
+}
+.np-select-input-addon--interactive:focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
+.np-select-input-addon-separator {
+  height: 24px;
+  height: var(--size-24);
+  border-inline-start: 1px solid rgba(0,0,0,0.10196);
+  border-inline-start: 1px solid var(--color-border-neutral);
+}

package/build/styles/inputs/SelectInput/ItemView/SelectInputItemView.css ADDED Viewed

@@ -0,0 +1,16 @@
+.np-select-input-group-item--without-needle:first-child {
+  margin-top: calc(-1 * 8px);
+  margin-top: calc(-1 * var(--size-8));
+}
+.np-select-input-group-item-header {
+  position: sticky;
+  top: 0px;
+  z-index: 10;
+  background-color: #ffffff;
+  background-color: var(--color-background-elevated);
+}
+.np-select-input-separator-item {
+  margin: 8px;
+  margin: var(--size-8);
+  border-top-width: 1px;
+}

package/build/styles/inputs/SelectInput/Option/SelectInputOption.css ADDED Viewed

@@ -0,0 +1,33 @@
+.np-select-input-option-container {
+  display: flex;
+  cursor: default;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  align-items: center;
+  -moz-column-gap: 8px;
+       column-gap: 8px;
+  -moz-column-gap: var(--size-8);
+       column-gap: var(--size-8);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  padding: 12px 16px;
+  padding: var(--size-12) var(--size-16);
+  color: var(--color-interactive-primary);
+}
+.np-select-input-option-container:focus {
+  outline: none;
+}
+.np-select-input-option-container--active {
+  box-shadow: inset 0 0 0 1px #c9cbce;
+  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
+}
+.np-select-input-option-container--disabled {
+  opacity: 0.45;
+}
+.np-select-input-option-check--not-selected {
+  visibility: hidden;
+}
+.np-select-input-option {
+  flex: 1;
+}

package/build/styles/inputs/SelectInput/OptionContent/SelectInputOptionContent.css ADDED Viewed

@@ -0,0 +1,37 @@
+.np-select-input-option-content-container {
+  display: flex;
+  align-items: center;
+  -moz-column-gap: 8px;
+       column-gap: 8px;
+  -moz-column-gap: var(--size-8);
+       column-gap: var(--size-8);
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.np-select-input-option-content-icon {
+  display: flex;
+}
+.np-select-input-option-content-icon--not-within-trigger {
+  align-self: flex-start;
+}
+.np-select-input-option-content-text {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+}
+.np-select-input-option-content-text-secondary {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}
+.np-select-input-option-content-text-within-trigger {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.np-select-input-option-content-text-line-1 > :not([hidden]) ~ :not([hidden]) {
+  margin-right: 8px;
+  margin-right: var(--size-8);
+  margin-left: 8px;
+  margin-left: var(--size-8);
+}

package/build/styles/inputs/SelectInput/Options/SelectInputOptions.css ADDED Viewed

@@ -0,0 +1,81 @@
+.np-select-input-options-container {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+}
+.np-select-input-options-container:focus {
+  outline: none;
+}
+@media (min-width: 576px) {
+  .np-select-input-options-container {
+    max-height: 28rem /* 448px */;
+  }
+}
+.np-select-input-options-status {
+  display: flex;
+  align-items: center;
+  -moz-column-gap: 8px;
+       column-gap: 8px;
+  -moz-column-gap: var(--size-8);
+       column-gap: var(--size-8);
+  padding: 8px 24px 0px;
+  padding: var(--size-8) var(--size-24) 0px;
+}
+.np-select-input-options-status-icon {
+  padding: 0 4px;
+  padding: 0 var(--size-4);
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
+.np-select-input-query-container {
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
+  padding: var(--size-8);
+}
+.np-select-input-listbox-container {
+  position: relative;
+  height: var(--initial-height);
+  scroll-padding-top: 8px;
+  scroll-padding-top: var(--size-8);
+  scroll-padding-bottom: 8px;
+  scroll-padding-bottom: var(--size-8);
+  overflow-y: auto;
+}
+@media (min-width: 576px) {
+  .np-select-input-listbox-container {
+    height: auto;
+  }
+}
+.np-select-input-listbox-container--virtualized {
+  /* The wrapping element shrinks this as needed */
+  height: 100vh;
+}
+.np-select-input-listbox-container--has-group {
+  scroll-padding-top: 32px;
+  scroll-padding-top: var(--size-32);
+}
+.np-select-input-listbox {
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  padding: 8px;
+  padding: var(--size-8);
+  --ring-outline-offset: calc(-1 * var(--ring-outline-width));
+}
+.np-select-input-listbox:focus {
+  outline: none;
+}
+.np-select-input-listbox:focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
+.np-select-input-listbox-container--virtualized .np-select-input-listbox {
+  /* Adopted from `VList` in virtua: https://github.com/inokawa/virtua/blob/7f6ed5b37df6b480d4ff350f3960067c5b3519d2/src/react/VList.tsx#L113-L116 */
+  overflow-y: auto;
+  contain: strict;
+  height: 100%;
+}
+.np-select-input-footer {
+  padding: 4px 24px 16px;
+  padding: var(--size-4) var(--size-24) var(--size-16);
+}

package/build/styles/inputs/SelectInput/Popover/SelectInputPopover.css ADDED Viewed

@@ -0,0 +1,46 @@
+.np-popover-v2-container {
+  z-index: 1060;
+  display: flex;
+  max-height: var(--max-height);
+  width: var(--width);
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  background-color: #ffffff;
+  background-color: var(--color-background-elevated);
+  box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
+}
+.np-popover-v2-container--size-md {
+  min-width: 20rem;
+}
+.np-popover-v2-container--size-lg {
+  min-width: 24rem;
+}
+.np-popover-v2-container:focus {
+  outline: none;
+}
+.np-popover-v2 {
+  display: grid;
+  grid-row-gap: 8px;
+  grid-row-gap: var(--size-8);
+  row-gap: 8px;
+  row-gap: var(--size-8);
+  overflow-y: auto;
+  grid-template-rows: minmax(0, 1fr);
+}
+.np-popover-v2--has-title {
+  grid-template-rows: auto minmax(0, 1fr);
+}
+.np-popover-v2--padding-md {
+  padding: 16px;
+  padding: var(--size-16);
+}
+.np-popover-v2-title {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.np-popover-v2-content {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}