@transferwise/components 46.116.1 → 46.117.0

package/build/main.css

@@ -1,3 +1,10 @@
+.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 {
   --color-sentiment-content-primary: #CB272F;
@@ -32,7 +39,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;
@@ -874,18 +881,35 @@
   position: relative;
   z-index: 1;
 }
+.wds-inline-prompt:has(a):hover,
+.wds-inline-prompt:has(button):hover {
+  background-color: var(--color-sentiment-background-surface-hover);
+}
+.wds-inline-prompt:has(a):active,
+.wds-inline-prompt:has(button):active {
+  background-color: var(--color-sentiment-background-surface-active);
+}
 .wds-inline-prompt--muted {
   opacity: 0.93;
   filter: grayscale(1);
 }
 .wds-inline-prompt a,
 .wds-inline-prompt button {
+  color: var(--color-sentiment-content-primary);
   text-underline-offset: calc(4px / 2);
   text-underline-offset: calc(var(--size-4) / 2);
 }
+.wds-inline-prompt a:hover,
+.wds-inline-prompt button:hover {
+  color: var(--color-sentiment-content-primary-hover);
+}
+.wds-inline-prompt a:active,
+.wds-inline-prompt button:active {
+  color: var(--color-sentiment-content-primary-active);
+}
 .wds-inline-prompt a:first-of-type:before,
 .wds-inline-prompt button:first-of-type:before {
-  content: '';
+  content: "";
   position: absolute;
   inset: 0;
 }
@@ -899,112 +923,16 @@
 }
 .wds-inline-prompt__media-wrapper .tw-icon-tags,
 .wds-inline-prompt__media-wrapper .tw-icon-confetti {
-  color: var(--color-sentiment-positive-primary);
-}
-.wds-inline-prompt--negative {
-  background-color: var(--color-sentiment-negative-secondary);
-  color: var(--color-sentiment-negative-primary);
-}
-.wds-inline-prompt--negative a,
-.wds-inline-prompt--negative button {
-  color: var(--color-sentiment-negative-primary);
-}
-.wds-inline-prompt--negative a:hover,
-.wds-inline-prompt--negative button:hover {
-  color: var(--color-sentiment-negative-primary-hover);
-}
-.wds-inline-prompt--negative a:active,
-.wds-inline-prompt--negative button:active {
-  color: var(--color-sentiment-negative-primary-active);
-}
-.wds-inline-prompt.wds-inline-prompt--negative:has(a, button):hover {
-  background-color: var(--color-sentiment-negative-secondary-hover);
-}
-.wds-inline-prompt.wds-inline-prompt--negative:has(a, button):active {
-  background-color: var(--color-sentiment-negative-secondary-active);
-}
-.wds-inline-prompt--positive {
-  background-color: var(--color-sentiment-positive-secondary);
-  color: var(--color-sentiment-positive-primary);
-}
-.wds-inline-prompt--positive a,
-.wds-inline-prompt--positive button {
-  color: var(--color-sentiment-positive-primary);
-}
-.wds-inline-prompt--positive a:hover,
-.wds-inline-prompt--positive button:hover {
-  color: var(--color-sentiment-positive-primary-hover);
+  color: var(--color-sentiment-content-primary);
 }
-.wds-inline-prompt--positive a:active,
-.wds-inline-prompt--positive button:active {
-  color: var(--color-sentiment-positive-primary-active);
-}
-.wds-inline-prompt.wds-inline-prompt--positive:has(a, button):hover {
-  background-color: var(--color-sentiment-positive-secondary-hover);
-}
-.wds-inline-prompt.wds-inline-prompt--positive:has(a, button):active {
-  background-color: var(--color-sentiment-positive-secondary-active);
-}
-.wds-inline-prompt--proposition {
-  background-color: #D2F9F7;
-  color: var(--color-interactive-primary);
-}
-.wds-inline-prompt--proposition a,
-.wds-inline-prompt--proposition button {
-  color: var(--color-interactive-primary);
-}
-.wds-inline-prompt--proposition a:hover,
-.wds-inline-prompt--proposition button:hover {
-  color: var(--color-interactive-primary-hover);
-}
-.wds-inline-prompt--proposition a:active,
-.wds-inline-prompt--proposition button:active {
-  color: var(--color-interactive-primary-active);
-}
-.wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):hover {
-  background-color: #B2F4F3;
-}
-.wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):active {
-  background-color: #91F0EE;
-}
-.wds-inline-prompt--neutral {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.wds-inline-prompt--neutral a,
-.wds-inline-prompt--neutral button {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):active {
-  background-color: var(--color-background-neutral-active);
-}
-.wds-inline-prompt--warning {
-  background-color: var(--color-sentiment-warning-secondary);
-  color: var(--color-sentiment-warning-content);
-}
-.wds-inline-prompt--warning a,
-.wds-inline-prompt--warning button {
-  color: var(--color-sentiment-warning-content);
-}
-.wds-inline-prompt--warning a:hover,
-.wds-inline-prompt--warning button:hover {
-  color: var(--color-sentiment-warning-content-hover);
-}
-.wds-inline-prompt--warning a:active,
-.wds-inline-prompt--warning button:active {
-  color: var(--color-sentiment-warning-content-active);
-}
-.wds-inline-prompt.wds-inline-prompt--warning:has(a, button):hover {
-  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
+.wds-inline-prompt .wds-inline-prompt-process-indicator {
+  width: 16px;
+  width: var(--size-16);
+  height: 16px;
+  height: var(--size-16);
 }
-.wds-inline-prompt.wds-inline-prompt--warning:has(a, button):active {
-  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
+.wds-inline-prompt .wds-inline-prompt-process-indicator .process-circle {
+  stroke: currentColor;
 }
 .np-dot {
   --np-dot-size: 14px;
@@ -1107,17 +1035,17 @@
   background-color: var(--color-background-neutral-active);
 }
 .np-icon-button-primary-default {
-  color: var(--color-interactive-control);
+  color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
   background-color: #00a2dd;
-  background-color: var(--color-interactive-accent);
+  background-color: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
 }
 .np-icon-button-primary-default:not(.disabled):not(:disabled):hover {
   background-color: #008fc9;
-  background-color: var(--color-interactive-accent-hover);
+  background-color: var(--color-sentiment-interactive-primary-hover, var(--color-interactive-accent-hover));
 }
 .np-icon-button-primary-default:not(.disabled):not(:disabled):active {
   background-color: #0081ba;
-  background-color: var(--color-interactive-accent-active);
+  background-color: var(--color-sentiment-interactive-primary-active, var(--color-interactive-accent-active));
 }
 .np-icon-button-primary-negative {
   color: var(--color-contrast-overlay);
@@ -1145,14 +1073,14 @@
   background-color: var(--color-background-screen-active);
 }
 .np-icon-button-secondary-default {
-  color: var(--color-interactive-primary);
-  background-color: var(--color-interactive-neutral);
+  color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
+  background-color: var(--color-sentiment-interactive-secondary-neutral, var(--color-interactive-neutral));
 }
 .np-icon-button-secondary-default:not(.disabled):not(:disabled):hover {
-  background-color: var(--color-interactive-neutral-hover);
+  background-color: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-interactive-neutral-hover));
 }
 .np-icon-button-secondary-default:not(.disabled):not(:disabled):active {
-  background-color: var(--color-interactive-neutral-active);
+  background-color: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-interactive-neutral-active));
 }
 .np-theme-personal--bright-green .np-icon-button-secondary-default,
 .np-theme-personal--forest-green .np-icon-button-secondary-default {
@@ -1266,12 +1194,12 @@
   pointer-events: auto;
 }
 .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);
@@ -1280,16 +1208,16 @@
   --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);
@@ -1380,7 +1308,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);
@@ -4321,6 +4249,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 a,
 button.np-link {
   border-radius: 2px;
+  color: var(--color-sentiment-content-primary, var(--color-content-link));
 }
 .np-link .tw-icon {
   display: flex;

package/build/prompt/InlinePrompt/InlinePrompt.js

@@ -28,6 +28,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var ProcessIndicator = require('../../processIndicator/ProcessIndicator.js');
 var StatusIcon = require('../../statusIcon/StatusIcon.js');
 var Body = require('../../body/Body.js');
+var SentimentSurface = require('../../sentimentSurface/SentimentSurface.js');
 
 const InlinePrompt = ({
   sentiment: sentiment$1 = sentiment.Sentiment.POSITIVE,
@@ -36,15 +37,11 @@ const InlinePrompt = ({
   className,
   children,
   media = null,
+  'data-testid': dataTestId,
   ...rest
 }) => {
+  const surfaceSentiment = sentiment$1 === sentiment.Sentiment.POSITIVE ? 'success' : sentiment$1;
   const renderMedia = () => {
-    if (media && ['proposition', 'positive'].includes(sentiment$1)) {
-      return media;
-    }
-    if (sentiment$1 === 'proposition') {
-      return /*#__PURE__*/jsxRuntime.jsx(icons.GiftBox, {});
-    }
     if (muted) {
       return /*#__PURE__*/jsxRuntime.jsx(icons.BackslashCircle, {
         size: 16,
@@ -54,15 +51,24 @@ const InlinePrompt = ({
     if (loading) {
       return /*#__PURE__*/jsxRuntime.jsx(ProcessIndicator.default, {
         "data-testid": "InlinePrompt_ProcessIndicator",
-        size: "xxs"
+        size: "xxs",
+        className: "wds-inline-prompt-process-indicator"
       });
     }
+    if (sentiment$1 === 'positive' && media) {
+      return media;
+    }
+    if (sentiment$1 === 'proposition') {
+      return media || /*#__PURE__*/jsxRuntime.jsx(icons.GiftBox, {});
+    }
     return /*#__PURE__*/jsxRuntime.jsx(StatusIcon.default, {
       size: 16,
       sentiment: sentiment$1
     });
   };
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+  return /*#__PURE__*/jsxRuntime.jsxs(SentimentSurface.default, {
+    sentiment: surfaceSentiment,
+    "data-testid": dataTestId,
     className: clsx.clsx('wds-inline-prompt', `wds-inline-prompt--${sentiment$1}`, {
       'wds-inline-prompt--muted': muted,
       'wds-inline-prompt--loading': loading

package/build/prompt/InlinePrompt/InlinePrompt.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlinePrompt.js","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\n\nexport type InlinePromptProps = {\n  sentiment?:\n    | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n    | 'proposition';\n  loading?: boolean;\n  /**\n   * 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)\n   */\n  muted?: boolean;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  children: React.ReactNode;\n  media?: React.ReactNode;\n};\n\nexport const InlinePrompt = ({\n  sentiment = Sentiment.POSITIVE,\n  muted = false,\n  loading = false,\n  className,\n  children,\n  media = null,\n  ...rest\n}: InlinePromptProps) => {\n  const renderMedia = () => {\n    if (media && ['proposition', 'positive'].includes(sentiment)) {\n      return media;\n    }\n    if (sentiment === 'proposition') {\n      return <GiftBox />;\n    }\n    if (muted) {\n      return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" />;\n    }\n    if (loading) {\n      return <ProcessIndicator data-testid=\"InlinePrompt_ProcessIndicator\" size=\"xxs\" />;\n    }\n    return <StatusIcon size={16} sentiment={sentiment} />;\n  };\n\n  return (\n    <div\n      className={clsx(\n        'wds-inline-prompt',\n        `wds-inline-prompt--${sentiment}`,\n        {\n          'wds-inline-prompt--muted': muted,\n          'wds-inline-prompt--loading': loading,\n        },\n        className,\n      )}\n      {...rest}\n    >\n      <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n      <Body>{children}</Body>\n    </div>\n  );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","rest","renderMedia","includes","_jsx","GiftBox","BackslashCircle","size","ProcessIndicator","StatusIcon","_jsxs","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBO,MAAMA,YAAY,GAAGA,CAAC;aAC3BC,WAAS,GAAGC,mBAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;AACRC,EAAAA,KAAK,GAAG,IAAI;EACZ,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIF,KAAK,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,CAACG,QAAQ,CAACV,WAAS,CAAC,EAAE;AAC5D,MAAA,OAAOO,KAAK;AACd,IAAA;IACA,IAAIP,WAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,oBAAOW,cAAA,CAACC,aAAO,EAAA,GAAG;AACpB,IAAA;AACA,IAAA,IAAIT,KAAK,EAAE;MACT,oBAAOQ,cAAA,CAACE,qBAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAoB,QAAG;AACvE,IAAA;AACA,IAAA,IAAIV,OAAO,EAAE;MACX,oBAAOO,cAAA,CAACI,wBAAgB,EAAA;AAAC,QAAA,aAAA,EAAY,+BAA+B;AAACD,QAAAA,IAAI,EAAC;AAAK,OAAA,CAAG;AACpF,IAAA;IACA,oBAAOH,cAAA,CAACK,kBAAU,EAAA;AAACF,MAAAA,IAAI,EAAE,EAAG;AAACd,MAAAA,SAAS,EAAEA;AAAU,MAAG;EACvD,CAAC;AAED,EAAA,oBACEiB,eAAA,CAAA,KAAA,EAAA;IACEZ,SAAS,EAAEa,SAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBlB,WAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEG,IAAI;AAAAF,IAAAA,QAAA,gBAERK,cAAA,CAAA,KAAA,EAAA;AAAKN,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEG,WAAW;AAAE,KAAM,CACtE,eAAAE,cAAA,CAACQ,YAAI,EAAA;AAAAb,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAK,CAAC;AAEV;;;;"}
+{"version":3,"file":"InlinePrompt.js","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport SentimentSurface from '../../sentimentSurface';\n\nexport type InlinePromptProps = {\n  /**\n   * The sentiment determines the colour scheme\n   */\n  sentiment?:\n    | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n    | 'proposition';\n  /**\n   * Replaces the icon with a spinner while waiting for the short-lived action to finish.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled\n   * they are associated with actually disabled component (e.g. a disabled list item or input).\n   * @default false\n   */\n  muted?: boolean;\n  /**\n   * Icon override for `proposition` and `positive` sentiments. Unsupported for remaining ones.\n   */\n  media?: React.ReactNode;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  children: React.ReactNode;\n};\n\n/**\n * Inline prompts appear alongside a specific component on the screen. They help the user stay\n * informed, fix something, or get more out of what they're doing.\n */\nexport const InlinePrompt = ({\n  sentiment = Sentiment.POSITIVE,\n  muted = false,\n  loading = false,\n  className,\n  children,\n  media = null,\n  'data-testid': dataTestId,\n  ...rest\n}: InlinePromptProps) => {\n  const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;\n\n  const renderMedia = () => {\n    if (muted) {\n      return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" />;\n    }\n    if (loading) {\n      return (\n        <ProcessIndicator\n          data-testid=\"InlinePrompt_ProcessIndicator\"\n          size=\"xxs\"\n          className=\"wds-inline-prompt-process-indicator\"\n        />\n      );\n    }\n\n    if (sentiment === 'positive' && media) {\n      return media;\n    }\n\n    if (sentiment === 'proposition') {\n      return media || <GiftBox />;\n    }\n\n    return <StatusIcon size={16} sentiment={sentiment} />;\n  };\n\n  return (\n    <SentimentSurface\n      sentiment={surfaceSentiment}\n      data-testid={dataTestId}\n      className={clsx(\n        'wds-inline-prompt',\n        `wds-inline-prompt--${sentiment}`,\n        {\n          'wds-inline-prompt--muted': muted,\n          'wds-inline-prompt--loading': loading,\n        },\n        className,\n      )}\n      {...rest}\n    >\n      <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n      <Body>{children}</Body>\n    </SentimentSurface>\n  );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","dataTestId","rest","surfaceSentiment","renderMedia","_jsx","BackslashCircle","size","ProcessIndicator","GiftBox","StatusIcon","_jsxs","SentimentSurface","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCO,MAAMA,YAAY,GAAGA,CAAC;aAC3BC,WAAS,GAAGC,mBAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;AACRC,EAAAA,KAAK,GAAG,IAAI;AACZ,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,gBAAgB,GAAGV,WAAS,KAAKC,mBAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,WAAS;EAEjF,MAAMW,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIR,KAAK,EAAE;MACT,oBAAOS,cAAA,CAACC,qBAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAoB,QAAG;AACvE,IAAA;AACA,IAAA,IAAIV,OAAO,EAAE;MACX,oBACEQ,cAAA,CAACG,wBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CD,QAAAA,IAAI,EAAC,KAAK;AACVT,QAAAA,SAAS,EAAC;AAAqC,OAAA,CAC/C;AAEN,IAAA;AAEA,IAAA,IAAIL,WAAS,KAAK,UAAU,IAAIO,KAAK,EAAE;AACrC,MAAA,OAAOA,KAAK;AACd,IAAA;IAEA,IAAIP,WAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,OAAOO,KAAK,iBAAIK,cAAA,CAACI,aAAO,KAAG;AAC7B,IAAA;IAEA,oBAAOJ,cAAA,CAACK,kBAAU,EAAA;AAACH,MAAAA,IAAI,EAAE,EAAG;AAACd,MAAAA,SAAS,EAAEA;AAAU,MAAG;EACvD,CAAC;EAED,oBACEkB,eAAA,CAACC,wBAAgB,EAAA;AACfnB,IAAAA,SAAS,EAAEU,gBAAiB;AAC5B,IAAA,aAAA,EAAaF,UAAW;IACxBH,SAAS,EAAEe,SAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBpB,WAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEI,IAAI;AAAAH,IAAAA,QAAA,gBAERM,cAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEK,WAAW;AAAE,KAAM,CACtE,eAAAC,cAAA,CAACS,YAAI,EAAA;AAAAf,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAkB,CAAC;AAEvB;;;;"}

package/build/prompt/InlinePrompt/InlinePrompt.mjs

@@ -17,7 +17,7 @@ import '../../common/propsValues/variant.mjs';
 import '../../common/propsValues/scroll.mjs';
 import '../../common/propsValues/markdownNodeType.mjs';
 import '../../common/fileType.mjs';
-import { GiftBox, BackslashCircle } from '@transferwise/icons';
+import { BackslashCircle, GiftBox } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import 'react';
 import 'react-intl';
@@ -26,6 +26,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import ProcessIndicator from '../../processIndicator/ProcessIndicator.mjs';
 import StatusIcon from '../../statusIcon/StatusIcon.mjs';
 import Body from '../../body/Body.mjs';
+import SentimentSurface from '../../sentimentSurface/SentimentSurface.mjs';
 
 const InlinePrompt = ({
   sentiment = Sentiment.POSITIVE,
@@ -34,15 +35,11 @@ const InlinePrompt = ({
   className,
   children,
   media = null,
+  'data-testid': dataTestId,
   ...rest
 }) => {
+  const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;
   const renderMedia = () => {
-    if (media && ['proposition', 'positive'].includes(sentiment)) {
-      return media;
-    }
-    if (sentiment === 'proposition') {
-      return /*#__PURE__*/jsx(GiftBox, {});
-    }
     if (muted) {
       return /*#__PURE__*/jsx(BackslashCircle, {
         size: 16,
@@ -52,15 +49,24 @@ const InlinePrompt = ({
     if (loading) {
       return /*#__PURE__*/jsx(ProcessIndicator, {
         "data-testid": "InlinePrompt_ProcessIndicator",
-        size: "xxs"
+        size: "xxs",
+        className: "wds-inline-prompt-process-indicator"
       });
     }
+    if (sentiment === 'positive' && media) {
+      return media;
+    }
+    if (sentiment === 'proposition') {
+      return media || /*#__PURE__*/jsx(GiftBox, {});
+    }
     return /*#__PURE__*/jsx(StatusIcon, {
       size: 16,
       sentiment: sentiment
     });
   };
-  return /*#__PURE__*/jsxs("div", {
+  return /*#__PURE__*/jsxs(SentimentSurface, {
+    sentiment: surfaceSentiment,
+    "data-testid": dataTestId,
     className: clsx('wds-inline-prompt', `wds-inline-prompt--${sentiment}`, {
       'wds-inline-prompt--muted': muted,
       'wds-inline-prompt--loading': loading

package/build/prompt/InlinePrompt/InlinePrompt.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InlinePrompt.mjs","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\n\nexport type InlinePromptProps = {\n  sentiment?:\n    | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n    | 'proposition';\n  loading?: boolean;\n  /**\n   * 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)\n   */\n  muted?: boolean;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  children: React.ReactNode;\n  media?: React.ReactNode;\n};\n\nexport const InlinePrompt = ({\n  sentiment = Sentiment.POSITIVE,\n  muted = false,\n  loading = false,\n  className,\n  children,\n  media = null,\n  ...rest\n}: InlinePromptProps) => {\n  const renderMedia = () => {\n    if (media && ['proposition', 'positive'].includes(sentiment)) {\n      return media;\n    }\n    if (sentiment === 'proposition') {\n      return <GiftBox />;\n    }\n    if (muted) {\n      return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" />;\n    }\n    if (loading) {\n      return <ProcessIndicator data-testid=\"InlinePrompt_ProcessIndicator\" size=\"xxs\" />;\n    }\n    return <StatusIcon size={16} sentiment={sentiment} />;\n  };\n\n  return (\n    <div\n      className={clsx(\n        'wds-inline-prompt',\n        `wds-inline-prompt--${sentiment}`,\n        {\n          'wds-inline-prompt--muted': muted,\n          'wds-inline-prompt--loading': loading,\n        },\n        className,\n      )}\n      {...rest}\n    >\n      <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n      <Body>{children}</Body>\n    </div>\n  );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","rest","renderMedia","includes","_jsx","GiftBox","BackslashCircle","size","ProcessIndicator","StatusIcon","_jsxs","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBO,MAAMA,YAAY,GAAGA,CAAC;EAC3BC,SAAS,GAAGC,SAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;AACRC,EAAAA,KAAK,GAAG,IAAI;EACZ,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIF,KAAK,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,CAACG,QAAQ,CAACV,SAAS,CAAC,EAAE;AAC5D,MAAA,OAAOO,KAAK;AACd,IAAA;IACA,IAAIP,SAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,oBAAOW,GAAA,CAACC,OAAO,EAAA,GAAG;AACpB,IAAA;AACA,IAAA,IAAIT,KAAK,EAAE;MACT,oBAAOQ,GAAA,CAACE,eAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAoB,QAAG;AACvE,IAAA;AACA,IAAA,IAAIV,OAAO,EAAE;MACX,oBAAOO,GAAA,CAACI,gBAAgB,EAAA;AAAC,QAAA,aAAA,EAAY,+BAA+B;AAACD,QAAAA,IAAI,EAAC;AAAK,OAAA,CAAG;AACpF,IAAA;IACA,oBAAOH,GAAA,CAACK,UAAU,EAAA;AAACF,MAAAA,IAAI,EAAE,EAAG;AAACd,MAAAA,SAAS,EAAEA;AAAU,MAAG;EACvD,CAAC;AAED,EAAA,oBACEiB,IAAA,CAAA,KAAA,EAAA;IACEZ,SAAS,EAAEa,IAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBlB,SAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEG,IAAI;AAAAF,IAAAA,QAAA,gBAERK,GAAA,CAAA,KAAA,EAAA;AAAKN,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEG,WAAW;AAAE,KAAM,CACtE,eAAAE,GAAA,CAACQ,IAAI,EAAA;AAAAb,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAK,CAAC;AAEV;;;;"}
+{"version":3,"file":"InlinePrompt.mjs","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport SentimentSurface from '../../sentimentSurface';\n\nexport type InlinePromptProps = {\n  /**\n   * The sentiment determines the colour scheme\n   */\n  sentiment?:\n    | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n    | 'proposition';\n  /**\n   * Replaces the icon with a spinner while waiting for the short-lived action to finish.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled\n   * they are associated with actually disabled component (e.g. a disabled list item or input).\n   * @default false\n   */\n  muted?: boolean;\n  /**\n   * Icon override for `proposition` and `positive` sentiments. Unsupported for remaining ones.\n   */\n  media?: React.ReactNode;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  children: React.ReactNode;\n};\n\n/**\n * Inline prompts appear alongside a specific component on the screen. They help the user stay\n * informed, fix something, or get more out of what they're doing.\n */\nexport const InlinePrompt = ({\n  sentiment = Sentiment.POSITIVE,\n  muted = false,\n  loading = false,\n  className,\n  children,\n  media = null,\n  'data-testid': dataTestId,\n  ...rest\n}: InlinePromptProps) => {\n  const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;\n\n  const renderMedia = () => {\n    if (muted) {\n      return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" />;\n    }\n    if (loading) {\n      return (\n        <ProcessIndicator\n          data-testid=\"InlinePrompt_ProcessIndicator\"\n          size=\"xxs\"\n          className=\"wds-inline-prompt-process-indicator\"\n        />\n      );\n    }\n\n    if (sentiment === 'positive' && media) {\n      return media;\n    }\n\n    if (sentiment === 'proposition') {\n      return media || <GiftBox />;\n    }\n\n    return <StatusIcon size={16} sentiment={sentiment} />;\n  };\n\n  return (\n    <SentimentSurface\n      sentiment={surfaceSentiment}\n      data-testid={dataTestId}\n      className={clsx(\n        'wds-inline-prompt',\n        `wds-inline-prompt--${sentiment}`,\n        {\n          'wds-inline-prompt--muted': muted,\n          'wds-inline-prompt--loading': loading,\n        },\n        className,\n      )}\n      {...rest}\n    >\n      <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n      <Body>{children}</Body>\n    </SentimentSurface>\n  );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","dataTestId","rest","surfaceSentiment","renderMedia","_jsx","BackslashCircle","size","ProcessIndicator","GiftBox","StatusIcon","_jsxs","SentimentSurface","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCO,MAAMA,YAAY,GAAGA,CAAC;EAC3BC,SAAS,GAAGC,SAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;AACRC,EAAAA,KAAK,GAAG,IAAI;AACZ,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,gBAAgB,GAAGV,SAAS,KAAKC,SAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,SAAS;EAEjF,MAAMW,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIR,KAAK,EAAE;MACT,oBAAOS,GAAA,CAACC,eAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAoB,QAAG;AACvE,IAAA;AACA,IAAA,IAAIV,OAAO,EAAE;MACX,oBACEQ,GAAA,CAACG,gBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CD,QAAAA,IAAI,EAAC,KAAK;AACVT,QAAAA,SAAS,EAAC;AAAqC,OAAA,CAC/C;AAEN,IAAA;AAEA,IAAA,IAAIL,SAAS,KAAK,UAAU,IAAIO,KAAK,EAAE;AACrC,MAAA,OAAOA,KAAK;AACd,IAAA;IAEA,IAAIP,SAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,OAAOO,KAAK,iBAAIK,GAAA,CAACI,OAAO,KAAG;AAC7B,IAAA;IAEA,oBAAOJ,GAAA,CAACK,UAAU,EAAA;AAACH,MAAAA,IAAI,EAAE,EAAG;AAACd,MAAAA,SAAS,EAAEA;AAAU,MAAG;EACvD,CAAC;EAED,oBACEkB,IAAA,CAACC,gBAAgB,EAAA;AACfnB,IAAAA,SAAS,EAAEU,gBAAiB;AAC5B,IAAA,aAAA,EAAaF,UAAW;IACxBH,SAAS,EAAEe,IAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBpB,SAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEI,IAAI;AAAAH,IAAAA,QAAA,gBAERM,GAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEK,WAAW;AAAE,KAAM,CACtE,eAAAC,GAAA,CAACS,IAAI,EAAA;AAAAf,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAkB,CAAC;AAEvB;;;;"}

package/build/sentimentSurface/SentimentSurface.js

@@ -4,26 +4,27 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var clsx = require('clsx');
-var classMap = require('./classMap.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 const SentimentSurface = /*#__PURE__*/React.forwardRef(function SentimentSurface({
   as,
   sentiment,
   emphasis = 'base',
-  className,
+  hasBaseStyles = true,
   style,
+  className,
   children,
   id,
-  testId,
+  'data-testid': dataTestId,
   ...props
 }, ref) {
   const Element = as ?? 'div';
-  const classNames = clsx.clsx(classMap.getSentimentSurfaceClassName(sentiment, emphasis), className);
+  const BASE_CLASS = 'wds-sentiment-surface';
+  const classNames = clsx.clsx(BASE_CLASS, `${BASE_CLASS}-${sentiment}-${emphasis}`, hasBaseStyles && `${BASE_CLASS}--hasBaseStyles`, className);
   const sentimentProps = {
     ref,
     id,
-    'data-testid': testId,
+    'data-testid': dataTestId,
     className: classNames,
     style,
     ...props

package/build/sentimentSurface/SentimentSurface.js.map

@@ -1 +1 @@
-{"version":3,"file":"SentimentSurface.js","sources":["../../src/sentimentSurface/SentimentSurface.tsx"],"sourcesContent":["import { forwardRef, ElementType, ForwardedRef } from 'react';\nimport { clsx } from 'clsx';\n\nimport {\n  SentimentSurfaceComponentProps,\n  SentimentSurfaceComponent,\n} from './SentimentSurface.types';\nimport { getSentimentSurfaceClassName } from './classMap';\n\n/**\n * SentimentSurface is a polymorphic container component that applies contextual background colours\n * and text styling based on sentiment types (negative, warning, neutral, success, proposition).\n * It's designed to visually communicate the nature or importance of its content through colour.\n *\n * @param {ElementType} [as='div'] - Optional prop to override the HTML element rendered.\n * @param {Sentiment} sentiment - Required prop to set the sentiment type (negative, warning, neutral, success, proposition).\n * @param {Emphasis} [emphasis='base'] - Optional prop to specify the emphasis level (base or elevated).\n * @param {ReactNode} [children] - Content to render inside the surface.\n * @param {string} [className] - Additional CSS classes to apply.\n * @param {CSSProperties} [style] - Inline styles to apply.\n * @param {string} [id] - Unique identifier for the component.\n * @param {string} [testId] - A unique string that appears as data attribute `data-testid` in the rendered code.\n *\n * @component\n * @example\n * ```tsx\n * // Basic usage with negative sentiment\n * <SentimentSurface sentiment=\"negative\">\n *   Your payment has failed\n * </SentimentSurface>\n * ```\n *\n * @see {@link SentimentSurface} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/sentiment-surface--docs|Storybook Wise Design}\n */\n// @ts-expect-error - Generic forwardRef limitation. See: https://fettblog.eu/typescript-react-generic-forward-refs/\nconst SentimentSurface: SentimentSurfaceComponent = forwardRef(function SentimentSurface<\n  T extends ElementType = 'div',\n>(\n  {\n    as,\n    sentiment,\n    emphasis = 'base',\n    className,\n    style,\n    children,\n    id,\n    testId,\n    ...props\n  }: SentimentSurfaceComponentProps<T>,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const Element = as ?? 'div';\n  const classNames = clsx(getSentimentSurfaceClassName(sentiment, emphasis), className);\n  const sentimentProps = {\n    ref,\n    id,\n    'data-testid': testId,\n    className: classNames,\n    style,\n    ...props,\n  };\n\n  return (\n    // @ts-expect-error - Generic forwardRef limitation. See: https://fettblog.eu/typescript-react-generic-forward-refs/\n    <Element {...sentimentProps}>{children}</Element>\n  );\n});\n\nSentimentSurface.displayName = 'SentimentSurface';\n\nexport default SentimentSurface;\n"],"names":["SentimentSurface","forwardRef","as","sentiment","emphasis","className","style","children","id","testId","props","ref","Element","classNames","clsx","getSentimentSurfaceClassName","sentimentProps","_jsx","displayName"],"mappings":";;;;;;;;;AAoCA,MAAMA,gBAAgB,gBAA8BC,gBAAU,CAAC,SAASD,gBAAgBA,CAGtF;EACEE,EAAE;EACFC,SAAS;AACTC,EAAAA,QAAQ,GAAG,MAAM;EACjBC,SAAS;EACTC,KAAK;EACLC,QAAQ;EACRC,EAAE;EACFC,MAAM;EACN,GAAGC;AAAK,CAC0B,EACpCC,GAA8B,EAAA;AAE9B,EAAA,MAAMC,OAAO,GAAGV,EAAE,IAAI,KAAK;AAC3B,EAAA,MAAMW,UAAU,GAAGC,SAAI,CAACC,qCAA4B,CAACZ,SAAS,EAAEC,QAAQ,CAAC,EAAEC,SAAS,CAAC;AACrF,EAAA,MAAMW,cAAc,GAAG;IACrBL,GAAG;IACHH,EAAE;AACF,IAAA,aAAa,EAAEC,MAAM;AACrBJ,IAAAA,SAAS,EAAEQ,UAAU;IACrBP,KAAK;IACL,GAAGI;GACJ;AAED,EAAA;AAAA;AACE;AACAO,IAAAA,cAAA,CAACL,OAAO,EAAA;AAAA,MAAA,GAAKI,cAAc;AAAAT,MAAAA,QAAA,EAAGA;KAAkB;AAAC;AAErD,CAAC;AAEDP,gBAAgB,CAACkB,WAAW,GAAG,kBAAkB;;;;"}
+{"version":3,"file":"SentimentSurface.js","sources":["../../src/sentimentSurface/SentimentSurface.tsx"],"sourcesContent":["import { forwardRef, ElementType, ForwardedRef } from 'react';\nimport { clsx } from 'clsx';\n\nimport {\n  SentimentSurfaceComponentProps,\n  SentimentSurfaceComponent,\n} from './SentimentSurface.types';\n\n/**\n * SentimentSurface is a polymorphic container component that exposes and, optionally, applies\n * contextual colour tokens as CSS custom properties, based on sentiment types (`negative`,\n * `warning`, `neutral`, `success`, `proposition`).\n *\n * @param {ElementType} [as='div'] - Optional prop to override the HTML element rendered.\n * @param {Sentiment} sentiment - Required prop to set the sentiment type (negative, warning, neutral, success, proposition).\n * @param {Emphasis} [emphasis='base'] - Optional prop to specify the emphasis level (base or elevated).\n * @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.\n * @param {ReactNode} [children] - Content to render inside the surface.\n * @param {string} [className] - Additional CSS classes to apply.\n * @param {CSSProperties} [style] - Inline styles to apply.\n * @param {string} [id] - Unique identifier for the component.\n * @param {string} [data-testid] - A unique string that appears as data attribute `data-testid` in the rendered code.\n *\n * @component\n * @example\n * ```tsx\n * // Basic usage with negative sentiment\n * <SentimentSurface sentiment=\"negative\">\n *   Your payment has failed\n * </SentimentSurface>\n * ```\n *\n * @see {@link SentimentSurface} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/sentiment-surface--docs|Storybook Wise Design}\n */\n// @ts-expect-error - Generic forwardRef limitation. See: https://fettblog.eu/typescript-react-generic-forward-refs/\nconst SentimentSurface: SentimentSurfaceComponent = forwardRef(function SentimentSurface<\n  T extends ElementType = 'div',\n>(\n  {\n    as,\n    sentiment,\n    emphasis = 'base',\n    hasBaseStyles = true,\n    style,\n    className,\n    children,\n    id,\n    'data-testid': dataTestId,\n    ...props\n  }: SentimentSurfaceComponentProps<T>,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const Element = as ?? 'div';\n  const BASE_CLASS = 'wds-sentiment-surface';\n  const classNames = clsx(\n    BASE_CLASS,\n    `${BASE_CLASS}-${sentiment}-${emphasis}`,\n    hasBaseStyles && `${BASE_CLASS}--hasBaseStyles`,\n    className,\n  );\n  const sentimentProps = {\n    ref,\n    id,\n    'data-testid': dataTestId,\n    className: classNames,\n    style,\n    ...props,\n  };\n\n  return (\n    // @ts-expect-error - Generic forwardRef limitation. See: https://fettblog.eu/typescript-react-generic-forward-refs/\n    <Element {...sentimentProps}>{children}</Element>\n  );\n});\n\nSentimentSurface.displayName = 'SentimentSurface';\n\nexport default SentimentSurface;\n"],"names":["SentimentSurface","forwardRef","as","sentiment","emphasis","hasBaseStyles","style","className","children","id","dataTestId","props","ref","Element","BASE_CLASS","classNames","clsx","sentimentProps","_jsx","displayName"],"mappings":";;;;;;;;AAoCA,MAAMA,gBAAgB,gBAA8BC,gBAAU,CAAC,SAASD,gBAAgBA,CAGtF;EACEE,EAAE;EACFC,SAAS;AACTC,EAAAA,QAAQ,GAAG,MAAM;AACjBC,EAAAA,aAAa,GAAG,IAAI;EACpBC,KAAK;EACLC,SAAS;EACTC,QAAQ;EACRC,EAAE;AACF,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAK,CAC0B,EACpCC,GAA8B,EAAA;AAE9B,EAAA,MAAMC,OAAO,GAAGX,EAAE,IAAI,KAAK;EAC3B,MAAMY,UAAU,GAAG,uBAAuB;EAC1C,MAAMC,UAAU,GAAGC,SAAI,CACrBF,UAAU,EACV,CAAA,EAAGA,UAAU,CAAA,CAAA,EAAIX,SAAS,IAAIC,QAAQ,CAAA,CAAE,EACxCC,aAAa,IAAI,GAAGS,UAAU,CAAA,eAAA,CAAiB,EAC/CP,SAAS,CACV;AACD,EAAA,MAAMU,cAAc,GAAG;IACrBL,GAAG;IACHH,EAAE;AACF,IAAA,aAAa,EAAEC,UAAU;AACzBH,IAAAA,SAAS,EAAEQ,UAAU;IACrBT,KAAK;IACL,GAAGK;GACJ;AAED,EAAA;AAAA;AACE;AACAO,IAAAA,cAAA,CAACL,OAAO,EAAA;AAAA,MAAA,GAAKI,cAAc;AAAAT,MAAAA,QAAA,EAAGA;KAAkB;AAAC;AAErD,CAAC;AAEDR,gBAAgB,CAACmB,WAAW,GAAG,kBAAkB;;;;"}

package/build/sentimentSurface/SentimentSurface.mjs

@@ -1,25 +1,26 @@
 import { forwardRef } from 'react';
 import { clsx } from 'clsx';
-import { getSentimentSurfaceClassName } from './classMap.mjs';
 import { jsx } from 'react/jsx-runtime';
 
 const SentimentSurface = /*#__PURE__*/forwardRef(function SentimentSurface({
   as,
   sentiment,
   emphasis = 'base',
-  className,
+  hasBaseStyles = true,
   style,
+  className,
   children,
   id,
-  testId,
+  'data-testid': dataTestId,
   ...props
 }, ref) {
   const Element = as ?? 'div';
-  const classNames = clsx(getSentimentSurfaceClassName(sentiment, emphasis), className);
+  const BASE_CLASS = 'wds-sentiment-surface';
+  const classNames = clsx(BASE_CLASS, `${BASE_CLASS}-${sentiment}-${emphasis}`, hasBaseStyles && `${BASE_CLASS}--hasBaseStyles`, className);
   const sentimentProps = {
     ref,
     id,
-    'data-testid': testId,
+    'data-testid': dataTestId,
     className: classNames,
     style,
     ...props

package/build/sentimentSurface/SentimentSurface.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SentimentSurface.mjs","sources":["../../src/sentimentSurface/SentimentSurface.tsx"],"sourcesContent":["import { forwardRef, ElementType, ForwardedRef } from 'react';\nimport { clsx } from 'clsx';\n\nimport {\n  SentimentSurfaceComponentProps,\n  SentimentSurfaceComponent,\n} from './SentimentSurface.types';\nimport { getSentimentSurfaceClassName } from './classMap';\n\n/**\n * SentimentSurface is a polymorphic container component that applies contextual background colours\n * and text styling based on sentiment types (negative, warning, neutral, success, proposition).\n * It's designed to visually communicate the nature or importance of its content through colour.\n *\n * @param {ElementType} [as='div'] - Optional prop to override the HTML element rendered.\n * @param {Sentiment} sentiment - Required prop to set the sentiment type (negative, warning, neutral, success, proposition).\n * @param {Emphasis} [emphasis='base'] - Optional prop to specify the emphasis level (base or elevated).\n * @param {ReactNode} [children] - Content to render inside the surface.\n * @param {string} [className] - Additional CSS classes to apply.\n * @param {CSSProperties} [style] - Inline styles to apply.\n * @param {string} [id] - Unique identifier for the component.\n * @param {string} [testId] - A unique string that appears as data attribute `data-testid` in the rendered code.\n *\n * @component\n * @example\n * ```tsx\n * // Basic usage with negative sentiment\n * <SentimentSurface sentiment=\"negative\">\n *   Your payment has failed\n * </SentimentSurface>\n * ```\n *\n * @see {@link SentimentSurface} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/sentiment-surface--docs|Storybook Wise Design}\n */\n// @ts-expect-error - Generic forwardRef limitation. See: https://fettblog.eu/typescript-react-generic-forward-refs/\nconst SentimentSurface: SentimentSurfaceComponent = forwardRef(function SentimentSurface<\n  T extends ElementType = 'div',\n>(\n  {\n    as,\n    sentiment,\n    emphasis = 'base',\n    className,\n    style,\n    children,\n    id,\n    testId,\n    ...props\n  }: SentimentSurfaceComponentProps<T>,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const Element = as ?? 'div';\n  const classNames = clsx(getSentimentSurfaceClassName(sentiment, emphasis), className);\n  const sentimentProps = {\n    ref,\n    id,\n    'data-testid': testId,\n    className: classNames,\n    style,\n    ...props,\n  };\n\n  return (\n    // @ts-expect-error - Generic forwardRef limitation. See: https://fettblog.eu/typescript-react-generic-forward-refs/\n    <Element {...sentimentProps}>{children}</Element>\n  );\n});\n\nSentimentSurface.displayName = 'SentimentSurface';\n\nexport default SentimentSurface;\n"],"names":["SentimentSurface","forwardRef","as","sentiment","emphasis","className","style","children","id","testId","props","ref","Element","classNames","clsx","getSentimentSurfaceClassName","sentimentProps","_jsx","displayName"],"mappings":";;;;;AAoCA,MAAMA,gBAAgB,gBAA8BC,UAAU,CAAC,SAASD,gBAAgBA,CAGtF;EACEE,EAAE;EACFC,SAAS;AACTC,EAAAA,QAAQ,GAAG,MAAM;EACjBC,SAAS;EACTC,KAAK;EACLC,QAAQ;EACRC,EAAE;EACFC,MAAM;EACN,GAAGC;AAAK,CAC0B,EACpCC,GAA8B,EAAA;AAE9B,EAAA,MAAMC,OAAO,GAAGV,EAAE,IAAI,KAAK;AAC3B,EAAA,MAAMW,UAAU,GAAGC,IAAI,CAACC,4BAA4B,CAACZ,SAAS,EAAEC,QAAQ,CAAC,EAAEC,SAAS,CAAC;AACrF,EAAA,MAAMW,cAAc,GAAG;IACrBL,GAAG;IACHH,EAAE;AACF,IAAA,aAAa,EAAEC,MAAM;AACrBJ,IAAAA,SAAS,EAAEQ,UAAU;IACrBP,KAAK;IACL,GAAGI;GACJ;AAED,EAAA;AAAA;AACE;AACAO,IAAAA,GAAA,CAACL,OAAO,EAAA;AAAA,MAAA,GAAKI,cAAc;AAAAT,MAAAA,QAAA,EAAGA;KAAkB;AAAC;AAErD,CAAC;AAEDP,gBAAgB,CAACkB,WAAW,GAAG,kBAAkB;;;;"}
+{"version":3,"file":"SentimentSurface.mjs","sources":["../../src/sentimentSurface/SentimentSurface.tsx"],"sourcesContent":["import { forwardRef, ElementType, ForwardedRef } from 'react';\nimport { clsx } from 'clsx';\n\nimport {\n  SentimentSurfaceComponentProps,\n  SentimentSurfaceComponent,\n} from './SentimentSurface.types';\n\n/**\n * SentimentSurface is a polymorphic container component that exposes and, optionally, applies\n * contextual colour tokens as CSS custom properties, based on sentiment types (`negative`,\n * `warning`, `neutral`, `success`, `proposition`).\n *\n * @param {ElementType} [as='div'] - Optional prop to override the HTML element rendered.\n * @param {Sentiment} sentiment - Required prop to set the sentiment type (negative, warning, neutral, success, proposition).\n * @param {Emphasis} [emphasis='base'] - Optional prop to specify the emphasis level (base or elevated).\n * @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.\n * @param {ReactNode} [children] - Content to render inside the surface.\n * @param {string} [className] - Additional CSS classes to apply.\n * @param {CSSProperties} [style] - Inline styles to apply.\n * @param {string} [id] - Unique identifier for the component.\n * @param {string} [data-testid] - A unique string that appears as data attribute `data-testid` in the rendered code.\n *\n * @component\n * @example\n * ```tsx\n * // Basic usage with negative sentiment\n * <SentimentSurface sentiment=\"negative\">\n *   Your payment has failed\n * </SentimentSurface>\n * ```\n *\n * @see {@link SentimentSurface} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/sentiment-surface--docs|Storybook Wise Design}\n */\n// @ts-expect-error - Generic forwardRef limitation. See: https://fettblog.eu/typescript-react-generic-forward-refs/\nconst SentimentSurface: SentimentSurfaceComponent = forwardRef(function SentimentSurface<\n  T extends ElementType = 'div',\n>(\n  {\n    as,\n    sentiment,\n    emphasis = 'base',\n    hasBaseStyles = true,\n    style,\n    className,\n    children,\n    id,\n    'data-testid': dataTestId,\n    ...props\n  }: SentimentSurfaceComponentProps<T>,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const Element = as ?? 'div';\n  const BASE_CLASS = 'wds-sentiment-surface';\n  const classNames = clsx(\n    BASE_CLASS,\n    `${BASE_CLASS}-${sentiment}-${emphasis}`,\n    hasBaseStyles && `${BASE_CLASS}--hasBaseStyles`,\n    className,\n  );\n  const sentimentProps = {\n    ref,\n    id,\n    'data-testid': dataTestId,\n    className: classNames,\n    style,\n    ...props,\n  };\n\n  return (\n    // @ts-expect-error - Generic forwardRef limitation. See: https://fettblog.eu/typescript-react-generic-forward-refs/\n    <Element {...sentimentProps}>{children}</Element>\n  );\n});\n\nSentimentSurface.displayName = 'SentimentSurface';\n\nexport default SentimentSurface;\n"],"names":["SentimentSurface","forwardRef","as","sentiment","emphasis","hasBaseStyles","style","className","children","id","dataTestId","props","ref","Element","BASE_CLASS","classNames","clsx","sentimentProps","_jsx","displayName"],"mappings":";;;;AAoCA,MAAMA,gBAAgB,gBAA8BC,UAAU,CAAC,SAASD,gBAAgBA,CAGtF;EACEE,EAAE;EACFC,SAAS;AACTC,EAAAA,QAAQ,GAAG,MAAM;AACjBC,EAAAA,aAAa,GAAG,IAAI;EACpBC,KAAK;EACLC,SAAS;EACTC,QAAQ;EACRC,EAAE;AACF,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAK,CAC0B,EACpCC,GAA8B,EAAA;AAE9B,EAAA,MAAMC,OAAO,GAAGX,EAAE,IAAI,KAAK;EAC3B,MAAMY,UAAU,GAAG,uBAAuB;EAC1C,MAAMC,UAAU,GAAGC,IAAI,CACrBF,UAAU,EACV,CAAA,EAAGA,UAAU,CAAA,CAAA,EAAIX,SAAS,IAAIC,QAAQ,CAAA,CAAE,EACxCC,aAAa,IAAI,GAAGS,UAAU,CAAA,eAAA,CAAiB,EAC/CP,SAAS,CACV;AACD,EAAA,MAAMU,cAAc,GAAG;IACrBL,GAAG;IACHH,EAAE;AACF,IAAA,aAAa,EAAEC,UAAU;AACzBH,IAAAA,SAAS,EAAEQ,UAAU;IACrBT,KAAK;IACL,GAAGK;GACJ;AAED,EAAA;AAAA;AACE;AACAO,IAAAA,GAAA,CAACL,OAAO,EAAA;AAAA,MAAA,GAAKI,cAAc;AAAAT,MAAAA,QAAA,EAAGA;KAAkB;AAAC;AAErD,CAAC;AAEDR,gBAAgB,CAACmB,WAAW,GAAG,kBAAkB;;;;"}

package/build/styles/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,16 +13,16 @@
   --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);
@@ -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);