@transferwise/components 46.133.0 → 46.134.0

package/build/styles/main.css

@@ -25824,7 +25824,7 @@ a[data-toggle="tooltip"] {
   --color-sentiment-interactive-control: #CB272F;
   --color-sentiment-interactive-control-hover: #B8232B;
   --color-sentiment-interactive-control-active: #A72027;
-  --color-sentiment-background-surface: #90000D;
+  --color-sentiment-background-surface: #CB272F;
   --color-sentiment-background-surface-hover: #B8232B;
   --color-sentiment-background-surface-active: #A72027;
 }
@@ -29430,7 +29430,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   margin-top: -2px;
 }
 
-@container (min-width: 309px) {
+@container (width > 308px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     height: var(--wds-list-item-control-wrapper-height);
     align-content: center;
@@ -29527,7 +29527,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   }
 }
 
-@container (min-width: 241px) and (max-width: 308px) {
+@container (240px < width <= 308px) {
   .wds-list-item-gridWrapper .wds-list-item-media-image {
     -o-object-position: bottom left;
        object-position: bottom left;
@@ -29659,7 +29659,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   }
 }
 
-@container (max-width: 240px) {
+@container (width <= 240px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     align-content: start;
   }
@@ -29987,7 +29987,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   justify-content: center;
 }
 
-@container (min-width: 309px) {
+@container (width > 308px) {
   .wds-list-item-titles,
   .wds-list-item-value {
     min-height: 100%;
@@ -32429,12 +32429,50 @@ html:not([dir="rtl"]) .np-navigation-option {
   }
 }
 
-.wds-sentiment-surface.status-circle {
-  background-color: var(--color-sentiment-interactive-primary);
+.status-circle.negative,
+.status-circle.error {
+  background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-negative));
 }
 
-.wds-sentiment-surface.status-circle .status-icon {
-  color: var(--color-sentiment-interactive-control);
+.status-circle.negative .status-icon,
+.status-circle.error .status-icon {
+  color: var(--color-sentiment-interactive-control, var(--color-sentiment-negative-secondary));
+}
+
+.status-circle.positive,
+.status-circle.success {
+  background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-positive));
+}
+
+.status-circle.positive .status-icon,
+.status-circle.success .status-icon {
+  color: var(--color-sentiment-interactive-control, var(--color-sentiment-positive-secondary));
+}
+
+.status-circle.warning,
+.status-circle.pending {
+  background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-warning));
+}
+
+.status-circle.warning .status-icon,
+.status-circle.pending .status-icon {
+  color: var(--color-sentiment-interactive-control, var(--color-dark));
+}
+
+.status-circle.neutral,
+.status-circle.info {
+  background-color: #5d7079;
+  background-color: var(--color-sentiment-interactive-primary, var(--color-content-secondary));
+}
+
+.status-circle.neutral .status-icon,
+.status-circle.info .status-icon {
+  color: var(--color-sentiment-interactive-control, var(--color-contrast-overlay));
+}
+
+.np-theme-personal--bright-green .status-circle.neutral .status-icon,
+.np-theme-personal--bright-green .status-circle.info .status-icon {
+  color: var(--color-sentiment-interactive-control, var(--color-white));
 }
 
 .tw-stepper {

package/build/styles/sentimentSurface/SentimentSurface.css

@@ -49,7 +49,7 @@
   --color-sentiment-interactive-control: #CB272F;
   --color-sentiment-interactive-control-hover: #B8232B;
   --color-sentiment-interactive-control-active: #A72027;
-  --color-sentiment-background-surface: #90000D;
+  --color-sentiment-background-surface: #CB272F;
   --color-sentiment-background-surface-hover: #B8232B;
   --color-sentiment-background-surface-active: #A72027;
 }

package/build/styles/statusIcon/StatusIcon.css

@@ -1,6 +1,37 @@
-.wds-sentiment-surface.status-circle {
-  background-color: var(--color-sentiment-interactive-primary);
+.status-circle.negative,
+.status-circle.error {
+  background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-negative));
 }
-.wds-sentiment-surface.status-circle .status-icon {
-  color: var(--color-sentiment-interactive-control);
+.status-circle.negative .status-icon,
+.status-circle.error .status-icon {
+  color: var(--color-sentiment-interactive-control, var(--color-sentiment-negative-secondary));
+}
+.status-circle.positive,
+.status-circle.success {
+  background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-positive));
+}
+.status-circle.positive .status-icon,
+.status-circle.success .status-icon {
+  color: var(--color-sentiment-interactive-control, var(--color-sentiment-positive-secondary));
+}
+.status-circle.warning,
+.status-circle.pending {
+  background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-warning));
+}
+.status-circle.warning .status-icon,
+.status-circle.pending .status-icon {
+  color: var(--color-sentiment-interactive-control, var(--color-dark));
+}
+.status-circle.neutral,
+.status-circle.info {
+  background-color: #5d7079;
+  background-color: var(--color-sentiment-interactive-primary, var(--color-content-secondary));
+}
+.status-circle.neutral .status-icon,
+.status-circle.info .status-icon {
+  color: var(--color-sentiment-interactive-control, var(--color-contrast-overlay));
+}
+.np-theme-personal--bright-green .status-circle.neutral .status-icon,
+.np-theme-personal--bright-green .status-circle.info .status-icon {
+  color: var(--color-sentiment-interactive-control, var(--color-white));
 }

package/build/types/chips/Chips.d.ts

@@ -14,7 +14,7 @@ export type ChipsProps = CommonProps & AriaLabelProperty & {
     }) => void;
     /** Used to manage which chips are selected */
     selected: ChipValue | readonly ChipValue[];
-    /** Used to activate multi-selection */
+    /** True turns on Filter-mode, False is Choice */
     multiple?: boolean;
 };
 declare const Chips: ({ chips, onChange, selected, "aria-label": ariaLabel, className, multiple, }: ChipsProps) => import("react").JSX.Element;

package/build/types/chips/Chips.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chips.d.ts","sourceRoot":"","sources":["../../../src/chips/Chips.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAK3D,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAExC,MAAM,MAAM,IAAI,GAAG;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,WAAW,GAClC,iBAAiB,GAAG;IAClB,gEAAgE;IAChE,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;IACvB,sEAAsE;IACtE,QAAQ,EAAE,CAAC,EACT,SAAS,EACT,aAAa,GACd,EAAE;QACD,SAAS,EAAE,OAAO,CAAC;QACnB,aAAa,EAAE,SAAS,CAAC;KAC1B,KAAK,IAAI,CAAC;IACX,8CAA8C;IAC9C,QAAQ,EAAE,SAAS,GAAG,SAAS,SAAS,EAAE,CAAC;IAC3C,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEJ,QAAA,MAAM,KAAK,GAAI,8EAOZ,UAAU,gCA6CZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Chips.d.ts","sourceRoot":"","sources":["../../../src/chips/Chips.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAK3D,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAExC,MAAM,MAAM,IAAI,GAAG;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,WAAW,GAClC,iBAAiB,GAAG;IAClB,gEAAgE;IAChE,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;IACvB,sEAAsE;IACtE,QAAQ,EAAE,CAAC,EACT,SAAS,EACT,aAAa,GACd,EAAE;QACD,SAAS,EAAE,OAAO,CAAC;QACnB,aAAa,EAAE,SAAS,CAAC;KAC1B,KAAK,IAAI,CAAC;IACX,8CAA8C;IAC9C,QAAQ,EAAE,SAAS,GAAG,SAAS,SAAS,EAAE,CAAC;IAC3C,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEJ,QAAA,MAAM,KAAK,GAAI,8EAOZ,UAAU,gCA6CZ,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/build/types/common/commonProps.d.ts

@@ -1,10 +1,4 @@
 export type CommonProps = {
-    /**
-     * Space-separated list of the case-sensitive CSS classes,
-     * most would be applied to outermost element inside the component
-     *
-     * @see https://github.com/transferwise/neptune-web/blob/main/rfc/0001-always-pass-classname.md
-     */
     className?: string;
 };
 export type AriaLabelProperty = {

package/build/types/common/commonProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"commonProps.d.ts","sourceRoot":"","sources":["../../../src/common/commonProps.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACxB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,KAAK,CAAC,yBAAyB,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9D,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,MAAM,GAAG,QAAQ,CAAC"}
+{"version":3,"file":"commonProps.d.ts","sourceRoot":"","sources":["../../../src/common/commonProps.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,KAAK,CAAC,yBAAyB,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9D,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,MAAM,GAAG,QAAQ,CAAC"}

package/build/types/label/Label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../src/label/Label.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AA+BF,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAchE,MAAM,MAAM,qBAAqB,GAAG,iBAAiB,CAAC,WAAW,CAAC,GAAG;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAWrF,QAAA,MAAM,cAAc;wCAvBwC,kBAAkB;+CAcR,qBAAqB;CASrB,CAAC;AAEvE,OAAO,EAAE,cAAc,IAAI,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../src/label/Label.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AA6BF,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAchE,MAAM,MAAM,qBAAqB,GAAG,iBAAiB,CAAC,WAAW,CAAC,GAAG;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAWrF,QAAA,MAAM,cAAc;wCAvBwC,kBAAkB;+CAcR,qBAAqB;CASrB,CAAC;AAGvE,OAAO,EAAE,cAAc,IAAI,KAAK,EAAE,CAAC"}

package/build/types/logo/Logo.d.ts

@@ -6,7 +6,10 @@ export declare enum LogoType {
 export interface LogoProps {
     /** Extra classes applied to Logo */
     className?: string;
-    /** If true, will use dark colours for dark on light theme */
+    /**
+     * Renders a light-coloured version suited for dark backgrounds.
+     * @default false
+     */
     inverse?: boolean;
     /**
      * What type of logo to display
@@ -14,5 +17,11 @@ export interface LogoProps {
      */
     type?: `${LogoType}`;
 }
+/**
+ * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports
+ * and the full wordmark on ≥576px (small breakpoint and above).
+ *
+ * @see {@link https://wise.design/foundations/logo Design Spec}
+ */
 export default function Logo({ className, inverse, type }: LogoProps): import("react").JSX.Element;
 //# sourceMappingURL=Logo.d.ts.map

package/build/types/logo/Logo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../../src/logo/Logo.tsx"],"names":[],"mappings":"AA0BA,oBAAY,QAAQ;IAClB,IAAI,SAAS;IACb,aAAa,kBAAkB;IAC/B,aAAa,kBAAkB;CAChC;AAED,MAAM,WAAW,SAAS;IACxB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,QAAQ,EAAE,CAAC;CACtB;AAQD,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAa,EAAE,EAAE,SAAS,+BAW5E"}
+{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../../src/logo/Logo.tsx"],"names":[],"mappings":"AA0BA,oBAAY,QAAQ;IAClB,IAAI,SAAS;IACb,aAAa,kBAAkB;IAC/B,aAAa,kBAAkB;CAChC;AAED,MAAM,WAAW,SAAS;IACxB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,QAAQ,EAAE,CAAC;CACtB;AAQD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAa,EAAE,EAAE,SAAS,+BAW5E"}

package/build/types/moneyInput/MoneyInput.d.ts

@@ -37,6 +37,12 @@ export interface MoneyInputProps extends WrappedComponentProps {
     onCustomAction?: () => void;
     classNames?: Record<string, string>;
     selectProps?: Partial<SelectInputProps<CurrencyOptionItem>>;
+    /**
+     * Specify the number of decimal places to format the amount. When not specified, the number of
+     * decimals is determined by the selected currency (e.g. 2 for EUR, 0 for JPY, 3 for BHD).
+     * This override is ignored for zero-decimal currencies (e.g. JPY, KRW, HUF), which always use 0.
+     */
+    decimals?: number;
 }
 export type MoneyInputPropsWithInputAttributes = MoneyInputProps & Partial<WithInputAttributesProps>;
 declare const _default: import("react").FC<import("react-intl").WithIntlProps<Omit<MoneyInputPropsWithInputAttributes, "inputAttributes"> & {

package/build/types/moneyInput/MoneyInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MoneyInput.d.ts","sourceRoot":"","sources":["../../../src/moneyInput/MoneyInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAE/D,OAAO,EAGL,SAAS,EACT,UAAU,EACV,SAAS,EAEV,MAAM,WAAW,CAAC;AACnB,OAAO,EAAuB,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAEnF,OAAO,EAKL,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAO/B,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AA0CnE,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,EAAE,SAAS,YAAY,EAAE,CAAC;IACpC,gBAAgB,EAAE,kBAAkB,CAAC;IACrC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3F,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;CAC7D;AAED,MAAM,MAAM,kCAAkC,GAAG,eAAe,GAC9D,OAAO,CAAC,wBAAwB,CAAC,CAAC;;;;;;;;AA4ZpC,wBAA2F"}
+{"version":3,"file":"MoneyInput.d.ts","sourceRoot":"","sources":["../../../src/moneyInput/MoneyInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAE/D,OAAO,EAGL,SAAS,EACT,UAAU,EACV,SAAS,EAEV,MAAM,WAAW,CAAC;AACnB,OAAO,EAAuB,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAEnF,OAAO,EAKL,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAO/B,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAoDnE,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,EAAE,SAAS,YAAY,EAAE,CAAC;IACpC,gBAAgB,EAAE,kBAAkB,CAAC;IACrC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3F,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC5D;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,kCAAkC,GAAG,eAAe,GAC9D,OAAO,CAAC,wBAAwB,CAAC,CAAC;;;;;;;;AAoapC,wBAA2F"}

package/build/types/moneyInput/currencyFormatting.d.ts

@@ -1,4 +1,5 @@
-import { formatAmount } from '@transferwise/formatting';
-export { formatAmount };
-export declare function parseAmount(number: string, currency: string, locale?: string): number;
+import { formatAmount, formatNumber } from '@transferwise/formatting';
+export { formatAmount, formatNumber };
+export declare function getCurrencyDecimals(currency: string): number;
+export declare function parseAmount(number: string, currency: string, locale?: string, decimals?: number): number;
 //# sourceMappingURL=currencyFormatting.d.ts.map

package/build/types/moneyInput/currencyFormatting.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"currencyFormatting.d.ts","sourceRoot":"","sources":["../../../src/moneyInput/currencyFormatting.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIxD,OAAO,EAAE,YAAY,EAAE,CAAC;AA2DxB,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,SAAiB,UAcpF"}
+{"version":3,"file":"currencyFormatting.d.ts","sourceRoot":"","sources":["../../../src/moneyInput/currencyFormatting.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAItE,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,CAAC;AAkDtC,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,MAAM,UAGnD;AAMD,wBAAgB,WAAW,CACzB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,EAChB,MAAM,SAAiB,EACvB,QAAQ,CAAC,EAAE,MAAM,UAgBlB"}

package/build/types/statusIcon/StatusIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIcon.d.ts","sourceRoot":"","sources":["../../../src/statusIcon/StatusIcon.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAoB,MAAM,EAAE,MAAM,WAAW,CAAC;AAMlG;;GAEG;AACH,KAAK,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAEtD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;AAE7D,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,yBAAyB;IACzB,SAAS,CAAC,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACrC,kBAAkB;IAClB,IAAI,CAAC,EAAE,WAAW,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACtD;;;;SAIK;IACL,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B,CAAC;AAQF,QAAA,MAAM,UAAU,GAAI,+CAKjB,eAAe,gCA0EjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"StatusIcon.d.ts","sourceRoot":"","sources":["../../../src/statusIcon/StatusIcon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAoB,MAAM,EAAE,MAAM,WAAW,CAAC;AAMlG;;GAEG;AACH,KAAK,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAEtD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;AAE7D,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,yBAAyB;IACzB,SAAS,CAAC,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACrC,kBAAkB;IAClB,IAAI,CAAC,EAAE,WAAW,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACtD;;;;SAIK;IACL,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B,CAAC;AAQF,QAAA,MAAM,UAAU,GAAI,+CAKjB,eAAe,gCA8DjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.133.0",
+  "version": "46.134.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -49,11 +49,11 @@
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",
     "@rollup/plugin-url": "^8.0.2",
-    "@storybook/addon-a11y": "^10.3.2",
-    "@storybook/addon-docs": "^10.3.2",
+    "@storybook/addon-a11y": "^10.3.3",
+    "@storybook/addon-docs": "^10.3.3",
     "@storybook/addon-mcp": "^0.4.1",
     "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
-    "@storybook/react-webpack5": "^10.3.2",
+    "@storybook/react-webpack5": "^10.3.3",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -73,7 +73,7 @@
     "@wise/eslint-config": "^13.3.0",
     "babel-plugin-formatjs": "^10.5.41",
     "eslint": "^9.39.4",
-    "eslint-plugin-storybook": "^10.3.2",
+    "eslint-plugin-storybook": "^10.3.3",
     "gulp": "^5.0.1",
     "jest": "^30.3.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -83,13 +83,13 @@
     "react-intl": "^7.1.14",
     "rollup": "^4.57.1",
     "rollup-preserve-directives": "^1.1.3",
-    "storybook": "^10.3.2",
+    "storybook": "^10.3.3",
     "storybook-addon-tag-badges": "^3.1.0",
     "storybook-addon-test-codegen": "^3.0.1",
     "@transferwise/less-config": "3.1.2",
-    "@wise/wds-configs": "0.0.0",
+    "@transferwise/neptune-css": "14.27.1",
     "@wise/components-theming": "1.10.1",
-    "@transferwise/neptune-css": "14.27.1"
+    "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3 || ^4",

package/src/button/_stories/Button.story.tsx

@@ -158,7 +158,6 @@ const meta: Meta<typeof Button> = {
       table: {
         readonly: true,
       },
-      description: 'If set, toggles the new Button API',
     },
     size: {
       type: {
@@ -195,13 +194,11 @@ const meta: Meta<typeof Button> = {
       },
     },
     disabled: {
-      description: 'Toggles the disabled state',
       table: {
         defaultValue: { summary: 'false' },
       },
     },
     loading: {
-      description: 'Toggles the loading state',
       table: {
         defaultValue: { summary: 'false' },
       },
@@ -215,7 +212,6 @@ const meta: Meta<typeof Button> = {
       type: {
         name: 'string',
       },
-      description: 'If set, the component will render as an HTML anchor.',
     },
     target: {
       type: {
@@ -240,7 +236,6 @@ const meta: Meta<typeof Button> = {
           summary: 'string',
         },
       },
-      description: "Native HTML button's `type` attribute",
     },
     htmlType: {
       table: {
@@ -254,6 +249,21 @@ const meta: Meta<typeof Button> = {
         },
       },
     },
+    id: {
+      table: {
+        category: 'Common',
+      },
+    },
+    className: {
+      table: {
+        category: 'Common',
+      },
+    },
+    onClick: {
+      table: {
+        category: 'Common',
+      },
+    },
   },
   args: {
     v2: true,

package/src/checkboxButton/CheckboxButton.story.tsx

@@ -1,67 +1,148 @@
-import { action } from 'storybook/actions';
+import { useState, useEffect } from 'react';
+import { fn } from 'storybook/test';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { useState } from 'react';
 
-import CheckboxButton from './CheckboxButton';
+import { storySourceWithoutNoise } from '../../.storybook/helpers';
+import CheckboxButton, { type CheckboxButtonProps } from './CheckboxButton';
+import { Label } from '../label/Label';
 
+/**
+ * Use <a href="?path=/docs/forms-checkbox--docs">Checkbox</a> component instead when pairing with a label. Only use CheckboxButton when you need a standalone checkbox (e.g. settings matrix) and provide an `aria-label`.
+ *
+ * **Design guidance**: <a href="https://wise.design/components/checkbox" target="_blank">wise.design/components/checkbox</a>
+ */
 export default {
   component: CheckboxButton,
   title: 'Actions/CheckboxButton',
   args: {
+    'aria-label': 'Toggle checkbox',
+    checked: true,
     disabled: false,
-    onBlur: action('blur'),
-    onClick: action('click'),
-    onFocus: action('focus'),
+    indeterminate: false,
+    onBlur: fn(),
+    onChange: fn(),
+    onClick: fn(),
+    onFocus: fn(),
+  },
+  argTypes: {
+    'aria-label': {
+      description: 'Provides the accessible name when the control has no visible text label.',
+    },
+    checked: {
+      description: 'Controls whether the checkbox is checked.',
+    },
+    disabled: {
+      description: 'Toggles the disabled state.',
+    },
+    name: {
+      description: 'Name submitted with the form when the checkbox is checked.',
+    },
+    value: {
+      description: 'Value submitted with the form when the checkbox is checked.',
+    },
+    onChange: {
+      description: 'Called when the checked state changes.',
+    },
+    indeterminate: {
+      description:
+        'Sets the native mixed state — used when some (not all) child items are selected. Clicking resolves to checked; clear `indeterminate` in `onChange` to reflect the transition.',
+    },
+    defaultChecked: { table: { category: 'Common' } },
+    id: { table: { category: 'Common' } },
+    className: { table: { category: 'Common' } },
+    onBlur: { table: { category: 'Common' } },
+    onClick: { table: { category: 'Common' } },
+    onFocus: { table: { category: 'Common' } },
+  },
+  parameters: {
+    docs: { toc: true },
   },
 } satisfies Meta<typeof CheckboxButton>;
 
 type Story = StoryObj<typeof CheckboxButton>;
 
-export const Basic: Story = {
-  args: {
-    'aria-label': 'Toggle email updates',
-  },
-  render: (args) => {
-    const [checked, setChecked] = useState(true);
+const withColumnLayout = (Story: () => JSX.Element) => (
+  <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+    <Story />
+  </div>
+);
 
-    return <CheckboxButton {...args} checked={checked} onChange={() => setChecked(!checked)} />;
-  },
-};
+/** Interactive single checkbox — use the Controls panel to toggle `disabled` and `indeterminate`. */
+export const Playground: Story = storySourceWithoutNoise({
+  render: function Render(args: CheckboxButtonProps) {
+    const [checked, setChecked] = useState(args.checked ?? true);
 
-/**
- * The `indeterminate` state is predominantly visual and should match the [native HTML checkbox
- * implementation](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/indeterminate).
- * It is used to indicate a mixed state, where some but not all items are selected, but does not
- * change the `checked` state of the input itself – it remains either checked or unchecked.
- *
- * In the example below the 1st checkbox is unchecked and the 2nd checkbox is checked.
- */
-export const Indeterminate: Story = {
-  args: {
-    indeterminate: true,
-  },
-  render: (args) => {
-    const [checked1, setChecked1] = useState<boolean | undefined>(false);
-    const [checked2, setChecked2] = useState<boolean | undefined>(true);
+    useEffect(() => {
+      setChecked(args.checked ?? true);
+    }, [args.checked]);
 
     return (
-      <>
+      <CheckboxButton
+        {...args}
+        checked={checked}
+        onChange={(e) => {
+          setChecked(e.currentTarget.checked);
+          args.onChange?.(e);
+        }}
+      />
+    );
+  },
+});
+
+/** Disabled state — checked and unchecked. */
+export const Disabled: Story = {
+  decorators: [withColumnLayout],
+  render: (args) => (
+    <>
+      <div>
+        <Label htmlFor="disabled-unchecked">Disabled unchecked</Label>
+        <CheckboxButton
+          id="disabled-unchecked"
+          aria-label="Disabled unchecked"
+          checked={false}
+          disabled
+          onChange={() => {}}
+        />
+      </div>
+      <div>
+        <Label htmlFor="disabled-checked">Disabled checked</Label>
         <CheckboxButton
-          {...args}
-          checked={checked1}
-          indeterminate={args.indeterminate}
-          aria-label="Initially disabled checkbox with indeterminate state"
-          onChange={() => setChecked1((current) => !current)}
+          id="disabled-checked"
+          aria-label="Disabled checked"
+          checked
+          disabled
+          onChange={() => {}}
         />
+      </div>
+    </>
+  ),
+};
 
+/** Indeterminate state — checked and unchecked. */
+export const Indeterminate: Story = {
+  decorators: [withColumnLayout],
+  render: (args) => (
+    <>
+      <div>
+        <Label htmlFor="indeterminate-unchecked">Indeterminate (unchecked)</Label>
         <CheckboxButton
-          {...args}
-          checked={checked2}
-          indeterminate={args.indeterminate}
-          aria-label="Initially enabled checkbox with indeterminate state"
-          onChange={() => setChecked2((current) => !current)}
+          id="indeterminate-unchecked"
+          aria-label="Indeterminate unchecked"
+          checked={false}
+          indeterminate
+          onChange={() => {}}
         />
-      </>
-    );
-  },
+      </div>
+      <div>
+        <Label htmlFor="indeterminate-checked">Indeterminate (checked)</Label>
+        <CheckboxButton
+          id="indeterminate-checked"
+          aria-label="Indeterminate checked"
+          checked
+          indeterminate
+          onChange={() => {}}
+        />
+      </div>
+    </>
+  ),
 };