@transferwise/components 46.116.1 → 46.117.1

package/build/styles/sentimentSurface/SentimentSurface.css

@@ -1,5 +1,15 @@
+.wds-sentiment-surface {
+  --ring-outline-color: var(--color-sentiment-content-primary, var(--color-content-primary));
+}
+.wds-sentiment-surface--hasBaseStyles {
+  background-color: var(--color-sentiment-background-surface);
+  color: var(--color-sentiment-content-primary);
+}
 .np-theme-personal .wds-sentiment-surface-negative-base,
-.np-theme-personal--bright-green .wds-sentiment-surface-negative-base {
+.np-theme-business .wds-sentiment-surface-negative-base,
+.np-theme-platform .wds-sentiment-surface-negative-base,
+.np-theme-personal--bright-green .wds-sentiment-surface-negative-base,
+.np-theme-business--bright-green .wds-sentiment-surface-negative-base {
   --color-sentiment-content-primary: #CB272F;
   --color-sentiment-content-primary-hover: #B8232B;
   --color-sentiment-content-primary-active: #A72027;
@@ -20,7 +30,10 @@
   --color-sentiment-background-surface-active: #F8D8D8;
 }
 .np-theme-personal .wds-sentiment-surface-negative-elevated,
-.np-theme-personal--bright-green .wds-sentiment-surface-negative-elevated {
+.np-theme-business .wds-sentiment-surface-negative-elevated,
+.np-theme-platform .wds-sentiment-surface-negative-elevated,
+.np-theme-personal--bright-green .wds-sentiment-surface-negative-elevated,
+.np-theme-business--bright-green .wds-sentiment-surface-negative-elevated {
   --color-sentiment-content-primary: #FFFFFF;
   --color-sentiment-content-primary-hover: #F5CCCC;
   --color-sentiment-content-primary-active: #F1B7B7;
@@ -32,7 +45,7 @@
   --color-sentiment-interactive-secondary-active: #A72027;
   --color-sentiment-interactive-secondary-neutral: #9B141B;
   --color-sentiment-interactive-secondary-neutral-hover: #831116;
-  --color-sentiment-interactive-secondary-neutral-active: #6D0E13;
+  --color-sentiment-interactive-secondary-neutral-active: #6D0e13;
   --color-sentiment-interactive-control: #CB272F;
   --color-sentiment-interactive-control-hover: #B8232B;
   --color-sentiment-interactive-control-active: #A72027;
@@ -41,7 +54,10 @@
   --color-sentiment-background-surface-active: #A72027;
 }
 .np-theme-personal--dark .wds-sentiment-surface-negative-base,
-.np-theme-personal--forest-green .wds-sentiment-surface-negative-base {
+.np-theme-business--dark .wds-sentiment-surface-negative-base,
+.np-theme-personal--forest-green .wds-sentiment-surface-negative-base,
+.np-theme-business--forest-green .wds-sentiment-surface-negative-base,
+.np-theme-platform--forest-green .wds-sentiment-surface-negative-base {
   --color-sentiment-content-primary: #FFA8AD;
   --color-sentiment-content-primary-hover: #FFBDC0;
   --color-sentiment-content-primary-active: #FFD1D3;
@@ -62,7 +78,10 @@
   --color-sentiment-background-surface-active: #761418;
 }
 .np-theme-personal--dark .wds-sentiment-surface-negative-elevated,
-.np-theme-personal--forest-green .wds-sentiment-surface-negative-elevated {
+.np-theme-business--dark .wds-sentiment-surface-negative-elevated,
+.np-theme-personal--forest-green .wds-sentiment-surface-negative-elevated,
+.np-theme-business--forest-green .wds-sentiment-surface-negative-elevated,
+.np-theme-platform--forest-green .wds-sentiment-surface-negative-elevated {
   --color-sentiment-content-primary: #410B0D;
   --color-sentiment-content-primary-hover: #641115;
   --color-sentiment-content-primary-active: #761418;
@@ -83,7 +102,10 @@
   --color-sentiment-background-surface-active: #FFD1D3;
 }
 .np-theme-personal .wds-sentiment-surface-warning-base,
-.np-theme-personal--bright-green .wds-sentiment-surface-warning-base {
+.np-theme-business .wds-sentiment-surface-warning-base,
+.np-theme-platform .wds-sentiment-surface-warning-base,
+.np-theme-personal--bright-green .wds-sentiment-surface-warning-base,
+.np-theme-business--bright-green .wds-sentiment-surface-warning-base {
   --color-sentiment-content-primary: #4A3B1C;
   --color-sentiment-content-primary-hover: #302612;
   --color-sentiment-content-primary-active: #2C2311;
@@ -104,7 +126,10 @@
   --color-sentiment-background-surface-active: #FFE98F;
 }
 .np-theme-personal .wds-sentiment-surface-warning-elevated,
-.np-theme-personal--bright-green .wds-sentiment-surface-warning-elevated {
+.np-theme-business .wds-sentiment-surface-warning-elevated,
+.np-theme-platform .wds-sentiment-surface-warning-elevated,
+.np-theme-personal--bright-green .wds-sentiment-surface-warning-elevated,
+.np-theme-business--bright-green .wds-sentiment-surface-warning-elevated {
   --color-sentiment-content-primary: #4A3B1C;
   --color-sentiment-content-primary-hover: #302612;
   --color-sentiment-content-primary-active: #2C2311;
@@ -125,7 +150,10 @@
   --color-sentiment-background-surface-active: #FFBB00;
 }
 .np-theme-personal--dark .wds-sentiment-surface-warning-base,
-.np-theme-personal--forest-green .wds-sentiment-surface-warning-base {
+.np-theme-business--dark .wds-sentiment-surface-warning-base,
+.np-theme-personal--forest-green .wds-sentiment-surface-warning-base,
+.np-theme-business--forest-green .wds-sentiment-surface-warning-base,
+.np-theme-platform--forest-green .wds-sentiment-surface-warning-base {
   --color-sentiment-content-primary: #FADC65;
   --color-sentiment-content-primary-hover: #F9D648;
   --color-sentiment-content-primary-active: #F8CD20;
@@ -146,7 +174,10 @@
   --color-sentiment-background-surface-active: #665D3D;
 }
 .np-theme-personal--dark .wds-sentiment-surface-warning-elevated,
-.np-theme-personal--forest-green .wds-sentiment-surface-warning-elevated {
+.np-theme-business--dark .wds-sentiment-surface-warning-elevated,
+.np-theme-personal--forest-green .wds-sentiment-surface-warning-elevated,
+.np-theme-business--forest-green .wds-sentiment-surface-warning-elevated,
+.np-theme-platform--forest-green .wds-sentiment-surface-warning-elevated {
   --color-sentiment-content-primary: #3A3523;
   --color-sentiment-content-primary-hover: #504930;
   --color-sentiment-content-primary-active: #665D3D;
@@ -167,7 +198,10 @@
   --color-sentiment-background-surface-active: #F8CD20;
 }
 .np-theme-personal .wds-sentiment-surface-success-base,
-.np-theme-personal--bright-green .wds-sentiment-surface-success-base {
+.np-theme-business .wds-sentiment-surface-success-base,
+.np-theme-platform .wds-sentiment-surface-success-base,
+.np-theme-personal--bright-green .wds-sentiment-surface-success-base,
+.np-theme-business--bright-green .wds-sentiment-surface-success-base {
   --color-sentiment-content-primary: #054D28;
   --color-sentiment-content-primary-hover: #043A1E;
   --color-sentiment-content-primary-active: #022614;
@@ -188,7 +222,10 @@
   --color-sentiment-background-surface-active: #C5EDAB;
 }
 .np-theme-personal .wds-sentiment-surface-success-elevated,
-.np-theme-personal--bright-green .wds-sentiment-surface-success-elevated {
+.np-theme-business .wds-sentiment-surface-success-elevated,
+.np-theme-platform .wds-sentiment-surface-success-elevated,
+.np-theme-personal--bright-green .wds-sentiment-surface-success-elevated,
+.np-theme-business--bright-green .wds-sentiment-surface-success-elevated {
   --color-sentiment-content-primary: #E2F6D5;
   --color-sentiment-content-primary-hover: #D3F2C0;
   --color-sentiment-content-primary-active: #C5EDAB;
@@ -209,7 +246,10 @@
   --color-sentiment-background-surface-active: #022614;
 }
 .np-theme-personal--dark .wds-sentiment-surface-success-base,
-.np-theme-personal--forest-green .wds-sentiment-surface-success-base {
+.np-theme-business--dark .wds-sentiment-surface-success-base,
+.np-theme-personal--forest-green .wds-sentiment-surface-success-base,
+.np-theme-business--forest-green .wds-sentiment-surface-success-base,
+.np-theme-platform--forest-green .wds-sentiment-surface-success-base {
   --color-sentiment-content-primary: #BAE5A0;
   --color-sentiment-content-primary-hover: #C8EAB3;
   --color-sentiment-content-primary-active: #D6F0C7;
@@ -230,7 +270,10 @@
   --color-sentiment-background-surface-active: #3E4A36;
 }
 .np-theme-personal--dark .wds-sentiment-surface-success-elevated,
-.np-theme-personal--forest-green .wds-sentiment-surface-success-elevated {
+.np-theme-business--dark .wds-sentiment-surface-success-elevated,
+.np-theme-personal--forest-green .wds-sentiment-surface-success-elevated,
+.np-theme-business--forest-green .wds-sentiment-surface-success-elevated,
+.np-theme-platform--forest-green .wds-sentiment-surface-success-elevated {
   --color-sentiment-content-primary: #252C20;
   --color-sentiment-content-primary-hover: #323B2B;
   --color-sentiment-content-primary-active: #3E4A36;
@@ -251,7 +294,10 @@
   --color-sentiment-background-surface-active: #D6F0C7;
 }
 .np-theme-personal .wds-sentiment-surface-neutral-base,
-.np-theme-personal--bright-green .wds-sentiment-surface-neutral-base {
+.np-theme-business .wds-sentiment-surface-neutral-base,
+.np-theme-platform .wds-sentiment-surface-neutral-base,
+.np-theme-personal--bright-green .wds-sentiment-surface-neutral-base,
+.np-theme-business--bright-green .wds-sentiment-surface-neutral-base {
   --color-sentiment-content-primary: #454745;
   --color-sentiment-content-primary-hover: #353635;
   --color-sentiment-content-primary-active: #232423;
@@ -272,7 +318,10 @@
   --color-sentiment-background-surface-active: #DFDED5;
 }
 .np-theme-personal .wds-sentiment-surface-neutral-elevated,
-.np-theme-personal--bright-green .wds-sentiment-surface-neutral-elevated {
+.np-theme-business .wds-sentiment-surface-neutral-elevated,
+.np-theme-platform .wds-sentiment-surface-neutral-elevated,
+.np-theme-personal--bright-green .wds-sentiment-surface-neutral-elevated,
+.np-theme-business--bright-green .wds-sentiment-surface-neutral-elevated {
   --color-sentiment-content-primary: #F1F1ED;
   --color-sentiment-content-primary-hover: #E7E7E1;
   --color-sentiment-content-primary-active: #DFDED5;
@@ -293,7 +342,10 @@
   --color-sentiment-background-surface-active: #232423;
 }
 .np-theme-personal--dark .wds-sentiment-surface-neutral-base,
-.np-theme-personal--forest-green .wds-sentiment-surface-neutral-base {
+.np-theme-business--dark .wds-sentiment-surface-neutral-base,
+.np-theme-personal--forest-green .wds-sentiment-surface-neutral-base,
+.np-theme-business--forest-green .wds-sentiment-surface-neutral-base,
+.np-theme-platform--forest-green .wds-sentiment-surface-neutral-base {
   --color-sentiment-content-primary: #F1F1ED;
   --color-sentiment-content-primary-hover: #E7E7E1;
   --color-sentiment-content-primary-active: #DFDED5;
@@ -314,7 +366,10 @@
   --color-sentiment-background-surface-active: #595B58;
 }
 .np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
-.np-theme-personal--forest-green .wds-sentiment-surface-neutral-elevated {
+.np-theme-business--dark .wds-sentiment-surface-neutral-elevated,
+.np-theme-personal--forest-green .wds-sentiment-surface-neutral-elevated,
+.np-theme-business--forest-green .wds-sentiment-surface-neutral-elevated,
+.np-theme-platform--forest-green .wds-sentiment-surface-neutral-elevated {
   --color-sentiment-content-primary: #2A2C29;
   --color-sentiment-content-primary-hover: #414441;
   --color-sentiment-content-primary-active: #595B58;
@@ -335,7 +390,10 @@
   --color-sentiment-background-surface-active: #DFDED5;
 }
 .np-theme-personal .wds-sentiment-surface-proposition-base,
-.np-theme-personal--bright-green .wds-sentiment-surface-proposition-base {
+.np-theme-business .wds-sentiment-surface-proposition-base,
+.np-theme-platform .wds-sentiment-surface-proposition-base,
+.np-theme-personal--bright-green .wds-sentiment-surface-proposition-base,
+.np-theme-business--bright-green .wds-sentiment-surface-proposition-base {
   --color-sentiment-content-primary: #0E0F0C;
   --color-sentiment-content-primary-hover: #0A2826;
   --color-sentiment-content-primary-active: #074140;
@@ -356,7 +414,10 @@
   --color-sentiment-background-surface-active: #B6ECEC;
 }
 .np-theme-personal .wds-sentiment-surface-proposition-elevated,
-.np-theme-personal--bright-green .wds-sentiment-surface-proposition-elevated {
+.np-theme-business .wds-sentiment-surface-proposition-elevated,
+.np-theme-platform .wds-sentiment-surface-proposition-elevated,
+.np-theme-personal--bright-green .wds-sentiment-surface-proposition-elevated,
+.np-theme-business--bright-green .wds-sentiment-surface-proposition-elevated {
   --color-sentiment-content-primary: #FFFFFF;
   --color-sentiment-content-primary-hover: #EAF9F9;
   --color-sentiment-content-primary-active: #D5F4F4;
@@ -377,7 +438,10 @@
   --color-sentiment-background-surface-active: #022626;
 }
 .np-theme-personal--dark .wds-sentiment-surface-proposition-base,
-.np-theme-personal--forest-green .wds-sentiment-surface-proposition-base {
+.np-theme-business--dark .wds-sentiment-surface-proposition-base,
+.np-theme-personal--forest-green .wds-sentiment-surface-proposition-base,
+.np-theme-business--forest-green .wds-sentiment-surface-proposition-base,
+.np-theme-platform--forest-green .wds-sentiment-surface-proposition-base {
   --color-sentiment-content-primary: #FFFFFF;
   --color-sentiment-content-primary-hover: #EAF9F9;
   --color-sentiment-content-primary-active: #D5F4F4;
@@ -398,7 +462,10 @@
   --color-sentiment-background-surface-active: #176460;
 }
 .np-theme-personal--dark .wds-sentiment-surface-proposition-elevated,
-.np-theme-personal--forest-green .wds-sentiment-surface-proposition-elevated {
+.np-theme-business--dark .wds-sentiment-surface-proposition-elevated,
+.np-theme-personal--forest-green .wds-sentiment-surface-proposition-elevated,
+.np-theme-business--forest-green .wds-sentiment-surface-proposition-elevated,
+.np-theme-platform--forest-green .wds-sentiment-surface-proposition-elevated {
   --color-sentiment-content-primary: #0E0F0C;
   --color-sentiment-content-primary-hover: #0A2826;
   --color-sentiment-content-primary-active: #074140;

package/build/types/button/_stories/helpers.d.ts

@@ -0,0 +1,11 @@
+interface GenerateSurfaceVariantProps {
+    theme?: 'forest-green' | 'bright-green' | 'dark';
+    sentiment: 'success' | 'warning' | 'negative' | 'neutral' | 'proposition';
+}
+export declare const generateSurfaceVariant: ({ theme, sentiment }: GenerateSurfaceVariantProps) => {
+    storyName: string;
+    render: () => import("react").JSX.Element;
+    decorators: ((Story: React.ComponentType) => import("react").JSX.Element)[];
+};
+export {};
+//# sourceMappingURL=helpers.d.ts.map

package/build/types/button/_stories/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/button/_stories/helpers.tsx"],"names":[],"mappings":"AAOA,UAAU,2BAA2B;IACnC,KAAK,CAAC,EAAE,cAAc,GAAG,cAAc,GAAG,MAAM,CAAC;IACjD,SAAS,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,CAAC;CAC3E;AACD,eAAO,MAAM,sBAAsB,GAAI,sBAAsB,2BAA2B;;;yBAoG5E,KAAK,CAAC,aAAa;CAM7B,CAAC"}

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

@@ -1,16 +1,32 @@
 import { Sentiment } from '../../common';
 export type InlinePromptProps = {
+    /**
+     * The sentiment determines the colour scheme
+     */
     sentiment?: `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}` | 'proposition';
+    /**
+     * Replaces the icon with a spinner while waiting for the short-lived action to finish.
+     * @default false
+     */
     loading?: boolean;
     /**
-     * Use for short-lived inline prompts to avoid swap of the icon (which is bad UX for short-lived prompts, e.g. when submit form)
+     * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled
+     * they are associated with actually disabled component (e.g. a disabled list item or input).
+     * @default false
      */
     muted?: boolean;
+    /**
+     * Icon override for `proposition` and `positive` sentiments. Unsupported for remaining ones.
+     */
+    media?: React.ReactNode;
     id?: string;
     className?: string;
     'data-testid'?: string;
     children: React.ReactNode;
-    media?: React.ReactNode;
 };
-export declare const InlinePrompt: ({ sentiment, muted, loading, className, children, media, ...rest }: InlinePromptProps) => import("react").JSX.Element;
+/**
+ * Inline prompts appear alongside a specific component on the screen. They help the user stay
+ * informed, fix something, or get more out of what they're doing.
+ */
+export declare const InlinePrompt: ({ sentiment, muted, loading, className, children, media, "data-testid": dataTestId, ...rest }: InlinePromptProps) => import("react").JSX.Element;
 //# sourceMappingURL=InlinePrompt.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"InlinePrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAOzC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,CAAC,EACN,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,EAAE,GACpF,aAAa,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,oEAQ1B,iBAAiB,gCAkCnB,CAAC"}
+{"version":3,"file":"InlinePrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAQzC,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,SAAS,CAAC,EACN,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,EAAE,GACpF,aAAa,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,+FAS1B,iBAAiB,gCA+CnB,CAAC"}

package/build/types/sentimentSurface/SentimentSurface.d.ts

@@ -1,17 +1,18 @@
 import { SentimentSurfaceComponent } from './SentimentSurface.types';
 /**
- * SentimentSurface is a polymorphic container component that applies contextual background colours
- * and text styling based on sentiment types (negative, warning, neutral, success, proposition).
- * It's designed to visually communicate the nature or importance of its content through colour.
+ * SentimentSurface is a polymorphic container component that exposes and, optionally, applies
+ * contextual colour tokens as CSS custom properties, based on sentiment types (`negative`,
+ * `warning`, `neutral`, `success`, `proposition`).
  *
  * @param {ElementType} [as='div'] - Optional prop to override the HTML element rendered.
  * @param {Sentiment} sentiment - Required prop to set the sentiment type (negative, warning, neutral, success, proposition).
  * @param {Emphasis} [emphasis='base'] - Optional prop to specify the emphasis level (base or elevated).
+ * @param {boolean} [hasBaseStyles=true] - If true, sets the `background-color` and `color` on the container. Otherwise, only exposes the tokens as CSS custom properties without rendering.
  * @param {ReactNode} [children] - Content to render inside the surface.
  * @param {string} [className] - Additional CSS classes to apply.
  * @param {CSSProperties} [style] - Inline styles to apply.
  * @param {string} [id] - Unique identifier for the component.
- * @param {string} [testId] - A unique string that appears as data attribute `data-testid` in the rendered code.
+ * @param {string} [data-testid] - A unique string that appears as data attribute `data-testid` in the rendered code.
  *
  * @component
  * @example

package/build/types/sentimentSurface/SentimentSurface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SentimentSurface.d.ts","sourceRoot":"","sources":["../../../src/sentimentSurface/SentimentSurface.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,yBAAyB,EAC1B,MAAM,0BAA0B,CAAC;AAGlC;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,QAAA,MAAM,gBAAgB,EAAE,yBA+BtB,CAAC;AAIH,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"SentimentSurface.d.ts","sourceRoot":"","sources":["../../../src/sentimentSurface/SentimentSurface.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,yBAAyB,EAC1B,MAAM,0BAA0B,CAAC;AAElC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,QAAA,MAAM,gBAAgB,EAAE,yBAsCtB,CAAC;AAIH,eAAe,gBAAgB,CAAC"}

package/build/types/sentimentSurface/SentimentSurface.types.d.ts

@@ -21,30 +21,18 @@ export interface CommonProps {
      */
     emphasis?: Emphasis;
     /**
-     * Content to render inside the surface
+     * If true, sets the  `background-color` and `color` on the container. Otherwise, only exposes the tokens as CSS custom properties without rendering.
+     * @default true
      */
+    hasBaseStyles?: boolean;
     children?: ReactNode;
-    /**
-     * Additional CSS classes
-     */
     className?: string;
-    /**
-     * Inline styles
-     */
     style?: CSSProperties;
-    /**
-     * Unique identifier for the component
-     */
     id?: string;
     /**
      * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests
      */
-    testId?: string;
-    /**
-     * `data-testid` is strictly controlled through the `testId` prop.
-     * This lets consumers know that this data attribute will not be applied.
-     */
-    'data-testid'?: never;
+    'data-testid'?: string;
 }
 /**
  * Props when rendering as a div or custom element

package/build/types/sentimentSurface/SentimentSurface.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SentimentSurface.types.d.ts","sourceRoot":"","sources":["../../../src/sentimentSurface/SentimentSurface.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,WAAW,EACX,aAAa,EACb,wBAAwB,EACxB,cAAc,EACf,MAAM,OAAO,CAAC;AAEf;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,CAAC;AAEvF;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,UAAU,CAAC;AAE3C;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,SAAS,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,MAAM,wBAAwB,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,IAAI,CACxE,cAAc,CAAC,cAAc,CAAC,EAC9B,MAAM,WAAW,CAClB,GACC,WAAW,GAAG;IACZ;;;OAGG;IACH,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,CAAC;AAEJ;;GAEG;AACH,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,wBAAwB,CAAC,CAAC,CAAC,CAAC;AAE/F;;;;;;;;GAQG;AACH,MAAM,MAAM,8BAA8B,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IACtE,qBAAqB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC;AAE/F;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,KAAK,EAAE,8BAA8B,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;IACrF,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB"}
+{"version":3,"file":"SentimentSurface.types.d.ts","sourceRoot":"","sources":["../../../src/sentimentSurface/SentimentSurface.types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,WAAW,EACX,aAAa,EACb,wBAAwB,EACxB,cAAc,EACf,MAAM,OAAO,CAAC;AAEf;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,CAAC;AAEvF;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,UAAU,CAAC;AAE3C;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,SAAS,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,MAAM,wBAAwB,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,IAAI,CACxE,cAAc,CAAC,cAAc,CAAC,EAC9B,MAAM,WAAW,CAClB,GACC,WAAW,GAAG;IACZ;;;OAGG;IACH,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,CAAC;AAEJ;;GAEG;AACH,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,wBAAwB,CAAC,CAAC,CAAC,CAAC;AAE/F;;;;;;;;GAQG;AACH,MAAM,MAAM,8BAA8B,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IACtE,qBAAqB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC;AAE/F;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,KAAK,EAAE,8BAA8B,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;IACrF,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/build/types/test-utils/story-config.d.ts

@@ -16,6 +16,30 @@ export declare const viewports: {
         };
         type: string;
     };
+    mobile1: {
+        readonly name: "Small mobile";
+        readonly styles: {
+            readonly height: "568px";
+            readonly width: "320px";
+        };
+        readonly type: "mobile";
+    };
+    mobile2: {
+        readonly name: "Large mobile";
+        readonly styles: {
+            readonly height: "896px";
+            readonly width: "414px";
+        };
+        readonly type: "mobile";
+    };
+    tablet: {
+        readonly name: "Tablet";
+        readonly styles: {
+            readonly height: "1112px";
+            readonly width: "834px";
+        };
+        readonly type: "tablet";
+    };
 };
 export interface StoryConfig {
     /**
@@ -31,7 +55,7 @@ export interface StoryConfig {
      *
      * @default undefined
      */
-    variants?: ('default' | 'light' | 'dark' | 'bright-green' | 'forest-green' | 'rtl' | 'mobile' | '400%')[];
+    variants?: ('default' | 'light' | 'dark' | 'bright-green' | 'forest-green' | 'business' | 'business--forest-green' | 'business--bright-green' | 'platform' | 'platform--forest-green' | 'rtl' | 'mobile' | '400%')[];
 }
 /**
  * Utility function for creating variants of a CSFv3 story.

package/build/types/test-utils/story-config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"story-config.d.ts","sourceRoot":"","sources":["../../../src/test-utils/story-config.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;CAarB,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,EAAE,CACP,SAAS,GACT,OAAO,GACP,MAAM,GACN,cAAc,GACd,cAAc,GACd,KAAK,GACL,QAAQ,GACR,MAAM,CACT,EAAE,CAAC;CACL;AAmBD;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,IAAI,EAC9B,aAAa,QAAQ,CAAC,IAAI,CAAC,EAC3B,cAAc,WAAW,KACxB,QAAQ,CAAC,IAAI,CAuBf,CAAC"}
+{"version":3,"file":"story-config.d.ts","sourceRoot":"","sources":["../../../src/test-utils/story-config.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAarB,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,EAAE,CACP,SAAS,GACT,OAAO,GACP,MAAM,GACN,cAAc,GACd,cAAc,GACd,UAAU,GACV,wBAAwB,GACxB,wBAAwB,GACxB,UAAU,GACV,wBAAwB,GACxB,KAAK,GACL,QAAQ,GACR,MAAM,CACT,EAAE,CAAC;CACL;AAkBD;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,IAAI,EAC9B,aAAa,QAAQ,CAAC,IAAI,CAAC,EAC3B,cAAc,WAAW,KACxB,QAAQ,CAAC,IAAI,CAuBf,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.116.1",
+  "version": "46.117.1",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -49,10 +49,10 @@
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-typescript": "^12.1.4",
     "@rollup/plugin-url": "^8.0.2",
-    "@storybook/addon-a11y": "^9.1.3",
-    "@storybook/addon-docs": "^9.1.3",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
-    "@storybook/react-webpack5": "^9.1.3",
+    "@storybook/addon-a11y": "^10.1.4",
+    "@storybook/addon-docs": "^10.1.4",
+    "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
+    "@storybook/react-webpack5": "^10.1.4",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
@@ -72,6 +72,7 @@
     "@wise/eslint-config": "^13.1.0",
     "babel-plugin-formatjs": "^10.5.39",
     "eslint": "^9.33.0",
+    "eslint-plugin-storybook": "10.1.4",
     "gulp": "^5.0.1",
     "jest": "^30.0.5",
     "jest-environment-jsdom": "^29.7.0",
@@ -80,23 +81,23 @@
     "react-intl": "^7.1.11",
     "rollup": "^4.47.1",
     "rollup-preserve-directives": "^1.1.3",
-    "storybook": "^9.1.3",
-    "storybook-addon-tag-badges": "^2.0.2",
-    "storybook-addon-test-codegen": "^2.0.1",
+    "storybook": "^10.1.10",
+    "storybook-addon-tag-badges": "^3.0.4",
+    "storybook-addon-test-codegen": "^3.0.1",
     "@transferwise/less-config": "3.1.2",
-    "@transferwise/neptune-css": "14.25.2",
+    "@wise/wds-configs": "0.0.0",
     "@wise/components-theming": "1.9.1",
-    "@wise/wds-configs": "0.0.0"
+    "@transferwise/neptune-css": "14.26.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3 || ^4",
     "@transferwise/neptune-css": "^14.24",
     "@wise/art": "^2.24.4",
     "@wise/components-theming": "^1.6.2",
+    "framer-motion": "^12.23.22",
     "react": ">=18",
     "react-dom": ">=18",
-    "react-intl": "^5.10.0 || ^6 || ^7",
-    "framer-motion": "^12.23.22"
+    "react-intl": "^5.10.0 || ^6 || ^7"
   },
   "dependencies": {
     "@babel/runtime": "^7.28.3",

package/src/button/Button.css

@@ -1,10 +1,10 @@
 .wds-Button {
-  --Button-background: var(--color-interactive-accent);
-  --Button-background-hover: var(--color-interactive-accent-hover);
-  --Button-background-active: var(--color-interactive-accent-active);
-  --Button-color: var(--color-interactive-control);
-  --Button-color-hover: var(--color-interactive-control-hover);
-  --Button-color-active: var(--color-interactive-control-active);
+  --Button-background: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
+  --Button-background-hover: var(--color-sentiment-interactive-primary-hover, var(--color-interactive-accent-hover));
+  --Button-background-active: var(--color-sentiment-interactive-primary-active, var(--color-interactive-accent-active));
+  --Button-color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
+  --Button-color-hover: var(--color-sentiment-interactive-control-hover, var(--color-interactive-control-hover));
+  --Button-color-active: var(--color-sentiment-interactive-control-active, var(--color-interactive-control-active));
   --Button-border-radius: var(--radius-full);
   --Button-label-gap: var(--size-4);
   --Button-large-padding: var(--size-12) var(--size-16);
@@ -13,22 +13,22 @@
   --Button-avatar-border-color: var(--color-border-neutral);
   --Button-transition-duration: 150ms;
   --Button-transition-easing: ease-in-out;
-  --Button-secondary-background: var(--color-interactive-neutral);
-  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
-  --Button-secondary-background-active: var(--color-interactive-neutral-active);
-  --Button-secondary-color: var(--color-interactive-primary);
-  --Button-secondary-color-hover: var(--color-interactive-primary-hover);
-  --Button-secondary-color-active: var(--color-interactive-primary-active);
-  --Button-secondary-neutral-background: var(--color-background-neutral);
-  --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
-  --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
-  --Button-secondary-neutral-color: var(--color-content-primary);
+  --Button-secondary-background: var(--color-sentiment-interactive-secondary-neutral, var(--color-interactive-neutral));
+  --Button-secondary-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-interactive-neutral-hover));
+  --Button-secondary-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-interactive-neutral-active));
+  --Button-secondary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
+  --Button-secondary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
+  --Button-secondary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
+  --Button-secondary-neutral-background: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-neutral));
+  --Button-secondary-neutral-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-neutral-hover));
+  --Button-secondary-neutral-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-background-neutral-active));
+  --Button-secondary-neutral-color: var(--color-sentiment-content-primary, var(--color-content-primary));
   --Button-tertiary-background: transparent;
-  --Button-tertiary-background-hover: var(--color-background-screen-hover);
-  --Button-tertiary-background-active: var(--color-background-screen-active);
-  --Button-tertiary-color: var(--color-interactive-primary);
-  --Button-tertiary-color-hover: var(--color-interactive-primary-hover);
-  --Button-tertiary-color-active: var(--color-interactive-primary-active);
+  --Button-tertiary-background-hover: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-screen-hover));
+  --Button-tertiary-background-active: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-screen-active));
+  --Button-tertiary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
+  --Button-tertiary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
+  --Button-tertiary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
   --Button-primary-negative-background: var(--color-sentiment-negative-primary);
   --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
   --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
@@ -113,7 +113,7 @@
   --Button-color-active: var(--Button-secondary-neutral-color);
 }
 .wds-Button--secondary-neutral .wds-Button-icon--end {
-  color: var(--color-interactive-primary);
+  color: var(--Button-secondary-color);
 }
 .wds-Button--tertiary {
   --Button-background: var(--Button-tertiary-background);

package/src/button/Button.less

@@ -74,7 +74,7 @@
     --Button-color-active: var(--Button-secondary-neutral-color);
 
     .wds-Button-icon--end {
-      color: var(--color-interactive-primary);
+      color: var(--Button-secondary-color);
     }
   }
 

package/src/button/Button.vars.css

@@ -1,10 +1,10 @@
 .wds-Button {
-  --Button-background: var(--color-interactive-accent);
-  --Button-background-hover: var(--color-interactive-accent-hover);
-  --Button-background-active: var(--color-interactive-accent-active);
-  --Button-color: var(--color-interactive-control);
-  --Button-color-hover: var(--color-interactive-control-hover);
-  --Button-color-active: var(--color-interactive-control-active);
+  --Button-background: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
+  --Button-background-hover: var(--color-sentiment-interactive-primary-hover, var(--color-interactive-accent-hover));
+  --Button-background-active: var(--color-sentiment-interactive-primary-active, var(--color-interactive-accent-active));
+  --Button-color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
+  --Button-color-hover: var(--color-sentiment-interactive-control-hover, var(--color-interactive-control-hover));
+  --Button-color-active: var(--color-sentiment-interactive-control-active, var(--color-interactive-control-active));
   --Button-border-radius: var(--radius-full);
   --Button-label-gap: var(--size-4);
   --Button-large-padding: var(--size-12) var(--size-16);
@@ -13,22 +13,22 @@
   --Button-avatar-border-color: var(--color-border-neutral);
   --Button-transition-duration: 150ms;
   --Button-transition-easing: ease-in-out;
-  --Button-secondary-background: var(--color-interactive-neutral);
-  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
-  --Button-secondary-background-active: var(--color-interactive-neutral-active);
-  --Button-secondary-color: var(--color-interactive-primary);
-  --Button-secondary-color-hover: var(--color-interactive-primary-hover);
-  --Button-secondary-color-active: var(--color-interactive-primary-active);
-  --Button-secondary-neutral-background: var(--color-background-neutral);
-  --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
-  --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
-  --Button-secondary-neutral-color: var(--color-content-primary);
+  --Button-secondary-background: var(--color-sentiment-interactive-secondary-neutral, var(--color-interactive-neutral));
+  --Button-secondary-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-interactive-neutral-hover));
+  --Button-secondary-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-interactive-neutral-active));
+  --Button-secondary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
+  --Button-secondary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
+  --Button-secondary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
+  --Button-secondary-neutral-background: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-neutral));
+  --Button-secondary-neutral-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-neutral-hover));
+  --Button-secondary-neutral-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-background-neutral-active));
+  --Button-secondary-neutral-color: var(--color-sentiment-content-primary, var(--color-content-primary));
   --Button-tertiary-background: transparent;
-  --Button-tertiary-background-hover: var(--color-background-screen-hover);
-  --Button-tertiary-background-active: var(--color-background-screen-active);
-  --Button-tertiary-color: var(--color-interactive-primary);
-  --Button-tertiary-color-hover: var(--color-interactive-primary-hover);
-  --Button-tertiary-color-active: var(--color-interactive-primary-active);
+  --Button-tertiary-background-hover: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-screen-hover));
+  --Button-tertiary-background-active: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-screen-active));
+  --Button-tertiary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
+  --Button-tertiary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
+  --Button-tertiary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
   --Button-primary-negative-background: var(--color-sentiment-negative-primary);
   --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
   --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);