@transferwise/components 0.0.0-experimental-b3df26d → 0.0.0-experimental-050f154

package/build/expressiveMoneyInput/ExpressiveMoneyInput.js

@@ -0,0 +1,114 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Body = require('../body/Body.js');
+var Label = require('../label/Label.js');
+var clsx = require('clsx');
+var framerMotion = require('framer-motion');
+var React = require('react');
+var CurrencySelector = require('./CurrencySelector.js');
+var AmountInput = require('./AmountInput.js');
+var Chevron = require('./Chevron.js');
+var InlinePrompt = require('../prompt/InlinePrompt/InlinePrompt.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function ExpressiveMoneyInput({
+  label,
+  currency,
+  currencySelector = {
+    options: []
+  },
+  amount,
+  onAmountChange,
+  className,
+  inlinePrompt,
+  showChevron,
+  autoFocus,
+  loading,
+  onFocusChange
+}) {
+  const inputId = React.useId();
+  const labelId = React.useId();
+  const customAlertId = React.useId();
+  const currencyId = React.useId();
+  const selector = currencySelector.customRender?.({
+    id: currencyId,
+    labelId
+  }) ?? /*#__PURE__*/jsxRuntime.jsx(CurrencySelector.CurrencySelector, {
+    id: currencyId,
+    labelId: labelId,
+    currency: currency,
+    ...currencySelector
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: clsx.clsx('wds-expressive-money-input', className),
+    children: [/*#__PURE__*/jsxRuntime.jsx(Label.Label, {
+      id: labelId,
+      htmlFor: inputId,
+      className: clsx.clsx('m-b-1', 'font-weight-normal'),
+      children: label
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: clsx.clsx('d-flex'),
+      role: "group",
+      "aria-labelledby": labelId,
+      ...(inlinePrompt ? {
+        'aria-describedby': customAlertId
+      } : {}),
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "wds-expressive-money-input-currency-selector",
+        children: selector
+      }), /*#__PURE__*/jsxRuntime.jsx(AmountInput.AmountInput, {
+        id: inputId,
+        describedById: currencyId,
+        amount: amount,
+        currency: currency
+        // eslint-disable-next-line jsx-a11y/no-autofocus
+        ,
+        autoFocus: autoFocus,
+        loading: loading,
+        onChange: onAmountChange,
+        onFocusChange: onFocusChange
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: clsx.clsx('d-flex align-items-center', 'wds-expressive-money-input-chevron'),
+        children: /*#__PURE__*/jsxRuntime.jsx(Chevron.Chevron, {
+          shouldShow: Boolean(showChevron)
+        })
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(framerMotion.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, {
+          initial: {
+            opacity: 0,
+            height: 0
+          },
+          animate: {
+            opacity: 1,
+            height: 'auto',
+            transition: {
+              delay: 0.75,
+              duration: 0.3
+            }
+          },
+          exit: {
+            opacity: 0,
+            height: 0
+          },
+          children: inlinePrompt.sentiment ? /*#__PURE__*/jsxRuntime.jsx(InlinePrompt.InlinePrompt, {
+            id: customAlertId,
+            media: inlinePrompt.media,
+            sentiment: inlinePrompt.sentiment,
+            children: inlinePrompt.message
+          }) : /*#__PURE__*/jsxRuntime.jsx(Body.default, {
+            children: inlinePrompt.message
+          })
+        }, customAlertId)
+      })
+    })]
+  });
+}
+
+exports.default = ExpressiveMoneyInput;
+//# sourceMappingURL=ExpressiveMoneyInput.js.map

package/build/expressiveMoneyInput/ExpressiveMoneyInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpressiveMoneyInput.js","sources":["../../src/expressiveMoneyInput/ExpressiveMoneyInput.tsx"],"sourcesContent":["import Body from '../body';\nimport { Label } from '../label/Label';\nimport { clsx } from 'clsx';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { useId, type ReactNode } from 'react';\n\nimport { type Props as CurrencySelectorProps, CurrencySelector } from './CurrencySelector';\nimport { CommonProps } from '../common';\nimport { AmountInput } from './AmountInput';\nimport { Chevron } from './Chevron';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt/InlinePrompt';\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  currency: CurrencyType;\n  inlinePrompt?: {\n    sentiment?: InlinePromptProps['sentiment'];\n    message: InlinePromptProps['children'];\n    media?: InlinePromptProps['media'];\n  };\n  showChevron?: boolean;\n  autoFocus?: boolean;\n  loading?: boolean;\n  onAmountChange: (amount: AmountType) => void;\n  onFocusChange?: (focused: boolean) => void;\n} & CommonProps;\n\nexport default function ExpressiveMoneyInput({\n  label,\n  currency,\n  currencySelector = { options: [] } as DefaultCurrencySelectorInstanceType,\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  const selector = currencySelector.customRender?.({ id: currencyId, labelId }) ?? (\n    <CurrencySelector id={currencyId} labelId={labelId} currency={currency} {...currencySelector} />\n  );\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\">{selector}</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 ? (\n                <InlinePrompt id={customAlertId} media={inlinePrompt.media} sentiment={inlinePrompt.sentiment}>\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","selector","customRender","id","_jsx","CurrencySelector","_jsxs","clsx","children","Label","htmlFor","role","AmountInput","describedById","onChange","Chevron","shouldShow","Boolean","AnimatePresence","initial","motion","div","opacity","height","animate","transition","delay","duration","exit","sentiment","InlinePrompt","media","message","Body"],"mappings":";;;;;;;;;;;;;;;AA0Cc,SAAUA,oBAAoBA,CAAC;EAC3CC,KAAK;EACLC,QAAQ;AACRC,EAAAA,gBAAgB,GAAG;AAAEC,IAAAA,OAAO,EAAE;GAA2C;EACzEC,MAAM;EACNC,cAAc;EACdC,SAAS;EACTC,YAAY;EACZC,WAAW;EACXC,SAAS;EACTC,OAAO;AACPC,EAAAA;AAAa,CACP,EAAA;AACN,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,MAAMI,QAAQ,GAAGf,gBAAgB,CAACgB,YAAY,GAAG;AAAEC,IAAAA,EAAE,EAAEH,UAAU;AAAEF,IAAAA;AAAO,GAAE,CAAC,iBAC3EM,cAAA,CAACC,iCAAgB,EAAA;AAACF,IAAAA,EAAE,EAAEH,UAAW;AAACF,IAAAA,OAAO,EAAEA,OAAQ;AAACb,IAAAA,QAAQ,EAAEA,QAAS;IAAA,GAAKC;AAAgB,GAAC,CAC9F;AAED,EAAA,oBACEoB,eAAA,CAAA,KAAA,EAAA;AAAKhB,IAAAA,SAAS,EAAEiB,SAAI,CAAC,4BAA4B,EAAEjB,SAAS,CAAE;IAAAkB,QAAA,EAAA,cAC5DJ,cAAA,CAACK,WAAK,EAAA;AAACN,MAAAA,EAAE,EAAEL,OAAQ;AAACY,MAAAA,OAAO,EAAEd,OAAQ;AAACN,MAAAA,SAAS,EAAEiB,SAAI,CAAC,OAAO,EAAE,oBAAoB,CAAE;AAAAC,MAAAA,QAAA,EAClFxB;KACI,CACP,eAAAsB,eAAA,CAAA,KAAA,EAAA;AACEhB,MAAAA,SAAS,EAAEiB,SAAI,CAAC,QAAQ,CAAE;AAC1BI,MAAAA,IAAI,EAAC,OAAO;AACZ,MAAA,iBAAA,EAAiBb,OAAQ;AAAA,MAAA,IACpBP,YAAY,GAAG;AAAE,QAAA,kBAAkB,EAAEQ;OAAe,GAAG,EAAE,CAAA;AAAAS,MAAAA,QAAA,gBAE9DJ,cAAA,CAAA,KAAA,EAAA;AAAKd,QAAAA,SAAS,EAAC,8CAA8C;AAAAkB,QAAAA,QAAA,EAAEP;AAAQ,OAAM,CAC7E,eAAAG,cAAA,CAACQ,uBAAW,EAAA;AACVT,QAAAA,EAAE,EAAEP,OAAQ;AACZiB,QAAAA,aAAa,EAAEb,UAAW;AAC1BZ,QAAAA,MAAM,EAAEA,MAAO;AACfH,QAAAA,QAAQ,EAAEA;AACV;AAAA;AACAQ,QAAAA,SAAS,EAAEA,SAAU;AACrBC,QAAAA,OAAO,EAAEA,OAAQ;AACjBoB,QAAAA,QAAQ,EAAEzB,cAAe;AACzBM,QAAAA,aAAa,EAAEA;OAAc,CAE/B,eAAAS,cAAA,CAAA,KAAA,EAAA;AAAKd,QAAAA,SAAS,EAAEiB,SAAI,CAAC,2BAA2B,EAAE,oCAAoC,CAAE;QAAAC,QAAA,eACtFJ,cAAA,CAACW,eAAO,EAAA;UAACC,UAAU,EAAEC,OAAO,CAACzB,WAAW;SAAE;AAC5C,OAAK,CACP;AAAA,KAAK,CACL,eAAAY,cAAA,CAACc,4BAAe,EAAA;AAACC,MAAAA,OAAO,EAAE,KAAM;MAAAX,QAAA,EAC7BjB,YAAY,iBACXa,cAAA,CAAA,KAAA,EAAA;QAAKd,SAAS,EAAEiB,SAAI,CAAC,4BAA4B,EAAEhB,YAAY,IAAI,OAAO,CAAE;AAAAiB,QAAAA,QAAA,eAC1EJ,cAAA,CAACgB,mBAAM,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;AAAAf,UAAAA,QAAA,EAE/BjB,YAAY,CAACsC,SAAS,gBACrBzB,cAAA,CAAC0B,yBAAY,EAAA;AAAC3B,YAAAA,EAAE,EAAEJ,aAAc;YAACgC,KAAK,EAAExC,YAAY,CAACwC,KAAM;YAACF,SAAS,EAAEtC,YAAY,CAACsC,SAAU;YAAArB,QAAA,EAC3FjB,YAAY,CAACyC;AAAO,WACT,CAAC,gBAEf5B,cAAA,CAAC6B,YAAI,EAAA;YAAAzB,QAAA,EAAEjB,YAAY,CAACyC;WAAc;AACnC,SAAA,EAfIjC,aAgBK;OACT;AACN,KACc,CACnB;AAAA,GAAK,CAAC;AAEV;;;;"}

package/build/expressiveMoneyInput/ExpressiveMoneyInput.messages.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactIntl = require('react-intl');
+
+var messages = reactIntl.defineMessages({
+  currencySelectorSearchPlaceholder: {
+    id: "neptune.ExpressiveMoneyInput.currency.search.placeholder"
+  },
+  currencySelectorSelectCurrency: {
+    id: "neptune.ExpressiveMoneyInput.currency.select.currency"
+  }
+});
+
+exports.default = messages;
+//# sourceMappingURL=ExpressiveMoneyInput.messages.js.map

package/build/expressiveMoneyInput/ExpressiveMoneyInput.messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpressiveMoneyInput.messages.js","sources":["../../src/expressiveMoneyInput/ExpressiveMoneyInput.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  currencySelectorSearchPlaceholder: {\n    id: 'neptune.ExpressiveMoneyInput.currency.search.placeholder',\n    defaultMessage: 'Type a currency / country',\n  },\n\n  currencySelectorSelectCurrency: {\n    id: 'neptune.ExpressiveMoneyInput.currency.select.currency',\n    defaultMessage: 'Select currency',\n  },\n});\n"],"names":["defineMessages","currencySelectorSearchPlaceholder","id","currencySelectorSelectCurrency"],"mappings":";;;;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,iCAAiC,EAAE;IACjCC,EAAE,EAAA;GAEH;AAEDC,EAAAA,8BAA8B,EAAE;IAC9BD,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;;;"}

package/build/expressiveMoneyInput/ExpressiveMoneyInput.messages.mjs

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl';
+
+var messages = defineMessages({
+  currencySelectorSearchPlaceholder: {
+    id: "neptune.ExpressiveMoneyInput.currency.search.placeholder"
+  },
+  currencySelectorSelectCurrency: {
+    id: "neptune.ExpressiveMoneyInput.currency.select.currency"
+  }
+});
+
+export { messages as default };
+//# sourceMappingURL=ExpressiveMoneyInput.messages.mjs.map

package/build/expressiveMoneyInput/ExpressiveMoneyInput.messages.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpressiveMoneyInput.messages.mjs","sources":["../../src/expressiveMoneyInput/ExpressiveMoneyInput.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  currencySelectorSearchPlaceholder: {\n    id: 'neptune.ExpressiveMoneyInput.currency.search.placeholder',\n    defaultMessage: 'Type a currency / country',\n  },\n\n  currencySelectorSelectCurrency: {\n    id: 'neptune.ExpressiveMoneyInput.currency.select.currency',\n    defaultMessage: 'Select currency',\n  },\n});\n"],"names":["defineMessages","currencySelectorSearchPlaceholder","id","currencySelectorSelectCurrency"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,iCAAiC,EAAE;IACjCC,EAAE,EAAA;GAEH;AAEDC,EAAAA,8BAA8B,EAAE;IAC9BD,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;;;"}

package/build/expressiveMoneyInput/ExpressiveMoneyInput.mjs

@@ -0,0 +1,110 @@
+import Body from '../body/Body.mjs';
+import { Label as LabelNamespace } from '../label/Label.mjs';
+import { clsx } from 'clsx';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useId } from 'react';
+import { CurrencySelector } from './CurrencySelector.mjs';
+import { AmountInput } from './AmountInput.mjs';
+import { Chevron } from './Chevron.mjs';
+import { InlinePrompt } from '../prompt/InlinePrompt/InlinePrompt.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function ExpressiveMoneyInput({
+  label,
+  currency,
+  currencySelector = {
+    options: []
+  },
+  amount,
+  onAmountChange,
+  className,
+  inlinePrompt,
+  showChevron,
+  autoFocus,
+  loading,
+  onFocusChange
+}) {
+  const inputId = useId();
+  const labelId = useId();
+  const customAlertId = useId();
+  const currencyId = useId();
+  const selector = currencySelector.customRender?.({
+    id: currencyId,
+    labelId
+  }) ?? /*#__PURE__*/jsx(CurrencySelector, {
+    id: currencyId,
+    labelId: labelId,
+    currency: currency,
+    ...currencySelector
+  });
+  return /*#__PURE__*/jsxs("div", {
+    className: clsx('wds-expressive-money-input', className),
+    children: [/*#__PURE__*/jsx(LabelNamespace, {
+      id: labelId,
+      htmlFor: inputId,
+      className: clsx('m-b-1', 'font-weight-normal'),
+      children: label
+    }), /*#__PURE__*/jsxs("div", {
+      className: clsx('d-flex'),
+      role: "group",
+      "aria-labelledby": labelId,
+      ...(inlinePrompt ? {
+        'aria-describedby': customAlertId
+      } : {}),
+      children: [/*#__PURE__*/jsx("div", {
+        className: "wds-expressive-money-input-currency-selector",
+        children: selector
+      }), /*#__PURE__*/jsx(AmountInput, {
+        id: inputId,
+        describedById: currencyId,
+        amount: amount,
+        currency: currency
+        // eslint-disable-next-line jsx-a11y/no-autofocus
+        ,
+        autoFocus: autoFocus,
+        loading: loading,
+        onChange: onAmountChange,
+        onFocusChange: onFocusChange
+      }), /*#__PURE__*/jsx("div", {
+        className: clsx('d-flex align-items-center', 'wds-expressive-money-input-chevron'),
+        children: /*#__PURE__*/jsx(Chevron, {
+          shouldShow: Boolean(showChevron)
+        })
+      })]
+    }), /*#__PURE__*/jsx(AnimatePresence, {
+      initial: false,
+      children: inlinePrompt && /*#__PURE__*/jsx("div", {
+        className: clsx('d-flex justify-content-end', inlinePrompt && 'm-t-1'),
+        children: /*#__PURE__*/jsx(motion.div, {
+          initial: {
+            opacity: 0,
+            height: 0
+          },
+          animate: {
+            opacity: 1,
+            height: 'auto',
+            transition: {
+              delay: 0.75,
+              duration: 0.3
+            }
+          },
+          exit: {
+            opacity: 0,
+            height: 0
+          },
+          children: inlinePrompt.sentiment ? /*#__PURE__*/jsx(InlinePrompt, {
+            id: customAlertId,
+            media: inlinePrompt.media,
+            sentiment: inlinePrompt.sentiment,
+            children: inlinePrompt.message
+          }) : /*#__PURE__*/jsx(Body, {
+            children: inlinePrompt.message
+          })
+        }, customAlertId)
+      })
+    })]
+  });
+}
+
+export { ExpressiveMoneyInput as default };
+//# sourceMappingURL=ExpressiveMoneyInput.mjs.map

package/build/expressiveMoneyInput/ExpressiveMoneyInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpressiveMoneyInput.mjs","sources":["../../src/expressiveMoneyInput/ExpressiveMoneyInput.tsx"],"sourcesContent":["import Body from '../body';\nimport { Label } from '../label/Label';\nimport { clsx } from 'clsx';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { useId, type ReactNode } from 'react';\n\nimport { type Props as CurrencySelectorProps, CurrencySelector } from './CurrencySelector';\nimport { CommonProps } from '../common';\nimport { AmountInput } from './AmountInput';\nimport { Chevron } from './Chevron';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt/InlinePrompt';\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  currency: CurrencyType;\n  inlinePrompt?: {\n    sentiment?: InlinePromptProps['sentiment'];\n    message: InlinePromptProps['children'];\n    media?: InlinePromptProps['media'];\n  };\n  showChevron?: boolean;\n  autoFocus?: boolean;\n  loading?: boolean;\n  onAmountChange: (amount: AmountType) => void;\n  onFocusChange?: (focused: boolean) => void;\n} & CommonProps;\n\nexport default function ExpressiveMoneyInput({\n  label,\n  currency,\n  currencySelector = { options: [] } as DefaultCurrencySelectorInstanceType,\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  const selector = currencySelector.customRender?.({ id: currencyId, labelId }) ?? (\n    <CurrencySelector id={currencyId} labelId={labelId} currency={currency} {...currencySelector} />\n  );\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\">{selector}</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 ? (\n                <InlinePrompt id={customAlertId} media={inlinePrompt.media} sentiment={inlinePrompt.sentiment}>\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","selector","customRender","id","_jsx","CurrencySelector","_jsxs","clsx","children","Label","htmlFor","role","AmountInput","describedById","onChange","Chevron","shouldShow","Boolean","AnimatePresence","initial","motion","div","opacity","height","animate","transition","delay","duration","exit","sentiment","InlinePrompt","media","message","Body"],"mappings":";;;;;;;;;;;AA0Cc,SAAUA,oBAAoBA,CAAC;EAC3CC,KAAK;EACLC,QAAQ;AACRC,EAAAA,gBAAgB,GAAG;AAAEC,IAAAA,OAAO,EAAE;GAA2C;EACzEC,MAAM;EACNC,cAAc;EACdC,SAAS;EACTC,YAAY;EACZC,WAAW;EACXC,SAAS;EACTC,OAAO;AACPC,EAAAA;AAAa,CACP,EAAA;AACN,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE;AACvB,EAAA,MAAMC,OAAO,GAAGD,KAAK,EAAE;AACvB,EAAA,MAAME,aAAa,GAAGF,KAAK,EAAE;AAC7B,EAAA,MAAMG,UAAU,GAAGH,KAAK,EAAE;AAE1B,EAAA,MAAMI,QAAQ,GAAGf,gBAAgB,CAACgB,YAAY,GAAG;AAAEC,IAAAA,EAAE,EAAEH,UAAU;AAAEF,IAAAA;AAAO,GAAE,CAAC,iBAC3EM,GAAA,CAACC,gBAAgB,EAAA;AAACF,IAAAA,EAAE,EAAEH,UAAW;AAACF,IAAAA,OAAO,EAAEA,OAAQ;AAACb,IAAAA,QAAQ,EAAEA,QAAS;IAAA,GAAKC;AAAgB,GAAC,CAC9F;AAED,EAAA,oBACEoB,IAAA,CAAA,KAAA,EAAA;AAAKhB,IAAAA,SAAS,EAAEiB,IAAI,CAAC,4BAA4B,EAAEjB,SAAS,CAAE;IAAAkB,QAAA,EAAA,cAC5DJ,GAAA,CAACK,cAAK,EAAA;AAACN,MAAAA,EAAE,EAAEL,OAAQ;AAACY,MAAAA,OAAO,EAAEd,OAAQ;AAACN,MAAAA,SAAS,EAAEiB,IAAI,CAAC,OAAO,EAAE,oBAAoB,CAAE;AAAAC,MAAAA,QAAA,EAClFxB;KACI,CACP,eAAAsB,IAAA,CAAA,KAAA,EAAA;AACEhB,MAAAA,SAAS,EAAEiB,IAAI,CAAC,QAAQ,CAAE;AAC1BI,MAAAA,IAAI,EAAC,OAAO;AACZ,MAAA,iBAAA,EAAiBb,OAAQ;AAAA,MAAA,IACpBP,YAAY,GAAG;AAAE,QAAA,kBAAkB,EAAEQ;OAAe,GAAG,EAAE,CAAA;AAAAS,MAAAA,QAAA,gBAE9DJ,GAAA,CAAA,KAAA,EAAA;AAAKd,QAAAA,SAAS,EAAC,8CAA8C;AAAAkB,QAAAA,QAAA,EAAEP;AAAQ,OAAM,CAC7E,eAAAG,GAAA,CAACQ,WAAW,EAAA;AACVT,QAAAA,EAAE,EAAEP,OAAQ;AACZiB,QAAAA,aAAa,EAAEb,UAAW;AAC1BZ,QAAAA,MAAM,EAAEA,MAAO;AACfH,QAAAA,QAAQ,EAAEA;AACV;AAAA;AACAQ,QAAAA,SAAS,EAAEA,SAAU;AACrBC,QAAAA,OAAO,EAAEA,OAAQ;AACjBoB,QAAAA,QAAQ,EAAEzB,cAAe;AACzBM,QAAAA,aAAa,EAAEA;OAAc,CAE/B,eAAAS,GAAA,CAAA,KAAA,EAAA;AAAKd,QAAAA,SAAS,EAAEiB,IAAI,CAAC,2BAA2B,EAAE,oCAAoC,CAAE;QAAAC,QAAA,eACtFJ,GAAA,CAACW,OAAO,EAAA;UAACC,UAAU,EAAEC,OAAO,CAACzB,WAAW;SAAE;AAC5C,OAAK,CACP;AAAA,KAAK,CACL,eAAAY,GAAA,CAACc,eAAe,EAAA;AAACC,MAAAA,OAAO,EAAE,KAAM;MAAAX,QAAA,EAC7BjB,YAAY,iBACXa,GAAA,CAAA,KAAA,EAAA;QAAKd,SAAS,EAAEiB,IAAI,CAAC,4BAA4B,EAAEhB,YAAY,IAAI,OAAO,CAAE;AAAAiB,QAAAA,QAAA,eAC1EJ,GAAA,CAACgB,MAAM,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;AAAAf,UAAAA,QAAA,EAE/BjB,YAAY,CAACsC,SAAS,gBACrBzB,GAAA,CAAC0B,YAAY,EAAA;AAAC3B,YAAAA,EAAE,EAAEJ,aAAc;YAACgC,KAAK,EAAExC,YAAY,CAACwC,KAAM;YAACF,SAAS,EAAEtC,YAAY,CAACsC,SAAU;YAAArB,QAAA,EAC3FjB,YAAY,CAACyC;AAAO,WACT,CAAC,gBAEf5B,GAAA,CAAC6B,IAAI,EAAA;YAAAzB,QAAA,EAAEjB,YAAY,CAACyC;WAAc;AACnC,SAAA,EAfIjC,aAgBK;OACT;AACN,KACc,CACnB;AAAA,GAAK,CAAC;AAEV;;;;"}

package/build/expressiveMoneyInput/useFocus.js

@@ -0,0 +1,37 @@
+'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/useFocus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocus.js","sources":["../../src/expressiveMoneyInput/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/useFocus.mjs

@@ -0,0 +1,35 @@
+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/useFocus.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocus.mjs","sources":["../../src/expressiveMoneyInput/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/useInputStyle.js

@@ -0,0 +1,71 @@
+'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/useInputStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInputStyle.js","sources":["../../src/expressiveMoneyInput/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/useInputStyle.mjs

@@ -0,0 +1,69 @@
+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/useInputStyle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInputStyle.mjs","sources":["../../src/expressiveMoneyInput/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/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