@transferwise/components 46.155.0 → 46.156.0

package/build/ExpressiveMoneyInput/AmountInput/AmountInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AmountInput.mjs","sources":["../../../src/ExpressiveMoneyInput/AmountInput/AmountInput.tsx"],"sourcesContent":["import { formatAmount } from '@transferwise/formatting';\nimport { clsx } from 'clsx';\nimport { AnimatePresence } from 'framer-motion';\nimport { type ChangeEvent, type KeyboardEvent, useEffect, useMemo, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\nimport { AnimatedNumber } from '../AnimatedNumber/AnimatedNumber';\nimport { useFocus } from '../hooks/useFocus';\nimport { useInputStyle } from '../hooks/useInputStyle';\nimport {\n  getDecimalCount,\n  getDecimalSeparator,\n  getEnteredDecimalsCount,\n  getFormattedString,\n  getGroupSeparator,\n  getUnformattedNumber,\n  isAllowedInputKey,\n  isInputPossiblyOverflowing,\n} from './utils';\n\ntype Props = {\n  id: string;\n  describedById?: string;\n  amount?: number | null;\n  currency: string;\n  autoFocus?: boolean;\n  onChange: (amount: number | null) => void;\n  onFocusChange?: (focused: boolean) => void;\n} & Pick<ExpressiveMoneyInputProps, 'loading'>;\n\nexport const AmountInput = ({\n  id,\n  describedById,\n  amount,\n  currency,\n  autoFocus,\n  onChange,\n  onFocusChange,\n  loading,\n}: Props) => {\n  const intl = useIntl();\n  const { focus, setFocus, visualFocus, setVisualFocus } = useFocus();\n\n  const [value, setValue] = useState<string>(() =>\n    amount\n      ? getFormattedString({\n          value: amount,\n          currency,\n          locale: intl.locale,\n        })\n      : '',\n  );\n  const prevAmountRef = useRef<string | number | null | undefined>(amount);\n  const numericValue = useMemo(() => {\n    return getUnformattedNumber({\n      value,\n      currency,\n      locale: intl.locale,\n    });\n  }, [value, currency, intl.locale]);\n\n  const valueWithFullDecimals = useMemo(() => {\n    return getFormattedString({\n      value: numericValue ?? 0,\n      currency,\n      locale: intl.locale,\n      alwaysShowDecimals: true,\n    });\n  }, [numericValue, currency, intl.locale]);\n\n  const ref = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (autoFocus) {\n      ref.current?.focus();\n    }\n  }, []);\n\n  const placeholder = getPlaceholder(currency, intl.locale);\n  const groupSeparator = getGroupSeparator(currency, intl.locale);\n  const decimalSeparator = getDecimalSeparator(currency, intl.locale);\n  const maxDecimalCount = getDecimalCount(currency, intl.locale);\n\n  const decimalPart = getDecimalPart(value, decimalSeparator);\n  const decimalMode = decimalSeparator && value.includes(decimalSeparator);\n\n  useEffect(() => {\n    if (prevAmountRef.current !== amount) {\n      prevAmountRef.current = amount;\n\n      // Only update the displayed value if not focused (preserve user input when focused)\n      if (!focus) {\n        // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing external prop to internal state when unfocused\n        setValue(\n          amount\n            ? getFormattedString({\n                value: amount,\n                currency,\n                locale: intl.locale,\n              })\n            : '',\n        );\n      }\n    }\n  }, [amount, focus, currency, intl.locale]);\n\n  useEffect(() => {\n    onFocusChange?.(visualFocus);\n  }, [onFocusChange, visualFocus]);\n\n  const shouldReformatAfterUserInput = (newValue: string) => {\n    // don't reformat if formatting would wipe out user's input\n    if (reformatValue(newValue) === '') {\n      return false;\n    }\n\n    const endsWithDecimalSeparator = decimalSeparator && newValue.endsWith(decimalSeparator);\n    const endsWithGroupSeparator = groupSeparator && newValue.endsWith(groupSeparator);\n\n    // if the user has entered a seperator to the end, formatting would delete it\n    if (endsWithDecimalSeparator || endsWithGroupSeparator) {\n      return false;\n    }\n\n    const containsDecimalSeparator = decimalSeparator && newValue.includes(decimalSeparator);\n\n    if (containsDecimalSeparator) {\n      const enteredDecimalsCount = getEnteredDecimalsCount(newValue, decimalSeparator);\n      // don't reformat until user has entered all the allowed decimals\n      // for example, we don't want 1.1 to be reformatted to 1.10 immediately\n      if (enteredDecimalsCount < maxDecimalCount) {\n        return false;\n      }\n    }\n\n    return true;\n  };\n\n  const reformatValue = (newValue: string) => {\n    const unformattedValue = getUnformattedNumber({\n      value: newValue,\n      currency,\n      locale: intl.locale,\n    });\n    const formattedValue = unformattedValue\n      ? getFormattedString({\n          value: unformattedValue,\n          currency,\n          locale: intl.locale,\n        })\n      : '';\n    return formattedValue;\n  };\n\n  const handleChange = (newValue: string) => {\n    const oldCursorPosition = ref.current?.selectionStart ?? 0;\n\n    const newFormattedString = shouldReformatAfterUserInput(newValue)\n      ? reformatValue(newValue)\n      : newValue;\n    setValue(newFormattedString);\n\n    const newNumber = getUnformattedNumber({\n      value: newFormattedString,\n      currency,\n      locale: intl.locale,\n    });\n\n    if (newNumber !== numericValue) {\n      if (numericValue || newNumber) {\n        onChange(newNumber);\n      }\n    }\n\n    const newCursorPosition = oldCursorPosition + (newFormattedString.length - newValue.length);\n    requestAnimationFrame(() => {\n      ref?.current?.setSelectionRange(newCursorPosition, newCursorPosition);\n    });\n  };\n\n  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n    e.preventDefault();\n\n    const clipboardData = e.clipboardData?.getData('text/plain');\n    if (!clipboardData) {\n      return;\n    }\n\n    // need to sanitise the pasted value otherwise other validation logic will ignore the input entirely\n    const sanitisedValue = reformatValue(clipboardData);\n\n    handleChange(sanitisedValue);\n  };\n\n  const handleBlur = () => {\n    setFocus(false);\n    setValue(reformatValue(value));\n  };\n\n  const handleBackspace = (e: KeyboardEvent<HTMLInputElement>) => {\n    const input = e.target as HTMLInputElement;\n    // using the updated selection range after the backspace key has been processed, instead of the current selection range in state\n    const { value: currentValue, selectionStart, selectionEnd } = input;\n\n    if (selectionStart === selectionEnd && selectionStart && selectionStart > 0) {\n      const charBeforeCursor = currentValue[selectionStart - 1];\n\n      // if the user deletes a thousands separator, remove the digit before it as well\n      if (charBeforeCursor === groupSeparator) {\n        e.preventDefault();\n        const beforeCursor = currentValue.slice(0, selectionStart - 2);\n        const afterCursor = currentValue.slice(selectionStart);\n        const newValue = `${beforeCursor}${afterCursor}`;\n        input.setSelectionRange(beforeCursor.length, beforeCursor.length);\n        handleChange(newValue);\n      }\n    }\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    setFocus(true);\n    if (!isAllowedInputKey(e)) {\n      e.preventDefault();\n    }\n\n    if (e.key === 'Backspace') {\n      handleBackspace(e);\n    }\n  };\n\n  const isAllowedInput = (e: ChangeEvent<HTMLInputElement>) => {\n    const hasMultipleDecimalSeparators =\n      decimalSeparator && e.target.value.split(decimalSeparator).length > 2;\n    if (hasMultipleDecimalSeparators) {\n      return false;\n    }\n\n    const newNumericValue = getUnformattedNumber({\n      value: e.target.value,\n      currency,\n      locale: intl.locale,\n    });\n    const maxLength = Number.MAX_SAFE_INTEGER.toString().length;\n    if (String(newNumericValue).length > maxLength) {\n      return false;\n    }\n\n    return true;\n  };\n\n  const addonContent = useMemo((): string | null | undefined => {\n    // because we're using a separate \"addon\" element for the placeholder decimals, there is a possibility that the input itself will become scrollable\n    // and the decimals will appear on top of the input. Safest thing to do is to just hide the addon if there is not enough room\n    // eslint-disable-next-line react-hooks/refs -- Reading layout dimensions for overflow detection\n    if (isInputPossiblyOverflowing({ ref, value })) {\n      return null;\n    }\n    if (!decimalSeparator || !value) {\n      return null;\n    }\n\n    // if the user has typed a decimal separator, show the full decimal part as a placeholder\n    // this returns a string even if there is no content, typing should replace the placeholder immediately without animation\n    // otherwise there is an ugly animation when going from 1.23 to 1.2 due to AnimatePresence\n    if (focus && decimalMode) {\n      // reuse getDecimalPart\n      const fullDecimalPart = getDecimalPart(valueWithFullDecimals, decimalSeparator);\n      // show only the characters that are not already displayed by the input\n      return fullDecimalPart?.slice(decimalPart?.length);\n    }\n\n    // in unfocused state, always show the full decimal part unless the user has already entered decimals\n    if (!focus && !decimalMode) {\n      const [_, decimalPlaceholder] = placeholder.split(decimalSeparator);\n      return decimalSeparator + decimalPlaceholder;\n    }\n\n    return null;\n  }, [\n    decimalMode,\n    decimalPart?.length,\n    decimalSeparator,\n    focus,\n    placeholder,\n    value,\n    valueWithFullDecimals,\n  ]);\n\n  const style = useInputStyle({\n    // whenever decimals are shown, we need to account for the full decimal part for the font size calculation\n    value: addonContent ? valueWithFullDecimals : value,\n    focus: visualFocus,\n    inputElement: ref,\n    loading,\n  });\n\n  return (\n    <div className=\"wds-amount-input-container\">\n      <div\n        className={clsx('wds-amount-input-input-container', 'np-text-display-large--forced')}\n        style={style}\n      >\n        <input\n          ref={ref}\n          className=\"wds-amount-input-input\"\n          id={id}\n          autoComplete=\"off\"\n          inputMode=\"decimal\"\n          value={value}\n          type=\"text\"\n          placeholder={placeholder}\n          aria-describedby={describedById}\n          /* without this, the input tries to keep an aspect ratio and doesn't respect CSS width rules */\n          size={1}\n          onChange={(e) => {\n            if (isAllowedInput(e)) {\n              handleChange(e.target.value);\n            }\n          }}\n          onBlurCapture={() => handleBlur()}\n          onPaste={(e) => handlePaste(e)}\n          onFocus={() => {\n            setFocus(true);\n          }}\n          onBlur={() => {\n            setTimeout(() => setVisualFocus(false), 30);\n          }}\n          onKeyDown={(e) => handleKeyDown(e)}\n        />\n        <AnimatePresence initial={false}>\n          {addonContent !== null && (\n            <AnimatedNumber\n              className={clsx(\n                'wds-amount-input-placeholder',\n                visualFocus && 'wds-amount-input-placeholder-focus',\n              )}\n              onClick={() => ref.current?.focus()}\n            >\n              {addonContent}\n            </AnimatedNumber>\n          )}\n        </AnimatePresence>\n      </div>\n    </div>\n  );\n};\n\nconst getPlaceholder = (currency: string, locale: string) => {\n  return formatAmount(0, currency, locale, { alwaysShowDecimals: true });\n};\n\nconst getDecimalPart = (value: string, decimalSeparator: string | null) => {\n  if (!value || !decimalSeparator) {\n    return undefined;\n  }\n\n  const [_, decimalPart] = value.split(decimalSeparator);\n  return decimalPart ?? undefined;\n};\n"],"names":["AmountInput","id","describedById","amount","currency","autoFocus","onChange","onFocusChange","loading","intl","useIntl","focus","setFocus","visualFocus","setVisualFocus","useFocus","value","setValue","useState","getFormattedString","locale","prevAmountRef","useRef","numericValue","useMemo","getUnformattedNumber","valueWithFullDecimals","alwaysShowDecimals","ref","useEffect","current","placeholder","getPlaceholder","groupSeparator","getGroupSeparator","decimalSeparator","getDecimalSeparator","maxDecimalCount","getDecimalCount","decimalPart","getDecimalPart","decimalMode","includes","shouldReformatAfterUserInput","newValue","reformatValue","endsWithDecimalSeparator","endsWith","endsWithGroupSeparator","containsDecimalSeparator","enteredDecimalsCount","getEnteredDecimalsCount","unformattedValue","formattedValue","handleChange","oldCursorPosition","selectionStart","newFormattedString","newNumber","newCursorPosition","length","requestAnimationFrame","setSelectionRange","handlePaste","e","preventDefault","clipboardData","getData","sanitisedValue","handleBlur","handleBackspace","input","target","currentValue","selectionEnd","charBeforeCursor","beforeCursor","slice","afterCursor","handleKeyDown","isAllowedInputKey","key","isAllowedInput","hasMultipleDecimalSeparators","split","newNumericValue","maxLength","Number","MAX_SAFE_INTEGER","toString","String","addonContent","isInputPossiblyOverflowing","fullDecimalPart","_","decimalPlaceholder","style","useInputStyle","inputElement","_jsx","className","children","_jsxs","clsx","autoComplete","inputMode","type","size","onBlurCapture","onPaste","onFocus","onBlur","setTimeout","onKeyDown","AnimatePresence","initial","AnimatedNumber","onClick","formatAmount","undefined"],"mappings":";;;;;;;;;;;AA+BO,MAAMA,WAAW,GAAGA,CAAC;EAC1BC,EAAE;EACFC,aAAa;EACbC,MAAM;EACNC,QAAQ;EACRC,SAAS;EACTC,QAAQ;EACRC,aAAa;AACbC,EAAAA;AAAO,CACD,KAAI;AACV,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;EACtB,MAAM;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,WAAW;AAAEC,IAAAA;GAAgB,GAAGC,QAAQ,EAAE;AAEnE,EAAA,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGC,QAAQ,CAAS,MACzCf,MAAM,GACFgB,kBAAkB,CAAC;AACjBH,IAAAA,KAAK,EAAEb,MAAM;IACbC,QAAQ;IACRgB,MAAM,EAAEX,IAAI,CAACW;GACd,CAAC,GACF,EAAE,CACP;AACD,EAAA,MAAMC,aAAa,GAAGC,MAAM,CAAqCnB,MAAM,CAAC;AACxE,EAAA,MAAMoB,YAAY,GAAGC,OAAO,CAAC,MAAK;AAChC,IAAA,OAAOC,oBAAoB,CAAC;MAC1BT,KAAK;MACLZ,QAAQ;MACRgB,MAAM,EAAEX,IAAI,CAACW;AACd,KAAA,CAAC;EACJ,CAAC,EAAE,CAACJ,KAAK,EAAEZ,QAAQ,EAAEK,IAAI,CAACW,MAAM,CAAC,CAAC;AAElC,EAAA,MAAMM,qBAAqB,GAAGF,OAAO,CAAC,MAAK;AACzC,IAAA,OAAOL,kBAAkB,CAAC;MACxBH,KAAK,EAAEO,YAAY,IAAI,CAAC;MACxBnB,QAAQ;MACRgB,MAAM,EAAEX,IAAI,CAACW,MAAM;AACnBO,MAAAA,kBAAkB,EAAE;AACrB,KAAA,CAAC;EACJ,CAAC,EAAE,CAACJ,YAAY,EAAEnB,QAAQ,EAAEK,IAAI,CAACW,MAAM,CAAC,CAAC;AAEzC,EAAA,MAAMQ,GAAG,GAAGN,MAAM,CAAmB,IAAI,CAAC;AAE1CO,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIxB,SAAS,EAAE;AACbuB,MAAAA,GAAG,CAACE,OAAO,EAAEnB,KAAK,EAAE;AACtB,IAAA;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMoB,WAAW,GAAGC,cAAc,CAAC5B,QAAQ,EAAEK,IAAI,CAACW,MAAM,CAAC;EACzD,MAAMa,cAAc,GAAGC,iBAAiB,CAAC9B,QAAQ,EAAEK,IAAI,CAACW,MAAM,CAAC;EAC/D,MAAMe,gBAAgB,GAAGC,mBAAmB,CAAChC,QAAQ,EAAEK,IAAI,CAACW,MAAM,CAAC;EACnE,MAAMiB,eAAe,GAAGC,eAAe,CAAClC,QAAQ,EAAEK,IAAI,CAACW,MAAM,CAAC;AAE9D,EAAA,MAAMmB,WAAW,GAAGC,cAAc,CAACxB,KAAK,EAAEmB,gBAAgB,CAAC;EAC3D,MAAMM,WAAW,GAAGN,gBAAgB,IAAInB,KAAK,CAAC0B,QAAQ,CAACP,gBAAgB,CAAC;AAExEN,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIR,aAAa,CAACS,OAAO,KAAK3B,MAAM,EAAE;MACpCkB,aAAa,CAACS,OAAO,GAAG3B,MAAM;AAE9B;MACA,IAAI,CAACQ,KAAK,EAAE;AACV;AACAM,QAAAA,QAAQ,CACNd,MAAM,GACFgB,kBAAkB,CAAC;AACjBH,UAAAA,KAAK,EAAEb,MAAM;UACbC,QAAQ;UACRgB,MAAM,EAAEX,IAAI,CAACW;SACd,CAAC,GACF,EAAE,CACP;AACH,MAAA;AACF,IAAA;AACF,EAAA,CAAC,EAAE,CAACjB,MAAM,EAAEQ,KAAK,EAAEP,QAAQ,EAAEK,IAAI,CAACW,MAAM,CAAC,CAAC;AAE1CS,EAAAA,SAAS,CAAC,MAAK;IACbtB,aAAa,GAAGM,WAAW,CAAC;AAC9B,EAAA,CAAC,EAAE,CAACN,aAAa,EAAEM,WAAW,CAAC,CAAC;EAEhC,MAAM8B,4BAA4B,GAAIC,QAAgB,IAAI;AACxD;AACA,IAAA,IAAIC,aAAa,CAACD,QAAQ,CAAC,KAAK,EAAE,EAAE;AAClC,MAAA,OAAO,KAAK;AACd,IAAA;IAEA,MAAME,wBAAwB,GAAGX,gBAAgB,IAAIS,QAAQ,CAACG,QAAQ,CAACZ,gBAAgB,CAAC;IACxF,MAAMa,sBAAsB,GAAGf,cAAc,IAAIW,QAAQ,CAACG,QAAQ,CAACd,cAAc,CAAC;AAElF;IACA,IAAIa,wBAAwB,IAAIE,sBAAsB,EAAE;AACtD,MAAA,OAAO,KAAK;AACd,IAAA;IAEA,MAAMC,wBAAwB,GAAGd,gBAAgB,IAAIS,QAAQ,CAACF,QAAQ,CAACP,gBAAgB,CAAC;AAExF,IAAA,IAAIc,wBAAwB,EAAE;AAC5B,MAAA,MAAMC,oBAAoB,GAAGC,uBAAuB,CAACP,QAAQ,EAAET,gBAAgB,CAAC;AAChF;AACA;MACA,IAAIe,oBAAoB,GAAGb,eAAe,EAAE;AAC1C,QAAA,OAAO,KAAK;AACd,MAAA;AACF,IAAA;AAEA,IAAA,OAAO,IAAI;EACb,CAAC;EAED,MAAMQ,aAAa,GAAID,QAAgB,IAAI;IACzC,MAAMQ,gBAAgB,GAAG3B,oBAAoB,CAAC;AAC5CT,MAAAA,KAAK,EAAE4B,QAAQ;MACfxC,QAAQ;MACRgB,MAAM,EAAEX,IAAI,CAACW;AACd,KAAA,CAAC;AACF,IAAA,MAAMiC,cAAc,GAAGD,gBAAgB,GACnCjC,kBAAkB,CAAC;AACjBH,MAAAA,KAAK,EAAEoC,gBAAgB;MACvBhD,QAAQ;MACRgB,MAAM,EAAEX,IAAI,CAACW;KACd,CAAC,GACF,EAAE;AACN,IAAA,OAAOiC,cAAc;EACvB,CAAC;EAED,MAAMC,YAAY,GAAIV,QAAgB,IAAI;IACxC,MAAMW,iBAAiB,GAAG3B,GAAG,CAACE,OAAO,EAAE0B,cAAc,IAAI,CAAC;AAE1D,IAAA,MAAMC,kBAAkB,GAAGd,4BAA4B,CAACC,QAAQ,CAAC,GAC7DC,aAAa,CAACD,QAAQ,CAAC,GACvBA,QAAQ;IACZ3B,QAAQ,CAACwC,kBAAkB,CAAC;IAE5B,MAAMC,SAAS,GAAGjC,oBAAoB,CAAC;AACrCT,MAAAA,KAAK,EAAEyC,kBAAkB;MACzBrD,QAAQ;MACRgB,MAAM,EAAEX,IAAI,CAACW;AACd,KAAA,CAAC;IAEF,IAAIsC,SAAS,KAAKnC,YAAY,EAAE;MAC9B,IAAIA,YAAY,IAAImC,SAAS,EAAE;QAC7BpD,QAAQ,CAACoD,SAAS,CAAC;AACrB,MAAA;AACF,IAAA;IAEA,MAAMC,iBAAiB,GAAGJ,iBAAiB,IAAIE,kBAAkB,CAACG,MAAM,GAAGhB,QAAQ,CAACgB,MAAM,CAAC;AAC3FC,IAAAA,qBAAqB,CAAC,MAAK;MACzBjC,GAAG,EAAEE,OAAO,EAAEgC,iBAAiB,CAACH,iBAAiB,EAAEA,iBAAiB,CAAC;AACvE,IAAA,CAAC,CAAC;EACJ,CAAC;EAED,MAAMI,WAAW,GAAIC,CAAyC,IAAI;IAChEA,CAAC,CAACC,cAAc,EAAE;IAElB,MAAMC,aAAa,GAAGF,CAAC,CAACE,aAAa,EAAEC,OAAO,CAAC,YAAY,CAAC;IAC5D,IAAI,CAACD,aAAa,EAAE;AAClB,MAAA;AACF,IAAA;AAEA;AACA,IAAA,MAAME,cAAc,GAAGvB,aAAa,CAACqB,aAAa,CAAC;IAEnDZ,YAAY,CAACc,cAAc,CAAC;EAC9B,CAAC;EAED,MAAMC,UAAU,GAAGA,MAAK;IACtBzD,QAAQ,CAAC,KAAK,CAAC;AACfK,IAAAA,QAAQ,CAAC4B,aAAa,CAAC7B,KAAK,CAAC,CAAC;EAChC,CAAC;EAED,MAAMsD,eAAe,GAAIN,CAAkC,IAAI;AAC7D,IAAA,MAAMO,KAAK,GAAGP,CAAC,CAACQ,MAA0B;AAC1C;IACA,MAAM;AAAExD,MAAAA,KAAK,EAAEyD,YAAY;MAAEjB,cAAc;AAAEkB,MAAAA;AAAY,KAAE,GAAGH,KAAK;IAEnE,IAAIf,cAAc,KAAKkB,YAAY,IAAIlB,cAAc,IAAIA,cAAc,GAAG,CAAC,EAAE;AAC3E,MAAA,MAAMmB,gBAAgB,GAAGF,YAAY,CAACjB,cAAc,GAAG,CAAC,CAAC;AAEzD;MACA,IAAImB,gBAAgB,KAAK1C,cAAc,EAAE;QACvC+B,CAAC,CAACC,cAAc,EAAE;QAClB,MAAMW,YAAY,GAAGH,YAAY,CAACI,KAAK,CAAC,CAAC,EAAErB,cAAc,GAAG,CAAC,CAAC;AAC9D,QAAA,MAAMsB,WAAW,GAAGL,YAAY,CAACI,KAAK,CAACrB,cAAc,CAAC;AACtD,QAAA,MAAMZ,QAAQ,GAAG,CAAA,EAAGgC,YAAY,CAAA,EAAGE,WAAW,CAAA,CAAE;QAChDP,KAAK,CAACT,iBAAiB,CAACc,YAAY,CAAChB,MAAM,EAAEgB,YAAY,CAAChB,MAAM,CAAC;QACjEN,YAAY,CAACV,QAAQ,CAAC;AACxB,MAAA;AACF,IAAA;EACF,CAAC;EAED,MAAMmC,aAAa,GAAIf,CAAkC,IAAI;IAC3DpD,QAAQ,CAAC,IAAI,CAAC;AACd,IAAA,IAAI,CAACoE,iBAAiB,CAAChB,CAAC,CAAC,EAAE;MACzBA,CAAC,CAACC,cAAc,EAAE;AACpB,IAAA;AAEA,IAAA,IAAID,CAAC,CAACiB,GAAG,KAAK,WAAW,EAAE;MACzBX,eAAe,CAACN,CAAC,CAAC;AACpB,IAAA;EACF,CAAC;EAED,MAAMkB,cAAc,GAAIlB,CAAgC,IAAI;AAC1D,IAAA,MAAMmB,4BAA4B,GAChChD,gBAAgB,IAAI6B,CAAC,CAACQ,MAAM,CAACxD,KAAK,CAACoE,KAAK,CAACjD,gBAAgB,CAAC,CAACyB,MAAM,GAAG,CAAC;AACvE,IAAA,IAAIuB,4BAA4B,EAAE;AAChC,MAAA,OAAO,KAAK;AACd,IAAA;IAEA,MAAME,eAAe,GAAG5D,oBAAoB,CAAC;AAC3CT,MAAAA,KAAK,EAAEgD,CAAC,CAACQ,MAAM,CAACxD,KAAK;MACrBZ,QAAQ;MACRgB,MAAM,EAAEX,IAAI,CAACW;AACd,KAAA,CAAC;IACF,MAAMkE,SAAS,GAAGC,MAAM,CAACC,gBAAgB,CAACC,QAAQ,EAAE,CAAC7B,MAAM;IAC3D,IAAI8B,MAAM,CAACL,eAAe,CAAC,CAACzB,MAAM,GAAG0B,SAAS,EAAE;AAC9C,MAAA,OAAO,KAAK;AACd,IAAA;AAEA,IAAA,OAAO,IAAI;EACb,CAAC;AAED,EAAA,MAAMK,YAAY,GAAGnE,OAAO,CAAC,MAAgC;AAC3D;AACA;AACA;AACA,IAAA,IAAIoE,0BAA0B,CAAC;MAAEhE,GAAG;AAAEZ,MAAAA;AAAK,KAAE,CAAC,EAAE;AAC9C,MAAA,OAAO,IAAI;AACb,IAAA;AACA,IAAA,IAAI,CAACmB,gBAAgB,IAAI,CAACnB,KAAK,EAAE;AAC/B,MAAA,OAAO,IAAI;AACb,IAAA;AAEA;AACA;AACA;IACA,IAAIL,KAAK,IAAI8B,WAAW,EAAE;AACxB;AACA,MAAA,MAAMoD,eAAe,GAAGrD,cAAc,CAACd,qBAAqB,EAAES,gBAAgB,CAAC;AAC/E;AACA,MAAA,OAAO0D,eAAe,EAAEhB,KAAK,CAACtC,WAAW,EAAEqB,MAAM,CAAC;AACpD,IAAA;AAEA;AACA,IAAA,IAAI,CAACjD,KAAK,IAAI,CAAC8B,WAAW,EAAE;MAC1B,MAAM,CAACqD,CAAC,EAAEC,kBAAkB,CAAC,GAAGhE,WAAW,CAACqD,KAAK,CAACjD,gBAAgB,CAAC;MACnE,OAAOA,gBAAgB,GAAG4D,kBAAkB;AAC9C,IAAA;AAEA,IAAA,OAAO,IAAI;AACb,EAAA,CAAC,EAAE,CACDtD,WAAW,EACXF,WAAW,EAAEqB,MAAM,EACnBzB,gBAAgB,EAChBxB,KAAK,EACLoB,WAAW,EACXf,KAAK,EACLU,qBAAqB,CACtB,CAAC;EAEF,MAAMsE,KAAK,GAAGC,aAAa,CAAC;AAC1B;AACAjF,IAAAA,KAAK,EAAE2E,YAAY,GAAGjE,qBAAqB,GAAGV,KAAK;AACnDL,IAAAA,KAAK,EAAEE,WAAW;AAClBqF,IAAAA,YAAY,EAAEtE,GAAG;AACjBpB,IAAAA;AACD,GAAA,CAAC;AAEF,EAAA,oBACE2F,GAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,4BAA4B;AAAAC,IAAAA,QAAA,eACzCC,IAAA,CAAA,KAAA,EAAA;AACEF,MAAAA,SAAS,EAAEG,IAAI,CAAC,kCAAkC,EAAE,+BAA+B,CAAE;AACrFP,MAAAA,KAAK,EAAEA,KAAM;AAAAK,MAAAA,QAAA,gBAEbF,GAAA,CAAA,OAAA,EAAA;AACEvE,QAAAA,GAAG,EAAEA,GAAI;AACTwE,QAAAA,SAAS,EAAC,wBAAwB;AAClCnG,QAAAA,EAAE,EAAEA,EAAG;AACPuG,QAAAA,YAAY,EAAC,KAAK;AAClBC,QAAAA,SAAS,EAAC,SAAS;AACnBzF,QAAAA,KAAK,EAAEA,KAAM;AACb0F,QAAAA,IAAI,EAAC,MAAM;AACX3E,QAAAA,WAAW,EAAEA,WAAY;QACzB,kBAAA,EAAkB7B;AAClB;AACAyG,QAAAA,IAAI,EAAE,CAAE;QACRrG,QAAQ,EAAG0D,CAAC,IAAI;AACd,UAAA,IAAIkB,cAAc,CAAClB,CAAC,CAAC,EAAE;AACrBV,YAAAA,YAAY,CAACU,CAAC,CAACQ,MAAM,CAACxD,KAAK,CAAC;AAC9B,UAAA;QACF,CAAE;AACF4F,QAAAA,aAAa,EAAEA,MAAMvC,UAAU,EAAG;AAClCwC,QAAAA,OAAO,EAAG7C,CAAC,IAAKD,WAAW,CAACC,CAAC,CAAE;QAC/B8C,OAAO,EAAEA,MAAK;UACZlG,QAAQ,CAAC,IAAI,CAAC;QAChB,CAAE;QACFmG,MAAM,EAAEA,MAAK;UACXC,UAAU,CAAC,MAAMlG,cAAc,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC;QAC7C,CAAE;AACFmG,QAAAA,SAAS,EAAGjD,CAAC,IAAKe,aAAa,CAACf,CAAC;AAAE,OAAA,CAErC,eAAAmC,GAAA,CAACe,eAAe,EAAA;AAACC,QAAAA,OAAO,EAAE,KAAM;AAAAd,QAAAA,QAAA,EAC7BV,YAAY,KAAK,IAAI,iBACpBQ,GAAA,CAACiB,cAAc,EAAA;UACbhB,SAAS,EAAEG,IAAI,CACb,8BAA8B,EAC9B1F,WAAW,IAAI,oCAAoC,CACnD;UACFwG,OAAO,EAAEA,MAAMzF,GAAG,CAACE,OAAO,EAAEnB,KAAK,EAAG;AAAA0F,UAAAA,QAAA,EAEnCV;SACa;AACjB,OACc,CACnB;KAAK;AACP,GAAK,CAAC;AAEV;AAEA,MAAM3D,cAAc,GAAGA,CAAC5B,QAAgB,EAAEgB,MAAc,KAAI;AAC1D,EAAA,OAAOkG,YAAY,CAAC,CAAC,EAAElH,QAAQ,EAAEgB,MAAM,EAAE;AAAEO,IAAAA,kBAAkB,EAAE;AAAI,GAAE,CAAC;AACxE,CAAC;AAED,MAAMa,cAAc,GAAGA,CAACxB,KAAa,EAAEmB,gBAA+B,KAAI;AACxE,EAAA,IAAI,CAACnB,KAAK,IAAI,CAACmB,gBAAgB,EAAE;AAC/B,IAAA,OAAOoF,SAAS;AAClB,EAAA;EAEA,MAAM,CAACzB,CAAC,EAAEvD,WAAW,CAAC,GAAGvB,KAAK,CAACoE,KAAK,CAACjD,gBAAgB,CAAC;EACtD,OAAOI,WAAW,IAAIgF,SAAS;AACjC,CAAC;;;;"}
+{"version":3,"file":"AmountInput.mjs","sources":["../../../src/ExpressiveMoneyInput/AmountInput/AmountInput.tsx"],"sourcesContent":["import { formatAmount } from '@transferwise/formatting';\nimport { clsx } from 'clsx';\nimport { AnimatePresence } from 'motion/react';\nimport { type ChangeEvent, type KeyboardEvent, useEffect, useMemo, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport type { ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\nimport { AnimatedNumber } from '../AnimatedNumber/AnimatedNumber';\nimport { useFocus } from '../hooks/useFocus';\nimport { useInputStyle } from '../hooks/useInputStyle';\nimport {\n  getDecimalCount,\n  getDecimalSeparator,\n  getEnteredDecimalsCount,\n  getFormattedString,\n  getGroupSeparator,\n  getUnformattedNumber,\n  isAllowedInputKey,\n  isInputPossiblyOverflowing,\n} from './utils';\n\ntype AmountInputProps = {\n  id: string;\n  describedById?: string;\n  amount?: number | null;\n  currency: string;\n  autoFocus?: boolean;\n  onChange: (amount: number | null) => void;\n  onFocusChange?: (focused: boolean) => void;\n} & Pick<ExpressiveMoneyInputProps, 'loading'>;\n\nexport const AmountInput = ({\n  id,\n  describedById,\n  amount,\n  currency,\n  autoFocus,\n  onChange,\n  onFocusChange,\n  loading,\n}: AmountInputProps) => {\n  const intl = useIntl();\n  const { focus, setFocus, visualFocus, setVisualFocus } = useFocus();\n\n  const [value, setValue] = useState<string>(() =>\n    amount\n      ? getFormattedString({\n          value: amount,\n          currency,\n          locale: intl.locale,\n        })\n      : '',\n  );\n  const prevAmountRef = useRef<string | number | null | undefined>(amount);\n  const numericValue = useMemo(() => {\n    return getUnformattedNumber({\n      value,\n      currency,\n      locale: intl.locale,\n    });\n  }, [value, currency, intl.locale]);\n\n  const valueWithFullDecimals = useMemo(() => {\n    return getFormattedString({\n      value: numericValue ?? 0,\n      currency,\n      locale: intl.locale,\n      alwaysShowDecimals: true,\n    });\n  }, [numericValue, currency, intl.locale]);\n\n  const ref = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (autoFocus) {\n      ref.current?.focus();\n    }\n  }, []);\n\n  const placeholder = getPlaceholder(currency, intl.locale);\n  const groupSeparator = getGroupSeparator(currency, intl.locale);\n  const decimalSeparator = getDecimalSeparator(currency, intl.locale);\n  const maxDecimalCount = getDecimalCount(currency, intl.locale);\n\n  const decimalPart = getDecimalPart(value, decimalSeparator);\n  const decimalMode = decimalSeparator && value.includes(decimalSeparator);\n\n  useEffect(() => {\n    if (prevAmountRef.current !== amount) {\n      prevAmountRef.current = amount;\n\n      // Only update the displayed value if not focused (preserve user input when focused)\n      if (!focus) {\n        // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing external prop to internal state when unfocused\n        setValue(\n          amount\n            ? getFormattedString({\n                value: amount,\n                currency,\n                locale: intl.locale,\n              })\n            : '',\n        );\n      }\n    }\n  }, [amount, focus, currency, intl.locale]);\n\n  useEffect(() => {\n    onFocusChange?.(visualFocus);\n  }, [onFocusChange, visualFocus]);\n\n  const shouldReformatAfterUserInput = (newValue: string) => {\n    // don't reformat if formatting would wipe out user's input\n    if (reformatValue(newValue) === '') {\n      return false;\n    }\n\n    const endsWithDecimalSeparator = decimalSeparator && newValue.endsWith(decimalSeparator);\n    const endsWithGroupSeparator = groupSeparator && newValue.endsWith(groupSeparator);\n\n    // if the user has entered a seperator to the end, formatting would delete it\n    if (endsWithDecimalSeparator || endsWithGroupSeparator) {\n      return false;\n    }\n\n    const containsDecimalSeparator = decimalSeparator && newValue.includes(decimalSeparator);\n\n    if (containsDecimalSeparator) {\n      const enteredDecimalsCount = getEnteredDecimalsCount(newValue, decimalSeparator);\n      // don't reformat until user has entered all the allowed decimals\n      // for example, we don't want 1.1 to be reformatted to 1.10 immediately\n      if (enteredDecimalsCount < maxDecimalCount) {\n        return false;\n      }\n    }\n\n    return true;\n  };\n\n  const reformatValue = (newValue: string) => {\n    const unformattedValue = getUnformattedNumber({\n      value: newValue,\n      currency,\n      locale: intl.locale,\n    });\n    const formattedValue = unformattedValue\n      ? getFormattedString({\n          value: unformattedValue,\n          currency,\n          locale: intl.locale,\n        })\n      : '';\n    return formattedValue;\n  };\n\n  const handleChange = (newValue: string) => {\n    const oldCursorPosition = ref.current?.selectionStart ?? 0;\n\n    const newFormattedString = shouldReformatAfterUserInput(newValue)\n      ? reformatValue(newValue)\n      : newValue;\n    setValue(newFormattedString);\n\n    const newNumber = getUnformattedNumber({\n      value: newFormattedString,\n      currency,\n      locale: intl.locale,\n    });\n\n    if (newNumber !== numericValue) {\n      if (numericValue || newNumber) {\n        onChange(newNumber);\n      }\n    }\n\n    const newCursorPosition = oldCursorPosition + (newFormattedString.length - newValue.length);\n    requestAnimationFrame(() => {\n      ref?.current?.setSelectionRange(newCursorPosition, newCursorPosition);\n    });\n  };\n\n  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n    e.preventDefault();\n\n    const clipboardData = e.clipboardData?.getData('text/plain');\n    if (!clipboardData) {\n      return;\n    }\n\n    // need to sanitise the pasted value otherwise other validation logic will ignore the input entirely\n    const sanitisedValue = reformatValue(clipboardData);\n\n    handleChange(sanitisedValue);\n  };\n\n  const handleBlur = () => {\n    setFocus(false);\n    setValue(reformatValue(value));\n  };\n\n  const handleBackspace = (e: KeyboardEvent<HTMLInputElement>) => {\n    const input = e.target as HTMLInputElement;\n    // using the updated selection range after the backspace key has been processed, instead of the current selection range in state\n    const { value: currentValue, selectionStart, selectionEnd } = input;\n\n    if (selectionStart === selectionEnd && selectionStart && selectionStart > 0) {\n      const charBeforeCursor = currentValue[selectionStart - 1];\n\n      // if the user deletes a thousands separator, remove the digit before it as well\n      if (charBeforeCursor === groupSeparator) {\n        e.preventDefault();\n        const beforeCursor = currentValue.slice(0, selectionStart - 2);\n        const afterCursor = currentValue.slice(selectionStart);\n        const newValue = `${beforeCursor}${afterCursor}`;\n        input.setSelectionRange(beforeCursor.length, beforeCursor.length);\n        handleChange(newValue);\n      }\n    }\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    setFocus(true);\n    if (!isAllowedInputKey(e)) {\n      e.preventDefault();\n    }\n\n    if (e.key === 'Backspace') {\n      handleBackspace(e);\n    }\n  };\n\n  const isAllowedInput = (e: ChangeEvent<HTMLInputElement>) => {\n    const hasMultipleDecimalSeparators =\n      decimalSeparator && e.target.value.split(decimalSeparator).length > 2;\n    if (hasMultipleDecimalSeparators) {\n      return false;\n    }\n\n    const newNumericValue = getUnformattedNumber({\n      value: e.target.value,\n      currency,\n      locale: intl.locale,\n    });\n    const maxLength = Number.MAX_SAFE_INTEGER.toString().length;\n    if (String(newNumericValue).length > maxLength) {\n      return false;\n    }\n\n    return true;\n  };\n\n  const addonContent = useMemo((): string | null | undefined => {\n    // because we're using a separate \"addon\" element for the placeholder decimals, there is a possibility that the input itself will become scrollable\n    // and the decimals will appear on top of the input. Safest thing to do is to just hide the addon if there is not enough room\n    // eslint-disable-next-line react-hooks/refs -- Reading layout dimensions for overflow detection\n    if (isInputPossiblyOverflowing({ ref, value })) {\n      return null;\n    }\n    if (!decimalSeparator || !value) {\n      return null;\n    }\n\n    // if the user has typed a decimal separator, show the full decimal part as a placeholder\n    // this returns a string even if there is no content, typing should replace the placeholder immediately without animation\n    // otherwise there is an ugly animation when going from 1.23 to 1.2 due to AnimatePresence\n    if (focus && decimalMode) {\n      // reuse getDecimalPart\n      const fullDecimalPart = getDecimalPart(valueWithFullDecimals, decimalSeparator);\n      // show only the characters that are not already displayed by the input\n      return fullDecimalPart?.slice(decimalPart?.length);\n    }\n\n    // in unfocused state, always show the full decimal part unless the user has already entered decimals\n    if (!focus && !decimalMode) {\n      const [_, decimalPlaceholder] = placeholder.split(decimalSeparator);\n      return decimalSeparator + decimalPlaceholder;\n    }\n\n    return null;\n  }, [\n    decimalMode,\n    decimalPart?.length,\n    decimalSeparator,\n    focus,\n    placeholder,\n    value,\n    valueWithFullDecimals,\n  ]);\n\n  const style = useInputStyle({\n    // whenever decimals are shown, we need to account for the full decimal part for the font size calculation\n    value: addonContent ? valueWithFullDecimals : value,\n    focus: visualFocus,\n    inputElement: ref,\n    loading,\n  });\n\n  return (\n    <div className=\"wds-amount-input-container\">\n      <div\n        className={clsx('wds-amount-input-input-container', 'np-text-display-large--forced')}\n        style={style}\n      >\n        <input\n          ref={ref}\n          className=\"wds-amount-input-input\"\n          id={id}\n          autoComplete=\"off\"\n          inputMode=\"decimal\"\n          value={value}\n          type=\"text\"\n          placeholder={placeholder}\n          aria-describedby={describedById}\n          /* without this, the input tries to keep an aspect ratio and doesn't respect CSS width rules */\n          size={1}\n          onChange={(e) => {\n            if (isAllowedInput(e)) {\n              handleChange(e.target.value);\n            }\n          }}\n          onBlurCapture={() => handleBlur()}\n          onPaste={(e) => handlePaste(e)}\n          onFocus={() => {\n            setFocus(true);\n          }}\n          onBlur={() => {\n            setTimeout(() => setVisualFocus(false), 30);\n          }}\n          onKeyDown={(e) => handleKeyDown(e)}\n        />\n        <AnimatePresence initial={false}>\n          {addonContent !== null && (\n            <AnimatedNumber\n              className={clsx(\n                'wds-amount-input-placeholder',\n                visualFocus && 'wds-amount-input-placeholder-focus',\n              )}\n              onClick={() => ref.current?.focus()}\n            >\n              {addonContent}\n            </AnimatedNumber>\n          )}\n        </AnimatePresence>\n      </div>\n    </div>\n  );\n};\n\nconst getPlaceholder = (currency: string, locale: string) => {\n  return formatAmount(0, currency, locale, { alwaysShowDecimals: true });\n};\n\nconst getDecimalPart = (value: string, decimalSeparator: string | null) => {\n  if (!value || !decimalSeparator) {\n    return undefined;\n  }\n\n  const [_, decimalPart] = value.split(decimalSeparator);\n  return decimalPart ?? undefined;\n};\n"],"names":["AmountInput","id","describedById","amount","currency","autoFocus","onChange","onFocusChange","loading","intl","useIntl","focus","setFocus","visualFocus","setVisualFocus","useFocus","value","setValue","useState","getFormattedString","locale","prevAmountRef","useRef","numericValue","useMemo","getUnformattedNumber","valueWithFullDecimals","alwaysShowDecimals","ref","useEffect","current","placeholder","getPlaceholder","groupSeparator","getGroupSeparator","decimalSeparator","getDecimalSeparator","maxDecimalCount","getDecimalCount","decimalPart","getDecimalPart","decimalMode","includes","shouldReformatAfterUserInput","newValue","reformatValue","endsWithDecimalSeparator","endsWith","endsWithGroupSeparator","containsDecimalSeparator","enteredDecimalsCount","getEnteredDecimalsCount","unformattedValue","formattedValue","handleChange","oldCursorPosition","selectionStart","newFormattedString","newNumber","newCursorPosition","length","requestAnimationFrame","setSelectionRange","handlePaste","e","preventDefault","clipboardData","getData","sanitisedValue","handleBlur","handleBackspace","input","target","currentValue","selectionEnd","charBeforeCursor","beforeCursor","slice","afterCursor","handleKeyDown","isAllowedInputKey","key","isAllowedInput","hasMultipleDecimalSeparators","split","newNumericValue","maxLength","Number","MAX_SAFE_INTEGER","toString","String","addonContent","isInputPossiblyOverflowing","fullDecimalPart","_","decimalPlaceholder","style","useInputStyle","inputElement","_jsx","className","children","_jsxs","clsx","autoComplete","inputMode","type","size","onBlurCapture","onPaste","onFocus","onBlur","setTimeout","onKeyDown","AnimatePresence","initial","AnimatedNumber","onClick","formatAmount","undefined"],"mappings":"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"}

package/build/ExpressiveMoneyInput/AnimatedNumber/AnimatedNumber.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var framerMotion = require('framer-motion');
+var react = require('motion/react');
 var jsxRuntime = require('react/jsx-runtime');
 
 const AnimatedNumber = ({
@@ -8,8 +8,8 @@ const AnimatedNumber = ({
   onClick,
   className
 }) => {
-  const reducedMotion = framerMotion.useReducedMotion();
-  return /*#__PURE__*/jsxRuntime.jsx(framerMotion.motion.span, {
+  const reducedMotion = react.useReducedMotion();
+  return /*#__PURE__*/jsxRuntime.jsx(react.motion.span, {
     className: className,
     "aria-hidden": true,
     initial: {
@@ -27,7 +27,7 @@ const AnimatedNumber = ({
       ease: [0.3, 0, 0.1, 1]
     },
     onClick: () => onClick?.(),
-    children: /*#__PURE__*/jsxRuntime.jsx(framerMotion.motion.span, {
+    children: /*#__PURE__*/jsxRuntime.jsx(react.motion.span, {
       initial: {
         opacity: 0
       },

package/build/ExpressiveMoneyInput/AnimatedNumber/AnimatedNumber.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedNumber.js","sources":["../../../src/ExpressiveMoneyInput/AnimatedNumber/AnimatedNumber.tsx"],"sourcesContent":["import { motion, useReducedMotion } from 'framer-motion';\nimport type { ReactNode } from 'react';\n\ninterface Props {\n  children: ReactNode;\n  onClick?: () => void;\n  className?: string;\n}\n\nexport const AnimatedNumber = ({ children, onClick, className }: Props) => {\n  const reducedMotion = useReducedMotion();\n\n  return (\n    <motion.span\n      className={className}\n      aria-hidden\n      initial={{ zoom: 0.01 }}\n      animate={{ zoom: 1 }}\n      exit={{ zoom: 0.01 }}\n      transition={{\n        duration: reducedMotion ? 0 : 0.3,\n        type: 'tween',\n        ease: [0.3, 0, 0.1, 1],\n      }}\n      onClick={() => onClick?.()}\n    >\n      <motion.span\n        initial={{ opacity: 0 }}\n        animate={{ opacity: [0, 0, 1] }}\n        exit={{ opacity: [1, 0, 0] }}\n        transition={{\n          duration: reducedMotion ? 0 : 0.3,\n          times: [0, 0.5, 1],\n        }}\n      >\n        {children}\n      </motion.span>\n    </motion.span>\n  );\n};\n"],"names":["AnimatedNumber","children","onClick","className","reducedMotion","useReducedMotion","_jsx","motion","span","initial","zoom","animate","exit","transition","duration","type","ease","opacity","times"],"mappings":";;;;;AASO,MAAMA,cAAc,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,OAAO;AAAEC,EAAAA;AAAS,CAAS,KAAI;AACxE,EAAA,MAAMC,aAAa,GAAGC,6BAAgB,EAAE;AAExC,EAAA,oBACEC,cAAA,CAACC,mBAAM,CAACC,IAAI,EAAA;AACVL,IAAAA,SAAS,EAAEA,SAAU;IACrB,aAAA,EAAA,IAAW;AACXM,IAAAA,OAAO,EAAE;AAAEC,MAAAA,IAAI,EAAE;KAAO;AACxBC,IAAAA,OAAO,EAAE;AAAED,MAAAA,IAAI,EAAE;KAAI;AACrBE,IAAAA,IAAI,EAAE;AAAEF,MAAAA,IAAI,EAAE;KAAO;AACrBG,IAAAA,UAAU,EAAE;AACVC,MAAAA,QAAQ,EAAEV,aAAa,GAAG,CAAC,GAAG,GAAG;AACjCW,MAAAA,IAAI,EAAE,OAAO;MACbC,IAAI,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC;KACrB;AACFd,IAAAA,OAAO,EAAEA,MAAMA,OAAO,IAAK;AAAAD,IAAAA,QAAA,eAE3BK,cAAA,CAACC,mBAAM,CAACC,IAAI,EAAA;AACVC,MAAAA,OAAO,EAAE;AAAEQ,QAAAA,OAAO,EAAE;OAAI;AACxBN,MAAAA,OAAO,EAAE;AAAEM,QAAAA,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC;OAAI;AAChCL,MAAAA,IAAI,EAAE;AAAEK,QAAAA,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC;OAAI;AAC7BJ,MAAAA,UAAU,EAAE;AACVC,QAAAA,QAAQ,EAAEV,aAAa,GAAG,CAAC,GAAG,GAAG;AACjCc,QAAAA,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC;OACjB;AAAAjB,MAAAA,QAAA,EAEDA;KACU;AACf,GAAa,CAAC;AAElB;;;;"}
+{"version":3,"file":"AnimatedNumber.js","sources":["../../../src/ExpressiveMoneyInput/AnimatedNumber/AnimatedNumber.tsx"],"sourcesContent":["import { motion, useReducedMotion } from 'motion/react';\nimport type { ReactNode } from 'react';\n\ninterface Props {\n  children: ReactNode;\n  onClick?: () => void;\n  className?: string;\n}\n\nexport const AnimatedNumber = ({ children, onClick, className }: Props) => {\n  const reducedMotion = useReducedMotion();\n\n  return (\n    <motion.span\n      className={className}\n      aria-hidden\n      initial={{ zoom: 0.01 }}\n      animate={{ zoom: 1 }}\n      exit={{ zoom: 0.01 }}\n      transition={{\n        duration: reducedMotion ? 0 : 0.3,\n        type: 'tween',\n        ease: [0.3, 0, 0.1, 1],\n      }}\n      onClick={() => onClick?.()}\n    >\n      <motion.span\n        initial={{ opacity: 0 }}\n        animate={{ opacity: [0, 0, 1] }}\n        exit={{ opacity: [1, 0, 0] }}\n        transition={{\n          duration: reducedMotion ? 0 : 0.3,\n          times: [0, 0.5, 1],\n        }}\n      >\n        {children}\n      </motion.span>\n    </motion.span>\n  );\n};\n"],"names":["AnimatedNumber","children","onClick","className","reducedMotion","useReducedMotion","_jsx","motion","span","initial","zoom","animate","exit","transition","duration","type","ease","opacity","times"],"mappings":";;;;;AASO,MAAMA,cAAc,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,OAAO;AAAEC,EAAAA;AAAS,CAAS,KAAI;AACxE,EAAA,MAAMC,aAAa,GAAGC,sBAAgB,EAAE;AAExC,EAAA,oBACEC,cAAA,CAACC,YAAM,CAACC,IAAI,EAAA;AACVL,IAAAA,SAAS,EAAEA,SAAU;IACrB,aAAA,EAAA,IAAW;AACXM,IAAAA,OAAO,EAAE;AAAEC,MAAAA,IAAI,EAAE;KAAO;AACxBC,IAAAA,OAAO,EAAE;AAAED,MAAAA,IAAI,EAAE;KAAI;AACrBE,IAAAA,IAAI,EAAE;AAAEF,MAAAA,IAAI,EAAE;KAAO;AACrBG,IAAAA,UAAU,EAAE;AACVC,MAAAA,QAAQ,EAAEV,aAAa,GAAG,CAAC,GAAG,GAAG;AACjCW,MAAAA,IAAI,EAAE,OAAO;MACbC,IAAI,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC;KACrB;AACFd,IAAAA,OAAO,EAAEA,MAAMA,OAAO,IAAK;AAAAD,IAAAA,QAAA,eAE3BK,cAAA,CAACC,YAAM,CAACC,IAAI,EAAA;AACVC,MAAAA,OAAO,EAAE;AAAEQ,QAAAA,OAAO,EAAE;OAAI;AACxBN,MAAAA,OAAO,EAAE;AAAEM,QAAAA,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC;OAAI;AAChCL,MAAAA,IAAI,EAAE;AAAEK,QAAAA,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC;OAAI;AAC7BJ,MAAAA,UAAU,EAAE;AACVC,QAAAA,QAAQ,EAAEV,aAAa,GAAG,CAAC,GAAG,GAAG;AACjCc,QAAAA,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC;OACjB;AAAAjB,MAAAA,QAAA,EAEDA;KACU;AACf,GAAa,CAAC;AAElB;;;;"}

package/build/ExpressiveMoneyInput/AnimatedNumber/AnimatedNumber.mjs

@@ -1,4 +1,4 @@
-import { useReducedMotion, motion } from 'framer-motion';
+import { useReducedMotion, motion } from 'motion/react';
 import { jsx } from 'react/jsx-runtime';
 
 const AnimatedNumber = ({

package/build/ExpressiveMoneyInput/AnimatedNumber/AnimatedNumber.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedNumber.mjs","sources":["../../../src/ExpressiveMoneyInput/AnimatedNumber/AnimatedNumber.tsx"],"sourcesContent":["import { motion, useReducedMotion } from 'framer-motion';\nimport type { ReactNode } from 'react';\n\ninterface Props {\n  children: ReactNode;\n  onClick?: () => void;\n  className?: string;\n}\n\nexport const AnimatedNumber = ({ children, onClick, className }: Props) => {\n  const reducedMotion = useReducedMotion();\n\n  return (\n    <motion.span\n      className={className}\n      aria-hidden\n      initial={{ zoom: 0.01 }}\n      animate={{ zoom: 1 }}\n      exit={{ zoom: 0.01 }}\n      transition={{\n        duration: reducedMotion ? 0 : 0.3,\n        type: 'tween',\n        ease: [0.3, 0, 0.1, 1],\n      }}\n      onClick={() => onClick?.()}\n    >\n      <motion.span\n        initial={{ opacity: 0 }}\n        animate={{ opacity: [0, 0, 1] }}\n        exit={{ opacity: [1, 0, 0] }}\n        transition={{\n          duration: reducedMotion ? 0 : 0.3,\n          times: [0, 0.5, 1],\n        }}\n      >\n        {children}\n      </motion.span>\n    </motion.span>\n  );\n};\n"],"names":["AnimatedNumber","children","onClick","className","reducedMotion","useReducedMotion","_jsx","motion","span","initial","zoom","animate","exit","transition","duration","type","ease","opacity","times"],"mappings":";;;AASO,MAAMA,cAAc,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,OAAO;AAAEC,EAAAA;AAAS,CAAS,KAAI;AACxE,EAAA,MAAMC,aAAa,GAAGC,gBAAgB,EAAE;AAExC,EAAA,oBACEC,GAAA,CAACC,MAAM,CAACC,IAAI,EAAA;AACVL,IAAAA,SAAS,EAAEA,SAAU;IACrB,aAAA,EAAA,IAAW;AACXM,IAAAA,OAAO,EAAE;AAAEC,MAAAA,IAAI,EAAE;KAAO;AACxBC,IAAAA,OAAO,EAAE;AAAED,MAAAA,IAAI,EAAE;KAAI;AACrBE,IAAAA,IAAI,EAAE;AAAEF,MAAAA,IAAI,EAAE;KAAO;AACrBG,IAAAA,UAAU,EAAE;AACVC,MAAAA,QAAQ,EAAEV,aAAa,GAAG,CAAC,GAAG,GAAG;AACjCW,MAAAA,IAAI,EAAE,OAAO;MACbC,IAAI,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC;KACrB;AACFd,IAAAA,OAAO,EAAEA,MAAMA,OAAO,IAAK;AAAAD,IAAAA,QAAA,eAE3BK,GAAA,CAACC,MAAM,CAACC,IAAI,EAAA;AACVC,MAAAA,OAAO,EAAE;AAAEQ,QAAAA,OAAO,EAAE;OAAI;AACxBN,MAAAA,OAAO,EAAE;AAAEM,QAAAA,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC;OAAI;AAChCL,MAAAA,IAAI,EAAE;AAAEK,QAAAA,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC;OAAI;AAC7BJ,MAAAA,UAAU,EAAE;AACVC,QAAAA,QAAQ,EAAEV,aAAa,GAAG,CAAC,GAAG,GAAG;AACjCc,QAAAA,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC;OACjB;AAAAjB,MAAAA,QAAA,EAEDA;KACU;AACf,GAAa,CAAC;AAElB;;;;"}
+{"version":3,"file":"AnimatedNumber.mjs","sources":["../../../src/ExpressiveMoneyInput/AnimatedNumber/AnimatedNumber.tsx"],"sourcesContent":["import { motion, useReducedMotion } from 'motion/react';\nimport type { ReactNode } from 'react';\n\ninterface Props {\n  children: ReactNode;\n  onClick?: () => void;\n  className?: string;\n}\n\nexport const AnimatedNumber = ({ children, onClick, className }: Props) => {\n  const reducedMotion = useReducedMotion();\n\n  return (\n    <motion.span\n      className={className}\n      aria-hidden\n      initial={{ zoom: 0.01 }}\n      animate={{ zoom: 1 }}\n      exit={{ zoom: 0.01 }}\n      transition={{\n        duration: reducedMotion ? 0 : 0.3,\n        type: 'tween',\n        ease: [0.3, 0, 0.1, 1],\n      }}\n      onClick={() => onClick?.()}\n    >\n      <motion.span\n        initial={{ opacity: 0 }}\n        animate={{ opacity: [0, 0, 1] }}\n        exit={{ opacity: [1, 0, 0] }}\n        transition={{\n          duration: reducedMotion ? 0 : 0.3,\n          times: [0, 0.5, 1],\n        }}\n      >\n        {children}\n      </motion.span>\n    </motion.span>\n  );\n};\n"],"names":["AnimatedNumber","children","onClick","className","reducedMotion","useReducedMotion","_jsx","motion","span","initial","zoom","animate","exit","transition","duration","type","ease","opacity","times"],"mappings":";;;AASO,MAAMA,cAAc,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,OAAO;AAAEC,EAAAA;AAAS,CAAS,KAAI;AACxE,EAAA,MAAMC,aAAa,GAAGC,gBAAgB,EAAE;AAExC,EAAA,oBACEC,GAAA,CAACC,MAAM,CAACC,IAAI,EAAA;AACVL,IAAAA,SAAS,EAAEA,SAAU;IACrB,aAAA,EAAA,IAAW;AACXM,IAAAA,OAAO,EAAE;AAAEC,MAAAA,IAAI,EAAE;KAAO;AACxBC,IAAAA,OAAO,EAAE;AAAED,MAAAA,IAAI,EAAE;KAAI;AACrBE,IAAAA,IAAI,EAAE;AAAEF,MAAAA,IAAI,EAAE;KAAO;AACrBG,IAAAA,UAAU,EAAE;AACVC,MAAAA,QAAQ,EAAEV,aAAa,GAAG,CAAC,GAAG,GAAG;AACjCW,MAAAA,IAAI,EAAE,OAAO;MACbC,IAAI,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC;KACrB;AACFd,IAAAA,OAAO,EAAEA,MAAMA,OAAO,IAAK;AAAAD,IAAAA,QAAA,eAE3BK,GAAA,CAACC,MAAM,CAACC,IAAI,EAAA;AACVC,MAAAA,OAAO,EAAE;AAAEQ,QAAAA,OAAO,EAAE;OAAI;AACxBN,MAAAA,OAAO,EAAE;AAAEM,QAAAA,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC;OAAI;AAChCL,MAAAA,IAAI,EAAE;AAAEK,QAAAA,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC;OAAI;AAC7BJ,MAAAA,UAAU,EAAE;AACVC,QAAAA,QAAQ,EAAEV,aAAa,GAAG,CAAC,GAAG,GAAG;AACjCc,QAAAA,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC;OACjB;AAAAjB,MAAAA,QAAA,EAEDA;KACU;AACf,GAAa,CAAC;AAElB;;;;"}

package/build/ExpressiveMoneyInput/Chevron/Chevron.js

@@ -2,7 +2,7 @@
 
 var icons = require('@transferwise/icons');
 var clsx = require('clsx');
-var framerMotion = require('framer-motion');
+var react = require('motion/react');
 var jsxRuntime = require('react/jsx-runtime');
 
 const Chevron = ({
@@ -10,7 +10,7 @@ const Chevron = ({
 }) => {
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: clsx.clsx('d-flex align-items-center', 'wds-chevron-container', !shouldShow && 'wds-chevron-hidden'),
-    children: /*#__PURE__*/jsxRuntime.jsx(framerMotion.motion.div, {
+    children: /*#__PURE__*/jsxRuntime.jsx(react.motion.div, {
       animate: {
         x: [12, 0, 0, -12],
         opacity: [0, 1, 1, 0]

package/build/ExpressiveMoneyInput/Chevron/Chevron.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chevron.js","sources":["../../../src/ExpressiveMoneyInput/Chevron/Chevron.tsx"],"sourcesContent":["import { ChevronLeft } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { motion } from 'framer-motion';\n\ninterface Props {\n  shouldShow: boolean;\n}\n\nexport const Chevron = ({ shouldShow = true }: Props) => {\n  return (\n    <div\n      className={clsx(\n        'd-flex align-items-center',\n        'wds-chevron-container',\n        !shouldShow && 'wds-chevron-hidden',\n      )}\n    >\n      <motion.div\n        animate={{\n          x: [12, 0, 0, -12],\n          opacity: [0, 1, 1, 0],\n        }}\n        transition={{\n          duration: 3,\n          ease: [[0.3, 0, 0.1, 1], 'linear', [0.3, 0, 0.1, 1]],\n          times: [0, 0.1, 0.9, 1],\n          repeat: Infinity,\n          repeatType: 'loop',\n        }}\n      >\n        <ChevronLeft />\n      </motion.div>\n    </div>\n  );\n};\n"],"names":["Chevron","shouldShow","_jsx","className","clsx","children","motion","div","animate","x","opacity","transition","duration","ease","times","repeat","Infinity","repeatType","ChevronLeft"],"mappings":";;;;;;;AAQO,MAAMA,OAAO,GAAGA,CAAC;AAAEC,EAAAA,UAAU,GAAG;AAAI,CAAS,KAAI;AACtD,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;IACEC,SAAS,EAAEC,SAAI,CACb,2BAA2B,EAC3B,uBAAuB,EACvB,CAACH,UAAU,IAAI,oBAAoB,CACnC;AAAAI,IAAAA,QAAA,eAEFH,cAAA,CAACI,mBAAM,CAACC,GAAG,EAAA;AACTC,MAAAA,OAAO,EAAE;QACPC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC;QAClBC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;OACpB;AACFC,MAAAA,UAAU,EAAE;AACVC,QAAAA,QAAQ,EAAE,CAAC;QACXC,IAAI,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;QACpDC,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;AACvBC,QAAAA,MAAM,EAAEC,QAAQ;AAChBC,QAAAA,UAAU,EAAE;OACZ;AAAAZ,MAAAA,QAAA,eAEFH,cAAA,CAACgB,iBAAW,EAAA,EAAA;KACF;AACd,GAAK,CAAC;AAEV;;;;"}
+{"version":3,"file":"Chevron.js","sources":["../../../src/ExpressiveMoneyInput/Chevron/Chevron.tsx"],"sourcesContent":["import { ChevronLeft } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { motion } from 'motion/react';\n\ninterface Props {\n  shouldShow: boolean;\n}\n\nexport const Chevron = ({ shouldShow = true }: Props) => {\n  return (\n    <div\n      className={clsx(\n        'd-flex align-items-center',\n        'wds-chevron-container',\n        !shouldShow && 'wds-chevron-hidden',\n      )}\n    >\n      <motion.div\n        animate={{\n          x: [12, 0, 0, -12],\n          opacity: [0, 1, 1, 0],\n        }}\n        transition={{\n          duration: 3,\n          ease: [[0.3, 0, 0.1, 1], 'linear', [0.3, 0, 0.1, 1]],\n          times: [0, 0.1, 0.9, 1],\n          repeat: Infinity,\n          repeatType: 'loop',\n        }}\n      >\n        <ChevronLeft />\n      </motion.div>\n    </div>\n  );\n};\n"],"names":["Chevron","shouldShow","_jsx","className","clsx","children","motion","div","animate","x","opacity","transition","duration","ease","times","repeat","Infinity","repeatType","ChevronLeft"],"mappings":";;;;;;;AAQO,MAAMA,OAAO,GAAGA,CAAC;AAAEC,EAAAA,UAAU,GAAG;AAAI,CAAS,KAAI;AACtD,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;IACEC,SAAS,EAAEC,SAAI,CACb,2BAA2B,EAC3B,uBAAuB,EACvB,CAACH,UAAU,IAAI,oBAAoB,CACnC;AAAAI,IAAAA,QAAA,eAEFH,cAAA,CAACI,YAAM,CAACC,GAAG,EAAA;AACTC,MAAAA,OAAO,EAAE;QACPC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC;QAClBC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;OACpB;AACFC,MAAAA,UAAU,EAAE;AACVC,QAAAA,QAAQ,EAAE,CAAC;QACXC,IAAI,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;QACpDC,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;AACvBC,QAAAA,MAAM,EAAEC,QAAQ;AAChBC,QAAAA,UAAU,EAAE;OACZ;AAAAZ,MAAAA,QAAA,eAEFH,cAAA,CAACgB,iBAAW,EAAA,EAAA;KACF;AACd,GAAK,CAAC;AAEV;;;;"}

package/build/ExpressiveMoneyInput/Chevron/Chevron.mjs

@@ -1,6 +1,6 @@
 import { ChevronLeft } from '@transferwise/icons';
 import { clsx } from 'clsx';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import { jsx } from 'react/jsx-runtime';
 
 const Chevron = ({

package/build/ExpressiveMoneyInput/Chevron/Chevron.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Chevron.mjs","sources":["../../../src/ExpressiveMoneyInput/Chevron/Chevron.tsx"],"sourcesContent":["import { ChevronLeft } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { motion } from 'framer-motion';\n\ninterface Props {\n  shouldShow: boolean;\n}\n\nexport const Chevron = ({ shouldShow = true }: Props) => {\n  return (\n    <div\n      className={clsx(\n        'd-flex align-items-center',\n        'wds-chevron-container',\n        !shouldShow && 'wds-chevron-hidden',\n      )}\n    >\n      <motion.div\n        animate={{\n          x: [12, 0, 0, -12],\n          opacity: [0, 1, 1, 0],\n        }}\n        transition={{\n          duration: 3,\n          ease: [[0.3, 0, 0.1, 1], 'linear', [0.3, 0, 0.1, 1]],\n          times: [0, 0.1, 0.9, 1],\n          repeat: Infinity,\n          repeatType: 'loop',\n        }}\n      >\n        <ChevronLeft />\n      </motion.div>\n    </div>\n  );\n};\n"],"names":["Chevron","shouldShow","_jsx","className","clsx","children","motion","div","animate","x","opacity","transition","duration","ease","times","repeat","Infinity","repeatType","ChevronLeft"],"mappings":";;;;;AAQO,MAAMA,OAAO,GAAGA,CAAC;AAAEC,EAAAA,UAAU,GAAG;AAAI,CAAS,KAAI;AACtD,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;IACEC,SAAS,EAAEC,IAAI,CACb,2BAA2B,EAC3B,uBAAuB,EACvB,CAACH,UAAU,IAAI,oBAAoB,CACnC;AAAAI,IAAAA,QAAA,eAEFH,GAAA,CAACI,MAAM,CAACC,GAAG,EAAA;AACTC,MAAAA,OAAO,EAAE;QACPC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC;QAClBC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;OACpB;AACFC,MAAAA,UAAU,EAAE;AACVC,QAAAA,QAAQ,EAAE,CAAC;QACXC,IAAI,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;QACpDC,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;AACvBC,QAAAA,MAAM,EAAEC,QAAQ;AAChBC,QAAAA,UAAU,EAAE;OACZ;AAAAZ,MAAAA,QAAA,eAEFH,GAAA,CAACgB,WAAW,EAAA,EAAA;KACF;AACd,GAAK,CAAC;AAEV;;;;"}
+{"version":3,"file":"Chevron.mjs","sources":["../../../src/ExpressiveMoneyInput/Chevron/Chevron.tsx"],"sourcesContent":["import { ChevronLeft } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { motion } from 'motion/react';\n\ninterface Props {\n  shouldShow: boolean;\n}\n\nexport const Chevron = ({ shouldShow = true }: Props) => {\n  return (\n    <div\n      className={clsx(\n        'd-flex align-items-center',\n        'wds-chevron-container',\n        !shouldShow && 'wds-chevron-hidden',\n      )}\n    >\n      <motion.div\n        animate={{\n          x: [12, 0, 0, -12],\n          opacity: [0, 1, 1, 0],\n        }}\n        transition={{\n          duration: 3,\n          ease: [[0.3, 0, 0.1, 1], 'linear', [0.3, 0, 0.1, 1]],\n          times: [0, 0.1, 0.9, 1],\n          repeat: Infinity,\n          repeatType: 'loop',\n        }}\n      >\n        <ChevronLeft />\n      </motion.div>\n    </div>\n  );\n};\n"],"names":["Chevron","shouldShow","_jsx","className","clsx","children","motion","div","animate","x","opacity","transition","duration","ease","times","repeat","Infinity","repeatType","ChevronLeft"],"mappings":";;;;;AAQO,MAAMA,OAAO,GAAGA,CAAC;AAAEC,EAAAA,UAAU,GAAG;AAAI,CAAS,KAAI;AACtD,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;IACEC,SAAS,EAAEC,IAAI,CACb,2BAA2B,EAC3B,uBAAuB,EACvB,CAACH,UAAU,IAAI,oBAAoB,CACnC;AAAAI,IAAAA,QAAA,eAEFH,GAAA,CAACI,MAAM,CAACC,GAAG,EAAA;AACTC,MAAAA,OAAO,EAAE;QACPC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC;QAClBC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;OACpB;AACFC,MAAAA,UAAU,EAAE;AACVC,QAAAA,QAAQ,EAAE,CAAC;QACXC,IAAI,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;QACpDC,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;AACvBC,QAAAA,MAAM,EAAEC,QAAQ;AAChBC,QAAAA,UAAU,EAAE;OACZ;AAAAZ,MAAAA,QAAA,eAEFH,GAAA,CAACgB,WAAW,EAAA,EAAA;KACF;AACd,GAAK,CAAC;AAEV;;;;"}

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          formatCurrencyCode(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 type { CurrencyType, 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 CurrencySelectorProps = {\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}: CurrencySelectorProps) => {\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          formatCurrencyCode(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,CACQ,KAAI;AAC1B,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;AAEtB,EAAA,MAAMC,kBAAkB,GAAGC,aAAO,CAAC,MAAMC,mBAAmB,CAACV,OAAO,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;AAEjF,EAAA,MAAMW,oBAAoB,GAAGF,aAAO,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,cAAQ,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,cAAA,CAACC,uBAAW,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,qCAAQ,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,qCAAQ,CAACI,8BAA8B;KACxE;AACFhB,IAAAA,KAAK,EAAEA,KAAM;AACbiB,IAAAA,WAAW,EAAEA,CAAC;MAAE7B,IAAI;AAAE8B,MAAAA;AAAK,KAAE,KAAI;MAC/B,oBACEb,cAAA,CAACc,iDAAwB,EAAA;AACvBC,QAAAA,KAAK,EAAEC,6BAAkB,CAACjC,IAAI,CAAE;AAChCkC,QAAAA,IAAI,EAAEJ,KAAM;QACZK,IAAI,eAAElB,cAAA,CAACmB,QAAI,EAAA;AAACpC,UAAAA,IAAI,EAAEA,IAAK;AAACqC,UAAAA,aAAa,EAAE;;AAAO,OAAA,CAC9C;IAEN,CAAE;AACFC,IAAAA,aAAa,EAAEA,mBACbrB,cAAA,CAACsB,iDAAwB,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,cAAA,CAACmB,QAAI,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,cAAA,CAACkC,iBAAW,EAAA,EAAA;OAAM;AAC1EC,MAAAA,OAAO,EAAG5C,KAAK,IAAKD,kBAAkB,CAACC,KAAK,CAAE;MAAA6C,QAAA,eAE9CC,eAAA,CAAAC,mBAAA,EAAA;AAAAF,QAAAA,QAAA,gBACEpC,cAAA,CAAA,MAAA,EAAA;UAAM,aAAA,EAAA,IAAW;UAAAoC,QAAA,EAAEpB,6BAAkB,CAAChD,QAAQ;SAAQ,CACtD,eAAAgC,cAAA,CAAA,MAAA,EAAA;AAAMuC,UAAAA,SAAS,EAAC,SAAS;AAAAH,UAAAA,QAAA,EAAEI,2BAAqB,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,gBAAU,CAAC,SAAStB,WAAWA,CACxD;EAAEY,QAAQ;EAAE,GAAGW;AAAI,CAAoE,EACvFC,GAAiD,EAAA;EAEjD,oBACEhD,cAAA,CAACiD,uBAAM,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,OACEgD,6BAAkB,CAAChD,QAAQ,CAACe,IAAI,CAAC,CAACkF,WAAW,EAAE,CAACC,QAAQ,CAACtB,KAAK,CAAC,IAC/D,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;;;;;"}

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          formatCurrencyCode(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.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 type { CurrencyType, 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 CurrencySelectorProps = {\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}: CurrencySelectorProps) => {\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          formatCurrencyCode(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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"}

package/build/ExpressiveMoneyInput/ExpressiveMoneyInput.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var Body = require('../Body/Body.js');
 var clsx = require('clsx');
-var framerMotion = require('framer-motion');
+var react = require('motion/react');
 var React = require('react');
 var CurrencySelector = require('./CurrencySelector/CurrencySelector.js');
 var AmountInput = require('./AmountInput/AmountInput.js');
@@ -74,11 +74,11 @@ function ExpressiveMoneyInput({
           shouldShow: Boolean(showChevron)
         })
       })]
-    }), /*#__PURE__*/jsxRuntime.jsx(framerMotion.AnimatePresence, {
+    }), /*#__PURE__*/jsxRuntime.jsx(react.AnimatePresence, {
       initial: false,
       children: inlinePrompt && /*#__PURE__*/jsxRuntime.jsx("div", {
         className: clsx.clsx('d-flex justify-content-end', inlinePrompt && 'm-t-1'),
-        children: /*#__PURE__*/jsxRuntime.jsx(framerMotion.motion.div, {
+        children: /*#__PURE__*/jsxRuntime.jsx(react.motion.div, {
           initial: {
             opacity: 0,
             height: 0

package/build/ExpressiveMoneyInput/ExpressiveMoneyInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpressiveMoneyInput.js","sources":["../../src/ExpressiveMoneyInput/ExpressiveMoneyInput.tsx"],"sourcesContent":["import Body from '../Body';\nimport { clsx } from 'clsx';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { useId, type ReactNode } from 'react';\n\nimport {\n  type Props as CurrencySelectorProps,\n  CurrencySelector,\n} from './CurrencySelector/CurrencySelector';\nimport { CommonProps } from '../common';\nimport { AmountInput } from './AmountInput/AmountInput';\nimport { Chevron } from './Chevron/Chevron';\nimport { InlinePrompt, type InlinePromptProps } from '../Prompt/InlinePrompt';\nimport Label from '../Label';\n\ntype AmountType = number | null;\nexport type CurrencyType = string;\n\ntype DefaultCurrencySelectorInstanceType = Pick<\n  CurrencySelectorProps,\n  'addons' | 'options' | 'onChange' | 'onOpen' | 'onSearchChange'\n>;\ntype CustomCurrencySelectorInstanceType = {\n  customRender?: (props: { id: string; labelId: string }) => ReactNode;\n};\ntype CurrencySelectorType = DefaultCurrencySelectorInstanceType &\n  CustomCurrencySelectorInstanceType;\n\nexport type Props = {\n  label?: ReactNode;\n  currencySelector?: CurrencySelectorType;\n  amount?: AmountType;\n  /**\n   * The currency code, e.g. `USD`, `EUR`, `GBP`, etc. Governs the flag rendered in the currency selector.\n   */\n  currency: CurrencyType;\n  inlinePrompt?: {\n    sentiment?: InlinePromptProps['sentiment'];\n    message: InlinePromptProps['children'];\n    media?: InlinePromptProps['media'];\n  };\n  showChevron?: boolean;\n  /**\n   * If set, it auto-focuses the amount input upon component mount.<br />\n   * ⚠️ **Use with caution**, as it may impact user experience and\n   * fail [WCAG 2.4.3 requirements](https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html)\n   */\n  autoFocus?: boolean;\n  /**\n   * Dims the input to indicate a loading state. Does not disable it.\n   */\n  loading?: boolean;\n  onAmountChange: (amount: AmountType) => void;\n  onFocusChange?: (focused: boolean) => void;\n} & CommonProps;\n\n/**\n * This component has been kindly contributed by our friends at the `Send` team 🎉.\n *\n * Some patterns and implementation details used in this component may differ\n * from what's commonly used in the Design System. The overall build and QA was managed\n * by the contributing team directly, and such did not follow a typical DS lifecycle.\n *\n * While we house this component and will help facilitate its future iterations,\n * direct contributions by consuming product teams are highly encouraged.\n *\n * > ⚠️ **Prerequisite:** <br />The component depends on the\n * [framer-motion](https://www.npmjs.com/package/framer-motion) package, which has been\n * deliberately excluded from the Design System bundle and kept as an opt-in only.\n * **Make sure to add it to your project dependencies.**\n */\nexport default function ExpressiveMoneyInput({\n  label,\n  currency,\n  currencySelector = { options: [] },\n  amount,\n  onAmountChange,\n  className,\n  inlinePrompt,\n  showChevron,\n  autoFocus,\n  loading,\n  onFocusChange,\n}: Props) {\n  const inputId = useId();\n  const labelId = useId();\n  const customAlertId = useId();\n  const currencyId = useId();\n\n  return (\n    <div className={clsx('wds-expressive-money-input', className)}>\n      <Label id={labelId} htmlFor={inputId} className={clsx('m-b-1', 'font-weight-normal')}>\n        {label}\n      </Label>\n      <div\n        className={clsx('d-flex')}\n        role=\"group\"\n        aria-labelledby={labelId}\n        {...(inlinePrompt ? { 'aria-describedby': customAlertId } : {})}\n      >\n        <div className=\"wds-expressive-money-input-currency-selector\">\n          {currencySelector.customRender?.({ id: currencyId, labelId }) ?? (\n            <CurrencySelector\n              id={currencyId}\n              labelId={labelId}\n              currency={currency}\n              {...currencySelector}\n            />\n          )}\n        </div>\n        <AmountInput\n          id={inputId}\n          describedById={currencyId}\n          amount={amount}\n          currency={currency}\n          // eslint-disable-next-line jsx-a11y/no-autofocus\n          autoFocus={autoFocus}\n          loading={loading}\n          onChange={onAmountChange}\n          onFocusChange={onFocusChange}\n        />\n        <div className={clsx('d-flex align-items-center', 'wds-expressive-money-input-chevron')}>\n          <Chevron shouldShow={Boolean(showChevron)} />\n        </div>\n      </div>\n      <AnimatePresence initial={false}>\n        {inlinePrompt && (\n          <div className={clsx('d-flex justify-content-end', inlinePrompt && 'm-t-1')}>\n            <motion.div\n              key={customAlertId}\n              initial={{ opacity: 0, height: 0 }}\n              animate={{\n                opacity: 1,\n                height: 'auto',\n                transition: { delay: 0.75, duration: 0.3 },\n              }}\n              exit={{ opacity: 0, height: 0 }}\n            >\n              {inlinePrompt.sentiment && Object.keys(inlinePrompt.sentiment).length > 0 ? (\n                <InlinePrompt\n                  id={customAlertId}\n                  media={inlinePrompt.media}\n                  sentiment={inlinePrompt.sentiment}\n                >\n                  {inlinePrompt.message}\n                </InlinePrompt>\n              ) : (\n                <Body>{inlinePrompt.message}</Body>\n              )}\n            </motion.div>\n          </div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n"],"names":["ExpressiveMoneyInput","label","currency","currencySelector","options","amount","onAmountChange","className","inlinePrompt","showChevron","autoFocus","loading","onFocusChange","inputId","useId","labelId","customAlertId","currencyId","_jsxs","clsx","children","_jsx","Label","id","htmlFor","role","customRender","CurrencySelector","AmountInput","describedById","onChange","Chevron","shouldShow","Boolean","AnimatePresence","initial","motion","div","opacity","height","animate","transition","delay","duration","exit","sentiment","Object","keys","length","InlinePrompt","media","message","Body"],"mappings":"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"}
+{"version":3,"file":"ExpressiveMoneyInput.js","sources":["../../src/ExpressiveMoneyInput/ExpressiveMoneyInput.tsx"],"sourcesContent":["import Body from '../Body';\nimport { clsx } from 'clsx';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { useId, type ReactNode } from 'react';\n\nimport { CurrencySelector, type CurrencySelectorProps } from './CurrencySelector/CurrencySelector';\nimport { CommonProps } from '../common';\nimport { AmountInput } from './AmountInput/AmountInput';\nimport { Chevron } from './Chevron/Chevron';\nimport { InlinePrompt, type InlinePromptProps } from '../Prompt/InlinePrompt';\nimport Label from '../Label';\n\ntype AmountType = number | null;\nexport type CurrencyType = string;\n\ntype DefaultCurrencySelectorInstanceType = Pick<\n  CurrencySelectorProps,\n  'addons' | 'options' | 'onChange' | 'onOpen' | 'onSearchChange'\n>;\ntype CustomCurrencySelectorInstanceType = {\n  customRender?: (props: { id: string; labelId: string }) => ReactNode;\n};\ntype CurrencySelectorType = DefaultCurrencySelectorInstanceType &\n  CustomCurrencySelectorInstanceType;\n\nexport type ExpressiveMoneyInputProps = {\n  label?: ReactNode;\n  currencySelector?: CurrencySelectorType;\n  amount?: AmountType;\n  /**\n   * The currency code, e.g. `USD`, `EUR`, `GBP`, etc. Governs the flag rendered in the currency selector.\n   */\n  currency: CurrencyType;\n  inlinePrompt?: {\n    sentiment?: InlinePromptProps['sentiment'];\n    message: InlinePromptProps['children'];\n    media?: InlinePromptProps['media'];\n  };\n  showChevron?: boolean;\n  /**\n   * If set, it auto-focuses the amount input upon component mount.<br />\n   * ⚠️ **Use with caution**, as it may impact user experience and\n   * fail [WCAG 2.4.3 requirements](https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html)\n   */\n  autoFocus?: boolean;\n  /**\n   * Dims the input to indicate a loading state. Does not disable it.\n   */\n  loading?: boolean;\n  onAmountChange: (amount: AmountType) => void;\n  onFocusChange?: (focused: boolean) => void;\n} & CommonProps;\n\n/**\n * This component has been kindly contributed by our friends at the `Send` team 🎉.\n *\n * Some patterns and implementation details used in this component may differ\n * from what's commonly used in the Design System. The overall build and QA was managed\n * by the contributing team directly, and such did not follow a typical DS lifecycle.\n *\n * While we house this component and will help facilitate its future iterations,\n * direct contributions by consuming product teams are highly encouraged.\n *\n * > ⚠️ **Prerequisite:** <br />The component depends on the\n * [motion](https://www.npmjs.com/package/motion) package, which has been\n * deliberately excluded from the Design System bundle and kept as an opt-in only.\n * **Make sure to add it to your project dependencies.**\n */\nexport default function ExpressiveMoneyInput({\n  label,\n  currency,\n  currencySelector = { options: [] },\n  amount,\n  onAmountChange,\n  className,\n  inlinePrompt,\n  showChevron,\n  autoFocus,\n  loading,\n  onFocusChange,\n}: ExpressiveMoneyInputProps) {\n  const inputId = useId();\n  const labelId = useId();\n  const customAlertId = useId();\n  const currencyId = useId();\n\n  return (\n    <div className={clsx('wds-expressive-money-input', className)}>\n      <Label id={labelId} htmlFor={inputId} className={clsx('m-b-1', 'font-weight-normal')}>\n        {label}\n      </Label>\n      <div\n        className={clsx('d-flex')}\n        role=\"group\"\n        aria-labelledby={labelId}\n        {...(inlinePrompt ? { 'aria-describedby': customAlertId } : {})}\n      >\n        <div className=\"wds-expressive-money-input-currency-selector\">\n          {currencySelector.customRender?.({ id: currencyId, labelId }) ?? (\n            <CurrencySelector\n              id={currencyId}\n              labelId={labelId}\n              currency={currency}\n              {...currencySelector}\n            />\n          )}\n        </div>\n        <AmountInput\n          id={inputId}\n          describedById={currencyId}\n          amount={amount}\n          currency={currency}\n          // eslint-disable-next-line jsx-a11y/no-autofocus\n          autoFocus={autoFocus}\n          loading={loading}\n          onChange={onAmountChange}\n          onFocusChange={onFocusChange}\n        />\n        <div className={clsx('d-flex align-items-center', 'wds-expressive-money-input-chevron')}>\n          <Chevron shouldShow={Boolean(showChevron)} />\n        </div>\n      </div>\n      <AnimatePresence initial={false}>\n        {inlinePrompt && (\n          <div className={clsx('d-flex justify-content-end', inlinePrompt && 'm-t-1')}>\n            <motion.div\n              key={customAlertId}\n              initial={{ opacity: 0, height: 0 }}\n              animate={{\n                opacity: 1,\n                height: 'auto',\n                transition: { delay: 0.75, duration: 0.3 },\n              }}\n              exit={{ opacity: 0, height: 0 }}\n            >\n              {inlinePrompt.sentiment && Object.keys(inlinePrompt.sentiment).length > 0 ? (\n                <InlinePrompt\n                  id={customAlertId}\n                  media={inlinePrompt.media}\n                  sentiment={inlinePrompt.sentiment}\n                >\n                  {inlinePrompt.message}\n                </InlinePrompt>\n              ) : (\n                <Body>{inlinePrompt.message}</Body>\n              )}\n            </motion.div>\n          </div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n"],"names":["ExpressiveMoneyInput","label","currency","currencySelector","options","amount","onAmountChange","className","inlinePrompt","showChevron","autoFocus","loading","onFocusChange","inputId","useId","labelId","customAlertId","currencyId","_jsxs","clsx","children","_jsx","Label","id","htmlFor","role","customRender","CurrencySelector","AmountInput","describedById","onChange","Chevron","shouldShow","Boolean","AnimatePresence","initial","motion","div","opacity","height","animate","transition","delay","duration","exit","sentiment","Object","keys","length","InlinePrompt","media","message","Body"],"mappings":";;;;;;;;;;;;;;;AAoEc,SAAUA,oBAAoBA,CAAC;EAC3CC,KAAK;EACLC,QAAQ;AACRC,EAAAA,gBAAgB,GAAG;AAAEC,IAAAA,OAAO,EAAE;GAAI;EAClCC,MAAM;EACNC,cAAc;EACdC,SAAS;EACTC,YAAY;EACZC,WAAW;EACXC,SAAS;EACTC,OAAO;AACPC,EAAAA;AAAa,CACa,EAAA;AAC1B,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE;AACvB,EAAA,MAAMC,OAAO,GAAGD,WAAK,EAAE;AACvB,EAAA,MAAME,aAAa,GAAGF,WAAK,EAAE;AAC7B,EAAA,MAAMG,UAAU,GAAGH,WAAK,EAAE;AAE1B,EAAA,oBACEI,eAAA,CAAA,KAAA,EAAA;AAAKX,IAAAA,SAAS,EAAEY,SAAI,CAAC,4BAA4B,EAAEZ,SAAS,CAAE;IAAAa,QAAA,EAAA,cAC5DC,cAAA,CAACC,aAAK,EAAA;AAACC,MAAAA,EAAE,EAAER,OAAQ;AAACS,MAAAA,OAAO,EAAEX,OAAQ;AAACN,MAAAA,SAAS,EAAEY,SAAI,CAAC,OAAO,EAAE,oBAAoB,CAAE;AAAAC,MAAAA,QAAA,EAClFnB;KACI,CACP,eAAAiB,eAAA,CAAA,KAAA,EAAA;AACEX,MAAAA,SAAS,EAAEY,SAAI,CAAC,QAAQ,CAAE;AAC1BM,MAAAA,IAAI,EAAC,OAAO;AACZ,MAAA,iBAAA,EAAiBV,OAAQ;AAAA,MAAA,IACpBP,YAAY,GAAG;AAAE,QAAA,kBAAkB,EAAEQ;OAAe,GAAG,EAAE,CAAA;AAAAI,MAAAA,QAAA,gBAE9DC,cAAA,CAAA,KAAA,EAAA;AAAKd,QAAAA,SAAS,EAAC,8CAA8C;AAAAa,QAAAA,QAAA,EAC1DjB,gBAAgB,CAACuB,YAAY,GAAG;AAAEH,UAAAA,EAAE,EAAEN,UAAU;AAAEF,UAAAA;SAAS,CAAC,iBAC3DM,cAAA,CAACM,iCAAgB,EAAA;AACfJ,UAAAA,EAAE,EAAEN,UAAW;AACfF,UAAAA,OAAO,EAAEA,OAAQ;AACjBb,UAAAA,QAAQ,EAAEA,QAAS;UAAA,GACfC;SAAiB;AAExB,OACE,CACL,eAAAkB,cAAA,CAACO,uBAAW,EAAA;AACVL,QAAAA,EAAE,EAAEV,OAAQ;AACZgB,QAAAA,aAAa,EAAEZ,UAAW;AAC1BZ,QAAAA,MAAM,EAAEA,MAAO;AACfH,QAAAA,QAAQ,EAAEA;AACV;AAAA;AACAQ,QAAAA,SAAS,EAAEA,SAAU;AACrBC,QAAAA,OAAO,EAAEA,OAAQ;AACjBmB,QAAAA,QAAQ,EAAExB,cAAe;AACzBM,QAAAA,aAAa,EAAEA;OAAc,CAE/B,eAAAS,cAAA,CAAA,KAAA,EAAA;AAAKd,QAAAA,SAAS,EAAEY,SAAI,CAAC,2BAA2B,EAAE,oCAAoC,CAAE;QAAAC,QAAA,eACtFC,cAAA,CAACU,eAAO,EAAA;UAACC,UAAU,EAAEC,OAAO,CAACxB,WAAW;SAAE;AAC5C,OAAK,CACP;AAAA,KAAK,CACL,eAAAY,cAAA,CAACa,qBAAe,EAAA;AAACC,MAAAA,OAAO,EAAE,KAAM;MAAAf,QAAA,EAC7BZ,YAAY,iBACXa,cAAA,CAAA,KAAA,EAAA;QAAKd,SAAS,EAAEY,SAAI,CAAC,4BAA4B,EAAEX,YAAY,IAAI,OAAO,CAAE;AAAAY,QAAAA,QAAA,eAC1EC,cAAA,CAACe,YAAM,CAACC,GAAG,EAAA;AAETF,UAAAA,OAAO,EAAE;AAAEG,YAAAA,OAAO,EAAE,CAAC;AAAEC,YAAAA,MAAM,EAAE;WAAI;AACnCC,UAAAA,OAAO,EAAE;AACPF,YAAAA,OAAO,EAAE,CAAC;AACVC,YAAAA,MAAM,EAAE,MAAM;AACdE,YAAAA,UAAU,EAAE;AAAEC,cAAAA,KAAK,EAAE,IAAI;AAAEC,cAAAA,QAAQ,EAAE;AAAG;WACxC;AACFC,UAAAA,IAAI,EAAE;AAAEN,YAAAA,OAAO,EAAE,CAAC;AAAEC,YAAAA,MAAM,EAAE;WAAI;UAAAnB,QAAA,EAE/BZ,YAAY,CAACqC,SAAS,IAAIC,MAAM,CAACC,IAAI,CAACvC,YAAY,CAACqC,SAAS,CAAC,CAACG,MAAM,GAAG,CAAC,gBACvE3B,cAAA,CAAC4B,yBAAY,EAAA;AACX1B,YAAAA,EAAE,EAAEP,aAAc;YAClBkC,KAAK,EAAE1C,YAAY,CAAC0C,KAAM;YAC1BL,SAAS,EAAErC,YAAY,CAACqC,SAAU;YAAAzB,QAAA,EAEjCZ,YAAY,CAAC2C;AAAO,WACT,CAAC,gBAEf9B,cAAA,CAAC+B,YAAI,EAAA;YAAAhC,QAAA,EAAEZ,YAAY,CAAC2C;WAAc;AACnC,SAAA,EAnBInC,aAoBK;OACT;AACN,KACc,CACnB;AAAA,GAAK,CAAC;AAEV;;;;"}

package/build/ExpressiveMoneyInput/ExpressiveMoneyInput.mjs

@@ -1,6 +1,6 @@
 import Body from '../Body/Body.mjs';
 import { clsx } from 'clsx';
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'motion/react';
 import { useId } from 'react';
 import { CurrencySelector } from './CurrencySelector/CurrencySelector.mjs';
 import { AmountInput } from './AmountInput/AmountInput.mjs';

package/build/ExpressiveMoneyInput/ExpressiveMoneyInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ExpressiveMoneyInput.mjs","sources":["../../src/ExpressiveMoneyInput/ExpressiveMoneyInput.tsx"],"sourcesContent":["import Body from '../Body';\nimport { clsx } from 'clsx';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { useId, type ReactNode } from 'react';\n\nimport {\n  type Props as CurrencySelectorProps,\n  CurrencySelector,\n} from './CurrencySelector/CurrencySelector';\nimport { CommonProps } from '../common';\nimport { AmountInput } from './AmountInput/AmountInput';\nimport { Chevron } from './Chevron/Chevron';\nimport { InlinePrompt, type InlinePromptProps } from '../Prompt/InlinePrompt';\nimport Label from '../Label';\n\ntype AmountType = number | null;\nexport type CurrencyType = string;\n\ntype DefaultCurrencySelectorInstanceType = Pick<\n  CurrencySelectorProps,\n  'addons' | 'options' | 'onChange' | 'onOpen' | 'onSearchChange'\n>;\ntype CustomCurrencySelectorInstanceType = {\n  customRender?: (props: { id: string; labelId: string }) => ReactNode;\n};\ntype CurrencySelectorType = DefaultCurrencySelectorInstanceType &\n  CustomCurrencySelectorInstanceType;\n\nexport type Props = {\n  label?: ReactNode;\n  currencySelector?: CurrencySelectorType;\n  amount?: AmountType;\n  /**\n   * The currency code, e.g. `USD`, `EUR`, `GBP`, etc. Governs the flag rendered in the currency selector.\n   */\n  currency: CurrencyType;\n  inlinePrompt?: {\n    sentiment?: InlinePromptProps['sentiment'];\n    message: InlinePromptProps['children'];\n    media?: InlinePromptProps['media'];\n  };\n  showChevron?: boolean;\n  /**\n   * If set, it auto-focuses the amount input upon component mount.<br />\n   * ⚠️ **Use with caution**, as it may impact user experience and\n   * fail [WCAG 2.4.3 requirements](https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html)\n   */\n  autoFocus?: boolean;\n  /**\n   * Dims the input to indicate a loading state. Does not disable it.\n   */\n  loading?: boolean;\n  onAmountChange: (amount: AmountType) => void;\n  onFocusChange?: (focused: boolean) => void;\n} & CommonProps;\n\n/**\n * This component has been kindly contributed by our friends at the `Send` team 🎉.\n *\n * Some patterns and implementation details used in this component may differ\n * from what's commonly used in the Design System. The overall build and QA was managed\n * by the contributing team directly, and such did not follow a typical DS lifecycle.\n *\n * While we house this component and will help facilitate its future iterations,\n * direct contributions by consuming product teams are highly encouraged.\n *\n * > ⚠️ **Prerequisite:** <br />The component depends on the\n * [framer-motion](https://www.npmjs.com/package/framer-motion) package, which has been\n * deliberately excluded from the Design System bundle and kept as an opt-in only.\n * **Make sure to add it to your project dependencies.**\n */\nexport default function ExpressiveMoneyInput({\n  label,\n  currency,\n  currencySelector = { options: [] },\n  amount,\n  onAmountChange,\n  className,\n  inlinePrompt,\n  showChevron,\n  autoFocus,\n  loading,\n  onFocusChange,\n}: Props) {\n  const inputId = useId();\n  const labelId = useId();\n  const customAlertId = useId();\n  const currencyId = useId();\n\n  return (\n    <div className={clsx('wds-expressive-money-input', className)}>\n      <Label id={labelId} htmlFor={inputId} className={clsx('m-b-1', 'font-weight-normal')}>\n        {label}\n      </Label>\n      <div\n        className={clsx('d-flex')}\n        role=\"group\"\n        aria-labelledby={labelId}\n        {...(inlinePrompt ? { 'aria-describedby': customAlertId } : {})}\n      >\n        <div className=\"wds-expressive-money-input-currency-selector\">\n          {currencySelector.customRender?.({ id: currencyId, labelId }) ?? (\n            <CurrencySelector\n              id={currencyId}\n              labelId={labelId}\n              currency={currency}\n              {...currencySelector}\n            />\n          )}\n        </div>\n        <AmountInput\n          id={inputId}\n          describedById={currencyId}\n          amount={amount}\n          currency={currency}\n          // eslint-disable-next-line jsx-a11y/no-autofocus\n          autoFocus={autoFocus}\n          loading={loading}\n          onChange={onAmountChange}\n          onFocusChange={onFocusChange}\n        />\n        <div className={clsx('d-flex align-items-center', 'wds-expressive-money-input-chevron')}>\n          <Chevron shouldShow={Boolean(showChevron)} />\n        </div>\n      </div>\n      <AnimatePresence initial={false}>\n        {inlinePrompt && (\n          <div className={clsx('d-flex justify-content-end', inlinePrompt && 'm-t-1')}>\n            <motion.div\n              key={customAlertId}\n              initial={{ opacity: 0, height: 0 }}\n              animate={{\n                opacity: 1,\n                height: 'auto',\n                transition: { delay: 0.75, duration: 0.3 },\n              }}\n              exit={{ opacity: 0, height: 0 }}\n            >\n              {inlinePrompt.sentiment && Object.keys(inlinePrompt.sentiment).length > 0 ? (\n                <InlinePrompt\n                  id={customAlertId}\n                  media={inlinePrompt.media}\n                  sentiment={inlinePrompt.sentiment}\n                >\n                  {inlinePrompt.message}\n                </InlinePrompt>\n              ) : (\n                <Body>{inlinePrompt.message}</Body>\n              )}\n            </motion.div>\n          </div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n"],"names":["ExpressiveMoneyInput","label","currency","currencySelector","options","amount","onAmountChange","className","inlinePrompt","showChevron","autoFocus","loading","onFocusChange","inputId","useId","labelId","customAlertId","currencyId","_jsxs","clsx","children","_jsx","Label","id","htmlFor","role","customRender","CurrencySelector","AmountInput","describedById","onChange","Chevron","shouldShow","Boolean","AnimatePresence","initial","motion","div","opacity","height","animate","transition","delay","duration","exit","sentiment","Object","keys","length","InlinePrompt","media","message","Body"],"mappings":"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"}
+{"version":3,"file":"ExpressiveMoneyInput.mjs","sources":["../../src/ExpressiveMoneyInput/ExpressiveMoneyInput.tsx"],"sourcesContent":["import Body from '../Body';\nimport { clsx } from 'clsx';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { useId, type ReactNode } from 'react';\n\nimport { CurrencySelector, type CurrencySelectorProps } from './CurrencySelector/CurrencySelector';\nimport { CommonProps } from '../common';\nimport { AmountInput } from './AmountInput/AmountInput';\nimport { Chevron } from './Chevron/Chevron';\nimport { InlinePrompt, type InlinePromptProps } from '../Prompt/InlinePrompt';\nimport Label from '../Label';\n\ntype AmountType = number | null;\nexport type CurrencyType = string;\n\ntype DefaultCurrencySelectorInstanceType = Pick<\n  CurrencySelectorProps,\n  'addons' | 'options' | 'onChange' | 'onOpen' | 'onSearchChange'\n>;\ntype CustomCurrencySelectorInstanceType = {\n  customRender?: (props: { id: string; labelId: string }) => ReactNode;\n};\ntype CurrencySelectorType = DefaultCurrencySelectorInstanceType &\n  CustomCurrencySelectorInstanceType;\n\nexport type ExpressiveMoneyInputProps = {\n  label?: ReactNode;\n  currencySelector?: CurrencySelectorType;\n  amount?: AmountType;\n  /**\n   * The currency code, e.g. `USD`, `EUR`, `GBP`, etc. Governs the flag rendered in the currency selector.\n   */\n  currency: CurrencyType;\n  inlinePrompt?: {\n    sentiment?: InlinePromptProps['sentiment'];\n    message: InlinePromptProps['children'];\n    media?: InlinePromptProps['media'];\n  };\n  showChevron?: boolean;\n  /**\n   * If set, it auto-focuses the amount input upon component mount.<br />\n   * ⚠️ **Use with caution**, as it may impact user experience and\n   * fail [WCAG 2.4.3 requirements](https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html)\n   */\n  autoFocus?: boolean;\n  /**\n   * Dims the input to indicate a loading state. Does not disable it.\n   */\n  loading?: boolean;\n  onAmountChange: (amount: AmountType) => void;\n  onFocusChange?: (focused: boolean) => void;\n} & CommonProps;\n\n/**\n * This component has been kindly contributed by our friends at the `Send` team 🎉.\n *\n * Some patterns and implementation details used in this component may differ\n * from what's commonly used in the Design System. The overall build and QA was managed\n * by the contributing team directly, and such did not follow a typical DS lifecycle.\n *\n * While we house this component and will help facilitate its future iterations,\n * direct contributions by consuming product teams are highly encouraged.\n *\n * > ⚠️ **Prerequisite:** <br />The component depends on the\n * [motion](https://www.npmjs.com/package/motion) package, which has been\n * deliberately excluded from the Design System bundle and kept as an opt-in only.\n * **Make sure to add it to your project dependencies.**\n */\nexport default function ExpressiveMoneyInput({\n  label,\n  currency,\n  currencySelector = { options: [] },\n  amount,\n  onAmountChange,\n  className,\n  inlinePrompt,\n  showChevron,\n  autoFocus,\n  loading,\n  onFocusChange,\n}: ExpressiveMoneyInputProps) {\n  const inputId = useId();\n  const labelId = useId();\n  const customAlertId = useId();\n  const currencyId = useId();\n\n  return (\n    <div className={clsx('wds-expressive-money-input', className)}>\n      <Label id={labelId} htmlFor={inputId} className={clsx('m-b-1', 'font-weight-normal')}>\n        {label}\n      </Label>\n      <div\n        className={clsx('d-flex')}\n        role=\"group\"\n        aria-labelledby={labelId}\n        {...(inlinePrompt ? { 'aria-describedby': customAlertId } : {})}\n      >\n        <div className=\"wds-expressive-money-input-currency-selector\">\n          {currencySelector.customRender?.({ id: currencyId, labelId }) ?? (\n            <CurrencySelector\n              id={currencyId}\n              labelId={labelId}\n              currency={currency}\n              {...currencySelector}\n            />\n          )}\n        </div>\n        <AmountInput\n          id={inputId}\n          describedById={currencyId}\n          amount={amount}\n          currency={currency}\n          // eslint-disable-next-line jsx-a11y/no-autofocus\n          autoFocus={autoFocus}\n          loading={loading}\n          onChange={onAmountChange}\n          onFocusChange={onFocusChange}\n        />\n        <div className={clsx('d-flex align-items-center', 'wds-expressive-money-input-chevron')}>\n          <Chevron shouldShow={Boolean(showChevron)} />\n        </div>\n      </div>\n      <AnimatePresence initial={false}>\n        {inlinePrompt && (\n          <div className={clsx('d-flex justify-content-end', inlinePrompt && 'm-t-1')}>\n            <motion.div\n              key={customAlertId}\n              initial={{ opacity: 0, height: 0 }}\n              animate={{\n                opacity: 1,\n                height: 'auto',\n                transition: { delay: 0.75, duration: 0.3 },\n              }}\n              exit={{ opacity: 0, height: 0 }}\n            >\n              {inlinePrompt.sentiment && Object.keys(inlinePrompt.sentiment).length > 0 ? (\n                <InlinePrompt\n                  id={customAlertId}\n                  media={inlinePrompt.media}\n                  sentiment={inlinePrompt.sentiment}\n                >\n                  {inlinePrompt.message}\n                </InlinePrompt>\n              ) : (\n                <Body>{inlinePrompt.message}</Body>\n              )}\n            </motion.div>\n          </div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n"],"names":["ExpressiveMoneyInput","label","currency","currencySelector","options","amount","onAmountChange","className","inlinePrompt","showChevron","autoFocus","loading","onFocusChange","inputId","useId","labelId","customAlertId","currencyId","_jsxs","clsx","children","_jsx","Label","id","htmlFor","role","customRender","CurrencySelector","AmountInput","describedById","onChange","Chevron","shouldShow","Boolean","AnimatePresence","initial","motion","div","opacity","height","animate","transition","delay","duration","exit","sentiment","Object","keys","length","InlinePrompt","media","message","Body"],"mappings":"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"}

package/build/ExpressiveMoneyInput/hooks/useInputStyle.js.map

@@ -1 +1 @@
-{"version":3,"file":"useInputStyle.js","sources":["../../../src/ExpressiveMoneyInput/hooks/useInputStyle.ts"],"sourcesContent":["import {\n  type CSSProperties,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useState,\n} from 'react';\nimport { Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\n\ntype InputStyleObject = {\n  value: string;\n  focus: boolean;\n  inputElement: RefObject<HTMLInputElement> | null;\n} & Pick<ExpressiveMoneyInputProps, 'loading'>;\n\nexport const useInputStyle = ({ value, focus, inputElement, loading }: InputStyleObject) => {\n  const initialRender = !useTimeout(300);\n  const inputWidth = useFirstDefinedValue(inputElement?.current?.clientWidth, [\n    inputElement?.current,\n    value,\n  ]);\n\n  const getStyle = useCallback((): CSSProperties => {\n    const fontSize = getFontSize(value, focus, inputWidth);\n\n    return {\n      fontSize,\n      height: fontSize,\n      // aligns the top of the digit with the currency button\n      marginTop: fontSize * -0.19,\n      // if the input loads with a pre-filled value, we don't want to animate the font-size immediately\n      transition: initialRender ? 'none' : undefined,\n      color: loading ? 'var(--color-interactive-secondary)' : undefined,\n    };\n  }, [value, focus, inputWidth, loading, initialRender]);\n\n  const [style, setStyle] = useState<CSSProperties>(() => getStyle());\n\n  useLayoutEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- Computing style based on layout measurements\n    setStyle(getStyle());\n  }, [value, focus, loading, inputWidth, getStyle]);\n\n  return style;\n};\n\nfunction getFontSize(inputValue: string, isFocused: boolean, inputWidth: number | undefined) {\n  const defaultFontSize = 52;\n  const focusFontSize = 90;\n  const minimumFontSize = 34;\n\n  let fontSize = isFocused ? focusFontSize : defaultFontSize;\n\n  if (typeof inputWidth === 'undefined') {\n    return fontSize;\n  }\n  const textLength = inputValue.length;\n  const maxCharactersWithoutShrinking = Math.floor(inputWidth / 40);\n\n  if (textLength > maxCharactersWithoutShrinking) {\n    const adjustedSize = Math.round((inputWidth / textLength) * 1.9);\n    fontSize = Math.min(fontSize, adjustedSize);\n  }\n\n  return Math.max(fontSize, minimumFontSize);\n}\n\nconst useFirstDefinedValue = (newValue: number | undefined, dependencies: unknown[]) => {\n  const [value, setValue] = useState<number | undefined>(newValue);\n\n  useLayoutEffect(() => {\n    if (typeof newValue !== 'undefined' && typeof value === 'undefined') {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- Lazy initialization from prop\n      setValue(newValue);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [...dependencies, value, newValue]);\n\n  return value;\n};\n\nconst useTimeout = (delay: number) => {\n  const [ready, setReady] = useState(false);\n\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      setReady(true);\n    }, delay);\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [delay]);\n\n  return ready;\n};\n"],"names":["useInputStyle","value","focus","inputElement","loading","initialRender","useTimeout","inputWidth","useFirstDefinedValue","current","clientWidth","getStyle","useCallback","fontSize","getFontSize","height","marginTop","transition","undefined","color","style","setStyle","useState","useLayoutEffect","inputValue","isFocused","defaultFontSize","focusFontSize","minimumFontSize","textLength","length","maxCharactersWithoutShrinking","Math","floor","adjustedSize","round","min","max","newValue","dependencies","setValue","delay","ready","setReady","useEffect","timeout","setTimeout","clearTimeout"],"mappings":"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"}
+{"version":3,"file":"useInputStyle.js","sources":["../../../src/ExpressiveMoneyInput/hooks/useInputStyle.ts"],"sourcesContent":["import {\n  type CSSProperties,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useState,\n} from 'react';\nimport type { ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\n\ntype InputStyleObject = {\n  value: string;\n  focus: boolean;\n  inputElement: RefObject<HTMLInputElement> | null;\n} & Pick<ExpressiveMoneyInputProps, 'loading'>;\n\nexport const useInputStyle = ({ value, focus, inputElement, loading }: InputStyleObject) => {\n  const initialRender = !useTimeout(300);\n  const inputWidth = useFirstDefinedValue(inputElement?.current?.clientWidth, [\n    inputElement?.current,\n    value,\n  ]);\n\n  const getStyle = useCallback((): CSSProperties => {\n    const fontSize = getFontSize(value, focus, inputWidth);\n\n    return {\n      fontSize,\n      height: fontSize,\n      // aligns the top of the digit with the currency button\n      marginTop: fontSize * -0.19,\n      // if the input loads with a pre-filled value, we don't want to animate the font-size immediately\n      transition: initialRender ? 'none' : undefined,\n      color: loading ? 'var(--color-interactive-secondary)' : undefined,\n    };\n  }, [value, focus, inputWidth, loading, initialRender]);\n\n  const [style, setStyle] = useState<CSSProperties>(() => getStyle());\n\n  useLayoutEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- Computing style based on layout measurements\n    setStyle(getStyle());\n  }, [value, focus, loading, inputWidth, getStyle]);\n\n  return style;\n};\n\nfunction getFontSize(inputValue: string, isFocused: boolean, inputWidth: number | undefined) {\n  const defaultFontSize = 52;\n  const focusFontSize = 90;\n  const minimumFontSize = 34;\n\n  let fontSize = isFocused ? focusFontSize : defaultFontSize;\n\n  if (typeof inputWidth === 'undefined') {\n    return fontSize;\n  }\n  const textLength = inputValue.length;\n  const maxCharactersWithoutShrinking = Math.floor(inputWidth / 40);\n\n  if (textLength > maxCharactersWithoutShrinking) {\n    const adjustedSize = Math.round((inputWidth / textLength) * 1.9);\n    fontSize = Math.min(fontSize, adjustedSize);\n  }\n\n  return Math.max(fontSize, minimumFontSize);\n}\n\nconst useFirstDefinedValue = (newValue: number | undefined, dependencies: unknown[]) => {\n  const [value, setValue] = useState<number | undefined>(newValue);\n\n  useLayoutEffect(() => {\n    if (typeof newValue !== 'undefined' && typeof value === 'undefined') {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- Lazy initialization from prop\n      setValue(newValue);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [...dependencies, value, newValue]);\n\n  return value;\n};\n\nconst useTimeout = (delay: number) => {\n  const [ready, setReady] = useState(false);\n\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      setReady(true);\n    }, delay);\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [delay]);\n\n  return ready;\n};\n"],"names":["useInputStyle","value","focus","inputElement","loading","initialRender","useTimeout","inputWidth","useFirstDefinedValue","current","clientWidth","getStyle","useCallback","fontSize","getFontSize","height","marginTop","transition","undefined","color","style","setStyle","useState","useLayoutEffect","inputValue","isFocused","defaultFontSize","focusFontSize","minimumFontSize","textLength","length","maxCharactersWithoutShrinking","Math","floor","adjustedSize","round","min","max","newValue","dependencies","setValue","delay","ready","setReady","useEffect","timeout","setTimeout","clearTimeout"],"mappings":";;;;AAgBO,MAAMA,aAAa,GAAGA,CAAC;EAAEC,KAAK;EAAEC,KAAK;EAAEC,YAAY;AAAEC,EAAAA;AAAO,CAAoB,KAAI;AACzF,EAAA,MAAMC,aAAa,GAAG,CAACC,UAAU,CAAC,GAAG,CAAC;AACtC,EAAA,MAAMC,UAAU,GAAGC,oBAAoB,CAACL,YAAY,EAAEM,OAAO,EAAEC,WAAW,EAAE,CAC1EP,YAAY,EAAEM,OAAO,EACrBR,KAAK,CACN,CAAC;AAEF,EAAA,MAAMU,QAAQ,GAAGC,iBAAW,CAAC,MAAoB;IAC/C,MAAMC,QAAQ,GAAGC,WAAW,CAACb,KAAK,EAAEC,KAAK,EAAEK,UAAU,CAAC;IAEtD,OAAO;MACLM,QAAQ;AACRE,MAAAA,MAAM,EAAEF,QAAQ;AAChB;AACAG,MAAAA,SAAS,EAAEH,QAAQ,GAAG,KAAK;AAC3B;AACAI,MAAAA,UAAU,EAAEZ,aAAa,GAAG,MAAM,GAAGa,SAAS;AAC9CC,MAAAA,KAAK,EAAEf,OAAO,GAAG,oCAAoC,GAAGc;KACzD;AACH,EAAA,CAAC,EAAE,CAACjB,KAAK,EAAEC,KAAK,EAAEK,UAAU,EAAEH,OAAO,EAAEC,aAAa,CAAC,CAAC;AAEtD,EAAA,MAAM,CAACe,KAAK,EAAEC,QAAQ,CAAC,GAAGC,cAAQ,CAAgB,MAAMX,QAAQ,EAAE,CAAC;AAEnEY,EAAAA,qBAAe,CAAC,MAAK;AACnB;AACAF,IAAAA,QAAQ,CAACV,QAAQ,EAAE,CAAC;AACtB,EAAA,CAAC,EAAE,CAACV,KAAK,EAAEC,KAAK,EAAEE,OAAO,EAAEG,UAAU,EAAEI,QAAQ,CAAC,CAAC;AAEjD,EAAA,OAAOS,KAAK;AACd;AAEA,SAASN,WAAWA,CAACU,UAAkB,EAAEC,SAAkB,EAAElB,UAA8B,EAAA;EACzF,MAAMmB,eAAe,GAAG,EAAE;EAC1B,MAAMC,aAAa,GAAG,EAAE;EACxB,MAAMC,eAAe,GAAG,EAAE;AAE1B,EAAA,IAAIf,QAAQ,GAAGY,SAAS,GAAGE,aAAa,GAAGD,eAAe;AAE1D,EAAA,IAAI,OAAOnB,UAAU,KAAK,WAAW,EAAE;AACrC,IAAA,OAAOM,QAAQ;AACjB,EAAA;AACA,EAAA,MAAMgB,UAAU,GAAGL,UAAU,CAACM,MAAM;EACpC,MAAMC,6BAA6B,GAAGC,IAAI,CAACC,KAAK,CAAC1B,UAAU,GAAG,EAAE,CAAC;EAEjE,IAAIsB,UAAU,GAAGE,6BAA6B,EAAE;IAC9C,MAAMG,YAAY,GAAGF,IAAI,CAACG,KAAK,CAAE5B,UAAU,GAAGsB,UAAU,GAAI,GAAG,CAAC;IAChEhB,QAAQ,GAAGmB,IAAI,CAACI,GAAG,CAACvB,QAAQ,EAAEqB,YAAY,CAAC;AAC7C,EAAA;AAEA,EAAA,OAAOF,IAAI,CAACK,GAAG,CAACxB,QAAQ,EAAEe,eAAe,CAAC;AAC5C;AAEA,MAAMpB,oBAAoB,GAAGA,CAAC8B,QAA4B,EAAEC,YAAuB,KAAI;EACrF,MAAM,CAACtC,KAAK,EAAEuC,QAAQ,CAAC,GAAGlB,cAAQ,CAAqBgB,QAAQ,CAAC;AAEhEf,EAAAA,qBAAe,CAAC,MAAK;IACnB,IAAI,OAAOe,QAAQ,KAAK,WAAW,IAAI,OAAOrC,KAAK,KAAK,WAAW,EAAE;AACnE;MACAuC,QAAQ,CAACF,QAAQ,CAAC;AACpB,IAAA;AACA;EACF,CAAC,EAAE,CAAC,GAAGC,YAAY,EAAEtC,KAAK,EAAEqC,QAAQ,CAAC,CAAC;AAEtC,EAAA,OAAOrC,KAAK;AACd,CAAC;AAED,MAAMK,UAAU,GAAImC,KAAa,IAAI;EACnC,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGrB,cAAQ,CAAC,KAAK,CAAC;AAEzCsB,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,MAAMC,OAAO,GAAGC,UAAU,CAAC,MAAK;MAC9BH,QAAQ,CAAC,IAAI,CAAC;IAChB,CAAC,EAAEF,KAAK,CAAC;AAET,IAAA,OAAO,MAAK;MACVM,YAAY,CAACF,OAAO,CAAC;IACvB,CAAC;AACH,EAAA,CAAC,EAAE,CAACJ,KAAK,CAAC,CAAC;AAEX,EAAA,OAAOC,KAAK;AACd,CAAC;;;;"}

package/build/ExpressiveMoneyInput/hooks/useInputStyle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useInputStyle.mjs","sources":["../../../src/ExpressiveMoneyInput/hooks/useInputStyle.ts"],"sourcesContent":["import {\n  type CSSProperties,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useState,\n} from 'react';\nimport { Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\n\ntype InputStyleObject = {\n  value: string;\n  focus: boolean;\n  inputElement: RefObject<HTMLInputElement> | null;\n} & Pick<ExpressiveMoneyInputProps, 'loading'>;\n\nexport const useInputStyle = ({ value, focus, inputElement, loading }: InputStyleObject) => {\n  const initialRender = !useTimeout(300);\n  const inputWidth = useFirstDefinedValue(inputElement?.current?.clientWidth, [\n    inputElement?.current,\n    value,\n  ]);\n\n  const getStyle = useCallback((): CSSProperties => {\n    const fontSize = getFontSize(value, focus, inputWidth);\n\n    return {\n      fontSize,\n      height: fontSize,\n      // aligns the top of the digit with the currency button\n      marginTop: fontSize * -0.19,\n      // if the input loads with a pre-filled value, we don't want to animate the font-size immediately\n      transition: initialRender ? 'none' : undefined,\n      color: loading ? 'var(--color-interactive-secondary)' : undefined,\n    };\n  }, [value, focus, inputWidth, loading, initialRender]);\n\n  const [style, setStyle] = useState<CSSProperties>(() => getStyle());\n\n  useLayoutEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- Computing style based on layout measurements\n    setStyle(getStyle());\n  }, [value, focus, loading, inputWidth, getStyle]);\n\n  return style;\n};\n\nfunction getFontSize(inputValue: string, isFocused: boolean, inputWidth: number | undefined) {\n  const defaultFontSize = 52;\n  const focusFontSize = 90;\n  const minimumFontSize = 34;\n\n  let fontSize = isFocused ? focusFontSize : defaultFontSize;\n\n  if (typeof inputWidth === 'undefined') {\n    return fontSize;\n  }\n  const textLength = inputValue.length;\n  const maxCharactersWithoutShrinking = Math.floor(inputWidth / 40);\n\n  if (textLength > maxCharactersWithoutShrinking) {\n    const adjustedSize = Math.round((inputWidth / textLength) * 1.9);\n    fontSize = Math.min(fontSize, adjustedSize);\n  }\n\n  return Math.max(fontSize, minimumFontSize);\n}\n\nconst useFirstDefinedValue = (newValue: number | undefined, dependencies: unknown[]) => {\n  const [value, setValue] = useState<number | undefined>(newValue);\n\n  useLayoutEffect(() => {\n    if (typeof newValue !== 'undefined' && typeof value === 'undefined') {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- Lazy initialization from prop\n      setValue(newValue);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [...dependencies, value, newValue]);\n\n  return value;\n};\n\nconst useTimeout = (delay: number) => {\n  const [ready, setReady] = useState(false);\n\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      setReady(true);\n    }, delay);\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [delay]);\n\n  return ready;\n};\n"],"names":["useInputStyle","value","focus","inputElement","loading","initialRender","useTimeout","inputWidth","useFirstDefinedValue","current","clientWidth","getStyle","useCallback","fontSize","getFontSize","height","marginTop","transition","undefined","color","style","setStyle","useState","useLayoutEffect","inputValue","isFocused","defaultFontSize","focusFontSize","minimumFontSize","textLength","length","maxCharactersWithoutShrinking","Math","floor","adjustedSize","round","min","max","newValue","dependencies","setValue","delay","ready","setReady","useEffect","timeout","setTimeout","clearTimeout"],"mappings":"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"}
+{"version":3,"file":"useInputStyle.mjs","sources":["../../../src/ExpressiveMoneyInput/hooks/useInputStyle.ts"],"sourcesContent":["import {\n  type CSSProperties,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useState,\n} from 'react';\nimport type { ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\n\ntype InputStyleObject = {\n  value: string;\n  focus: boolean;\n  inputElement: RefObject<HTMLInputElement> | null;\n} & Pick<ExpressiveMoneyInputProps, 'loading'>;\n\nexport const useInputStyle = ({ value, focus, inputElement, loading }: InputStyleObject) => {\n  const initialRender = !useTimeout(300);\n  const inputWidth = useFirstDefinedValue(inputElement?.current?.clientWidth, [\n    inputElement?.current,\n    value,\n  ]);\n\n  const getStyle = useCallback((): CSSProperties => {\n    const fontSize = getFontSize(value, focus, inputWidth);\n\n    return {\n      fontSize,\n      height: fontSize,\n      // aligns the top of the digit with the currency button\n      marginTop: fontSize * -0.19,\n      // if the input loads with a pre-filled value, we don't want to animate the font-size immediately\n      transition: initialRender ? 'none' : undefined,\n      color: loading ? 'var(--color-interactive-secondary)' : undefined,\n    };\n  }, [value, focus, inputWidth, loading, initialRender]);\n\n  const [style, setStyle] = useState<CSSProperties>(() => getStyle());\n\n  useLayoutEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- Computing style based on layout measurements\n    setStyle(getStyle());\n  }, [value, focus, loading, inputWidth, getStyle]);\n\n  return style;\n};\n\nfunction getFontSize(inputValue: string, isFocused: boolean, inputWidth: number | undefined) {\n  const defaultFontSize = 52;\n  const focusFontSize = 90;\n  const minimumFontSize = 34;\n\n  let fontSize = isFocused ? focusFontSize : defaultFontSize;\n\n  if (typeof inputWidth === 'undefined') {\n    return fontSize;\n  }\n  const textLength = inputValue.length;\n  const maxCharactersWithoutShrinking = Math.floor(inputWidth / 40);\n\n  if (textLength > maxCharactersWithoutShrinking) {\n    const adjustedSize = Math.round((inputWidth / textLength) * 1.9);\n    fontSize = Math.min(fontSize, adjustedSize);\n  }\n\n  return Math.max(fontSize, minimumFontSize);\n}\n\nconst useFirstDefinedValue = (newValue: number | undefined, dependencies: unknown[]) => {\n  const [value, setValue] = useState<number | undefined>(newValue);\n\n  useLayoutEffect(() => {\n    if (typeof newValue !== 'undefined' && typeof value === 'undefined') {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- Lazy initialization from prop\n      setValue(newValue);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [...dependencies, value, newValue]);\n\n  return value;\n};\n\nconst useTimeout = (delay: number) => {\n  const [ready, setReady] = useState(false);\n\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      setReady(true);\n    }, delay);\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [delay]);\n\n  return ready;\n};\n"],"names":["useInputStyle","value","focus","inputElement","loading","initialRender","useTimeout","inputWidth","useFirstDefinedValue","current","clientWidth","getStyle","useCallback","fontSize","getFontSize","height","marginTop","transition","undefined","color","style","setStyle","useState","useLayoutEffect","inputValue","isFocused","defaultFontSize","focusFontSize","minimumFontSize","textLength","length","maxCharactersWithoutShrinking","Math","floor","adjustedSize","round","min","max","newValue","dependencies","setValue","delay","ready","setReady","useEffect","timeout","setTimeout","clearTimeout"],"mappings":"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"}