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

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

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/expressiveMoneyInput/amountInput/utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,eAAO,MAAM,mBAAmB,GAAI,UAAU,MAAM,EAAE,QAAQ,MAAM,KAAG,MAAM,GAAG,IAE/E,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,UAAU,MAAM,EAAE,QAAQ,MAAM,KAAG,MAAM,GAAG,IAE7E,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,UAAU,MAAM,EAAE,QAAQ,MAAM,KAAG,MAOlE,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,OAAO,MAAM,EAAE,kBAAkB,MAAM,WAE9E,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,8CAIlC;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;CAChB,KAAG,MAAM,GAAG,IAmBZ,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,oEAKhC;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,KAAG,MAiBH,CAAC;AAEF,eAAO,MAAM,0BAA0B,GAAI,iBAGxC;IACD,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACvC,KAAK,EAAE,MAAM,CAAC;CACf,wBASA,CAAC;AAaF,eAAO,MAAM,iBAAiB,GAAI,GAAG,aAAa,CAAC,gBAAgB,CAAC,YAKnE,CAAC"}

package/build/types/expressiveMoneyInput/animatedNumber/AnimatedNumber.d.ts

@@ -1,9 +0,0 @@
-import type { ReactNode } from 'react';
-interface Props {
-    children: ReactNode;
-    onClick?: () => void;
-    className?: string;
-}
-export declare const AnimatedNumber: ({ children, onClick, className }: Props) => import("react").JSX.Element;
-export {};
-//# sourceMappingURL=AnimatedNumber.d.ts.map

package/build/types/expressiveMoneyInput/animatedNumber/AnimatedNumber.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AnimatedNumber.d.ts","sourceRoot":"","sources":["../../../../src/expressiveMoneyInput/animatedNumber/AnimatedNumber.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,UAAU,KAAK;IACb,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,cAAc,GAAI,kCAAkC,KAAK,gCA8BrE,CAAC"}

package/build/types/expressiveMoneyInput/chevron/Chevron.d.ts

@@ -1,6 +0,0 @@
-interface Props {
-    shouldShow: boolean;
-}
-export declare const Chevron: ({ shouldShow }: Props) => import("react").JSX.Element;
-export {};
-//# sourceMappingURL=Chevron.d.ts.map

package/build/types/expressiveMoneyInput/chevron/Chevron.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Chevron.d.ts","sourceRoot":"","sources":["../../../../src/expressiveMoneyInput/chevron/Chevron.tsx"],"names":[],"mappings":"AAIA,UAAU,KAAK;IACb,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,OAAO,GAAI,gBAAuB,KAAK,gCA0BnD,CAAC"}

package/build/types/expressiveMoneyInput/currencySelector/CurrencySelector.d.ts

@@ -1,30 +0,0 @@
-import type { AvatarLayoutProps } from '../../avatarLayout';
-import { CurrencyType, Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
-import { type ButtonHTMLAttributes } from 'react';
-export interface CurrencyOption {
-    label?: string;
-    code: string;
-    keywords: string[] | undefined;
-}
-export interface CurrencySection {
-    title: string;
-    currencies: CurrencyOption[];
-}
-export type CurrencyOptions = CurrencySection[];
-export type Props = {
-    id: string;
-    labelId: string;
-    options?: CurrencyOptions;
-    onChange?: (currency: CurrencyType) => void;
-    onOpen?: () => void;
-    addons?: AvatarLayoutProps['avatars'];
-    onSearchChange?: (payload: {
-        query: string;
-        resultCount: number;
-    }) => void;
-} & Pick<ExpressiveMoneyInputProps, 'currency'>;
-export declare const CurrencySelector: ({ id, currency, options, labelId, onChange, addons, onOpen, onSearchChange, }: Props) => import("react").JSX.Element;
-export declare const ButtonInput: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
-    children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLButtonElement | null>>;
-//# sourceMappingURL=CurrencySelector.d.ts.map

package/build/types/expressiveMoneyInput/currencySelector/CurrencySelector.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CurrencySelector.d.ts","sourceRoot":"","sources":["../../../../src/expressiveMoneyInput/currencySelector/CurrencySelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAO5D,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAG3F,OAAO,EACL,KAAK,oBAAoB,EAK1B,MAAM,OAAO,CAAC;AAKf,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;CAChC;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,cAAc,EAAE,CAAC;CAC9B;AAED,MAAM,MAAM,eAAe,GAAG,eAAe,EAAE,CAAC;AAEhD,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC5E,GAAG,IAAI,CAAC,yBAAyB,EAAE,UAAU,CAAC,CAAC;AAEhD,eAAO,MAAM,gBAAgB,GAAI,+EAS9B,KAAK,gCA2FP,CAAC;AAEF,eAAO,MAAM,WAAW;;4DAgBtB,CAAC"}

package/build/types/expressiveMoneyInput/hooks/useFocus.d.ts

@@ -1,7 +0,0 @@
-export declare const useFocus: () => {
-    focus: boolean;
-    setFocus: (value: boolean) => void;
-    visualFocus: boolean;
-    setVisualFocus: (value: boolean) => void;
-};
-//# sourceMappingURL=useFocus.d.ts.map

package/build/types/expressiveMoneyInput/hooks/useFocus.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useFocus.d.ts","sourceRoot":"","sources":["../../../../src/expressiveMoneyInput/hooks/useFocus.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,QAAQ;;sBAgBC,OAAO;;4BAUD,OAAO;CAIlC,CAAC"}

package/build/types/expressiveMoneyInput/hooks/useInputStyle.d.ts

@@ -1,10 +0,0 @@
-import { type CSSProperties } from 'react';
-import { Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
-type InputStyleObject = {
-    value: string;
-    focus: boolean;
-    inputElement: HTMLInputElement | null;
-} & Pick<ExpressiveMoneyInputProps, 'loading'>;
-export declare const useInputStyle: ({ value, focus, inputElement, loading }: InputStyleObject) => CSSProperties;
-export {};
-//# sourceMappingURL=useInputStyle.d.ts.map

package/build/types/expressiveMoneyInput/hooks/useInputStyle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useInputStyle.d.ts","sourceRoot":"","sources":["../../../../src/expressiveMoneyInput/hooks/useInputStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAwC,MAAM,OAAO,CAAC;AACjF,OAAO,EAAE,KAAK,IAAI,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAE7E,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,YAAY,EAAE,gBAAgB,GAAG,IAAI,CAAC;CACvC,GAAG,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC,CAAC;AAE/C,eAAO,MAAM,aAAa,GAAI,yCAAyC,gBAAgB,kBAyBtF,CAAC"}

package/build/types/expressiveMoneyInput/hooks/useSelectionRange.d.ts

@@ -1,10 +0,0 @@
-import { type SyntheticEvent } from 'react';
-export declare const useSelectionRange: () => {
-    selection: {
-        selectionStart: number | null;
-        selectionEnd: number | null;
-    } | undefined;
-    handleSelect: (e: SyntheticEvent<HTMLInputElement>) => void;
-    handleSelectionBlur: () => void;
-};
-//# sourceMappingURL=useSelectionRange.d.ts.map

package/build/types/expressiveMoneyInput/hooks/useSelectionRange.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useSelectionRange.d.ts","sourceRoot":"","sources":["../../../../src/expressiveMoneyInput/hooks/useSelectionRange.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAU,MAAM,OAAO,CAAC;AAEpD,eAAO,MAAM,iBAAiB;;wBAEV,MAAM,GAAG,IAAI;sBACf,MAAM,GAAG,IAAI;;sBAGJ,cAAc,CAAC,gBAAgB,CAAC;;CAc1D,CAAC"}

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

@@ -1,3 +0,0 @@
-export type { Props as ExpressiveMoneyInputProps } from './ExpressiveMoneyInput';
-export { default } from './ExpressiveMoneyInput';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/expressiveMoneyInput/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,KAAK,IAAI,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AACjF,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC"}

package/src/expressiveMoneyInput/ExpressiveMoneyInput.css

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

package/src/expressiveMoneyInput/ExpressiveMoneyInput.less

@@ -1,13 +0,0 @@
-@import "./amountInput/AmountInput.less";
-@import "./currencySelector/CurrencySelector.less";
-@import "./chevron/Chevron.less";
-
-.wds-expressive-money-input {
-  &-currency-selector {
-    flex-shrink: 0;
-    margin-right: var(--size-24);
-  }
-  &-chevron {
-    transform: translateY(-5%);
-  }
-}

package/src/expressiveMoneyInput/ExpressiveMoneyInput.messages.ts

@@ -1,13 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-export default defineMessages({
-  currencySelectorSearchPlaceholder: {
-    id: 'neptune.ExpressiveMoneyInput.currency.search.placeholder',
-    defaultMessage: 'Type a currency / country',
-  },
-
-  currencySelectorSelectCurrency: {
-    id: 'neptune.ExpressiveMoneyInput.currency.select.currency',
-    defaultMessage: 'Select currency',
-  },
-});

package/src/expressiveMoneyInput/ExpressiveMoneyInput.story.tsx

@@ -1,290 +0,0 @@
-/* eslint-disable jsx-a11y/anchor-is-valid, no-console, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
-import { Meta } from '@storybook/react-webpack5';
-import ExpressiveMoneyInput, { Props as ExpressiveMoneyInputProps } from './ExpressiveMoneyInput';
-import { lorem10, lorem5 } from '../test-utils';
-import { Sentiment } from '../common';
-import Image from '../image';
-import Link from '../link';
-import Money from '../money';
-import React from 'react';
-import Button from '../button';
-import Modal from '../modal';
-import ListItem from '../listItem';
-import List from '../list';
-import { Flag } from '@wise/art';
-import Alert from '../alert';
-import Divider from '../divider';
-import { Rewards, Tags } from '@transferwise/icons';
-
-export default {
-  title: 'Forms/ExpressiveMoneyInput',
-  component: ExpressiveMoneyInput,
-} as Meta;
-
-const props: ExpressiveMoneyInputProps = {
-  label: 'You send',
-  currency: 'GBP',
-  amount: 1234.56,
-  onAmountChange: (amount) => {
-    console.log('Amount changed', amount);
-  },
-  currencySelector: {
-    addons: [
-      { asset: <Image src="../avatar-square-dude.webp" alt="" /> },
-      { profileName: 'Test Test' },
-    ],
-    options: [
-      {
-        title: 'Popular',
-        currencies: [
-          { code: 'USD', label: 'US Dollar', keywords: ['dollar', 'us'] },
-          { code: 'AUD', label: 'Australia Dollar', keywords: ['dollar', 'us'] },
-        ],
-      },
-      {
-        title: 'Others',
-        currencies: [
-          { code: 'GBP', label: 'Pound', keywords: ['british'] },
-          { code: 'EUR', label: 'Euro', keywords: ['euro'] },
-        ],
-      },
-    ],
-    onOpen: () => {
-      console.log('Currency selector opened');
-    },
-    onSearchChange: (payload) => {
-      console.log('Search changed', payload);
-    },
-    onChange: (currency) => {
-      console.log('Currency changed', currency);
-    },
-  },
-  loading: false,
-  inlinePrompt: { message: lorem10, sentiment: Sentiment.POSITIVE },
-  showChevron: true,
-  autoFocus: true,
-};
-
-export const NullAmount = {
-  args: props,
-  render: (args: ExpressiveMoneyInputProps) => (
-    <ExpressiveMoneyInput
-      label={args.label}
-      amount={null}
-      currency="EUR"
-      onAmountChange={args.onAmountChange}
-    />
-  ),
-};
-
-export const WithInitAmount = {
-  args: props,
-  render: (args: ExpressiveMoneyInputProps) => {
-    const availableBalance = 1500;
-    return (
-      <ExpressiveMoneyInput
-        label={args.label}
-        amount={availableBalance}
-        currency="EUR"
-        onAmountChange={args.onAmountChange}
-      />
-    );
-  },
-};
-
-export const WithLoading = {
-  args: props,
-  render: (args: ExpressiveMoneyInputProps) => {
-    const availableBalance = 1500;
-    return (
-      <ExpressiveMoneyInput
-        label={args.label}
-        amount={availableBalance}
-        currency="EUR"
-        loading
-        onAmountChange={args.onAmountChange}
-      />
-    );
-  },
-};
-
-export const WithoutChevron = {
-  args: props,
-  render: (args: ExpressiveMoneyInputProps) => {
-    const availableBalance = 1500;
-    return (
-      <ExpressiveMoneyInput
-        label={args.label}
-        amount={availableBalance}
-        currency="EUR"
-        showChevron={false}
-        onAmountChange={args.onAmountChange}
-      />
-    );
-  },
-};
-
-export const WithCurrencySelector = {
-  args: props,
-  render: (args: ExpressiveMoneyInputProps) => {
-    const availableBalance = 1500;
-    return (
-      <ExpressiveMoneyInput
-        label={args.label}
-        amount={availableBalance}
-        currency="EUR"
-        currencySelector={args.currencySelector}
-        onAmountChange={args.onAmountChange}
-      />
-    );
-  },
-};
-
-export const WithInlinePromptNoSentiment = {
-  args: props,
-  render: (args: ExpressiveMoneyInputProps) => {
-    const availableBalance = 1500;
-    const [sourceAmount, setSourceAmount] = React.useState(args.amount);
-    return (
-      <ExpressiveMoneyInput
-        label={args.label}
-        amount={sourceAmount}
-        currency="EUR"
-        currencySelector={args.currencySelector}
-        inlinePrompt={{
-          message: (
-            <>
-              {`Available balance `}
-              <Link
-                onClick={() => {
-                  setSourceAmount(availableBalance);
-                }}
-              >
-                <Money amount={availableBalance} currency={args.currency} />
-              </Link>
-            </>
-          ),
-        }}
-        onAmountChange={args.onAmountChange}
-      />
-    );
-  },
-};
-
-export const WithInlinePromptSentiment = {
-  args: props,
-  render: (args: ExpressiveMoneyInputProps) => {
-    return (
-      <>
-        <ExpressiveMoneyInput
-          label={args.label}
-          currency="EUR"
-          currencySelector={args.currencySelector}
-          inlinePrompt={{ message: lorem5, sentiment: 'negative' }}
-          onAmountChange={args.onAmountChange}
-        />
-        <ExpressiveMoneyInput
-          label={args.label}
-          currency="EUR"
-          currencySelector={args.currencySelector}
-          inlinePrompt={{ message: lorem5, sentiment: 'warning' }}
-          onAmountChange={args.onAmountChange}
-        />
-        <ExpressiveMoneyInput
-          label={args.label}
-          currency="EUR"
-          currencySelector={args.currencySelector}
-          inlinePrompt={{ message: lorem5, sentiment: 'neutral' }}
-          onAmountChange={args.onAmountChange}
-        />
-        <ExpressiveMoneyInput
-          label={args.label}
-          currency="EUR"
-          currencySelector={args.currencySelector}
-          inlinePrompt={{ message: lorem5, sentiment: 'positive' }}
-          onAmountChange={args.onAmountChange}
-        />
-        <ExpressiveMoneyInput
-          label={args.label}
-          currency="EUR"
-          currencySelector={args.currencySelector}
-          inlinePrompt={{ message: lorem5, sentiment: 'positive', media: <Tags /> }}
-          onAmountChange={args.onAmountChange}
-        />
-        <ExpressiveMoneyInput
-          label={args.label}
-          currency="EUR"
-          currencySelector={args.currencySelector}
-          inlinePrompt={{ message: lorem5, sentiment: 'proposition' }}
-          onAmountChange={args.onAmountChange}
-        />
-        <ExpressiveMoneyInput
-          label={args.label}
-          currency="EUR"
-          currencySelector={args.currencySelector}
-          inlinePrompt={{ message: lorem5, sentiment: 'proposition', media: <Rewards /> }}
-          onAmountChange={args.onAmountChange}
-        />
-      </>
-    );
-  },
-};
-
-export const Autofocus = {
-  args: props,
-  render: (args: ExpressiveMoneyInputProps) => (
-    <ExpressiveMoneyInput {...args} currency="MXN" inlinePrompt={undefined} />
-  ),
-};
-
-export const WithCustomRender = {
-  args: props,
-  render: (args: ExpressiveMoneyInputProps) => {
-    const [open, setOpen] = React.useState(false);
-    return (
-      <>
-        <ExpressiveMoneyInput
-          label="Instance with Custom Currency Selector"
-          currency="AUD"
-          currencySelector={{
-            customRender: ({ id, labelId }) => (
-              <Button v2 size="sm" priority="primary" onClick={() => setOpen(true)}>
-                Custom Render
-              </Button>
-            ),
-          }}
-          onAmountChange={(amount) => console.log(amount)}
-        />
-        <Modal
-          open={open}
-          title="Custom UX for currency selectors"
-          body={
-            <List>
-              <ListItem
-                media={
-                  <ListItem.AvatarView>
-                    <Flag code="gb" />
-                  </ListItem.AvatarView>
-                }
-                title="GBP"
-                control={<ListItem.Radio name="currency-key" checked={false} />}
-              />
-              <ListItem
-                media={
-                  <ListItem.AvatarView>
-                    <Flag code="au" />
-                  </ListItem.AvatarView>
-                }
-                title="AUD"
-                control={<ListItem.Radio name="currency-key" checked />}
-              />
-            </List>
-          }
-          onClose={() => setOpen(false)}
-        />
-        <Divider className="m-y-2" />
-        <Alert type="info" message="TODO: add proper message here" />
-      </>
-    );
-  },
-};

package/src/expressiveMoneyInput/ExpressiveMoneyInput.tsx

@@ -1,125 +0,0 @@
-import Body from '../body';
-import { Label } from '../label/Label';
-import { clsx } from 'clsx';
-import { AnimatePresence, motion } from 'framer-motion';
-import { useId, type ReactNode } from 'react';
-
-import {
-  type Props as CurrencySelectorProps,
-  CurrencySelector,
-} from './currencySelector/CurrencySelector';
-import { CommonProps } from '../common';
-import { AmountInput } from './amountInput/AmountInput';
-import { Chevron } from './chevron/Chevron';
-import { InlinePrompt, type InlinePromptProps } from '../prompt/InlinePrompt';
-
-type AmountType = number | null;
-export type CurrencyType = string;
-
-type DefaultCurrencySelectorInstanceType = Pick<
-  CurrencySelectorProps,
-  'addons' | 'options' | 'onChange' | 'onOpen' | 'onSearchChange'
->;
-type CustomCurrencySelectorInstanceType = {
-  customRender?: (props: { id: string; labelId: string }) => ReactNode;
-};
-type CurrencySelectorType = DefaultCurrencySelectorInstanceType &
-  CustomCurrencySelectorInstanceType;
-
-export type Props = {
-  label?: ReactNode;
-  currencySelector?: CurrencySelectorType;
-  amount?: AmountType;
-  currency: CurrencyType;
-  inlinePrompt?: {
-    sentiment?: InlinePromptProps['sentiment'];
-    message: InlinePromptProps['children'];
-    media?: InlinePromptProps['media'];
-  };
-  showChevron?: boolean;
-  autoFocus?: boolean;
-  loading?: boolean;
-  onAmountChange: (amount: AmountType) => void;
-  onFocusChange?: (focused: boolean) => void;
-} & CommonProps;
-
-export default function ExpressiveMoneyInput({
-  label,
-  currency,
-  currencySelector = { options: [] } as DefaultCurrencySelectorInstanceType,
-  amount,
-  onAmountChange,
-  className,
-  inlinePrompt,
-  showChevron,
-  autoFocus,
-  loading,
-  onFocusChange,
-}: Props) {
-  const inputId = useId();
-  const labelId = useId();
-  const customAlertId = useId();
-  const currencyId = useId();
-
-  const selector = currencySelector.customRender?.({ id: currencyId, labelId }) ?? (
-    <CurrencySelector id={currencyId} labelId={labelId} currency={currency} {...currencySelector} />
-  );
-
-  return (
-    <div className={clsx('wds-expressive-money-input', className)}>
-      <Label id={labelId} htmlFor={inputId} className={clsx('m-b-1', 'font-weight-normal')}>
-        {label}
-      </Label>
-      <div
-        className={clsx('d-flex')}
-        role="group"
-        aria-labelledby={labelId}
-        {...(inlinePrompt ? { 'aria-describedby': customAlertId } : {})}
-      >
-        <div className="wds-expressive-money-input-currency-selector">{selector}</div>
-        <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}
-        />
-        <div className={clsx('d-flex align-items-center', 'wds-expressive-money-input-chevron')}>
-          <Chevron shouldShow={Boolean(showChevron)} />
-        </div>
-      </div>
-      <AnimatePresence initial={false}>
-        {inlinePrompt && (
-          <div className={clsx('d-flex justify-content-end', inlinePrompt && 'm-t-1')}>
-            <motion.div
-              key={customAlertId}
-              initial={{ opacity: 0, height: 0 }}
-              animate={{
-                opacity: 1,
-                height: 'auto',
-                transition: { delay: 0.75, duration: 0.3 },
-              }}
-              exit={{ opacity: 0, height: 0 }}
-            >
-              {inlinePrompt.sentiment ? (
-                <InlinePrompt
-                  id={customAlertId}
-                  media={inlinePrompt.media}
-                  sentiment={inlinePrompt.sentiment}
-                >
-                  {inlinePrompt.message}
-                </InlinePrompt>
-              ) : (
-                <Body>{inlinePrompt.message}</Body>
-              )}
-            </motion.div>
-          </div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-}

package/src/expressiveMoneyInput/amountInput/AmountInput.css

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