@transferwise/components 0.0.0-experimental-4d90243 → 0.0.0-experimental-a308934

package/build/types/prompt/PrimitivePrompt/PrimitivePrompt.d.ts

@@ -1,11 +1,16 @@
-import { Sentiment } from '../../sentimentSurface';
+import { Emphasis, Sentiment } from '../../sentimentSurface';
 import { HTMLAttributes, ReactNode } from 'react';
 export type PrimitivePromptProps = HTMLAttributes<HTMLDivElement> & {
     /**
-     * The sentiment determines the colour scheme
+     * The sentiment determines the colour scheme.
      * @default success
      */
     sentiment?: Sentiment;
+    /**
+     * The emphasis level affecting background and text contrast.
+     * @default 'base
+     */
+    emphasis?: Emphasis;
     /**
      * Media to be displayed on the prompt (icon/image/etc).
      */
@@ -26,5 +31,5 @@ export type PrimitivePromptProps = HTMLAttributes<HTMLDivElement> & {
 /**
  * PrimitivePrompt is a low-level component that provides the structure, sentiment support and styling for various prompts.
  * Uses several css variables to handle styling from within the consuming component, e.g. --Prompt-padding. */
-export declare const PrimitivePrompt: ({ sentiment, media, actions, onDismiss, className, children, ...restProps }: PrimitivePromptProps) => import("react").JSX.Element;
+export declare const PrimitivePrompt: ({ sentiment, emphasis, media, actions, onDismiss, className, children, ...restProps }: PrimitivePromptProps) => import("react").JSX.Element;
 //# sourceMappingURL=PrimitivePrompt.d.ts.map

package/build/types/prompt/PrimitivePrompt/PrimitivePrompt.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrimitivePrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/PrimitivePrompt/PrimitivePrompt.tsx"],"names":[],"mappings":"AAEA,OAAyB,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAIrE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAClE;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;8GAE8G;AAC9G,eAAO,MAAM,eAAe,GAAI,6EAQ7B,oBAAoB,gCA8BtB,CAAC"}
+{"version":3,"file":"PrimitivePrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/PrimitivePrompt/PrimitivePrompt.tsx"],"names":[],"mappings":"AAEA,OAAyB,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI/E,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAClE;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;8GAE8G;AAC9G,eAAO,MAAM,eAAe,GAAI,uFAS7B,oBAAoB,gCA+BtB,CAAC"}

package/build/types/prompt/common/Expander/Expander.d.ts

@@ -0,0 +1,20 @@
+export type ExpanderState = {
+    expanded: boolean;
+    toggle: () => void;
+    setExpanded: (expanded: boolean) => void;
+};
+export declare function useExpanderState(initialExpanded?: boolean): ExpanderState;
+export declare function shouldShowWhenExpanded({ expanded, hasContent, alwaysShow, }: {
+    expanded: boolean;
+    hasContent: boolean;
+    alwaysShow?: boolean;
+}): boolean;
+export type ExpanderToggleProps = {
+    expanded: boolean;
+    onToggle: () => void;
+    size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;
+    className?: string;
+    'data-testid'?: string;
+};
+export declare const ExpanderToggle: ({ expanded, onToggle, size, className, "data-testid": testId, }: ExpanderToggleProps) => import("react").JSX.Element;
+//# sourceMappingURL=Expander.d.ts.map

package/build/types/prompt/common/Expander/Expander.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Expander.d.ts","sourceRoot":"","sources":["../../../../../src/prompt/common/Expander/Expander.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,WAAW,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CAAC;AAGF,wBAAgB,gBAAgB,CAAC,eAAe,UAAO,GAAG,aAAa,CAYtE;AAGD,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,UAAU,EACV,UAAkB,GACnB,EAAE;IACD,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,OAAO,CAMV;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAGF,eAAO,MAAM,cAAc,GAAI,iEAM5B,mBAAmB,gCAsBrB,CAAC"}

package/build/types/prompt/common/Expander/Expander.messages.d.ts

@@ -0,0 +1,14 @@
+declare const _default: {
+    expandAriaLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    collapseAriaLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default _default;
+//# sourceMappingURL=Expander.messages.d.ts.map

package/build/types/prompt/common/Expander/Expander.messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Expander.messages.d.ts","sourceRoot":"","sources":["../../../../../src/prompt/common/Expander/Expander.messages.ts"],"names":[],"mappings":";;;;;;;;;;;;AAEA,wBAWG"}

package/build/types/prompt/helpers/promptMedia.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { AvatarViewProps } from '../../avatarView';
+import { BadgeAssetsProps } from '../../badge';
+import { PrimitivePromptProps } from '../PrimitivePrompt';
+export type PromptMedia = {
+    imgSrc?: string;
+    avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {
+        asset?: AvatarViewProps['children'];
+        badge?: Pick<BadgeAssetsProps, 'flagCode'>;
+    };
+    'aria-label'?: string;
+    'aria-hidden'?: boolean;
+};
+type RenderPromptMediaOptions = {
+    media: PromptMedia;
+    sentiment: PrimitivePromptProps['sentiment'];
+    mediaId: string;
+    imgClassName: string;
+};
+export declare function renderPromptMedia({ media, sentiment, mediaId, imgClassName, }: RenderPromptMediaOptions): ReactNode;
+export {};
+//# sourceMappingURL=promptMedia.d.ts.map

package/build/types/prompt/helpers/promptMedia.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"promptMedia.d.ts","sourceRoot":"","sources":["../../../../src/prompt/helpers/promptMedia.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,OAAmB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAG/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE1D,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,QAAQ,GAAG,aAAa,GAAG,aAAa,CAAC,GAAG;QACzE,KAAK,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;QACpC,KAAK,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;KAC5C,CAAC;IACF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,KAAK,EAAE,WAAW,CAAC;IACnB,SAAS,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAC;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,SAAS,EACT,OAAO,EACP,YAAY,GACb,EAAE,wBAAwB,GAAG,SAAS,CA+CtC"}

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

@@ -4,4 +4,6 @@ export type { ActionPromptProps } from './ActionPrompt';
 export { ActionPrompt } from './ActionPrompt';
 export type { InfoPromptProps, InfoPromptAction, InfoPromptMedia } from './InfoPrompt';
 export { InfoPrompt } from './InfoPrompt';
+export type { CriticalBannerProps } from './CriticalBanner';
+export { CriticalBanner } from './CriticalBanner';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/prompt/index.ts"],"names":[],"mappings":"AAIA,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACvF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/prompt/index.ts"],"names":[],"mappings":"AAIA,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACvF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

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

@@ -26,6 +26,8 @@ declare function customRender(ui: ReactElement, { locale, messages, ...renderOpt
         "neptune.DateLookup.selected": string;
         "neptune.DateLookup.twentyYears": string;
         "neptune.DateLookup.year": string;
+        "neptune.Expander.collapseAriaLabel": string;
+        "neptune.Expander.expandAriaLabel": string;
         "neptune.ExpressiveMoneyInput.currency.search.placeholder": string;
         "neptune.ExpressiveMoneyInput.currency.select.currency": string;
         "neptune.FlowNavigation.back": string;
@@ -111,6 +113,8 @@ declare function customRenderHook(callback: () => unknown, { locale, messages }?
         "neptune.DateLookup.selected": string;
         "neptune.DateLookup.twentyYears": string;
         "neptune.DateLookup.year": string;
+        "neptune.Expander.collapseAriaLabel": string;
+        "neptune.Expander.expandAriaLabel": string;
         "neptune.ExpressiveMoneyInput.currency.search.placeholder": string;
         "neptune.ExpressiveMoneyInput.currency.select.currency": string;
         "neptune.FlowNavigation.back": 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;AAC5D,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,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;AAC5D,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,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-4d90243",
+  "version": "0.0.0-experimental-a308934",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -88,8 +88,8 @@
     "storybook-addon-test-codegen": "^3.0.1",
     "@transferwise/less-config": "3.1.2",
     "@transferwise/neptune-css": "14.27.1",
-    "@wise/components-theming": "1.10.1",
-    "@wise/wds-configs": "0.0.0"
+    "@wise/wds-configs": "0.0.0",
+    "@wise/components-theming": "1.10.1"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3 || ^4",

package/src/i18n/en.json

@@ -16,6 +16,8 @@
   "neptune.DateLookup.selected": "selected",
   "neptune.DateLookup.twentyYears": "20 years",
   "neptune.DateLookup.year": "year",
+  "neptune.Expander.collapseAriaLabel": "Collapse",
+  "neptune.Expander.expandAriaLabel": "Expand",
   "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Type a currency / country",
   "neptune.ExpressiveMoneyInput.currency.select.currency": "Select currency",
   "neptune.FlowNavigation.back": "back to previous step",

package/src/index.ts

@@ -35,7 +35,7 @@ export type { HeaderProps } from './header';
 export type { EmphasisProps } from './emphasis';
 export type { FieldProps } from './field/Field';
 export type { InfoProps } from './info';
-export type { InlinePromptProps, ActionPromptProps } from './prompt';
+export type { InlinePromptProps, ActionPromptProps, CriticalBannerProps } from './prompt';
 export type { InfoPromptProps, InfoPromptAction, InfoPromptMedia } from './prompt';
 export type { InputWithDisplayFormatProps } from './inputWithDisplayFormat';
 export type { InputProps } from './inputs/Input';
@@ -173,7 +173,7 @@ export { default as Header } from './header';
 export { default as Image } from './image';
 export { default as Info } from './info';
 export { default as InlineAlert } from './inlineAlert';
-export { InfoPrompt, InlinePrompt, ActionPrompt } from './prompt';
+export { InfoPrompt, InlinePrompt, ActionPrompt, CriticalBanner } from './prompt';
 export { default as InputWithDisplayFormat } from './inputWithDisplayFormat';
 export { Input } from './inputs/Input';
 export { InputGroup } from './inputs/InputGroup';

package/src/main.css

@@ -32176,6 +32176,91 @@ html:not([dir="rtl"]) .np-navigation-option {
   padding: 0;
 }
 
+.wds-action-prompt {
+  --Prompt-padding: var(--size-16);
+  --Prompt-actions-gap: var(--size-8);
+  --Prompt-gap: var(--size-10) var(--size-16);
+  --Prompt-border-radius: var(--radius-large);
+}
+
+.wds-action-prompt--media-image {
+  width: 48px;
+  width: var(--size-48);
+  height: 48px;
+  height: var(--size-48);
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
+@media (max-width: 767px) {
+  .wds-action-prompt--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
+    flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
+    min-width: -moz-fit-content;
+    min-width: fit-content;
+  }
+}
+
+.wds-action-prompt__content {
+  max-width: calc(48px * 10);
+  max-width: calc(var(--size-48) * 10);
+}
+
+.wds-critical-banner {
+  --Prompt-padding: var(--size-16);
+  --Prompt-actions-gap: var(--size-8);
+  --Prompt-gap: var(--size-10) var(--size-16);
+  --Prompt-border-radius: 0;
+}
+
+.wds-critical-banner--media-image {
+  width: 48px;
+  width: var(--size-48);
+  height: 48px;
+  height: var(--size-48);
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
+@media (max-width: 767px) {
+  .wds-critical-banner--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
+    flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
+    min-width: -moz-fit-content;
+    min-width: fit-content;
+  }
+}
+
+.wds-critical-banner__description--collapsed {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.wds-critical-banner .wds-prompt__content-wrapper {
+  grid-template-columns: auto 1fr auto;
+  align-items: flex-start;
+}
+
+.wds-critical-banner__text-wrapper {
+  min-width: 0;
+}
+
+@media (max-width: 767px) {
+  .wds-critical-banner .wds-prompt__actions-wrapper {
+    grid-column: span 3;
+  }
+}
+
+.wds-expander-toggle {
+  align-self: flex-start;
+  flex-shrink: 0;
+  transition: transform 0.2s ease-in-out;
+}
+
+.wds-expander-toggle--collapsed {
+  transform: rotate(180deg);
+}
+
 .wds-radio-group .np-radio:last-child label {
   margin-bottom: 0;
 }
@@ -34600,32 +34685,3 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-list-item__action {
   flex-shrink: 0;
 }
-
-.wds-action-prompt {
-  --Prompt-padding: var(--size-16);
-  --Prompt-actions-gap: var(--size-8);
-  --Prompt-gap: var(--size-10) var(--size-16);
-  --Prompt-border-radius: var(--radius-large);
-}
-
-.wds-action-prompt--media-image {
-  width: 48px;
-  width: var(--size-48);
-  height: 48px;
-  height: var(--size-48);
-  -o-object-fit: contain;
-     object-fit: contain;
-}
-
-@media (max-width: 767px) {
-  .wds-action-prompt--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
-    flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
-    min-width: -moz-fit-content;
-    min-width: fit-content;
-  }
-}
-
-.wds-action-prompt__content {
-  max-width: calc(48px * 10);
-  max-width: calc(var(--size-48) * 10);
-}

package/src/main.less

@@ -66,6 +66,9 @@
 @import "./prompt/PrimitivePrompt/PrimitivePrompt.less";
 @import "./prompt/InlinePrompt/InlinePrompt.less";
 @import "./prompt/InfoPrompt/InfoPrompt.less";
+@import "./prompt/ActionPrompt/ActionPrompt.less";
+@import "./prompt/CriticalBanner/CriticalBanner.less";
+@import "./prompt/common/Expander/Expander.less";
 @import "./radioGroup/RadioGroup.less";
 @import "./section/Section.less";
 @import "./slidingPanel/SlidingPanel.less";
@@ -90,7 +93,6 @@
 @import "./progress/Progress.less";
 @import "./progressBar/ProgressBar.less";
 @import "./legacylistItem/LegacyListItem.less";
-@import "./prompt/ActionPrompt/ActionPrompt.less";
 
 // List all less files in src in alphabetical order: find -s src -type f -name '*.less' ! -name 'main.less'
 // Make sure you are not referencing main.less itself in this file!

package/src/moneyInput/MoneyInput.story.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { within, userEvent, expect } from 'storybook/test';
+import { within, userEvent } from 'storybook/test';
 import { Lock } from '@transferwise/icons';
 import { useState } from 'react';
 
@@ -155,15 +155,6 @@ export const BalanceCurrencies: Story = {
   },
 };
 
-export const WithDecimals: Story = {
-  args: {
-    currencies: [],
-    selectedCurrency: exampleCurrency.eur,
-    decimals: 4,
-    amount: 1234.1412,
-  },
-};
-
 export const OpenedInput: Story = {
   ...MultipleCurrencies,
   play: async ({ canvasElement }) => {

package/src/moneyInput/MoneyInput.test.story.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { within, userEvent, fireEvent, expect } from 'storybook/test';
+import { within, fireEvent } from 'storybook/test';
 import { allModes } from '../../.storybook/modes';
 import { lorem500 } from '../test-utils';
 import { Field } from '../field/Field';
@@ -102,143 +102,3 @@ export const SmoothScrollReset: Story = {
     },
   },
 };
-
-export const WithDecimals: Story = {
-  args: {
-    currencies: [],
-    decimals: 4,
-    amount: 1234.5678,
-  },
-  play: async ({ canvas }) => {
-    const input = canvas.getByRole('textbox');
-    await expect(input).toHaveValue('1,234.5678');
-    await userEvent.clear(input);
-    await userEvent.type(input, '99.123456789');
-    await userEvent.tab();
-    await expect(input).toHaveValue('99.1235');
-  },
-};
-
-const eur = {
-  value: 'EUR',
-  label: 'EUR',
-  note: 'Euro',
-  currency: 'eur',
-} as const;
-
-const bhd = {
-  value: 'BHD',
-  label: 'BHD',
-  note: 'Bahraini dinar',
-  currency: 'bhd',
-} as const;
-
-const jpy = {
-  value: 'JPY',
-  label: 'JPY',
-  note: 'Japanese yen',
-  currency: 'jpy',
-} as const;
-
-const sharedProps = {
-  currencies: [],
-  onAmountChange: () => {},
-  onCurrencyChange: () => {},
-} as const;
-
-function Row({
-  label,
-  amount,
-  currency,
-  decimals,
-}: {
-  label: string;
-  amount: number;
-  currency: { value: string; label: string; note: string; currency: string };
-  decimals: number;
-}) {
-  return (
-    <div
-      style={{
-        display: 'grid',
-        gridTemplateColumns: '240px 1fr 1fr',
-        gap: 12,
-        alignItems: 'center',
-      }}
-    >
-      <Body as="span" style={{ fontSize: 13, color: '#6b7280' }}>
-        {label}
-      </Body>
-      <Field label={`No decimals prop (${currency.value})`}>
-        <MoneyInput {...sharedProps} selectedCurrency={currency} amount={amount} />
-      </Field>
-      <Field label={`decimals={${decimals}} (${currency.value})`}>
-        <MoneyInput
-          {...sharedProps}
-          selectedCurrency={currency}
-          amount={amount}
-          decimals={decimals}
-        />
-      </Field>
-    </div>
-  );
-}
-
-/**
- * Side-by-side comparison of formatAmount (no decimals prop) vs formatNumber (with decimals prop)
- * when decimals matches the currency default. Differences indicate a formatting parity issue.
- *
- * Problem 1: Trailing zero stripping — formatAmount strips ".00" for whole numbers,
- * formatNumber always pads to the requested precision.
- *
- * Problem 2: BHD decimal count — formatAmount renders 2 fractional digits for BHD,
- * but the currencyDecimals map says BHD has 3. formatNumber with decimals=3 shows 3.
- */
-export const DecimalsFormatParity: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-      <Body as="p" style={{ fontWeight: 600, marginTop: 8 }}>
-        EUR — whole numbers (trailing zero stripping)
-      </Body>
-      <Row label="amount=0" amount={0} currency={eur} decimals={2} />
-      <Row label="amount=1" amount={1} currency={eur} decimals={2} />
-      <Row label="amount=42" amount={42} currency={eur} decimals={2} />
-      <Row label="amount=100" amount={100} currency={eur} decimals={2} />
-      <Row label="amount=1000" amount={1000} currency={eur} decimals={2} />
-      <Row label="amount=9999999" amount={9999999} currency={eur} decimals={2} />
-
-      <Body as="p" style={{ fontWeight: 600, marginTop: 8 }}>
-        EUR — fractional amounts (should match)
-      </Body>
-      <Row label="amount=0.01" amount={0.01} currency={eur} decimals={2} />
-      <Row label="amount=0.1" amount={0.1} currency={eur} decimals={2} />
-      <Row label="amount=99.9" amount={99.9} currency={eur} decimals={2} />
-      <Row label="amount=1234567.89" amount={1234567.89} currency={eur} decimals={2} />
-
-      <Body as="p" style={{ fontWeight: 600, marginTop: 8 }}>
-        BHD — all amounts (formatAmount uses 2 digits, formatNumber uses 3)
-      </Body>
-      <Row label="amount=0" amount={0} currency={bhd} decimals={3} />
-      <Row label="amount=0.001" amount={0.001} currency={bhd} decimals={3} />
-      <Row label="amount=0.01" amount={0.01} currency={bhd} decimals={3} />
-      <Row label="amount=0.1" amount={0.1} currency={bhd} decimals={3} />
-      <Row label="amount=42" amount={42} currency={bhd} decimals={3} />
-      <Row label="amount=99.9" amount={99.9} currency={bhd} decimals={3} />
-      <Row label="amount=999.99" amount={999.99} currency={bhd} decimals={3} />
-      <Row label="amount=1234567.89" amount={1234567.89} currency={bhd} decimals={3} />
-
-      <Body as="p" style={{ fontWeight: 600, marginTop: 8 }}>
-        JPY — zero-decimal currency (should always match)
-      </Body>
-      <Row label="amount=0" amount={0} currency={jpy} decimals={0} />
-      <Row label="amount=1" amount={1} currency={jpy} decimals={0} />
-      <Row label="amount=1000" amount={1000} currency={jpy} decimals={0} />
-      <Row label="amount=1234567" amount={1234567} currency={jpy} decimals={0} />
-    </div>
-  ),
-  parameters: {
-    chromatic: {
-      disableSnapshot: true,
-    },
-  },
-};

package/src/moneyInput/MoneyInput.test.tsx

@@ -253,45 +253,6 @@ describe('Money Input', () => {
       await userEvent.tab();
       expect(input).toHaveValue('1,234,567.65');
     });
-
-    it('uses custom decimals when specified', async () => {
-      customRender({ decimals: 4 });
-      const input = getInput();
-      await userEvent.clear(input);
-      await userEvent.type(input, '1234.56789');
-      await userEvent.tab();
-      expect(input).toHaveValue('1,234.5679');
-    });
-
-    it('uses custom decimals of 0', async () => {
-      customRender({ decimals: 0 });
-      const input = getInput();
-      await userEvent.clear(input);
-      await userEvent.type(input, '1234.56');
-      await userEvent.tab();
-      expect(input).toHaveValue('1,235');
-    });
-
-    it('ignores custom decimals override for zero-decimal currencies like JPY', async () => {
-      const jpyCurrency: CurrencyOptionItem = {
-        value: 'JPY',
-        label: 'JPY',
-        note: 'Japanese yen',
-        currency: 'jpy',
-      };
-      customRender({
-        decimals: 4,
-        selectedCurrency: jpyCurrency,
-        currencies: [jpyCurrency],
-        amount: 1234,
-      });
-      const input = getInput();
-      expect(input).toHaveValue('1,234');
-      await userEvent.clear(input);
-      await userEvent.type(input, '5678.9999');
-      await userEvent.tab();
-      expect(input).toHaveValue('5,679');
-    });
   });
 
   it('calls onAmountChange with parsed and formatted value', async () => {
@@ -302,12 +263,6 @@ describe('Money Input', () => {
     expect(initialProps.onAmountChange).toHaveBeenCalledWith(1000.65);
   });
 
-  it('calls onAmountChange with value rounded to custom decimals', async () => {
-    customRender({ decimals: 4, amount: null });
-    await userEvent.type(getInput(), '12.34567');
-    expect(initialProps.onAmountChange).toHaveBeenCalledWith(12.3457);
-  });
-
   it('calls onAmountChange when input value is empty', async () => {
     customRender();
     await userEvent.clear(getInput());