@transferwise/components 0.0.0-experimental-9442a3d → 0.0.0-experimental-fe42ce4

package/build/types/moneyInputField/AmountInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AmountInput.d.ts","sourceRoot":"","sources":["../../../src/moneyInputField/AmountInput.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,IAAI,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAelE,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,oBAAoB,EAAE,SAAS,CAAC,CAAC;AAE1C,eAAO,MAAM,WAAW,GAAI,uFASzB,KAAK,gCA6SP,CAAC"}

package/build/types/moneyInputField/AnimatedNumber.d.ts

@@ -0,0 +1,9 @@
+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/moneyInputField/AnimatedNumber.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedNumber.d.ts","sourceRoot":"","sources":["../../../src/moneyInputField/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/moneyInputField/Chevron.d.ts

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

package/build/types/moneyInputField/Chevron.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chevron.d.ts","sourceRoot":"","sources":["../../../src/moneyInputField/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/moneyInputField/CurrencySelector.d.ts

@@ -0,0 +1,30 @@
+import { AvatarLayoutProps } from '..';
+import { CurrencyType, Props as MoneyInputFieldProps } from './MoneyInputField';
+import { type ButtonHTMLAttributes, type ReactNode } 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<MoneyInputFieldProps, '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?: ReactNode | undefined;
+} & import("react").RefAttributes<HTMLButtonElement | null>>;
+//# sourceMappingURL=CurrencySelector.d.ts.map

package/build/types/moneyInputField/CurrencySelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CurrencySelector.d.ts","sourceRoot":"","sources":["../../../src/moneyInputField/CurrencySelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAKlB,MAAM,IAAI,CAAC;AACZ,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAGhF,OAAO,EACL,KAAK,oBAAoB,EAGzB,KAAK,SAAS,EAGf,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,oBAAoB,EAAE,UAAU,CAAC,CAAC;AAE3C,eAAO,MAAM,gBAAgB,GAAI,+EAS9B,KAAK,gCA2FP,CAAC;AAEF,eAAO,MAAM,WAAW;;4DAgBtB,CAAC"}

package/build/types/moneyInputField/MoneyInputField.d.ts

@@ -0,0 +1,22 @@
+import { type Props as CurrencySelectorProps } from './CurrencySelector';
+import { CommonProps } from '../common';
+import { type InlinePromptProps } from '../prompt/InlinePrompt';
+type AmountType = number | null;
+export type CurrencyType = string;
+export type Props = {
+    currencySelector?: Pick<CurrencySelectorProps, 'addons' | 'options' | 'onChange' | 'onOpen' | 'onSearchChange'>;
+    amount?: AmountType;
+    currency: CurrencyType;
+    inlinePrompt?: {
+        sentiment?: InlinePromptProps['sentiment'];
+        message: InlinePromptProps['children'];
+    };
+    showChevron?: boolean;
+    autoFocus?: boolean;
+    loading?: boolean;
+    onAmountChange: (amount: AmountType) => void;
+    onFocusChange?: (focused: boolean) => void;
+} & CommonProps;
+export default function MoneyInputField({ currency, currencySelector, amount, onAmountChange, className, inlinePrompt, showChevron, autoFocus, loading, onFocusChange, }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=MoneyInputField.d.ts.map

package/build/types/moneyInputField/MoneyInputField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MoneyInputField.d.ts","sourceRoot":"","sources":["../../../src/moneyInputField/MoneyInputField.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,KAAK,IAAI,qBAAqB,EAAoB,MAAM,oBAAoB,CAAC;AAC3F,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAIxC,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE9E,KAAK,UAAU,GAAG,MAAM,GAAG,IAAI,CAAC;AAChC,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC;AAElC,MAAM,MAAM,KAAK,GAAG;IAClB,gBAAgB,CAAC,EAAE,IAAI,CACrB,qBAAqB,EACrB,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,QAAQ,GAAG,gBAAgB,CAChE,CAAC;IACF,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,QAAQ,EAAE,YAAY,CAAC;IACvB,YAAY,CAAC,EAAE;QACb,SAAS,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;QAC3C,OAAO,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;KACxC,CAAC;IACF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7C,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C,GAAG,WAAW,CAAC;AAEhB,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,QAAQ,EACR,gBAAqB,EACrB,MAAM,EACN,cAAc,EACd,SAAS,EACT,YAAY,EACZ,WAAW,EACX,SAAS,EACT,OAAO,EACP,aAAa,GACd,EAAE,KAAK,+BAyEP"}

package/build/types/moneyInputField/MoneyInputField.messages.d.ts

@@ -0,0 +1,12 @@
+declare const _default: {
+    currencySelectorSearchPlaceholder: {
+        id: string;
+        defaultMessage: string;
+    };
+    currencySelectorSelectCurrency: {
+        id: string;
+        defaultMessage: string;
+    };
+};
+export default _default;
+//# sourceMappingURL=MoneyInputField.messages.d.ts.map

package/build/types/moneyInputField/MoneyInputField.messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MoneyInputField.messages.d.ts","sourceRoot":"","sources":["../../../src/moneyInputField/MoneyInputField.messages.ts"],"names":[],"mappings":";;;;;;;;;;AAEA,wBAUG"}

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

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

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

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

package/build/types/moneyInputField/useFocus.d.ts

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

package/build/types/moneyInputField/useFocus.d.ts.map

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

package/build/types/moneyInputField/useInputStyle.d.ts

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

package/build/types/moneyInputField/useInputStyle.d.ts.map

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

package/build/types/moneyInputField/useSelectionRange.d.ts

@@ -0,0 +1,10 @@
+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/moneyInputField/useSelectionRange.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectionRange.d.ts","sourceRoot":"","sources":["../../../src/moneyInputField/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/moneyInputField/utils.d.ts

@@ -0,0 +1,22 @@
+import type { KeyboardEvent } from 'react';
+export declare const getDecimalSeparator: (currency: string, locale: string) => string | null;
+export declare const getGroupSeparator: (currency: string, locale: string) => string | null;
+export declare const getDecimalCount: (currency: string, locale: string) => number;
+export declare const getEnteredDecimalsCount: (value: string, decimalSeparator: string) => number;
+export declare const getUnformattedNumber: ({ value: formattedValue, currency, locale, }: {
+    value: string;
+    currency: string;
+    locale: string;
+}) => number | null;
+export declare const getFormattedString: ({ value: unformattedValue, currency, locale, alwaysShowDecimals, }: {
+    value: number;
+    currency: string;
+    locale: string;
+    alwaysShowDecimals?: boolean;
+}) => string;
+export declare const isInputPossiblyOverflowing: ({ ref, value, }: {
+    ref: React.RefObject<HTMLInputElement>;
+    value: string;
+}) => boolean | undefined;
+export declare const isAllowedInputKey: (e: KeyboardEvent<HTMLInputElement>) => boolean;
+//# sourceMappingURL=utils.d.ts.map

package/build/types/moneyInputField/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/moneyInputField/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/test-utils/index.d.ts

@@ -33,6 +33,8 @@ declare function customRender(ui: ReactElement, { locale, messages, ...renderOpt
         "neptune.MoneyInput.Select.placeholder": string;
         "neptune.MoneyInput.Select.searchPlaceholder": string;
         "neptune.MoneyInput.Select.selectCurrencyLabel": string;
+        "neptune.MoneyInputField.currency.search.placeholder": string;
+        "neptune.MoneyInputField.currency.select.currency": string;
         "neptune.PhoneNumberInput.SelectInput.placeholder": string;
         "neptune.PhoneNumberInput.countryCodeLabel": string;
         "neptune.PhoneNumberInput.phoneNumberLabel": string;
@@ -116,6 +118,8 @@ declare function customRenderHook(callback: () => unknown, { locale, messages }?
         "neptune.MoneyInput.Select.placeholder": string;
         "neptune.MoneyInput.Select.searchPlaceholder": string;
         "neptune.MoneyInput.Select.selectCurrencyLabel": string;
+        "neptune.MoneyInputField.currency.search.placeholder": string;
+        "neptune.MoneyInputField.currency.select.currency": string;
         "neptune.PhoneNumberInput.SelectInput.placeholder": string;
         "neptune.PhoneNumberInput.countryCodeLabel": string;
         "neptune.PhoneNumberInput.phoneNumberLabel": string;

package/build/types/test-utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/test-utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAM,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,EAAc,MAAM,wBAAwB,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAMxD;;;;GAIG;AACH,iBAAS,YAAY,CACnB,EAAE,EAAE,YAAY,EAChB,EAAE,MAAuB,EAAE,QAAa,EAAE,GAAG,aAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,GAChE,UAAU,CAAC,OAAO,MAAM,CAAC,CAK3B;AAED;;;GAGG;AACH,iBAAS,gBAAgB,CACvB,QAAQ,EAAE,MAAM,OAAO,EACvB,EAAE,MAAuB,EAAE,QAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,uEAKhD;AAED,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,YAAY,IAAI,MAAM,EAAE,gBAAgB,IAAI,UAAU,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/test-utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAM,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,EAAc,MAAM,wBAAwB,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAMxD;;;;GAIG;AACH,iBAAS,YAAY,CACnB,EAAE,EAAE,YAAY,EAChB,EAAE,MAAuB,EAAE,QAAa,EAAE,GAAG,aAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,GAChE,UAAU,CAAC,OAAO,MAAM,CAAC,CAK3B;AAED;;;GAGG;AACH,iBAAS,gBAAgB,CACvB,QAAQ,EAAE,MAAM,OAAO,EACvB,EAAE,MAAuB,EAAE,QAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,uEAKhD;AAED,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,YAAY,IAAI,MAAM,EAAE,gBAAgB,IAAI,UAAU,EAAE,SAAS,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-9442a3d",
+  "version": "0.0.0-experimental-fe42ce4",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -101,6 +101,7 @@
     "@babel/runtime": "^7.28.3",
     "@floating-ui/react": "^0.27.16",
     "@headlessui/react": "^1.7.19",
+    "framer-motion": "^12.15.0",
     "@popperjs/core": "^2.11.8",
     "@react-aria/focus": "^3.21.0",
     "@react-aria/overlays": "^3.28.0",
@@ -115,7 +116,7 @@
     "merge-props": "^6.0.0",
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
-    "virtua": "^0.44.2"
+    "virtua": "^0.41.5"
   },
   "publishConfig": {
     "access": "public"

package/src/DisabledComponents.story.tsx

@@ -0,0 +1,156 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Cross } from '@transferwise/icons';
+import { useState } from 'react';
+
+import Button from './button';
+import { Input } from './inputs/Input';
+import { SelectInput, SelectInputOptionContent } from './inputs/SelectInput';
+import DateInput from './dateInput';
+import PhoneNumberInput from './phoneNumberInput';
+import { Field } from './field/Field';
+import Checkbox from './checkbox';
+import Body from './body';
+import Header from './header';
+
+export default {
+  title: 'Forms/Disabled Forms',
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta;
+
+type Story = StoryObj;
+
+export const Disabled: Story = {
+  render: () => <DisabledFormShowcaseComponent />,
+  tags: ['!autodocs'],
+};
+
+function DisabledFormShowcaseComponent() {
+  const [selectValue, setSelectValue] = useState<string | undefined>('United Kingdom');
+  const [dateValue, setDateValue] = useState<string | null>('11/09/1990');
+  const [checkboxValue, setCheckboxValue] = useState(false);
+
+  const countryOptions = [{ value: 'United Kingdom', label: 'United Kingdom' }];
+
+  return (
+    <div>
+      {/* Country of residence */}
+      <div style={{ marginBottom: '32px' }}>
+        <Field label="Country of residence">
+          <SelectInput
+            disabled
+            value={selectValue}
+            placeholder="Select country"
+            items={countryOptions.map((option) => ({
+              type: 'option' as const,
+              value: option.value,
+            }))}
+            renderValue={(value) => <SelectInputOptionContent title={value} />}
+            onChange={setSelectValue}
+          />
+        </Field>
+      </div>
+
+      {/* Personal details section */}
+      <Body style={{ marginBottom: '16px', fontWeight: '600', fontSize: '18px' }}>
+        Personal details
+      </Body>
+
+      {/* Full legal first and middle name(s) */}
+      <div style={{ marginBottom: '24px' }}>
+        <Field label="Full legal first and middle name(s)">
+          <Input disabled defaultValue="Mickey" placeholder="Enter your first and middle names" />
+        </Field>
+      </div>
+
+      {/* Full legal last name(s) */}
+      <div style={{ marginBottom: '24px' }}>
+        <Field label="Full legal last name(s)">
+          <Input disabled defaultValue="Mantle" placeholder="Enter your last name" />
+        </Field>
+      </div>
+
+      {/* Preferred name (optional) */}
+      <div style={{ marginBottom: '24px' }}>
+        <Field
+          label="Preferred name (optional)"
+          description="This is how we'll address you in emails and notifications"
+        >
+          <Input disabled placeholder="Enter your preferred name" />
+        </Field>
+      </div>
+
+      {/* Date of birth */}
+      <div style={{ marginBottom: '24px' }}>
+        <Field label="Date of birth">
+          <DateInput
+            disabled
+            value={dateValue || undefined}
+            placeholders={{
+              day: '11',
+              // month: 'September',
+              // year: '1990',
+            }}
+            onChange={setDateValue}
+          />
+        </Field>
+      </div>
+
+      {/* Dynamic flow input */}
+      <div className="np-field-control" style={{ marginBottom: '32px' }}>
+        <fieldset className="np-input-group">
+          <Input disabled value="Fercus" />
+        </fieldset>
+      </div>
+
+      {/* Phone number */}
+      <div style={{ marginBottom: '32px' }}>
+        <Field label="Phone number">
+          <PhoneNumberInput
+            disabled
+            initialValue="+4407891300098"
+            countryCode="GB"
+            onChange={() => {}}
+          />
+        </Field>
+      </div>
+
+      {/* Additional components */}
+      <div
+        style={{
+          borderTop: '1px solid #e5e7eb',
+          paddingTop: '32px',
+          marginTop: '32px',
+        }}
+      >
+        <Body style={{ marginBottom: '16px', fontWeight: '600', fontSize: '18px' }}>
+          Additional Components
+        </Body>
+
+        {/* Naked Inputs (without Field wrapper) */}
+        <div style={{ marginBottom: '24px' }}>
+          <Body style={{ marginBottom: '12px', fontWeight: '500', fontSize: '16px' }}>
+            Naked Inputs (without Field wrapper)
+          </Body>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+            <Input disabled placeholder="Disabled input with placeholder" />
+            <Input disabled defaultValue="Disabled input with default value" />
+            <Input disabled type="email" placeholder="email@example.com" />
+            <Input disabled type="password" placeholder="Password input" />
+          </div>
+        </div>
+
+        {/* Checkbox */}
+        <div style={{ marginBottom: '24px' }}>
+          <Checkbox
+            disabled
+            checked={checkboxValue}
+            label="I agree to the terms and conditions"
+            onChange={(checked) => setCheckboxValue(checked)}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/dateInput/DateInput.tsx

@@ -291,7 +291,7 @@ const DateInput = ({
       <div className="col-sm-3 tw-date--day">
         <label>
           <Body type={Typography.BODY_DEFAULT}>{dayLabel}</Body>
-          <div className={`input-group input-group-${size}`}>
+          <div className={`input-group input-group-${size} ${disabled ? 'disabled' : ''}`}>
             <Input
               ref={dayRef}
               id={`${id}:day`}
@@ -319,7 +319,7 @@ const DateInput = ({
       <div className="col-sm-4 tw-date--year">
         <label>
           <Body type={Typography.BODY_DEFAULT}>{yearLabel}</Body>
-          <div className={`input-group input-group-${size}`}>
+          <div className={`input-group input-group-${size} ${disabled ? 'disabled' : ''}`}>
             <Input
               ref={yearRef}
               id={`${id}:year`}

package/src/i18n/en.json

@@ -23,6 +23,8 @@
   "neptune.MoneyInput.Select.placeholder": "Select an option...",
   "neptune.MoneyInput.Select.searchPlaceholder": "Type a currency or country",
   "neptune.MoneyInput.Select.selectCurrencyLabel": "Select currency",
+  "neptune.MoneyInputField.currency.search.placeholder": "Type a currency / country",
+  "neptune.MoneyInputField.currency.select.currency": "Select currency",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Country code",
   "neptune.PhoneNumberInput.phoneNumberLabel": "Phone number",

package/src/index.ts

@@ -62,6 +62,7 @@ export type {
   CurrencyOptionItem,
   MoneyInputProps,
 } from './moneyInput';
+export type { MoneyInputFieldProps } from './moneyInputField';
 export type { NavigationOptionListProps } from './navigationOptionsList';
 export type { NavigationOptionProps } from './navigationOption/NavigationOption';
 export type { OverlayHeaderProps } from './overlayHeader';
@@ -188,6 +189,7 @@ export { default as Markdown } from './markdown';
 export { default as Modal } from './modal';
 export { default as Money } from './money';
 export { default as MoneyInput } from './moneyInput';
+export { default as MoneyInputField } from './moneyInputField';
 export { default as NavigationOption } from './navigationOption';
 export { default as NavigationOptionsList } from './navigationOptionsList';
 export { default as Nudge } from './nudge';

package/src/inputs/Input.css

@@ -18,6 +18,11 @@
   transition-duration: 300ms;
   /* TODO: Remove these overrides once `.form-control` isn’t used anymore */
 }
+.disabled .np-form-control,
+:disabled .np-form-control {
+  opacity: 1;
+  opacity: initial;
+}
 .np-form-control:focus-visible {
   outline: none;
 }

package/src/inputs/TextArea.css

@@ -18,6 +18,11 @@
   transition-duration: 300ms;
   /* TODO: Remove these overrides once `.form-control` isn’t used anymore */
 }
+.disabled .np-form-control,
+:disabled .np-form-control {
+  opacity: 1;
+  opacity: initial;
+}
 .np-form-control:focus-visible {
   outline: none;
 }

package/src/inputs/_common.less

@@ -15,6 +15,11 @@
   transition-timing-function: ease-in-out;
   transition-duration: 300ms;
 
+  .disabled &,
+  :disabled & {
+    opacity: unset;
+  }
+
   &:focus-visible {
     outline: none;
   }

package/src/main.css

@@ -2660,6 +2660,11 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   transition-duration: 300ms;
   /* TODO: Remove these overrides once `.form-control` isn’t used anymore */
 }
+.disabled .np-form-control,
+:disabled .np-form-control {
+  opacity: 1;
+  opacity: initial;
+}
 .np-form-control:focus-visible {
   outline: none;
 }
@@ -4436,6 +4441,67 @@ 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-money-input-field {
+  display: flex;
+}
+.wds-money-input-field-currency-selector {
+  flex-shrink: 0;
+  margin-right: 24px;
+  margin-right: var(--size-24);
+}
+.wds-money-input-field-chevron {
+  transform: translateY(-5%);
+}
 .np-navigation-option {
   -webkit-text-decoration: none;
   text-decoration: none;

package/src/main.less

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

package/src/moneyInputField/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/src/moneyInputField/AmountInput.less

@@ -0,0 +1,43 @@
+.wds-amount-input {
+  &-container {
+    width: 100%;
+  }
+
+  &-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) {
+    &-input-container {
+      transition: none;
+    }
+  }
+
+  &-input {
+    border: none;
+    outline: none;
+    flex-grow: 1;
+    text-align: right;
+    background-color: transparent;
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  &-placeholder {
+    flex-grow: 0;
+    display: flex;
+    align-items: center;
+  }
+}