@transferwise/components 46.126.0 → 46.127.1

package/build/listItem/Prompt/ListItemPrompt.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 require('../../common/theme.js');
 require('../../common/direction.js');
@@ -44,7 +42,9 @@ require('../../link/Link.messages.js');
 const Prompt = ({
   sentiment: sentiment$1 = sentiment.Sentiment.NEUTRAL,
   mediaLabel,
-  children
+  children,
+  media,
+  loading
 }) => {
   const {
     ids,
@@ -54,6 +54,8 @@ 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",
@@ -63,5 +65,4 @@ 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<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;;;;;"}
+{"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;;;;"}

package/build/listItem/Prompt/ListItemPrompt.mjs

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

package/build/main.css

@@ -304,18 +304,18 @@
   --color-sentiment-interactive-primary: #454745;
   --color-sentiment-interactive-primary-hover: #353635;
   --color-sentiment-interactive-primary-active: #232423;
-  --color-sentiment-interactive-secondary: #F1F1ED;
-  --color-sentiment-interactive-secondary-hover: #E7E7E1;
-  --color-sentiment-interactive-secondary-active: #DFDED5;
-  --color-sentiment-interactive-secondary-neutral: #E4E4DC;
-  --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
-  --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
+  --color-sentiment-interactive-secondary: rgba(62, 59, 7, 0.07);
+  --color-sentiment-interactive-secondary-hover: rgba(62, 59, 7, 0.12);
+  --color-sentiment-interactive-secondary-active: rgba(62, 59, 7, 0.17);
+  --color-sentiment-interactive-secondary-neutral: rgba(62, 59, 7, 0.07);
+  --color-sentiment-interactive-secondary-neutral-hover: rgba(62, 59, 7, 0.12);
+  --color-sentiment-interactive-secondary-neutral-active: rgba(62, 59, 7, 0.17);
   --color-sentiment-interactive-control: #F1F1ED;
   --color-sentiment-interactive-control-hover: #E7E7E1;
   --color-sentiment-interactive-control-active: #DFDED5;
-  --color-sentiment-background-surface: #F1F1ED;
-  --color-sentiment-background-surface-hover: #E7E7E1;
-  --color-sentiment-background-surface-active: #DFDED5;
+  --color-sentiment-background-surface: rgba(62, 59, 7, 0.07);
+  --color-sentiment-background-surface-hover: rgba(62, 59, 7, 0.12);
+  --color-sentiment-background-surface-active: rgba(62, 59, 7, 0.17);
 }
 .np-theme-personal .wds-sentiment-surface-neutral-elevated,
 .np-theme-business .wds-sentiment-surface-neutral-elevated,
@@ -331,9 +331,9 @@
   --color-sentiment-interactive-secondary: #454745;
   --color-sentiment-interactive-secondary-hover: #353635;
   --color-sentiment-interactive-secondary-active: #232423;
-  --color-sentiment-interactive-secondary-neutral: #5A5C5A;
-  --color-sentiment-interactive-secondary-neutral-hover: #6D6F6D;
-  --color-sentiment-interactive-secondary-neutral-active: #727472;
+  --color-sentiment-interactive-secondary-neutral: #585958;
+  --color-sentiment-interactive-secondary-neutral-hover: #6A6C6A;
+  --color-sentiment-interactive-secondary-neutral-active: #7D7E7D;
   --color-sentiment-interactive-control: #454745;
   --color-sentiment-interactive-control-hover: #353635;
   --color-sentiment-interactive-control-active: #232423;
@@ -352,18 +352,18 @@
   --color-sentiment-interactive-primary: #F1F1ED;
   --color-sentiment-interactive-primary-hover: #E7E7E1;
   --color-sentiment-interactive-primary-active: #DFDED5;
-  --color-sentiment-interactive-secondary: #2A2C29;
-  --color-sentiment-interactive-secondary-hover: #414441;
-  --color-sentiment-interactive-secondary-active: #595B58;
-  --color-sentiment-interactive-secondary-neutral: #424441;
-  --color-sentiment-interactive-secondary-neutral-hover: #4C4E4B;
-  --color-sentiment-interactive-secondary-neutral-active: #565955;
+  --color-sentiment-interactive-secondary: rgba(255, 255, 255, 0.1);
+  --color-sentiment-interactive-secondary-hover: rgba(255, 255, 255, 0.2);
+  --color-sentiment-interactive-secondary-active: rgba(255, 255, 255, 0.3);
+  --color-sentiment-interactive-secondary-neutral: rgba(255, 255, 255, 0.1);
+  --color-sentiment-interactive-secondary-neutral-hover: rgba(255, 255, 255, 0.2);
+  --color-sentiment-interactive-secondary-neutral-active: rgba(255, 255, 255, 0.3);
   --color-sentiment-interactive-control: #2A2C29;
   --color-sentiment-interactive-control-hover: #414441;
   --color-sentiment-interactive-control-active: #595B58;
-  --color-sentiment-background-surface: #2A2C29;
-  --color-sentiment-background-surface-hover: #414441;
-  --color-sentiment-background-surface-active: #595B58;
+  --color-sentiment-background-surface: rgba(255, 255, 255, 0.1);
+  --color-sentiment-background-surface-hover: rgba(255, 255, 255, 0.2);
+  --color-sentiment-background-surface-active: rgba(255, 255, 255, 0.3);
 }
 .np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
 .np-theme-business--dark .wds-sentiment-surface-neutral-elevated,

package/build/styles/main.css

@@ -304,18 +304,18 @@
   --color-sentiment-interactive-primary: #454745;
   --color-sentiment-interactive-primary-hover: #353635;
   --color-sentiment-interactive-primary-active: #232423;
-  --color-sentiment-interactive-secondary: #F1F1ED;
-  --color-sentiment-interactive-secondary-hover: #E7E7E1;
-  --color-sentiment-interactive-secondary-active: #DFDED5;
-  --color-sentiment-interactive-secondary-neutral: #E4E4DC;
-  --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
-  --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
+  --color-sentiment-interactive-secondary: rgba(62, 59, 7, 0.07);
+  --color-sentiment-interactive-secondary-hover: rgba(62, 59, 7, 0.12);
+  --color-sentiment-interactive-secondary-active: rgba(62, 59, 7, 0.17);
+  --color-sentiment-interactive-secondary-neutral: rgba(62, 59, 7, 0.07);
+  --color-sentiment-interactive-secondary-neutral-hover: rgba(62, 59, 7, 0.12);
+  --color-sentiment-interactive-secondary-neutral-active: rgba(62, 59, 7, 0.17);
   --color-sentiment-interactive-control: #F1F1ED;
   --color-sentiment-interactive-control-hover: #E7E7E1;
   --color-sentiment-interactive-control-active: #DFDED5;
-  --color-sentiment-background-surface: #F1F1ED;
-  --color-sentiment-background-surface-hover: #E7E7E1;
-  --color-sentiment-background-surface-active: #DFDED5;
+  --color-sentiment-background-surface: rgba(62, 59, 7, 0.07);
+  --color-sentiment-background-surface-hover: rgba(62, 59, 7, 0.12);
+  --color-sentiment-background-surface-active: rgba(62, 59, 7, 0.17);
 }
 .np-theme-personal .wds-sentiment-surface-neutral-elevated,
 .np-theme-business .wds-sentiment-surface-neutral-elevated,
@@ -331,9 +331,9 @@
   --color-sentiment-interactive-secondary: #454745;
   --color-sentiment-interactive-secondary-hover: #353635;
   --color-sentiment-interactive-secondary-active: #232423;
-  --color-sentiment-interactive-secondary-neutral: #5A5C5A;
-  --color-sentiment-interactive-secondary-neutral-hover: #6D6F6D;
-  --color-sentiment-interactive-secondary-neutral-active: #727472;
+  --color-sentiment-interactive-secondary-neutral: #585958;
+  --color-sentiment-interactive-secondary-neutral-hover: #6A6C6A;
+  --color-sentiment-interactive-secondary-neutral-active: #7D7E7D;
   --color-sentiment-interactive-control: #454745;
   --color-sentiment-interactive-control-hover: #353635;
   --color-sentiment-interactive-control-active: #232423;
@@ -352,18 +352,18 @@
   --color-sentiment-interactive-primary: #F1F1ED;
   --color-sentiment-interactive-primary-hover: #E7E7E1;
   --color-sentiment-interactive-primary-active: #DFDED5;
-  --color-sentiment-interactive-secondary: #2A2C29;
-  --color-sentiment-interactive-secondary-hover: #414441;
-  --color-sentiment-interactive-secondary-active: #595B58;
-  --color-sentiment-interactive-secondary-neutral: #424441;
-  --color-sentiment-interactive-secondary-neutral-hover: #4C4E4B;
-  --color-sentiment-interactive-secondary-neutral-active: #565955;
+  --color-sentiment-interactive-secondary: rgba(255, 255, 255, 0.1);
+  --color-sentiment-interactive-secondary-hover: rgba(255, 255, 255, 0.2);
+  --color-sentiment-interactive-secondary-active: rgba(255, 255, 255, 0.3);
+  --color-sentiment-interactive-secondary-neutral: rgba(255, 255, 255, 0.1);
+  --color-sentiment-interactive-secondary-neutral-hover: rgba(255, 255, 255, 0.2);
+  --color-sentiment-interactive-secondary-neutral-active: rgba(255, 255, 255, 0.3);
   --color-sentiment-interactive-control: #2A2C29;
   --color-sentiment-interactive-control-hover: #414441;
   --color-sentiment-interactive-control-active: #595B58;
-  --color-sentiment-background-surface: #2A2C29;
-  --color-sentiment-background-surface-hover: #414441;
-  --color-sentiment-background-surface-active: #595B58;
+  --color-sentiment-background-surface: rgba(255, 255, 255, 0.1);
+  --color-sentiment-background-surface-hover: rgba(255, 255, 255, 0.2);
+  --color-sentiment-background-surface-active: rgba(255, 255, 255, 0.3);
 }
 .np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
 .np-theme-business--dark .wds-sentiment-surface-neutral-elevated,

package/build/styles/sentimentSurface/SentimentSurface.css

@@ -304,18 +304,18 @@
   --color-sentiment-interactive-primary: #454745;
   --color-sentiment-interactive-primary-hover: #353635;
   --color-sentiment-interactive-primary-active: #232423;
-  --color-sentiment-interactive-secondary: #F1F1ED;
-  --color-sentiment-interactive-secondary-hover: #E7E7E1;
-  --color-sentiment-interactive-secondary-active: #DFDED5;
-  --color-sentiment-interactive-secondary-neutral: #E4E4DC;
-  --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
-  --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
+  --color-sentiment-interactive-secondary: rgba(62, 59, 7, 0.07);
+  --color-sentiment-interactive-secondary-hover: rgba(62, 59, 7, 0.12);
+  --color-sentiment-interactive-secondary-active: rgba(62, 59, 7, 0.17);
+  --color-sentiment-interactive-secondary-neutral: rgba(62, 59, 7, 0.07);
+  --color-sentiment-interactive-secondary-neutral-hover: rgba(62, 59, 7, 0.12);
+  --color-sentiment-interactive-secondary-neutral-active: rgba(62, 59, 7, 0.17);
   --color-sentiment-interactive-control: #F1F1ED;
   --color-sentiment-interactive-control-hover: #E7E7E1;
   --color-sentiment-interactive-control-active: #DFDED5;
-  --color-sentiment-background-surface: #F1F1ED;
-  --color-sentiment-background-surface-hover: #E7E7E1;
-  --color-sentiment-background-surface-active: #DFDED5;
+  --color-sentiment-background-surface: rgba(62, 59, 7, 0.07);
+  --color-sentiment-background-surface-hover: rgba(62, 59, 7, 0.12);
+  --color-sentiment-background-surface-active: rgba(62, 59, 7, 0.17);
 }
 .np-theme-personal .wds-sentiment-surface-neutral-elevated,
 .np-theme-business .wds-sentiment-surface-neutral-elevated,
@@ -331,9 +331,9 @@
   --color-sentiment-interactive-secondary: #454745;
   --color-sentiment-interactive-secondary-hover: #353635;
   --color-sentiment-interactive-secondary-active: #232423;
-  --color-sentiment-interactive-secondary-neutral: #5A5C5A;
-  --color-sentiment-interactive-secondary-neutral-hover: #6D6F6D;
-  --color-sentiment-interactive-secondary-neutral-active: #727472;
+  --color-sentiment-interactive-secondary-neutral: #585958;
+  --color-sentiment-interactive-secondary-neutral-hover: #6A6C6A;
+  --color-sentiment-interactive-secondary-neutral-active: #7D7E7D;
   --color-sentiment-interactive-control: #454745;
   --color-sentiment-interactive-control-hover: #353635;
   --color-sentiment-interactive-control-active: #232423;
@@ -352,18 +352,18 @@
   --color-sentiment-interactive-primary: #F1F1ED;
   --color-sentiment-interactive-primary-hover: #E7E7E1;
   --color-sentiment-interactive-primary-active: #DFDED5;
-  --color-sentiment-interactive-secondary: #2A2C29;
-  --color-sentiment-interactive-secondary-hover: #414441;
-  --color-sentiment-interactive-secondary-active: #595B58;
-  --color-sentiment-interactive-secondary-neutral: #424441;
-  --color-sentiment-interactive-secondary-neutral-hover: #4C4E4B;
-  --color-sentiment-interactive-secondary-neutral-active: #565955;
+  --color-sentiment-interactive-secondary: rgba(255, 255, 255, 0.1);
+  --color-sentiment-interactive-secondary-hover: rgba(255, 255, 255, 0.2);
+  --color-sentiment-interactive-secondary-active: rgba(255, 255, 255, 0.3);
+  --color-sentiment-interactive-secondary-neutral: rgba(255, 255, 255, 0.1);
+  --color-sentiment-interactive-secondary-neutral-hover: rgba(255, 255, 255, 0.2);
+  --color-sentiment-interactive-secondary-neutral-active: rgba(255, 255, 255, 0.3);
   --color-sentiment-interactive-control: #2A2C29;
   --color-sentiment-interactive-control-hover: #414441;
   --color-sentiment-interactive-control-active: #595B58;
-  --color-sentiment-background-surface: #2A2C29;
-  --color-sentiment-background-surface-hover: #414441;
-  --color-sentiment-background-surface-active: #595B58;
+  --color-sentiment-background-surface: rgba(255, 255, 255, 0.1);
+  --color-sentiment-background-surface-hover: rgba(255, 255, 255, 0.2);
+  --color-sentiment-background-surface-active: rgba(255, 255, 255, 0.3);
 }
 .np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
 .np-theme-business--dark .wds-sentiment-surface-neutral-elevated,

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

@@ -112,7 +112,7 @@ export declare const ListItem: {
         displayName: string;
     };
     Prompt: {
-        ({ sentiment, mediaLabel, children, }: import("./Prompt").ListItemPromptProps): import("react").JSX.Element;
+        ({ sentiment, mediaLabel, children, media, loading, }: 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'>;
+export type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'mediaLabel' | 'media' | 'loading'>;
 /**
  * This component allows for rendering an Inline Prompt. <br />
  * In the future it will be a thin wrapper around a standalone component.<br />
@@ -7,8 +7,7 @@ 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, }: ListItemPromptProps): import("react").JSX.Element;
+    ({ sentiment, mediaLabel, children, media, loading, }: 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,CAAC,iBAAiB,EAAE,UAAU,GAAG,WAAW,GAAG,YAAY,CAAC,CAAC;AAEnG;;;;;GAKG;AACH,eAAO,MAAM,MAAM;2CAIhB,mBAAmB;;CAerB,CAAC;AAGF,eAAe,MAAM,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,CACpC,iBAAiB,EACjB,UAAU,GAAG,WAAW,GAAG,YAAY,GAAG,OAAO,GAAG,SAAS,CAC9D,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,MAAM;2DAMhB,mBAAmB;;CAiBrB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.126.0",
+  "version": "46.127.1",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -86,10 +86,10 @@
     "storybook": "^10.3.0-alpha.0",
     "storybook-addon-tag-badges": "^3.0.4",
     "storybook-addon-test-codegen": "^3.0.1",
-    "@transferwise/neptune-css": "14.26.1",
     "@transferwise/less-config": "3.1.2",
-    "@wise/components-theming": "1.10.1",
-    "@wise/wds-configs": "0.0.0"
+    "@transferwise/neptune-css": "14.26.1",
+    "@wise/wds-configs": "0.0.0",
+    "@wise/components-theming": "1.10.1"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3 || ^4",

package/src/accordion/Accordion.test.js

@@ -23,12 +23,6 @@ describe('Accordion', () => {
     },
   ];
 
-  describe('defaults', () => {
-    it('renders an empty list when no items are passed', () => {
-      expect(render(<Accordion items={[]} />).container).toMatchSnapshot();
-    });
-  });
-
   describe('items', () => {
     it('renders a list with all items closed if items passed', () => {
       render(<Accordion items={items} />);

package/src/accordion/AccordionItem/AccordionItem.test.js

@@ -13,16 +13,6 @@ describe('AccordionItem', () => {
     onClick: jest.fn(),
   };
 
-  describe('open / close', () => {
-    it('renders an item closed', () => {
-      expect(render(<AccordionItem {...props} />).container).toMatchSnapshot();
-    });
-
-    it('renders an item open', () => {
-      expect(render(<AccordionItem {...props} open />).container).toMatchSnapshot();
-    });
-  });
-
   describe('icons', () => {
     it('renders the icon if passed', () => {
       render(<AccordionItem {...props} icon={<span>mock icon</span>} />);

package/src/actionButton/ActionButton.test.tsx

@@ -20,10 +20,6 @@ describe('ActionButton', () => {
     it('is not disabled', () => {
       expect(screen.getByRole('button')).toBeEnabled();
     });
-
-    it('renders the button', () => {
-      expect(render(<ActionButton {...props} />).container).toMatchSnapshot();
-    });
   });
 
   describe('button attributes', () => {

package/src/avatarWrapper/AvatarWrapper.test.tsx

@@ -36,49 +36,10 @@ describe('FlowNavigationAvatar', () => {
 
             expect(screen.getByText('M')).toBeInTheDocument();
           });
-
-          describe('AND profileType', () => {
-            it('renders as BUSINESS profile type with an icon', () => {
-              const { container } = render(
-                <AvatarWrapper name={name} profileType={ProfileType.BUSINESS} />,
-              );
-
-              expect(container.firstChild).toMatchSnapshot();
-            });
-
-            it('renders as PERSONAL profile type with an icon', () => {
-              const { container } = render(
-                <AvatarWrapper name={name} profileType={ProfileType.PERSONAL} />,
-              );
-
-              expect(container.firstChild).toMatchSnapshot();
-            });
-
-            describe('AND avatar url', () => {
-              it('renders the image', () => {
-                const { container } = render(
-                  <AvatarWrapper
-                    url="https://wise.com"
-                    name={name}
-                    profileType={ProfileType.BUSINESS}
-                    avatarProps={{ theme: 'dark' }}
-                  />,
-                );
-
-                expect(container.firstChild).toMatchSnapshot();
-              });
-            });
-          });
         });
       });
 
       describe('with nothing passed', () => {
-        it('renders a personal icon', () => {
-          const { container } = render(<AvatarWrapper />);
-
-          expect(container.firstChild).toMatchSnapshot();
-        });
-
         it('renders aria-label', () => {
           render(<AvatarWrapper aria-label="test" />);
 
@@ -86,20 +47,6 @@ describe('FlowNavigationAvatar', () => {
         });
       });
 
-      describe('with a badge url passed', () => {
-        it('renders the badge', () => {
-          const { container } = render(
-            <AvatarWrapper
-              badgeUrl="https://badge.com"
-              badgeAltText="badge alt text"
-              badgeProps={{ size: Size.LARGE } as BadgeProps}
-            />,
-          );
-
-          expect(container.firstChild).toMatchSnapshot();
-        });
-      });
-
       describe('with a badge status icon passed', () => {
         it('renders the badge', () => {
           render(<AvatarWrapper badgeStatusIcon={Sentiment.POSITIVE} />);

package/src/checkbox/Checkbox.test.tsx

@@ -19,11 +19,6 @@ describe('Checkbox', () => {
     jest.clearAllMocks();
   });
 
-  it('renders the given label', () => {
-    const { container } = render(<Checkbox {...props} />);
-    expect(container).toMatchSnapshot();
-  });
-
   it('is enabled by default', () => {
     const { container } = render(<Checkbox {...props} />);
     expect(getCheckboxContainer(container)).not.toHaveClass('disabled');

package/src/chevron/Chevron.test.tsx

@@ -43,11 +43,4 @@ describe('Chevron', () => {
       expect(container.querySelector('.tw-icon-chevron-up')).not.toHaveClass('chevron-color');
     });
   });
-
-  describe('custom xs icon', () => {
-    it('renders', () => {
-      const { container } = render(<Chevron size={Size.EXTRA_SMALL} />);
-      expect(container).toMatchSnapshot();
-    });
-  });
 });

package/src/chips/Chips.test.tsx

@@ -53,10 +53,6 @@ const filterProps = {
 
 describe('Chips', () => {
   describe('Choice Chips', () => {
-    it(`renders as expected`, () => {
-      expect(render(<Chips {...choiceProps} />).container).toMatchSnapshot();
-    });
-
     it(`will pass previous state, updated state, and selected value on select`, () => {
       render(<Chips {...choiceProps} />);
       const accounting = screen.getByText('Accounting');
@@ -69,10 +65,6 @@ describe('Chips', () => {
   });
 
   describe('Filter Chips', () => {
-    it(`renders as expected`, () => {
-      expect(render(<Chips {...filterProps} />).container).toMatchSnapshot();
-    });
-
     it(`will pass previous state, updated state, and selected value on select`, () => {
       render(<Chips {...filterProps} />);
       const accounting = screen.getByText('Accounting');

package/src/common/RadioButton/RadioButton.test.tsx

@@ -3,24 +3,6 @@ import { screen, render, userEvent } from '../../test-utils';
 import RadioButton from '.';
 
 describe('Radio button', () => {
-  it('renders correctly', () => {
-    const { container } = render(<RadioButton id="an-id" name="a-name" value="a-value" />);
-
-    expect(container).toMatchSnapshot();
-  });
-
-  it('renders checked state correctly', () => {
-    const { container } = render(<RadioButton name="radio-name" checked />);
-
-    expect(container).toMatchSnapshot();
-  });
-
-  it('renders disabled state correctly', () => {
-    const { container } = render(<RadioButton name="radio-name" disabled />);
-
-    expect(container).toMatchSnapshot();
-  });
-
   it('responds to user input', async () => {
     const onChange = jest.fn();
     render(

package/src/common/bottomSheet/BottomSheet.test.tsx

@@ -5,15 +5,6 @@ import BottomSheet from './BottomSheet';
 mockMatchMedia();
 
 describe('BottomSheet', () => {
-  it('renders content when open', () => {
-    const { baseElement } = render(
-      <BottomSheet open onClose={jest.fn()}>
-        <b>Test Content</b>
-      </BottomSheet>,
-    );
-    expect(baseElement).toMatchSnapshot();
-  });
-
   it('does not renders when closed', () => {
     const { container } = render(
       <BottomSheet open={false} onClose={jest.fn()}>

package/src/common/card/Card.test.tsx

@@ -10,12 +10,6 @@ describe('Card', () => {
     testId: 'test-card',
   };
 
-  it('matches snapshot', () => {
-    const { container } = render(<Card {...defaultProps} />);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
   it('renders', () => {
     const props = {
       ...defaultProps,

package/src/common/closeButton/CloseButton.test.tsx

@@ -8,10 +8,6 @@ const props = {
 };
 
 describe('CloseButton', () => {
-  it(`renders as expected`, () => {
-    expect(render(<CloseButton {...props} />).container).toMatchSnapshot();
-  });
-
   describe('tabIndex', () => {
     it('should not have tabIndex by default', () => {
       render(<CloseButton {...props} />);

package/src/common/panel/Panel.test.tsx

@@ -20,12 +20,6 @@ describe('Panel', () => {
     onClose: jest.fn(),
   } satisfies PanelProps;
 
-  it('renders', () => {
-    const { container } = render(<Panel {...props} />);
-
-    expect(container).toMatchSnapshot();
-  });
-
   it('renders arrow', () => {
     const { rerender } = render(<Panel {...props} arrow={false} />);
 

package/src/flowNavigation/FlowNavigation.test.js

@@ -35,10 +35,6 @@ describe('FlowNavigation', () => {
     activeStep: 0,
   };
 
-  it(`renders as expected`, () => {
-    expect(render(<FlowNavigation {...props} />).container).toMatchSnapshot();
-  });
-
   it(`renders full Logo`, () => {
     render(<FlowNavigation {...props} />);
     expect(logoFull()).toBeInTheDocument();
@@ -126,12 +122,6 @@ describe('FlowNavigation', () => {
       window.innerWidth = Breakpoint.SMALL - 1;
     });
 
-    it('renders as expected', () => {
-      expect(
-        render(<FlowNavigation {...props} activeStep={1} onGoBack={jest.fn()} />).container,
-      ).toMatchSnapshot();
-    });
-
     it('renders Logo', () => {
       render(<FlowNavigation {...props} />);
       expect(screen.getByAltText('logo')).toBeInTheDocument();