@transferwise/components 46.160.4 → 46.160.5

package/build/main.css

@@ -140,6 +140,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -322,6 +323,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -504,6 +506,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -686,6 +689,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -868,6 +872,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1050,6 +1055,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1232,6 +1238,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1415,6 +1422,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1598,6 +1606,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1781,6 +1790,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1964,7 +1974,9 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /* See: https://github.com/fontsource/fontsource/blob/main/fonts/google/inter/variable.css */
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -2409,6 +2421,7 @@
   --color-sentiment-background-surface-active: #F8CD20;
   --color-sentiment-border-overlay: rgba(58,53,35,0.30196);
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -2557,6 +2570,7 @@
   --color-interactive-control-active: #471358;
   --color-background-screen: #260a2f;
 }
+
 @font-face {
   font-family: Inter;
   font-style: normal;
@@ -19795,6 +19809,10 @@ a[data-toggle="tooltip"] {
   background-color: var(--color-sentiment-background-surface);
   color: var(--color-sentiment-content-primary);
 }
+.wds-sentiment-surface strong,
+.wds-sentiment-surface b {
+  color: var(--color-sentiment-content-primary);
+}
 .wds-pocket-surface {
   background-color: #ffffff;
   background-color: var(--color-background-screen);

package/build/styles/PocketSurface/PocketSurface.css

@@ -146,6 +146,7 @@
   --color-interactive-control-active: #471358;
   --color-background-screen: #260a2f;
 }
+
 .wds-pocket-surface {
   background-color: #ffffff;
   background-color: var(--color-background-screen);

package/build/styles/SentimentSurface/SentimentSurface.css

@@ -442,6 +442,7 @@
   --color-sentiment-background-surface-active: #F8CD20;
   --color-sentiment-border-overlay: rgba(58,53,35,0.30196);
 }
+
 .wds-sentiment-surface {
   --ring-outline-color: var(--color-sentiment-content-primary, var(--color-content-primary));
 }
@@ -449,3 +450,7 @@
   background-color: var(--color-sentiment-background-surface);
   color: var(--color-sentiment-content-primary);
 }
+.wds-sentiment-surface strong,
+.wds-sentiment-surface b {
+  color: var(--color-sentiment-content-primary);
+}

package/build/styles/css/neptune.css

@@ -140,6 +140,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -322,6 +323,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -504,6 +506,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -686,6 +689,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -868,6 +872,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1050,6 +1055,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1232,6 +1238,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1415,6 +1422,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1598,6 +1606,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1781,6 +1790,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1964,6 +1974,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /* See: https://github.com/fontsource/fontsource/blob/main/fonts/google/inter/variable.css */
 @font-face {
   font-family: Inter;

package/build/styles/main.css

@@ -140,6 +140,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -322,6 +323,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -504,6 +506,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -686,6 +689,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -868,6 +872,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1050,6 +1055,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1232,6 +1238,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1415,6 +1422,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1598,6 +1606,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1781,6 +1790,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1964,7 +1974,9 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /* See: https://github.com/fontsource/fontsource/blob/main/fonts/google/inter/variable.css */
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -2409,6 +2421,7 @@
   --color-sentiment-background-surface-active: #F8CD20;
   --color-sentiment-border-overlay: rgba(58,53,35,0.30196);
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -2557,6 +2570,7 @@
   --color-interactive-control-active: #471358;
   --color-background-screen: #260a2f;
 }
+
 @font-face {
   font-family: Inter;
   font-style: normal;
@@ -19795,6 +19809,10 @@ a[data-toggle="tooltip"] {
   background-color: var(--color-sentiment-background-surface);
   color: var(--color-sentiment-content-primary);
 }
+.wds-sentiment-surface strong,
+.wds-sentiment-surface b {
+  color: var(--color-sentiment-content-primary);
+}
 .wds-pocket-surface {
   background-color: #ffffff;
   background-color: var(--color-background-screen);

package/build/styles/styles/less/neptune.css

@@ -140,6 +140,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -322,6 +323,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -504,6 +506,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -686,6 +689,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -868,6 +872,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1050,6 +1055,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1232,6 +1238,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1415,6 +1422,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1598,6 +1606,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1781,6 +1790,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1964,6 +1974,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /* See: https://github.com/fontsource/fontsource/blob/main/fonts/google/inter/variable.css */
 @font-face {
   font-family: Inter;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.160.4",
+  "version": "46.160.5",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -44,27 +44,27 @@
     "@babel/preset-env": "^7.29.7",
     "@babel/preset-react": "^7.29.7",
     "@babel/preset-typescript": "^7.29.7",
-    "@formatjs/cli": "^6.16.14",
+    "@formatjs/cli": "^6.16.19",
     "@rollup/plugin-babel": "^7.1.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",
     "@rollup/plugin-url": "^8.0.2",
-    "@storybook/addon-a11y": "^10.5.4",
-    "@storybook/addon-docs": "^10.5.4",
+    "@storybook/addon-a11y": "^10.5.10",
+    "@storybook/addon-docs": "^10.5.10",
     "@storybook/addon-mcp": "^0.7.0",
     "@storybook/addon-webpack5-compiler-babel": "^4.0.1",
-    "@storybook/react-webpack5": "^10.5.4",
+    "@storybook/react-webpack5": "^10.5.10",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.1",
+    "@testing-library/user-event": "^14.6.6",
     "@transferwise/icons": "^4.4.4",
     "@tsconfig/recommended": "^1.0.13",
     "@types/babel__core": "^7.20.5",
     "@types/commonmark": "^0.27.10",
     "@types/jest": "^29.5.14",
-    "@types/lodash": "4.17.24",
+    "@types/lodash": "4.17.25",
     "@types/lodash.clamp": "^4.0.9",
     "@types/lodash.debounce": "^4.0.9",
     "@types/react": "^18.3.31",
@@ -77,7 +77,7 @@
     "@wise/eslint-config": "^14.2.1",
     "babel-plugin-formatjs": "^11.3.16",
     "eslint": "^9.39.5",
-    "eslint-plugin-storybook": "^10.5.4",
+    "eslint-plugin-storybook": "^10.5.10",
     "gulp": "^5.0.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -86,13 +86,13 @@
     "lodash.times": "^4.3.2",
     "react-intl": "^7.1.14",
     "react-live": "^4.1.8",
-    "rollup": "^4.62.2",
+    "rollup": "^4.62.5",
     "rollup-preserve-directives": "^1.1.3",
-    "storybook": "^10.5.4",
+    "storybook": "^10.5.10",
     "storybook-addon-tag-badges": "^3.1.0",
     "storybook-addon-test-codegen": "^3.0.4",
-    "@wise/components-theming": "1.10.3",
     "@transferwise/less-config": "3.2.0",
+    "@wise/components-theming": "1.10.3",
     "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
@@ -115,13 +115,13 @@
     "@transferwise/neptune-validation": "^3.3.4",
     "clsx": "^2.1.1",
     "commonmark": "^0.31.2",
-    "core-js": "^3.49.0",
-    "motion": "^12.42.2",
+    "core-js": "^3.50.0",
+    "motion": "^12.43.0",
     "lodash.clamp": "^4.0.3",
     "lodash.debounce": "^4.0.8",
     "merge-props": "^6.0.0",
     "react-transition-group": "^4.4.5",
-    "virtua": "^0.50.0"
+    "virtua": "^0.50.4"
   },
   "publishConfig": {
     "access": "public",

package/src/PocketSurface/PocketSurface.css

@@ -146,6 +146,7 @@
   --color-interactive-control-active: #471358;
   --color-background-screen: #260a2f;
 }
+
 .wds-pocket-surface {
   background-color: #ffffff;
   background-color: var(--color-background-screen);

package/src/Prompt/ActionPrompt/_stories/ActionPrompt.story.tsx

@@ -233,7 +233,11 @@ export const Sentiments: Story = {
           key={sentiment}
           sentiment={sentiment}
           title={`${sentiment.charAt(0).toUpperCase() + sentiment.slice(1)} Action`}
-          description={lorem10}
+          description={
+            <>
+              This is a <strong>{sentiment}</strong> prompt.
+            </>
+          }
           action={{ label: 'Primary', onClick: fn() }}
           actionSecondary={{ label: 'Secondary', onClick: fn() }}
         />

package/src/Prompt/InfoPrompt/_stories/InfoPrompt.story.tsx

@@ -73,6 +73,8 @@ export default {
   },
 } satisfies Meta<InfoPromptProps>;
 
+type Story = StoryObj<InfoPromptProps>;
+
 /**
  * Convenience controls for previewing rich markup,
  * not otherwise possible via Storybook
@@ -192,7 +194,7 @@ export const Sandbox = createSandboxStory({
  * - `warning`: Warning messages
  * - `proposition`: Promotional content (uses GiftBox icon by default)
  */
-export const Sentiments: StoryObj<InfoPromptProps> = {
+export const Sentiments: Story = {
   render: (args: InfoPromptProps) => (
     <>
       <InfoPrompt {...args} sentiment="neutral" description="This is a neutral message." />
@@ -207,7 +209,7 @@ export const Sentiments: StoryObj<InfoPromptProps> = {
 /**
  * InfoPrompt can include both a title and description for more detailed messaging.
  */
-export const WithTitle: StoryObj<InfoPromptProps> = {
+export const WithTitle: Story = {
   render: (args: InfoPromptProps) => (
     <>
       <InfoPrompt
@@ -236,7 +238,7 @@ export const WithTitle: StoryObj<InfoPromptProps> = {
  * Use the `action` prop to add a clickable link below the message.
  * Actions can have an `href` for navigation or an `onClick` for custom behavior.
  */
-export const WithAction: StoryObj<InfoPromptProps> = {
+export const WithAction: Story = {
   render: (args: InfoPromptProps) => (
     <>
       <InfoPrompt
@@ -270,7 +272,7 @@ export const WithAction: StoryObj<InfoPromptProps> = {
  * **Important**: If the description contains an interactive element, do not use the `action` prop
  * simultaneously — InfoPrompt should have at most one interaction.
  */
-export const WithRichDescription: StoryObj<InfoPromptProps> = {
+export const WithRichDescription: Story = {
   render: (args: InfoPromptProps) => (
     <>
       <InfoPrompt
@@ -282,7 +284,7 @@ export const WithRichDescription: StoryObj<InfoPromptProps> = {
             <Link href="/fees" target="_blank" type="link-default">
               fee schedule
             </Link>
-            .
+            . This has <strong>bold text</strong> that matches the sentiment color.
           </>
         }
       />
@@ -296,7 +298,8 @@ export const WithRichDescription: StoryObj<InfoPromptProps> = {
             <Link href="/verify" type="link-default">
               verify your identity
             </Link>{' '}
-            to continue sending money.
+            to continue sending money. This has <strong>bold text</strong> that matches the
+            sentiment color.
           </>
         }
       />
@@ -308,7 +311,7 @@ export const WithRichDescription: StoryObj<InfoPromptProps> = {
  * When `onDismiss` is provided, a close button appears allowing users to dismiss the prompt.
  * Note: The component itself is not automatically removed - you must handle state management.
  */
-export const Dismissible: StoryObj<InfoPromptProps> = {
+export const Dismissible: Story = {
   render: function Render() {
     const [showPrompt, setShowPrompt] = useState(true);
 
@@ -339,7 +342,7 @@ export const Dismissible: StoryObj<InfoPromptProps> = {
  * **Icon Overrides**: Replace default icons with custom icons to match the prompt's visual language to its content.
  * Success and proposition sentiments support both standard checkmark and confetti variations.
  */
-export const MediaTypes: StoryObj<InfoPromptProps> = {
+export const MediaTypes: Story = {
   render: (args) => (
     <>
       <Title type="title-body">Default</Title>
@@ -392,7 +395,7 @@ export const MediaTypes: StoryObj<InfoPromptProps> = {
  *
  * [Visit wise.design](https://docs.wise.design/components/info-prompt#writing-an-info-prompt) for guidance on writing effective prompt messages that are concise and easy to understand.
  */
-export const ParagraphWidth: StoryObj<PreviewStoryArgs> = {
+export const ParagraphWidth: Story = {
   parameters: {
     docs: {
       canvas: {

package/src/Prompt/InlinePrompt/_stories/InlinePrompt.story.tsx

@@ -135,19 +135,19 @@ export const Sentiments: StoryObj<PreviewStoryArgs> = {
     return (
       <>
         <InlinePrompt {...props} {...previewProps} sentiment="neutral">
-          This is a neutral prompt.
+          This is a <strong>neutral</strong> prompt.
         </InlinePrompt>
         <InlinePrompt {...props} {...previewProps} sentiment="negative">
-          This is a negative prompt.
+          This is a <strong>negative</strong> prompt.
         </InlinePrompt>
         <InlinePrompt {...props} {...previewProps} sentiment="warning">
-          This is a warning prompt.
+          This is a <strong>warning</strong> prompt.
         </InlinePrompt>
         <InlinePrompt {...props} {...previewProps} sentiment="positive">
-          This is a positive prompt.
+          This is a <strong>positive</strong> prompt.
         </InlinePrompt>
         <InlinePrompt {...props} {...previewProps} sentiment="proposition">
-          This is a proposition prompt.
+          This is a <strong>proposition</strong> prompt.
         </InlinePrompt>
       </>
     );

package/src/Prompt/PrimitivePrompt/PrimitivePrompt.less

@@ -3,7 +3,8 @@
   display: flex;
   gap: var(--Prompt-gap, var(--size-16));
   overflow-wrap: break-word;
-  padding: var(--Prompt-padding-y, var(--padding-x-small)) var(--Prompt-padding-x, var(--padding-x-small));
+  padding: var(--Prompt-padding-y, var(--padding-x-small))
+    var(--Prompt-padding-x, var(--padding-x-small));
   text-align: left;
   word-break: break-word;
   width: 100%;

package/src/SentimentSurface/SentimentSurface.css

@@ -442,6 +442,7 @@
   --color-sentiment-background-surface-active: #F8CD20;
   --color-sentiment-border-overlay: rgba(58,53,35,0.30196);
 }
+
 .wds-sentiment-surface {
   --ring-outline-color: var(--color-sentiment-content-primary, var(--color-content-primary));
 }
@@ -449,3 +450,7 @@
   background-color: var(--color-sentiment-background-surface);
   color: var(--color-sentiment-content-primary);
 }
+.wds-sentiment-surface strong,
+.wds-sentiment-surface b {
+  color: var(--color-sentiment-content-primary);
+}

package/src/SentimentSurface/SentimentSurface.less

@@ -7,4 +7,9 @@
   }
 
   --ring-outline-color: var(--color-sentiment-content-primary, var(--color-content-primary));
+
+  strong,
+  b {
+    color: var(--color-sentiment-content-primary);
+  }
 }

package/src/SentimentSurface/_stories/SentimentSurface.story.tsx

@@ -228,7 +228,9 @@ export const EmphasisLevels: Story = {
             sentiment={sentiment}
             emphasis="base"
           >
-            <div className="p-a-2 text-capitalize">{sentiment} - Base emphasis</div>
+            <div className="p-a-2 text-capitalize">
+              <strong>{sentiment}</strong> - Base emphasis
+            </div>
           </SentimentSurface>
           <SentimentSurface
             key={`${sentiment}-elevated`}
@@ -236,7 +238,9 @@ export const EmphasisLevels: Story = {
             sentiment={sentiment}
             emphasis="elevated"
           >
-            <div className="p-a-2 text-capitalize">{sentiment} - Elevated emphasis</div>
+            <div className="p-a-2 text-capitalize">
+              <strong>{sentiment}</strong> - Elevated emphasis
+            </div>
           </SentimentSurface>
         </div>
       ))}

package/src/main.css

@@ -140,6 +140,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -322,6 +323,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -504,6 +506,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -686,6 +689,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -868,6 +872,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1050,6 +1055,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1232,6 +1238,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1415,6 +1422,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1598,6 +1606,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1781,6 +1790,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1964,7 +1974,9 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /* See: https://github.com/fontsource/fontsource/blob/main/fonts/google/inter/variable.css */
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -2409,6 +2421,7 @@
   --color-sentiment-background-surface-active: #F8CD20;
   --color-sentiment-border-overlay: rgba(58,53,35,0.30196);
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -2557,6 +2570,7 @@
   --color-interactive-control-active: #471358;
   --color-background-screen: #260a2f;
 }
+
 @font-face {
   font-family: Inter;
   font-style: normal;
@@ -19795,6 +19809,10 @@ a[data-toggle="tooltip"] {
   background-color: var(--color-sentiment-background-surface);
   color: var(--color-sentiment-content-primary);
 }
+.wds-sentiment-surface strong,
+.wds-sentiment-surface b {
+  color: var(--color-sentiment-content-primary);
+}
 .wds-pocket-surface {
   background-color: #ffffff;
   background-color: var(--color-background-screen);

package/src/styles/less/neptune.css

@@ -140,6 +140,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -322,6 +323,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -504,6 +506,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -686,6 +689,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -868,6 +872,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1050,6 +1055,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1232,6 +1238,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1415,6 +1422,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1598,6 +1606,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1781,6 +1790,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1964,6 +1974,7 @@
   --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
   --font-family-display: 'Wise Sans', 'Inter', sans-serif;
 }
+
 /* See: https://github.com/fontsource/fontsource/blob/main/fonts/google/inter/variable.css */
 @font-face {
   font-family: Inter;