@transferwise/components 0.0.0-experimental-46ea514 → 0.0.0-experimental-128143a

package/build/expressiveMoneyInput/currencySelector/CurrencySelector.mjs

@@ -1,157 +0,0 @@
-import Button from '../../button/Button.resolver.mjs';
-import { SelectInput, SelectInputTriggerButton, SelectInputOptionContent } from '../../inputs/SelectInput.mjs';
-import { ChevronDown } from '@transferwise/icons';
-import { Flag } from '@wise/art';
-import { useMemo, useState, forwardRef } from 'react';
-import { useIntl } from 'react-intl';
-import messages from '../ExpressiveMoneyInput.messages.mjs';
-import { jsx } from 'react/jsx-runtime';
-
-const CurrencySelector = ({
-  id,
-  currency,
-  options = [],
-  labelId,
-  onChange,
-  addons,
-  onOpen,
-  onSearchChange
-}) => {
-  const intl = useIntl();
-  const allCurrencyOptions = useMemo(() => getUniqueCurrencies(options), [options]);
-  const activeCurrencyOption = useMemo(() => {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    return allCurrencyOptions.find(option => option.code === currency);
-  }, [currency, allCurrencyOptions]);
-  const disabled = !onChange || options.length === 0 || options.length === 1 && options[0].currencies.length <= 1;
-  const [searchQuery, setSearchQuery] = useState('');
-  const handleTriggerClick = event => {
-    const triggerEl = event.currentTarget;
-    if (triggerEl?.getAttribute('aria-expanded') === 'false') {
-      onOpen?.();
-    }
-  };
-  const items = searchQuery ? filterAndSortCurrenciesForQuery(allCurrencyOptions, searchQuery).map(getCurrencySelectOption) : options.map(getCurrencyGroup);
-  return /*#__PURE__*/jsx(SelectInput, {
-    compareValues: "code",
-    disabled: disabled,
-    id: id,
-    value: activeCurrencyOption,
-    filterable: true,
-    filterPlaceholder: intl.formatMessage(messages.currencySelectorSearchPlaceholder),
-    UNSAFE_triggerButtonProps: {
-      id: undefined,
-      'aria-labelledby': undefined,
-      'aria-describedby': labelId,
-      'aria-invalid': undefined,
-      'aria-label': intl.formatMessage(messages.currencySelectorSelectCurrency)
-    },
-    items: items,
-    renderValue: ({
-      code,
-      label
-    }) => {
-      return /*#__PURE__*/jsx(SelectInputOptionContent, {
-        title: code,
-        note: label,
-        icon: /*#__PURE__*/jsx(Flag, {
-          code: code,
-          intrinsicSize: 24
-        })
-      });
-    },
-    renderTrigger: () => /*#__PURE__*/jsx(SelectInputTriggerButton, {
-      as: ButtonInput
-      // @ts-expect-error new (v2) ButtonProps
-      ,
-      addonStart: {
-        type: 'avatar',
-        value: [addons ? addons[0] : null, {
-          ...(addons && addons.length > 1 ? {
-            ...addons[1]
-          } : {
-            asset: /*#__PURE__*/jsx(Flag, {
-              code: currency
-            })
-          })
-        }].filter(Boolean).filter(avatar => !(avatar && Object.keys(avatar).length === 0))
-      },
-      addonEnd: disabled ? undefined : {
-        type: 'icon',
-        value: /*#__PURE__*/jsx(ChevronDown, {})
-      },
-      onClick: event => handleTriggerClick(event),
-      children: currency
-    }),
-    onChange: newValue => {
-      onChange?.(newValue.code);
-    },
-    onFilterChange: ({
-      queryNormalized
-    }) => {
-      setSearchQuery(queryNormalized ?? '');
-      if (queryNormalized) {
-        onSearchChange?.({
-          query: queryNormalized,
-          resultCount: filterAndSortCurrenciesForQuery(allCurrencyOptions, queryNormalized).length
-        });
-      }
-    }
-  });
-};
-const ButtonInput = /*#__PURE__*/forwardRef(function ButtonInput({
-  children,
-  ...rest
-}, ref) {
-  return /*#__PURE__*/jsx(Button, {
-    ref: ref,
-    size: "md",
-    v2: true,
-    className: "wds-currency-selector",
-    priority: "secondary-neutral",
-    ...rest,
-    children: children
-  });
-});
-const getCurrencySelectOption = currency => {
-  return {
-    type: 'option',
-    value: currency,
-    filterMatchers: currency.keywords
-  };
-};
-const getCurrencyGroup = section => {
-  return {
-    type: 'group',
-    label: section.title,
-    options: section.currencies.map(getCurrencySelectOption)
-  };
-};
-const getUniqueCurrencies = options => {
-  const allCurrencyOptions = options.flatMap(section => section.currencies);
-  const uniqueCurrencies = new Map();
-  allCurrencyOptions.forEach(currencyObj => {
-    uniqueCurrencies.set(currencyObj.code, currencyObj);
-  });
-  return Array.from(uniqueCurrencies.values());
-};
-const filterAndSortCurrenciesForQuery = (currencies, query) => {
-  return currencies.filter(currency => {
-    return currency.code.toLowerCase().includes(query) || (currency.label ?? '').toLowerCase().includes(query) || currency.keywords?.some(keyword => keyword.toLowerCase().includes(query));
-  })
-  // prefer exact matches, then sort alphabetically by code
-  .sort((a, b) => {
-    const aCode = a.code.toLowerCase();
-    const bCode = b.code.toLowerCase();
-    if (aCode === query) {
-      return -1;
-    }
-    if (bCode === query) {
-      return 1;
-    }
-    return aCode.localeCompare(bCode);
-  });
-};
-
-export { ButtonInput, CurrencySelector };
-//# sourceMappingURL=CurrencySelector.mjs.map

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

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

@@ -1,37 +0,0 @@
-'use strict';
-
-var React = require('react');
-
-const focusTimeout = 5 * 1000;
-const useFocus = () => {
-  const [focus, setFocus] = React.useState(false);
-  const [visualFocus, setVisualFocus] = React.useState(false);
-  const [counter, setCounter] = React.useState(0);
-  React.useEffect(() => {
-    if (focus) {
-      const timeout = setTimeout(() => {
-        setVisualFocus(false);
-      }, focusTimeout);
-      return () => clearTimeout(timeout);
-    }
-  }, [focus, counter]);
-  return {
-    focus,
-    setFocus: value => {
-      setFocus(value);
-      if (value) {
-        setVisualFocus(true);
-      }
-      // any call to setFocus should reset the timeout, even if the input was already in focus
-      // updating the counter will trigger the useEffect to reset the timeout
-      setCounter(prev => prev + 1);
-    },
-    visualFocus,
-    setVisualFocus: value => {
-      setVisualFocus(value);
-    }
-  };
-};
-
-exports.useFocus = useFocus;
-//# sourceMappingURL=useFocus.js.map

package/build/expressiveMoneyInput/hooks/useFocus.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useFocus.js","sources":["../../../src/expressiveMoneyInput/hooks/useFocus.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nconst focusTimeout = 5 * 1000;\n\nexport const useFocus = () => {\n  const [focus, setFocus] = useState(false);\n  const [visualFocus, setVisualFocus] = useState(false);\n  const [counter, setCounter] = useState(0);\n\n  useEffect(() => {\n    if (focus) {\n      const timeout = setTimeout(() => {\n        setVisualFocus(false);\n      }, focusTimeout);\n      return () => clearTimeout(timeout);\n    }\n  }, [focus, counter]);\n\n  return {\n    focus,\n    setFocus: (value: boolean) => {\n      setFocus(value);\n      if (value) {\n        setVisualFocus(true);\n      }\n      // any call to setFocus should reset the timeout, even if the input was already in focus\n      // updating the counter will trigger the useEffect to reset the timeout\n      setCounter((prev) => prev + 1);\n    },\n    visualFocus,\n    setVisualFocus: (value: boolean) => {\n      setVisualFocus(value);\n    },\n  };\n};\n"],"names":["focusTimeout","useFocus","focus","setFocus","useState","visualFocus","setVisualFocus","counter","setCounter","useEffect","timeout","setTimeout","clearTimeout","value","prev"],"mappings":";;;;AAEA,MAAMA,YAAY,GAAG,CAAC,GAAG,IAAI;AAEtB,MAAMC,QAAQ,GAAGA,MAAK;EAC3B,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;EACzC,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGF,cAAQ,CAAC,KAAK,CAAC;EACrD,MAAM,CAACG,OAAO,EAAEC,UAAU,CAAC,GAAGJ,cAAQ,CAAC,CAAC,CAAC;AAEzCK,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIP,KAAK,EAAE;AACT,MAAA,MAAMQ,OAAO,GAAGC,UAAU,CAAC,MAAK;QAC9BL,cAAc,CAAC,KAAK,CAAC;MACvB,CAAC,EAAEN,YAAY,CAAC;AAChB,MAAA,OAAO,MAAMY,YAAY,CAACF,OAAO,CAAC;AACpC,IAAA;AACF,EAAA,CAAC,EAAE,CAACR,KAAK,EAAEK,OAAO,CAAC,CAAC;EAEpB,OAAO;IACLL,KAAK;IACLC,QAAQ,EAAGU,KAAc,IAAI;MAC3BV,QAAQ,CAACU,KAAK,CAAC;AACf,MAAA,IAAIA,KAAK,EAAE;QACTP,cAAc,CAAC,IAAI,CAAC;AACtB,MAAA;AACA;AACA;AACAE,MAAAA,UAAU,CAAEM,IAAI,IAAKA,IAAI,GAAG,CAAC,CAAC;IAChC,CAAC;IACDT,WAAW;IACXC,cAAc,EAAGO,KAAc,IAAI;MACjCP,cAAc,CAACO,KAAK,CAAC;AACvB,IAAA;GACD;AACH;;;;"}

package/build/expressiveMoneyInput/hooks/useFocus.mjs

@@ -1,35 +0,0 @@
-import { useState, useEffect } from 'react';
-
-const focusTimeout = 5 * 1000;
-const useFocus = () => {
-  const [focus, setFocus] = useState(false);
-  const [visualFocus, setVisualFocus] = useState(false);
-  const [counter, setCounter] = useState(0);
-  useEffect(() => {
-    if (focus) {
-      const timeout = setTimeout(() => {
-        setVisualFocus(false);
-      }, focusTimeout);
-      return () => clearTimeout(timeout);
-    }
-  }, [focus, counter]);
-  return {
-    focus,
-    setFocus: value => {
-      setFocus(value);
-      if (value) {
-        setVisualFocus(true);
-      }
-      // any call to setFocus should reset the timeout, even if the input was already in focus
-      // updating the counter will trigger the useEffect to reset the timeout
-      setCounter(prev => prev + 1);
-    },
-    visualFocus,
-    setVisualFocus: value => {
-      setVisualFocus(value);
-    }
-  };
-};
-
-export { useFocus };
-//# sourceMappingURL=useFocus.mjs.map

package/build/expressiveMoneyInput/hooks/useFocus.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"useFocus.mjs","sources":["../../../src/expressiveMoneyInput/hooks/useFocus.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nconst focusTimeout = 5 * 1000;\n\nexport const useFocus = () => {\n  const [focus, setFocus] = useState(false);\n  const [visualFocus, setVisualFocus] = useState(false);\n  const [counter, setCounter] = useState(0);\n\n  useEffect(() => {\n    if (focus) {\n      const timeout = setTimeout(() => {\n        setVisualFocus(false);\n      }, focusTimeout);\n      return () => clearTimeout(timeout);\n    }\n  }, [focus, counter]);\n\n  return {\n    focus,\n    setFocus: (value: boolean) => {\n      setFocus(value);\n      if (value) {\n        setVisualFocus(true);\n      }\n      // any call to setFocus should reset the timeout, even if the input was already in focus\n      // updating the counter will trigger the useEffect to reset the timeout\n      setCounter((prev) => prev + 1);\n    },\n    visualFocus,\n    setVisualFocus: (value: boolean) => {\n      setVisualFocus(value);\n    },\n  };\n};\n"],"names":["focusTimeout","useFocus","focus","setFocus","useState","visualFocus","setVisualFocus","counter","setCounter","useEffect","timeout","setTimeout","clearTimeout","value","prev"],"mappings":";;AAEA,MAAMA,YAAY,GAAG,CAAC,GAAG,IAAI;AAEtB,MAAMC,QAAQ,GAAGA,MAAK;EAC3B,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;EACzC,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGF,QAAQ,CAAC,KAAK,CAAC;EACrD,MAAM,CAACG,OAAO,EAAEC,UAAU,CAAC,GAAGJ,QAAQ,CAAC,CAAC,CAAC;AAEzCK,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIP,KAAK,EAAE;AACT,MAAA,MAAMQ,OAAO,GAAGC,UAAU,CAAC,MAAK;QAC9BL,cAAc,CAAC,KAAK,CAAC;MACvB,CAAC,EAAEN,YAAY,CAAC;AAChB,MAAA,OAAO,MAAMY,YAAY,CAACF,OAAO,CAAC;AACpC,IAAA;AACF,EAAA,CAAC,EAAE,CAACR,KAAK,EAAEK,OAAO,CAAC,CAAC;EAEpB,OAAO;IACLL,KAAK;IACLC,QAAQ,EAAGU,KAAc,IAAI;MAC3BV,QAAQ,CAACU,KAAK,CAAC;AACf,MAAA,IAAIA,KAAK,EAAE;QACTP,cAAc,CAAC,IAAI,CAAC;AACtB,MAAA;AACA;AACA;AACAE,MAAAA,UAAU,CAAEM,IAAI,IAAKA,IAAI,GAAG,CAAC,CAAC;IAChC,CAAC;IACDT,WAAW;IACXC,cAAc,EAAGO,KAAc,IAAI;MACjCP,cAAc,CAACO,KAAK,CAAC;AACvB,IAAA;GACD;AACH;;;;"}

package/build/expressiveMoneyInput/hooks/useInputStyle.js

@@ -1,71 +0,0 @@
-'use strict';
-
-var React = require('react');
-
-const useInputStyle = ({
-  value,
-  focus,
-  inputElement,
-  loading
-}) => {
-  const initialRender = !useTimeout(300);
-  const inputWidth = useFirstDefinedValue(inputElement?.clientWidth, [inputElement, value]);
-  const getStyle = () => {
-    const fontSize = getFontSize(value, focus, inputWidth);
-    return {
-      fontSize,
-      height: fontSize,
-      // aligns the top of the digit with the currency button
-      marginTop: fontSize * -0.19,
-      // if the input loads with a pre-filled value, we don't want to animate the font-size immediately
-      transition: initialRender ? 'none' : undefined,
-      color: loading ? 'var(--color-interactive-secondary)' : undefined
-    };
-  };
-  const [style, setStyle] = React.useState(getStyle());
-  React.useLayoutEffect(() => {
-    setStyle(getStyle());
-  }, [value, focus, loading, inputWidth]);
-  return style;
-};
-function getFontSize(inputValue, isFocused, inputWidth) {
-  const defaultFontSize = 52;
-  const focusFontSize = 90;
-  const minimumFontSize = 34;
-  let fontSize = isFocused ? focusFontSize : defaultFontSize;
-  if (typeof inputWidth === 'undefined') {
-    return fontSize;
-  }
-  const textLength = inputValue.length;
-  const maxCharactersWithoutShrinking = Math.floor(inputWidth / 40);
-  if (textLength > maxCharactersWithoutShrinking) {
-    const adjustedSize = Math.round(inputWidth / textLength * 1.9);
-    fontSize = Math.min(fontSize, adjustedSize);
-  }
-  return Math.max(fontSize, minimumFontSize);
-}
-const useFirstDefinedValue = (newValue, dependencies) => {
-  const [value, setValue] = React.useState(newValue);
-  React.useLayoutEffect(() => {
-    if (typeof newValue !== 'undefined' && typeof value === 'undefined') {
-      setValue(newValue);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [...dependencies, value]);
-  return value;
-};
-const useTimeout = delay => {
-  const [ready, setReady] = React.useState(false);
-  React.useEffect(() => {
-    const timeout = setTimeout(() => {
-      setReady(true);
-    }, delay);
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, [delay]);
-  return ready;
-};
-
-exports.useInputStyle = useInputStyle;
-//# sourceMappingURL=useInputStyle.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useInputStyle.js","sources":["../../../src/expressiveMoneyInput/hooks/useInputStyle.ts"],"sourcesContent":["import { type CSSProperties, useEffect, useLayoutEffect, useState } from 'react';\nimport { Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\n\ntype InputStyleObject = {\n  value: string;\n  focus: boolean;\n  inputElement: 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?.clientWidth, [inputElement, value]);\n\n  const getStyle = (): 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  };\n\n  const [style, setStyle] = useState(getStyle());\n\n  useLayoutEffect(() => {\n    setStyle(getStyle());\n  }, [value, focus, loading, inputWidth]);\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      setValue(newValue);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [...dependencies, value]);\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","clientWidth","getStyle","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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"}

package/build/expressiveMoneyInput/hooks/useInputStyle.mjs

@@ -1,69 +0,0 @@
-import { useState, useLayoutEffect, useEffect } from 'react';
-
-const useInputStyle = ({
-  value,
-  focus,
-  inputElement,
-  loading
-}) => {
-  const initialRender = !useTimeout(300);
-  const inputWidth = useFirstDefinedValue(inputElement?.clientWidth, [inputElement, value]);
-  const getStyle = () => {
-    const fontSize = getFontSize(value, focus, inputWidth);
-    return {
-      fontSize,
-      height: fontSize,
-      // aligns the top of the digit with the currency button
-      marginTop: fontSize * -0.19,
-      // if the input loads with a pre-filled value, we don't want to animate the font-size immediately
-      transition: initialRender ? 'none' : undefined,
-      color: loading ? 'var(--color-interactive-secondary)' : undefined
-    };
-  };
-  const [style, setStyle] = useState(getStyle());
-  useLayoutEffect(() => {
-    setStyle(getStyle());
-  }, [value, focus, loading, inputWidth]);
-  return style;
-};
-function getFontSize(inputValue, isFocused, inputWidth) {
-  const defaultFontSize = 52;
-  const focusFontSize = 90;
-  const minimumFontSize = 34;
-  let fontSize = isFocused ? focusFontSize : defaultFontSize;
-  if (typeof inputWidth === 'undefined') {
-    return fontSize;
-  }
-  const textLength = inputValue.length;
-  const maxCharactersWithoutShrinking = Math.floor(inputWidth / 40);
-  if (textLength > maxCharactersWithoutShrinking) {
-    const adjustedSize = Math.round(inputWidth / textLength * 1.9);
-    fontSize = Math.min(fontSize, adjustedSize);
-  }
-  return Math.max(fontSize, minimumFontSize);
-}
-const useFirstDefinedValue = (newValue, dependencies) => {
-  const [value, setValue] = useState(newValue);
-  useLayoutEffect(() => {
-    if (typeof newValue !== 'undefined' && typeof value === 'undefined') {
-      setValue(newValue);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [...dependencies, value]);
-  return value;
-};
-const useTimeout = delay => {
-  const [ready, setReady] = useState(false);
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      setReady(true);
-    }, delay);
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, [delay]);
-  return ready;
-};
-
-export { useInputStyle };
-//# sourceMappingURL=useInputStyle.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useInputStyle.mjs","sources":["../../../src/expressiveMoneyInput/hooks/useInputStyle.ts"],"sourcesContent":["import { type CSSProperties, useEffect, useLayoutEffect, useState } from 'react';\nimport { Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\n\ntype InputStyleObject = {\n  value: string;\n  focus: boolean;\n  inputElement: 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?.clientWidth, [inputElement, value]);\n\n  const getStyle = (): 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  };\n\n  const [style, setStyle] = useState(getStyle());\n\n  useLayoutEffect(() => {\n    setStyle(getStyle());\n  }, [value, focus, loading, inputWidth]);\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      setValue(newValue);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [...dependencies, value]);\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","clientWidth","getStyle","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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"}

package/build/styles/expressiveMoneyInput/ExpressiveMoneyInput.css

@@ -1,58 +0,0 @@
-.wds-amount-input-container {
-  width: 100%;
-}
-.wds-amount-input-input-container {
-  display: flex;
-  justify-content: right;
-  width: 100%;
-  transition: font-size 0.4s cubic-bezier(0.3, 0, 0.1, 1), height 0.4s cubic-bezier(0.3, 0, 0.1, 1), margin-top 0.4s cubic-bezier(0.3, 0, 0.1, 1), color 0.4s ease;
-  color: var(--color-interactive-primary);
-  overflow: hidden;
-  margin-bottom: 0 !important;
-}
-@media (prefers-reduced-motion: reduce) {
-  .wds-amount-input-input-container {
-    transition: none;
-  }
-}
-.wds-amount-input-input {
-  border: none;
-  outline: none;
-  flex-grow: 1;
-  text-align: right;
-  background-color: transparent;
-}
-.wds-amount-input-input:focus-visible {
-  outline: none;
-}
-.wds-amount-input-placeholder {
-  flex-grow: 0;
-  display: flex;
-  align-items: center;
-}
-.wds-currency-selector:disabled {
-  opacity: 1 !important;
-  cursor: auto !important;
-  cursor: initial !important;
-  mix-blend-mode: initial !important;
-}
-.wds-chevron-container {
-  width: 32px;
-  width: var(--size-32);
-  overflow: hidden;
-  color: var(--color-interactive-primary);
-  margin-left: 8px;
-  margin-left: var(--size-8);
-  transition: width 0.3s ease;
-}
-.wds-chevron-hidden {
-  width: 0;
-}
-.wds-expressive-money-input-currency-selector {
-  flex-shrink: 0;
-  margin-right: 24px;
-  margin-right: var(--size-24);
-}
-.wds-expressive-money-input-chevron {
-  transform: translateY(-5%);
-}

package/build/styles/expressiveMoneyInput/amountInput/AmountInput.css

@@ -1,32 +0,0 @@
-.wds-amount-input-container {
-  width: 100%;
-}
-.wds-amount-input-input-container {
-  display: flex;
-  justify-content: right;
-  width: 100%;
-  transition: font-size 0.4s cubic-bezier(0.3, 0, 0.1, 1), height 0.4s cubic-bezier(0.3, 0, 0.1, 1), margin-top 0.4s cubic-bezier(0.3, 0, 0.1, 1), color 0.4s ease;
-  color: var(--color-interactive-primary);
-  overflow: hidden;
-  margin-bottom: 0 !important;
-}
-@media (prefers-reduced-motion: reduce) {
-  .wds-amount-input-input-container {
-    transition: none;
-  }
-}
-.wds-amount-input-input {
-  border: none;
-  outline: none;
-  flex-grow: 1;
-  text-align: right;
-  background-color: transparent;
-}
-.wds-amount-input-input:focus-visible {
-  outline: none;
-}
-.wds-amount-input-placeholder {
-  flex-grow: 0;
-  display: flex;
-  align-items: center;
-}

package/build/styles/expressiveMoneyInput/chevron/Chevron.css

@@ -1,12 +0,0 @@
-.wds-chevron-container {
-  width: 32px;
-  width: var(--size-32);
-  overflow: hidden;
-  color: var(--color-interactive-primary);
-  margin-left: 8px;
-  margin-left: var(--size-8);
-  transition: width 0.3s ease;
-}
-.wds-chevron-hidden {
-  width: 0;
-}

package/build/styles/expressiveMoneyInput/currencySelector/CurrencySelector.css

@@ -1,6 +0,0 @@
-.wds-currency-selector:disabled {
-  opacity: 1 !important;
-  cursor: auto !important;
-  cursor: initial !important;
-  mix-blend-mode: initial !important;
-}

package/build/types/expressiveMoneyInput/ExpressiveMoneyInput.d.ts

@@ -1,33 +0,0 @@
-import { type ReactNode } from 'react';
-import { type Props as CurrencySelectorProps } from './currencySelector/CurrencySelector';
-import { CommonProps } from '../common';
-import { type InlinePromptProps } from '../prompt/InlinePrompt';
-type AmountType = number | null;
-export type CurrencyType = string;
-type DefaultCurrencySelectorInstanceType = Pick<CurrencySelectorProps, 'addons' | 'options' | 'onChange' | 'onOpen' | 'onSearchChange'>;
-type CustomCurrencySelectorInstanceType = {
-    customRender?: (props: {
-        id: string;
-        labelId: string;
-    }) => ReactNode;
-};
-type CurrencySelectorType = DefaultCurrencySelectorInstanceType & CustomCurrencySelectorInstanceType;
-export type Props = {
-    label?: ReactNode;
-    currencySelector?: CurrencySelectorType;
-    amount?: AmountType;
-    currency: CurrencyType;
-    inlinePrompt?: {
-        sentiment?: InlinePromptProps['sentiment'];
-        message: InlinePromptProps['children'];
-        media?: InlinePromptProps['media'];
-    };
-    showChevron?: boolean;
-    autoFocus?: boolean;
-    loading?: boolean;
-    onAmountChange: (amount: AmountType) => void;
-    onFocusChange?: (focused: boolean) => void;
-} & CommonProps;
-export default function ExpressiveMoneyInput({ label, currency, currencySelector, amount, onAmountChange, className, inlinePrompt, showChevron, autoFocus, loading, onFocusChange, }: Props): import("react").JSX.Element;
-export {};
-//# sourceMappingURL=ExpressiveMoneyInput.d.ts.map

package/build/types/expressiveMoneyInput/ExpressiveMoneyInput.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ExpressiveMoneyInput.d.ts","sourceRoot":"","sources":["../../../src/expressiveMoneyInput/ExpressiveMoneyInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAS,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,EACL,KAAK,KAAK,IAAI,qBAAqB,EAEpC,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAGxC,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE9E,KAAK,UAAU,GAAG,MAAM,GAAG,IAAI,CAAC;AAChC,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC;AAElC,KAAK,mCAAmC,GAAG,IAAI,CAC7C,qBAAqB,EACrB,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,QAAQ,GAAG,gBAAgB,CAChE,CAAC;AACF,KAAK,kCAAkC,GAAG;IACxC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,SAAS,CAAC;CACtE,CAAC;AACF,KAAK,oBAAoB,GAAG,mCAAmC,GAC7D,kCAAkC,CAAC;AAErC,MAAM,MAAM,KAAK,GAAG;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,oBAAoB,CAAC;IACxC,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,QAAQ,EAAE,YAAY,CAAC;IACvB,YAAY,CAAC,EAAE;QACb,SAAS,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;QAC3C,OAAO,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;QACvC,KAAK,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;KACpC,CAAC;IACF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7C,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C,GAAG,WAAW,CAAC;AAEhB,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,KAAK,EACL,QAAQ,EACR,gBAAyE,EACzE,MAAM,EACN,cAAc,EACd,SAAS,EACT,YAAY,EACZ,WAAW,EACX,SAAS,EACT,OAAO,EACP,aAAa,GACd,EAAE,KAAK,+BAwEP"}

package/build/types/expressiveMoneyInput/ExpressiveMoneyInput.messages.d.ts

@@ -1,12 +0,0 @@
-declare const _default: {
-    currencySelectorSearchPlaceholder: {
-        id: string;
-        defaultMessage: string;
-    };
-    currencySelectorSelectCurrency: {
-        id: string;
-        defaultMessage: string;
-    };
-};
-export default _default;
-//# sourceMappingURL=ExpressiveMoneyInput.messages.d.ts.map

package/build/types/expressiveMoneyInput/ExpressiveMoneyInput.messages.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ExpressiveMoneyInput.messages.d.ts","sourceRoot":"","sources":["../../../src/expressiveMoneyInput/ExpressiveMoneyInput.messages.ts"],"names":[],"mappings":";;;;;;;;;;AAEA,wBAUG"}

package/build/types/expressiveMoneyInput/amountInput/AmountInput.d.ts

@@ -1,13 +0,0 @@
-import { Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
-type Props = {
-    id: string;
-    describedById?: string;
-    amount?: number | null;
-    currency: string;
-    autoFocus?: boolean;
-    onChange: (amount: number | null) => void;
-    onFocusChange?: (focused: boolean) => void;
-} & Pick<ExpressiveMoneyInputProps, 'loading'>;
-export declare const AmountInput: ({ id, describedById, amount, currency, autoFocus, onChange, onFocusChange, loading, }: Props) => import("react").JSX.Element;
-export {};
-//# sourceMappingURL=AmountInput.d.ts.map

package/build/types/expressiveMoneyInput/amountInput/AmountInput.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AmountInput.d.ts","sourceRoot":"","sources":["../../../../src/expressiveMoneyInput/amountInput/AmountInput.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,IAAI,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAe7E,KAAK,KAAK,GAAG;IACX,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C,GAAG,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC,CAAC;AAE/C,eAAO,MAAM,WAAW,GAAI,uFASzB,KAAK,gCA2SP,CAAC"}