@transferwise/components 46.112.1 → 46.113.1

package/build/expressiveMoneyInput/amountInput/AmountInput.mjs

@@ -0,0 +1,279 @@
+import { formatAmount } from '@transferwise/formatting';
+import { clsx } from 'clsx';
+import { AnimatePresence } from 'framer-motion';
+import { useState, useMemo, useRef, useEffect } from 'react';
+import { useIntl } from 'react-intl';
+import { AnimatedNumber } from '../animatedNumber/AnimatedNumber.mjs';
+import { useFocus } from '../hooks/useFocus.mjs';
+import { useInputStyle } from '../hooks/useInputStyle.mjs';
+import { getFormattedString, getUnformattedNumber, getGroupSeparator, getDecimalSeparator, getDecimalCount, isInputPossiblyOverflowing, isAllowedInputKey, getEnteredDecimalsCount } from './utils.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const AmountInput = ({
+  id,
+  describedById,
+  amount,
+  currency,
+  autoFocus,
+  onChange,
+  onFocusChange,
+  loading
+}) => {
+  const intl = useIntl();
+  const {
+    focus,
+    setFocus,
+    visualFocus,
+    setVisualFocus
+  } = useFocus();
+  const [value, setValue] = useState(amount ? getFormattedString({
+    value: amount,
+    currency,
+    locale: intl.locale
+  }) : '');
+  const numericValue = useMemo(() => {
+    return getUnformattedNumber({
+      value,
+      currency,
+      locale: intl.locale
+    });
+  }, [value, currency, intl.locale]);
+  const valueWithFullDecimals = useMemo(() => {
+    return getFormattedString({
+      value: numericValue ?? 0,
+      currency,
+      locale: intl.locale,
+      alwaysShowDecimals: true
+    });
+  }, [numericValue, currency, intl.locale]);
+  const ref = useRef(null);
+  useEffect(() => {
+    if (autoFocus) {
+      ref.current?.focus();
+    }
+  }, []);
+  const placeholder = getPlaceholder(currency, intl.locale);
+  const groupSeparator = getGroupSeparator(currency, intl.locale);
+  const decimalSeparator = getDecimalSeparator(currency, intl.locale);
+  const maxDecimalCount = getDecimalCount(currency, intl.locale);
+  const decimalPart = getDecimalPart(value, decimalSeparator);
+  const decimalMode = decimalSeparator && value.includes(decimalSeparator);
+  useEffect(() => {
+    if (!focus) {
+      setValue(amount ? getFormattedString({
+        value: amount,
+        currency,
+        locale: intl.locale
+      }) : '');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [amount]);
+  useEffect(() => {
+    onFocusChange?.(visualFocus);
+  }, [visualFocus]);
+  const shouldReformatAfterUserInput = newValue => {
+    // don't reformat if formatting would wipe out user's input
+    if (reformatValue(newValue) === '') {
+      return false;
+    }
+    const endsWithDecimalSeparator = decimalSeparator && newValue.endsWith(decimalSeparator);
+    const endsWithGroupSeparator = groupSeparator && newValue.endsWith(groupSeparator);
+    // if the user has entered a seperator to the end, formatting would delete it
+    if (endsWithDecimalSeparator || endsWithGroupSeparator) {
+      return false;
+    }
+    const containsDecimalSeparator = decimalSeparator && newValue.includes(decimalSeparator);
+    if (containsDecimalSeparator) {
+      const enteredDecimalsCount = getEnteredDecimalsCount(newValue, decimalSeparator);
+      // don't reformat until user has entered all the allowed decimals
+      // for example, we don't want 1.1 to be reformatted to 1.10 immediately
+      if (enteredDecimalsCount < maxDecimalCount) {
+        return false;
+      }
+    }
+    return true;
+  };
+  const reformatValue = newValue => {
+    const unformattedValue = getUnformattedNumber({
+      value: newValue,
+      currency,
+      locale: intl.locale
+    });
+    const formattedValue = unformattedValue ? getFormattedString({
+      value: unformattedValue,
+      currency,
+      locale: intl.locale
+    }) : '';
+    return formattedValue;
+  };
+  const handleChange = newValue => {
+    const oldCursorPosition = ref.current?.selectionStart ?? 0;
+    const newFormattedString = shouldReformatAfterUserInput(newValue) ? reformatValue(newValue) : newValue;
+    setValue(newFormattedString);
+    const newNumber = getUnformattedNumber({
+      value: newFormattedString,
+      currency,
+      locale: intl.locale
+    });
+    if (newNumber !== numericValue) {
+      if (numericValue || newNumber) {
+        onChange(newNumber);
+      }
+    }
+    const newCursorPosition = oldCursorPosition + (newFormattedString.length - newValue.length);
+    requestAnimationFrame(() => {
+      ref?.current?.setSelectionRange(newCursorPosition, newCursorPosition);
+    });
+  };
+  const handlePaste = e => {
+    e.preventDefault();
+    const clipboardData = e.clipboardData?.getData('text/plain');
+    if (!clipboardData) {
+      return;
+    }
+    // need to sanitise the pasted value otherwise other validation logic will ignore the input entirely
+    const sanitisedValue = reformatValue(clipboardData);
+    handleChange(sanitisedValue);
+  };
+  const handleBlur = () => {
+    setFocus(false);
+    setValue(reformatValue(value));
+  };
+  const handleBackspace = e => {
+    const input = e.target;
+    // using the updated selection range after the backspace key has been processed, instead of the current selection range in state
+    const {
+      value: currentValue,
+      selectionStart,
+      selectionEnd
+    } = input;
+    if (selectionStart === selectionEnd && selectionStart && selectionStart > 0) {
+      const charBeforeCursor = currentValue[selectionStart - 1];
+      // if the user deletes a thousands separator, remove the digit before it as well
+      if (charBeforeCursor === groupSeparator) {
+        e.preventDefault();
+        const beforeCursor = currentValue.slice(0, selectionStart - 2);
+        const afterCursor = currentValue.slice(selectionStart);
+        const newValue = `${beforeCursor}${afterCursor}`;
+        input.setSelectionRange(beforeCursor.length, beforeCursor.length);
+        handleChange(newValue);
+      }
+    }
+  };
+  const handleKeyDown = e => {
+    setFocus(true);
+    if (!isAllowedInputKey(e)) {
+      e.preventDefault();
+    }
+    if (e.key === 'Backspace') {
+      handleBackspace(e);
+    }
+  };
+  const isAllowedInput = e => {
+    const hasMultipleDecimalSeparators = decimalSeparator && e.target.value.split(decimalSeparator).length > 2;
+    if (hasMultipleDecimalSeparators) {
+      return false;
+    }
+    const newNumericValue = getUnformattedNumber({
+      value: e.target.value,
+      currency,
+      locale: intl.locale
+    });
+    const maxLength = Number.MAX_SAFE_INTEGER.toString().length;
+    if (String(newNumericValue).length > maxLength) {
+      return false;
+    }
+    return true;
+  };
+  const addonContent = useMemo(() => {
+    // because we're using a separate "addon" element for the placeholder decimals, there is a possibility that the input itself will become scrollable
+    // 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
+    if (isInputPossiblyOverflowing({
+      ref,
+      value
+    })) {
+      return null;
+    }
+    if (!decimalSeparator || !value) {
+      return null;
+    }
+    // if the user has typed a decimal separator, show the full decimal part as a placeholder
+    // this returns a string even if there is no content, typing should replace the placeholder immediately without animation
+    // otherwise there is an ugly animation when going from 1.23 to 1.2 due to AnimatePresence
+    if (focus && decimalMode) {
+      // reuse getDecimalPart
+      const fullDecimalPart = getDecimalPart(valueWithFullDecimals, decimalSeparator);
+      // show only the characters that are not already displayed by the input
+      return fullDecimalPart?.slice(decimalPart?.length);
+    }
+    // in unfocused state, always show the full decimal part unless the user has already entered decimals
+    if (!focus && !decimalMode) {
+      const [_, decimalPlaceholder] = placeholder.split(decimalSeparator);
+      return decimalSeparator + decimalPlaceholder;
+    }
+    return null;
+  }, [decimalMode, decimalPart?.length, decimalSeparator, focus, placeholder, value, valueWithFullDecimals]);
+  const style = useInputStyle({
+    // whenever decimals are shown, we need to account for the full decimal part for the font size calculation
+    value: addonContent ? valueWithFullDecimals : value,
+    focus: visualFocus,
+    inputElement: ref.current,
+    loading
+  });
+  return /*#__PURE__*/jsx("div", {
+    className: "wds-amount-input-container",
+    children: /*#__PURE__*/jsxs("div", {
+      className: clsx('wds-amount-input-input-container', 'np-text-display-large'),
+      style: style,
+      children: [/*#__PURE__*/jsx("input", {
+        ref: ref,
+        className: "wds-amount-input-input",
+        id: id,
+        autoComplete: "off",
+        inputMode: "decimal",
+        value: value,
+        type: "text",
+        placeholder: placeholder,
+        "aria-describedby": describedById
+        /* without this, the input tries to keep an aspect ratio and doesn't respect CSS width rules */,
+        size: 1,
+        onChange: e => {
+          if (isAllowedInput(e)) {
+            handleChange(e.target.value);
+          }
+        },
+        onBlurCapture: () => handleBlur(),
+        onPaste: e => handlePaste(e),
+        onFocus: () => {
+          setFocus(true);
+        },
+        onBlur: () => {
+          setTimeout(() => setVisualFocus(false), 30);
+        },
+        onKeyDown: e => handleKeyDown(e)
+      }), /*#__PURE__*/jsx(AnimatePresence, {
+        initial: false,
+        children: addonContent !== null && /*#__PURE__*/jsx(AnimatedNumber, {
+          className: clsx('wds-amount-input-placeholder', visualFocus && 'wds-amount-input-placeholder-focus'),
+          onClick: () => ref.current?.focus(),
+          children: addonContent
+        })
+      })]
+    })
+  });
+};
+const getPlaceholder = (currency, locale) => {
+  return formatAmount(0, currency, locale, {
+    alwaysShowDecimals: true
+  });
+};
+const getDecimalPart = (value, decimalSeparator) => {
+  if (!value || !decimalSeparator) {
+    return undefined;
+  }
+  const [_, decimalPart] = value.split(decimalSeparator);
+  return decimalPart ?? undefined;
+};
+
+export { AmountInput };
+//# sourceMappingURL=AmountInput.mjs.map

package/build/expressiveMoneyInput/amountInput/AmountInput.mjs.map

@@ -0,0 +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 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 (!focus) {\n      setValue(\n        amount\n          ? getFormattedString({\n              value: amount,\n              currency,\n              locale: intl.locale,\n            })\n          : '',\n      );\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [amount]);\n\n  useEffect(() => {\n    onFocusChange?.(visualFocus);\n  }, [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    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.current,\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')}\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","numericValue","useMemo","getUnformattedNumber","valueWithFullDecimals","alwaysShowDecimals","ref","useRef","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/amountInput/utils.js

@@ -0,0 +1,87 @@
+'use strict';
+
+var formatting = require('@transferwise/formatting');
+
+const getDecimalSeparator = (currency, locale) => {
+  return formatting.formatAmount(1.1, currency, locale).replace(/\p{Number}/gu, '');
+};
+const getGroupSeparator = (currency, locale) => {
+  return formatting.formatAmount(10000000, currency, locale).replace(/\p{Number}/gu, '')[0];
+};
+const getDecimalCount = (currency, locale) => {
+  const decimalSeparator = getDecimalSeparator(currency, locale);
+  if (!decimalSeparator) {
+    return 0;
+  }
+  const parts = formatting.formatAmount(1.1, currency, locale).split(decimalSeparator);
+  return parts.length === 2 ? parts[1].length : 0;
+};
+const getEnteredDecimalsCount = (value, decimalSeparator) => {
+  return value.split(decimalSeparator)[1]?.length ?? 0;
+};
+const getUnformattedNumber = ({
+  value: formattedValue,
+  currency,
+  locale
+}) => {
+  const groupSeparator = getGroupSeparator(currency, locale);
+  const decimalSeparator = getDecimalSeparator(currency, locale);
+  if (!formattedValue) {
+    return null;
+  }
+  // parseFloat can't handle thousands separators
+  const withoutGroupSeparator = groupSeparator ? formattedValue.replace(/ /gu, '').replace(new RegExp(`\\${groupSeparator}`, 'g'), '') : formattedValue;
+  // parseFloat can only handle . as decimal separator
+  const withNormalisedDecimalSeparator = decimalSeparator ? withoutGroupSeparator.replace(decimalSeparator, '.') : withoutGroupSeparator;
+  const parsedValue = Number.parseFloat(withNormalisedDecimalSeparator);
+  return parsedValue;
+};
+const getFormattedString = ({
+  value: unformattedValue,
+  currency,
+  locale,
+  alwaysShowDecimals = false
+}) => {
+  const decimalSeparator = getDecimalSeparator(currency, locale);
+  // formatAmount rounds extra decimals, so 1.999 will become 2. Instead we will manually strip extra decimals so that it becomes 1.99 after formatting
+  const decimalCount = getDecimalCount(currency, locale);
+  const unformattedString = unformattedValue.toString();
+  const [integerPart, decimalPart] = decimalSeparator ? unformattedString.split(decimalSeparator) : [unformattedString, undefined];
+  const formattedDecimalPart = decimalPart ? decimalPart.slice(0, decimalCount) : '';
+  const sanitisedUnformattedValue = Number.parseFloat(`${integerPart}.${formattedDecimalPart}`);
+  return formatting.formatAmount(sanitisedUnformattedValue, currency, locale, {
+    alwaysShowDecimals
+  });
+};
+const isInputPossiblyOverflowing = ({
+  ref,
+  value
+}) => {
+  const textLength = value.length;
+  const inputWidth = ref.current?.clientWidth;
+  if (!inputWidth || !textLength) {
+    return;
+  }
+  const maxCharactersWithoutOverflow = Math.floor(inputWidth / 19);
+  return textLength > maxCharactersWithoutOverflow;
+};
+const allowedInputKeys = new Set(['Backspace', 'Delete', ',', '.', 'ArrowLeft', 'ArrowRight', 'Enter', 'Tab']);
+const isAllowedInputKey = e => {
+  const {
+    metaKey,
+    key,
+    ctrlKey
+  } = e;
+  const isNumberKey = !Number.isNaN(Number.parseInt(key, 10));
+  return isNumberKey || metaKey || ctrlKey || allowedInputKeys.has(key);
+};
+
+exports.getDecimalCount = getDecimalCount;
+exports.getDecimalSeparator = getDecimalSeparator;
+exports.getEnteredDecimalsCount = getEnteredDecimalsCount;
+exports.getFormattedString = getFormattedString;
+exports.getGroupSeparator = getGroupSeparator;
+exports.getUnformattedNumber = getUnformattedNumber;
+exports.isAllowedInputKey = isAllowedInputKey;
+exports.isInputPossiblyOverflowing = isInputPossiblyOverflowing;
+//# sourceMappingURL=utils.js.map

package/build/expressiveMoneyInput/amountInput/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../src/expressiveMoneyInput/amountInput/utils.ts"],"sourcesContent":["import { formatAmount } from '@transferwise/formatting';\nimport type { KeyboardEvent } from 'react';\n\nexport const getDecimalSeparator = (currency: string, locale: string): string | null => {\n  return formatAmount(1.1, currency, locale).replace(/\\p{Number}/gu, '');\n};\n\nexport const getGroupSeparator = (currency: string, locale: string): string | null => {\n  return formatAmount(10000000, currency, locale).replace(/\\p{Number}/gu, '')[0];\n};\n\nexport const getDecimalCount = (currency: string, locale: string): number => {\n  const decimalSeparator = getDecimalSeparator(currency, locale);\n  if (!decimalSeparator) {\n    return 0;\n  }\n  const parts = formatAmount(1.1, currency, locale).split(decimalSeparator);\n  return parts.length === 2 ? parts[1].length : 0;\n};\n\nexport const getEnteredDecimalsCount = (value: string, decimalSeparator: string) => {\n  return value.split(decimalSeparator)[1]?.length ?? 0;\n};\n\nexport const getUnformattedNumber = ({\n  value: formattedValue,\n  currency,\n  locale,\n}: {\n  value: string;\n  currency: string;\n  locale: string;\n}): number | null => {\n  const groupSeparator = getGroupSeparator(currency, locale);\n  const decimalSeparator = getDecimalSeparator(currency, locale);\n  if (!formattedValue) {\n    return null;\n  }\n\n  // parseFloat can't handle thousands separators\n  const withoutGroupSeparator = groupSeparator\n    ? formattedValue.replace(/ /gu, '').replace(new RegExp(`\\\\${groupSeparator}`, 'g'), '')\n    : formattedValue;\n\n  // parseFloat can only handle . as decimal separator\n  const withNormalisedDecimalSeparator = decimalSeparator\n    ? withoutGroupSeparator.replace(decimalSeparator, '.')\n    : withoutGroupSeparator;\n\n  const parsedValue = Number.parseFloat(withNormalisedDecimalSeparator);\n  return parsedValue;\n};\n\nexport const getFormattedString = ({\n  value: unformattedValue,\n  currency,\n  locale,\n  alwaysShowDecimals = false,\n}: {\n  value: number;\n  currency: string;\n  locale: string;\n  alwaysShowDecimals?: boolean;\n}): string => {\n  const decimalSeparator = getDecimalSeparator(currency, locale);\n  // formatAmount rounds extra decimals, so 1.999 will become 2. Instead we will manually strip extra decimals so that it becomes 1.99 after formatting\n  const decimalCount = getDecimalCount(currency, locale);\n  const unformattedString = unformattedValue.toString();\n\n  const [integerPart, decimalPart] = decimalSeparator\n    ? unformattedString.split(decimalSeparator)\n    : [unformattedString, undefined];\n\n  const formattedDecimalPart = decimalPart ? decimalPart.slice(0, decimalCount) : '';\n\n  const sanitisedUnformattedValue = Number.parseFloat(`${integerPart}.${formattedDecimalPart}`);\n\n  return formatAmount(sanitisedUnformattedValue, currency, locale, {\n    alwaysShowDecimals,\n  });\n};\n\nexport const isInputPossiblyOverflowing = ({\n  ref,\n  value,\n}: {\n  ref: React.RefObject<HTMLInputElement>;\n  value: string;\n}) => {\n  const textLength = value.length;\n  const inputWidth = ref.current?.clientWidth;\n  if (!inputWidth || !textLength) {\n    return;\n  }\n\n  const maxCharactersWithoutOverflow = Math.floor(inputWidth / 19);\n  return textLength > maxCharactersWithoutOverflow;\n};\n\nconst allowedInputKeys = new Set([\n  'Backspace',\n  'Delete',\n  ',',\n  '.',\n  'ArrowLeft',\n  'ArrowRight',\n  'Enter',\n  'Tab',\n]);\n\nexport const isAllowedInputKey = (e: KeyboardEvent<HTMLInputElement>) => {\n  const { metaKey, key, ctrlKey } = e;\n  const isNumberKey = !Number.isNaN(Number.parseInt(key, 10));\n\n  return isNumberKey || metaKey || ctrlKey || allowedInputKeys.has(key);\n};\n"],"names":["getDecimalSeparator","currency","locale","formatAmount","replace","getGroupSeparator","getDecimalCount","decimalSeparator","parts","split","length","getEnteredDecimalsCount","value","getUnformattedNumber","formattedValue","groupSeparator","withoutGroupSeparator","RegExp","withNormalisedDecimalSeparator","parsedValue","Number","parseFloat","getFormattedString","unformattedValue","alwaysShowDecimals","decimalCount","unformattedString","toString","integerPart","decimalPart","undefined","formattedDecimalPart","slice","sanitisedUnformattedValue","isInputPossiblyOverflowing","ref","textLength","inputWidth","current","clientWidth","maxCharactersWithoutOverflow","Math","floor","allowedInputKeys","Set","isAllowedInputKey","e","metaKey","key","ctrlKey","isNumberKey","isNaN","parseInt","has"],"mappings":"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"}

package/build/expressiveMoneyInput/amountInput/utils.mjs

@@ -0,0 +1,78 @@
+import { formatAmount } from '@transferwise/formatting';
+
+const getDecimalSeparator = (currency, locale) => {
+  return formatAmount(1.1, currency, locale).replace(/\p{Number}/gu, '');
+};
+const getGroupSeparator = (currency, locale) => {
+  return formatAmount(10000000, currency, locale).replace(/\p{Number}/gu, '')[0];
+};
+const getDecimalCount = (currency, locale) => {
+  const decimalSeparator = getDecimalSeparator(currency, locale);
+  if (!decimalSeparator) {
+    return 0;
+  }
+  const parts = formatAmount(1.1, currency, locale).split(decimalSeparator);
+  return parts.length === 2 ? parts[1].length : 0;
+};
+const getEnteredDecimalsCount = (value, decimalSeparator) => {
+  return value.split(decimalSeparator)[1]?.length ?? 0;
+};
+const getUnformattedNumber = ({
+  value: formattedValue,
+  currency,
+  locale
+}) => {
+  const groupSeparator = getGroupSeparator(currency, locale);
+  const decimalSeparator = getDecimalSeparator(currency, locale);
+  if (!formattedValue) {
+    return null;
+  }
+  // parseFloat can't handle thousands separators
+  const withoutGroupSeparator = groupSeparator ? formattedValue.replace(/ /gu, '').replace(new RegExp(`\\${groupSeparator}`, 'g'), '') : formattedValue;
+  // parseFloat can only handle . as decimal separator
+  const withNormalisedDecimalSeparator = decimalSeparator ? withoutGroupSeparator.replace(decimalSeparator, '.') : withoutGroupSeparator;
+  const parsedValue = Number.parseFloat(withNormalisedDecimalSeparator);
+  return parsedValue;
+};
+const getFormattedString = ({
+  value: unformattedValue,
+  currency,
+  locale,
+  alwaysShowDecimals = false
+}) => {
+  const decimalSeparator = getDecimalSeparator(currency, locale);
+  // formatAmount rounds extra decimals, so 1.999 will become 2. Instead we will manually strip extra decimals so that it becomes 1.99 after formatting
+  const decimalCount = getDecimalCount(currency, locale);
+  const unformattedString = unformattedValue.toString();
+  const [integerPart, decimalPart] = decimalSeparator ? unformattedString.split(decimalSeparator) : [unformattedString, undefined];
+  const formattedDecimalPart = decimalPart ? decimalPart.slice(0, decimalCount) : '';
+  const sanitisedUnformattedValue = Number.parseFloat(`${integerPart}.${formattedDecimalPart}`);
+  return formatAmount(sanitisedUnformattedValue, currency, locale, {
+    alwaysShowDecimals
+  });
+};
+const isInputPossiblyOverflowing = ({
+  ref,
+  value
+}) => {
+  const textLength = value.length;
+  const inputWidth = ref.current?.clientWidth;
+  if (!inputWidth || !textLength) {
+    return;
+  }
+  const maxCharactersWithoutOverflow = Math.floor(inputWidth / 19);
+  return textLength > maxCharactersWithoutOverflow;
+};
+const allowedInputKeys = new Set(['Backspace', 'Delete', ',', '.', 'ArrowLeft', 'ArrowRight', 'Enter', 'Tab']);
+const isAllowedInputKey = e => {
+  const {
+    metaKey,
+    key,
+    ctrlKey
+  } = e;
+  const isNumberKey = !Number.isNaN(Number.parseInt(key, 10));
+  return isNumberKey || metaKey || ctrlKey || allowedInputKeys.has(key);
+};
+
+export { getDecimalCount, getDecimalSeparator, getEnteredDecimalsCount, getFormattedString, getGroupSeparator, getUnformattedNumber, isAllowedInputKey, isInputPossiblyOverflowing };
+//# sourceMappingURL=utils.mjs.map

package/build/expressiveMoneyInput/amountInput/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","sources":["../../../src/expressiveMoneyInput/amountInput/utils.ts"],"sourcesContent":["import { formatAmount } from '@transferwise/formatting';\nimport type { KeyboardEvent } from 'react';\n\nexport const getDecimalSeparator = (currency: string, locale: string): string | null => {\n  return formatAmount(1.1, currency, locale).replace(/\\p{Number}/gu, '');\n};\n\nexport const getGroupSeparator = (currency: string, locale: string): string | null => {\n  return formatAmount(10000000, currency, locale).replace(/\\p{Number}/gu, '')[0];\n};\n\nexport const getDecimalCount = (currency: string, locale: string): number => {\n  const decimalSeparator = getDecimalSeparator(currency, locale);\n  if (!decimalSeparator) {\n    return 0;\n  }\n  const parts = formatAmount(1.1, currency, locale).split(decimalSeparator);\n  return parts.length === 2 ? parts[1].length : 0;\n};\n\nexport const getEnteredDecimalsCount = (value: string, decimalSeparator: string) => {\n  return value.split(decimalSeparator)[1]?.length ?? 0;\n};\n\nexport const getUnformattedNumber = ({\n  value: formattedValue,\n  currency,\n  locale,\n}: {\n  value: string;\n  currency: string;\n  locale: string;\n}): number | null => {\n  const groupSeparator = getGroupSeparator(currency, locale);\n  const decimalSeparator = getDecimalSeparator(currency, locale);\n  if (!formattedValue) {\n    return null;\n  }\n\n  // parseFloat can't handle thousands separators\n  const withoutGroupSeparator = groupSeparator\n    ? formattedValue.replace(/ /gu, '').replace(new RegExp(`\\\\${groupSeparator}`, 'g'), '')\n    : formattedValue;\n\n  // parseFloat can only handle . as decimal separator\n  const withNormalisedDecimalSeparator = decimalSeparator\n    ? withoutGroupSeparator.replace(decimalSeparator, '.')\n    : withoutGroupSeparator;\n\n  const parsedValue = Number.parseFloat(withNormalisedDecimalSeparator);\n  return parsedValue;\n};\n\nexport const getFormattedString = ({\n  value: unformattedValue,\n  currency,\n  locale,\n  alwaysShowDecimals = false,\n}: {\n  value: number;\n  currency: string;\n  locale: string;\n  alwaysShowDecimals?: boolean;\n}): string => {\n  const decimalSeparator = getDecimalSeparator(currency, locale);\n  // formatAmount rounds extra decimals, so 1.999 will become 2. Instead we will manually strip extra decimals so that it becomes 1.99 after formatting\n  const decimalCount = getDecimalCount(currency, locale);\n  const unformattedString = unformattedValue.toString();\n\n  const [integerPart, decimalPart] = decimalSeparator\n    ? unformattedString.split(decimalSeparator)\n    : [unformattedString, undefined];\n\n  const formattedDecimalPart = decimalPart ? decimalPart.slice(0, decimalCount) : '';\n\n  const sanitisedUnformattedValue = Number.parseFloat(`${integerPart}.${formattedDecimalPart}`);\n\n  return formatAmount(sanitisedUnformattedValue, currency, locale, {\n    alwaysShowDecimals,\n  });\n};\n\nexport const isInputPossiblyOverflowing = ({\n  ref,\n  value,\n}: {\n  ref: React.RefObject<HTMLInputElement>;\n  value: string;\n}) => {\n  const textLength = value.length;\n  const inputWidth = ref.current?.clientWidth;\n  if (!inputWidth || !textLength) {\n    return;\n  }\n\n  const maxCharactersWithoutOverflow = Math.floor(inputWidth / 19);\n  return textLength > maxCharactersWithoutOverflow;\n};\n\nconst allowedInputKeys = new Set([\n  'Backspace',\n  'Delete',\n  ',',\n  '.',\n  'ArrowLeft',\n  'ArrowRight',\n  'Enter',\n  'Tab',\n]);\n\nexport const isAllowedInputKey = (e: KeyboardEvent<HTMLInputElement>) => {\n  const { metaKey, key, ctrlKey } = e;\n  const isNumberKey = !Number.isNaN(Number.parseInt(key, 10));\n\n  return isNumberKey || metaKey || ctrlKey || allowedInputKeys.has(key);\n};\n"],"names":["getDecimalSeparator","currency","locale","formatAmount","replace","getGroupSeparator","getDecimalCount","decimalSeparator","parts","split","length","getEnteredDecimalsCount","value","getUnformattedNumber","formattedValue","groupSeparator","withoutGroupSeparator","RegExp","withNormalisedDecimalSeparator","parsedValue","Number","parseFloat","getFormattedString","unformattedValue","alwaysShowDecimals","decimalCount","unformattedString","toString","integerPart","decimalPart","undefined","formattedDecimalPart","slice","sanitisedUnformattedValue","isInputPossiblyOverflowing","ref","textLength","inputWidth","current","clientWidth","maxCharactersWithoutOverflow","Math","floor","allowedInputKeys","Set","isAllowedInputKey","e","metaKey","key","ctrlKey","isNumberKey","isNaN","parseInt","has"],"mappings":"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"}

package/build/expressiveMoneyInput/animatedNumber/AnimatedNumber.js

@@ -0,0 +1,50 @@
+'use strict';
+
+var framerMotion = require('framer-motion');
+var jsxRuntime = require('react/jsx-runtime');
+
+const AnimatedNumber = ({
+  children,
+  onClick,
+  className
+}) => {
+  const reducedMotion = framerMotion.useReducedMotion();
+  return /*#__PURE__*/jsxRuntime.jsx(framerMotion.motion.span, {
+    className: className,
+    "aria-hidden": true,
+    initial: {
+      zoom: 0.01
+    },
+    animate: {
+      zoom: 1
+    },
+    exit: {
+      zoom: 0.01
+    },
+    transition: {
+      duration: reducedMotion ? 0 : 0.3,
+      type: 'tween',
+      ease: [0.3, 0, 0.1, 1]
+    },
+    onClick: () => onClick?.(),
+    children: /*#__PURE__*/jsxRuntime.jsx(framerMotion.motion.span, {
+      initial: {
+        opacity: 0
+      },
+      animate: {
+        opacity: [0, 0, 1]
+      },
+      exit: {
+        opacity: [1, 0, 0]
+      },
+      transition: {
+        duration: reducedMotion ? 0 : 0.3,
+        times: [0, 0.5, 1]
+      },
+      children: children
+    })
+  });
+};
+
+exports.AnimatedNumber = AnimatedNumber;
+//# sourceMappingURL=AnimatedNumber.js.map

package/build/expressiveMoneyInput/animatedNumber/AnimatedNumber.js.map

@@ -0,0 +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;;;;"}

package/build/expressiveMoneyInput/animatedNumber/AnimatedNumber.mjs

@@ -0,0 +1,48 @@
+import { useReducedMotion, motion } from 'framer-motion';
+import { jsx } from 'react/jsx-runtime';
+
+const AnimatedNumber = ({
+  children,
+  onClick,
+  className
+}) => {
+  const reducedMotion = useReducedMotion();
+  return /*#__PURE__*/jsx(motion.span, {
+    className: className,
+    "aria-hidden": true,
+    initial: {
+      zoom: 0.01
+    },
+    animate: {
+      zoom: 1
+    },
+    exit: {
+      zoom: 0.01
+    },
+    transition: {
+      duration: reducedMotion ? 0 : 0.3,
+      type: 'tween',
+      ease: [0.3, 0, 0.1, 1]
+    },
+    onClick: () => onClick?.(),
+    children: /*#__PURE__*/jsx(motion.span, {
+      initial: {
+        opacity: 0
+      },
+      animate: {
+        opacity: [0, 0, 1]
+      },
+      exit: {
+        opacity: [1, 0, 0]
+      },
+      transition: {
+        duration: reducedMotion ? 0 : 0.3,
+        times: [0, 0.5, 1]
+      },
+      children: children
+    })
+  });
+};
+
+export { AnimatedNumber };
+//# sourceMappingURL=AnimatedNumber.mjs.map

package/build/expressiveMoneyInput/animatedNumber/AnimatedNumber.mjs.map

@@ -0,0 +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;;;;"}