@transferwise/components 0.0.0-experimental-9a0f034 → 0.0.0-experimental-8b4289e

package/build/main.css

@@ -1026,17 +1026,17 @@
   background-color: var(--color-background-neutral-active);
 }
 .np-icon-button-primary-default {
-  color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
+  color: var(--color-interactive-control);
   background-color: #00a2dd;
-  background-color: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
+  background-color: var(--color-interactive-accent);
 }
 .np-icon-button-primary-default:not(.disabled):not(:disabled):hover {
   background-color: #008fc9;
-  background-color: var(--color-sentiment-interactive-primary-hover, var(--color-interactive-accent-hover));
+  background-color: var(--color-interactive-accent-hover);
 }
 .np-icon-button-primary-default:not(.disabled):not(:disabled):active {
   background-color: #0081ba;
-  background-color: var(--color-sentiment-interactive-primary-active, var(--color-interactive-accent-active));
+  background-color: var(--color-interactive-accent-active);
 }
 .np-icon-button-primary-negative {
   color: var(--color-contrast-overlay);
@@ -1064,14 +1064,14 @@
   background-color: var(--color-background-screen-active);
 }
 .np-icon-button-secondary-default {
-  color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
-  background-color: var(--color-sentiment-interactive-secondary-neutral, var(--color-interactive-neutral));
+  color: var(--color-interactive-primary);
+  background-color: var(--color-interactive-neutral);
 }
 .np-icon-button-secondary-default:not(.disabled):not(:disabled):hover {
-  background-color: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-interactive-neutral-hover));
+  background-color: var(--color-interactive-neutral-hover);
 }
 .np-icon-button-secondary-default:not(.disabled):not(:disabled):active {
-  background-color: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-interactive-neutral-active));
+  background-color: 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 {

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

@@ -1 +1 @@
-{"version":3,"file":"InlinePrompt.js","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport SentimentSurface from '../../sentimentSurface';\n\nexport type InlinePromptProps = {\n  sentiment?:\n    | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n    | 'proposition';\n  loading?: boolean;\n  /**\n   * Use for short-lived inline prompts to avoid swap of the icon (which is bad UX for short-lived prompts, e.g. when submit form)\n   */\n  muted?: boolean;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  children: React.ReactNode;\n  media?: React.ReactNode;\n};\n\nexport const InlinePrompt = ({\n  sentiment = Sentiment.POSITIVE,\n  muted = false,\n  loading = false,\n  className,\n  children,\n  media = null,\n  'data-testid': dataTestId,\n  ...rest\n}: InlinePromptProps) => {\n  const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;\n\n  const renderMedia = () => {\n    if (media && ['proposition', 'positive'].includes(sentiment)) {\n      return media;\n    }\n    if (sentiment === 'proposition') {\n      return <GiftBox />;\n    }\n    if (muted) {\n      return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" />;\n    }\n    if (loading) {\n      return <ProcessIndicator data-testid=\"InlinePrompt_ProcessIndicator\" size=\"xxs\" />;\n    }\n    return <StatusIcon size={16} sentiment={sentiment} />;\n  };\n\n  return (\n    <SentimentSurface\n      sentiment={surfaceSentiment}\n      data-testid={dataTestId}\n      className={clsx(\n        'wds-inline-prompt',\n        `wds-inline-prompt--${sentiment}`,\n        {\n          'wds-inline-prompt--muted': muted,\n          'wds-inline-prompt--loading': loading,\n        },\n        className,\n      )}\n      {...rest}\n    >\n      <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n      <Body>{children}</Body>\n    </SentimentSurface>\n  );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","dataTestId","rest","surfaceSentiment","renderMedia","includes","_jsx","GiftBox","BackslashCircle","size","ProcessIndicator","StatusIcon","_jsxs","SentimentSurface","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBO,MAAMA,YAAY,GAAGA,CAAC;aAC3BC,WAAS,GAAGC,mBAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;AACRC,EAAAA,KAAK,GAAG,IAAI;AACZ,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,gBAAgB,GAAGV,WAAS,KAAKC,mBAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,WAAS;EAEjF,MAAMW,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIJ,KAAK,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,CAACK,QAAQ,CAACZ,WAAS,CAAC,EAAE;AAC5D,MAAA,OAAOO,KAAK;AACd,IAAA;IACA,IAAIP,WAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,oBAAOa,cAAA,CAACC,aAAO,EAAA,GAAG;AACpB,IAAA;AACA,IAAA,IAAIX,KAAK,EAAE;MACT,oBAAOU,cAAA,CAACE,qBAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAoB,QAAG;AACvE,IAAA;AACA,IAAA,IAAIZ,OAAO,EAAE;MACX,oBAAOS,cAAA,CAACI,wBAAgB,EAAA;AAAC,QAAA,aAAA,EAAY,+BAA+B;AAACD,QAAAA,IAAI,EAAC;AAAK,OAAA,CAAG;AACpF,IAAA;IACA,oBAAOH,cAAA,CAACK,kBAAU,EAAA;AAACF,MAAAA,IAAI,EAAE,EAAG;AAAChB,MAAAA,SAAS,EAAEA;AAAU,MAAG;EACvD,CAAC;EAED,oBACEmB,eAAA,CAACC,wBAAgB,EAAA;AACfpB,IAAAA,SAAS,EAAEU,gBAAiB;AAC5B,IAAA,aAAA,EAAaF,UAAW;IACxBH,SAAS,EAAEgB,SAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBrB,WAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEI,IAAI;AAAAH,IAAAA,QAAA,gBAERO,cAAA,CAAA,KAAA,EAAA;AAAKR,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEK,WAAW;AAAE,KAAM,CACtE,eAAAE,cAAA,CAACS,YAAI,EAAA;AAAAhB,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAkB,CAAC;AAEvB;;;;"}
+{"version":3,"file":"InlinePrompt.js","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport SentimentSurface from '../../sentimentSurface';\n\nexport type InlinePromptProps = {\n  /**\n   * The sentiment determines the colour scheme\n   */\n  sentiment?:\n    | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n    | 'proposition';\n  /**\n   * Replaces the icon with a spinner while waiting for the short-lived action to finish.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled\n   * they are associated with actually disabled component (e.g. a disabled list item or input).\n   * @default false\n   */\n  muted?: boolean;\n  /**\n   * Icon override for `proposition` and `positive` sentiments. Unsupported for remaining ones.\n   */\n  media?: React.ReactNode;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  children: React.ReactNode;\n};\n\n/**\n * Inline prompts appear alongside a specific component on the screen. They help the user stay\n * informed, fix something, or get more out of what they're doing.\n */\nexport const InlinePrompt = ({\n  sentiment = Sentiment.POSITIVE,\n  muted = false,\n  loading = false,\n  className,\n  children,\n  media = null,\n  'data-testid': dataTestId,\n  ...rest\n}: InlinePromptProps) => {\n  const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;\n\n  const renderMedia = () => {\n    if (media && ['proposition', 'positive'].includes(sentiment)) {\n      return media;\n    }\n    if (sentiment === 'proposition') {\n      return <GiftBox />;\n    }\n    if (muted) {\n      return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" />;\n    }\n    if (loading) {\n      return <ProcessIndicator data-testid=\"InlinePrompt_ProcessIndicator\" size=\"xxs\" />;\n    }\n    return <StatusIcon size={16} sentiment={sentiment} />;\n  };\n\n  return (\n    <SentimentSurface\n      sentiment={surfaceSentiment}\n      data-testid={dataTestId}\n      className={clsx(\n        'wds-inline-prompt',\n        `wds-inline-prompt--${sentiment}`,\n        {\n          'wds-inline-prompt--muted': muted,\n          'wds-inline-prompt--loading': loading,\n        },\n        className,\n      )}\n      {...rest}\n    >\n      <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n      <Body>{children}</Body>\n    </SentimentSurface>\n  );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","dataTestId","rest","surfaceSentiment","renderMedia","includes","_jsx","GiftBox","BackslashCircle","size","ProcessIndicator","StatusIcon","_jsxs","SentimentSurface","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCO,MAAMA,YAAY,GAAGA,CAAC;aAC3BC,WAAS,GAAGC,mBAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;AACRC,EAAAA,KAAK,GAAG,IAAI;AACZ,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,gBAAgB,GAAGV,WAAS,KAAKC,mBAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,WAAS;EAEjF,MAAMW,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIJ,KAAK,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,CAACK,QAAQ,CAACZ,WAAS,CAAC,EAAE;AAC5D,MAAA,OAAOO,KAAK;AACd,IAAA;IACA,IAAIP,WAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,oBAAOa,cAAA,CAACC,aAAO,EAAA,GAAG;AACpB,IAAA;AACA,IAAA,IAAIX,KAAK,EAAE;MACT,oBAAOU,cAAA,CAACE,qBAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAoB,QAAG;AACvE,IAAA;AACA,IAAA,IAAIZ,OAAO,EAAE;MACX,oBAAOS,cAAA,CAACI,wBAAgB,EAAA;AAAC,QAAA,aAAA,EAAY,+BAA+B;AAACD,QAAAA,IAAI,EAAC;AAAK,OAAA,CAAG;AACpF,IAAA;IACA,oBAAOH,cAAA,CAACK,kBAAU,EAAA;AAACF,MAAAA,IAAI,EAAE,EAAG;AAAChB,MAAAA,SAAS,EAAEA;AAAU,MAAG;EACvD,CAAC;EAED,oBACEmB,eAAA,CAACC,wBAAgB,EAAA;AACfpB,IAAAA,SAAS,EAAEU,gBAAiB;AAC5B,IAAA,aAAA,EAAaF,UAAW;IACxBH,SAAS,EAAEgB,SAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBrB,WAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEI,IAAI;AAAAH,IAAAA,QAAA,gBAERO,cAAA,CAAA,KAAA,EAAA;AAAKR,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEK,WAAW;AAAE,KAAM,CACtE,eAAAE,cAAA,CAACS,YAAI,EAAA;AAAAhB,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAkB,CAAC;AAEvB;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"InlinePrompt.mjs","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport SentimentSurface from '../../sentimentSurface';\n\nexport type InlinePromptProps = {\n  sentiment?:\n    | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n    | 'proposition';\n  loading?: boolean;\n  /**\n   * Use for short-lived inline prompts to avoid swap of the icon (which is bad UX for short-lived prompts, e.g. when submit form)\n   */\n  muted?: boolean;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  children: React.ReactNode;\n  media?: React.ReactNode;\n};\n\nexport const InlinePrompt = ({\n  sentiment = Sentiment.POSITIVE,\n  muted = false,\n  loading = false,\n  className,\n  children,\n  media = null,\n  'data-testid': dataTestId,\n  ...rest\n}: InlinePromptProps) => {\n  const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;\n\n  const renderMedia = () => {\n    if (media && ['proposition', 'positive'].includes(sentiment)) {\n      return media;\n    }\n    if (sentiment === 'proposition') {\n      return <GiftBox />;\n    }\n    if (muted) {\n      return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" />;\n    }\n    if (loading) {\n      return <ProcessIndicator data-testid=\"InlinePrompt_ProcessIndicator\" size=\"xxs\" />;\n    }\n    return <StatusIcon size={16} sentiment={sentiment} />;\n  };\n\n  return (\n    <SentimentSurface\n      sentiment={surfaceSentiment}\n      data-testid={dataTestId}\n      className={clsx(\n        'wds-inline-prompt',\n        `wds-inline-prompt--${sentiment}`,\n        {\n          'wds-inline-prompt--muted': muted,\n          'wds-inline-prompt--loading': loading,\n        },\n        className,\n      )}\n      {...rest}\n    >\n      <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n      <Body>{children}</Body>\n    </SentimentSurface>\n  );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","dataTestId","rest","surfaceSentiment","renderMedia","includes","_jsx","GiftBox","BackslashCircle","size","ProcessIndicator","StatusIcon","_jsxs","SentimentSurface","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBO,MAAMA,YAAY,GAAGA,CAAC;EAC3BC,SAAS,GAAGC,SAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;AACRC,EAAAA,KAAK,GAAG,IAAI;AACZ,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,gBAAgB,GAAGV,SAAS,KAAKC,SAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,SAAS;EAEjF,MAAMW,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIJ,KAAK,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,CAACK,QAAQ,CAACZ,SAAS,CAAC,EAAE;AAC5D,MAAA,OAAOO,KAAK;AACd,IAAA;IACA,IAAIP,SAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,oBAAOa,GAAA,CAACC,OAAO,EAAA,GAAG;AACpB,IAAA;AACA,IAAA,IAAIX,KAAK,EAAE;MACT,oBAAOU,GAAA,CAACE,eAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAoB,QAAG;AACvE,IAAA;AACA,IAAA,IAAIZ,OAAO,EAAE;MACX,oBAAOS,GAAA,CAACI,gBAAgB,EAAA;AAAC,QAAA,aAAA,EAAY,+BAA+B;AAACD,QAAAA,IAAI,EAAC;AAAK,OAAA,CAAG;AACpF,IAAA;IACA,oBAAOH,GAAA,CAACK,UAAU,EAAA;AAACF,MAAAA,IAAI,EAAE,EAAG;AAAChB,MAAAA,SAAS,EAAEA;AAAU,MAAG;EACvD,CAAC;EAED,oBACEmB,IAAA,CAACC,gBAAgB,EAAA;AACfpB,IAAAA,SAAS,EAAEU,gBAAiB;AAC5B,IAAA,aAAA,EAAaF,UAAW;IACxBH,SAAS,EAAEgB,IAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBrB,SAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEI,IAAI;AAAAH,IAAAA,QAAA,gBAERO,GAAA,CAAA,KAAA,EAAA;AAAKR,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEK,WAAW;AAAE,KAAM,CACtE,eAAAE,GAAA,CAACS,IAAI,EAAA;AAAAhB,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAkB,CAAC;AAEvB;;;;"}
+{"version":3,"file":"InlinePrompt.mjs","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport SentimentSurface from '../../sentimentSurface';\n\nexport type InlinePromptProps = {\n  /**\n   * The sentiment determines the colour scheme\n   */\n  sentiment?:\n    | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n    | 'proposition';\n  /**\n   * Replaces the icon with a spinner while waiting for the short-lived action to finish.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled\n   * they are associated with actually disabled component (e.g. a disabled list item or input).\n   * @default false\n   */\n  muted?: boolean;\n  /**\n   * Icon override for `proposition` and `positive` sentiments. Unsupported for remaining ones.\n   */\n  media?: React.ReactNode;\n  id?: string;\n  className?: string;\n  'data-testid'?: string;\n  children: React.ReactNode;\n};\n\n/**\n * Inline prompts appear alongside a specific component on the screen. They help the user stay\n * informed, fix something, or get more out of what they're doing.\n */\nexport const InlinePrompt = ({\n  sentiment = Sentiment.POSITIVE,\n  muted = false,\n  loading = false,\n  className,\n  children,\n  media = null,\n  'data-testid': dataTestId,\n  ...rest\n}: InlinePromptProps) => {\n  const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;\n\n  const renderMedia = () => {\n    if (media && ['proposition', 'positive'].includes(sentiment)) {\n      return media;\n    }\n    if (sentiment === 'proposition') {\n      return <GiftBox />;\n    }\n    if (muted) {\n      return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" />;\n    }\n    if (loading) {\n      return <ProcessIndicator data-testid=\"InlinePrompt_ProcessIndicator\" size=\"xxs\" />;\n    }\n    return <StatusIcon size={16} sentiment={sentiment} />;\n  };\n\n  return (\n    <SentimentSurface\n      sentiment={surfaceSentiment}\n      data-testid={dataTestId}\n      className={clsx(\n        'wds-inline-prompt',\n        `wds-inline-prompt--${sentiment}`,\n        {\n          'wds-inline-prompt--muted': muted,\n          'wds-inline-prompt--loading': loading,\n        },\n        className,\n      )}\n      {...rest}\n    >\n      <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n      <Body>{children}</Body>\n    </SentimentSurface>\n  );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","dataTestId","rest","surfaceSentiment","renderMedia","includes","_jsx","GiftBox","BackslashCircle","size","ProcessIndicator","StatusIcon","_jsxs","SentimentSurface","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCO,MAAMA,YAAY,GAAGA,CAAC;EAC3BC,SAAS,GAAGC,SAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;AACRC,EAAAA,KAAK,GAAG,IAAI;AACZ,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,gBAAgB,GAAGV,SAAS,KAAKC,SAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,SAAS;EAEjF,MAAMW,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIJ,KAAK,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,CAACK,QAAQ,CAACZ,SAAS,CAAC,EAAE;AAC5D,MAAA,OAAOO,KAAK;AACd,IAAA;IACA,IAAIP,SAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,oBAAOa,GAAA,CAACC,OAAO,EAAA,GAAG;AACpB,IAAA;AACA,IAAA,IAAIX,KAAK,EAAE;MACT,oBAAOU,GAAA,CAACE,eAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAoB,QAAG;AACvE,IAAA;AACA,IAAA,IAAIZ,OAAO,EAAE;MACX,oBAAOS,GAAA,CAACI,gBAAgB,EAAA;AAAC,QAAA,aAAA,EAAY,+BAA+B;AAACD,QAAAA,IAAI,EAAC;AAAK,OAAA,CAAG;AACpF,IAAA;IACA,oBAAOH,GAAA,CAACK,UAAU,EAAA;AAACF,MAAAA,IAAI,EAAE,EAAG;AAAChB,MAAAA,SAAS,EAAEA;AAAU,MAAG;EACvD,CAAC;EAED,oBACEmB,IAAA,CAACC,gBAAgB,EAAA;AACfpB,IAAAA,SAAS,EAAEU,gBAAiB;AAC5B,IAAA,aAAA,EAAaF,UAAW;IACxBH,SAAS,EAAEgB,IAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBrB,SAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEI,IAAI;AAAAH,IAAAA,QAAA,gBAERO,GAAA,CAAA,KAAA,EAAA;AAAKR,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEK,WAAW;AAAE,KAAM,CACtE,eAAAE,GAAA,CAACS,IAAI,EAAA;AAAAhB,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAkB,CAAC;AAEvB;;;;"}

package/build/styles/iconButton/IconButton.css

@@ -13,17 +13,17 @@
   background-color: var(--color-background-neutral-active);
 }
 .np-icon-button-primary-default {
-  color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
+  color: var(--color-interactive-control);
   background-color: #00a2dd;
-  background-color: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
+  background-color: var(--color-interactive-accent);
 }
 .np-icon-button-primary-default:not(.disabled):not(:disabled):hover {
   background-color: #008fc9;
-  background-color: var(--color-sentiment-interactive-primary-hover, var(--color-interactive-accent-hover));
+  background-color: var(--color-interactive-accent-hover);
 }
 .np-icon-button-primary-default:not(.disabled):not(:disabled):active {
   background-color: #0081ba;
-  background-color: var(--color-sentiment-interactive-primary-active, var(--color-interactive-accent-active));
+  background-color: var(--color-interactive-accent-active);
 }
 .np-icon-button-primary-negative {
   color: var(--color-contrast-overlay);
@@ -51,14 +51,14 @@
   background-color: var(--color-background-screen-active);
 }
 .np-icon-button-secondary-default {
-  color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
-  background-color: var(--color-sentiment-interactive-secondary-neutral, var(--color-interactive-neutral));
+  color: var(--color-interactive-primary);
+  background-color: var(--color-interactive-neutral);
 }
 .np-icon-button-secondary-default:not(.disabled):not(:disabled):hover {
-  background-color: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-interactive-neutral-hover));
+  background-color: var(--color-interactive-neutral-hover);
 }
 .np-icon-button-secondary-default:not(.disabled):not(:disabled):active {
-  background-color: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-interactive-neutral-active));
+  background-color: 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 {

package/build/styles/main.css

@@ -1026,17 +1026,17 @@
   background-color: var(--color-background-neutral-active);
 }
 .np-icon-button-primary-default {
-  color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
+  color: var(--color-interactive-control);
   background-color: #00a2dd;
-  background-color: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
+  background-color: var(--color-interactive-accent);
 }
 .np-icon-button-primary-default:not(.disabled):not(:disabled):hover {
   background-color: #008fc9;
-  background-color: var(--color-sentiment-interactive-primary-hover, var(--color-interactive-accent-hover));
+  background-color: var(--color-interactive-accent-hover);
 }
 .np-icon-button-primary-default:not(.disabled):not(:disabled):active {
   background-color: #0081ba;
-  background-color: var(--color-sentiment-interactive-primary-active, var(--color-interactive-accent-active));
+  background-color: var(--color-interactive-accent-active);
 }
 .np-icon-button-primary-negative {
   color: var(--color-contrast-overlay);
@@ -1064,14 +1064,14 @@
   background-color: var(--color-background-screen-active);
 }
 .np-icon-button-secondary-default {
-  color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
-  background-color: var(--color-sentiment-interactive-secondary-neutral, var(--color-interactive-neutral));
+  color: var(--color-interactive-primary);
+  background-color: var(--color-interactive-neutral);
 }
 .np-icon-button-secondary-default:not(.disabled):not(:disabled):hover {
-  background-color: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-interactive-neutral-hover));
+  background-color: var(--color-interactive-neutral-hover);
 }
 .np-icon-button-secondary-default:not(.disabled):not(:disabled):active {
-  background-color: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-interactive-neutral-active));
+  background-color: 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 {

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;
 };
+/**
+ * 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;AAQzC,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,+FAS1B,iBAAiB,gCAsCnB,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,gCAsCnB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-9a0f034",
+  "version": "0.0.0-experimental-8b4289e",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -84,13 +84,13 @@
     "storybook-addon-tag-badges": "^2.0.2",
     "storybook-addon-test-codegen": "^2.0.1",
     "@transferwise/less-config": "3.1.2",
-    "@transferwise/neptune-css": "0.0.0-experimental-9a0f034",
+    "@transferwise/neptune-css": "0.0.0-experimental-8b4289e",
     "@wise/components-theming": "1.9.1",
     "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3 || ^4",
-    "@transferwise/neptune-css": "0.0.0-experimental-9a0f034",
+    "@transferwise/neptune-css": "0.0.0-experimental-8b4289e",
     "@wise/art": "^2.24.4",
     "@wise/components-theming": "^1.6.2",
     "react": ">=18",

package/src/iconButton/IconButton.css

@@ -13,17 +13,17 @@
   background-color: var(--color-background-neutral-active);
 }
 .np-icon-button-primary-default {
-  color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
+  color: var(--color-interactive-control);
   background-color: #00a2dd;
-  background-color: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
+  background-color: var(--color-interactive-accent);
 }
 .np-icon-button-primary-default:not(.disabled):not(:disabled):hover {
   background-color: #008fc9;
-  background-color: var(--color-sentiment-interactive-primary-hover, var(--color-interactive-accent-hover));
+  background-color: var(--color-interactive-accent-hover);
 }
 .np-icon-button-primary-default:not(.disabled):not(:disabled):active {
   background-color: #0081ba;
-  background-color: var(--color-sentiment-interactive-primary-active, var(--color-interactive-accent-active));
+  background-color: var(--color-interactive-accent-active);
 }
 .np-icon-button-primary-negative {
   color: var(--color-contrast-overlay);
@@ -51,14 +51,14 @@
   background-color: var(--color-background-screen-active);
 }
 .np-icon-button-secondary-default {
-  color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
-  background-color: var(--color-sentiment-interactive-secondary-neutral, var(--color-interactive-neutral));
+  color: var(--color-interactive-primary);
+  background-color: var(--color-interactive-neutral);
 }
 .np-icon-button-secondary-default:not(.disabled):not(:disabled):hover {
-  background-color: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-interactive-neutral-hover));
+  background-color: var(--color-interactive-neutral-hover);
 }
 .np-icon-button-secondary-default:not(.disabled):not(:disabled):active {
-  background-color: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-interactive-neutral-active));
+  background-color: 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 {

package/src/iconButton/IconButton.less

@@ -5,21 +5,7 @@
   }
 
   &-primary-default {
-    color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
-    background-color: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
-
-    &:not(.disabled, :disabled):hover {
-      background-color: var(
-        --color-sentiment-interactive-primary-hover,
-        var(--color-interactive-accent-hover)
-      );
-    }
-    &:not(.disabled, :disabled):active {
-      background-color: var(
-        --color-sentiment-interactive-primary-active,
-        var(--color-interactive-accent-active)
-      );
-    }
+    .colors(--color-interactive-control, --color-interactive-accent);
   }
 
   &-primary-negative {
@@ -36,24 +22,7 @@
   }
 
   &-secondary-default {
-    color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
-    background-color: var(
-      --color-sentiment-interactive-secondary-neutral,
-      var(--color-interactive-neutral)
-    );
-
-    &:not(.disabled, :disabled):hover {
-      background-color: var(
-        --color-sentiment-interactive-secondary-neutral-hover,
-        var(--color-interactive-neutral-hover)
-      );
-    }
-    &:not(.disabled, :disabled):active {
-      background-color: var(
-        --color-sentiment-interactive-secondary-neutral-active,
-        var(--color-interactive-neutral-active)
-      );
-    }
+    .colors(--color-interactive-primary, --color-interactive-neutral);
 
     .np-theme-personal--bright-green &,
     .np-theme-personal--forest-green & {
@@ -77,10 +46,10 @@
     background-color: var(@bg-color);
 
     &:not(.disabled, :disabled):hover {
-      background-color: ~"var(@{bg-color}-hover)";
+      background-color:~"var(@{bg-color}-hover)";
     }
     &:not(.disabled, :disabled):active {
-      background-color: ~"var(@{bg-color}-active)";
+      background-color:~"var(@{bg-color}-active)";
     }
   }
 }

package/src/iconButton/IconButton.story.tsx

@@ -1,9 +1,9 @@
+/* eslint-disable react/jsx-key */
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { ArrowLeft, Cross, Defrost, Edit, Menu, Plus } from '@transferwise/icons';
 import IconButton, { Props } from './IconButton';
 import { action } from 'storybook/actions';
 import Body from '../body';
-import SentimentSurface from '../sentimentSurface';
 
 export default {
   title: 'Actions/IconButton',
@@ -94,83 +94,14 @@ export const Basic: Story = {
       >
         {['Primary', 'Secondary', 'Tertiary', 'Minimal', 'Neg primary', 'Neg secondary'].map(
           (variant) => (
-            <Body key={variant} type="body-default-bold">
-              {variant}
-            </Body>
+            <Body type="body-default-bold">{variant}</Body>
           ),
         )}
         {sizes.map((size) => (
-          <Template key={size} size={size} />
+          <Template size={size} />
         ))}
         <Template size={72} disabled />
       </div>
     );
   },
 };
-
-/**
- * `IconButton` is sentiment-aware and will automatically adjust its
- * colours if wrapped inside the [SentimentSurface](/?path=/docs/content-sentimentsurface--docs) component
- */
-export const SentimentAwareness: Story = {
-  render: () => {
-    return (
-      <>
-        {(['success', 'warning', 'negative', 'neutral', 'proposition'] as const).map(
-          (sentiment) => (
-            <SentimentSurface
-              key={sentiment}
-              sentiment={sentiment}
-              className="p-a-1 d-flex align-items-center"
-              style={{ gap: 'var(--size-8)' }}
-            >
-              <IconButton
-                size={32}
-                aria-label="Primary action"
-                priority="primary"
-                type="default"
-                onClick={action('button click')}
-              >
-                <Plus />
-              </IconButton>
-              <IconButton
-                size={32}
-                aria-label="Secondary action"
-                priority="secondary"
-                type="default"
-                onClick={action('button click')}
-              >
-                <Defrost />
-              </IconButton>
-              <IconButton
-                size={32}
-                aria-label="Disabled action"
-                priority="primary"
-                type="default"
-                disabled
-                onClick={action('button click')}
-              >
-                <Menu />
-              </IconButton>
-            </SentimentSurface>
-          ),
-        )}
-      </>
-    );
-  },
-  parameters: {
-    docs: {
-      source: { type: 'dynamic' },
-      canvas: {
-        sourceState: 'hidden',
-      },
-    },
-  },
-  decorators: [
-    (Story) => (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-        <Story />
-      </div>
-    ),
-  ],
-};

package/src/main.css

@@ -1026,17 +1026,17 @@
   background-color: var(--color-background-neutral-active);
 }
 .np-icon-button-primary-default {
-  color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
+  color: var(--color-interactive-control);
   background-color: #00a2dd;
-  background-color: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
+  background-color: var(--color-interactive-accent);
 }
 .np-icon-button-primary-default:not(.disabled):not(:disabled):hover {
   background-color: #008fc9;
-  background-color: var(--color-sentiment-interactive-primary-hover, var(--color-interactive-accent-hover));
+  background-color: var(--color-interactive-accent-hover);
 }
 .np-icon-button-primary-default:not(.disabled):not(:disabled):active {
   background-color: #0081ba;
-  background-color: var(--color-sentiment-interactive-primary-active, var(--color-interactive-accent-active));
+  background-color: var(--color-interactive-accent-active);
 }
 .np-icon-button-primary-negative {
   color: var(--color-contrast-overlay);
@@ -1064,14 +1064,14 @@
   background-color: var(--color-background-screen-active);
 }
 .np-icon-button-secondary-default {
-  color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
-  background-color: var(--color-sentiment-interactive-secondary-neutral, var(--color-interactive-neutral));
+  color: var(--color-interactive-primary);
+  background-color: var(--color-interactive-neutral);
 }
 .np-icon-button-secondary-default:not(.disabled):not(:disabled):hover {
-  background-color: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-interactive-neutral-hover));
+  background-color: var(--color-interactive-neutral-hover);
 }
 .np-icon-button-secondary-default:not(.disabled):not(:disabled):active {
-  background-color: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-interactive-neutral-active));
+  background-color: 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 {

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

@@ -1,11 +1,34 @@
+import type { ReactElement } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { lorem10, lorem5 } from '../../test-utils';
-import { InlinePrompt } from './InlinePrompt';
-import { CardWise, Rewards } from '@transferwise/icons';
+import { Taxi, Travel } from '@transferwise/icons';
+import { lorem5 } from '../../test-utils';
+import Link from '../../link';
+import { InlinePrompt, InlinePromptProps } from './InlinePrompt';
 
-const meta: Meta<typeof InlinePrompt> = {
+const withComponentGrid =
+  ({ maxWidth = 'auto', gap = '1rem' } = {}) =>
+  (Story: () => ReactElement) => (
+    <div
+      style={{
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        gap,
+        maxWidth,
+      }}
+    >
+      <Story />
+    </div>
+  );
+
+export default {
   title: 'Internal/InlinePrompt',
   component: InlinePrompt,
+  args: {
+    loading: false,
+    muted: false,
+    children: lorem5,
+  },
   argTypes: {
     sentiment: {
       control: 'select',
@@ -19,52 +42,190 @@ const meta: Meta<typeof InlinePrompt> = {
     },
     children: {
       control: 'text',
+      table: {
+        type: { summary: 'ReactNode' },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      toc: true,
     },
   },
+} satisfies Meta<InlinePromptProps>;
+
+/**
+ * Convenience controls for previewing rich markup,
+ * not otherwise possible via Storybook
+ */
+type PreviewStoryArgs = InlinePromptProps & {
+  previewMedia: InlinePromptProps['media'];
+};
+
+const previewArgGroup = {
+  category: 'Storybook Preview options',
+  type: {
+    summary: undefined,
+  },
 };
 
-export default meta;
-type Story = StoryObj<typeof InlinePrompt>;
+const previewArgTypes = {
+  previewMedia: {
+    name: 'Preview with `media`',
+    control: 'boolean',
+    mapping: {
+      false: undefined,
+      true: <Taxi />,
+    },
+    table: previewArgGroup,
+  },
+} as const;
+
+const getPropsForPreview = (
+  args: PreviewStoryArgs,
+): [InlinePromptProps, Partial<InlinePromptProps>] => {
+  const { previewMedia, ...props } = args;
 
-export const Playground: Story = {
+  return [
+    props,
+    {
+      media: previewMedia,
+    },
+  ];
+};
+
+export const Playground: StoryObj<PreviewStoryArgs> = {
+  tags: ['!autodocs'],
+  argTypes: previewArgTypes,
   args: {
-    sentiment: 'positive',
-    loading: false,
-    muted: false,
-    children: lorem5,
+    previewMedia: false,
+  },
+  render: (args: PreviewStoryArgs) => {
+    const [props, previewProps] = getPropsForPreview(args);
+    return <InlinePrompt {...props} {...previewProps} />;
   },
 };
 
-export const AllVariants: Story = {
-  render: (args) => (
-    <div
-      style={{
-        display: 'grid',
-        gridAutoFlow: 'row',
-        rowGap: 'var(--size-12)',
-        justifyItems: 'start',
-        width: 'fit-content',
-      }}
-    >
-      <InlinePrompt sentiment="positive">{lorem5}</InlinePrompt>
-      <InlinePrompt media={<Rewards />} sentiment="positive">
-        {lorem10}
-      </InlinePrompt>
-      <InlinePrompt sentiment="negative">{lorem5}</InlinePrompt>
-      <InlinePrompt sentiment="negative">{lorem10}</InlinePrompt>
-      <InlinePrompt sentiment="neutral">{lorem5}</InlinePrompt>
-      <InlinePrompt sentiment="neutral">{lorem10}</InlinePrompt>
-      <InlinePrompt sentiment="warning">{lorem5}</InlinePrompt>
-      <InlinePrompt sentiment="warning">{lorem10}</InlinePrompt>
-      <InlinePrompt sentiment="proposition">{lorem5}</InlinePrompt>
-      <InlinePrompt sentiment="proposition">{lorem10}</InlinePrompt>
-      <InlinePrompt sentiment="proposition" media={<CardWise />}>
-        {lorem10}
-      </InlinePrompt>
-      <InlinePrompt>{lorem5}</InlinePrompt>
-    </div>
-  ),
-  parameters: {
-    controls: { disable: true },
+/**
+ * Aside from the known `neutral`, `negative`, `warning` and `positive` sentiments, `InlinePrompt` is the first of the prompts to introduce a new `proposition` sentiment, which can be used to encourage the user to take an action that might benefit them.
+ *
+ * By default, its associated icon for the prompt is `GiftBox`.
+ */
+export const Sentiments: StoryObj<PreviewStoryArgs> = {
+  argTypes: previewArgTypes,
+  args: {
+    previewMedia: false,
+  },
+  render: (args: PreviewStoryArgs) => {
+    const [props, previewProps] = getPropsForPreview(args);
+    return (
+      <>
+        <InlinePrompt {...props} {...previewProps} sentiment="neutral">
+          This is a neutral prompt.
+        </InlinePrompt>
+        <InlinePrompt {...props} {...previewProps} sentiment="negative">
+          This is a negative prompt.
+        </InlinePrompt>
+        <InlinePrompt {...props} {...previewProps} sentiment="warning">
+          This is a warning prompt.
+        </InlinePrompt>
+        <InlinePrompt {...props} {...previewProps} sentiment="positive">
+          This is a positive prompt.
+        </InlinePrompt>
+        <InlinePrompt {...props} {...previewProps} sentiment="proposition">
+          This is a proposition prompt.
+        </InlinePrompt>
+      </>
+    );
+  },
+  decorators: [withComponentGrid()],
+};
+
+/**
+ * Inline prompts are also used when forms need to check something in the background, like
+ * verifying an account number is real. Turning on the loading state will replace the icon with
+ * a spinner while waiting for the check to finish.
+ */
+export const Loading: StoryObj<PreviewStoryArgs> = {
+  argTypes: previewArgTypes,
+  args: {
+    loading: true,
+    previewMedia: false,
+  },
+  render: (args: PreviewStoryArgs) => {
+    const [props, previewProps] = getPropsForPreview(args);
+    return <InlinePrompt {...props} {...previewProps} />;
+  },
+};
+
+/**
+ * Inline prompt is usually associated with a different component, such as `Input` or `ListItem`.
+ * When those components are disabled, the prompt is often used to communicate to the user why they
+ * cannot interact with them. For that reason, the prompt cannot inherit the usual disabled visual
+ * style, and it must retain its interactivity. To bring these 2 components visually closer to each
+ * other, `muted` prop introduces slightly reduced opacity and luminosity as well as a special
+ * backslash circle icon.
+ */
+export const Muted: StoryObj<PreviewStoryArgs> = {
+  argTypes: previewArgTypes,
+  args: {
+    muted: true,
+    previewMedia: false,
+  },
+  render: (args: PreviewStoryArgs) => {
+    const [props, previewProps] = getPropsForPreview(args);
+    return <InlinePrompt {...props} {...previewProps} />;
+  },
+};
+
+/**
+ * While main sentiments (`warning`, `negative`, `neutral`) must retain their associated
+ * `StatusIcons`, the `positive` and `proposition` ones allow for Icon overrides to bring it
+ * closer to the prompt's content.
+ */
+export const IconOverrides: StoryObj<PreviewStoryArgs> = {
+  render: (args: PreviewStoryArgs) => {
+    return (
+      <>
+        <InlinePrompt {...args} media={<Travel />} sentiment="positive">
+          Your travel account is set up and ready to use.
+        </InlinePrompt>
+        <InlinePrompt {...args} media={<Taxi />} sentiment="proposition">
+          Connect Wise with your taxi app to get exclusive discounts.
+        </InlinePrompt>
+        <InlinePrompt {...args} media={<Taxi />} sentiment="negative">
+          This icon override is ignored.
+        </InlinePrompt>
+      </>
+    );
+  },
+  decorators: [withComponentGrid()],
+};
+
+/**
+ * When configured with any of the supported sentiments, the colour scheme of the component will propagate to all of its supported descendants, such as instances of a `Link`, `Icon`, and `StatusIcon`.
+ */
+export const SentimentAwareness: StoryObj<PreviewStoryArgs> = {
+  argTypes: previewArgTypes,
+  args: {
+    previewMedia: false,
+  },
+  render: (args: PreviewStoryArgs) => {
+    const [props, previewProps] = getPropsForPreview(args);
+
+    return (
+      <>
+        <InlinePrompt {...props} {...previewProps} sentiment="negative">
+          This is a negative prompt with an <Link href="#">inline link</Link>.
+        </InlinePrompt>
+        <InlinePrompt {...props} {...previewProps} sentiment="positive">
+          This is a positive prompt with an <Link href="#">inline link</Link>.
+        </InlinePrompt>
+        <InlinePrompt {...props} {...previewProps} sentiment="proposition">
+          This is a proposition prompt with an <Link href="#">inline link</Link>.
+        </InlinePrompt>
+      </>
+    );
   },
+  decorators: [withComponentGrid()],
 };

package/src/prompt/InlinePrompt/InlinePrompt.tsx

@@ -7,21 +7,37 @@ import Body from '../../body';
 import SentimentSurface from '../../sentimentSurface';
 
 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;
 };
 
+/**
+ * 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 const InlinePrompt = ({
   sentiment = Sentiment.POSITIVE,
   muted = false,