@transferwise/components 46.116.0 → 46.117.0

package/build/styles/main.css

@@ -1,4 +1,7 @@
 .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);
 }
@@ -36,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;
@@ -878,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;
 }
@@ -903,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);
-}
-.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);
+  color: var(--color-sentiment-content-primary);
 }
-.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;
@@ -1111,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);
@@ -1149,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 {
@@ -1270,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);
@@ -1284,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);
@@ -1384,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);
@@ -3133,8 +3057,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 }
 @supports (hyphenate-limit-chars: 1) {
   .np-form-control--size-lg {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
   @media (min-width: 768px) {
@@ -3150,8 +3073,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 }
 @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
   .np-form-control--size-lg {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }
@@ -4327,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;
@@ -5189,8 +5112,7 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 @supports (hyphenate-limit-chars: 1) {
   .np-popover__container.np-bottom-sheet .np-popover__title {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
   @media (min-width: 768px) {
@@ -5206,8 +5128,7 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
   .np-popover__container.np-bottom-sheet .np-popover__title {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }

package/build/styles/popover/Popover.css

@@ -38,8 +38,7 @@
 }
 @supports (hyphenate-limit-chars: 1) {
   .np-popover__container.np-bottom-sheet .np-popover__title {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
   @media (min-width: 768px) {
@@ -55,8 +54,7 @@
 }
 @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
   .np-popover__container.np-bottom-sheet .np-popover__title {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }

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

@@ -19,18 +19,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;
 }
@@ -44,110 +61,14 @@
 }
 .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);
-}
-.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);
+  color: var(--color-sentiment-content-primary);
 }
-.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;
 }

package/build/styles/sentimentSurface/SentimentSurface.css

@@ -1,4 +1,7 @@
 .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);
 }
@@ -36,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;

package/build/types/alert/Alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/alert/Alert.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,SAAS,EACT,IAAI,EACJ,MAAM,EAGP,MAAM,WAAW,CAAC;AAUnB,MAAM,MAAM,WAAW,GAAG;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,kDAAkD;AAClD,KAAK,mBAAmB,GAAG,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,CAAC;AACrF,KAAK,iBAAiB,GAAG,GACrB,SAAS,CAAC,QAAQ,GAClB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,QAAQ,GAElB,SAAS,CAAC,OAAO,GACjB,MAAM,CAAC,OAAO,EAAE,CAAC;AACrB,MAAM,MAAM,SAAS,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;AAEhE,oBAAY,kBAAkB;IAC5B,QAAQ,YAAY;IACpB,GAAG,cAAc;IACjB,SAAS,aAAa;IACtB,WAAW,cAAc;IACzB,MAAM,gBAAgB;IACtB,YAAY,eAAe;CAC5B;AAED,MAAM,WAAW,UAAU;IACzB,yIAAyI;IACzI,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;SAGK;IACL,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kGAAkG;IAClG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvD,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAChC,oHAAoH;IACpH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC;CAClB;AAeD,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,MAAM,EACN,SAAS,EACT,IAAI,EACJ,eAAe,EACf,SAAS,EACT,OAAO,EACP,KAAK,EACL,IAAgB,EAChB,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,WAAW,GACZ,EAAE,UAAU,+BAoJZ"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/alert/Alert.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,SAAS,EACT,IAAI,EACJ,MAAM,EAGP,MAAM,WAAW,CAAC;AAUnB,MAAM,MAAM,WAAW,GAAG;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,kDAAkD;AAClD,KAAK,mBAAmB,GAAG,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,CAAC;AACrF,KAAK,iBAAiB,GAAG,GACrB,SAAS,CAAC,QAAQ,GAClB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,QAAQ,GAElB,SAAS,CAAC,OAAO,GACjB,MAAM,CAAC,OAAO,EAAE,CAAC;AACrB,MAAM,MAAM,SAAS,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;AAEhE,oBAAY,kBAAkB;IAC5B,QAAQ,YAAY;IACpB,GAAG,cAAc;IACjB,SAAS,aAAa;IACtB,WAAW,cAAc;IACzB,MAAM,gBAAgB;IACtB,YAAY,eAAe;CAC5B;AAED,MAAM,WAAW,UAAU;IACzB,yIAAyI;IACzI,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;SAGK;IACL,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kGAAkG;IAClG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvD,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAChC,oHAAoH;IACpH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC;CAClB;AAeD,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,MAAM,EACN,SAAS,EACT,IAAI,EACJ,eAAe,EACf,SAAS,EACT,OAAO,EACP,KAAK,EACL,IAAgB,EAChB,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,WAAW,GACZ,EAAE,UAAU,+BAsJZ"}

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 {
     /**