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

package/build/expressiveMoneyInput/utils.js.map

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

package/build/expressiveMoneyInput/utils.mjs

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

package/build/expressiveMoneyInput/utils.mjs.map

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

package/build/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);
@@ -4447,6 +4447,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/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.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.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/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/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);
@@ -4447,6 +4447,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/AmountInput.d.ts

@@ -0,0 +1,13 @@
+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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AmountInput.d.ts","sourceRoot":"","sources":["../../../src/expressiveMoneyInput/AmountInput.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,IAAI,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAe5E,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"}