@transferwise/components 0.0.0-experimental-e9893fb → 0.0.0-experimental-9773c7e

package/build/main.css

@@ -2698,22 +2698,22 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   border-radius: var(--radius-small);
   word-break: break-word;
   word-wrap: break-word;
-  -webkit-hyphens: auto;
-          hyphens: auto;
-  cursor: default;
 }
 .np-item-prompt .np-prompt-icon {
-  padding-right: 6px;
-  padding-top: 3px;
-  padding-bottom: 3px;
-}
-.np-item-prompt .np-prompt-icon .tw-icon-tags {
+  padding-right: calc(12px / 2);
+  padding-right: calc(var(--size-12) / 2);
+  padding-top: calc(4px - 1);
+  padding-top: calc(var(--size-4) - 1);
+  padding-bottom: calc(4px - 1);
+  padding-bottom: calc(var(--size-4) - 1);
+}
+.np-item-prompt .np-prompt-icon .tw-icon-tags,
+.np-item-prompt .np-prompt-icon .tw-icon-confetti {
   color: var(--color-sentiment-positive-primary);
 }
 .np-item-prompt a {
   text-underline-offset: calc(4px / 2);
   text-underline-offset: calc(var(--size-4) / 2);
-  display: inline;
 }
 .np-item-prompt.np-prompt-interactive {
   -webkit-text-decoration: none;
@@ -2721,10 +2721,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   cursor: pointer;
   border: none;
 }
-.np-item-prompt.np-prompt-interactive .np-prompt-text {
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-}
 .np-item-prompt.negative {
   background-color: var(--color-sentiment-negative-secondary);
   color: var(--color-sentiment-negative-primary);
@@ -2745,28 +2741,34 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
 }
 .np-item-prompt.positive,
-.np-item-prompt.discount {
+.np-item-prompt.discount,
+.np-item-prompt.savings {
   background-color: var(--color-sentiment-positive-secondary);
   color: var(--color-sentiment-positive-primary);
 }
 .np-item-prompt.positive a,
-.np-item-prompt.discount a {
+.np-item-prompt.discount a,
+.np-item-prompt.savings a {
   color: var(--color-sentiment-positive-primary);
 }
 .np-item-prompt.positive a:hover,
-.np-item-prompt.discount a:hover {
+.np-item-prompt.discount a:hover,
+.np-item-prompt.savings a:hover {
   color: var(--color-sentiment-positive-primary-hover);
 }
 .np-item-prompt.positive a:active,
-.np-item-prompt.discount a:active {
+.np-item-prompt.discount a:active,
+.np-item-prompt.savings a:active {
   color: var(--color-sentiment-positive-primary-active);
 }
 .np-prompt-interactive.np-item-prompt.positive:hover,
-.np-prompt-interactive.np-item-prompt.discount:hover {
+.np-prompt-interactive.np-item-prompt.discount:hover,
+.np-prompt-interactive.np-item-prompt.savings:hover {
   background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
 }
 .np-prompt-interactive.np-item-prompt.positive:active,
-.np-prompt-interactive.np-item-prompt.discount:active {
+.np-prompt-interactive.np-item-prompt.discount:active,
+.np-prompt-interactive.np-item-prompt.savings:active {
   background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
 }
 .np-item-prompt.neutral {

package/build/styles/item/Item.css

@@ -76,22 +76,22 @@
   border-radius: var(--radius-small);
   word-break: break-word;
   word-wrap: break-word;
-  -webkit-hyphens: auto;
-          hyphens: auto;
-  cursor: default;
 }
 .np-item-prompt .np-prompt-icon {
-  padding-right: 6px;
-  padding-top: 3px;
-  padding-bottom: 3px;
-}
-.np-item-prompt .np-prompt-icon .tw-icon-tags {
+  padding-right: calc(12px / 2);
+  padding-right: calc(var(--size-12) / 2);
+  padding-top: calc(4px - 1);
+  padding-top: calc(var(--size-4) - 1);
+  padding-bottom: calc(4px - 1);
+  padding-bottom: calc(var(--size-4) - 1);
+}
+.np-item-prompt .np-prompt-icon .tw-icon-tags,
+.np-item-prompt .np-prompt-icon .tw-icon-confetti {
   color: var(--color-sentiment-positive-primary);
 }
 .np-item-prompt a {
   text-underline-offset: calc(4px / 2);
   text-underline-offset: calc(var(--size-4) / 2);
-  display: inline;
 }
 .np-item-prompt.np-prompt-interactive {
   -webkit-text-decoration: none;
@@ -99,10 +99,6 @@
   cursor: pointer;
   border: none;
 }
-.np-item-prompt.np-prompt-interactive .np-prompt-text {
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-}
 .np-item-prompt.negative {
   background-color: var(--color-sentiment-negative-secondary);
   color: var(--color-sentiment-negative-primary);
@@ -123,28 +119,34 @@
   background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
 }
 .np-item-prompt.positive,
-.np-item-prompt.discount {
+.np-item-prompt.discount,
+.np-item-prompt.savings {
   background-color: var(--color-sentiment-positive-secondary);
   color: var(--color-sentiment-positive-primary);
 }
 .np-item-prompt.positive a,
-.np-item-prompt.discount a {
+.np-item-prompt.discount a,
+.np-item-prompt.savings a {
   color: var(--color-sentiment-positive-primary);
 }
 .np-item-prompt.positive a:hover,
-.np-item-prompt.discount a:hover {
+.np-item-prompt.discount a:hover,
+.np-item-prompt.savings a:hover {
   color: var(--color-sentiment-positive-primary-hover);
 }
 .np-item-prompt.positive a:active,
-.np-item-prompt.discount a:active {
+.np-item-prompt.discount a:active,
+.np-item-prompt.savings a:active {
   color: var(--color-sentiment-positive-primary-active);
 }
 .np-prompt-interactive.np-item-prompt.positive:hover,
-.np-prompt-interactive.np-item-prompt.discount:hover {
+.np-prompt-interactive.np-item-prompt.discount:hover,
+.np-prompt-interactive.np-item-prompt.savings:hover {
   background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
 }
 .np-prompt-interactive.np-item-prompt.positive:active,
-.np-prompt-interactive.np-item-prompt.discount:active {
+.np-prompt-interactive.np-item-prompt.discount:active,
+.np-prompt-interactive.np-item-prompt.savings:active {
   background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
 }
 .np-item-prompt.neutral {

package/build/styles/main.css

@@ -2698,22 +2698,22 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   border-radius: var(--radius-small);
   word-break: break-word;
   word-wrap: break-word;
-  -webkit-hyphens: auto;
-          hyphens: auto;
-  cursor: default;
 }
 .np-item-prompt .np-prompt-icon {
-  padding-right: 6px;
-  padding-top: 3px;
-  padding-bottom: 3px;
-}
-.np-item-prompt .np-prompt-icon .tw-icon-tags {
+  padding-right: calc(12px / 2);
+  padding-right: calc(var(--size-12) / 2);
+  padding-top: calc(4px - 1);
+  padding-top: calc(var(--size-4) - 1);
+  padding-bottom: calc(4px - 1);
+  padding-bottom: calc(var(--size-4) - 1);
+}
+.np-item-prompt .np-prompt-icon .tw-icon-tags,
+.np-item-prompt .np-prompt-icon .tw-icon-confetti {
   color: var(--color-sentiment-positive-primary);
 }
 .np-item-prompt a {
   text-underline-offset: calc(4px / 2);
   text-underline-offset: calc(var(--size-4) / 2);
-  display: inline;
 }
 .np-item-prompt.np-prompt-interactive {
   -webkit-text-decoration: none;
@@ -2721,10 +2721,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   cursor: pointer;
   border: none;
 }
-.np-item-prompt.np-prompt-interactive .np-prompt-text {
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-}
 .np-item-prompt.negative {
   background-color: var(--color-sentiment-negative-secondary);
   color: var(--color-sentiment-negative-primary);
@@ -2745,28 +2741,34 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
 }
 .np-item-prompt.positive,
-.np-item-prompt.discount {
+.np-item-prompt.discount,
+.np-item-prompt.savings {
   background-color: var(--color-sentiment-positive-secondary);
   color: var(--color-sentiment-positive-primary);
 }
 .np-item-prompt.positive a,
-.np-item-prompt.discount a {
+.np-item-prompt.discount a,
+.np-item-prompt.savings a {
   color: var(--color-sentiment-positive-primary);
 }
 .np-item-prompt.positive a:hover,
-.np-item-prompt.discount a:hover {
+.np-item-prompt.discount a:hover,
+.np-item-prompt.savings a:hover {
   color: var(--color-sentiment-positive-primary-hover);
 }
 .np-item-prompt.positive a:active,
-.np-item-prompt.discount a:active {
+.np-item-prompt.discount a:active,
+.np-item-prompt.savings a:active {
   color: var(--color-sentiment-positive-primary-active);
 }
 .np-prompt-interactive.np-item-prompt.positive:hover,
-.np-prompt-interactive.np-item-prompt.discount:hover {
+.np-prompt-interactive.np-item-prompt.discount:hover,
+.np-prompt-interactive.np-item-prompt.savings:hover {
   background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
 }
 .np-prompt-interactive.np-item-prompt.positive:active,
-.np-prompt-interactive.np-item-prompt.discount:active {
+.np-prompt-interactive.np-item-prompt.discount:active,
+.np-prompt-interactive.np-item-prompt.savings:active {
   background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
 }
 .np-item-prompt.neutral {

package/build/types/common/commonProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"commonProps.d.ts","sourceRoot":"","sources":["../../../src/common/commonProps.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACxB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IAEtB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,KAAK,CAAC,yBAAyB,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9D,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,MAAM,GAAG,QAAQ,CAAC"}
+{"version":3,"file":"commonProps.d.ts","sourceRoot":"","sources":["../../../src/common/commonProps.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACxB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,KAAK,CAAC,yBAAyB,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9D,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,MAAM,GAAG,QAAQ,CAAC"}

package/build/types/item/Item.d.ts

@@ -34,7 +34,7 @@ export declare const Item: {
     Checkbox: (props: import("./ItemCheckbox").ItemCheckboxProps) => import("react").JSX.Element;
     IconButton: (props: import("./ItemIconButton").ItemIconButtonProps) => import("react").JSX.Element;
     Navigation: ({ onClick }: import("./ItemNavigation").ItemNavigationProps) => import("react").JSX.Element;
-    Prompt: ({ type, children, action }: import("./prompt").ItemPromptProps) => import("react").JSX.Element;
+    Prompt: ({ type, children, action }: import("./prompt/Prompt").ItemPromptProps) => import("react").JSX.Element;
 };
 export default Item;
 //# sourceMappingURL=Item.d.ts.map

package/build/types/item/prompt/Prompt.d.ts

@@ -1,9 +1,11 @@
 import { Sentiment } from '../../common';
-import { AlertAction } from '../../alert';
+import { LinkProps } from '../../link';
 export type ItemPromptProps = {
-    type: `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}` | 'discount';
-    children?: React.ReactNode;
-    action?: Pick<AlertAction, 'href' | 'target' | 'onClick' | 'aria-label'>;
+    type: `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}` | 'discount' | 'savings';
+    children: React.ReactNode;
+    action?: Pick<LinkProps, 'href' | 'target' | 'onClick'> & {
+        'aria-label'?: string;
+    };
 };
 export declare const ItemPrompt: ({ type, children, action }: ItemPromptProps) => import("react").JSX.Element;
 export default ItemPrompt;

package/build/types/item/prompt/Prompt.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Prompt.d.ts","sourceRoot":"","sources":["../../../../src/item/prompt/Prompt.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EACA,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,EAAE,GACpF,UAAU,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,YAAY,CAAC,CAAC;CAC1E,CAAC;AAEF,eAAO,MAAM,UAAU,+BAAgC,eAAe,gCAmBrE,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"Prompt.d.ts","sourceRoot":"","sources":["../../../../src/item/prompt/Prompt.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzC,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAGvC,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EACA,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,EAAE,GACpF,UAAU,GACV,SAAS,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC,GAAG;QAAE,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACrF,CAAC;AAEF,eAAO,MAAM,UAAU,+BAAgC,eAAe,gCAyBrE,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-e9893fb",
+  "version": "0.0.0-experimental-9773c7e",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/common/commonProps.ts

@@ -13,7 +13,6 @@ export type AriaLabelProperty = {
 };
 
 export type LinkProps = {
-  // should this be required if onClick is optional?
   href: string;
   target?: React.HTMLAttributeAnchorTarget;
   onClick?: React.MouseEventHandler<HTMLElement>;

package/src/item/Item.css

@@ -76,22 +76,22 @@
   border-radius: var(--radius-small);
   word-break: break-word;
   word-wrap: break-word;
-  -webkit-hyphens: auto;
-          hyphens: auto;
-  cursor: default;
 }
 .np-item-prompt .np-prompt-icon {
-  padding-right: 6px;
-  padding-top: 3px;
-  padding-bottom: 3px;
-}
-.np-item-prompt .np-prompt-icon .tw-icon-tags {
+  padding-right: calc(12px / 2);
+  padding-right: calc(var(--size-12) / 2);
+  padding-top: calc(4px - 1);
+  padding-top: calc(var(--size-4) - 1);
+  padding-bottom: calc(4px - 1);
+  padding-bottom: calc(var(--size-4) - 1);
+}
+.np-item-prompt .np-prompt-icon .tw-icon-tags,
+.np-item-prompt .np-prompt-icon .tw-icon-confetti {
   color: var(--color-sentiment-positive-primary);
 }
 .np-item-prompt a {
   text-underline-offset: calc(4px / 2);
   text-underline-offset: calc(var(--size-4) / 2);
-  display: inline;
 }
 .np-item-prompt.np-prompt-interactive {
   -webkit-text-decoration: none;
@@ -99,10 +99,6 @@
   cursor: pointer;
   border: none;
 }
-.np-item-prompt.np-prompt-interactive .np-prompt-text {
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-}
 .np-item-prompt.negative {
   background-color: var(--color-sentiment-negative-secondary);
   color: var(--color-sentiment-negative-primary);
@@ -123,28 +119,34 @@
   background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
 }
 .np-item-prompt.positive,
-.np-item-prompt.discount {
+.np-item-prompt.discount,
+.np-item-prompt.savings {
   background-color: var(--color-sentiment-positive-secondary);
   color: var(--color-sentiment-positive-primary);
 }
 .np-item-prompt.positive a,
-.np-item-prompt.discount a {
+.np-item-prompt.discount a,
+.np-item-prompt.savings a {
   color: var(--color-sentiment-positive-primary);
 }
 .np-item-prompt.positive a:hover,
-.np-item-prompt.discount a:hover {
+.np-item-prompt.discount a:hover,
+.np-item-prompt.savings a:hover {
   color: var(--color-sentiment-positive-primary-hover);
 }
 .np-item-prompt.positive a:active,
-.np-item-prompt.discount a:active {
+.np-item-prompt.discount a:active,
+.np-item-prompt.savings a:active {
   color: var(--color-sentiment-positive-primary-active);
 }
 .np-prompt-interactive.np-item-prompt.positive:hover,
-.np-prompt-interactive.np-item-prompt.discount:hover {
+.np-prompt-interactive.np-item-prompt.discount:hover,
+.np-prompt-interactive.np-item-prompt.savings:hover {
   background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
 }
 .np-prompt-interactive.np-item-prompt.positive:active,
-.np-prompt-interactive.np-item-prompt.discount:active {
+.np-prompt-interactive.np-item-prompt.discount:active,
+.np-prompt-interactive.np-item-prompt.savings:active {
   background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
 }
 .np-item-prompt.neutral {

package/src/item/Item.less

@@ -71,32 +71,26 @@
         border-radius: var(--radius-small);
         word-break: break-word;
         overflow-wrap: break-word;
-        hyphens: auto;
-        cursor: default;
         
         .np-prompt-icon {
-          padding-right: 6px;
-          padding-top: 3px;
-          padding-bottom: 3px;
+          padding-right: calc(var(--size-12) / 2);
+          padding-top: calc(var(--size-4) - 1);
+          padding-bottom: calc(var(--size-4) - 1);
       
-          .tw-icon-tags {
+          .tw-icon-tags,
+          .tw-icon-confetti {
             color: var(--color-sentiment-positive-primary);
           }
         }
       
         a {
           text-underline-offset: calc(var(--size-4) / 2); 
-          display: inline;
         }
       
         &.np-prompt-interactive {
           text-decoration: none;
           cursor: pointer;
           border: none;
-      
-          .np-prompt-text {
-            font-weight: var(--font-weight-regular);
-          }
         }
       
         &.negative {
@@ -121,7 +115,8 @@
           }
         }
         &.positive,
-        &.discount {
+        &.discount,
+        &.savings {
           background-color: var(--color-sentiment-positive-secondary);
           color: var(--color-sentiment-positive-primary);
           a {

package/src/item/Item.tsx

@@ -7,7 +7,7 @@ import { IconButton } from './ItemIconButton';
 import { Checkbox } from './ItemCheckbox';
 import { Navigation } from './ItemNavigation';
 import { clsx } from 'clsx';
-import Prompt from './prompt';
+import Prompt from './prompt/Prompt';
 
 export type ItemTypes =
   | 'none'

package/src/item/prompt/Prompt.spec.tsx

@@ -0,0 +1,77 @@
+import { render, screen, mockMatchMedia } from '../../test-utils';
+import { ItemPrompt } from './Prompt';
+import { Sentiment } from '../../common';
+
+mockMatchMedia();
+
+describe('ItemPrompt', () => {
+  it('renders the aria-label when provided', () => {
+    const ariaLabel = 'Test aria-label';
+    render(
+      <ItemPrompt
+        type={Sentiment.POSITIVE}
+        action={{ 'aria-label': ariaLabel, href: 'https://example.com' }}
+      >
+        Positive prompt
+      </ItemPrompt>,
+    );
+
+    expect(screen.getByLabelText(ariaLabel)).toBeInTheDocument();
+  });
+
+  it('applies the interactive class when href is provided', () => {
+    render(
+      <ItemPrompt
+        type={Sentiment.POSITIVE}
+        action={{ href: 'https://example.com', 'aria-label': 'Interactive link' }}
+      >
+        Interactive link
+      </ItemPrompt>,
+    );
+
+    expect(screen.getByRole('link')).toHaveClass('np-prompt-interactive');
+  });
+
+  it('applies the interactive class when onClick is provided', () => {
+    render(
+      <ItemPrompt
+        type={Sentiment.POSITIVE}
+        action={{ onClick: jest.fn(), 'aria-label': 'Interactive button' }}
+      >
+        Interactive button
+      </ItemPrompt>,
+    );
+
+    expect(screen.getByRole('button')).toHaveClass('np-prompt-interactive');
+  });
+
+  it('does not apply the interactive class when no action is provided', () => {
+    render(<ItemPrompt type={Sentiment.POSITIVE}>Non-interactive prompt</ItemPrompt>);
+
+    expect(screen.getByText('Non-interactive prompt')).not.toHaveClass('np-prompt-interactive');
+  });
+
+  it('renders the children content', () => {
+    render(<ItemPrompt type={Sentiment.POSITIVE}>This is a child prompt</ItemPrompt>);
+
+    expect(screen.getByText('This is a child prompt')).toBeInTheDocument();
+  });
+
+  it('spreads additional props to the wrapper element', () => {
+    render(
+      <ItemPrompt
+        type={Sentiment.POSITIVE}
+        action={{
+          href: 'https://example.com',
+          target: '_blank',
+          'aria-label': 'Custom props prompt',
+        }}
+      >
+        Custom props prompt
+      </ItemPrompt>,
+    );
+
+    const link = screen.getByRole('link');
+    expect(link).toHaveAttribute('target', '_blank');
+  });
+});

package/src/item/prompt/Prompt.story.tsx

@@ -12,6 +12,18 @@ export default {
     children: 'You have done a terrible thing',
   },
   argTypes: {
+    type: {
+      options: [
+        Sentiment.POSITIVE,
+        Sentiment.NEGATIVE,
+        Sentiment.NEUTRAL,
+        Sentiment.WARNING,
+        'discount',
+        'savings',
+      ],
+      control: { type: 'radio' },
+      description: 'The type of prompt to display',
+    },
     action: {
       table: {
         disable: true,
@@ -29,24 +41,39 @@ export default {
 
 type CustomStory = StoryObj<
   ItemPromptProps & {
-    includeLink?: boolean;
-    makeTheWholeThingClickable?: boolean;
+    interactivity?: 'none' | 'full-anchor' | 'full-button' | 'link';
   }
 >;
 
 export const Basic: CustomStory = {
   args: {
-    includeLink: false,
-    makeTheWholeThingClickable: false,
+    interactivity: 'none',
+  },
+  argTypes: {
+    interactivity: {
+      options: ['none', 'full-button', 'full-anchor', 'link'],
+      control: { type: 'radio' },
+      description: 'The type of interactivity to display',
+    },
   },
-  render: ({ includeLink, makeTheWholeThingClickable, ...args }) => {
+  render: ({ interactivity, ...args }) => {
     return (
       <div>
         <ItemPrompt
           type={args.type}
-          action={makeTheWholeThingClickable ? { href: 'wise.com' } : undefined}
+          action={
+            interactivity === 'full-anchor'
+              ? { href: 'wise.com' }
+              : interactivity === 'full-button'
+                ? {
+                    onClick: () => {
+                      console.log('clicked');
+                    },
+                  }
+                : undefined
+          }
         >
-          {args.children} {includeLink && <Link href="www.wise.com">with a link</Link>}
+          {args.children} {interactivity === 'link' && <Link href="www.wise.com">with a link</Link>}
         </ItemPrompt>
       </div>
     );
@@ -81,6 +108,11 @@ export const Variants = () => {
           Discount prompt <Link href="www.wise.com">with a link to amazing content</Link>
         </ItemPrompt>
       </div>
+      <div className="m-b-2">
+        <ItemPrompt type="savings">
+          Savings prompt <Link href="www.wise.com">with a link to amazing content</Link>
+        </ItemPrompt>
+      </div>
       <div className="m-b-2">
         <ItemPrompt
           type="discount"

package/src/item/prompt/Prompt.tsx

@@ -1,23 +1,33 @@
-import { Tags } from '@transferwise/icons';
+import { Confetti, Tags } from '@transferwise/icons';
 import { Sentiment } from '../../common';
 import StatusIcon from '../../statusIcon';
 import { clsx } from 'clsx';
-import { AlertAction } from '../../alert';
+import { LinkProps } from '../../link';
+import Body from '../../body';
 
 export type ItemPromptProps = {
   type:
     | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`
-    | 'discount';
-  children?: React.ReactNode;
-  action?: Pick<AlertAction, 'href' | 'target' | 'onClick' | 'aria-label'>;
+    | 'discount'
+    | 'savings';
+  children: React.ReactNode;
+  action?: Pick<LinkProps, 'href' | 'target' | 'onClick'> & { 'aria-label'?: string };
 };
 
 export const ItemPrompt = ({ type, children, action }: ItemPromptProps) => {
   const Wrapper = action?.href ? 'a' : action?.onClick ? 'button' : 'span';
 
+  const icon =
+    type === 'discount' ? (
+      <Tags size={16} />
+    ) : type === 'savings' ? (
+      <Confetti size={16} />
+    ) : (
+      <StatusIcon size={16} sentiment={type} />
+    );
+
   return (
     <Wrapper
-      aria-label={action?.['aria-label']}
       className={clsx(
         'np-item-prompt',
         type,
@@ -25,10 +35,8 @@ export const ItemPrompt = ({ type, children, action }: ItemPromptProps) => {
       )}
       {...(action ?? {})}
     >
-      <div className="np-prompt-icon">
-        {type === 'discount' ? <Tags size={16} /> : <StatusIcon size={16} sentiment={type} />}
-      </div>
-      <div className="np-prompt-text">{children}</div>
+      <div className="np-prompt-icon">{icon}</div>
+      <Body>{children}</Body>
     </Wrapper>
   );
 };

package/src/main.css

@@ -2698,22 +2698,22 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   border-radius: var(--radius-small);
   word-break: break-word;
   word-wrap: break-word;
-  -webkit-hyphens: auto;
-          hyphens: auto;
-  cursor: default;
 }
 .np-item-prompt .np-prompt-icon {
-  padding-right: 6px;
-  padding-top: 3px;
-  padding-bottom: 3px;
-}
-.np-item-prompt .np-prompt-icon .tw-icon-tags {
+  padding-right: calc(12px / 2);
+  padding-right: calc(var(--size-12) / 2);
+  padding-top: calc(4px - 1);
+  padding-top: calc(var(--size-4) - 1);
+  padding-bottom: calc(4px - 1);
+  padding-bottom: calc(var(--size-4) - 1);
+}
+.np-item-prompt .np-prompt-icon .tw-icon-tags,
+.np-item-prompt .np-prompt-icon .tw-icon-confetti {
   color: var(--color-sentiment-positive-primary);
 }
 .np-item-prompt a {
   text-underline-offset: calc(4px / 2);
   text-underline-offset: calc(var(--size-4) / 2);
-  display: inline;
 }
 .np-item-prompt.np-prompt-interactive {
   -webkit-text-decoration: none;
@@ -2721,10 +2721,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   cursor: pointer;
   border: none;
 }
-.np-item-prompt.np-prompt-interactive .np-prompt-text {
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-}
 .np-item-prompt.negative {
   background-color: var(--color-sentiment-negative-secondary);
   color: var(--color-sentiment-negative-primary);
@@ -2745,28 +2741,34 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
 }
 .np-item-prompt.positive,
-.np-item-prompt.discount {
+.np-item-prompt.discount,
+.np-item-prompt.savings {
   background-color: var(--color-sentiment-positive-secondary);
   color: var(--color-sentiment-positive-primary);
 }
 .np-item-prompt.positive a,
-.np-item-prompt.discount a {
+.np-item-prompt.discount a,
+.np-item-prompt.savings a {
   color: var(--color-sentiment-positive-primary);
 }
 .np-item-prompt.positive a:hover,
-.np-item-prompt.discount a:hover {
+.np-item-prompt.discount a:hover,
+.np-item-prompt.savings a:hover {
   color: var(--color-sentiment-positive-primary-hover);
 }
 .np-item-prompt.positive a:active,
-.np-item-prompt.discount a:active {
+.np-item-prompt.discount a:active,
+.np-item-prompt.savings a:active {
   color: var(--color-sentiment-positive-primary-active);
 }
 .np-prompt-interactive.np-item-prompt.positive:hover,
-.np-prompt-interactive.np-item-prompt.discount:hover {
+.np-prompt-interactive.np-item-prompt.discount:hover,
+.np-prompt-interactive.np-item-prompt.savings:hover {
   background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
 }
 .np-prompt-interactive.np-item-prompt.positive:active,
-.np-prompt-interactive.np-item-prompt.discount:active {
+.np-prompt-interactive.np-item-prompt.discount:active,
+.np-prompt-interactive.np-item-prompt.savings:active {
   background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
 }
 .np-item-prompt.neutral {

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

@@ -1,3 +0,0 @@
-export type { ItemPromptProps } from './Prompt';
-export { default } from './Prompt';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/item/prompt/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC"}

package/src/item/prompt/index.ts

@@ -1,2 +0,0 @@
-export type { ItemPromptProps } from './Prompt';
-export { default } from './Prompt';