@transferwise/components 0.0.0-experimental-b6b6dc1 → 0.0.0-experimental-a308934

package/build/expressiveMoneyInput/currencySelector/CurrencySelector.js

@@ -38,7 +38,6 @@ require('../../common/closeButton/CloseButton.messages.js');
 require('../../inputs/SelectInput/SelectInput.messages.js');
 var art = require('@wise/art');
 var ExpressiveMoneyInput_messages = require('../ExpressiveMoneyInput.messages.js');
-var formatting = require('@transferwise/formatting');
 
 const CurrencySelector = ({
   id,
@@ -85,7 +84,7 @@ const CurrencySelector = ({
       label
     }) => {
       return /*#__PURE__*/jsxRuntime.jsx(SelectInputOptionContent.SelectInputOptionContent, {
-        title: formatting.formatCurrencyCode(code),
+        title: code,
         note: label,
         icon: /*#__PURE__*/jsxRuntime.jsx(art.Flag, {
           code: code,
@@ -117,7 +116,7 @@ const CurrencySelector = ({
       children: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [/*#__PURE__*/jsxRuntime.jsx("span", {
           "aria-hidden": true,
-          children: formatting.formatCurrencyCode(currency)
+          children: currency
         }), /*#__PURE__*/jsxRuntime.jsx("span", {
           className: "sr-only",
           children: index.getLocaleCurrencyName(intl, currency)

package/build/expressiveMoneyInput/currencySelector/CurrencySelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"CurrencySelector.js","sources":["../../../src/expressiveMoneyInput/currencySelector/CurrencySelector.tsx"],"sourcesContent":["import type { AvatarLayoutProps } from '../../avatarLayout';\nimport Button from '../../button';\nimport {\n  SelectInput,\n  SelectInputOptionContent,\n  SelectInputTriggerButton,\n} from '../../inputs/SelectInput';\nimport { CurrencyType, Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\nimport { ChevronDown } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport {\n  type ButtonHTMLAttributes,\n  forwardRef,\n  type MouseEventHandler,\n  useMemo,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport messages from '../ExpressiveMoneyInput.messages';\nimport { getLocaleCurrencyName } from '../../common';\nimport { formatCurrencyCode } from '@transferwise/formatting';\n\nexport interface CurrencyOption {\n  label?: string;\n  code: string;\n  keywords: string[] | undefined;\n}\n\nexport interface CurrencySection {\n  title: string;\n  currencies: CurrencyOption[];\n}\n\nexport type CurrencyOptions = CurrencySection[];\n\nexport type Props = {\n  id: string;\n  labelId: string;\n  options?: CurrencyOptions;\n  onChange?: (currency: CurrencyType) => void;\n  onOpen?: () => void;\n  addons?: AvatarLayoutProps['avatars'];\n  onSearchChange?: (payload: { query: string; resultCount: number }) => void;\n} & Pick<ExpressiveMoneyInputProps, 'currency'>;\n\nexport const CurrencySelector = ({\n  id,\n  currency,\n  options = [],\n  labelId,\n  onChange,\n  addons,\n  onOpen,\n  onSearchChange,\n}: Props) => {\n  const intl = useIntl();\n\n  const allCurrencyOptions = useMemo(() => getUniqueCurrencies(options), [options]);\n\n  const activeCurrencyOption = useMemo(() => {\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    return allCurrencyOptions.find((option) => option.code === currency)!;\n  }, [currency, allCurrencyOptions]);\n\n  const disabled =\n    !onChange ||\n    options.length === 0 ||\n    (options.length === 1 && options[0].currencies.length <= 1);\n\n  const [searchQuery, setSearchQuery] = useState<string>('');\n\n  const handleTriggerClick: MouseEventHandler = (event) => {\n    const triggerEl = event.currentTarget;\n    if (triggerEl?.getAttribute('aria-expanded') === 'false') {\n      onOpen?.();\n    }\n  };\n\n  const items = searchQuery\n    ? filterAndSortCurrenciesForQuery(allCurrencyOptions, searchQuery).map(getCurrencySelectOption)\n    : options.map(getCurrencyGroup);\n\n  return (\n    <SelectInput\n      compareValues=\"code\"\n      disabled={disabled}\n      id={id}\n      value={activeCurrencyOption}\n      filterable\n      filterPlaceholder={intl.formatMessage(messages.currencySelectorSearchPlaceholder)}\n      UNSAFE_triggerButtonProps={{\n        id: undefined,\n        'aria-labelledby': undefined,\n        'aria-describedby': labelId,\n        'aria-invalid': undefined,\n        'aria-label': intl.formatMessage(messages.currencySelectorSelectCurrency),\n      }}\n      items={items}\n      renderValue={({ code, label }) => {\n        return (\n          <SelectInputOptionContent\n            title={formatCurrencyCode(code)}\n            note={label}\n            icon={<Flag code={code} intrinsicSize={24} />}\n          />\n        );\n      }}\n      renderTrigger={() => (\n        <SelectInputTriggerButton\n          as={ButtonInput}\n          // @ts-expect-error new (v2) ButtonProps\n          addonStart={{\n            type: 'avatar',\n            value: [\n              addons ? addons[0] : null,\n              {\n                ...(addons && addons.length > 1\n                  ? { ...addons[1] }\n                  : {\n                      asset: <Flag code={currency} />,\n                    }),\n              },\n            ]\n              .filter(Boolean)\n              .filter((avatar) => !(avatar && Object.keys(avatar).length === 0)),\n          }}\n          addonEnd={disabled ? undefined : { type: 'icon', value: <ChevronDown /> }}\n          onClick={(event) => handleTriggerClick(event)}\n        >\n          <>\n            <span aria-hidden>{formatCurrencyCode(currency)}</span>\n            <span className=\"sr-only\">{getLocaleCurrencyName(intl, currency)}</span>\n          </>\n        </SelectInputTriggerButton>\n      )}\n      onChange={(newValue) => {\n        onChange?.(newValue.code);\n      }}\n      onFilterChange={({ queryNormalized }) => {\n        setSearchQuery(queryNormalized ?? '');\n        if (queryNormalized) {\n          onSearchChange?.({\n            query: queryNormalized,\n            resultCount: filterAndSortCurrenciesForQuery(allCurrencyOptions, queryNormalized)\n              .length,\n          });\n        }\n      }}\n    />\n  );\n};\n\nexport const ButtonInput = forwardRef(function ButtonInput(\n  { children, ...rest }: React.PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>,\n  ref: React.ForwardedRef<HTMLButtonElement | null>,\n) {\n  return (\n    <Button\n      ref={ref}\n      size=\"md\"\n      v2\n      className=\"wds-currency-selector\"\n      priority=\"secondary-neutral\"\n      {...rest}\n    >\n      {children}\n    </Button>\n  );\n});\n\nconst getCurrencySelectOption = (currency: CurrencyOption) => {\n  return {\n    type: 'option' as const,\n    value: currency,\n    filterMatchers: currency.keywords,\n  };\n};\n\nconst getCurrencyGroup = (section: CurrencySection) => {\n  return {\n    type: 'group' as const,\n    label: section.title,\n    options: section.currencies.map(getCurrencySelectOption),\n  };\n};\n\nconst getUniqueCurrencies = (options: CurrencyOptions) => {\n  const allCurrencyOptions = options.flatMap((section) => section.currencies);\n  const uniqueCurrencies = new Map<string, CurrencyOption>();\n\n  allCurrencyOptions.forEach((currencyObj) => {\n    uniqueCurrencies.set(currencyObj.code, currencyObj);\n  });\n\n  return Array.from(uniqueCurrencies.values());\n};\n\nconst filterAndSortCurrenciesForQuery = (\n  currencies: CurrencyOption[],\n  query: string,\n): CurrencyOption[] => {\n  return (\n    currencies\n      .filter((currency) => {\n        return (\n          currency.code.toLowerCase().includes(query) ||\n          (currency.label ?? '').toLowerCase().includes(query) ||\n          currency.keywords?.some((keyword) => keyword.toLowerCase().includes(query))\n        );\n      })\n      // prefer exact matches, then sort alphabetically by code\n      .sort((a, b) => {\n        const aCode = a.code.toLowerCase();\n        const bCode = b.code.toLowerCase();\n        if (aCode === query) {\n          return -1;\n        }\n        if (bCode === query) {\n          return 1;\n        }\n        return aCode.localeCompare(bCode);\n      })\n  );\n};\n"],"names":["CurrencySelector","id","currency","options","labelId","onChange","addons","onOpen","onSearchChange","intl","useIntl","allCurrencyOptions","useMemo","getUniqueCurrencies","activeCurrencyOption","find","option","code","disabled","length","currencies","searchQuery","setSearchQuery","useState","handleTriggerClick","event","triggerEl","currentTarget","getAttribute","items","filterAndSortCurrenciesForQuery","map","getCurrencySelectOption","getCurrencyGroup","_jsx","SelectInput","compareValues","value","filterable","filterPlaceholder","formatMessage","messages","currencySelectorSearchPlaceholder","UNSAFE_triggerButtonProps","undefined","currencySelectorSelectCurrency","renderValue","label","SelectInputOptionContent","title","formatCurrencyCode","note","icon","Flag","intrinsicSize","renderTrigger","SelectInputTriggerButton","as","ButtonInput","addonStart","type","asset","filter","Boolean","avatar","Object","keys","addonEnd","ChevronDown","onClick","children","_jsxs","_Fragment","className","getLocaleCurrencyName","newValue","onFilterChange","queryNormalized","query","resultCount","forwardRef","rest","ref","Button","size","v2","priority","filterMatchers","keywords","section","flatMap","uniqueCurrencies","Map","forEach","currencyObj","set","Array","from","values","toLowerCase","includes","some","keyword","sort","a","b","aCode","bCode","localeCompare"],"mappings":"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"}
+{"version":3,"file":"CurrencySelector.js","sources":["../../../src/expressiveMoneyInput/currencySelector/CurrencySelector.tsx"],"sourcesContent":["import type { AvatarLayoutProps } from '../../avatarLayout';\nimport Button from '../../button';\nimport {\n  SelectInput,\n  SelectInputOptionContent,\n  SelectInputTriggerButton,\n} from '../../inputs/SelectInput';\nimport { CurrencyType, Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\nimport { ChevronDown } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport {\n  type ButtonHTMLAttributes,\n  forwardRef,\n  type MouseEventHandler,\n  useMemo,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport messages from '../ExpressiveMoneyInput.messages';\nimport { getLocaleCurrencyName } from '../../common';\n\nexport interface CurrencyOption {\n  label?: string;\n  code: string;\n  keywords: string[] | undefined;\n}\n\nexport interface CurrencySection {\n  title: string;\n  currencies: CurrencyOption[];\n}\n\nexport type CurrencyOptions = CurrencySection[];\n\nexport type Props = {\n  id: string;\n  labelId: string;\n  options?: CurrencyOptions;\n  onChange?: (currency: CurrencyType) => void;\n  onOpen?: () => void;\n  addons?: AvatarLayoutProps['avatars'];\n  onSearchChange?: (payload: { query: string; resultCount: number }) => void;\n} & Pick<ExpressiveMoneyInputProps, 'currency'>;\n\nexport const CurrencySelector = ({\n  id,\n  currency,\n  options = [],\n  labelId,\n  onChange,\n  addons,\n  onOpen,\n  onSearchChange,\n}: Props) => {\n  const intl = useIntl();\n\n  const allCurrencyOptions = useMemo(() => getUniqueCurrencies(options), [options]);\n\n  const activeCurrencyOption = useMemo(() => {\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    return allCurrencyOptions.find((option) => option.code === currency)!;\n  }, [currency, allCurrencyOptions]);\n\n  const disabled =\n    !onChange ||\n    options.length === 0 ||\n    (options.length === 1 && options[0].currencies.length <= 1);\n\n  const [searchQuery, setSearchQuery] = useState<string>('');\n\n  const handleTriggerClick: MouseEventHandler = (event) => {\n    const triggerEl = event.currentTarget;\n    if (triggerEl?.getAttribute('aria-expanded') === 'false') {\n      onOpen?.();\n    }\n  };\n\n  const items = searchQuery\n    ? filterAndSortCurrenciesForQuery(allCurrencyOptions, searchQuery).map(getCurrencySelectOption)\n    : options.map(getCurrencyGroup);\n\n  return (\n    <SelectInput\n      compareValues=\"code\"\n      disabled={disabled}\n      id={id}\n      value={activeCurrencyOption}\n      filterable\n      filterPlaceholder={intl.formatMessage(messages.currencySelectorSearchPlaceholder)}\n      UNSAFE_triggerButtonProps={{\n        id: undefined,\n        'aria-labelledby': undefined,\n        'aria-describedby': labelId,\n        'aria-invalid': undefined,\n        'aria-label': intl.formatMessage(messages.currencySelectorSelectCurrency),\n      }}\n      items={items}\n      renderValue={({ code, label }) => {\n        return (\n          <SelectInputOptionContent\n            title={code}\n            note={label}\n            icon={<Flag code={code} intrinsicSize={24} />}\n          />\n        );\n      }}\n      renderTrigger={() => (\n        <SelectInputTriggerButton\n          as={ButtonInput}\n          // @ts-expect-error new (v2) ButtonProps\n          addonStart={{\n            type: 'avatar',\n            value: [\n              addons ? addons[0] : null,\n              {\n                ...(addons && addons.length > 1\n                  ? { ...addons[1] }\n                  : {\n                      asset: <Flag code={currency} />,\n                    }),\n              },\n            ]\n              .filter(Boolean)\n              .filter((avatar) => !(avatar && Object.keys(avatar).length === 0)),\n          }}\n          addonEnd={disabled ? undefined : { type: 'icon', value: <ChevronDown /> }}\n          onClick={(event) => handleTriggerClick(event)}\n        >\n          <>\n            <span aria-hidden>{currency}</span>\n            <span className=\"sr-only\">{getLocaleCurrencyName(intl, currency)}</span>\n          </>\n        </SelectInputTriggerButton>\n      )}\n      onChange={(newValue) => {\n        onChange?.(newValue.code);\n      }}\n      onFilterChange={({ queryNormalized }) => {\n        setSearchQuery(queryNormalized ?? '');\n        if (queryNormalized) {\n          onSearchChange?.({\n            query: queryNormalized,\n            resultCount: filterAndSortCurrenciesForQuery(allCurrencyOptions, queryNormalized)\n              .length,\n          });\n        }\n      }}\n    />\n  );\n};\n\nexport const ButtonInput = forwardRef(function ButtonInput(\n  { children, ...rest }: React.PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>,\n  ref: React.ForwardedRef<HTMLButtonElement | null>,\n) {\n  return (\n    <Button\n      ref={ref}\n      size=\"md\"\n      v2\n      className=\"wds-currency-selector\"\n      priority=\"secondary-neutral\"\n      {...rest}\n    >\n      {children}\n    </Button>\n  );\n});\n\nconst getCurrencySelectOption = (currency: CurrencyOption) => {\n  return {\n    type: 'option' as const,\n    value: currency,\n    filterMatchers: currency.keywords,\n  };\n};\n\nconst getCurrencyGroup = (section: CurrencySection) => {\n  return {\n    type: 'group' as const,\n    label: section.title,\n    options: section.currencies.map(getCurrencySelectOption),\n  };\n};\n\nconst getUniqueCurrencies = (options: CurrencyOptions) => {\n  const allCurrencyOptions = options.flatMap((section) => section.currencies);\n  const uniqueCurrencies = new Map<string, CurrencyOption>();\n\n  allCurrencyOptions.forEach((currencyObj) => {\n    uniqueCurrencies.set(currencyObj.code, currencyObj);\n  });\n\n  return Array.from(uniqueCurrencies.values());\n};\n\nconst filterAndSortCurrenciesForQuery = (\n  currencies: CurrencyOption[],\n  query: string,\n): CurrencyOption[] => {\n  return (\n    currencies\n      .filter((currency) => {\n        return (\n          currency.code.toLowerCase().includes(query) ||\n          (currency.label ?? '').toLowerCase().includes(query) ||\n          currency.keywords?.some((keyword) => keyword.toLowerCase().includes(query))\n        );\n      })\n      // prefer exact matches, then sort alphabetically by code\n      .sort((a, b) => {\n        const aCode = a.code.toLowerCase();\n        const bCode = b.code.toLowerCase();\n        if (aCode === query) {\n          return -1;\n        }\n        if (bCode === query) {\n          return 1;\n        }\n        return aCode.localeCompare(bCode);\n      })\n  );\n};\n"],"names":["CurrencySelector","id","currency","options","labelId","onChange","addons","onOpen","onSearchChange","intl","useIntl","allCurrencyOptions","useMemo","getUniqueCurrencies","activeCurrencyOption","find","option","code","disabled","length","currencies","searchQuery","setSearchQuery","useState","handleTriggerClick","event","triggerEl","currentTarget","getAttribute","items","filterAndSortCurrenciesForQuery","map","getCurrencySelectOption","getCurrencyGroup","_jsx","SelectInput","compareValues","value","filterable","filterPlaceholder","formatMessage","messages","currencySelectorSearchPlaceholder","UNSAFE_triggerButtonProps","undefined","currencySelectorSelectCurrency","renderValue","label","SelectInputOptionContent","title","note","icon","Flag","intrinsicSize","renderTrigger","SelectInputTriggerButton","as","ButtonInput","addonStart","type","asset","filter","Boolean","avatar","Object","keys","addonEnd","ChevronDown","onClick","children","_jsxs","_Fragment","className","getLocaleCurrencyName","newValue","onFilterChange","queryNormalized","query","resultCount","forwardRef","rest","ref","Button","size","v2","priority","filterMatchers","keywords","section","flatMap","uniqueCurrencies","Map","forEach","currencyObj","set","Array","from","values","toLowerCase","includes","some","keyword","sort","a","b","aCode","bCode","localeCompare"],"mappings":"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"}

package/build/expressiveMoneyInput/currencySelector/CurrencySelector.mjs

@@ -36,7 +36,6 @@ import '../../common/closeButton/CloseButton.messages.mjs';
 import '../../inputs/SelectInput/SelectInput.messages.mjs';
 import { Flag } from '@wise/art';
 import messages from '../ExpressiveMoneyInput.messages.mjs';
-import { formatCurrencyCode } from '@transferwise/formatting';
 
 const CurrencySelector = ({
   id,
@@ -83,7 +82,7 @@ const CurrencySelector = ({
       label
     }) => {
       return /*#__PURE__*/jsx(SelectInputOptionContent, {
-        title: formatCurrencyCode(code),
+        title: code,
         note: label,
         icon: /*#__PURE__*/jsx(Flag, {
           code: code,
@@ -115,7 +114,7 @@ const CurrencySelector = ({
       children: /*#__PURE__*/jsxs(Fragment, {
         children: [/*#__PURE__*/jsx("span", {
           "aria-hidden": true,
-          children: formatCurrencyCode(currency)
+          children: currency
         }), /*#__PURE__*/jsx("span", {
           className: "sr-only",
           children: getLocaleCurrencyName(intl, currency)

package/build/expressiveMoneyInput/currencySelector/CurrencySelector.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CurrencySelector.mjs","sources":["../../../src/expressiveMoneyInput/currencySelector/CurrencySelector.tsx"],"sourcesContent":["import type { AvatarLayoutProps } from '../../avatarLayout';\nimport Button from '../../button';\nimport {\n  SelectInput,\n  SelectInputOptionContent,\n  SelectInputTriggerButton,\n} from '../../inputs/SelectInput';\nimport { CurrencyType, Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\nimport { ChevronDown } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport {\n  type ButtonHTMLAttributes,\n  forwardRef,\n  type MouseEventHandler,\n  useMemo,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport messages from '../ExpressiveMoneyInput.messages';\nimport { getLocaleCurrencyName } from '../../common';\nimport { formatCurrencyCode } from '@transferwise/formatting';\n\nexport interface CurrencyOption {\n  label?: string;\n  code: string;\n  keywords: string[] | undefined;\n}\n\nexport interface CurrencySection {\n  title: string;\n  currencies: CurrencyOption[];\n}\n\nexport type CurrencyOptions = CurrencySection[];\n\nexport type Props = {\n  id: string;\n  labelId: string;\n  options?: CurrencyOptions;\n  onChange?: (currency: CurrencyType) => void;\n  onOpen?: () => void;\n  addons?: AvatarLayoutProps['avatars'];\n  onSearchChange?: (payload: { query: string; resultCount: number }) => void;\n} & Pick<ExpressiveMoneyInputProps, 'currency'>;\n\nexport const CurrencySelector = ({\n  id,\n  currency,\n  options = [],\n  labelId,\n  onChange,\n  addons,\n  onOpen,\n  onSearchChange,\n}: Props) => {\n  const intl = useIntl();\n\n  const allCurrencyOptions = useMemo(() => getUniqueCurrencies(options), [options]);\n\n  const activeCurrencyOption = useMemo(() => {\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    return allCurrencyOptions.find((option) => option.code === currency)!;\n  }, [currency, allCurrencyOptions]);\n\n  const disabled =\n    !onChange ||\n    options.length === 0 ||\n    (options.length === 1 && options[0].currencies.length <= 1);\n\n  const [searchQuery, setSearchQuery] = useState<string>('');\n\n  const handleTriggerClick: MouseEventHandler = (event) => {\n    const triggerEl = event.currentTarget;\n    if (triggerEl?.getAttribute('aria-expanded') === 'false') {\n      onOpen?.();\n    }\n  };\n\n  const items = searchQuery\n    ? filterAndSortCurrenciesForQuery(allCurrencyOptions, searchQuery).map(getCurrencySelectOption)\n    : options.map(getCurrencyGroup);\n\n  return (\n    <SelectInput\n      compareValues=\"code\"\n      disabled={disabled}\n      id={id}\n      value={activeCurrencyOption}\n      filterable\n      filterPlaceholder={intl.formatMessage(messages.currencySelectorSearchPlaceholder)}\n      UNSAFE_triggerButtonProps={{\n        id: undefined,\n        'aria-labelledby': undefined,\n        'aria-describedby': labelId,\n        'aria-invalid': undefined,\n        'aria-label': intl.formatMessage(messages.currencySelectorSelectCurrency),\n      }}\n      items={items}\n      renderValue={({ code, label }) => {\n        return (\n          <SelectInputOptionContent\n            title={formatCurrencyCode(code)}\n            note={label}\n            icon={<Flag code={code} intrinsicSize={24} />}\n          />\n        );\n      }}\n      renderTrigger={() => (\n        <SelectInputTriggerButton\n          as={ButtonInput}\n          // @ts-expect-error new (v2) ButtonProps\n          addonStart={{\n            type: 'avatar',\n            value: [\n              addons ? addons[0] : null,\n              {\n                ...(addons && addons.length > 1\n                  ? { ...addons[1] }\n                  : {\n                      asset: <Flag code={currency} />,\n                    }),\n              },\n            ]\n              .filter(Boolean)\n              .filter((avatar) => !(avatar && Object.keys(avatar).length === 0)),\n          }}\n          addonEnd={disabled ? undefined : { type: 'icon', value: <ChevronDown /> }}\n          onClick={(event) => handleTriggerClick(event)}\n        >\n          <>\n            <span aria-hidden>{formatCurrencyCode(currency)}</span>\n            <span className=\"sr-only\">{getLocaleCurrencyName(intl, currency)}</span>\n          </>\n        </SelectInputTriggerButton>\n      )}\n      onChange={(newValue) => {\n        onChange?.(newValue.code);\n      }}\n      onFilterChange={({ queryNormalized }) => {\n        setSearchQuery(queryNormalized ?? '');\n        if (queryNormalized) {\n          onSearchChange?.({\n            query: queryNormalized,\n            resultCount: filterAndSortCurrenciesForQuery(allCurrencyOptions, queryNormalized)\n              .length,\n          });\n        }\n      }}\n    />\n  );\n};\n\nexport const ButtonInput = forwardRef(function ButtonInput(\n  { children, ...rest }: React.PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>,\n  ref: React.ForwardedRef<HTMLButtonElement | null>,\n) {\n  return (\n    <Button\n      ref={ref}\n      size=\"md\"\n      v2\n      className=\"wds-currency-selector\"\n      priority=\"secondary-neutral\"\n      {...rest}\n    >\n      {children}\n    </Button>\n  );\n});\n\nconst getCurrencySelectOption = (currency: CurrencyOption) => {\n  return {\n    type: 'option' as const,\n    value: currency,\n    filterMatchers: currency.keywords,\n  };\n};\n\nconst getCurrencyGroup = (section: CurrencySection) => {\n  return {\n    type: 'group' as const,\n    label: section.title,\n    options: section.currencies.map(getCurrencySelectOption),\n  };\n};\n\nconst getUniqueCurrencies = (options: CurrencyOptions) => {\n  const allCurrencyOptions = options.flatMap((section) => section.currencies);\n  const uniqueCurrencies = new Map<string, CurrencyOption>();\n\n  allCurrencyOptions.forEach((currencyObj) => {\n    uniqueCurrencies.set(currencyObj.code, currencyObj);\n  });\n\n  return Array.from(uniqueCurrencies.values());\n};\n\nconst filterAndSortCurrenciesForQuery = (\n  currencies: CurrencyOption[],\n  query: string,\n): CurrencyOption[] => {\n  return (\n    currencies\n      .filter((currency) => {\n        return (\n          currency.code.toLowerCase().includes(query) ||\n          (currency.label ?? '').toLowerCase().includes(query) ||\n          currency.keywords?.some((keyword) => keyword.toLowerCase().includes(query))\n        );\n      })\n      // prefer exact matches, then sort alphabetically by code\n      .sort((a, b) => {\n        const aCode = a.code.toLowerCase();\n        const bCode = b.code.toLowerCase();\n        if (aCode === query) {\n          return -1;\n        }\n        if (bCode === query) {\n          return 1;\n        }\n        return aCode.localeCompare(bCode);\n      })\n  );\n};\n"],"names":["CurrencySelector","id","currency","options","labelId","onChange","addons","onOpen","onSearchChange","intl","useIntl","allCurrencyOptions","useMemo","getUniqueCurrencies","activeCurrencyOption","find","option","code","disabled","length","currencies","searchQuery","setSearchQuery","useState","handleTriggerClick","event","triggerEl","currentTarget","getAttribute","items","filterAndSortCurrenciesForQuery","map","getCurrencySelectOption","getCurrencyGroup","_jsx","SelectInput","compareValues","value","filterable","filterPlaceholder","formatMessage","messages","currencySelectorSearchPlaceholder","UNSAFE_triggerButtonProps","undefined","currencySelectorSelectCurrency","renderValue","label","SelectInputOptionContent","title","formatCurrencyCode","note","icon","Flag","intrinsicSize","renderTrigger","SelectInputTriggerButton","as","ButtonInput","addonStart","type","asset","filter","Boolean","avatar","Object","keys","addonEnd","ChevronDown","onClick","children","_jsxs","_Fragment","className","getLocaleCurrencyName","newValue","onFilterChange","queryNormalized","query","resultCount","forwardRef","rest","ref","Button","size","v2","priority","filterMatchers","keywords","section","flatMap","uniqueCurrencies","Map","forEach","currencyObj","set","Array","from","values","toLowerCase","includes","some","keyword","sort","a","b","aCode","bCode","localeCompare"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CO,MAAMA,gBAAgB,GAAGA,CAAC;EAC/BC,EAAE;EACFC,QAAQ;AACRC,EAAAA,OAAO,GAAG,EAAE;EACZC,OAAO;EACPC,QAAQ;EACRC,MAAM;EACNC,MAAM;AACNC,EAAAA;AAAc,CACR,KAAI;AACV,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;AAEtB,EAAA,MAAMC,kBAAkB,GAAGC,OAAO,CAAC,MAAMC,mBAAmB,CAACV,OAAO,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;AAEjF,EAAA,MAAMW,oBAAoB,GAAGF,OAAO,CAAC,MAAK;AACxC;IACA,OAAOD,kBAAkB,CAACI,IAAI,CAAEC,MAAM,IAAKA,MAAM,CAACC,IAAI,KAAKf,QAAQ,CAAE;AACvE,EAAA,CAAC,EAAE,CAACA,QAAQ,EAAES,kBAAkB,CAAC,CAAC;EAElC,MAAMO,QAAQ,GACZ,CAACb,QAAQ,IACTF,OAAO,CAACgB,MAAM,KAAK,CAAC,IACnBhB,OAAO,CAACgB,MAAM,KAAK,CAAC,IAAIhB,OAAO,CAAC,CAAC,CAAC,CAACiB,UAAU,CAACD,MAAM,IAAI,CAAE;EAE7D,MAAM,CAACE,WAAW,EAAEC,cAAc,CAAC,GAAGC,QAAQ,CAAS,EAAE,CAAC;EAE1D,MAAMC,kBAAkB,GAAuBC,KAAK,IAAI;AACtD,IAAA,MAAMC,SAAS,GAAGD,KAAK,CAACE,aAAa;IACrC,IAAID,SAAS,EAAEE,YAAY,CAAC,eAAe,CAAC,KAAK,OAAO,EAAE;AACxDrB,MAAAA,MAAM,IAAI;AACZ,IAAA;EACF,CAAC;EAED,MAAMsB,KAAK,GAAGR,WAAW,GACrBS,+BAA+B,CAACnB,kBAAkB,EAAEU,WAAW,CAAC,CAACU,GAAG,CAACC,uBAAuB,CAAC,GAC7F7B,OAAO,CAAC4B,GAAG,CAACE,gBAAgB,CAAC;EAEjC,oBACEC,GAAA,CAACC,WAAW,EAAA;AACVC,IAAAA,aAAa,EAAC,MAAM;AACpBlB,IAAAA,QAAQ,EAAEA,QAAS;AACnBjB,IAAAA,EAAE,EAAEA,EAAG;AACPoC,IAAAA,KAAK,EAAEvB,oBAAqB;IAC5BwB,UAAU,EAAA,IAAA;IACVC,iBAAiB,EAAE9B,IAAI,CAAC+B,aAAa,CAACC,QAAQ,CAACC,iCAAiC,CAAE;AAClFC,IAAAA,yBAAyB,EAAE;AACzB1C,MAAAA,EAAE,EAAE2C,SAAS;AACb,MAAA,iBAAiB,EAAEA,SAAS;AAC5B,MAAA,kBAAkB,EAAExC,OAAO;AAC3B,MAAA,cAAc,EAAEwC,SAAS;AACzB,MAAA,YAAY,EAAEnC,IAAI,CAAC+B,aAAa,CAACC,QAAQ,CAACI,8BAA8B;KACxE;AACFhB,IAAAA,KAAK,EAAEA,KAAM;AACbiB,IAAAA,WAAW,EAAEA,CAAC;MAAE7B,IAAI;AAAE8B,MAAAA;AAAK,KAAE,KAAI;MAC/B,oBACEb,GAAA,CAACc,wBAAwB,EAAA;AACvBC,QAAAA,KAAK,EAAEC,kBAAkB,CAACjC,IAAI,CAAE;AAChCkC,QAAAA,IAAI,EAAEJ,KAAM;QACZK,IAAI,eAAElB,GAAA,CAACmB,IAAI,EAAA;AAACpC,UAAAA,IAAI,EAAEA,IAAK;AAACqC,UAAAA,aAAa,EAAE;;AAAO,OAAA,CAC9C;IAEN,CAAE;AACFC,IAAAA,aAAa,EAAEA,mBACbrB,GAAA,CAACsB,wBAAwB,EAAA;AACvBC,MAAAA,EAAE,EAAEC;AACJ;AAAA;AACAC,MAAAA,UAAU,EAAE;AACVC,QAAAA,IAAI,EAAE,QAAQ;QACdvB,KAAK,EAAE,CACL/B,MAAM,GAAGA,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,EACzB;AACE,UAAA,IAAIA,MAAM,IAAIA,MAAM,CAACa,MAAM,GAAG,CAAC,GAC3B;YAAE,GAAGb,MAAM,CAAC,CAAC;AAAC,WAAE,GAChB;YACEuD,KAAK,eAAE3B,GAAA,CAACmB,IAAI,EAAA;AAACpC,cAAAA,IAAI,EAAEf;aAAS;WAC7B;SACN,CACF,CACE4D,MAAM,CAACC,OAAO,CAAC,CACfD,MAAM,CAAEE,MAAM,IAAK,EAAEA,MAAM,IAAIC,MAAM,CAACC,IAAI,CAACF,MAAM,CAAC,CAAC7C,MAAM,KAAK,CAAC,CAAC;OACnE;AACFgD,MAAAA,QAAQ,EAAEjD,QAAQ,GAAG0B,SAAS,GAAG;AAAEgB,QAAAA,IAAI,EAAE,MAAM;AAAEvB,QAAAA,KAAK,eAAEH,GAAA,CAACkC,WAAW,EAAA,EAAA;OAAM;AAC1EC,MAAAA,OAAO,EAAG5C,KAAK,IAAKD,kBAAkB,CAACC,KAAK,CAAE;MAAA6C,QAAA,eAE9CC,IAAA,CAAAC,QAAA,EAAA;AAAAF,QAAAA,QAAA,gBACEpC,GAAA,CAAA,MAAA,EAAA;UAAM,aAAA,EAAA,IAAW;UAAAoC,QAAA,EAAEpB,kBAAkB,CAAChD,QAAQ;SAAQ,CACtD,eAAAgC,GAAA,CAAA,MAAA,EAAA;AAAMuC,UAAAA,SAAS,EAAC,SAAS;AAAAH,UAAAA,QAAA,EAAEI,qBAAqB,CAACjE,IAAI,EAAEP,QAAQ;AAAC,SAAO,CACzE;OAAA;AACF,KAA0B,CAC1B;IACFG,QAAQ,EAAGsE,QAAQ,IAAI;AACrBtE,MAAAA,QAAQ,GAAGsE,QAAQ,CAAC1D,IAAI,CAAC;IAC3B,CAAE;AACF2D,IAAAA,cAAc,EAAEA,CAAC;AAAEC,MAAAA;AAAe,KAAE,KAAI;AACtCvD,MAAAA,cAAc,CAACuD,eAAe,IAAI,EAAE,CAAC;AACrC,MAAA,IAAIA,eAAe,EAAE;AACnBrE,QAAAA,cAAc,GAAG;AACfsE,UAAAA,KAAK,EAAED,eAAe;AACtBE,UAAAA,WAAW,EAAEjD,+BAA+B,CAACnB,kBAAkB,EAAEkE,eAAe,CAAC,CAC9E1D;AACJ,SAAA,CAAC;AACJ,MAAA;AACF,IAAA;AAAE,GAAA,CACF;AAEN;MAEauC,WAAW,gBAAGsB,UAAU,CAAC,SAAStB,WAAWA,CACxD;EAAEY,QAAQ;EAAE,GAAGW;AAAI,CAAoE,EACvFC,GAAiD,EAAA;EAEjD,oBACEhD,GAAA,CAACiD,MAAM,EAAA;AACLD,IAAAA,GAAG,EAAEA,GAAI;AACTE,IAAAA,IAAI,EAAC,IAAI;IACTC,EAAE,EAAA,IAAA;AACFZ,IAAAA,SAAS,EAAC,uBAAuB;AACjCa,IAAAA,QAAQ,EAAC,mBAAmB;AAAA,IAAA,GACxBL,IAAI;AAAAX,IAAAA,QAAA,EAEPA;AAAQ,GACH,CAAC;AAEb,CAAC;AAED,MAAMtC,uBAAuB,GAAI9B,QAAwB,IAAI;EAC3D,OAAO;AACL0D,IAAAA,IAAI,EAAE,QAAiB;AACvBvB,IAAAA,KAAK,EAAEnC,QAAQ;IACfqF,cAAc,EAAErF,QAAQ,CAACsF;GAC1B;AACH,CAAC;AAED,MAAMvD,gBAAgB,GAAIwD,OAAwB,IAAI;EACpD,OAAO;AACL7B,IAAAA,IAAI,EAAE,OAAgB;IACtBb,KAAK,EAAE0C,OAAO,CAACxC,KAAK;AACpB9C,IAAAA,OAAO,EAAEsF,OAAO,CAACrE,UAAU,CAACW,GAAG,CAACC,uBAAuB;GACxD;AACH,CAAC;AAED,MAAMnB,mBAAmB,GAAIV,OAAwB,IAAI;EACvD,MAAMQ,kBAAkB,GAAGR,OAAO,CAACuF,OAAO,CAAED,OAAO,IAAKA,OAAO,CAACrE,UAAU,CAAC;AAC3E,EAAA,MAAMuE,gBAAgB,GAAG,IAAIC,GAAG,EAA0B;AAE1DjF,EAAAA,kBAAkB,CAACkF,OAAO,CAAEC,WAAW,IAAI;IACzCH,gBAAgB,CAACI,GAAG,CAACD,WAAW,CAAC7E,IAAI,EAAE6E,WAAW,CAAC;AACrD,EAAA,CAAC,CAAC;EAEF,OAAOE,KAAK,CAACC,IAAI,CAACN,gBAAgB,CAACO,MAAM,EAAE,CAAC;AAC9C,CAAC;AAED,MAAMpE,+BAA+B,GAAGA,CACtCV,UAA4B,EAC5B0D,KAAa,KACO;AACpB,EAAA,OACE1D,UAAU,CACP0C,MAAM,CAAE5D,QAAQ,IAAI;IACnB,OACEA,QAAQ,CAACe,IAAI,CAACkF,WAAW,EAAE,CAACC,QAAQ,CAACtB,KAAK,CAAC,IAC3C,CAAC5E,QAAQ,CAAC6C,KAAK,IAAI,EAAE,EAAEoD,WAAW,EAAE,CAACC,QAAQ,CAACtB,KAAK,CAAC,IACpD5E,QAAQ,CAACsF,QAAQ,EAAEa,IAAI,CAAEC,OAAO,IAAKA,OAAO,CAACH,WAAW,EAAE,CAACC,QAAQ,CAACtB,KAAK,CAAC,CAAC;EAE/E,CAAC;AACD;AAAA,GACCyB,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAI;IACb,MAAMC,KAAK,GAAGF,CAAC,CAACvF,IAAI,CAACkF,WAAW,EAAE;IAClC,MAAMQ,KAAK,GAAGF,CAAC,CAACxF,IAAI,CAACkF,WAAW,EAAE;IAClC,IAAIO,KAAK,KAAK5B,KAAK,EAAE;AACnB,MAAA,OAAO,EAAE;AACX,IAAA;IACA,IAAI6B,KAAK,KAAK7B,KAAK,EAAE;AACnB,MAAA,OAAO,CAAC;AACV,IAAA;AACA,IAAA,OAAO4B,KAAK,CAACE,aAAa,CAACD,KAAK,CAAC;AACnC,EAAA,CAAC,CAAC;AAER,CAAC;;;;"}
+{"version":3,"file":"CurrencySelector.mjs","sources":["../../../src/expressiveMoneyInput/currencySelector/CurrencySelector.tsx"],"sourcesContent":["import type { AvatarLayoutProps } from '../../avatarLayout';\nimport Button from '../../button';\nimport {\n  SelectInput,\n  SelectInputOptionContent,\n  SelectInputTriggerButton,\n} from '../../inputs/SelectInput';\nimport { CurrencyType, Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\nimport { ChevronDown } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport {\n  type ButtonHTMLAttributes,\n  forwardRef,\n  type MouseEventHandler,\n  useMemo,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport messages from '../ExpressiveMoneyInput.messages';\nimport { getLocaleCurrencyName } from '../../common';\n\nexport interface CurrencyOption {\n  label?: string;\n  code: string;\n  keywords: string[] | undefined;\n}\n\nexport interface CurrencySection {\n  title: string;\n  currencies: CurrencyOption[];\n}\n\nexport type CurrencyOptions = CurrencySection[];\n\nexport type Props = {\n  id: string;\n  labelId: string;\n  options?: CurrencyOptions;\n  onChange?: (currency: CurrencyType) => void;\n  onOpen?: () => void;\n  addons?: AvatarLayoutProps['avatars'];\n  onSearchChange?: (payload: { query: string; resultCount: number }) => void;\n} & Pick<ExpressiveMoneyInputProps, 'currency'>;\n\nexport const CurrencySelector = ({\n  id,\n  currency,\n  options = [],\n  labelId,\n  onChange,\n  addons,\n  onOpen,\n  onSearchChange,\n}: Props) => {\n  const intl = useIntl();\n\n  const allCurrencyOptions = useMemo(() => getUniqueCurrencies(options), [options]);\n\n  const activeCurrencyOption = useMemo(() => {\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    return allCurrencyOptions.find((option) => option.code === currency)!;\n  }, [currency, allCurrencyOptions]);\n\n  const disabled =\n    !onChange ||\n    options.length === 0 ||\n    (options.length === 1 && options[0].currencies.length <= 1);\n\n  const [searchQuery, setSearchQuery] = useState<string>('');\n\n  const handleTriggerClick: MouseEventHandler = (event) => {\n    const triggerEl = event.currentTarget;\n    if (triggerEl?.getAttribute('aria-expanded') === 'false') {\n      onOpen?.();\n    }\n  };\n\n  const items = searchQuery\n    ? filterAndSortCurrenciesForQuery(allCurrencyOptions, searchQuery).map(getCurrencySelectOption)\n    : options.map(getCurrencyGroup);\n\n  return (\n    <SelectInput\n      compareValues=\"code\"\n      disabled={disabled}\n      id={id}\n      value={activeCurrencyOption}\n      filterable\n      filterPlaceholder={intl.formatMessage(messages.currencySelectorSearchPlaceholder)}\n      UNSAFE_triggerButtonProps={{\n        id: undefined,\n        'aria-labelledby': undefined,\n        'aria-describedby': labelId,\n        'aria-invalid': undefined,\n        'aria-label': intl.formatMessage(messages.currencySelectorSelectCurrency),\n      }}\n      items={items}\n      renderValue={({ code, label }) => {\n        return (\n          <SelectInputOptionContent\n            title={code}\n            note={label}\n            icon={<Flag code={code} intrinsicSize={24} />}\n          />\n        );\n      }}\n      renderTrigger={() => (\n        <SelectInputTriggerButton\n          as={ButtonInput}\n          // @ts-expect-error new (v2) ButtonProps\n          addonStart={{\n            type: 'avatar',\n            value: [\n              addons ? addons[0] : null,\n              {\n                ...(addons && addons.length > 1\n                  ? { ...addons[1] }\n                  : {\n                      asset: <Flag code={currency} />,\n                    }),\n              },\n            ]\n              .filter(Boolean)\n              .filter((avatar) => !(avatar && Object.keys(avatar).length === 0)),\n          }}\n          addonEnd={disabled ? undefined : { type: 'icon', value: <ChevronDown /> }}\n          onClick={(event) => handleTriggerClick(event)}\n        >\n          <>\n            <span aria-hidden>{currency}</span>\n            <span className=\"sr-only\">{getLocaleCurrencyName(intl, currency)}</span>\n          </>\n        </SelectInputTriggerButton>\n      )}\n      onChange={(newValue) => {\n        onChange?.(newValue.code);\n      }}\n      onFilterChange={({ queryNormalized }) => {\n        setSearchQuery(queryNormalized ?? '');\n        if (queryNormalized) {\n          onSearchChange?.({\n            query: queryNormalized,\n            resultCount: filterAndSortCurrenciesForQuery(allCurrencyOptions, queryNormalized)\n              .length,\n          });\n        }\n      }}\n    />\n  );\n};\n\nexport const ButtonInput = forwardRef(function ButtonInput(\n  { children, ...rest }: React.PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>,\n  ref: React.ForwardedRef<HTMLButtonElement | null>,\n) {\n  return (\n    <Button\n      ref={ref}\n      size=\"md\"\n      v2\n      className=\"wds-currency-selector\"\n      priority=\"secondary-neutral\"\n      {...rest}\n    >\n      {children}\n    </Button>\n  );\n});\n\nconst getCurrencySelectOption = (currency: CurrencyOption) => {\n  return {\n    type: 'option' as const,\n    value: currency,\n    filterMatchers: currency.keywords,\n  };\n};\n\nconst getCurrencyGroup = (section: CurrencySection) => {\n  return {\n    type: 'group' as const,\n    label: section.title,\n    options: section.currencies.map(getCurrencySelectOption),\n  };\n};\n\nconst getUniqueCurrencies = (options: CurrencyOptions) => {\n  const allCurrencyOptions = options.flatMap((section) => section.currencies);\n  const uniqueCurrencies = new Map<string, CurrencyOption>();\n\n  allCurrencyOptions.forEach((currencyObj) => {\n    uniqueCurrencies.set(currencyObj.code, currencyObj);\n  });\n\n  return Array.from(uniqueCurrencies.values());\n};\n\nconst filterAndSortCurrenciesForQuery = (\n  currencies: CurrencyOption[],\n  query: string,\n): CurrencyOption[] => {\n  return (\n    currencies\n      .filter((currency) => {\n        return (\n          currency.code.toLowerCase().includes(query) ||\n          (currency.label ?? '').toLowerCase().includes(query) ||\n          currency.keywords?.some((keyword) => keyword.toLowerCase().includes(query))\n        );\n      })\n      // prefer exact matches, then sort alphabetically by code\n      .sort((a, b) => {\n        const aCode = a.code.toLowerCase();\n        const bCode = b.code.toLowerCase();\n        if (aCode === query) {\n          return -1;\n        }\n        if (bCode === query) {\n          return 1;\n        }\n        return aCode.localeCompare(bCode);\n      })\n  );\n};\n"],"names":["CurrencySelector","id","currency","options","labelId","onChange","addons","onOpen","onSearchChange","intl","useIntl","allCurrencyOptions","useMemo","getUniqueCurrencies","activeCurrencyOption","find","option","code","disabled","length","currencies","searchQuery","setSearchQuery","useState","handleTriggerClick","event","triggerEl","currentTarget","getAttribute","items","filterAndSortCurrenciesForQuery","map","getCurrencySelectOption","getCurrencyGroup","_jsx","SelectInput","compareValues","value","filterable","filterPlaceholder","formatMessage","messages","currencySelectorSearchPlaceholder","UNSAFE_triggerButtonProps","undefined","currencySelectorSelectCurrency","renderValue","label","SelectInputOptionContent","title","note","icon","Flag","intrinsicSize","renderTrigger","SelectInputTriggerButton","as","ButtonInput","addonStart","type","asset","filter","Boolean","avatar","Object","keys","addonEnd","ChevronDown","onClick","children","_jsxs","_Fragment","className","getLocaleCurrencyName","newValue","onFilterChange","queryNormalized","query","resultCount","forwardRef","rest","ref","Button","size","v2","priority","filterMatchers","keywords","section","flatMap","uniqueCurrencies","Map","forEach","currencyObj","set","Array","from","values","toLowerCase","includes","some","keyword","sort","a","b","aCode","bCode","localeCompare"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CO,MAAMA,gBAAgB,GAAGA,CAAC;EAC/BC,EAAE;EACFC,QAAQ;AACRC,EAAAA,OAAO,GAAG,EAAE;EACZC,OAAO;EACPC,QAAQ;EACRC,MAAM;EACNC,MAAM;AACNC,EAAAA;AAAc,CACR,KAAI;AACV,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;AAEtB,EAAA,MAAMC,kBAAkB,GAAGC,OAAO,CAAC,MAAMC,mBAAmB,CAACV,OAAO,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;AAEjF,EAAA,MAAMW,oBAAoB,GAAGF,OAAO,CAAC,MAAK;AACxC;IACA,OAAOD,kBAAkB,CAACI,IAAI,CAAEC,MAAM,IAAKA,MAAM,CAACC,IAAI,KAAKf,QAAQ,CAAE;AACvE,EAAA,CAAC,EAAE,CAACA,QAAQ,EAAES,kBAAkB,CAAC,CAAC;EAElC,MAAMO,QAAQ,GACZ,CAACb,QAAQ,IACTF,OAAO,CAACgB,MAAM,KAAK,CAAC,IACnBhB,OAAO,CAACgB,MAAM,KAAK,CAAC,IAAIhB,OAAO,CAAC,CAAC,CAAC,CAACiB,UAAU,CAACD,MAAM,IAAI,CAAE;EAE7D,MAAM,CAACE,WAAW,EAAEC,cAAc,CAAC,GAAGC,QAAQ,CAAS,EAAE,CAAC;EAE1D,MAAMC,kBAAkB,GAAuBC,KAAK,IAAI;AACtD,IAAA,MAAMC,SAAS,GAAGD,KAAK,CAACE,aAAa;IACrC,IAAID,SAAS,EAAEE,YAAY,CAAC,eAAe,CAAC,KAAK,OAAO,EAAE;AACxDrB,MAAAA,MAAM,IAAI;AACZ,IAAA;EACF,CAAC;EAED,MAAMsB,KAAK,GAAGR,WAAW,GACrBS,+BAA+B,CAACnB,kBAAkB,EAAEU,WAAW,CAAC,CAACU,GAAG,CAACC,uBAAuB,CAAC,GAC7F7B,OAAO,CAAC4B,GAAG,CAACE,gBAAgB,CAAC;EAEjC,oBACEC,GAAA,CAACC,WAAW,EAAA;AACVC,IAAAA,aAAa,EAAC,MAAM;AACpBlB,IAAAA,QAAQ,EAAEA,QAAS;AACnBjB,IAAAA,EAAE,EAAEA,EAAG;AACPoC,IAAAA,KAAK,EAAEvB,oBAAqB;IAC5BwB,UAAU,EAAA,IAAA;IACVC,iBAAiB,EAAE9B,IAAI,CAAC+B,aAAa,CAACC,QAAQ,CAACC,iCAAiC,CAAE;AAClFC,IAAAA,yBAAyB,EAAE;AACzB1C,MAAAA,EAAE,EAAE2C,SAAS;AACb,MAAA,iBAAiB,EAAEA,SAAS;AAC5B,MAAA,kBAAkB,EAAExC,OAAO;AAC3B,MAAA,cAAc,EAAEwC,SAAS;AACzB,MAAA,YAAY,EAAEnC,IAAI,CAAC+B,aAAa,CAACC,QAAQ,CAACI,8BAA8B;KACxE;AACFhB,IAAAA,KAAK,EAAEA,KAAM;AACbiB,IAAAA,WAAW,EAAEA,CAAC;MAAE7B,IAAI;AAAE8B,MAAAA;AAAK,KAAE,KAAI;MAC/B,oBACEb,GAAA,CAACc,wBAAwB,EAAA;AACvBC,QAAAA,KAAK,EAAEhC,IAAK;AACZiC,QAAAA,IAAI,EAAEH,KAAM;QACZI,IAAI,eAAEjB,GAAA,CAACkB,IAAI,EAAA;AAACnC,UAAAA,IAAI,EAAEA,IAAK;AAACoC,UAAAA,aAAa,EAAE;;AAAO,OAAA,CAC9C;IAEN,CAAE;AACFC,IAAAA,aAAa,EAAEA,mBACbpB,GAAA,CAACqB,wBAAwB,EAAA;AACvBC,MAAAA,EAAE,EAAEC;AACJ;AAAA;AACAC,MAAAA,UAAU,EAAE;AACVC,QAAAA,IAAI,EAAE,QAAQ;QACdtB,KAAK,EAAE,CACL/B,MAAM,GAAGA,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,EACzB;AACE,UAAA,IAAIA,MAAM,IAAIA,MAAM,CAACa,MAAM,GAAG,CAAC,GAC3B;YAAE,GAAGb,MAAM,CAAC,CAAC;AAAC,WAAE,GAChB;YACEsD,KAAK,eAAE1B,GAAA,CAACkB,IAAI,EAAA;AAACnC,cAAAA,IAAI,EAAEf;aAAS;WAC7B;SACN,CACF,CACE2D,MAAM,CAACC,OAAO,CAAC,CACfD,MAAM,CAAEE,MAAM,IAAK,EAAEA,MAAM,IAAIC,MAAM,CAACC,IAAI,CAACF,MAAM,CAAC,CAAC5C,MAAM,KAAK,CAAC,CAAC;OACnE;AACF+C,MAAAA,QAAQ,EAAEhD,QAAQ,GAAG0B,SAAS,GAAG;AAAEe,QAAAA,IAAI,EAAE,MAAM;AAAEtB,QAAAA,KAAK,eAAEH,GAAA,CAACiC,WAAW,EAAA,EAAA;OAAM;AAC1EC,MAAAA,OAAO,EAAG3C,KAAK,IAAKD,kBAAkB,CAACC,KAAK,CAAE;MAAA4C,QAAA,eAE9CC,IAAA,CAAAC,QAAA,EAAA;AAAAF,QAAAA,QAAA,gBACEnC,GAAA,CAAA,MAAA,EAAA;UAAM,aAAA,EAAA,IAAW;AAAAmC,UAAAA,QAAA,EAAEnE;SAAe,CAClC,eAAAgC,GAAA,CAAA,MAAA,EAAA;AAAMsC,UAAAA,SAAS,EAAC,SAAS;AAAAH,UAAAA,QAAA,EAAEI,qBAAqB,CAAChE,IAAI,EAAEP,QAAQ;AAAC,SAAO,CACzE;OAAA;AACF,KAA0B,CAC1B;IACFG,QAAQ,EAAGqE,QAAQ,IAAI;AACrBrE,MAAAA,QAAQ,GAAGqE,QAAQ,CAACzD,IAAI,CAAC;IAC3B,CAAE;AACF0D,IAAAA,cAAc,EAAEA,CAAC;AAAEC,MAAAA;AAAe,KAAE,KAAI;AACtCtD,MAAAA,cAAc,CAACsD,eAAe,IAAI,EAAE,CAAC;AACrC,MAAA,IAAIA,eAAe,EAAE;AACnBpE,QAAAA,cAAc,GAAG;AACfqE,UAAAA,KAAK,EAAED,eAAe;AACtBE,UAAAA,WAAW,EAAEhD,+BAA+B,CAACnB,kBAAkB,EAAEiE,eAAe,CAAC,CAC9EzD;AACJ,SAAA,CAAC;AACJ,MAAA;AACF,IAAA;AAAE,GAAA,CACF;AAEN;MAEasC,WAAW,gBAAGsB,UAAU,CAAC,SAAStB,WAAWA,CACxD;EAAEY,QAAQ;EAAE,GAAGW;AAAI,CAAoE,EACvFC,GAAiD,EAAA;EAEjD,oBACE/C,GAAA,CAACgD,MAAM,EAAA;AACLD,IAAAA,GAAG,EAAEA,GAAI;AACTE,IAAAA,IAAI,EAAC,IAAI;IACTC,EAAE,EAAA,IAAA;AACFZ,IAAAA,SAAS,EAAC,uBAAuB;AACjCa,IAAAA,QAAQ,EAAC,mBAAmB;AAAA,IAAA,GACxBL,IAAI;AAAAX,IAAAA,QAAA,EAEPA;AAAQ,GACH,CAAC;AAEb,CAAC;AAED,MAAMrC,uBAAuB,GAAI9B,QAAwB,IAAI;EAC3D,OAAO;AACLyD,IAAAA,IAAI,EAAE,QAAiB;AACvBtB,IAAAA,KAAK,EAAEnC,QAAQ;IACfoF,cAAc,EAAEpF,QAAQ,CAACqF;GAC1B;AACH,CAAC;AAED,MAAMtD,gBAAgB,GAAIuD,OAAwB,IAAI;EACpD,OAAO;AACL7B,IAAAA,IAAI,EAAE,OAAgB;IACtBZ,KAAK,EAAEyC,OAAO,CAACvC,KAAK;AACpB9C,IAAAA,OAAO,EAAEqF,OAAO,CAACpE,UAAU,CAACW,GAAG,CAACC,uBAAuB;GACxD;AACH,CAAC;AAED,MAAMnB,mBAAmB,GAAIV,OAAwB,IAAI;EACvD,MAAMQ,kBAAkB,GAAGR,OAAO,CAACsF,OAAO,CAAED,OAAO,IAAKA,OAAO,CAACpE,UAAU,CAAC;AAC3E,EAAA,MAAMsE,gBAAgB,GAAG,IAAIC,GAAG,EAA0B;AAE1DhF,EAAAA,kBAAkB,CAACiF,OAAO,CAAEC,WAAW,IAAI;IACzCH,gBAAgB,CAACI,GAAG,CAACD,WAAW,CAAC5E,IAAI,EAAE4E,WAAW,CAAC;AACrD,EAAA,CAAC,CAAC;EAEF,OAAOE,KAAK,CAACC,IAAI,CAACN,gBAAgB,CAACO,MAAM,EAAE,CAAC;AAC9C,CAAC;AAED,MAAMnE,+BAA+B,GAAGA,CACtCV,UAA4B,EAC5ByD,KAAa,KACO;AACpB,EAAA,OACEzD,UAAU,CACPyC,MAAM,CAAE3D,QAAQ,IAAI;IACnB,OACEA,QAAQ,CAACe,IAAI,CAACiF,WAAW,EAAE,CAACC,QAAQ,CAACtB,KAAK,CAAC,IAC3C,CAAC3E,QAAQ,CAAC6C,KAAK,IAAI,EAAE,EAAEmD,WAAW,EAAE,CAACC,QAAQ,CAACtB,KAAK,CAAC,IACpD3E,QAAQ,CAACqF,QAAQ,EAAEa,IAAI,CAAEC,OAAO,IAAKA,OAAO,CAACH,WAAW,EAAE,CAACC,QAAQ,CAACtB,KAAK,CAAC,CAAC;EAE/E,CAAC;AACD;AAAA,GACCyB,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAI;IACb,MAAMC,KAAK,GAAGF,CAAC,CAACtF,IAAI,CAACiF,WAAW,EAAE;IAClC,MAAMQ,KAAK,GAAGF,CAAC,CAACvF,IAAI,CAACiF,WAAW,EAAE;IAClC,IAAIO,KAAK,KAAK5B,KAAK,EAAE;AACnB,MAAA,OAAO,EAAE;AACX,IAAA;IACA,IAAI6B,KAAK,KAAK7B,KAAK,EAAE;AACnB,MAAA,OAAO,CAAC;AACV,IAAA;AACA,IAAA,OAAO4B,KAAK,CAACE,aAAa,CAACD,KAAK,CAAC;AACnC,EAAA,CAAC,CAAC;AAER,CAAC;;;;"}

package/build/field/Field.js

@@ -26,17 +26,18 @@ require('react-intl');
 require('../common/closeButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
 var InlinePrompt = require('../prompt/InlinePrompt/InlinePrompt.js');
-require('../statusIcon/StatusIcon.js');
 require('../body/Body.js');
 require('../button/Button.resolver.js');
+require('../sentimentSurface/SentimentSurface.js');
+require('../primitives/PrimitiveButton/PrimitiveButton.js');
+require('../primitives/PrimitiveAnchor/PrimitiveAnchor.js');
 require('../badge/Badge.js');
 require('@wise/art');
+require('../statusIcon/StatusIcon.js');
 require('@transferwise/neptune-validation');
 require('../provider/direction/DirectionProvider.js');
-require('../sentimentSurface/SentimentSurface.js');
-require('../primitives/PrimitiveButton/PrimitiveButton.js');
-require('../primitives/PrimitiveAnchor/PrimitiveAnchor.js');
 require('../link/Link.messages.js');
+require('../prompt/common/Expander/Expander.messages.js');
 var contexts = require('../inputs/contexts.js');
 var Label = require('../label/Label.js');
 

package/build/field/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useRef } from 'react';\n\nimport { Sentiment } from '../common';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\n  FieldLabelContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  /** @default true */\n  required?: boolean;\n  /** @deprecated Use `description` prop instead. */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /**\n   * Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  messageIconLabel?: string;\n  /**\n   * If true, shows a loading spinner in place of the message icon of the InlinePrompt\n   * @default false\n   */\n  messageLoading?: boolean;\n  description?: React.ReactNode;\n  /** @deprecated Use `message` and `type={Sentiment.NEGATIVE}` prop instead. */\n  error?: React.ReactNode;\n  /** @default Sentiment.NEUTRAL */\n  sentiment?: InlinePromptProps['sentiment'];\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  required = true,\n  message: propMessage,\n  messageIconLabel,\n  messageLoading,\n  hint,\n  description = hint,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const labelRef = useRef<HTMLLabelElement>(null);\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = propMessage || props.error;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n  const messageId = useId();\n  const descriptionId = useId();\n\n  /**\n   * form control can have multiple messages to describe it,\n   * e.g the description underneath the label and inline alert\n   */\n  function ariaDescribedbyByIds() {\n    const messageIds = [];\n    if (description) {\n      messageIds.push(descriptionId);\n    }\n    if (message) {\n      messageIds.push(messageId);\n    }\n    return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n  }\n\n  return (\n    <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={clsx(\n                'np-field form-group d-block',\n                {\n                  'has-success': sentiment === Sentiment.POSITIVE,\n                  'has-warning': sentiment === Sentiment.WARNING,\n                  'has-error': hasError,\n                  'has-info': sentiment === Sentiment.NEUTRAL,\n                },\n                className,\n              )}\n            >\n              {label != null ? (\n                <>\n                  <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n                    {required ? label : <Label.Optional>{label}</Label.Optional>}\n                  </Label>\n                  <Label.Description id={descriptionId}>{description}</Label.Description>\n                  <div className=\"np-field-control\">{children}</div>\n                </>\n              ) : (\n                children\n              )}\n\n              {message && (\n                <InlinePrompt\n                  sentiment={sentiment}\n                  id={messageId}\n                  mediaLabel={messageIconLabel}\n                  className=\"np-field__prompt\"\n                  loading={messageLoading}\n                  width=\"full\"\n                >\n                  {message}\n                </InlinePrompt>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width"],"mappings":"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"}
+{"version":3,"file":"Field.js","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useRef } from 'react';\n\nimport { Sentiment } from '../common';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\n  FieldLabelContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  /** @default true */\n  required?: boolean;\n  /** @deprecated Use `description` prop instead. */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /**\n   * Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  messageIconLabel?: string;\n  /**\n   * If true, shows a loading spinner in place of the message icon of the InlinePrompt\n   * @default false\n   */\n  messageLoading?: boolean;\n  description?: React.ReactNode;\n  /** @deprecated Use `message` and `type={Sentiment.NEGATIVE}` prop instead. */\n  error?: React.ReactNode;\n  /** @default Sentiment.NEUTRAL */\n  sentiment?: InlinePromptProps['sentiment'];\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  required = true,\n  message: propMessage,\n  messageIconLabel,\n  messageLoading,\n  hint,\n  description = hint,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const labelRef = useRef<HTMLLabelElement>(null);\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = propMessage || props.error;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n  const messageId = useId();\n  const descriptionId = useId();\n\n  /**\n   * form control can have multiple messages to describe it,\n   * e.g the description underneath the label and inline alert\n   */\n  function ariaDescribedbyByIds() {\n    const messageIds = [];\n    if (description) {\n      messageIds.push(descriptionId);\n    }\n    if (message) {\n      messageIds.push(messageId);\n    }\n    return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n  }\n\n  return (\n    <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={clsx(\n                'np-field form-group d-block',\n                {\n                  'has-success': sentiment === Sentiment.POSITIVE,\n                  'has-warning': sentiment === Sentiment.WARNING,\n                  'has-error': hasError,\n                  'has-info': sentiment === Sentiment.NEUTRAL,\n                },\n                className,\n              )}\n            >\n              {label != null ? (\n                <>\n                  <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n                    {required ? label : <Label.Optional>{label}</Label.Optional>}\n                  </Label>\n                  <Label.Description id={descriptionId}>{description}</Label.Description>\n                  <div className=\"np-field-control\">{children}</div>\n                </>\n              ) : (\n                children\n              )}\n\n              {message && (\n                <InlinePrompt\n                  sentiment={sentiment}\n                  id={messageId}\n                  mediaLabel={messageIconLabel}\n                  className=\"np-field__prompt\"\n                  loading={messageLoading}\n                  width=\"full\"\n                >\n                  {message}\n                </InlinePrompt>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width"],"mappings":"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"}

package/build/field/Field.mjs

@@ -24,17 +24,18 @@ import 'react-intl';
 import '../common/closeButton/CloseButton.messages.mjs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { InlinePrompt } from '../prompt/InlinePrompt/InlinePrompt.mjs';
-import '../statusIcon/StatusIcon.mjs';
 import '../body/Body.mjs';
 import '../button/Button.resolver.mjs';
+import '../sentimentSurface/SentimentSurface.mjs';
+import '../primitives/PrimitiveButton/PrimitiveButton.mjs';
+import '../primitives/PrimitiveAnchor/PrimitiveAnchor.mjs';
 import '../badge/Badge.mjs';
 import '@wise/art';
+import '../statusIcon/StatusIcon.mjs';
 import '@transferwise/neptune-validation';
 import '../provider/direction/DirectionProvider.mjs';
-import '../sentimentSurface/SentimentSurface.mjs';
-import '../primitives/PrimitiveButton/PrimitiveButton.mjs';
-import '../primitives/PrimitiveAnchor/PrimitiveAnchor.mjs';
 import '../link/Link.messages.mjs';
+import '../prompt/common/Expander/Expander.messages.mjs';
 import { FieldLabelContextProvider, InputIdContextProvider, InputDescribedByProvider, InputInvalidProvider } from '../inputs/contexts.mjs';
 import { Label as LabelNamespace } from '../label/Label.mjs';
 

package/build/field/Field.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Field.mjs","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useRef } from 'react';\n\nimport { Sentiment } from '../common';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\n  FieldLabelContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  /** @default true */\n  required?: boolean;\n  /** @deprecated Use `description` prop instead. */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /**\n   * Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  messageIconLabel?: string;\n  /**\n   * If true, shows a loading spinner in place of the message icon of the InlinePrompt\n   * @default false\n   */\n  messageLoading?: boolean;\n  description?: React.ReactNode;\n  /** @deprecated Use `message` and `type={Sentiment.NEGATIVE}` prop instead. */\n  error?: React.ReactNode;\n  /** @default Sentiment.NEUTRAL */\n  sentiment?: InlinePromptProps['sentiment'];\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  required = true,\n  message: propMessage,\n  messageIconLabel,\n  messageLoading,\n  hint,\n  description = hint,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const labelRef = useRef<HTMLLabelElement>(null);\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = propMessage || props.error;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n  const messageId = useId();\n  const descriptionId = useId();\n\n  /**\n   * form control can have multiple messages to describe it,\n   * e.g the description underneath the label and inline alert\n   */\n  function ariaDescribedbyByIds() {\n    const messageIds = [];\n    if (description) {\n      messageIds.push(descriptionId);\n    }\n    if (message) {\n      messageIds.push(messageId);\n    }\n    return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n  }\n\n  return (\n    <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={clsx(\n                'np-field form-group d-block',\n                {\n                  'has-success': sentiment === Sentiment.POSITIVE,\n                  'has-warning': sentiment === Sentiment.WARNING,\n                  'has-error': hasError,\n                  'has-info': sentiment === Sentiment.NEUTRAL,\n                },\n                className,\n              )}\n            >\n              {label != null ? (\n                <>\n                  <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n                    {required ? label : <Label.Optional>{label}</Label.Optional>}\n                  </Label>\n                  <Label.Description id={descriptionId}>{description}</Label.Description>\n                  <div className=\"np-field-control\">{children}</div>\n                </>\n              ) : (\n                children\n              )}\n\n              {message && (\n                <InlinePrompt\n                  sentiment={sentiment}\n                  id={messageId}\n                  mediaLabel={messageIconLabel}\n                  className=\"np-field__prompt\"\n                  loading={messageLoading}\n                  width=\"full\"\n                >\n                  {message}\n                </InlinePrompt>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CO,MAAMA,KAAK,GAAGA,CAAC;EACpBC,EAAE;EACFC,KAAK;AACLC,EAAAA,QAAQ,GAAG,IAAI;AACfC,EAAAA,OAAO,EAAEC,WAAW;EACpBC,gBAAgB;EAChBC,cAAc;EACdC,IAAI;AACJC,EAAAA,WAAW,GAAGD,IAAI;AAClBE,EAAAA,SAAS,EAAEC,QAAQ,GAAGC,SAAS,CAACC,OAAO;EACvCC,SAAS;EACTC,QAAQ;EACR,GAAGC;AAAK,CACG,KAAI;AACf,EAAA,MAAMC,QAAQ,GAAGC,MAAM,CAAmB,IAAI,CAAC;EAC/C,MAAMR,SAAS,GAAGM,KAAK,CAACG,KAAK,GAAGP,SAAS,CAACQ,QAAQ,GAAGT,QAAQ;AAC7D,EAAA,MAAMP,OAAO,GAAGC,WAAW,IAAIW,KAAK,CAACG,KAAK;AAC1C,EAAA,MAAME,QAAQ,GAAGX,SAAS,KAAKE,SAAS,CAACQ,QAAQ;AAEjD,EAAA,MAAME,OAAO,GAAGC,KAAK,EAAE;AAEvB,EAAA,MAAMC,eAAe,GAAGD,KAAK,EAAE;EAC/B,MAAME,OAAO,GAAGxB,EAAE,KAAK,IAAI,GAAIA,EAAE,IAAIuB,eAAe,GAAIE,SAAS;AAEjE,EAAA,MAAMC,SAAS,GAAGJ,KAAK,EAAE;AACzB,EAAA,MAAMK,aAAa,GAAGL,KAAK,EAAE;AAE7B;;;AAGG;EACH,SAASM,oBAAoBA,GAAA;IAC3B,MAAMC,UAAU,GAAG,EAAE;AACrB,IAAA,IAAIrB,WAAW,EAAE;AACfqB,MAAAA,UAAU,CAACC,IAAI,CAACH,aAAa,CAAC;AAChC,IAAA;AACA,IAAA,IAAIxB,OAAO,EAAE;AACX0B,MAAAA,UAAU,CAACC,IAAI,CAACJ,SAAS,CAAC;AAC5B,IAAA;AACA,IAAA,OAAOG,UAAU,CAACE,MAAM,GAAG,CAAC,GAAGF,UAAU,CAACG,IAAI,CAAC,GAAG,CAAC,GAAGP,SAAS;AACjE,EAAA;EAEA,oBACEQ,GAAA,CAACC,yBAAyB,EAAA;AAACC,IAAAA,KAAK,EAAE;AAAEnC,MAAAA,EAAE,EAAEqB,OAAO;AAAEe,MAAAA,GAAG,EAAEpB;KAAW;IAAAF,QAAA,eAC/DmB,GAAA,CAACI,sBAAsB,EAAA;AAACF,MAAAA,KAAK,EAAEX,OAAQ;MAAAV,QAAA,eACrCmB,GAAA,CAACK,wBAAwB,EAAA;QAACH,KAAK,EAAEP,oBAAoB,EAAG;QAAAd,QAAA,eACtDmB,GAAA,CAACM,oBAAoB,EAAA;AAACJ,UAAAA,KAAK,EAAEf,QAAS;AAAAN,UAAAA,QAAA,eACpC0B,IAAA,CAAA,KAAA,EAAA;AACE3B,YAAAA,SAAS,EAAE4B,IAAI,CACb,6BAA6B,EAC7B;AACE,cAAA,aAAa,EAAEhC,SAAS,KAAKE,SAAS,CAAC+B,QAAQ;AAC/C,cAAA,aAAa,EAAEjC,SAAS,KAAKE,SAAS,CAACgC,OAAO;AAC9C,cAAA,WAAW,EAAEvB,QAAQ;AACrB,cAAA,UAAU,EAAEX,SAAS,KAAKE,SAAS,CAACC;aACrC,EACDC,SAAS,CACT;AAAAC,YAAAA,QAAA,GAEDb,KAAK,IAAI,IAAI,gBACZuC,IAAA,CAAAI,QAAA,EAAA;cAAA9B,QAAA,EAAA,cACEmB,GAAA,CAACY,cAAK,EAAA;AAACT,gBAAAA,GAAG,EAAEpB,QAAS;AAAChB,gBAAAA,EAAE,EAAEqB,OAAQ;AAACyB,gBAAAA,OAAO,EAAEtB,OAAQ;gBAAAV,QAAA,EACjDZ,QAAQ,GAAGD,KAAK,gBAAGgC,GAAA,CAACY,cAAK,CAACE,QAAQ,EAAA;AAAAjC,kBAAAA,QAAA,EAAEb;iBAAsB;AAAC,eACvD,CACP,eAAAgC,GAAA,CAACY,cAAK,CAACG,WAAW,EAAA;AAAChD,gBAAAA,EAAE,EAAE2B,aAAc;AAAAb,gBAAAA,QAAA,EAAEN;eAA+B,CACtE,eAAAyB,GAAA,CAAA,KAAA,EAAA;AAAKpB,gBAAAA,SAAS,EAAC,kBAAkB;AAAAC,gBAAAA,QAAA,EAAEA;AAAQ,eAAM,CACnD;aAAA,CAAG,GAEHA,QACD,EAEAX,OAAO,iBACN8B,GAAA,CAACgB,YAAY,EAAA;AACXxC,cAAAA,SAAS,EAAEA,SAAU;AACrBT,cAAAA,EAAE,EAAE0B,SAAU;AACdwB,cAAAA,UAAU,EAAE7C,gBAAiB;AAC7BQ,cAAAA,SAAS,EAAC,kBAAkB;AAC5BsC,cAAAA,OAAO,EAAE7C,cAAe;AACxB8C,cAAAA,KAAK,EAAC,MAAM;AAAAtC,cAAAA,QAAA,EAEXX;AAAO,aACI,CACf;WACE;SACe;OACE;KACJ;AAC1B,GAA2B,CAAC;AAEhC;;;;"}
+{"version":3,"file":"Field.mjs","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useRef } from 'react';\n\nimport { Sentiment } from '../common';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\n  FieldLabelContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  /** @default true */\n  required?: boolean;\n  /** @deprecated Use `description` prop instead. */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /**\n   * Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  messageIconLabel?: string;\n  /**\n   * If true, shows a loading spinner in place of the message icon of the InlinePrompt\n   * @default false\n   */\n  messageLoading?: boolean;\n  description?: React.ReactNode;\n  /** @deprecated Use `message` and `type={Sentiment.NEGATIVE}` prop instead. */\n  error?: React.ReactNode;\n  /** @default Sentiment.NEUTRAL */\n  sentiment?: InlinePromptProps['sentiment'];\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  required = true,\n  message: propMessage,\n  messageIconLabel,\n  messageLoading,\n  hint,\n  description = hint,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const labelRef = useRef<HTMLLabelElement>(null);\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = propMessage || props.error;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n  const messageId = useId();\n  const descriptionId = useId();\n\n  /**\n   * form control can have multiple messages to describe it,\n   * e.g the description underneath the label and inline alert\n   */\n  function ariaDescribedbyByIds() {\n    const messageIds = [];\n    if (description) {\n      messageIds.push(descriptionId);\n    }\n    if (message) {\n      messageIds.push(messageId);\n    }\n    return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n  }\n\n  return (\n    <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={clsx(\n                'np-field form-group d-block',\n                {\n                  'has-success': sentiment === Sentiment.POSITIVE,\n                  'has-warning': sentiment === Sentiment.WARNING,\n                  'has-error': hasError,\n                  'has-info': sentiment === Sentiment.NEUTRAL,\n                },\n                className,\n              )}\n            >\n              {label != null ? (\n                <>\n                  <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n                    {required ? label : <Label.Optional>{label}</Label.Optional>}\n                  </Label>\n                  <Label.Description id={descriptionId}>{description}</Label.Description>\n                  <div className=\"np-field-control\">{children}</div>\n                </>\n              ) : (\n                children\n              )}\n\n              {message && (\n                <InlinePrompt\n                  sentiment={sentiment}\n                  id={messageId}\n                  mediaLabel={messageIconLabel}\n                  className=\"np-field__prompt\"\n                  loading={messageLoading}\n                  width=\"full\"\n                >\n                  {message}\n                </InlinePrompt>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width"],"mappings":"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"}

package/build/i18n/en.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "selected",
   "neptune.DateLookup.twentyYears": "20 years",
   "neptune.DateLookup.year": "year",
+  "neptune.Expander.collapseAriaLabel": "Collapse",
+  "neptune.Expander.expandAriaLabel": "Expand",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Type a currency / country",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Select currency",
   "neptune.FlowNavigation.back": "back to previous step",

package/build/i18n/en.json.js

@@ -20,6 +20,8 @@ var en = {
 	"neptune.DateLookup.selected": "selected",
 	"neptune.DateLookup.twentyYears": "20 years",
 	"neptune.DateLookup.year": "year",
+	"neptune.Expander.collapseAriaLabel": "Collapse",
+	"neptune.Expander.expandAriaLabel": "Expand",
 	"neptune.ExpressiveMoneyInput.currency.search.placeholder": "Type a currency / country",
 	"neptune.ExpressiveMoneyInput.currency.select.currency": "Select currency",
 	"neptune.FlowNavigation.back": "back to previous step",

package/build/i18n/en.json.js.map

@@ -1 +1 @@
-{"version":3,"file":"en.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"en.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/i18n/en.json.mjs

@@ -16,6 +16,8 @@ var en = {
 	"neptune.DateLookup.selected": "selected",
 	"neptune.DateLookup.twentyYears": "20 years",
 	"neptune.DateLookup.year": "year",
+	"neptune.Expander.collapseAriaLabel": "Collapse",
+	"neptune.Expander.expandAriaLabel": "Expand",
 	"neptune.ExpressiveMoneyInput.currency.search.placeholder": "Type a currency / country",
 	"neptune.ExpressiveMoneyInput.currency.select.currency": "Select currency",
 	"neptune.FlowNavigation.back": "back to previous step",

package/build/i18n/en.json.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"en.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"en.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.js

@@ -54,6 +54,7 @@ var InlineAlert = require('./inlineAlert/InlineAlert.js');
 var InlinePrompt = require('./prompt/InlinePrompt/InlinePrompt.js');
 var ActionPrompt = require('./prompt/ActionPrompt/ActionPrompt.js');
 var InfoPrompt = require('./prompt/InfoPrompt/InfoPrompt.js');
+var CriticalBanner = require('./prompt/CriticalBanner/CriticalBanner.js');
 var InputWithDisplayFormat = require('./inputWithDisplayFormat/InputWithDisplayFormat.js');
 var Input = require('./inputs/Input.js');
 var InputGroup = require('./inputs/InputGroup.js');
@@ -221,6 +222,7 @@ exports.InlineAlert = InlineAlert.default;
 exports.InlinePrompt = InlinePrompt.InlinePrompt;
 exports.ActionPrompt = ActionPrompt.ActionPrompt;
 exports.InfoPrompt = InfoPrompt.InfoPrompt;
+exports.CriticalBanner = CriticalBanner.CriticalBanner;
 exports.InputWithDisplayFormat = InputWithDisplayFormat.default;
 exports.Input = Input.Input;
 exports.InputGroup = InputGroup.InputGroup;

package/build/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/index.mjs

@@ -52,6 +52,7 @@ export { default as InlineAlert } from './inlineAlert/InlineAlert.mjs';
 export { InlinePrompt } from './prompt/InlinePrompt/InlinePrompt.mjs';
 export { ActionPrompt } from './prompt/ActionPrompt/ActionPrompt.mjs';
 export { InfoPrompt } from './prompt/InfoPrompt/InfoPrompt.mjs';
+export { CriticalBanner } from './prompt/CriticalBanner/CriticalBanner.mjs';
 export { default as InputWithDisplayFormat } from './inputWithDisplayFormat/InputWithDisplayFormat.mjs';
 export { Input } from './inputs/Input.mjs';
 export { InputGroup } from './inputs/InputGroup.mjs';

package/build/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/listItem/Prompt/ListItemPrompt.js

@@ -27,17 +27,18 @@ require('../../common/closeButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
 var ListItemContext = require('../ListItemContext.js');
 var InlinePrompt = require('../../prompt/InlinePrompt/InlinePrompt.js');
-require('../../statusIcon/StatusIcon.js');
 require('../../body/Body.js');
 require('../../button/Button.resolver.js');
+require('../../sentimentSurface/SentimentSurface.js');
+require('../../primitives/PrimitiveButton/PrimitiveButton.js');
+require('../../primitives/PrimitiveAnchor/PrimitiveAnchor.js');
 require('../../badge/Badge.js');
 require('@wise/art');
+require('../../statusIcon/StatusIcon.js');
 require('@transferwise/neptune-validation');
 require('../../provider/direction/DirectionProvider.js');
-require('../../sentimentSurface/SentimentSurface.js');
-require('../../primitives/PrimitiveButton/PrimitiveButton.js');
-require('../../primitives/PrimitiveAnchor/PrimitiveAnchor.js');
 require('../../link/Link.messages.js');
+require('../../prompt/common/Expander/Expander.messages.js');
 
 const Prompt = ({
   sentiment: sentiment$1 = sentiment.Sentiment.NEUTRAL,

package/build/listItem/Prompt/ListItemPrompt.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemPrompt.js","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { Sentiment } from '../../common';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport { InlinePrompt, type InlinePromptProps } from '../../prompt';\n\nexport type ListItemPromptProps = Pick<\n  InlinePromptProps,\n  'children' | 'sentiment' | 'mediaLabel' | 'media' | 'loading'\n>;\n\n/**\n * This component allows for rendering an Inline Prompt. <br />\n * In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({\n  sentiment = Sentiment.NEUTRAL,\n  mediaLabel,\n  children,\n  media,\n  loading,\n}: ListItemPromptProps) => {\n  const { ids, props } = useContext<ListItemContextData>(ListItemContext);\n  const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);\n\n  return (\n    <InlinePrompt\n      id={ids.prompt}\n      sentiment={sentiment}\n      media={media}\n      loading={loading}\n      mediaLabel={mediaLabel}\n      muted={isLongLivedMuted}\n      className=\"wds-list-item-prompt\"\n    >\n      {isLongLivedMuted ? props.disabledPromptMessage : children}\n    </InlinePrompt>\n  );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","mediaLabel","children","media","loading","ids","props","useContext","ListItemContext","isLongLivedMuted","disabled","Boolean","disabledPromptMessage","_jsx","InlinePrompt","id","prompt","muted","className","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAMA,MAAM,GAAGA,CAAC;aACrBC,WAAS,GAAGC,mBAAS,CAACC,OAAO;EAC7BC,UAAU;EACVC,QAAQ;EACRC,KAAK;AACLC,EAAAA;AAAO,CACa,KAAI;EACxB,MAAM;IAAEC,GAAG;AAAEC,IAAAA;AAAK,GAAE,GAAGC,gBAAU,CAAsBC,+BAAe,CAAC;EACvE,MAAMC,gBAAgB,GAAGH,KAAK,CAACI,QAAQ,IAAIC,OAAO,CAACL,KAAK,CAACM,qBAAqB,CAAC;EAE/E,oBACEC,cAAA,CAACC,yBAAY,EAAA;IACXC,EAAE,EAAEV,GAAG,CAACW,MAAO;AACflB,IAAAA,SAAS,EAAEA,WAAU;AACrBK,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,OAAO,EAAEA,OAAQ;AACjBH,IAAAA,UAAU,EAAEA,UAAW;AACvBgB,IAAAA,KAAK,EAAER,gBAAiB;AACxBS,IAAAA,SAAS,EAAC,sBAAsB;AAAAhB,IAAAA,QAAA,EAE/BO,gBAAgB,GAAGH,KAAK,CAACM,qBAAqB,GAAGV;AAAQ,GAC9C,CAAC;AAEnB;AAEAL,MAAM,CAACsB,WAAW,GAAG,iBAAiB;;;;"}
+{"version":3,"file":"ListItemPrompt.js","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { Sentiment } from '../../common';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport { InlinePrompt, type InlinePromptProps } from '../../prompt';\n\nexport type ListItemPromptProps = Pick<\n  InlinePromptProps,\n  'children' | 'sentiment' | 'mediaLabel' | 'media' | 'loading'\n>;\n\n/**\n * This component allows for rendering an Inline Prompt. <br />\n * In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({\n  sentiment = Sentiment.NEUTRAL,\n  mediaLabel,\n  children,\n  media,\n  loading,\n}: ListItemPromptProps) => {\n  const { ids, props } = useContext<ListItemContextData>(ListItemContext);\n  const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);\n\n  return (\n    <InlinePrompt\n      id={ids.prompt}\n      sentiment={sentiment}\n      media={media}\n      loading={loading}\n      mediaLabel={mediaLabel}\n      muted={isLongLivedMuted}\n      className=\"wds-list-item-prompt\"\n    >\n      {isLongLivedMuted ? props.disabledPromptMessage : children}\n    </InlinePrompt>\n  );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","mediaLabel","children","media","loading","ids","props","useContext","ListItemContext","isLongLivedMuted","disabled","Boolean","disabledPromptMessage","_jsx","InlinePrompt","id","prompt","muted","className","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAMA,MAAM,GAAGA,CAAC;aACrBC,WAAS,GAAGC,mBAAS,CAACC,OAAO;EAC7BC,UAAU;EACVC,QAAQ;EACRC,KAAK;AACLC,EAAAA;AAAO,CACa,KAAI;EACxB,MAAM;IAAEC,GAAG;AAAEC,IAAAA;AAAK,GAAE,GAAGC,gBAAU,CAAsBC,+BAAe,CAAC;EACvE,MAAMC,gBAAgB,GAAGH,KAAK,CAACI,QAAQ,IAAIC,OAAO,CAACL,KAAK,CAACM,qBAAqB,CAAC;EAE/E,oBACEC,cAAA,CAACC,yBAAY,EAAA;IACXC,EAAE,EAAEV,GAAG,CAACW,MAAO;AACflB,IAAAA,SAAS,EAAEA,WAAU;AACrBK,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,OAAO,EAAEA,OAAQ;AACjBH,IAAAA,UAAU,EAAEA,UAAW;AACvBgB,IAAAA,KAAK,EAAER,gBAAiB;AACxBS,IAAAA,SAAS,EAAC,sBAAsB;AAAAhB,IAAAA,QAAA,EAE/BO,gBAAgB,GAAGH,KAAK,CAACM,qBAAqB,GAAGV;AAAQ,GAC9C,CAAC;AAEnB;AAEAL,MAAM,CAACsB,WAAW,GAAG,iBAAiB;;;;"}

package/build/listItem/Prompt/ListItemPrompt.mjs

@@ -25,17 +25,18 @@ import '../../common/closeButton/CloseButton.messages.mjs';
 import { jsx } from 'react/jsx-runtime';
 import { ListItemContext } from '../ListItemContext.mjs';
 import { InlinePrompt } from '../../prompt/InlinePrompt/InlinePrompt.mjs';
-import '../../statusIcon/StatusIcon.mjs';
 import '../../body/Body.mjs';
 import '../../button/Button.resolver.mjs';
+import '../../sentimentSurface/SentimentSurface.mjs';
+import '../../primitives/PrimitiveButton/PrimitiveButton.mjs';
+import '../../primitives/PrimitiveAnchor/PrimitiveAnchor.mjs';
 import '../../badge/Badge.mjs';
 import '@wise/art';
+import '../../statusIcon/StatusIcon.mjs';
 import '@transferwise/neptune-validation';
 import '../../provider/direction/DirectionProvider.mjs';
-import '../../sentimentSurface/SentimentSurface.mjs';
-import '../../primitives/PrimitiveButton/PrimitiveButton.mjs';
-import '../../primitives/PrimitiveAnchor/PrimitiveAnchor.mjs';
 import '../../link/Link.messages.mjs';
+import '../../prompt/common/Expander/Expander.messages.mjs';
 
 const Prompt = ({
   sentiment = Sentiment.NEUTRAL,

package/build/listItem/Prompt/ListItemPrompt.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemPrompt.mjs","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { Sentiment } from '../../common';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport { InlinePrompt, type InlinePromptProps } from '../../prompt';\n\nexport type ListItemPromptProps = Pick<\n  InlinePromptProps,\n  'children' | 'sentiment' | 'mediaLabel' | 'media' | 'loading'\n>;\n\n/**\n * This component allows for rendering an Inline Prompt. <br />\n * In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({\n  sentiment = Sentiment.NEUTRAL,\n  mediaLabel,\n  children,\n  media,\n  loading,\n}: ListItemPromptProps) => {\n  const { ids, props } = useContext<ListItemContextData>(ListItemContext);\n  const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);\n\n  return (\n    <InlinePrompt\n      id={ids.prompt}\n      sentiment={sentiment}\n      media={media}\n      loading={loading}\n      mediaLabel={mediaLabel}\n      muted={isLongLivedMuted}\n      className=\"wds-list-item-prompt\"\n    >\n      {isLongLivedMuted ? props.disabledPromptMessage : children}\n    </InlinePrompt>\n  );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","mediaLabel","children","media","loading","ids","props","useContext","ListItemContext","isLongLivedMuted","disabled","Boolean","disabledPromptMessage","_jsx","InlinePrompt","id","prompt","muted","className","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAMA,MAAM,GAAGA,CAAC;EACrBC,SAAS,GAAGC,SAAS,CAACC,OAAO;EAC7BC,UAAU;EACVC,QAAQ;EACRC,KAAK;AACLC,EAAAA;AAAO,CACa,KAAI;EACxB,MAAM;IAAEC,GAAG;AAAEC,IAAAA;AAAK,GAAE,GAAGC,UAAU,CAAsBC,eAAe,CAAC;EACvE,MAAMC,gBAAgB,GAAGH,KAAK,CAACI,QAAQ,IAAIC,OAAO,CAACL,KAAK,CAACM,qBAAqB,CAAC;EAE/E,oBACEC,GAAA,CAACC,YAAY,EAAA;IACXC,EAAE,EAAEV,GAAG,CAACW,MAAO;AACflB,IAAAA,SAAS,EAAEA,SAAU;AACrBK,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,OAAO,EAAEA,OAAQ;AACjBH,IAAAA,UAAU,EAAEA,UAAW;AACvBgB,IAAAA,KAAK,EAAER,gBAAiB;AACxBS,IAAAA,SAAS,EAAC,sBAAsB;AAAAhB,IAAAA,QAAA,EAE/BO,gBAAgB,GAAGH,KAAK,CAACM,qBAAqB,GAAGV;AAAQ,GAC9C,CAAC;AAEnB;AAEAL,MAAM,CAACsB,WAAW,GAAG,iBAAiB;;;;"}
+{"version":3,"file":"ListItemPrompt.mjs","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { Sentiment } from '../../common';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport { InlinePrompt, type InlinePromptProps } from '../../prompt';\n\nexport type ListItemPromptProps = Pick<\n  InlinePromptProps,\n  'children' | 'sentiment' | 'mediaLabel' | 'media' | 'loading'\n>;\n\n/**\n * This component allows for rendering an Inline Prompt. <br />\n * In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({\n  sentiment = Sentiment.NEUTRAL,\n  mediaLabel,\n  children,\n  media,\n  loading,\n}: ListItemPromptProps) => {\n  const { ids, props } = useContext<ListItemContextData>(ListItemContext);\n  const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);\n\n  return (\n    <InlinePrompt\n      id={ids.prompt}\n      sentiment={sentiment}\n      media={media}\n      loading={loading}\n      mediaLabel={mediaLabel}\n      muted={isLongLivedMuted}\n      className=\"wds-list-item-prompt\"\n    >\n      {isLongLivedMuted ? props.disabledPromptMessage : children}\n    </InlinePrompt>\n  );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","mediaLabel","children","media","loading","ids","props","useContext","ListItemContext","isLongLivedMuted","disabled","Boolean","disabledPromptMessage","_jsx","InlinePrompt","id","prompt","muted","className","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAMA,MAAM,GAAGA,CAAC;EACrBC,SAAS,GAAGC,SAAS,CAACC,OAAO;EAC7BC,UAAU;EACVC,QAAQ;EACRC,KAAK;AACLC,EAAAA;AAAO,CACa,KAAI;EACxB,MAAM;IAAEC,GAAG;AAAEC,IAAAA;AAAK,GAAE,GAAGC,UAAU,CAAsBC,eAAe,CAAC;EACvE,MAAMC,gBAAgB,GAAGH,KAAK,CAACI,QAAQ,IAAIC,OAAO,CAACL,KAAK,CAACM,qBAAqB,CAAC;EAE/E,oBACEC,GAAA,CAACC,YAAY,EAAA;IACXC,EAAE,EAAEV,GAAG,CAACW,MAAO;AACflB,IAAAA,SAAS,EAAEA,SAAU;AACrBK,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,OAAO,EAAEA,OAAQ;AACjBH,IAAAA,UAAU,EAAEA,UAAW;AACvBgB,IAAAA,KAAK,EAAER,gBAAiB;AACxBS,IAAAA,SAAS,EAAC,sBAAsB;AAAAhB,IAAAA,QAAA,EAE/BO,gBAAgB,GAAGH,KAAK,CAACM,qBAAqB,GAAGV;AAAQ,GAC9C,CAAC;AAEnB;AAEAL,MAAM,CAACsB,WAAW,GAAG,iBAAiB;;;;"}

package/build/main.css

@@ -32176,6 +32176,91 @@ html:not([dir="rtl"]) .np-navigation-option {
   padding: 0;
 }
 
+.wds-action-prompt {
+  --Prompt-padding: var(--size-16);
+  --Prompt-actions-gap: var(--size-8);
+  --Prompt-gap: var(--size-10) var(--size-16);
+  --Prompt-border-radius: var(--radius-large);
+}
+
+.wds-action-prompt--media-image {
+  width: 48px;
+  width: var(--size-48);
+  height: 48px;
+  height: var(--size-48);
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
+@media (max-width: 767px) {
+  .wds-action-prompt--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
+    flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
+    min-width: -moz-fit-content;
+    min-width: fit-content;
+  }
+}
+
+.wds-action-prompt__content {
+  max-width: calc(48px * 10);
+  max-width: calc(var(--size-48) * 10);
+}
+
+.wds-critical-banner {
+  --Prompt-padding: var(--size-16);
+  --Prompt-actions-gap: var(--size-8);
+  --Prompt-gap: var(--size-10) var(--size-16);
+  --Prompt-border-radius: 0;
+}
+
+.wds-critical-banner--media-image {
+  width: 48px;
+  width: var(--size-48);
+  height: 48px;
+  height: var(--size-48);
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
+@media (max-width: 767px) {
+  .wds-critical-banner--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
+    flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
+    min-width: -moz-fit-content;
+    min-width: fit-content;
+  }
+}
+
+.wds-critical-banner__description--collapsed {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.wds-critical-banner .wds-prompt__content-wrapper {
+  grid-template-columns: auto 1fr auto;
+  align-items: flex-start;
+}
+
+.wds-critical-banner__text-wrapper {
+  min-width: 0;
+}
+
+@media (max-width: 767px) {
+  .wds-critical-banner .wds-prompt__actions-wrapper {
+    grid-column: span 3;
+  }
+}
+
+.wds-expander-toggle {
+  align-self: flex-start;
+  flex-shrink: 0;
+  transition: transform 0.2s ease-in-out;
+}
+
+.wds-expander-toggle--collapsed {
+  transform: rotate(180deg);
+}
+
 .wds-radio-group .np-radio:last-child label {
   margin-bottom: 0;
 }
@@ -34600,32 +34685,3 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-list-item__action {
   flex-shrink: 0;
 }
-
-.wds-action-prompt {
-  --Prompt-padding: var(--size-16);
-  --Prompt-actions-gap: var(--size-8);
-  --Prompt-gap: var(--size-10) var(--size-16);
-  --Prompt-border-radius: var(--radius-large);
-}
-
-.wds-action-prompt--media-image {
-  width: 48px;
-  width: var(--size-48);
-  height: 48px;
-  height: var(--size-48);
-  -o-object-fit: contain;
-     object-fit: contain;
-}
-
-@media (max-width: 767px) {
-  .wds-action-prompt--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
-    flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
-    min-width: -moz-fit-content;
-    min-width: fit-content;
-  }
-}
-
-.wds-action-prompt__content {
-  max-width: calc(48px * 10);
-  max-width: calc(var(--size-48) * 10);
-}