@transferwise/components 0.0.0-experimental-bbf9517 → 0.0.0-experimental-555e4ff

package/build/listItem/Prompt/ListItemPrompt.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var React = require('react');
 require('../../common/theme.js');
 require('../../common/direction.js');
@@ -42,9 +44,7 @@ require('../../link/Link.messages.js');
 const Prompt = ({
   sentiment: sentiment$1 = sentiment.Sentiment.NEUTRAL,
   mediaLabel,
-  children,
-  media,
-  loading
+  children
 }) => {
   const {
     ids,
@@ -54,8 +54,6 @@ const Prompt = ({
   return /*#__PURE__*/jsxRuntime.jsx(InlinePrompt.InlinePrompt, {
     id: ids.prompt,
     sentiment: sentiment$1,
-    media: media,
-    loading: loading,
     mediaLabel: mediaLabel,
     muted: isLongLivedMuted,
     className: "wds-list-item-prompt",
@@ -65,4 +63,5 @@ const Prompt = ({
 Prompt.displayName = 'ListItem.Prompt';
 
 exports.Prompt = Prompt;
+exports.default = Prompt;
 //# sourceMappingURL=ListItemPrompt.js.map

package/build/listItem/Prompt/ListItemPrompt.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemPrompt.js","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { Sentiment } from '../../common';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport { InlinePrompt, type InlinePromptProps } from '../../prompt';\n\nexport type ListItemPromptProps = Pick<\n  InlinePromptProps,\n  'children' | 'sentiment' | 'mediaLabel' | 'media' | 'loading'\n>;\n\n/**\n * This component allows for rendering an Inline Prompt. <br />\n * In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({\n  sentiment = Sentiment.NEUTRAL,\n  mediaLabel,\n  children,\n  media,\n  loading,\n}: ListItemPromptProps) => {\n  const { ids, props } = useContext<ListItemContextData>(ListItemContext);\n  const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);\n\n  return (\n    <InlinePrompt\n      id={ids.prompt}\n      sentiment={sentiment}\n      media={media}\n      loading={loading}\n      mediaLabel={mediaLabel}\n      muted={isLongLivedMuted}\n      className=\"wds-list-item-prompt\"\n    >\n      {isLongLivedMuted ? props.disabledPromptMessage : children}\n    </InlinePrompt>\n  );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","mediaLabel","children","media","loading","ids","props","useContext","ListItemContext","isLongLivedMuted","disabled","Boolean","disabledPromptMessage","_jsx","InlinePrompt","id","prompt","muted","className","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAMA,MAAM,GAAGA,CAAC;aACrBC,WAAS,GAAGC,mBAAS,CAACC,OAAO;EAC7BC,UAAU;EACVC,QAAQ;EACRC,KAAK;AACLC,EAAAA;AAAO,CACa,KAAI;EACxB,MAAM;IAAEC,GAAG;AAAEC,IAAAA;AAAK,GAAE,GAAGC,gBAAU,CAAsBC,+BAAe,CAAC;EACvE,MAAMC,gBAAgB,GAAGH,KAAK,CAACI,QAAQ,IAAIC,OAAO,CAACL,KAAK,CAACM,qBAAqB,CAAC;EAE/E,oBACEC,cAAA,CAACC,yBAAY,EAAA;IACXC,EAAE,EAAEV,GAAG,CAACW,MAAO;AACflB,IAAAA,SAAS,EAAEA,WAAU;AACrBK,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,OAAO,EAAEA,OAAQ;AACjBH,IAAAA,UAAU,EAAEA,UAAW;AACvBgB,IAAAA,KAAK,EAAER,gBAAiB;AACxBS,IAAAA,SAAS,EAAC,sBAAsB;AAAAhB,IAAAA,QAAA,EAE/BO,gBAAgB,GAAGH,KAAK,CAACM,qBAAqB,GAAGV;AAAQ,GAC9C,CAAC;AAEnB;AAEAL,MAAM,CAACsB,WAAW,GAAG,iBAAiB;;;;"}
+{"version":3,"file":"ListItemPrompt.js","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { Sentiment } from '../../common';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport { InlinePrompt, type InlinePromptProps } from '../../prompt';\n\nexport type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'mediaLabel'>;\n\n/**\n * This component allows for rendering an Inline Prompt. <br />\n * In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({\n  sentiment = Sentiment.NEUTRAL,\n  mediaLabel,\n  children,\n}: ListItemPromptProps) => {\n  const { ids, props } = useContext<ListItemContextData>(ListItemContext);\n  const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);\n\n  return (\n    <InlinePrompt\n      id={ids.prompt}\n      sentiment={sentiment}\n      mediaLabel={mediaLabel}\n      muted={isLongLivedMuted}\n      className=\"wds-list-item-prompt\"\n    >\n      {isLongLivedMuted ? props.disabledPromptMessage : children}\n    </InlinePrompt>\n  );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\nexport default Prompt;\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","mediaLabel","children","ids","props","useContext","ListItemContext","isLongLivedMuted","disabled","Boolean","disabledPromptMessage","_jsx","InlinePrompt","id","prompt","muted","className","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAMA,MAAM,GAAGA,CAAC;aACrBC,WAAS,GAAGC,mBAAS,CAACC,OAAO;EAC7BC,UAAU;AACVC,EAAAA;AAAQ,CACY,KAAI;EACxB,MAAM;IAAEC,GAAG;AAAEC,IAAAA;AAAK,GAAE,GAAGC,gBAAU,CAAsBC,+BAAe,CAAC;EACvE,MAAMC,gBAAgB,GAAGH,KAAK,CAACI,QAAQ,IAAIC,OAAO,CAACL,KAAK,CAACM,qBAAqB,CAAC;EAE/E,oBACEC,cAAA,CAACC,yBAAY,EAAA;IACXC,EAAE,EAAEV,GAAG,CAACW,MAAO;AACfhB,IAAAA,SAAS,EAAEA,WAAU;AACrBG,IAAAA,UAAU,EAAEA,UAAW;AACvBc,IAAAA,KAAK,EAAER,gBAAiB;AACxBS,IAAAA,SAAS,EAAC,sBAAsB;AAAAd,IAAAA,QAAA,EAE/BK,gBAAgB,GAAGH,KAAK,CAACM,qBAAqB,GAAGR;AAAQ,GAC9C,CAAC;AAEnB;AAEAL,MAAM,CAACoB,WAAW,GAAG,iBAAiB;;;;;"}

package/build/listItem/Prompt/ListItemPrompt.mjs

@@ -40,9 +40,7 @@ import '../../link/Link.messages.mjs';
 const Prompt = ({
   sentiment = Sentiment.NEUTRAL,
   mediaLabel,
-  children,
-  media,
-  loading
+  children
 }) => {
   const {
     ids,
@@ -52,8 +50,6 @@ const Prompt = ({
   return /*#__PURE__*/jsx(InlinePrompt, {
     id: ids.prompt,
     sentiment: sentiment,
-    media: media,
-    loading: loading,
     mediaLabel: mediaLabel,
     muted: isLongLivedMuted,
     className: "wds-list-item-prompt",
@@ -62,5 +58,5 @@ const Prompt = ({
 };
 Prompt.displayName = 'ListItem.Prompt';
 
-export { Prompt };
+export { Prompt, Prompt as default };
 //# sourceMappingURL=ListItemPrompt.mjs.map

package/build/listItem/Prompt/ListItemPrompt.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemPrompt.mjs","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { Sentiment } from '../../common';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport { InlinePrompt, type InlinePromptProps } from '../../prompt';\n\nexport type ListItemPromptProps = Pick<\n  InlinePromptProps,\n  'children' | 'sentiment' | 'mediaLabel' | 'media' | 'loading'\n>;\n\n/**\n * This component allows for rendering an Inline Prompt. <br />\n * In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({\n  sentiment = Sentiment.NEUTRAL,\n  mediaLabel,\n  children,\n  media,\n  loading,\n}: ListItemPromptProps) => {\n  const { ids, props } = useContext<ListItemContextData>(ListItemContext);\n  const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);\n\n  return (\n    <InlinePrompt\n      id={ids.prompt}\n      sentiment={sentiment}\n      media={media}\n      loading={loading}\n      mediaLabel={mediaLabel}\n      muted={isLongLivedMuted}\n      className=\"wds-list-item-prompt\"\n    >\n      {isLongLivedMuted ? props.disabledPromptMessage : children}\n    </InlinePrompt>\n  );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","mediaLabel","children","media","loading","ids","props","useContext","ListItemContext","isLongLivedMuted","disabled","Boolean","disabledPromptMessage","_jsx","InlinePrompt","id","prompt","muted","className","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAMA,MAAM,GAAGA,CAAC;EACrBC,SAAS,GAAGC,SAAS,CAACC,OAAO;EAC7BC,UAAU;EACVC,QAAQ;EACRC,KAAK;AACLC,EAAAA;AAAO,CACa,KAAI;EACxB,MAAM;IAAEC,GAAG;AAAEC,IAAAA;AAAK,GAAE,GAAGC,UAAU,CAAsBC,eAAe,CAAC;EACvE,MAAMC,gBAAgB,GAAGH,KAAK,CAACI,QAAQ,IAAIC,OAAO,CAACL,KAAK,CAACM,qBAAqB,CAAC;EAE/E,oBACEC,GAAA,CAACC,YAAY,EAAA;IACXC,EAAE,EAAEV,GAAG,CAACW,MAAO;AACflB,IAAAA,SAAS,EAAEA,SAAU;AACrBK,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,OAAO,EAAEA,OAAQ;AACjBH,IAAAA,UAAU,EAAEA,UAAW;AACvBgB,IAAAA,KAAK,EAAER,gBAAiB;AACxBS,IAAAA,SAAS,EAAC,sBAAsB;AAAAhB,IAAAA,QAAA,EAE/BO,gBAAgB,GAAGH,KAAK,CAACM,qBAAqB,GAAGV;AAAQ,GAC9C,CAAC;AAEnB;AAEAL,MAAM,CAACsB,WAAW,GAAG,iBAAiB;;;;"}
+{"version":3,"file":"ListItemPrompt.mjs","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { Sentiment } from '../../common';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport { InlinePrompt, type InlinePromptProps } from '../../prompt';\n\nexport type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'mediaLabel'>;\n\n/**\n * This component allows for rendering an Inline Prompt. <br />\n * In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({\n  sentiment = Sentiment.NEUTRAL,\n  mediaLabel,\n  children,\n}: ListItemPromptProps) => {\n  const { ids, props } = useContext<ListItemContextData>(ListItemContext);\n  const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);\n\n  return (\n    <InlinePrompt\n      id={ids.prompt}\n      sentiment={sentiment}\n      mediaLabel={mediaLabel}\n      muted={isLongLivedMuted}\n      className=\"wds-list-item-prompt\"\n    >\n      {isLongLivedMuted ? props.disabledPromptMessage : children}\n    </InlinePrompt>\n  );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\nexport default Prompt;\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","mediaLabel","children","ids","props","useContext","ListItemContext","isLongLivedMuted","disabled","Boolean","disabledPromptMessage","_jsx","InlinePrompt","id","prompt","muted","className","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAMA,MAAM,GAAGA,CAAC;EACrBC,SAAS,GAAGC,SAAS,CAACC,OAAO;EAC7BC,UAAU;AACVC,EAAAA;AAAQ,CACY,KAAI;EACxB,MAAM;IAAEC,GAAG;AAAEC,IAAAA;AAAK,GAAE,GAAGC,UAAU,CAAsBC,eAAe,CAAC;EACvE,MAAMC,gBAAgB,GAAGH,KAAK,CAACI,QAAQ,IAAIC,OAAO,CAACL,KAAK,CAACM,qBAAqB,CAAC;EAE/E,oBACEC,GAAA,CAACC,YAAY,EAAA;IACXC,EAAE,EAAEV,GAAG,CAACW,MAAO;AACfhB,IAAAA,SAAS,EAAEA,SAAU;AACrBG,IAAAA,UAAU,EAAEA,UAAW;AACvBc,IAAAA,KAAK,EAAER,gBAAiB;AACxBS,IAAAA,SAAS,EAAC,sBAAsB;AAAAd,IAAAA,QAAA,EAE/BK,gBAAgB,GAAGH,KAAK,CAACM,qBAAqB,GAAGR;AAAQ,GAC9C,CAAC;AAEnB;AAEAL,MAAM,CAACoB,WAAW,GAAG,iBAAiB;;;;"}

package/build/main.css

@@ -5442,8 +5442,9 @@ html:not([dir="rtl"]) .np-navigation-option {
   stroke: currentColor;
 }
 .wds-info-prompt {
+  --Prompt-border-radius: var(--radius-medium);
   --Prompt-gap: var(--size-8);
-  --Prompt-padding: 12px;
+  --Prompt-padding: var(--size-12);
 }
 .wds-info-prompt__content {
   display: flex;
@@ -5457,17 +5458,16 @@ html:not([dir="rtl"]) .np-navigation-option {
 .wds-info-prompt__title,
 .wds-info-prompt__description {
   display: block;
-  color: var(--color-sentiment-primary);
 }
 .wds-info-prompt__action {
+  align-self: flex-start;
   margin-top: var(--Prompt-gap);
 }
-.wds-info-prompt__media {
-  display: flex;
-}
 .wds-info-prompt__media svg {
   width: 24px;
+  width: var(--size-24);
   height: 24px;
+  height: var(--size-24);
 }
 .wds-info-prompt .wds-prompt__media-wrapper {
   padding: 0;

package/build/styles/main.css

@@ -5442,8 +5442,9 @@ html:not([dir="rtl"]) .np-navigation-option {
   stroke: currentColor;
 }
 .wds-info-prompt {
+  --Prompt-border-radius: var(--radius-medium);
   --Prompt-gap: var(--size-8);
-  --Prompt-padding: 12px;
+  --Prompt-padding: var(--size-12);
 }
 .wds-info-prompt__content {
   display: flex;
@@ -5457,17 +5458,16 @@ html:not([dir="rtl"]) .np-navigation-option {
 .wds-info-prompt__title,
 .wds-info-prompt__description {
   display: block;
-  color: var(--color-sentiment-primary);
 }
 .wds-info-prompt__action {
+  align-self: flex-start;
   margin-top: var(--Prompt-gap);
 }
-.wds-info-prompt__media {
-  display: flex;
-}
 .wds-info-prompt__media svg {
   width: 24px;
+  width: var(--size-24);
   height: 24px;
+  height: var(--size-24);
 }
 .wds-info-prompt .wds-prompt__media-wrapper {
   padding: 0;

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

@@ -1,6 +1,7 @@
 .wds-info-prompt {
+  --Prompt-border-radius: var(--radius-medium);
   --Prompt-gap: var(--size-8);
-  --Prompt-padding: 12px;
+  --Prompt-padding: var(--size-12);
 }
 .wds-info-prompt__content {
   display: flex;
@@ -14,17 +15,16 @@
 .wds-info-prompt__title,
 .wds-info-prompt__description {
   display: block;
-  color: var(--color-sentiment-primary);
 }
 .wds-info-prompt__action {
+  align-self: flex-start;
   margin-top: var(--Prompt-gap);
 }
-.wds-info-prompt__media {
-  display: flex;
-}
 .wds-info-prompt__media svg {
   width: 24px;
+  width: var(--size-24);
   height: 24px;
+  height: var(--size-24);
 }
 .wds-info-prompt .wds-prompt__media-wrapper {
   padding: 0;

package/build/types/listItem/ListItem.d.ts

@@ -112,7 +112,7 @@ export declare const ListItem: {
         displayName: string;
     };
     Prompt: {
-        ({ sentiment, mediaLabel, children, media, loading, }: import("./Prompt").ListItemPromptProps): import("react").JSX.Element;
+        ({ sentiment, mediaLabel, children, }: import("./Prompt").ListItemPromptProps): import("react").JSX.Element;
         displayName: string;
     };
 };

package/build/types/listItem/Prompt/ListItemPrompt.d.ts

@@ -1,5 +1,5 @@
 import { type InlinePromptProps } from '../../prompt';
-export type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'mediaLabel' | 'media' | 'loading'>;
+export type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'mediaLabel'>;
 /**
  * This component allows for rendering an Inline Prompt. <br />
  * In the future it will be a thin wrapper around a standalone component.<br />
@@ -7,7 +7,8 @@ export type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentimen
  * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.
  */
 export declare const Prompt: {
-    ({ sentiment, mediaLabel, children, media, loading, }: ListItemPromptProps): import("react").JSX.Element;
+    ({ sentiment, mediaLabel, children, }: ListItemPromptProps): import("react").JSX.Element;
     displayName: string;
 };
+export default Prompt;
 //# sourceMappingURL=ListItemPrompt.d.ts.map

package/build/types/listItem/Prompt/ListItemPrompt.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemPrompt.d.ts","sourceRoot":"","sources":["../../../../src/listItem/Prompt/ListItemPrompt.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEpE,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,iBAAiB,EACjB,UAAU,GAAG,WAAW,GAAG,YAAY,GAAG,OAAO,GAAG,SAAS,CAC9D,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,MAAM;2DAMhB,mBAAmB;;CAiBrB,CAAC"}
+{"version":3,"file":"ListItemPrompt.d.ts","sourceRoot":"","sources":["../../../../src/listItem/Prompt/ListItemPrompt.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEpE,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,WAAW,GAAG,YAAY,CAAC,CAAC;AAEnG;;;;;GAKG;AACH,eAAO,MAAM,MAAM;2CAIhB,mBAAmB;;CAerB,CAAC;AAGF,eAAe,MAAM,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-bbf9517",
+  "version": "0.0.0-experimental-555e4ff",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -88,8 +88,8 @@
     "storybook-addon-test-codegen": "^3.0.1",
     "@transferwise/less-config": "3.1.2",
     "@transferwise/neptune-css": "14.26.1",
-    "@wise/components-theming": "1.10.1",
-    "@wise/wds-configs": "0.0.0"
+    "@wise/wds-configs": "0.0.0",
+    "@wise/components-theming": "1.10.1"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3 || ^4",

package/src/listItem/Prompt/ListItemPrompt.story.tsx

@@ -11,7 +11,6 @@ import {
 } from '../_stories/subcomponents';
 import { ListItem } from '../ListItem';
 import { Prompt, type ListItemPromptProps } from './ListItemPrompt';
-import { Clock } from '@transferwise/icons';
 
 const meta: Meta<ListItemPromptProps> = {
   component: Prompt,
@@ -67,7 +66,7 @@ export const Playground: Story = {
         subtitle={lorem10}
         media={MEDIA.avatarSingle}
         control={CONTROLS.switch}
-        prompt={<ListItem.Prompt {...args} />}
+        prompt={<Prompt {...args} />}
       />
     </List>
   ),
@@ -87,89 +86,28 @@ export const Sentiment: Story = {
         subtitle={lorem10}
         media={MEDIA.avatarSingle}
         control={CONTROLS.switch}
-        prompt={
-          <ListItem.Prompt sentiment={Sentiments.NEUTRAL}>
-            This is a neutral prompt.
-          </ListItem.Prompt>
-        }
+        prompt={<Prompt sentiment={Sentiments.NEUTRAL}>This is a neutral prompt.</Prompt>}
       />
       <ListItem
         title={lorem5}
         subtitle={lorem10}
         media={MEDIA.avatarSingle}
         control={CONTROLS.switch}
-        prompt={
-          <ListItem.Prompt sentiment={Sentiments.POSITIVE}>
-            This is a positive prompt.
-          </ListItem.Prompt>
-        }
+        prompt={<Prompt sentiment={Sentiments.POSITIVE}>This is a positive prompt.</Prompt>}
       />
       <ListItem
         title={lorem5}
         subtitle={lorem10}
         media={MEDIA.avatarSingle}
         control={CONTROLS.switch}
-        prompt={
-          <ListItem.Prompt sentiment={Sentiments.WARNING}>
-            This is a warning prompt.
-          </ListItem.Prompt>
-        }
+        prompt={<Prompt sentiment={Sentiments.WARNING}>This is a warning prompt.</Prompt>}
       />
       <ListItem
         title={lorem5}
         subtitle={lorem10}
         media={MEDIA.avatarSingle}
         control={CONTROLS.switch}
-        prompt={
-          <ListItem.Prompt sentiment={Sentiments.NEGATIVE}>
-            This is a negative prompt.
-          </ListItem.Prompt>
-        }
-      />
-    </List>
-  ),
-};
-
-/**
- * While all main sentiments (`warning`, `negative`, `positive` and `neutral`) are associated with a
- * default `StatusIcon`s, we also allow for Icon overrides to bring the prompt's visual language
- * closer to the prompt's content. <br /><br />
- * It's also possible to override the default StatusIcon's accessible name announced by screen
- * readers via `mediaLabel` prop, which is especially useful for the `proposition` sentiment.
- * <br /><br />
- * **NB**: If you're setting a label on a custom Icon, the accessible name should be provided via
- * Icon's `title` prop instead.
- */
-export const IconOverrides: Story = {
-  parameters: {
-    controls: { disable: true },
-    actions: { disable: true },
-    a11y: { disable: true },
-    knobs: { disable: true },
-  },
-  render: (args) => (
-    <List>
-      <ListItem
-        title={lorem5}
-        subtitle={lorem10}
-        media={MEDIA.avatarSingle}
-        control={CONTROLS.switch}
-        prompt={
-          <ListItem.Prompt sentiment={Sentiments.WARNING} mediaLabel="Processing: ">
-            This prompt uses default Icon, but with a custom label for screen readers.
-          </ListItem.Prompt>
-        }
-      />
-      <ListItem
-        title={lorem5}
-        subtitle={lorem10}
-        media={MEDIA.avatarSingle}
-        control={CONTROLS.switch}
-        prompt={
-          <ListItem.Prompt sentiment={Sentiments.WARNING} media={<Clock title="Processing: " />}>
-            This prompt uses custom Icon with a custom label for screen readers.
-          </ListItem.Prompt>
-        }
+        prompt={<Prompt sentiment={Sentiments.NEGATIVE}>This is a negative prompt.</Prompt>}
       />
     </List>
   ),
@@ -197,13 +135,13 @@ export const Interactivity: Story = {
         media={MEDIA.avatarSingle}
         control={CONTROLS.switch}
         prompt={
-          <ListItem.Prompt sentiment={args.sentiment}>
+          <Prompt sentiment={args.sentiment}>
             This prompt includes a{' '}
             <Link href="https://wise.com" target="_blank" rel="noreferrer">
               link to some resource
             </Link>{' '}
             to help the user in their journey.
-          </ListItem.Prompt>
+          </Prompt>
         }
       />
 
@@ -213,13 +151,13 @@ export const Interactivity: Story = {
         media={MEDIA.avatarSingle}
         control={CONTROLS.switch}
         prompt={
-          <ListItem.Prompt sentiment={args.sentiment}>
+          <Prompt sentiment={args.sentiment}>
             {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
             This prompt includes an <Link onClick={action('inline button')}>
               inline button
             </Link>{' '}
             than can e.g. trigger a modal.
-          </ListItem.Prompt>
+          </Prompt>
         }
       />
     </List>

package/src/listItem/Prompt/ListItemPrompt.test.tsx

@@ -1,4 +1,3 @@
-import { Clock } from '@transferwise/icons';
 import { mockMatchMedia, render, screen } from '../../test-utils';
 import { Sentiment } from '../../common';
 import { ListItem } from '../ListItem';
@@ -19,8 +18,6 @@ describe('ListItem.Prompt', () => {
   });
 
   describe('render icon', () => {
-    const customLabel = 'Custom icon label';
-
     it.each([
       [Sentiment.NEUTRAL, 'info-icon'],
       [Sentiment.POSITIVE, 'check-icon'],
@@ -35,34 +32,6 @@ describe('ListItem.Prompt', () => {
       );
       expect(screen.getByTestId(iconId)).toBeInTheDocument();
     });
-
-    it('should accept accessible name override for a status icon', () => {
-      render(
-        <ListItem
-          title="Test Title"
-          prompt={
-            <ListItem.Prompt sentiment={Sentiment.NEGATIVE} mediaLabel={customLabel}>
-              Message
-            </ListItem.Prompt>
-          }
-        />,
-      );
-      expect(screen.getByLabelText(customLabel)).toBeInTheDocument();
-    });
-
-    it('should accept icon accessible name override', () => {
-      render(
-        <ListItem
-          title="Test Title"
-          prompt={
-            <ListItem.Prompt sentiment={Sentiment.NEGATIVE} media={<Clock title={customLabel} />}>
-              Message
-            </ListItem.Prompt>
-          }
-        />,
-      );
-      expect(screen.getByLabelText(customLabel)).toBeInTheDocument();
-    });
   });
 
   describe('muted state', () => {

package/src/listItem/Prompt/ListItemPrompt.tsx

@@ -3,10 +3,7 @@ import { Sentiment } from '../../common';
 import { ListItemContext, type ListItemContextData } from '../ListItemContext';
 import { InlinePrompt, type InlinePromptProps } from '../../prompt';
 
-export type ListItemPromptProps = Pick<
-  InlinePromptProps,
-  'children' | 'sentiment' | 'mediaLabel' | 'media' | 'loading'
->;
+export type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'mediaLabel'>;
 
 /**
  * This component allows for rendering an Inline Prompt. <br />
@@ -18,8 +15,6 @@ export const Prompt = ({
   sentiment = Sentiment.NEUTRAL,
   mediaLabel,
   children,
-  media,
-  loading,
 }: ListItemPromptProps) => {
   const { ids, props } = useContext<ListItemContextData>(ListItemContext);
   const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);
@@ -28,8 +23,6 @@ export const Prompt = ({
     <InlinePrompt
       id={ids.prompt}
       sentiment={sentiment}
-      media={media}
-      loading={loading}
       mediaLabel={mediaLabel}
       muted={isLongLivedMuted}
       className="wds-list-item-prompt"
@@ -40,3 +33,4 @@ export const Prompt = ({
 };
 
 Prompt.displayName = 'ListItem.Prompt';
+export default Prompt;

package/src/main.css

@@ -5442,8 +5442,9 @@ html:not([dir="rtl"]) .np-navigation-option {
   stroke: currentColor;
 }
 .wds-info-prompt {
+  --Prompt-border-radius: var(--radius-medium);
   --Prompt-gap: var(--size-8);
-  --Prompt-padding: 12px;
+  --Prompt-padding: var(--size-12);
 }
 .wds-info-prompt__content {
   display: flex;
@@ -5457,17 +5458,16 @@ html:not([dir="rtl"]) .np-navigation-option {
 .wds-info-prompt__title,
 .wds-info-prompt__description {
   display: block;
-  color: var(--color-sentiment-primary);
 }
 .wds-info-prompt__action {
+  align-self: flex-start;
   margin-top: var(--Prompt-gap);
 }
-.wds-info-prompt__media {
-  display: flex;
-}
 .wds-info-prompt__media svg {
   width: 24px;
+  width: var(--size-24);
   height: 24px;
+  height: var(--size-24);
 }
 .wds-info-prompt .wds-prompt__media-wrapper {
   padding: 0;

package/src/prompt/InfoPrompt/InfoPrompt.css

@@ -1,6 +1,7 @@
 .wds-info-prompt {
+  --Prompt-border-radius: var(--radius-medium);
   --Prompt-gap: var(--size-8);
-  --Prompt-padding: 12px;
+  --Prompt-padding: var(--size-12);
 }
 .wds-info-prompt__content {
   display: flex;
@@ -14,17 +15,16 @@
 .wds-info-prompt__title,
 .wds-info-prompt__description {
   display: block;
-  color: var(--color-sentiment-primary);
 }
 .wds-info-prompt__action {
+  align-self: flex-start;
   margin-top: var(--Prompt-gap);
 }
-.wds-info-prompt__media {
-  display: flex;
-}
 .wds-info-prompt__media svg {
   width: 24px;
+  width: var(--size-24);
   height: 24px;
+  height: var(--size-24);
 }
 .wds-info-prompt .wds-prompt__media-wrapper {
   padding: 0;

package/src/prompt/InfoPrompt/InfoPrompt.less

@@ -1,6 +1,7 @@
 .wds-info-prompt {
+  --Prompt-border-radius: var(--radius-medium);
   --Prompt-gap: var(--size-8);
-  --Prompt-padding: 12px;
+  --Prompt-padding: var(--size-12);
 
   &__content {
     display: flex;
@@ -11,27 +12,25 @@
       justify-content: flex-start; /* Top align when title exists */
     }
   }
-
   &__title,
   &__description {
     display: block;
-    color: var(--color-sentiment-primary);
   }
 
   &__action {
+    align-self: flex-start;
     margin-top: var(--Prompt-gap);
   }
 
   &__media {
-    display: flex;
-
+    // To ensure icons are sized correctly, we set a fixed size for SVGs within the media wrapper
     svg {
-      width: 24px;
-      height: 24px;
+      width: var(--size-24);
+      height: var(--size-24);
     }
   }
 
   .wds-prompt__media-wrapper {
     padding: 0;
   }
-}
+}

package/src/prompt/InlinePrompt/InlinePrompt.story.tsx

@@ -225,28 +225,25 @@ export const Muted: StoryObj<PreviewStoryArgs> = {
  * While all main sentiments (`warning`, `negative`, `positive` and`neutral`) are associated with a
  * default `StatusIcon`s, we also allow for Icon overrides to bring the prompt's visual language
  * closer to the prompt's content. <br /><br />
- * It's also possible to override the default StatusIcon's accessible name announced by screen
- * readers via `mediaLabel` prop, which is especially useful for the `proposition` sentiment.
- * <br /><br />
- * **NB**: If you're setting a label on a custom Icon, the accessible name should be provided via
- * Icon's `title` prop instead.
+ * It's also possible to override the default icon's accessible name announced by screen readers
+ * via `mediaLabel` prop, which is especially useful for the `proposition` sentiment.
  */
 export const IconOverrides: StoryObj<PreviewStoryArgs> = {
   render: (args: PreviewStoryArgs) => {
     return (
       <>
-        <InlinePrompt {...args} sentiment="negative" mediaLabel="Rejected: ">
-          This prompt uses default Icon, but with a custom label for screen readers.
-        </InlinePrompt>
-        <InlinePrompt {...args} media={<Clock title="Processing: " />} sentiment="warning">
-          The account verification is taking longer than usual.
-        </InlinePrompt>
-        <InlinePrompt {...args} media={<Travel title="Activated: " />} sentiment="positive">
+        <InlinePrompt {...args} media={<Travel />} sentiment="positive" mediaLabel="Success: ">
           Your travel account is set up and ready to use.
         </InlinePrompt>
-        <InlinePrompt {...args} media={<Taxi title="Taxi addon: " />} sentiment="proposition">
+        <InlinePrompt {...args} media={<Taxi />} sentiment="proposition" mediaLabel="Taxi addon: ">
           Connect Wise with your taxi app to get exclusive discounts.
         </InlinePrompt>
+        <InlinePrompt {...args} media={<Clock />} sentiment="warning" mediaLabel="Processing: ">
+          The account verification is taking longer than usual.
+        </InlinePrompt>
+        <InlinePrompt {...args} media={<Id />} sentiment="negative" mediaLabel="Error: ">
+          The identity document you provided has expired.
+        </InlinePrompt>
       </>
     );
   },

package/src/prompt/InlinePrompt/InlinePrompt.test.tsx

@@ -1,4 +1,3 @@
-import { Clock } from '@transferwise/icons';
 import { mockMatchMedia, render, screen } from '../../test-utils';
 import { InlinePrompt, InlinePromptProps } from './InlinePrompt';
 import { Sentiment } from '../../common';
@@ -92,22 +91,11 @@ describe('InlinePrompt', () => {
           });
         }
 
-        it('should allow for customisation of aria label for StatusIcon', () => {
+        it('should allow for customisation of aria label', () => {
           render(<InlinePrompt {...defaultProps} sentiment={sentiment} mediaLabel={mediaLabel} />);
           expect(screen.getByLabelText(mediaLabel)).toBeInTheDocument();
         });
 
-        it('should allow for customisation of aria label for a custom Icon', () => {
-          render(
-            <InlinePrompt
-              {...defaultProps}
-              sentiment={sentiment}
-              media={<Clock title={mediaLabel} />}
-            />,
-          );
-          expect(screen.getByLabelText(mediaLabel)).toBeInTheDocument();
-        });
-
         it('should retain custom label while muted', () => {
           render(
             <InlinePrompt {...defaultProps} sentiment={sentiment} mediaLabel={mediaLabel} muted />,