@transferwise/components 0.0.0-experimental-946934e → 0.0.0-experimental-b62a45e

package/build/main.css

@@ -959,7 +959,7 @@
 }
 .np-avatar-view .np-avatar-view-content {
   color: #37517e;
-  color: var(--color-sentiment-content-primary, var(--color-content-primary));
+  color: var(--color-content-primary);
 }
 .np-avatar-view-interactive {
   cursor: pointer;
@@ -971,7 +971,6 @@
 }
 .np-avatar-view-non-interactive .np-circle {
   background-color: transparent;
-  background-color: var(--color-sentiment-background-surface, transparent);
 }
 .np-avatar-view-non-interactive .np-avatar-view-content .wds-flag {
   box-shadow: none;
@@ -1944,7 +1943,7 @@
   width: var(--circle-size);
   height: var(--circle-size);
   flex-shrink: 0;
-  --circle-border-color: var(--color-sentiment-content-primary, var(--color-border-neutral));
+  --circle-border-color: var(--color-border-neutral);
   --circle-border-width: 1px;
   font-size: var(--circle-font-size);
   font-weight: 600;

package/build/prompt/InlinePrompt/InlinePrompt.js

@@ -42,12 +42,6 @@ const InlinePrompt = ({
 }) => {
   const surfaceSentiment = sentiment$1 === sentiment.Sentiment.POSITIVE ? 'success' : sentiment$1;
   const renderMedia = () => {
-    if (media && ['proposition', 'positive'].includes(sentiment$1)) {
-      return media;
-    }
-    if (sentiment$1 === 'proposition') {
-      return /*#__PURE__*/jsxRuntime.jsx(icons.GiftBox, {});
-    }
     if (muted) {
       return /*#__PURE__*/jsxRuntime.jsx(icons.BackslashCircle, {
         size: 16,
@@ -61,6 +55,12 @@ const InlinePrompt = ({
         className: "wds-inline-prompt-process-indicator"
       });
     }
+    if (sentiment$1 === 'positive' && media) {
+      return media;
+    }
+    if (sentiment$1 === 'proposition') {
+      return media || /*#__PURE__*/jsxRuntime.jsx(icons.GiftBox, {});
+    }
     return /*#__PURE__*/jsxRuntime.jsx(StatusIcon.default, {
       size: 16,
       sentiment: sentiment$1

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  /**\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 (\n        <ProcessIndicator\n          data-testid=\"InlinePrompt_ProcessIndicator\"\n          size=\"xxs\"\n          className=\"wds-inline-prompt-process-indicator\"\n        />\n      );\n    }\n    return <StatusIcon size={16} sentiment={sentiment} />;\n  };\n\n  return (\n    <SentimentSurface\n      sentiment={surfaceSentiment}\n      data-testid={dataTestId}\n      className={clsx(\n        'wds-inline-prompt',\n        `wds-inline-prompt--${sentiment}`,\n        {\n          'wds-inline-prompt--muted': muted,\n          'wds-inline-prompt--loading': loading,\n        },\n        className,\n      )}\n      {...rest}\n    >\n      <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n      <Body>{children}</Body>\n    </SentimentSurface>\n  );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","dataTestId","rest","surfaceSentiment","renderMedia","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,oBACES,cAAA,CAACI,wBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CD,QAAAA,IAAI,EAAC,KAAK;AACVX,QAAAA,SAAS,EAAC;AAAqC,OAAA,CAC/C;AAEN,IAAA;IACA,oBAAOQ,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 (muted) {\n      return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" />;\n    }\n    if (loading) {\n      return (\n        <ProcessIndicator\n          data-testid=\"InlinePrompt_ProcessIndicator\"\n          size=\"xxs\"\n          className=\"wds-inline-prompt-process-indicator\"\n        />\n      );\n    }\n\n    if (sentiment === 'positive' && media) {\n      return media;\n    }\n\n    if (sentiment === 'proposition') {\n      return media || <GiftBox />;\n    }\n\n    return <StatusIcon size={16} sentiment={sentiment} />;\n  };\n\n  return (\n    <SentimentSurface\n      sentiment={surfaceSentiment}\n      data-testid={dataTestId}\n      className={clsx(\n        'wds-inline-prompt',\n        `wds-inline-prompt--${sentiment}`,\n        {\n          'wds-inline-prompt--muted': muted,\n          'wds-inline-prompt--loading': loading,\n        },\n        className,\n      )}\n      {...rest}\n    >\n      <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n      <Body>{children}</Body>\n    </SentimentSurface>\n  );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","dataTestId","rest","surfaceSentiment","renderMedia","_jsx","BackslashCircle","size","ProcessIndicator","GiftBox","StatusIcon","_jsxs","SentimentSurface","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCO,MAAMA,YAAY,GAAGA,CAAC;aAC3BC,WAAS,GAAGC,mBAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;AACRC,EAAAA,KAAK,GAAG,IAAI;AACZ,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,gBAAgB,GAAGV,WAAS,KAAKC,mBAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,WAAS;EAEjF,MAAMW,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIR,KAAK,EAAE;MACT,oBAAOS,cAAA,CAACC,qBAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAoB,QAAG;AACvE,IAAA;AACA,IAAA,IAAIV,OAAO,EAAE;MACX,oBACEQ,cAAA,CAACG,wBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CD,QAAAA,IAAI,EAAC,KAAK;AACVT,QAAAA,SAAS,EAAC;AAAqC,OAAA,CAC/C;AAEN,IAAA;AAEA,IAAA,IAAIL,WAAS,KAAK,UAAU,IAAIO,KAAK,EAAE;AACrC,MAAA,OAAOA,KAAK;AACd,IAAA;IAEA,IAAIP,WAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,OAAOO,KAAK,iBAAIK,cAAA,CAACI,aAAO,KAAG;AAC7B,IAAA;IAEA,oBAAOJ,cAAA,CAACK,kBAAU,EAAA;AAACH,MAAAA,IAAI,EAAE,EAAG;AAACd,MAAAA,SAAS,EAAEA;AAAU,MAAG;EACvD,CAAC;EAED,oBACEkB,eAAA,CAACC,wBAAgB,EAAA;AACfnB,IAAAA,SAAS,EAAEU,gBAAiB;AAC5B,IAAA,aAAA,EAAaF,UAAW;IACxBH,SAAS,EAAEe,SAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBpB,WAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEI,IAAI;AAAAH,IAAAA,QAAA,gBAERM,cAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEK,WAAW;AAAE,KAAM,CACtE,eAAAC,cAAA,CAACS,YAAI,EAAA;AAAAf,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAkB,CAAC;AAEvB;;;;"}

package/build/prompt/InlinePrompt/InlinePrompt.mjs

@@ -17,7 +17,7 @@ import '../../common/propsValues/variant.mjs';
 import '../../common/propsValues/scroll.mjs';
 import '../../common/propsValues/markdownNodeType.mjs';
 import '../../common/fileType.mjs';
-import { GiftBox, BackslashCircle } from '@transferwise/icons';
+import { BackslashCircle, GiftBox } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import 'react';
 import 'react-intl';
@@ -40,12 +40,6 @@ const InlinePrompt = ({
 }) => {
   const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;
   const renderMedia = () => {
-    if (media && ['proposition', 'positive'].includes(sentiment)) {
-      return media;
-    }
-    if (sentiment === 'proposition') {
-      return /*#__PURE__*/jsx(GiftBox, {});
-    }
     if (muted) {
       return /*#__PURE__*/jsx(BackslashCircle, {
         size: 16,
@@ -59,6 +53,12 @@ const InlinePrompt = ({
         className: "wds-inline-prompt-process-indicator"
       });
     }
+    if (sentiment === 'positive' && media) {
+      return media;
+    }
+    if (sentiment === 'proposition') {
+      return media || /*#__PURE__*/jsx(GiftBox, {});
+    }
     return /*#__PURE__*/jsx(StatusIcon, {
       size: 16,
       sentiment: sentiment

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  /**\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 (\n        <ProcessIndicator\n          data-testid=\"InlinePrompt_ProcessIndicator\"\n          size=\"xxs\"\n          className=\"wds-inline-prompt-process-indicator\"\n        />\n      );\n    }\n    return <StatusIcon size={16} sentiment={sentiment} />;\n  };\n\n  return (\n    <SentimentSurface\n      sentiment={surfaceSentiment}\n      data-testid={dataTestId}\n      className={clsx(\n        'wds-inline-prompt',\n        `wds-inline-prompt--${sentiment}`,\n        {\n          'wds-inline-prompt--muted': muted,\n          'wds-inline-prompt--loading': loading,\n        },\n        className,\n      )}\n      {...rest}\n    >\n      <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n      <Body>{children}</Body>\n    </SentimentSurface>\n  );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","dataTestId","rest","surfaceSentiment","renderMedia","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,oBACES,GAAA,CAACI,gBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CD,QAAAA,IAAI,EAAC,KAAK;AACVX,QAAAA,SAAS,EAAC;AAAqC,OAAA,CAC/C;AAEN,IAAA;IACA,oBAAOQ,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 (muted) {\n      return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" />;\n    }\n    if (loading) {\n      return (\n        <ProcessIndicator\n          data-testid=\"InlinePrompt_ProcessIndicator\"\n          size=\"xxs\"\n          className=\"wds-inline-prompt-process-indicator\"\n        />\n      );\n    }\n\n    if (sentiment === 'positive' && media) {\n      return media;\n    }\n\n    if (sentiment === 'proposition') {\n      return media || <GiftBox />;\n    }\n\n    return <StatusIcon size={16} sentiment={sentiment} />;\n  };\n\n  return (\n    <SentimentSurface\n      sentiment={surfaceSentiment}\n      data-testid={dataTestId}\n      className={clsx(\n        'wds-inline-prompt',\n        `wds-inline-prompt--${sentiment}`,\n        {\n          'wds-inline-prompt--muted': muted,\n          'wds-inline-prompt--loading': loading,\n        },\n        className,\n      )}\n      {...rest}\n    >\n      <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n      <Body>{children}</Body>\n    </SentimentSurface>\n  );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","dataTestId","rest","surfaceSentiment","renderMedia","_jsx","BackslashCircle","size","ProcessIndicator","GiftBox","StatusIcon","_jsxs","SentimentSurface","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCO,MAAMA,YAAY,GAAGA,CAAC;EAC3BC,SAAS,GAAGC,SAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;AACRC,EAAAA,KAAK,GAAG,IAAI;AACZ,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,gBAAgB,GAAGV,SAAS,KAAKC,SAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,SAAS;EAEjF,MAAMW,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIR,KAAK,EAAE;MACT,oBAAOS,GAAA,CAACC,eAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAoB,QAAG;AACvE,IAAA;AACA,IAAA,IAAIV,OAAO,EAAE;MACX,oBACEQ,GAAA,CAACG,gBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CD,QAAAA,IAAI,EAAC,KAAK;AACVT,QAAAA,SAAS,EAAC;AAAqC,OAAA,CAC/C;AAEN,IAAA;AAEA,IAAA,IAAIL,SAAS,KAAK,UAAU,IAAIO,KAAK,EAAE;AACrC,MAAA,OAAOA,KAAK;AACd,IAAA;IAEA,IAAIP,SAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,OAAOO,KAAK,iBAAIK,GAAA,CAACI,OAAO,KAAG;AAC7B,IAAA;IAEA,oBAAOJ,GAAA,CAACK,UAAU,EAAA;AAACH,MAAAA,IAAI,EAAE,EAAG;AAACd,MAAAA,SAAS,EAAEA;AAAU,MAAG;EACvD,CAAC;EAED,oBACEkB,IAAA,CAACC,gBAAgB,EAAA;AACfnB,IAAAA,SAAS,EAAEU,gBAAiB;AAC5B,IAAA,aAAA,EAAaF,UAAW;IACxBH,SAAS,EAAEe,IAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBpB,SAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEI,IAAI;AAAAH,IAAAA,QAAA,gBAERM,GAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEK,WAAW;AAAE,KAAM,CACtE,eAAAC,GAAA,CAACS,IAAI,EAAA;AAAAf,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAkB,CAAC;AAEvB;;;;"}

package/build/styles/avatarView/AvatarView.css

@@ -26,7 +26,7 @@
 }
 .np-avatar-view .np-avatar-view-content {
   color: #37517e;
-  color: var(--color-sentiment-content-primary, var(--color-content-primary));
+  color: var(--color-content-primary);
 }
 .np-avatar-view-interactive {
   cursor: pointer;
@@ -38,7 +38,6 @@
 }
 .np-avatar-view-non-interactive .np-circle {
   background-color: transparent;
-  background-color: var(--color-sentiment-background-surface, transparent);
 }
 .np-avatar-view-non-interactive .np-avatar-view-content .wds-flag {
   box-shadow: none;

package/build/styles/common/circle/Circle.css

@@ -4,7 +4,7 @@
   width: var(--circle-size);
   height: var(--circle-size);
   flex-shrink: 0;
-  --circle-border-color: var(--color-sentiment-content-primary, var(--color-border-neutral));
+  --circle-border-color: var(--color-border-neutral);
   --circle-border-width: 1px;
   font-size: var(--circle-font-size);
   font-weight: 600;

package/build/styles/main.css

@@ -959,7 +959,7 @@
 }
 .np-avatar-view .np-avatar-view-content {
   color: #37517e;
-  color: var(--color-sentiment-content-primary, var(--color-content-primary));
+  color: var(--color-content-primary);
 }
 .np-avatar-view-interactive {
   cursor: pointer;
@@ -971,7 +971,6 @@
 }
 .np-avatar-view-non-interactive .np-circle {
   background-color: transparent;
-  background-color: var(--color-sentiment-background-surface, transparent);
 }
 .np-avatar-view-non-interactive .np-avatar-view-content .wds-flag {
   box-shadow: none;
@@ -1944,7 +1943,7 @@
   width: var(--circle-size);
   height: var(--circle-size);
   flex-shrink: 0;
-  --circle-border-color: var(--color-sentiment-content-primary, var(--color-border-neutral));
+  --circle-border-color: var(--color-border-neutral);
   --circle-border-width: 1px;
   font-size: var(--circle-font-size);
   font-weight: 600;

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;;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,gCA4CnB,CAAC"}
+{"version":3,"file":"InlinePrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAQzC,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,SAAS,CAAC,EACN,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,EAAE,GACpF,aAAa,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,+FAS1B,iBAAiB,gCA+CnB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-946934e",
+  "version": "0.0.0-experimental-b62a45e",
   "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-946934e",
+    "@transferwise/neptune-css": "0.0.0-experimental-b62a45e",
     "@wise/components-theming": "1.9.1",
     "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3 || ^4",
-    "@transferwise/neptune-css": "0.0.0-experimental-946934e",
+    "@transferwise/neptune-css": "0.0.0-experimental-b62a45e",
     "@wise/art": "^2.24.4",
     "@wise/components-theming": "^1.6.2",
     "react": ">=18",

package/src/avatarView/AvatarView.css

@@ -26,7 +26,7 @@
 }
 .np-avatar-view .np-avatar-view-content {
   color: #37517e;
-  color: var(--color-sentiment-content-primary, var(--color-content-primary));
+  color: var(--color-content-primary);
 }
 .np-avatar-view-interactive {
   cursor: pointer;
@@ -38,7 +38,6 @@
 }
 .np-avatar-view-non-interactive .np-circle {
   background-color: transparent;
-  background-color: var(--color-sentiment-background-surface, transparent);
 }
 .np-avatar-view-non-interactive .np-avatar-view-content .wds-flag {
   box-shadow: none;

package/src/avatarView/AvatarView.less

@@ -1,8 +1,8 @@
-@import "./Dot.less";
+@import './Dot.less';
 
 .np-avatar-view {
   .np-avatar-view-content {
-    color: var(--color-sentiment-content-primary, var(--color-content-primary));
+    color: var(--color-content-primary);
   }
 
   &-interactive {
@@ -15,7 +15,7 @@
 
   &-non-interactive {
     .np-circle {
-      background-color: var(--color-sentiment-background-surface, transparent);
+      background-color: transparent;
     }
     .np-avatar-view-content {
       // dismiss broken shadow on Flag component (DS-6309)

package/src/common/circle/Circle.css

@@ -4,7 +4,7 @@
   width: var(--circle-size);
   height: var(--circle-size);
   flex-shrink: 0;
-  --circle-border-color: var(--color-sentiment-content-primary, var(--color-border-neutral));
+  --circle-border-color: var(--color-border-neutral);
   --circle-border-width: 1px;
   font-size: var(--circle-font-size);
   font-weight: 600;

package/src/common/circle/Circle.less

@@ -4,7 +4,7 @@
   height: var(--circle-size);
   flex-shrink: 0;
 
-  --circle-border-color: var(--color-sentiment-content-primary, var(--color-border-neutral));
+  --circle-border-color: var(--color-border-neutral);
   --circle-border-width: 1px;
 
   // circle like components have custom typography styles for for default (Inter) font

package/src/main.css

@@ -959,7 +959,7 @@
 }
 .np-avatar-view .np-avatar-view-content {
   color: #37517e;
-  color: var(--color-sentiment-content-primary, var(--color-content-primary));
+  color: var(--color-content-primary);
 }
 .np-avatar-view-interactive {
   cursor: pointer;
@@ -971,7 +971,6 @@
 }
 .np-avatar-view-non-interactive .np-circle {
   background-color: transparent;
-  background-color: var(--color-sentiment-background-surface, transparent);
 }
 .np-avatar-view-non-interactive .np-avatar-view-content .wds-flag {
   box-shadow: none;
@@ -1944,7 +1943,7 @@
   width: var(--circle-size);
   height: var(--circle-size);
   flex-shrink: 0;
-  --circle-border-color: var(--color-sentiment-content-primary, var(--color-border-neutral));
+  --circle-border-color: var(--color-border-neutral);
   --circle-border-width: 1px;
   font-size: var(--circle-font-size);
   font-weight: 600;

package/src/prompt/InlinePrompt/InlinePrompt.spec.tsx

@@ -1,10 +1,11 @@
-import React from 'react';
 import { mockMatchMedia, render, screen } from '../../test-utils';
 import { InlinePrompt, InlinePromptProps } from './InlinePrompt';
 import { Sentiment } from '../../common';
 
 mockMatchMedia();
 
+const MEDIA = <span data-testid="custom-media">Custom Media</span>;
+
 describe('InlinePrompt', () => {
   const defaultProps: InlinePromptProps = {
     children: 'Prompt message',
@@ -21,39 +22,75 @@ describe('InlinePrompt', () => {
     expect(screen.getByTestId('gift-box-icon')).toBeInTheDocument();
   });
 
-  describe('renders with each sentiment', () => {
-    it.each([Sentiment.POSITIVE, Sentiment.NEUTRAL, Sentiment.NEGATIVE, Sentiment.WARNING])(
-      'renders with sentiment %s',
-      (sentiment) => {
-        render(
-          <InlinePrompt
-            {...defaultProps}
-            sentiment={sentiment as InlinePromptProps['sentiment']}
-          />,
-        );
+  [
+    { sentiment: Sentiment.NEGATIVE as const, acceptsMedia: false, statusIconLabel: 'Error:' },
+    { sentiment: Sentiment.WARNING as const, acceptsMedia: false, statusIconLabel: 'Warning:' },
+    { sentiment: Sentiment.NEUTRAL as const, acceptsMedia: false, statusIconLabel: 'Information:' },
+    { sentiment: Sentiment.POSITIVE as const, acceptsMedia: true, statusIconLabel: '' },
+    { sentiment: 'proposition' as const, acceptsMedia: true, statusIconLabel: '' },
+  ].forEach(({ sentiment, statusIconLabel, acceptsMedia }) => {
+    describe(sentiment, () => {
+      it('should apply correct styles', () => {
+        render(<InlinePrompt {...defaultProps} sentiment={sentiment} />);
         expect(screen.getByText('Prompt message').parentElement).toHaveClass(
           `wds-inline-prompt--${sentiment}`,
         );
-      },
-    );
-  });
+      });
 
-  it('renders muted state', () => {
-    render(<InlinePrompt {...defaultProps} muted />);
-    screen.debug(undefined, 99999999);
-    expect(screen.getByText('Prompt message').parentElement).toHaveClass(
-      'wds-inline-prompt--muted',
-    );
-    expect(screen.getByTestId('InlinePrompt_Muted')).toBeInTheDocument();
-  });
+      if (statusIconLabel) {
+        it('should render StatusIcon', () => {
+          render(<InlinePrompt {...defaultProps} sentiment={sentiment} />);
+          expect(screen.getByLabelText(statusIconLabel)).toBeInTheDocument();
+        });
+      }
 
-  it('renders loading state', () => {
-    render(<InlinePrompt {...defaultProps} loading />);
-    screen.debug(undefined, 99999999);
-    expect(screen.getByText('Prompt message').parentElement).toHaveClass(
-      'wds-inline-prompt--loading',
-    );
-    expect(screen.getByTestId('InlinePrompt_ProcessIndicator')).toBeInTheDocument();
+      describe('muted state', () => {
+        it('should render icon and apply css', () => {
+          render(<InlinePrompt {...defaultProps} muted sentiment={sentiment} />);
+          expect(screen.getByText('Prompt message').parentElement).toHaveClass(
+            'wds-inline-prompt--muted',
+          );
+          expect(screen.getByTestId('InlinePrompt_Muted')).toBeInTheDocument();
+        });
+
+        it('should trump `media`', () => {
+          render(<InlinePrompt {...defaultProps} muted sentiment={sentiment} media={MEDIA} />);
+          expect(screen.getByTestId('InlinePrompt_Muted')).toBeInTheDocument();
+          expect(screen.queryByTestId('custom-media')).not.toBeInTheDocument();
+        });
+      });
+
+      describe('loading state', () => {
+        it('should render icon and apply css', () => {
+          render(<InlinePrompt {...defaultProps} sentiment={sentiment} loading />);
+          expect(screen.getByText('Prompt message').parentElement).toHaveClass(
+            'wds-inline-prompt--loading',
+          );
+          expect(screen.getByTestId('InlinePrompt_ProcessIndicator')).toBeInTheDocument();
+        });
+
+        it('should trump `media`', () => {
+          render(<InlinePrompt {...defaultProps} sentiment={sentiment} loading media={MEDIA} />);
+          expect(screen.getByTestId('InlinePrompt_ProcessIndicator')).toBeInTheDocument();
+          expect(screen.queryByTestId('custom-media')).not.toBeInTheDocument();
+        });
+      });
+
+      describe('custom media', () => {
+        if (acceptsMedia) {
+          it('should respect `media`', () => {
+            render(<InlinePrompt {...defaultProps} sentiment={sentiment} media={MEDIA} />);
+            expect(screen.getByTestId('custom-media')).toBeInTheDocument();
+          });
+        } else {
+          it('should ignore `media`', () => {
+            render(<InlinePrompt {...defaultProps} sentiment={sentiment} media={MEDIA} />);
+            expect(screen.getByLabelText(statusIconLabel)).toBeInTheDocument();
+            expect(screen.queryByTestId('custom-media')).not.toBeInTheDocument();
+          });
+        }
+      });
+    });
   });
 
   it('applies custom className, id, and data-testid', () => {

package/src/prompt/InlinePrompt/InlinePrompt.tsx

@@ -51,12 +51,6 @@ export const InlinePrompt = ({
   const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;
 
   const renderMedia = () => {
-    if (media && ['proposition', 'positive'].includes(sentiment)) {
-      return media;
-    }
-    if (sentiment === 'proposition') {
-      return <GiftBox />;
-    }
     if (muted) {
       return <BackslashCircle size={16} data-testid="InlinePrompt_Muted" />;
     }
@@ -69,6 +63,15 @@ export const InlinePrompt = ({
         />
       );
     }
+
+    if (sentiment === 'positive' && media) {
+      return media;
+    }
+
+    if (sentiment === 'proposition') {
+      return media || <GiftBox />;
+    }
+
     return <StatusIcon size={16} sentiment={sentiment} />;
   };
 

package/src/sentimentSurface/SentimentSurface.story.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { Bank, Defrost } from '@transferwise/icons';
+import { Defrost } from '@transferwise/icons';
 import Body from '../body';
 import Button from '../button';
 import Header from '../header';
@@ -8,8 +8,6 @@ import IconButton from '../iconButton';
 import StatusIcon from '../statusIcon';
 import SentimentSurface from './SentimentSurface';
 import type { Sentiment, Emphasis } from './SentimentSurface.types';
-import AvatarView from '../avatarView';
-import AvatarLayout from '../avatarLayout';
 
 const withComponentGrid = (Story: () => JSX.Element) => (
   <div
@@ -394,12 +392,6 @@ export const SentimentAwareComponents: Story = {
         <Button v2 priority="secondary" size="sm">
           Secondary
         </Button>
-        <AvatarView size={32}>
-          <Bank />
-        </AvatarView>
-        <AvatarView size={32} profileName="John Doe" />
-        <AvatarView size={32} imgSrc="../avatar-rectangle-fox.webp" badge={{ status: 'warning' }} />
-        <AvatarLayout size={32} avatars={[{ asset: <Bank /> }, { profileName: 'John Doe' }]} />
       </div>
     );
 
@@ -411,18 +403,8 @@ export const SentimentAwareComponents: Story = {
         <Header level="group" title="Success sentiment surface" />
         <SentimentSurface sentiment="success">{inner}</SentimentSurface>
 
-        <Header level="group" title="Success Elevated sentiment surface" />
-        <SentimentSurface sentiment="success" emphasis="elevated">
-          {inner}
-        </SentimentSurface>
-
         <Header level="group" title="Negative sentiment surface" />
         <SentimentSurface sentiment="negative">{inner}</SentimentSurface>
-
-        <Header level="group" title="Negative Elevated sentiment surface" />
-        <SentimentSurface sentiment="negative" emphasis="elevated">
-          {inner}
-        </SentimentSurface>
       </>
     );
   },