@transferwise/components 46.128.2 → 46.129.0

package/src/common/liveRegion/LiveRegion.tsx

@@ -0,0 +1,49 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+const ARIA_LIVE_ROLE_MAP = {
+  assertive: 'alert',
+  polite: 'status',
+} as const;
+
+export type AriaLive = 'off' | 'polite' | 'assertive';
+
+export interface LiveRegionProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'role' | 'aria-live' | 'aria-atomic'
+> {
+  /**
+   * Determines urgency: 'assertive' interrupts, 'polite' waits for idle, 'off' disables live region.
+   */
+  'aria-live': AriaLive;
+  /** Test ID for testing tools */
+  'data-testid'?: string;
+  children?: ReactNode;
+}
+
+/**
+ * Renders an ARIA live region with the correct implicit role.
+ *
+ * - `aria-live="polite"` → `role="status"`
+ * - `aria-live="assertive"` → `role="alert"`
+ * - `aria-live="off"` → no live region
+ *
+ * The `role` prop is intentionally excluded from the public API
+ * to prevent mismatches between `aria-live` and `role`.
+ */
+export const LiveRegion = ({ 'aria-live': ariaLive, children, ...props }: LiveRegionProps) => {
+  if (ariaLive === 'off') {
+    return <>{children}</>;
+  }
+
+  return (
+    <div
+      role={ARIA_LIVE_ROLE_MAP[ariaLive]}
+      aria-live={ariaLive}
+      aria-atomic="true"
+      style={{ display: 'contents' }}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};

package/src/common/liveRegion/index.ts

@@ -0,0 +1,2 @@
+export { LiveRegion } from './LiveRegion';
+export type { AriaLive, LiveRegionProps } from './LiveRegion';

package/src/inputs/SelectInput.css

@@ -102,6 +102,14 @@
   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/inputs/SelectInput.story.tsx

@@ -430,11 +430,11 @@ export const Advanced: Story<Month> = {
         { type: 'separator' },
       ])
       .slice(0, -1),
-    renderValue: (month, withinTrigger) => (
+    renderValue: (month) => (
       <SelectInputOptionContent
         title={month.name}
         note="Note"
-        description={withinTrigger ? undefined : `Month #${month.id}`}
+        description={`Month #${month.id}`}
         icon={<Calendar size={24} />}
       />
     ),

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;