@transferwise/components 0.0.0-experimental-fdbbf7b → 0.0.0-experimental-99ef65c

package/build/expressiveMoneyInput/hooks/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/hooks/useInputStyle.mjs.map

@@ -0,0 +1 @@
+{"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/i18n/en.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "selected",
   "neptune.DateLookup.twentyYears": "20 years",
   "neptune.DateLookup.year": "year",
+  "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Type a currency / country",
+  "neptune.ExpressiveMoneyInput.currency.select.currency": "Select currency",
   "neptune.FlowNavigation.back": "back to previous step",
   "neptune.Info.ariaLabel": "More information",
   "neptune.Label.optional": "(Optional)",

package/build/i18n/en.json.js

@@ -20,6 +20,8 @@ var en = {
 	"neptune.DateLookup.selected": "selected",
 	"neptune.DateLookup.twentyYears": "20 years",
 	"neptune.DateLookup.year": "year",
+	"neptune.ExpressiveMoneyInput.currency.search.placeholder": "Type a currency / country",
+	"neptune.ExpressiveMoneyInput.currency.select.currency": "Select currency",
 	"neptune.FlowNavigation.back": "back to previous step",
 	"neptune.Info.ariaLabel": "More information",
 	"neptune.Label.optional": "(Optional)",

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

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

package/build/i18n/en.json.mjs

@@ -16,6 +16,8 @@ var en = {
 	"neptune.DateLookup.selected": "selected",
 	"neptune.DateLookup.twentyYears": "20 years",
 	"neptune.DateLookup.year": "year",
+	"neptune.ExpressiveMoneyInput.currency.search.placeholder": "Type a currency / country",
+	"neptune.ExpressiveMoneyInput.currency.select.currency": "Select currency",
 	"neptune.FlowNavigation.back": "back to previous step",
 	"neptune.Info.ariaLabel": "More information",
 	"neptune.Label.optional": "(Optional)",

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

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

package/build/index.js

@@ -67,6 +67,7 @@ var Markdown = require('./markdown/Markdown.js');
 var Modal = require('./modal/Modal.js');
 var Money = require('./money/Money.js');
 var MoneyInput = require('./moneyInput/MoneyInput.js');
+var ExpressiveMoneyInput = require('./expressiveMoneyInput/ExpressiveMoneyInput.js');
 var NavigationOption = require('./navigationOption/NavigationOption.js');
 var NavigationOptionsList = require('./navigationOptionsList/NavigationOptionsList.js');
 var Nudge = require('./nudge/Nudge.js');
@@ -229,6 +230,7 @@ exports.Markdown = Markdown.default;
 exports.Modal = Modal.default;
 exports.Money = Money.default;
 exports.MoneyInput = MoneyInput.default;
+exports.ExpressiveMoneyInput = ExpressiveMoneyInput.default;
 exports.NavigationOption = NavigationOption.default;
 exports.NavigationOptionsList = NavigationOptionsList.default;
 exports.Nudge = Nudge.default;

package/build/index.js.map

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

package/build/index.mjs

@@ -65,6 +65,7 @@ export { default as Markdown } from './markdown/Markdown.mjs';
 export { default as Modal } from './modal/Modal.mjs';
 export { default as Money } from './money/Money.mjs';
 export { default as MoneyInput } from './moneyInput/MoneyInput.mjs';
+export { default as ExpressiveMoneyInput } from './expressiveMoneyInput/ExpressiveMoneyInput.mjs';
 export { default as NavigationOption } from './navigationOption/NavigationOption.mjs';
 export { default as NavigationOptionsList } from './navigationOptionsList/NavigationOptionsList.mjs';
 export { default as Nudge } from './nudge/Nudge.mjs';

package/build/index.mjs.map

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

package/build/main.css

@@ -526,26 +526,26 @@
   background-color: var(--color-sentiment-positive-secondary-active);
 }
 .wds-inline-prompt--proposition {
-  background-color: var(--color-sentiment-positive-secondary);
-  color: var(--color-sentiment-positive-primary);
+  background-color: #D2F9F7;
+  color: var(--color-interactive-primary);
 }
 .wds-inline-prompt--proposition a,
 .wds-inline-prompt--proposition button {
-  color: var(--color-sentiment-positive-primary);
+  color: var(--color-interactive-primary);
 }
 .wds-inline-prompt--proposition a:hover,
 .wds-inline-prompt--proposition button:hover {
-  color: var(--color-sentiment-positive-primary-hover);
+  color: var(--color-interactive-primary-hover);
 }
 .wds-inline-prompt--proposition a:active,
 .wds-inline-prompt--proposition button:active {
-  color: var(--color-sentiment-positive-primary-active);
+  color: var(--color-interactive-primary-active);
 }
 .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):hover {
-  background-color: var(--color-sentiment-positive-secondary-hover);
+  background-color: #B2F4F3;
 }
 .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):active {
-  background-color: var(--color-sentiment-positive-secondary-active);
+  background-color: #91F0EE;
 }
 .wds-inline-prompt--neutral {
   background-color: rgba(134,167,189,0.10196);
@@ -4455,6 +4455,64 @@ button.np-link {
   box-shadow: inset 0 0 0 1px #c9cbce !important;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary) !important;
 }
+.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%);
+}
 .np-navigation-option {
   -webkit-text-decoration: none;
   text-decoration: none;

package/build/prompt/InlinePrompt/InlinePrompt.js

@@ -35,9 +35,16 @@ const InlinePrompt = ({
   loading = false,
   className,
   children,
+  media = null,
   ...rest
 }) => {
   const renderMedia = () => {
+    if (media && ['proposition', 'positive'].includes(sentiment$1)) {
+      return media;
+    }
+    if (sentiment$1 === 'proposition') {
+      return /*#__PURE__*/jsxRuntime.jsx(icons.GiftBox, {});
+    }
     if (muted) {
       return /*#__PURE__*/jsxRuntime.jsx(icons.BackslashCircle, {
         size: 16,

package/build/prompt/InlinePrompt/InlinePrompt.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlinePrompt.js","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\n\nexport type InlinePromptProps = {\n  sentiment?: `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`;\n  loading?: boolean;\n  /**\n   * Use for short-lived inline prompts to avoid swap of the icon (which is bad UX for short-lived prompts, e.g. when submit form)\n   */\n  muted?: boolean;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  children: React.ReactNode;\n};\n\nexport const InlinePrompt = ({\n  sentiment = Sentiment.POSITIVE,\n  muted = false,\n  loading = false,\n  className,\n  children,\n  ...rest\n}: InlinePromptProps) => {\n  const renderMedia = () => {\n    if (muted) {\n      return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" />;\n    }\n    if (loading) {\n      return <ProcessIndicator data-testid=\"InlinePrompt_ProcessIndicator\" size=\"xxs\" />;\n    }\n    return <StatusIcon size={16} sentiment={sentiment} />;\n  };\n\n  return (\n    <div\n      className={clsx(\n        'wds-inline-prompt',\n        `wds-inline-prompt--${sentiment}`,\n        {\n          'wds-inline-prompt--muted': muted,\n          'wds-inline-prompt--loading': loading,\n        },\n        className,\n      )}\n      {...rest}\n    >\n      <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n      <Body>{children}</Body>\n    </div>\n  );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","rest","renderMedia","_jsx","BackslashCircle","size","ProcessIndicator","StatusIcon","_jsxs","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBO,MAAMA,YAAY,GAAGA,CAAC;aAC3BC,WAAS,GAAGC,mBAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;EACR,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIL,KAAK,EAAE;MACT,oBAAOM,cAAA,CAACC,qBAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAoB,QAAG;AACvE,IAAA;AACA,IAAA,IAAIP,OAAO,EAAE;MACX,oBAAOK,cAAA,CAACG,wBAAgB,EAAA;AAAC,QAAA,aAAA,EAAY,+BAA+B;AAACD,QAAAA,IAAI,EAAC;AAAK,OAAA,CAAG;AACpF,IAAA;IACA,oBAAOF,cAAA,CAACI,kBAAU,EAAA;AAACF,MAAAA,IAAI,EAAE,EAAG;AAACX,MAAAA,SAAS,EAAEA;AAAU,MAAG;EACvD,CAAC;AAED,EAAA,oBACEc,eAAA,CAAA,KAAA,EAAA;IACET,SAAS,EAAEU,SAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBf,WAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEE,IAAI;AAAAD,IAAAA,QAAA,gBAERG,cAAA,CAAA,KAAA,EAAA;AAAKJ,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEE,WAAW;AAAE,KAAM,CACtE,eAAAC,cAAA,CAACO,YAAI,EAAA;AAAAV,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAK,CAAC;AAEV;;;;"}
+{"version":3,"file":"InlinePrompt.js","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\n\nexport type InlinePromptProps = {\n  sentiment?:\n    | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n    | 'proposition';\n  loading?: boolean;\n  /**\n   * Use for short-lived inline prompts to avoid swap of the icon (which is bad UX for short-lived prompts, e.g. when submit form)\n   */\n  muted?: boolean;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  children: React.ReactNode;\n  media?: React.ReactNode;\n};\n\nexport const InlinePrompt = ({\n  sentiment = Sentiment.POSITIVE,\n  muted = false,\n  loading = false,\n  className,\n  children,\n  media = null,\n  ...rest\n}: InlinePromptProps) => {\n  const renderMedia = () => {\n    if (media && ['proposition', 'positive'].includes(sentiment)) {\n      return media;\n    }\n    if (sentiment === 'proposition') {\n      return <GiftBox />;\n    }\n    if (muted) {\n      return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" />;\n    }\n    if (loading) {\n      return <ProcessIndicator data-testid=\"InlinePrompt_ProcessIndicator\" size=\"xxs\" />;\n    }\n    return <StatusIcon size={16} sentiment={sentiment} />;\n  };\n\n  return (\n    <div\n      className={clsx(\n        'wds-inline-prompt',\n        `wds-inline-prompt--${sentiment}`,\n        {\n          'wds-inline-prompt--muted': muted,\n          'wds-inline-prompt--loading': loading,\n        },\n        className,\n      )}\n      {...rest}\n    >\n      <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n      <Body>{children}</Body>\n    </div>\n  );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","rest","renderMedia","includes","_jsx","GiftBox","BackslashCircle","size","ProcessIndicator","StatusIcon","_jsxs","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBO,MAAMA,YAAY,GAAGA,CAAC;aAC3BC,WAAS,GAAGC,mBAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;AACRC,EAAAA,KAAK,GAAG,IAAI;EACZ,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIF,KAAK,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,CAACG,QAAQ,CAACV,WAAS,CAAC,EAAE;AAC5D,MAAA,OAAOO,KAAK;AACd,IAAA;IACA,IAAIP,WAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,oBAAOW,cAAA,CAACC,aAAO,EAAA,GAAG;AACpB,IAAA;AACA,IAAA,IAAIT,KAAK,EAAE;MACT,oBAAOQ,cAAA,CAACE,qBAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAoB,QAAG;AACvE,IAAA;AACA,IAAA,IAAIV,OAAO,EAAE;MACX,oBAAOO,cAAA,CAACI,wBAAgB,EAAA;AAAC,QAAA,aAAA,EAAY,+BAA+B;AAACD,QAAAA,IAAI,EAAC;AAAK,OAAA,CAAG;AACpF,IAAA;IACA,oBAAOH,cAAA,CAACK,kBAAU,EAAA;AAACF,MAAAA,IAAI,EAAE,EAAG;AAACd,MAAAA,SAAS,EAAEA;AAAU,MAAG;EACvD,CAAC;AAED,EAAA,oBACEiB,eAAA,CAAA,KAAA,EAAA;IACEZ,SAAS,EAAEa,SAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBlB,WAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEG,IAAI;AAAAF,IAAAA,QAAA,gBAERK,cAAA,CAAA,KAAA,EAAA;AAAKN,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEG,WAAW;AAAE,KAAM,CACtE,eAAAE,cAAA,CAACQ,YAAI,EAAA;AAAAb,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAK,CAAC;AAEV;;;;"}

package/build/prompt/InlinePrompt/InlinePrompt.mjs

@@ -17,7 +17,7 @@ import '../../common/propsValues/variant.mjs';
 import '../../common/propsValues/scroll.mjs';
 import '../../common/propsValues/markdownNodeType.mjs';
 import '../../common/fileType.mjs';
-import { BackslashCircle } from '@transferwise/icons';
+import { GiftBox, BackslashCircle } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import 'react';
 import 'react-intl';
@@ -33,9 +33,16 @@ const InlinePrompt = ({
   loading = false,
   className,
   children,
+  media = null,
   ...rest
 }) => {
   const renderMedia = () => {
+    if (media && ['proposition', 'positive'].includes(sentiment)) {
+      return media;
+    }
+    if (sentiment === 'proposition') {
+      return /*#__PURE__*/jsx(GiftBox, {});
+    }
     if (muted) {
       return /*#__PURE__*/jsx(BackslashCircle, {
         size: 16,

package/build/prompt/InlinePrompt/InlinePrompt.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InlinePrompt.mjs","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\n\nexport type InlinePromptProps = {\n  sentiment?: `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`;\n  loading?: boolean;\n  /**\n   * Use for short-lived inline prompts to avoid swap of the icon (which is bad UX for short-lived prompts, e.g. when submit form)\n   */\n  muted?: boolean;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  children: React.ReactNode;\n};\n\nexport const InlinePrompt = ({\n  sentiment = Sentiment.POSITIVE,\n  muted = false,\n  loading = false,\n  className,\n  children,\n  ...rest\n}: InlinePromptProps) => {\n  const renderMedia = () => {\n    if (muted) {\n      return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" />;\n    }\n    if (loading) {\n      return <ProcessIndicator data-testid=\"InlinePrompt_ProcessIndicator\" size=\"xxs\" />;\n    }\n    return <StatusIcon size={16} sentiment={sentiment} />;\n  };\n\n  return (\n    <div\n      className={clsx(\n        'wds-inline-prompt',\n        `wds-inline-prompt--${sentiment}`,\n        {\n          'wds-inline-prompt--muted': muted,\n          'wds-inline-prompt--loading': loading,\n        },\n        className,\n      )}\n      {...rest}\n    >\n      <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n      <Body>{children}</Body>\n    </div>\n  );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","rest","renderMedia","_jsx","BackslashCircle","size","ProcessIndicator","StatusIcon","_jsxs","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBO,MAAMA,YAAY,GAAGA,CAAC;EAC3BC,SAAS,GAAGC,SAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;EACR,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIL,KAAK,EAAE;MACT,oBAAOM,GAAA,CAACC,eAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAoB,QAAG;AACvE,IAAA;AACA,IAAA,IAAIP,OAAO,EAAE;MACX,oBAAOK,GAAA,CAACG,gBAAgB,EAAA;AAAC,QAAA,aAAA,EAAY,+BAA+B;AAACD,QAAAA,IAAI,EAAC;AAAK,OAAA,CAAG;AACpF,IAAA;IACA,oBAAOF,GAAA,CAACI,UAAU,EAAA;AAACF,MAAAA,IAAI,EAAE,EAAG;AAACX,MAAAA,SAAS,EAAEA;AAAU,MAAG;EACvD,CAAC;AAED,EAAA,oBACEc,IAAA,CAAA,KAAA,EAAA;IACET,SAAS,EAAEU,IAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBf,SAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEE,IAAI;AAAAD,IAAAA,QAAA,gBAERG,GAAA,CAAA,KAAA,EAAA;AAAKJ,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEE,WAAW;AAAE,KAAM,CACtE,eAAAC,GAAA,CAACO,IAAI,EAAA;AAAAV,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAK,CAAC;AAEV;;;;"}
+{"version":3,"file":"InlinePrompt.mjs","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\n\nexport type InlinePromptProps = {\n  sentiment?:\n    | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n    | 'proposition';\n  loading?: boolean;\n  /**\n   * Use for short-lived inline prompts to avoid swap of the icon (which is bad UX for short-lived prompts, e.g. when submit form)\n   */\n  muted?: boolean;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  children: React.ReactNode;\n  media?: React.ReactNode;\n};\n\nexport const InlinePrompt = ({\n  sentiment = Sentiment.POSITIVE,\n  muted = false,\n  loading = false,\n  className,\n  children,\n  media = null,\n  ...rest\n}: InlinePromptProps) => {\n  const renderMedia = () => {\n    if (media && ['proposition', 'positive'].includes(sentiment)) {\n      return media;\n    }\n    if (sentiment === 'proposition') {\n      return <GiftBox />;\n    }\n    if (muted) {\n      return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" />;\n    }\n    if (loading) {\n      return <ProcessIndicator data-testid=\"InlinePrompt_ProcessIndicator\" size=\"xxs\" />;\n    }\n    return <StatusIcon size={16} sentiment={sentiment} />;\n  };\n\n  return (\n    <div\n      className={clsx(\n        'wds-inline-prompt',\n        `wds-inline-prompt--${sentiment}`,\n        {\n          'wds-inline-prompt--muted': muted,\n          'wds-inline-prompt--loading': loading,\n        },\n        className,\n      )}\n      {...rest}\n    >\n      <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n      <Body>{children}</Body>\n    </div>\n  );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","rest","renderMedia","includes","_jsx","GiftBox","BackslashCircle","size","ProcessIndicator","StatusIcon","_jsxs","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBO,MAAMA,YAAY,GAAGA,CAAC;EAC3BC,SAAS,GAAGC,SAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;AACRC,EAAAA,KAAK,GAAG,IAAI;EACZ,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIF,KAAK,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,CAACG,QAAQ,CAACV,SAAS,CAAC,EAAE;AAC5D,MAAA,OAAOO,KAAK;AACd,IAAA;IACA,IAAIP,SAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,oBAAOW,GAAA,CAACC,OAAO,EAAA,GAAG;AACpB,IAAA;AACA,IAAA,IAAIT,KAAK,EAAE;MACT,oBAAOQ,GAAA,CAACE,eAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAoB,QAAG;AACvE,IAAA;AACA,IAAA,IAAIV,OAAO,EAAE;MACX,oBAAOO,GAAA,CAACI,gBAAgB,EAAA;AAAC,QAAA,aAAA,EAAY,+BAA+B;AAACD,QAAAA,IAAI,EAAC;AAAK,OAAA,CAAG;AACpF,IAAA;IACA,oBAAOH,GAAA,CAACK,UAAU,EAAA;AAACF,MAAAA,IAAI,EAAE,EAAG;AAACd,MAAAA,SAAS,EAAEA;AAAU,MAAG;EACvD,CAAC;AAED,EAAA,oBACEiB,IAAA,CAAA,KAAA,EAAA;IACEZ,SAAS,EAAEa,IAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBlB,SAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEG,IAAI;AAAAF,IAAAA,QAAA,gBAERK,GAAA,CAAA,KAAA,EAAA;AAAKN,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEG,WAAW;AAAE,KAAM,CACtE,eAAAE,GAAA,CAACQ,IAAI,EAAA;AAAAb,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAK,CAAC;AAEV;;;;"}

package/build/styles/expressiveMoneyInput/ExpressiveMoneyInput.css

@@ -0,0 +1,58 @@
+.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

@@ -0,0 +1,32 @@
+.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

@@ -0,0 +1,12 @@
+.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

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

package/build/styles/main.css

@@ -526,26 +526,26 @@
   background-color: var(--color-sentiment-positive-secondary-active);
 }
 .wds-inline-prompt--proposition {
-  background-color: var(--color-sentiment-positive-secondary);
-  color: var(--color-sentiment-positive-primary);
+  background-color: #D2F9F7;
+  color: var(--color-interactive-primary);
 }
 .wds-inline-prompt--proposition a,
 .wds-inline-prompt--proposition button {
-  color: var(--color-sentiment-positive-primary);
+  color: var(--color-interactive-primary);
 }
 .wds-inline-prompt--proposition a:hover,
 .wds-inline-prompt--proposition button:hover {
-  color: var(--color-sentiment-positive-primary-hover);
+  color: var(--color-interactive-primary-hover);
 }
 .wds-inline-prompt--proposition a:active,
 .wds-inline-prompt--proposition button:active {
-  color: var(--color-sentiment-positive-primary-active);
+  color: var(--color-interactive-primary-active);
 }
 .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):hover {
-  background-color: var(--color-sentiment-positive-secondary-hover);
+  background-color: #B2F4F3;
 }
 .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):active {
-  background-color: var(--color-sentiment-positive-secondary-active);
+  background-color: #91F0EE;
 }
 .wds-inline-prompt--neutral {
   background-color: rgba(134,167,189,0.10196);
@@ -4455,6 +4455,64 @@ button.np-link {
   box-shadow: inset 0 0 0 1px #c9cbce !important;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary) !important;
 }
+.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%);
+}
 .np-navigation-option {
   -webkit-text-decoration: none;
   text-decoration: none;

package/build/styles/prompt/InlinePrompt/InlinePrompt.css

@@ -91,26 +91,26 @@
   background-color: var(--color-sentiment-positive-secondary-active);
 }
 .wds-inline-prompt--proposition {
-  background-color: var(--color-sentiment-positive-secondary);
-  color: var(--color-sentiment-positive-primary);
+  background-color: #D2F9F7;
+  color: var(--color-interactive-primary);
 }
 .wds-inline-prompt--proposition a,
 .wds-inline-prompt--proposition button {
-  color: var(--color-sentiment-positive-primary);
+  color: var(--color-interactive-primary);
 }
 .wds-inline-prompt--proposition a:hover,
 .wds-inline-prompt--proposition button:hover {
-  color: var(--color-sentiment-positive-primary-hover);
+  color: var(--color-interactive-primary-hover);
 }
 .wds-inline-prompt--proposition a:active,
 .wds-inline-prompt--proposition button:active {
-  color: var(--color-sentiment-positive-primary-active);
+  color: var(--color-interactive-primary-active);
 }
 .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):hover {
-  background-color: var(--color-sentiment-positive-secondary-hover);
+  background-color: #B2F4F3;
 }
 .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):active {
-  background-color: var(--color-sentiment-positive-secondary-active);
+  background-color: #91F0EE;
 }
 .wds-inline-prompt--neutral {
   background-color: rgba(134,167,189,0.10196);

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

@@ -0,0 +1,59 @@
+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;
+    /**
+     * The currency code, e.g. `USD`, `EUR`, `GBP`, etc. Governs the flag rendered in the currency selector.
+     */
+    currency: CurrencyType;
+    inlinePrompt?: {
+        sentiment?: InlinePromptProps['sentiment'];
+        message: InlinePromptProps['children'];
+        media?: InlinePromptProps['media'];
+    };
+    showChevron?: boolean;
+    /**
+     * If set, it auto-focuses the amount input upon component mount.<br />
+     * ⚠️ **Use with caution**, as it may impact user experience and
+     * fail [WCAG 2.4.3 requirements](https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html)
+     */
+    autoFocus?: boolean;
+    /**
+     * Dims the input to indicate a loading state. Does not disable it.
+     */
+    loading?: boolean;
+    onAmountChange: (amount: AmountType) => void;
+    onFocusChange?: (focused: boolean) => void;
+} & CommonProps;
+/**
+ * This component has been kindly contributed by our friends at the `Send` team 🎉.
+ *
+ * Some patterns and implementation details used in this component may differ
+ * from what's commonly used in the Design System. The overall build and QA was managed
+ * by the contributing team directly, and such did not follow a typical DS lifecycle.
+ *
+ * While we house this component and will help facilitate its future iterations,
+ * direct contributions by consuming product teams are highly encouraged.
+ *
+ * > ⚠️ **Prerequisite:** <br />The component depends on the
+ * [framer-motion](https://www.npmjs.com/package/framer-motion) package, which has been
+ * deliberately excluded from the Design System bundle and kept as an opt-in only.
+ * **Make sure to add it to your project dependencies.**
+ */
+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