@transferwise/components 46.147.0 → 46.148.1

package/build/prompt/PrimitivePrompt/PrimitivePrompt.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PrimitivePrompt.mjs","sources":["../../../src/prompt/PrimitivePrompt/PrimitivePrompt.tsx"],"sourcesContent":["import { Cross } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport SentimentSurface, { Emphasis, Sentiment } from '../../sentimentSurface';\nimport IconButton from '../../iconButton';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../../common/closeButton/CloseButton.messages';\nimport { forwardRef, HTMLAttributes, ReactNode } from 'react';\n\nexport type PrimitivePromptProps = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The sentiment determines the colour scheme.\n   * @default success\n   */\n  sentiment?: Sentiment;\n  /**\n   * The emphasis level affecting background and text contrast.\n   * @default 'base'\n   */\n  emphasis?: Emphasis;\n  /**\n   * Media to be displayed on the prompt (icon/image/etc).\n   */\n  media: ReactNode;\n  /**\n   * Any actions to be displayed on the prompt.\n   */\n  actions?: ReactNode;\n  /**\n   * Handler called when the close button is clicked. If not provided, then the close button is hidden.\n   */\n  onDismiss?: () => void;\n  /**\n   * Test ID for testing tools\n   */\n  'data-testid'?: string;\n};\n\n/**\n * PrimitivePrompt is a low-level component that provides the structure, sentiment support and styling for various prompts.\n * Uses several css variables to handle styling from within the consuming component, e.g. --Prompt-padding. */\nexport const PrimitivePrompt = forwardRef<HTMLDivElement, PrimitivePromptProps>(\n  (\n    {\n      sentiment = 'success',\n      emphasis = 'base',\n      media,\n      actions,\n      onDismiss,\n      className,\n      children,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const intl = useIntl();\n\n    return (\n      <SentimentSurface\n        // @ts-expect-error - SentimentSurface forwardRef types don't expose ref in props\n        ref={ref}\n        sentiment={sentiment}\n        emphasis={emphasis}\n        className={clsx('wds-prompt', `wds-prompt--${sentiment}`, className)}\n        {...restProps}\n      >\n        <div\n          className={clsx('wds-prompt__content-wrapper', {\n            'wds-prompt__content-wrapper--with-dismiss': !!onDismiss,\n          })}\n        >\n          <div className={clsx('wds-prompt__media-wrapper')}>{media}</div>\n          {children}\n          {onDismiss && (\n            <IconButton\n              size={24}\n              priority=\"secondary\"\n              aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n              onClick={onDismiss}\n            >\n              <Cross />\n            </IconButton>\n          )}\n          {actions && <div className=\"wds-prompt__actions-wrapper\">{actions}</div>}\n        </div>\n      </SentimentSurface>\n    );\n  },\n);\n\nPrimitivePrompt.displayName = 'PrimitivePrompt';\n"],"names":["PrimitivePrompt","forwardRef","sentiment","emphasis","media","actions","onDismiss","className","children","restProps","ref","intl","useIntl","_jsx","SentimentSurface","clsx","_jsxs","IconButton","size","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross","displayName"],"mappings":";;;;;;;;;AAwCO,MAAMA,eAAe,gBAAGC,UAAU,CACvC,CACE;AACEC,EAAAA,SAAS,GAAG,SAAS;AACrBC,EAAAA,QAAQ,GAAG,MAAM;EACjBC,KAAK;EACLC,OAAO;EACPC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACR,GAAGC;AAAS,CACb,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;AAEtB,EAAA,oBACEC,GAAA,CAACC;AACC;AAAA,IAAA;AACAJ,IAAAA,GAAG,EAAEA,GAAI;AACTR,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,QAAQ,EAAEA,QAAS;IACnBI,SAAS,EAAEQ,IAAI,CAAC,YAAY,EAAE,eAAeb,SAAS,CAAA,CAAE,EAAEK,SAAS,CAAE;AAAA,IAAA,GACjEE,SAAS;AAAAD,IAAAA,QAAA,eAEbQ,IAAA,CAAA,KAAA,EAAA;AACET,MAAAA,SAAS,EAAEQ,IAAI,CAAC,6BAA6B,EAAE;QAC7C,2CAA2C,EAAE,CAAC,CAACT;AAChD,OAAA,CAAE;AAAAE,MAAAA,QAAA,gBAEHK,GAAA,CAAA,KAAA,EAAA;AAAKN,QAAAA,SAAS,EAAEQ,IAAI,CAAC,2BAA2B,CAAE;AAAAP,QAAAA,QAAA,EAAEJ;OAAW,CAC/D,EAACI,QAAQ,EACRF,SAAS,iBACRO,GAAA,CAACI,UAAU,EAAA;AACTC,QAAAA,IAAI,EAAE,EAAG;AACTC,QAAAA,QAAQ,EAAC,WAAW;AACpB,QAAA,YAAA,EAAYR,IAAI,CAACS,aAAa,CAACC,gBAAgB,CAACC,SAAS,CAAE;AAC3DC,QAAAA,OAAO,EAAEjB,SAAU;AAAAE,QAAAA,QAAA,eAEnBK,GAAA,CAACW,KAAK,EAAA,EAAA;AACR,OAAY,CACb,EACAnB,OAAO,iBAAIQ,GAAA,CAAA,KAAA,EAAA;AAAKN,QAAAA,SAAS,EAAC,6BAA6B;AAAAC,QAAAA,QAAA,EAAEH;AAAO,OAAM,CAAC;KACrE;AACP,GAAkB,CAAC;AAEvB,CAAC;AAGHL,eAAe,CAACyB,WAAW,GAAG,iBAAiB;;;;"}
+{"version":3,"file":"PrimitivePrompt.mjs","sources":["../../../src/prompt/PrimitivePrompt/PrimitivePrompt.tsx"],"sourcesContent":["import { Cross } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport SentimentSurface, { Emphasis, Sentiment } from '../../sentimentSurface';\nimport IconButton from '../../iconButton';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../../common/closeButton/CloseButton.messages';\nimport { forwardRef, HTMLAttributes, ReactNode } from 'react';\n\nexport type PrimitivePromptProps = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The sentiment determines the colour scheme.\n   * @default success\n   */\n  sentiment?: Sentiment;\n  /**\n   * The emphasis level affecting background and text contrast.\n   * @default 'base'\n   */\n  emphasis?: Emphasis;\n  /**\n   * Media to be displayed on the prompt (icon/image/etc).\n   */\n  media: ReactNode;\n  /**\n   * Any actions to be displayed on the prompt.\n   */\n  actions?: ReactNode;\n  /**\n   * Handler called when the close button is clicked. If not provided, then the close button is hidden.\n   */\n  onDismiss?: () => void;\n  /**\n   * Test ID for testing tools\n   */\n  'data-testid'?: string;\n};\n\n/**\n * PrimitivePrompt is a low-level component that provides the structure, sentiment support and styling for various prompts.\n * Uses several css variables to handle styling from within the consuming component, e.g. --Prompt-padding-x. */\nexport const PrimitivePrompt = forwardRef<HTMLDivElement, PrimitivePromptProps>(\n  (\n    {\n      sentiment = 'success',\n      emphasis = 'base',\n      media,\n      actions,\n      onDismiss,\n      className,\n      children,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const intl = useIntl();\n\n    return (\n      <SentimentSurface\n        // @ts-expect-error - SentimentSurface forwardRef types don't expose ref in props\n        ref={ref}\n        sentiment={sentiment}\n        emphasis={emphasis}\n        className={clsx('wds-prompt', `wds-prompt--${sentiment}`, className)}\n        {...restProps}\n      >\n        <div\n          className={clsx('wds-prompt__content-wrapper', {\n            'wds-prompt__content-wrapper--with-dismiss': !!onDismiss,\n          })}\n        >\n          <div className={clsx('wds-prompt__media-wrapper')}>{media}</div>\n          {children}\n          {onDismiss && (\n            <IconButton\n              size={24}\n              priority=\"secondary\"\n              aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n              onClick={onDismiss}\n            >\n              <Cross />\n            </IconButton>\n          )}\n          {actions && <div className=\"wds-prompt__actions-wrapper\">{actions}</div>}\n        </div>\n      </SentimentSurface>\n    );\n  },\n);\n\nPrimitivePrompt.displayName = 'PrimitivePrompt';\n"],"names":["PrimitivePrompt","forwardRef","sentiment","emphasis","media","actions","onDismiss","className","children","restProps","ref","intl","useIntl","_jsx","SentimentSurface","clsx","_jsxs","IconButton","size","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross","displayName"],"mappings":";;;;;;;;;AAwCO,MAAMA,eAAe,gBAAGC,UAAU,CACvC,CACE;AACEC,EAAAA,SAAS,GAAG,SAAS;AACrBC,EAAAA,QAAQ,GAAG,MAAM;EACjBC,KAAK;EACLC,OAAO;EACPC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACR,GAAGC;AAAS,CACb,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;AAEtB,EAAA,oBACEC,GAAA,CAACC;AACC;AAAA,IAAA;AACAJ,IAAAA,GAAG,EAAEA,GAAI;AACTR,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,QAAQ,EAAEA,QAAS;IACnBI,SAAS,EAAEQ,IAAI,CAAC,YAAY,EAAE,eAAeb,SAAS,CAAA,CAAE,EAAEK,SAAS,CAAE;AAAA,IAAA,GACjEE,SAAS;AAAAD,IAAAA,QAAA,eAEbQ,IAAA,CAAA,KAAA,EAAA;AACET,MAAAA,SAAS,EAAEQ,IAAI,CAAC,6BAA6B,EAAE;QAC7C,2CAA2C,EAAE,CAAC,CAACT;AAChD,OAAA,CAAE;AAAAE,MAAAA,QAAA,gBAEHK,GAAA,CAAA,KAAA,EAAA;AAAKN,QAAAA,SAAS,EAAEQ,IAAI,CAAC,2BAA2B,CAAE;AAAAP,QAAAA,QAAA,EAAEJ;OAAW,CAC/D,EAACI,QAAQ,EACRF,SAAS,iBACRO,GAAA,CAACI,UAAU,EAAA;AACTC,QAAAA,IAAI,EAAE,EAAG;AACTC,QAAAA,QAAQ,EAAC,WAAW;AACpB,QAAA,YAAA,EAAYR,IAAI,CAACS,aAAa,CAACC,gBAAgB,CAACC,SAAS,CAAE;AAC3DC,QAAAA,OAAO,EAAEjB,SAAU;AAAAE,QAAAA,QAAA,eAEnBK,GAAA,CAACW,KAAK,EAAA,EAAA;AACR,OAAY,CACb,EACAnB,OAAO,iBAAIQ,GAAA,CAAA,KAAA,EAAA;AAAKN,QAAAA,SAAS,EAAC,6BAA6B;AAAAC,QAAAA,QAAA,EAAEH;AAAO,OAAM,CAAC;KACrE;AACP,GAAkB,CAAC;AAEvB,CAAC;AAGHL,eAAe,CAACyB,WAAW,GAAG,iBAAiB;;;;"}

package/build/styles/main.css

@@ -31706,8 +31706,8 @@ html:not([dir="rtl"]) .np-navigation-option {
   gap: 16px;
   gap: var(--Prompt-gap, var(--size-16));
   word-wrap: break-word;
-  padding: 8px;
-  padding: var(--Prompt-padding, var(--padding-x-small));
+  padding: 8px 8px;
+  padding: var(--Prompt-padding-y, var(--padding-x-small)) var(--Prompt-padding-x, var(--padding-x-small));
   text-align: left;
   word-break: break-word;
   width: 100%;
@@ -31759,7 +31759,8 @@ html:not([dir="rtl"]) .np-navigation-option {
 
 .wds-inline-prompt {
   --Prompt-gap: calc(var(--size-12) / 2);
-  --Prompt-padding: calc(var(--padding-x-small) / 2) var(--padding-x-small);
+  --Prompt-padding-x: var(--padding-x-small);
+  --Prompt-padding-y: calc(var(--padding-x-small) / 2);
   display: inline-flex;
   border-radius: 10px;
   border-radius: var(--radius-small);
@@ -31829,7 +31830,8 @@ html:not([dir="rtl"]) .np-navigation-option {
 .wds-info-prompt {
   --Prompt-border-radius: var(--radius-medium);
   --Prompt-gap: var(--size-8);
-  --Prompt-padding: var(--size-12);
+  --Prompt-padding-x: var(--size-12);
+  --Prompt-padding-y: var(--size-12);
 }
 
 .wds-info-prompt__content {
@@ -31895,7 +31897,8 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 
 .wds-action-prompt {
-  --Prompt-padding: var(--size-16);
+  --Prompt-padding-x: var(--size-16);
+  --Prompt-padding-y: var(--size-16);
   --Prompt-actions-gap: var(--size-8);
   --Prompt-gap: var(--size-10) var(--size-16);
   --Prompt-border-radius: var(--radius-large);
@@ -31930,11 +31933,13 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 
 .wds-critical-banner {
-  --Prompt-padding: var(--size-16);
+  --Prompt-padding-x: var(--wds-container-padding-inline);
+  --Prompt-padding-y: var(--size-16);
   --Prompt-actions-gap: var(--size-8);
   --Prompt-gap: var(--size-10) var(--size-16);
   --Prompt-border-radius: 0;
   container-type: inline-size;
+  position: relative;
   --critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
   --critical-banner-duration: 150ms;
   /* Override PrimitivePrompt's --screen-sm-max actions behaviour:
@@ -32075,6 +32080,53 @@ html:not([dir="rtl"]) .np-navigation-option {
   }
 }
 
+.wds-critical-banner-overhang-query {
+  container-name: critical-banner-overhang;
+  container-type: inline-size;
+  inline-size: 100%;
+}
+
+.wds-critical-banner__entry-mask {
+  display: grid;
+  grid-template-rows: 0fr;
+  overflow: hidden;
+  animation: wds-critical-banner-reveal-height 400ms cubic-bezier(0.3, 0, 0.1, 1) 500ms both;
+}
+
+@container critical-banner-overhang (max-width: 600px) {
+  .wds-critical-banner__entry-mask {
+    --critical-banner-mobile-overhang-size: 32px;
+  }
+  .wds-critical-banner__entry-mask .wds-critical-banner-overhang {
+    margin-bottom: var(--critical-banner-mobile-overhang-size);
+  }
+  .wds-critical-banner__entry-mask .wds-critical-banner-overhang::after {
+    content: "";
+    position: absolute;
+    right: 0;
+    bottom: calc(-1 * var(--critical-banner-mobile-overhang-size));
+    left: 0;
+    height: var(--critical-banner-mobile-overhang-size);
+    pointer-events: none;
+    background: radial-gradient(circle at 100% 100%, transparent var(--critical-banner-mobile-overhang-size), var(--color-sentiment-background-surface) var(--critical-banner-mobile-overhang-size)) 0 0 / var(--critical-banner-mobile-overhang-size) var(--critical-banner-mobile-overhang-size) no-repeat, radial-gradient(circle at 0% 100%, transparent var(--critical-banner-mobile-overhang-size), var(--color-sentiment-background-surface) var(--critical-banner-mobile-overhang-size)) 100% 0 / var(--critical-banner-mobile-overhang-size) var(--critical-banner-mobile-overhang-size) no-repeat;
+  }
+}
+
+.wds-critical-banner__entry-track {
+  min-height: 0;
+}
+
+@keyframes wds-critical-banner-reveal-height {
+  from {
+    grid-template-rows: 0fr;
+    overflow: hidden;
+  }
+  to {
+    grid-template-rows: 1fr;
+    overflow: visible;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .wds-critical-banner__description,
   .wds-critical-banner__title,
@@ -32082,6 +32134,11 @@ html:not([dir="rtl"]) .np-navigation-option {
   .wds-critical-banner__toggle {
     transition: none !important;
   }
+  .wds-critical-banner__entry-mask {
+    animation: none;
+    grid-template-rows: 1fr;
+    overflow: visible;
+  }
 }
 
 .wds-expander-toggle {

package/build/styles/prompt/ActionPrompt/ActionPrompt.css

@@ -1,5 +1,6 @@
 .wds-action-prompt {
-  --Prompt-padding: var(--size-16);
+  --Prompt-padding-x: var(--size-16);
+  --Prompt-padding-y: var(--size-16);
   --Prompt-actions-gap: var(--size-8);
   --Prompt-gap: var(--size-10) var(--size-16);
   --Prompt-border-radius: var(--radius-large);

package/build/styles/prompt/CriticalBanner/CriticalBanner.css

@@ -1,9 +1,11 @@
 .wds-critical-banner {
-  --Prompt-padding: var(--size-16);
+  --Prompt-padding-x: var(--wds-container-padding-inline);
+  --Prompt-padding-y: var(--size-16);
   --Prompt-actions-gap: var(--size-8);
   --Prompt-gap: var(--size-10) var(--size-16);
   --Prompt-border-radius: 0;
   container-type: inline-size;
+  position: relative;
   --critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
   --critical-banner-duration: 150ms;
   /* Override PrimitivePrompt's --screen-sm-max actions behaviour:
@@ -124,6 +126,48 @@
     min-width: fit-content;
   }
 }
+.wds-critical-banner-overhang-query {
+  container-name: critical-banner-overhang;
+  container-type: inline-size;
+  inline-size: 100%;
+}
+.wds-critical-banner__entry-mask {
+  display: grid;
+  grid-template-rows: 0fr;
+  overflow: hidden;
+  animation: wds-critical-banner-reveal-height 400ms cubic-bezier(0.3, 0, 0.1, 1) 500ms both;
+}
+@container critical-banner-overhang (max-width: 600px) {
+  .wds-critical-banner__entry-mask {
+    --critical-banner-mobile-overhang-size: 32px;
+  }
+  .wds-critical-banner__entry-mask .wds-critical-banner-overhang {
+    margin-bottom: var(--critical-banner-mobile-overhang-size);
+  }
+  .wds-critical-banner__entry-mask .wds-critical-banner-overhang::after {
+    content: "";
+    position: absolute;
+    right: 0;
+    bottom: calc(-1 * var(--critical-banner-mobile-overhang-size));
+    left: 0;
+    height: var(--critical-banner-mobile-overhang-size);
+    pointer-events: none;
+    background: radial-gradient(circle at 100% 100%, transparent var(--critical-banner-mobile-overhang-size), var(--color-sentiment-background-surface) var(--critical-banner-mobile-overhang-size)) 0 0 / var(--critical-banner-mobile-overhang-size) var(--critical-banner-mobile-overhang-size) no-repeat, radial-gradient(circle at 0% 100%, transparent var(--critical-banner-mobile-overhang-size), var(--color-sentiment-background-surface) var(--critical-banner-mobile-overhang-size)) 100% 0 / var(--critical-banner-mobile-overhang-size) var(--critical-banner-mobile-overhang-size) no-repeat;
+  }
+}
+.wds-critical-banner__entry-track {
+  min-height: 0;
+}
+@keyframes wds-critical-banner-reveal-height {
+  from {
+    grid-template-rows: 0fr;
+    overflow: hidden;
+  }
+  to {
+    grid-template-rows: 1fr;
+    overflow: visible;
+  }
+}
 @media (prefers-reduced-motion: reduce) {
   .wds-critical-banner__description,
   .wds-critical-banner__title,
@@ -131,4 +175,9 @@
   .wds-critical-banner__toggle {
     transition: none !important;
   }
+  .wds-critical-banner__entry-mask {
+    animation: none;
+    grid-template-rows: 1fr;
+    overflow: visible;
+  }
 }

package/build/styles/prompt/InfoPrompt/InfoPrompt.css

@@ -1,7 +1,8 @@
 .wds-info-prompt {
   --Prompt-border-radius: var(--radius-medium);
   --Prompt-gap: var(--size-8);
-  --Prompt-padding: var(--size-12);
+  --Prompt-padding-x: var(--size-12);
+  --Prompt-padding-y: var(--size-12);
 }
 .wds-info-prompt__content {
   display: flex;

package/build/styles/prompt/InlinePrompt/InlinePrompt.css

@@ -1,6 +1,7 @@
 .wds-inline-prompt {
   --Prompt-gap: calc(var(--size-12) / 2);
-  --Prompt-padding: calc(var(--padding-x-small) / 2) var(--padding-x-small);
+  --Prompt-padding-x: var(--padding-x-small);
+  --Prompt-padding-y: calc(var(--padding-x-small) / 2);
   display: inline-flex;
   border-radius: 10px;
   border-radius: var(--radius-small);

package/build/styles/prompt/PrimitivePrompt/PrimitivePrompt.css

@@ -5,8 +5,8 @@
   gap: 16px;
   gap: var(--Prompt-gap, var(--size-16));
   word-wrap: break-word;
-  padding: 8px;
-  padding: var(--Prompt-padding, var(--padding-x-small));
+  padding: 8px 8px;
+  padding: var(--Prompt-padding-y, var(--padding-x-small)) var(--Prompt-padding-x, var(--padding-x-small));
   text-align: left;
   word-break: break-word;
   width: 100%;

package/build/types/container/Container.d.ts

@@ -1,11 +1,11 @@
-import type { ComponentPropsWithoutRef, ElementType, PropsWithChildren } from 'react';
+import type { ComponentPropsWithRef, ElementType, PropsWithChildren } from 'react';
 import { CommonProps } from '../common';
 type ContainerOwnProps<T extends ElementType> = CommonProps & {
     /** Controls the maximum width: `fluid` (100%), `standard` (1160px), `narrow` (840px), `compact` (600px). @default 'standard' */
     size?: 'fluid' | 'standard' | 'narrow' | 'compact';
     as?: T;
 };
-export type ContainerProps<T extends ElementType = 'div'> = PropsWithChildren<ContainerOwnProps<T>> & Omit<ComponentPropsWithoutRef<T>, keyof ContainerOwnProps<T> | 'children'>;
+export type ContainerProps<T extends ElementType = 'div'> = PropsWithChildren<ContainerOwnProps<T>> & Omit<ComponentPropsWithRef<T>, keyof ContainerOwnProps<T> | 'children'>;
 /**
  * Centers page content within a responsive max-width boundary, with automatic horizontal padding that adapts to the viewport size.
  *

package/build/types/container/Container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../src/container/Container.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEtF,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,KAAK,iBAAiB,CAAC,CAAC,SAAS,WAAW,IAAI,WAAW,GAAG;IAC5D,gIAAgI;IAChI,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;IACnD,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,CAAC;AAEF,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,iBAAiB,CAC3E,iBAAiB,CAAC,CAAC,CAAC,CACrB,GACC,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,iBAAiB,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC;AAE7E;;;;GAIG;AACH,QAAA,MAAM,SAAS,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,kDAM/C,cAAc,CAAC,CAAC,CAAC,gCAOnB,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../src/container/Container.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEnF,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,KAAK,iBAAiB,CAAC,CAAC,SAAS,WAAW,IAAI,WAAW,GAAG;IAC5D,gIAAgI;IAChI,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;IACnD,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,CAAC;AAEF,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,iBAAiB,CAC3E,iBAAiB,CAAC,CAAC,CAAC,CACrB,GACC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,MAAM,iBAAiB,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC;AAE1E;;;;GAIG;AACH,QAAA,MAAM,SAAS,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,kDAM/C,cAAc,CAAC,CAAC,CAAC,gCAOnB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/build/types/iconButton/IconButton.d.ts

@@ -16,6 +16,6 @@ declare const IconButton: import("react").ForwardRefExoticComponent<{
     /** @default 'default' */
     type?: "default" | "negative";
     'data-testid'?: string;
-} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "href" | "target"> & Pick<ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "onClick"> & Pick<HTMLAttributes<HTMLDivElement>, "id" | "className" | "tabIndex" | "role" | "aria-label" | "children"> & import("react").RefAttributes<unknown>>;
+} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "target" | "href"> & Pick<ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "onClick"> & Pick<HTMLAttributes<HTMLDivElement>, "id" | "className" | "tabIndex" | "role" | "aria-label" | "children"> & import("react").RefAttributes<unknown>>;
 export default IconButton;
 //# sourceMappingURL=IconButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CriticalBanner.d.ts","sourceRoot":"","sources":["../../../../src/prompt/CriticalBanner/CriticalBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAmB,MAAM,OAAO,CAAC;AAMnD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE3E,OAAO,EAAqB,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAKxE,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,EAAE,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QAC1D,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;IACF,eAAe,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QACnE,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;IACF,SAAS,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,WAAW,CAAC,EAAE,aAAa,CAAC,CAAC;IACtE;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,GAAG,IAAI,CAAC,oBAAoB,EAAE,IAAI,GAAG,WAAW,GAAG,aAAa,CAAC,CAAC;AAEnE;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GAAI,4IAY5B,mBAAmB,gCAqHrB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"CriticalBanner.d.ts","sourceRoot":"","sources":["../../../../src/prompt/CriticalBanner/CriticalBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,SAAS,EAAmB,MAAM,OAAO,CAAC;AAOhE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE3E,OAAO,EAAqB,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAKxE,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,EAAE,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QAC1D,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;IACF,eAAe,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QACnE,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;IACF,SAAS,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,WAAW,CAAC,EAAE,aAAa,CAAC,CAAC;IACtE;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,GAAG,IAAI,CAAC,oBAAoB,EAAE,IAAI,GAAG,WAAW,GAAG,aAAa,CAAC,CAAC;AAEnE;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GAAI,4IAY5B,mBAAmB,gCAgIrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -30,7 +30,7 @@ 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. */
+ * Uses several css variables to handle styling from within the consuming component, e.g. --Prompt-padding-x. */
 export declare const PrimitivePrompt: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     /**
      * The sentiment determines the colour scheme.

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,QAAQ,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI/E,OAAO,EAAc,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,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;IA/B1B;;;OAGG;gBACS,SAAS;IACrB;;;OAGG;eACQ,QAAQ;IACnB;;OAEG;WACI,SAAS;IAChB;;OAEG;cACO,SAAS;IACnB;;OAEG;gBACS,MAAM,IAAI;IACtB;;OAEG;oBACa,MAAM;kDAqDvB,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,EAAc,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,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;;gHAEgH;AAChH,eAAO,MAAM,eAAe;IA/B1B;;;OAGG;gBACS,SAAS;IACrB;;;OAGG;eACQ,QAAQ;IACnB;;OAEG;WACI,SAAS;IAChB;;OAEG;cACO,SAAS;IACnB;;OAEG;gBACS,MAAM,IAAI;IACtB;;OAEG;oBACa,MAAM;kDAqDvB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.147.0",
+  "version": "46.148.1",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/accordion/Accordion.story.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { FastFlag as FastFlagIcon, CardWise as CardWiseIcon } from '@transferwise/icons';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 
 import { Scroll, Size } from '../common';
 import Modal from '../modal';
@@ -89,6 +90,30 @@ const meta: Meta<typeof Accordion> = {
 export default meta;
 type Story = StoryObj<typeof Accordion>;
 
+export const Sandbox = createSandboxStory({
+  code: `<Accordion
+  indexOpen={1}
+  items={[
+    {
+      title: 'Item 1',
+      content: 'I can be text',
+      icon: <Freeze size={24} />,
+    },
+    {
+      title: 'Item 2 with icon',
+      content: <span>I can be a node</span>,
+      icon: <HappyEmoji size={24} />,
+    },
+    {
+      title: 'Item 3',
+      content: 'I can be text',
+      icon: <New size={24} />,
+    },
+  ]}
+/>`,
+  scope: globalScope,
+});
+
 export const Default: Story = {
   args: {
     indexOpen: 0,

package/src/avatarLayout/AvatarLayout.story.tsx

@@ -3,6 +3,7 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import AvatarLayout, { AvatarLayoutProps } from '.';
 import { Freeze } from '@transferwise/icons';
 import { Flag } from '@wise/art';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import Body from '../body';
 import SentimentSurface from '../sentimentSurface';
 
@@ -13,6 +14,15 @@ export default {
 
 type Story = StoryObj<typeof AvatarLayout>;
 
+export const Sandbox = createSandboxStory({
+  code: `<AvatarLayout
+  size={48}
+  orientation="diagonal"
+  avatars={[{ asset: <Flag code="br" /> }, { asset: <Flag code="jp" /> }]}
+/>`,
+  scope: globalScope,
+});
+
 const sizes: AvatarLayoutProps['size'][] = [16, 24, 32, 40, 48, 56, 72, 88, 96];
 
 export const Diagonal: Story = {

package/src/avatarView/AvatarView.story.tsx

@@ -17,6 +17,7 @@ import {
 } from '@transferwise/icons';
 import AvatarView, { AvatarViewProps } from '.';
 import { Flag } from '@wise/art';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import { ProfileType } from '../common';
 import Body from '../body';
 import SentimentSurface from '../sentimentSurface';
@@ -28,6 +29,13 @@ export default {
 
 type Story = StoryObj<typeof AvatarView>;
 
+export const Sandbox = createSandboxStory({
+  code: `<AvatarView size={48} badge={{ flagCode: 'GBP' }}>
+  <Freeze />
+</AvatarView>`,
+  scope: globalScope,
+});
+
 const profileName1 = 'Wolter White';
 const profileName2 = 'Tyler Durden';
 const sizes: AvatarViewProps['size'][] = [16, 24, 32, 40, 48, 56, 72, 88, 96];

package/src/body/Body.story.tsx

@@ -2,12 +2,23 @@ import { Typography } from '../common/propsValues/typography';
 import Title from '../title';
 
 import Body from './Body';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 
 export default {
   title: 'Typography/Body',
   component: Body,
 };
 
+export const Sandbox = createSandboxStory({
+  code: `<Body type="body-default">
+  We're building the world's most international account.
+</Body>`,
+  scope: globalScope,
+});
+
 export const Basic = () => {
   return (
     <>
@@ -126,3 +137,4 @@ export const Basic = () => {
     </>
   );
 };
+

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

@@ -322,7 +322,13 @@ export const Playground: StoryObj<PreviewStoryArgs> = {
 };
 
 export const Sandbox = createSandboxStory({
-  code: `<Button v2 size="md" onClick={console.log}>
+  code: `<Button
+  v2
+  priority="primary"
+  sentiment="default"
+  size="md"
+  addonEnd={{ type: 'icon', value: <ArrowRight /> }}
+>
   Click me
 </Button>`,
   scope: globalScope,

package/src/calendar/Calendar.story.tsx

@@ -1,6 +1,10 @@
 import { useState } from 'react';
 import { StoryObj } from '@storybook/react-webpack5';
 import { userEvent, within } from 'storybook/test';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 import Calendar, { type CalendarProps } from './Calendar';
 import Modal from '../modal';
 import Button from '../button';
@@ -9,13 +13,6 @@ import Button from '../button';
 export default {
   component: Calendar,
   title: 'Forms/Calendar',
-  decorators: [
-    (Story: React.ComponentType) => (
-      <div style={{ maxWidth: 500, margin: '0 auto' }}>
-        <Story />
-      </div>
-    ),
-  ],
   argTypes: {
     monthFormat: { control: 'select', options: ['long', 'short'] },
     min: { control: 'date' },
@@ -31,6 +28,21 @@ theFuture.setUTCDate(epoch.getUTCDate() + 10);
 const thePast = new Date(epoch);
 thePast.setUTCDate(epoch.getUTCDate() - 10);
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [value, setValue] = React.useState(new Date('2024-06-15'));
+
+  return (
+    <Calendar
+      monthFormat="long"
+      value={value}
+      onChange={(date) => setValue(date)}
+    />
+  );
+};`,
+  scope: { ...globalScope, Calendar },
+});
+
 export const Basic: Story = {
   render: (args: CalendarProps) => {
     const [value, setValue] = useState<Date | null>(epoch);

package/src/carousel/Carousel.story.tsx

@@ -1,5 +1,6 @@
 import type { Args } from '@storybook/react-webpack5';
 import { Illustration } from '@wise/art';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 
 import Display from '../display';
 
@@ -53,6 +54,40 @@ const carouselCards: CarouselCard[] = [
   },
 ];
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const cards = [
+    {
+      id: 'card-1',
+      type: 'button',
+      onClick: console.log,
+      content: (
+        <div className="d-flex p-a-1 flex-column align-items-center">
+          <Illustration disablePadding name="globe" size="small" alt="" />
+        </div>
+      ),
+    },
+    {
+      id: 'card-2',
+      type: 'promo',
+      href: '#',
+      title: 'Wise',
+      description: 'The best way to move money internationally',
+    },
+    {
+      id: 'card-3',
+      type: 'anchor',
+      href: '#',
+      hrefTarget: '_blank',
+      content: <Display type="display-small">Get Quick Pay</Display>,
+    },
+  ];
+
+  return <Carousel header="Carousel heading" cards={cards} />;
+};`,
+  scope: globalScope,
+});
+
 export const CarouselDefault = {
   render: (args: Args) => {
     return <Carousel header="Pretty nifty stuff" cards={carouselCards} {...args} />;

package/src/checkbox/Checkbox.story.tsx

@@ -1,6 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
 
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 import { Field } from '../field/Field';
 
 import Checkbox from './Checkbox';
@@ -19,6 +23,22 @@ export default meta;
 
 type Story = StoryObj<typeof Checkbox>;
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [checked, setChecked] = React.useState(false);
+
+  return (
+    <Checkbox
+      label="I agree to the terms and conditions"
+      secondary="Please read before accepting"
+      checked={checked}
+      onChange={() => setChecked((prev) => !prev)}
+    />
+  );
+};`,
+  scope: globalScope,
+});
+
 export const Basic: Story = {};
 
 export const Multiple: Story = {

package/src/checkboxButton/CheckboxButton.story.tsx

@@ -3,6 +3,7 @@ import { fn } from 'storybook/test';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import { storySourceWithoutNoise } from '../../.storybook/helpers';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import CheckboxButton, { type CheckboxButtonProps } from './CheckboxButton';
 import { Label } from '../label/Label';
 
@@ -89,6 +90,21 @@ export const Playground: Story = storySourceWithoutNoise({
   },
 });
 
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [checked, setChecked] = React.useState(true);
+
+  return (
+    <CheckboxButton
+      aria-label="Toggle email updates"
+      checked={checked}
+      onChange={(event) => setChecked(event.currentTarget.checked)}
+    />
+  );
+};`,
+  scope: globalScope,
+});
+
 /** Disabled state — checked and unchecked. */
 export const Disabled: Story = {
   decorators: [withColumnLayout],

package/src/chevron/Chevron.story.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { createSandboxStory } from '../../.storybook/components/sandbox/SandboxEditor';
 
 import Chevron from './Chevron';
 
@@ -9,6 +10,11 @@ export default {
 
 type Story = StoryObj<typeof Chevron>;
 
+export const Sandbox = createSandboxStory({
+  code: `<Chevron orientation="bottom" size="md" />`,
+  scope: {Chevron},
+});
+
 export const Basic: Story = {
   args: {
     orientation: 'top',