@transferwise/components 0.0.0-experimental-77845f6 → 0.0.0-experimental-e556371

package/src/main.css

@@ -526,26 +526,26 @@
   background-color: var(--color-sentiment-positive-secondary-active);
 }
 .wds-inline-prompt--proposition {
-  background-color: #D2F9F7;
-  color: var(--color-interactive-primary);
+  background-color: var(--color-sentiment-positive-secondary);
+  color: var(--color-sentiment-positive-primary);
 }
 .wds-inline-prompt--proposition a,
 .wds-inline-prompt--proposition button {
-  color: var(--color-interactive-primary);
+  color: var(--color-sentiment-positive-primary);
 }
 .wds-inline-prompt--proposition a:hover,
 .wds-inline-prompt--proposition button:hover {
-  color: var(--color-interactive-primary-hover);
+  color: var(--color-sentiment-positive-primary-hover);
 }
 .wds-inline-prompt--proposition a:active,
 .wds-inline-prompt--proposition button:active {
-  color: var(--color-interactive-primary-active);
+  color: var(--color-sentiment-positive-primary-active);
 }
 .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):hover {
-  background-color: #B2F4F3;
+  background-color: var(--color-sentiment-positive-secondary-hover);
 }
 .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):active {
-  background-color: #91F0EE;
+  background-color: var(--color-sentiment-positive-secondary-active);
 }
 .wds-inline-prompt--neutral {
   background-color: rgba(134,167,189,0.10196);
@@ -4421,6 +4421,14 @@ button.np-link {
   flex-shrink: 0;
   width: auto;
 }
+.tw-money-input .input-group-addon:not(.amount-currency-select-btn):not(.tw-money-input__fixed-currency):not(:has(~ .tw-money-input__fixed-currency)) {
+  padding-right: 0 !important;
+}
+[dir="rtl"] .tw-money-input .input-group-addon:not(.amount-currency-select-btn):not(.tw-money-input__fixed-currency):not(:has(~ .tw-money-input__fixed-currency)) {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  padding-right: initial !important;
+}
 .tw-money-input .amount-currency-select-btn {
   flex-shrink: 0;
   width: auto;
@@ -4447,64 +4455,6 @@ 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/src/main.less

@@ -51,7 +51,6 @@
 @import "./logo/Logo.less";
 @import "./modal/Modal.less";
 @import "./moneyInput/MoneyInput.less";
-@import "./expressiveMoneyInput/ExpressiveMoneyInput.less";
 @import "./navigationOption/NavigationOption.less";
 @import "./navigationOptionsList/NavigationOptionsList.less";
 @import "./nudge/Nudge.less";

package/src/moneyInput/MoneyInput.css

@@ -38,6 +38,14 @@
   flex-shrink: 0;
   width: auto;
 }
+.tw-money-input .input-group-addon:not(.amount-currency-select-btn):not(.tw-money-input__fixed-currency):not(:has(~ .tw-money-input__fixed-currency)) {
+  padding-right: 0 !important;
+}
+[dir="rtl"] .tw-money-input .input-group-addon:not(.amount-currency-select-btn):not(.tw-money-input__fixed-currency):not(:has(~ .tw-money-input__fixed-currency)) {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  padding-right: initial !important;
+}
 .tw-money-input .amount-currency-select-btn {
   flex-shrink: 0;
   width: auto;

package/src/moneyInput/MoneyInput.less

@@ -32,11 +32,16 @@
 
   .input-group-addon {
     flex-shrink: 0;
+    
     &:not(.amount-currency-select-btn) {
       display: flex;
       align-items: center;
       flex-shrink: 0;
       width: auto;
+
+      &:not(.tw-money-input__fixed-currency):not(:has(~ .tw-money-input__fixed-currency)) {
+        .padding(right, 0) !important;
+      }
     }
   }
   

package/src/prompt/InlinePrompt/InlinePrompt.css

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

package/src/prompt/InlinePrompt/InlinePrompt.less

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

package/src/prompt/InlinePrompt/InlinePrompt.spec.tsx

@@ -15,12 +15,6 @@ describe('InlinePrompt', () => {
     expect(screen.getByText('Hello world')).toBeInTheDocument();
   });
 
-  it('renders with GiftBox icon as default for `proposition` sentiment', () => {
-    render(<InlinePrompt {...defaultProps} sentiment="proposition" />);
-    expect(screen.getByText('Prompt message')).toBeInTheDocument();
-    expect(screen.getByTestId('gift-box-icon')).toBeInTheDocument();
-  });
-
   describe('renders with each sentiment', () => {
     it.each([Sentiment.POSITIVE, Sentiment.NEUTRAL, Sentiment.NEGATIVE, Sentiment.WARNING])(
       'renders with sentiment %s',

package/src/prompt/InlinePrompt/InlinePrompt.tsx

@@ -1,14 +1,12 @@
 import { Sentiment } from '../../common';
-import { BackslashCircle, GiftBox } from '@transferwise/icons';
+import { BackslashCircle } from '@transferwise/icons';
 import ProcessIndicator from '../../processIndicator';
 import StatusIcon from '../../statusIcon';
 import { clsx } from 'clsx';
 import Body from '../../body';
 
 export type InlinePromptProps = {
-  sentiment?:
-    | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`
-    | 'proposition';
+  sentiment?: `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`;
   loading?: boolean;
   /**
    * 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)
@@ -18,7 +16,6 @@ export type InlinePromptProps = {
   className?: string;
   'data-testid'?: string;
   children: React.ReactNode;
-  media?: React.ReactNode;
 };
 
 export const InlinePrompt = ({
@@ -27,16 +24,9 @@ export const InlinePrompt = ({
   loading = false,
   className,
   children,
-  media = null,
   ...rest
 }: InlinePromptProps) => {
   const renderMedia = () => {
-    if (media && ['proposition', 'positive'].includes(sentiment)) {
-      return media;
-    }
-    if (sentiment === 'proposition') {
-      return <GiftBox />;
-    }
     if (muted) {
       return <BackslashCircle size={16} data-testid="InlinePrompt_Muted" />;
     }

package/src/ssr.spec.tsx

@@ -92,7 +92,6 @@ describe('Server side rendering', () => {
   // stick all possible properties we might need to render all components in here
   const allProps: Record<string, unknown> = {
     currencies: [],
-    currencySelector: { options: [] },
     steps: [],
     stepper: {
       steps: [],

package/build/expressiveMoneyInput/ExpressiveMoneyInput.js

@@ -1,114 +0,0 @@
-'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/CurrencySelector.js');
-var AmountInput = require('./amountInput/AmountInput.js');
-var Chevron = require('./chevron/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

@@ -1 +0,0 @@
-{"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 {\n  type Props as CurrencySelectorProps,\n  CurrencySelector,\n} from './currencySelector/CurrencySelector';\nimport { CommonProps } from '../common';\nimport { AmountInput } from './amountInput/AmountInput';\nimport { Chevron } from './chevron/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\n                  id={customAlertId}\n                  media={inlinePrompt.media}\n                  sentiment={inlinePrompt.sentiment}\n                >\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":"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"}

package/build/expressiveMoneyInput/ExpressiveMoneyInput.messages.js

@@ -1,17 +0,0 @@
-'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

@@ -1 +0,0 @@
-{"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

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

@@ -1 +0,0 @@
-{"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

@@ -1,110 +0,0 @@
-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/CurrencySelector.mjs';
-import { AmountInput } from './amountInput/AmountInput.mjs';
-import { Chevron } from './chevron/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

@@ -1 +0,0 @@
-{"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 {\n  type Props as CurrencySelectorProps,\n  CurrencySelector,\n} from './currencySelector/CurrencySelector';\nimport { CommonProps } from '../common';\nimport { AmountInput } from './amountInput/AmountInput';\nimport { Chevron } from './chevron/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\n                  id={customAlertId}\n                  media={inlinePrompt.media}\n                  sentiment={inlinePrompt.sentiment}\n                >\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":"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"}