@transferwise/components 46.128.3 → 46.129.0

package/src/inputs/SelectInput.test.story.tsx

@@ -1,11 +1,17 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fireEvent, fn, type Mock, screen, userEvent, within } from 'storybook/test';
+import { useState } from 'react';
 
 import { allModes } from '../../.storybook/modes';
 import Body from '../body';
 import { Field } from '../field/Field';
 import { lorem5, lorem500 } from '../test-utils';
-import { SelectInput, type SelectInputProps, sortByRelevance } from './SelectInput';
+import {
+  SelectInput,
+  SelectInputOptionContent,
+  type SelectInputProps,
+  sortByRelevance,
+} from './SelectInput';
 
 const meta = {
   title: 'Forms/SelectInput/Tests',
@@ -1364,3 +1370,53 @@ export const SmoothScrollReset: Story<string> = {
     },
   },
 };
+
+interface OptionWithDescription {
+  id: string;
+  title: string;
+  description?: string;
+}
+
+const optionsWithDescription: OptionWithDescription[] = [
+  { id: '1', title: 'Option One', description: 'This is the first option' },
+  { id: '2', title: 'Option Two (no description)' },
+  { id: '3', title: 'Option Three', description: 'This is the third option' },
+];
+
+/**
+ * Test story to verify that SelectInput correctly displays an item with a description
+ * when shown in the trigger button. The description should be visible in the trigger
+ * after selection.
+ */
+export const TriggerWithDescription: Story<OptionWithDescription> = {
+  args: {
+    items: optionsWithDescription.map((option) => ({
+      type: 'option',
+      value: option,
+    })),
+    defaultValue: optionsWithDescription[0],
+    placeholder: 'Select an option',
+    renderValue: (option, withinTrigger) => (
+      <SelectInputOptionContent
+        title={option.title}
+        description={withinTrigger ? option.description : undefined}
+      />
+    ),
+  },
+  render: function Render({ onChange, ...args }) {
+    const [selectedOption, setSelectedOption] = useState<OptionWithDescription>(
+      optionsWithDescription[0],
+    );
+
+    return (
+      <SelectInput
+        {...args}
+        value={selectedOption}
+        onChange={(option) => {
+          setSelectedOption(option);
+          onChange?.(option);
+        }}
+      />
+    );
+  },
+};

package/src/inputs/SelectInput.test.tsx

@@ -4,7 +4,12 @@ import { mockAnimationsApi } from 'jsdom-testing-mocks';
 
 import { render, mockMatchMedia, mockResizeObserver } from '../test-utils';
 
-import { SelectInput, type SelectInputOptionItem, type SelectInputProps } from './SelectInput';
+import {
+  SelectInput,
+  SelectInputOptionContent,
+  type SelectInputOptionItem,
+  type SelectInputProps,
+} from './SelectInput';
 import { Field } from '../field/Field';
 
 mockMatchMedia();
@@ -511,6 +516,33 @@ describe('SelectInput', () => {
     expect(options[2]).toHaveTextContent('Zambia');
   });
 
+  it('adds class to description wrapper when description is present', () => {
+    interface Currency {
+      code: string;
+      name: string;
+      description: string;
+    }
+
+    const usd: Currency = { code: 'USD', name: 'US Dollar', description: 'United States Dollar' };
+    const eur: Currency = { code: 'EUR', name: 'Euro', description: 'European Currency' };
+
+    render(
+      <SelectInput<Currency>
+        items={[
+          { type: 'option', value: usd },
+          { type: 'option', value: eur },
+        ]}
+        renderValue={(currency) => (
+          <SelectInputOptionContent title={currency.name} description={currency.description} />
+        )}
+        value={usd}
+      />,
+    );
+
+    const descriptionElement = screen.getByText('United States Dollar');
+    expect(descriptionElement).toHaveClass('np-select-input-option-description-in-trigger');
+  });
+
   describe('listbox label', () => {
     const fieldLabel = 'Fruits';
     const triggerLabel = 'Select fruit';

package/src/inputs/SelectInput.tsx

@@ -1256,7 +1256,8 @@ export function SelectInputOptionContent({
           <div
             className={clsx(
               'np-select-input-option-content-text-secondary np-text-body-default',
-              withinTrigger && 'np-select-input-option-content-text-within-trigger',
+              withinTrigger &&
+                'np-select-input-option-content-text-within-trigger np-select-input-option-description-in-trigger',
             )}
           >
             {description}

package/src/inputs/_ButtonInput.less

@@ -4,4 +4,12 @@
   align-content: center;
   border-radius: var(--size-10);
   text-align: start;
+
+  // Using !important to overwrite styles from .form-control and inputClassNameBase util, which also use !important
+  &:has(.np-select-input-option-description-in-trigger) {
+    height: auto !important;
+    align-content: start;
+    padding-top: var(--size-12) !important;
+    padding-bottom: var(--size-12) !important;
+  }
 }

package/src/inputs/_ButtonInput.tsx

@@ -18,7 +18,7 @@ export const ButtonInput = forwardRef(function ButtonInput(
     <button
       ref={ref}
       type="button"
-      className={clsx(className, inputClassNameBase({ size }), 'np-button-input')}
+      className={clsx(inputClassNameBase({ size }), 'np-button-input', className)}
       style={{ ...inputPaddings, ...style }}
       {...restProps}
     />

package/src/main.css

@@ -5,11 +5,11 @@
   background-color: var(--color-sentiment-background-surface);
   color: var(--color-sentiment-content-primary);
 }
-.np-theme-personal .wds-sentiment-surface-negative-base,
-.np-theme-business .wds-sentiment-surface-negative-base,
-.np-theme-platform .wds-sentiment-surface-negative-base,
-.np-theme-personal--bright-green .wds-sentiment-surface-negative-base,
-.np-theme-business--bright-green .wds-sentiment-surface-negative-base {
+.np-theme-personal.wds-sentiment-surface-negative-base,
+.np-theme-business.wds-sentiment-surface-negative-base,
+.np-theme-platform.wds-sentiment-surface-negative-base,
+.np-theme-personal--bright-green.wds-sentiment-surface-negative-base,
+.np-theme-business--bright-green.wds-sentiment-surface-negative-base {
   --color-sentiment-content-primary: #CB272F;
   --color-sentiment-content-primary-hover: #B8232B;
   --color-sentiment-content-primary-active: #A72027;
@@ -29,11 +29,11 @@
   --color-sentiment-background-surface-hover: #F9E1E1;
   --color-sentiment-background-surface-active: #F8D8D8;
 }
-.np-theme-personal .wds-sentiment-surface-negative-elevated,
-.np-theme-business .wds-sentiment-surface-negative-elevated,
-.np-theme-platform .wds-sentiment-surface-negative-elevated,
-.np-theme-personal--bright-green .wds-sentiment-surface-negative-elevated,
-.np-theme-business--bright-green .wds-sentiment-surface-negative-elevated {
+.np-theme-personal.wds-sentiment-surface-negative-elevated,
+.np-theme-business.wds-sentiment-surface-negative-elevated,
+.np-theme-platform.wds-sentiment-surface-negative-elevated,
+.np-theme-personal--bright-green.wds-sentiment-surface-negative-elevated,
+.np-theme-business--bright-green.wds-sentiment-surface-negative-elevated {
   --color-sentiment-content-primary: #FFFFFF;
   --color-sentiment-content-primary-hover: #F5CCCC;
   --color-sentiment-content-primary-active: #F1B7B7;
@@ -53,11 +53,11 @@
   --color-sentiment-background-surface-hover: #B8232B;
   --color-sentiment-background-surface-active: #A72027;
 }
-.np-theme-personal--dark .wds-sentiment-surface-negative-base,
-.np-theme-business--dark .wds-sentiment-surface-negative-base,
-.np-theme-personal--forest-green .wds-sentiment-surface-negative-base,
-.np-theme-business--forest-green .wds-sentiment-surface-negative-base,
-.np-theme-platform--forest-green .wds-sentiment-surface-negative-base {
+.np-theme-personal--dark.wds-sentiment-surface-negative-base,
+.np-theme-business--dark.wds-sentiment-surface-negative-base,
+.np-theme-personal--forest-green.wds-sentiment-surface-negative-base,
+.np-theme-business--forest-green.wds-sentiment-surface-negative-base,
+.np-theme-platform--forest-green.wds-sentiment-surface-negative-base {
   --color-sentiment-content-primary: #FFA8AD;
   --color-sentiment-content-primary-hover: #FFBDC0;
   --color-sentiment-content-primary-active: #FFD1D3;
@@ -77,11 +77,11 @@
   --color-sentiment-background-surface-hover: #641115;
   --color-sentiment-background-surface-active: #761418;
 }
-.np-theme-personal--dark .wds-sentiment-surface-negative-elevated,
-.np-theme-business--dark .wds-sentiment-surface-negative-elevated,
-.np-theme-personal--forest-green .wds-sentiment-surface-negative-elevated,
-.np-theme-business--forest-green .wds-sentiment-surface-negative-elevated,
-.np-theme-platform--forest-green .wds-sentiment-surface-negative-elevated {
+.np-theme-personal--dark.wds-sentiment-surface-negative-elevated,
+.np-theme-business--dark.wds-sentiment-surface-negative-elevated,
+.np-theme-personal--forest-green.wds-sentiment-surface-negative-elevated,
+.np-theme-business--forest-green.wds-sentiment-surface-negative-elevated,
+.np-theme-platform--forest-green.wds-sentiment-surface-negative-elevated {
   --color-sentiment-content-primary: #410B0D;
   --color-sentiment-content-primary-hover: #641115;
   --color-sentiment-content-primary-active: #761418;
@@ -101,11 +101,11 @@
   --color-sentiment-background-surface-hover: #FFBDC0;
   --color-sentiment-background-surface-active: #FFD1D3;
 }
-.np-theme-personal .wds-sentiment-surface-warning-base,
-.np-theme-business .wds-sentiment-surface-warning-base,
-.np-theme-platform .wds-sentiment-surface-warning-base,
-.np-theme-personal--bright-green .wds-sentiment-surface-warning-base,
-.np-theme-business--bright-green .wds-sentiment-surface-warning-base {
+.np-theme-personal.wds-sentiment-surface-warning-base,
+.np-theme-business.wds-sentiment-surface-warning-base,
+.np-theme-platform.wds-sentiment-surface-warning-base,
+.np-theme-personal--bright-green.wds-sentiment-surface-warning-base,
+.np-theme-business--bright-green.wds-sentiment-surface-warning-base {
   --color-sentiment-content-primary: #4A3B1C;
   --color-sentiment-content-primary-hover: #302612;
   --color-sentiment-content-primary-active: #2C2311;
@@ -125,11 +125,11 @@
   --color-sentiment-background-surface-hover: #FFF0B2;
   --color-sentiment-background-surface-active: #FFE98F;
 }
-.np-theme-personal .wds-sentiment-surface-warning-elevated,
-.np-theme-business .wds-sentiment-surface-warning-elevated,
-.np-theme-platform .wds-sentiment-surface-warning-elevated,
-.np-theme-personal--bright-green .wds-sentiment-surface-warning-elevated,
-.np-theme-business--bright-green .wds-sentiment-surface-warning-elevated {
+.np-theme-personal.wds-sentiment-surface-warning-elevated,
+.np-theme-business.wds-sentiment-surface-warning-elevated,
+.np-theme-platform.wds-sentiment-surface-warning-elevated,
+.np-theme-personal--bright-green.wds-sentiment-surface-warning-elevated,
+.np-theme-business--bright-green.wds-sentiment-surface-warning-elevated {
   --color-sentiment-content-primary: #4A3B1C;
   --color-sentiment-content-primary-hover: #302612;
   --color-sentiment-content-primary-active: #2C2311;
@@ -149,11 +149,11 @@
   --color-sentiment-background-surface-hover: #FFBF0F;
   --color-sentiment-background-surface-active: #FFBB00;
 }
-.np-theme-personal--dark .wds-sentiment-surface-warning-base,
-.np-theme-business--dark .wds-sentiment-surface-warning-base,
-.np-theme-personal--forest-green .wds-sentiment-surface-warning-base,
-.np-theme-business--forest-green .wds-sentiment-surface-warning-base,
-.np-theme-platform--forest-green .wds-sentiment-surface-warning-base {
+.np-theme-personal--dark.wds-sentiment-surface-warning-base,
+.np-theme-business--dark.wds-sentiment-surface-warning-base,
+.np-theme-personal--forest-green.wds-sentiment-surface-warning-base,
+.np-theme-business--forest-green.wds-sentiment-surface-warning-base,
+.np-theme-platform--forest-green.wds-sentiment-surface-warning-base {
   --color-sentiment-content-primary: #FADC65;
   --color-sentiment-content-primary-hover: #F9D648;
   --color-sentiment-content-primary-active: #F8CD20;
@@ -173,11 +173,11 @@
   --color-sentiment-background-surface-hover: #504930;
   --color-sentiment-background-surface-active: #665D3D;
 }
-.np-theme-personal--dark .wds-sentiment-surface-warning-elevated,
-.np-theme-business--dark .wds-sentiment-surface-warning-elevated,
-.np-theme-personal--forest-green .wds-sentiment-surface-warning-elevated,
-.np-theme-business--forest-green .wds-sentiment-surface-warning-elevated,
-.np-theme-platform--forest-green .wds-sentiment-surface-warning-elevated {
+.np-theme-personal--dark.wds-sentiment-surface-warning-elevated,
+.np-theme-business--dark.wds-sentiment-surface-warning-elevated,
+.np-theme-personal--forest-green.wds-sentiment-surface-warning-elevated,
+.np-theme-business--forest-green.wds-sentiment-surface-warning-elevated,
+.np-theme-platform--forest-green.wds-sentiment-surface-warning-elevated {
   --color-sentiment-content-primary: #3A3523;
   --color-sentiment-content-primary-hover: #504930;
   --color-sentiment-content-primary-active: #665D3D;
@@ -197,11 +197,11 @@
   --color-sentiment-background-surface-hover: #F9D648;
   --color-sentiment-background-surface-active: #F8CD20;
 }
-.np-theme-personal .wds-sentiment-surface-success-base,
-.np-theme-business .wds-sentiment-surface-success-base,
-.np-theme-platform .wds-sentiment-surface-success-base,
-.np-theme-personal--bright-green .wds-sentiment-surface-success-base,
-.np-theme-business--bright-green .wds-sentiment-surface-success-base {
+.np-theme-personal.wds-sentiment-surface-success-base,
+.np-theme-business.wds-sentiment-surface-success-base,
+.np-theme-platform.wds-sentiment-surface-success-base,
+.np-theme-personal--bright-green.wds-sentiment-surface-success-base,
+.np-theme-business--bright-green.wds-sentiment-surface-success-base {
   --color-sentiment-content-primary: #054D28;
   --color-sentiment-content-primary-hover: #043A1E;
   --color-sentiment-content-primary-active: #022614;
@@ -221,11 +221,11 @@
   --color-sentiment-background-surface-hover: #D3F2C0;
   --color-sentiment-background-surface-active: #C5EDAB;
 }
-.np-theme-personal .wds-sentiment-surface-success-elevated,
-.np-theme-business .wds-sentiment-surface-success-elevated,
-.np-theme-platform .wds-sentiment-surface-success-elevated,
-.np-theme-personal--bright-green .wds-sentiment-surface-success-elevated,
-.np-theme-business--bright-green .wds-sentiment-surface-success-elevated {
+.np-theme-personal.wds-sentiment-surface-success-elevated,
+.np-theme-business.wds-sentiment-surface-success-elevated,
+.np-theme-platform.wds-sentiment-surface-success-elevated,
+.np-theme-personal--bright-green.wds-sentiment-surface-success-elevated,
+.np-theme-business--bright-green.wds-sentiment-surface-success-elevated {
   --color-sentiment-content-primary: #E2F6D5;
   --color-sentiment-content-primary-hover: #D3F2C0;
   --color-sentiment-content-primary-active: #C5EDAB;
@@ -245,11 +245,11 @@
   --color-sentiment-background-surface-hover: #043A1E;
   --color-sentiment-background-surface-active: #022614;
 }
-.np-theme-personal--dark .wds-sentiment-surface-success-base,
-.np-theme-business--dark .wds-sentiment-surface-success-base,
-.np-theme-personal--forest-green .wds-sentiment-surface-success-base,
-.np-theme-business--forest-green .wds-sentiment-surface-success-base,
-.np-theme-platform--forest-green .wds-sentiment-surface-success-base {
+.np-theme-personal--dark.wds-sentiment-surface-success-base,
+.np-theme-business--dark.wds-sentiment-surface-success-base,
+.np-theme-personal--forest-green.wds-sentiment-surface-success-base,
+.np-theme-business--forest-green.wds-sentiment-surface-success-base,
+.np-theme-platform--forest-green.wds-sentiment-surface-success-base {
   --color-sentiment-content-primary: #BAE5A0;
   --color-sentiment-content-primary-hover: #C8EAB3;
   --color-sentiment-content-primary-active: #D6F0C7;
@@ -269,11 +269,11 @@
   --color-sentiment-background-surface-hover: #323B2B;
   --color-sentiment-background-surface-active: #3E4A36;
 }
-.np-theme-personal--dark .wds-sentiment-surface-success-elevated,
-.np-theme-business--dark .wds-sentiment-surface-success-elevated,
-.np-theme-personal--forest-green .wds-sentiment-surface-success-elevated,
-.np-theme-business--forest-green .wds-sentiment-surface-success-elevated,
-.np-theme-platform--forest-green .wds-sentiment-surface-success-elevated {
+.np-theme-personal--dark.wds-sentiment-surface-success-elevated,
+.np-theme-business--dark.wds-sentiment-surface-success-elevated,
+.np-theme-personal--forest-green.wds-sentiment-surface-success-elevated,
+.np-theme-business--forest-green.wds-sentiment-surface-success-elevated,
+.np-theme-platform--forest-green.wds-sentiment-surface-success-elevated {
   --color-sentiment-content-primary: #252C20;
   --color-sentiment-content-primary-hover: #323B2B;
   --color-sentiment-content-primary-active: #3E4A36;
@@ -293,11 +293,11 @@
   --color-sentiment-background-surface-hover: #C8EAB3;
   --color-sentiment-background-surface-active: #D6F0C7;
 }
-.np-theme-personal .wds-sentiment-surface-neutral-base,
-.np-theme-business .wds-sentiment-surface-neutral-base,
-.np-theme-platform .wds-sentiment-surface-neutral-base,
-.np-theme-personal--bright-green .wds-sentiment-surface-neutral-base,
-.np-theme-business--bright-green .wds-sentiment-surface-neutral-base {
+.np-theme-personal.wds-sentiment-surface-neutral-base,
+.np-theme-business.wds-sentiment-surface-neutral-base,
+.np-theme-platform.wds-sentiment-surface-neutral-base,
+.np-theme-personal--bright-green.wds-sentiment-surface-neutral-base,
+.np-theme-business--bright-green.wds-sentiment-surface-neutral-base {
   --color-sentiment-content-primary: #454745;
   --color-sentiment-content-primary-hover: #353635;
   --color-sentiment-content-primary-active: #232423;
@@ -317,11 +317,11 @@
   --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,
-.np-theme-platform .wds-sentiment-surface-neutral-elevated,
-.np-theme-personal--bright-green .wds-sentiment-surface-neutral-elevated,
-.np-theme-business--bright-green .wds-sentiment-surface-neutral-elevated {
+.np-theme-personal.wds-sentiment-surface-neutral-elevated,
+.np-theme-business.wds-sentiment-surface-neutral-elevated,
+.np-theme-platform.wds-sentiment-surface-neutral-elevated,
+.np-theme-personal--bright-green.wds-sentiment-surface-neutral-elevated,
+.np-theme-business--bright-green.wds-sentiment-surface-neutral-elevated {
   --color-sentiment-content-primary: #F1F1ED;
   --color-sentiment-content-primary-hover: #E7E7E1;
   --color-sentiment-content-primary-active: #DFDED5;
@@ -341,11 +341,11 @@
   --color-sentiment-background-surface-hover: #353635;
   --color-sentiment-background-surface-active: #232423;
 }
-.np-theme-personal--dark .wds-sentiment-surface-neutral-base,
-.np-theme-business--dark .wds-sentiment-surface-neutral-base,
-.np-theme-personal--forest-green .wds-sentiment-surface-neutral-base,
-.np-theme-business--forest-green .wds-sentiment-surface-neutral-base,
-.np-theme-platform--forest-green .wds-sentiment-surface-neutral-base {
+.np-theme-personal--dark.wds-sentiment-surface-neutral-base,
+.np-theme-business--dark.wds-sentiment-surface-neutral-base,
+.np-theme-personal--forest-green.wds-sentiment-surface-neutral-base,
+.np-theme-business--forest-green.wds-sentiment-surface-neutral-base,
+.np-theme-platform--forest-green.wds-sentiment-surface-neutral-base {
   --color-sentiment-content-primary: #F1F1ED;
   --color-sentiment-content-primary-hover: #E7E7E1;
   --color-sentiment-content-primary-active: #DFDED5;
@@ -365,11 +365,11 @@
   --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,
-.np-theme-personal--forest-green .wds-sentiment-surface-neutral-elevated,
-.np-theme-business--forest-green .wds-sentiment-surface-neutral-elevated,
-.np-theme-platform--forest-green .wds-sentiment-surface-neutral-elevated {
+.np-theme-personal--dark.wds-sentiment-surface-neutral-elevated,
+.np-theme-business--dark.wds-sentiment-surface-neutral-elevated,
+.np-theme-personal--forest-green.wds-sentiment-surface-neutral-elevated,
+.np-theme-business--forest-green.wds-sentiment-surface-neutral-elevated,
+.np-theme-platform--forest-green.wds-sentiment-surface-neutral-elevated {
   --color-sentiment-content-primary: #2A2C29;
   --color-sentiment-content-primary-hover: #414441;
   --color-sentiment-content-primary-active: #595B58;
@@ -389,11 +389,11 @@
   --color-sentiment-background-surface-hover: #E7E7E1;
   --color-sentiment-background-surface-active: #DFDED5;
 }
-.np-theme-personal .wds-sentiment-surface-proposition-base,
-.np-theme-business .wds-sentiment-surface-proposition-base,
-.np-theme-platform .wds-sentiment-surface-proposition-base,
-.np-theme-personal--bright-green .wds-sentiment-surface-proposition-base,
-.np-theme-business--bright-green .wds-sentiment-surface-proposition-base {
+.np-theme-personal.wds-sentiment-surface-proposition-base,
+.np-theme-business.wds-sentiment-surface-proposition-base,
+.np-theme-platform.wds-sentiment-surface-proposition-base,
+.np-theme-personal--bright-green.wds-sentiment-surface-proposition-base,
+.np-theme-business--bright-green.wds-sentiment-surface-proposition-base {
   --color-sentiment-content-primary: #0E0F0C;
   --color-sentiment-content-primary-hover: #0A2826;
   --color-sentiment-content-primary-active: #074140;
@@ -413,11 +413,11 @@
   --color-sentiment-background-surface-hover: #CAF1F1;
   --color-sentiment-background-surface-active: #B6ECEC;
 }
-.np-theme-personal .wds-sentiment-surface-proposition-elevated,
-.np-theme-business .wds-sentiment-surface-proposition-elevated,
-.np-theme-platform .wds-sentiment-surface-proposition-elevated,
-.np-theme-personal--bright-green .wds-sentiment-surface-proposition-elevated,
-.np-theme-business--bright-green .wds-sentiment-surface-proposition-elevated {
+.np-theme-personal.wds-sentiment-surface-proposition-elevated,
+.np-theme-business.wds-sentiment-surface-proposition-elevated,
+.np-theme-platform.wds-sentiment-surface-proposition-elevated,
+.np-theme-personal--bright-green.wds-sentiment-surface-proposition-elevated,
+.np-theme-business--bright-green.wds-sentiment-surface-proposition-elevated {
   --color-sentiment-content-primary: #FFFFFF;
   --color-sentiment-content-primary-hover: #EAF9F9;
   --color-sentiment-content-primary-active: #D5F4F4;
@@ -437,11 +437,11 @@
   --color-sentiment-background-surface-hover: #043A3A;
   --color-sentiment-background-surface-active: #022626;
 }
-.np-theme-personal--dark .wds-sentiment-surface-proposition-base,
-.np-theme-business--dark .wds-sentiment-surface-proposition-base,
-.np-theme-personal--forest-green .wds-sentiment-surface-proposition-base,
-.np-theme-business--forest-green .wds-sentiment-surface-proposition-base,
-.np-theme-platform--forest-green .wds-sentiment-surface-proposition-base {
+.np-theme-personal--dark.wds-sentiment-surface-proposition-base,
+.np-theme-business--dark.wds-sentiment-surface-proposition-base,
+.np-theme-personal--forest-green.wds-sentiment-surface-proposition-base,
+.np-theme-business--forest-green.wds-sentiment-surface-proposition-base,
+.np-theme-platform--forest-green.wds-sentiment-surface-proposition-base {
   --color-sentiment-content-primary: #FFFFFF;
   --color-sentiment-content-primary-hover: #EAF9F9;
   --color-sentiment-content-primary-active: #D5F4F4;
@@ -461,11 +461,11 @@
   --color-sentiment-background-surface-hover: #124F4C;
   --color-sentiment-background-surface-active: #176460;
 }
-.np-theme-personal--dark .wds-sentiment-surface-proposition-elevated,
-.np-theme-business--dark .wds-sentiment-surface-proposition-elevated,
-.np-theme-personal--forest-green .wds-sentiment-surface-proposition-elevated,
-.np-theme-business--forest-green .wds-sentiment-surface-proposition-elevated,
-.np-theme-platform--forest-green .wds-sentiment-surface-proposition-elevated {
+.np-theme-personal--dark.wds-sentiment-surface-proposition-elevated,
+.np-theme-business--dark.wds-sentiment-surface-proposition-elevated,
+.np-theme-personal--forest-green.wds-sentiment-surface-proposition-elevated,
+.np-theme-business--forest-green.wds-sentiment-surface-proposition-elevated,
+.np-theme-platform--forest-green.wds-sentiment-surface-proposition-elevated {
   --color-sentiment-content-primary: #0E0F0C;
   --color-sentiment-content-primary-hover: #0A2826;
   --color-sentiment-content-primary-active: #074140;
@@ -3930,6 +3930,14 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   border-radius: var(--size-10);
   text-align: start;
 }
+.np-button-input:has(.np-select-input-option-description-in-trigger) {
+  height: auto !important;
+  align-content: start;
+  padding-top: 12px !important;
+  padding-top: var(--size-12) !important;
+  padding-bottom: 12px !important;
+  padding-bottom: var(--size-12) !important;
+}
 .np-popover-v2-container {
   z-index: 1060;
   display: flex;

package/src/prompt/InfoPrompt/InfoPrompt.test.story.tsx

@@ -297,3 +297,122 @@ export const TinyScreen: Story = {
   ),
   ...withVariantConfig(['400%']),
 };
+
+/**
+ * Test that the default LiveRegion renders with role="status" and aria-live="polite".
+ */
+export const LiveRegionPoliteDefault: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Verify live region with role="status" exists', async () => {
+      await waitFor(async () => {
+        const liveRegion = canvas.getByRole('status');
+        await expect(liveRegion).toBeInTheDocument();
+        await waitFor(async () => expect(liveRegion).toHaveAttribute('aria-live', 'polite'));
+        await expect(liveRegion).toHaveAttribute('aria-atomic', 'true');
+      });
+    });
+
+    await step('Verify prompt content is inside the live region', async () => {
+      const liveRegion = canvas.getByRole('status');
+      await expect(within(liveRegion).getByText('Polite announcement')).toBeInTheDocument();
+    });
+  },
+  args: {
+    description: 'Polite announcement',
+  },
+};
+
+/**
+ * Test that aria-live="assertive" renders with role="alert".
+ */
+export const LiveRegionAssertive: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Verify live region with role="alert" exists', async () => {
+      await waitFor(async () => {
+        const liveRegion = canvas.getByRole('alert');
+        await expect(liveRegion).toBeInTheDocument();
+        await waitFor(async () => expect(liveRegion).toHaveAttribute('aria-live', 'assertive'));
+        await expect(liveRegion).toHaveAttribute('aria-atomic', 'true');
+      });
+    });
+
+    await step('Verify prompt content is inside the live region', async () => {
+      const liveRegion = canvas.getByRole('alert');
+      await expect(within(liveRegion).getByText('Payment failed')).toBeInTheDocument();
+    });
+  },
+  args: {
+    sentiment: 'negative',
+    description: 'Payment failed',
+    'aria-live': 'assertive',
+  },
+};
+
+/**
+ * Test that aria-live="off" renders without a live region wrapper.
+ */
+export const LiveRegionOff: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Verify no live region wrapper exists', async () => {
+      await waitFor(async () => {
+        await expect(canvas.queryByRole('status')).not.toBeInTheDocument();
+        await expect(canvas.queryByRole('alert')).not.toBeInTheDocument();
+      });
+    });
+
+    await step('Verify prompt content still renders', async () => {
+      await expect(canvas.getByText('Static info')).toBeInTheDocument();
+    });
+  },
+  args: {
+    description: 'Static info',
+    'aria-live': 'off',
+  },
+};
+
+/**
+ * Test that a dismissed prompt also removes the live region.
+ */
+export const LiveRegionDismiss: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Verify live region exists before dismiss', async () => {
+      await waitFor(async () => {
+        await expect(canvas.getByRole('status')).toBeInTheDocument();
+      });
+    });
+
+    await step('Dismiss the prompt', async () => {
+      const dismissButton = canvas.getByRole('button', { name: /close/i });
+      await userEvent.click(dismissButton);
+    });
+
+    await step('Verify live region is removed', async () => {
+      await waitFor(async () => {
+        await expect(canvas.queryByRole('status')).not.toBeInTheDocument();
+      });
+    });
+  },
+  render: function Render(args: InfoPromptProps) {
+    const [isVisible, setIsVisible] = useState(true);
+
+    if (!isVisible) {
+      return <div data-testid="dismissed">Prompt dismissed</div>;
+    }
+
+    return (
+      <InfoPrompt
+        {...args}
+        description="Dismissable live region"
+        onDismiss={() => setIsVisible(false)}
+      />
+    );
+  },
+};