@transferwise/components 46.133.1 → 46.135.0

package/src/main.css

@@ -1,6 +1,6 @@
 /**
- * Do not edit directly
- * Generated on Wed, 07 Jan 2026 11:56:15 GMT
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Tue, 31 Mar 2026 13:02:10 GMT
  */
 
 :root {
@@ -142,8 +142,8 @@
 }
 
 /**
- * Do not edit directly
- * Generated on Wed, 07 Jan 2026 11:56:15 GMT
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Tue, 31 Mar 2026 13:02:11 GMT
  */
 
 .np-theme-personal {
@@ -391,8 +391,8 @@
 }
 
 /**
- * Do not edit directly
- * Generated on Wed, 07 Jan 2026 11:56:15 GMT
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Tue, 31 Mar 2026 13:02:11 GMT
  */
 
 .np-theme-personal--forest-green {
@@ -640,8 +640,8 @@
 }
 
 /**
- * Do not edit directly
- * Generated on Wed, 07 Jan 2026 11:56:15 GMT
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Tue, 31 Mar 2026 13:02:11 GMT
  */
 
 .np-theme-personal--bright-green {
@@ -889,8 +889,8 @@
 }
 
 /**
- * Do not edit directly
- * Generated on Wed, 07 Jan 2026 11:56:15 GMT
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Tue, 31 Mar 2026 13:02:11 GMT
  */
 
 .np-theme-personal--dark {
@@ -1138,8 +1138,8 @@
 }
 
 /**
- * Do not edit directly
- * Generated on Wed, 07 Jan 2026 11:56:15 GMT
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Tue, 31 Mar 2026 13:02:11 GMT
  */
 
 .np-theme-platform {
@@ -1321,8 +1321,8 @@
 }
 
 /**
- * Do not edit directly
- * Generated on Wed, 07 Jan 2026 11:56:15 GMT
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Tue, 31 Mar 2026 13:02:11 GMT
  */
 
 .np-theme-platform--forest-green {
@@ -1504,8 +1504,8 @@
 }
 
 /**
- * Do not edit directly
- * Generated on Wed, 07 Jan 2026 11:56:15 GMT
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Tue, 31 Mar 2026 13:02:11 GMT
  */
 
 .np-theme-business {
@@ -1688,8 +1688,8 @@
 }
 
 /**
- * Do not edit directly
- * Generated on Wed, 07 Jan 2026 11:56:15 GMT
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Tue, 31 Mar 2026 13:02:11 GMT
  */
 
 .np-theme-business--dark {
@@ -1872,8 +1872,8 @@
 }
 
 /**
- * Do not edit directly
- * Generated on Wed, 07 Jan 2026 11:56:15 GMT
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Tue, 31 Mar 2026 13:02:11 GMT
  */
 
 .np-theme-business--forest-green {
@@ -2056,8 +2056,8 @@
 }
 
 /**
- * Do not edit directly
- * Generated on Wed, 07 Jan 2026 11:56:15 GMT
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Tue, 31 Mar 2026 13:02:11 GMT
  */
 
 .np-theme-business--bright-green {
@@ -25824,7 +25824,7 @@ a[data-toggle="tooltip"] {
   --color-sentiment-interactive-control: #CB272F;
   --color-sentiment-interactive-control-hover: #B8232B;
   --color-sentiment-interactive-control-active: #A72027;
-  --color-sentiment-background-surface: #90000D;
+  --color-sentiment-background-surface: #CB272F;
   --color-sentiment-background-surface-hover: #B8232B;
   --color-sentiment-background-surface-active: #A72027;
 }
@@ -32429,12 +32429,50 @@ html:not([dir="rtl"]) .np-navigation-option {
   }
 }
 
-.wds-sentiment-surface.status-circle {
-  background-color: var(--color-sentiment-interactive-primary);
+.status-circle.negative,
+.status-circle.error {
+  background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-negative));
 }
 
-.wds-sentiment-surface.status-circle .status-icon {
-  color: var(--color-sentiment-interactive-control);
+.status-circle.negative .status-icon,
+.status-circle.error .status-icon {
+  color: var(--color-sentiment-interactive-control, var(--color-sentiment-negative-secondary));
+}
+
+.status-circle.positive,
+.status-circle.success {
+  background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-positive));
+}
+
+.status-circle.positive .status-icon,
+.status-circle.success .status-icon {
+  color: var(--color-sentiment-interactive-control, var(--color-sentiment-positive-secondary));
+}
+
+.status-circle.warning,
+.status-circle.pending {
+  background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-warning));
+}
+
+.status-circle.warning .status-icon,
+.status-circle.pending .status-icon {
+  color: var(--color-sentiment-interactive-control, var(--color-dark));
+}
+
+.status-circle.neutral,
+.status-circle.info {
+  background-color: #5d7079;
+  background-color: var(--color-sentiment-interactive-primary, var(--color-content-secondary));
+}
+
+.status-circle.neutral .status-icon,
+.status-circle.info .status-icon {
+  color: var(--color-sentiment-interactive-control, var(--color-contrast-overlay));
+}
+
+.np-theme-personal--bright-green .status-circle.neutral .status-icon,
+.np-theme-personal--bright-green .status-circle.info .status-icon {
+  color: var(--color-sentiment-interactive-control, var(--color-white));
 }
 
 .tw-stepper {

package/src/moneyInput/MoneyInput.story.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { within, userEvent } from 'storybook/test';
+import { within, userEvent, expect } from 'storybook/test';
 import { Lock } from '@transferwise/icons';
 import { useState } from 'react';
 
@@ -155,6 +155,15 @@ export const BalanceCurrencies: Story = {
   },
 };
 
+export const WithDecimals: Story = {
+  args: {
+    currencies: [],
+    selectedCurrency: exampleCurrency.eur,
+    decimals: 4,
+    amount: 1234.1412,
+  },
+};
+
 export const OpenedInput: Story = {
   ...MultipleCurrencies,
   play: async ({ canvasElement }) => {

package/src/moneyInput/MoneyInput.test.story.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { within, fireEvent } from 'storybook/test';
+import { within, userEvent, fireEvent, expect } from 'storybook/test';
 import { allModes } from '../../.storybook/modes';
 import { lorem500 } from '../test-utils';
 import { Field } from '../field/Field';
@@ -102,3 +102,143 @@ export const SmoothScrollReset: Story = {
     },
   },
 };
+
+export const WithDecimals: Story = {
+  args: {
+    currencies: [],
+    decimals: 4,
+    amount: 1234.5678,
+  },
+  play: async ({ canvas }) => {
+    const input = canvas.getByRole('textbox');
+    await expect(input).toHaveValue('1,234.5678');
+    await userEvent.clear(input);
+    await userEvent.type(input, '99.123456789');
+    await userEvent.tab();
+    await expect(input).toHaveValue('99.1235');
+  },
+};
+
+const eur = {
+  value: 'EUR',
+  label: 'EUR',
+  note: 'Euro',
+  currency: 'eur',
+} as const;
+
+const bhd = {
+  value: 'BHD',
+  label: 'BHD',
+  note: 'Bahraini dinar',
+  currency: 'bhd',
+} as const;
+
+const jpy = {
+  value: 'JPY',
+  label: 'JPY',
+  note: 'Japanese yen',
+  currency: 'jpy',
+} as const;
+
+const sharedProps = {
+  currencies: [],
+  onAmountChange: () => {},
+  onCurrencyChange: () => {},
+} as const;
+
+function Row({
+  label,
+  amount,
+  currency,
+  decimals,
+}: {
+  label: string;
+  amount: number;
+  currency: { value: string; label: string; note: string; currency: string };
+  decimals: number;
+}) {
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: '240px 1fr 1fr',
+        gap: 12,
+        alignItems: 'center',
+      }}
+    >
+      <Body as="span" style={{ fontSize: 13, color: '#6b7280' }}>
+        {label}
+      </Body>
+      <Field label={`No decimals prop (${currency.value})`}>
+        <MoneyInput {...sharedProps} selectedCurrency={currency} amount={amount} />
+      </Field>
+      <Field label={`decimals={${decimals}} (${currency.value})`}>
+        <MoneyInput
+          {...sharedProps}
+          selectedCurrency={currency}
+          amount={amount}
+          decimals={decimals}
+        />
+      </Field>
+    </div>
+  );
+}
+
+/**
+ * Side-by-side comparison of formatAmount (no decimals prop) vs formatNumber (with decimals prop)
+ * when decimals matches the currency default. Differences indicate a formatting parity issue.
+ *
+ * Problem 1: Trailing zero stripping — formatAmount strips ".00" for whole numbers,
+ * formatNumber always pads to the requested precision.
+ *
+ * Problem 2: BHD decimal count — formatAmount renders 2 fractional digits for BHD,
+ * but the currencyDecimals map says BHD has 3. formatNumber with decimals=3 shows 3.
+ */
+export const DecimalsFormatParity: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <Body as="p" style={{ fontWeight: 600, marginTop: 8 }}>
+        EUR — whole numbers (trailing zero stripping)
+      </Body>
+      <Row label="amount=0" amount={0} currency={eur} decimals={2} />
+      <Row label="amount=1" amount={1} currency={eur} decimals={2} />
+      <Row label="amount=42" amount={42} currency={eur} decimals={2} />
+      <Row label="amount=100" amount={100} currency={eur} decimals={2} />
+      <Row label="amount=1000" amount={1000} currency={eur} decimals={2} />
+      <Row label="amount=9999999" amount={9999999} currency={eur} decimals={2} />
+
+      <Body as="p" style={{ fontWeight: 600, marginTop: 8 }}>
+        EUR — fractional amounts (should match)
+      </Body>
+      <Row label="amount=0.01" amount={0.01} currency={eur} decimals={2} />
+      <Row label="amount=0.1" amount={0.1} currency={eur} decimals={2} />
+      <Row label="amount=99.9" amount={99.9} currency={eur} decimals={2} />
+      <Row label="amount=1234567.89" amount={1234567.89} currency={eur} decimals={2} />
+
+      <Body as="p" style={{ fontWeight: 600, marginTop: 8 }}>
+        BHD — all amounts (formatAmount uses 2 digits, formatNumber uses 3)
+      </Body>
+      <Row label="amount=0" amount={0} currency={bhd} decimals={3} />
+      <Row label="amount=0.001" amount={0.001} currency={bhd} decimals={3} />
+      <Row label="amount=0.01" amount={0.01} currency={bhd} decimals={3} />
+      <Row label="amount=0.1" amount={0.1} currency={bhd} decimals={3} />
+      <Row label="amount=42" amount={42} currency={bhd} decimals={3} />
+      <Row label="amount=99.9" amount={99.9} currency={bhd} decimals={3} />
+      <Row label="amount=999.99" amount={999.99} currency={bhd} decimals={3} />
+      <Row label="amount=1234567.89" amount={1234567.89} currency={bhd} decimals={3} />
+
+      <Body as="p" style={{ fontWeight: 600, marginTop: 8 }}>
+        JPY — zero-decimal currency (should always match)
+      </Body>
+      <Row label="amount=0" amount={0} currency={jpy} decimals={0} />
+      <Row label="amount=1" amount={1} currency={jpy} decimals={0} />
+      <Row label="amount=1000" amount={1000} currency={jpy} decimals={0} />
+      <Row label="amount=1234567" amount={1234567} currency={jpy} decimals={0} />
+    </div>
+  ),
+  parameters: {
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
+};

package/src/moneyInput/MoneyInput.test.tsx

@@ -253,6 +253,45 @@ describe('Money Input', () => {
       await userEvent.tab();
       expect(input).toHaveValue('1,234,567.65');
     });
+
+    it('uses custom decimals when specified', async () => {
+      customRender({ decimals: 4 });
+      const input = getInput();
+      await userEvent.clear(input);
+      await userEvent.type(input, '1234.56789');
+      await userEvent.tab();
+      expect(input).toHaveValue('1,234.5679');
+    });
+
+    it('uses custom decimals of 0', async () => {
+      customRender({ decimals: 0 });
+      const input = getInput();
+      await userEvent.clear(input);
+      await userEvent.type(input, '1234.56');
+      await userEvent.tab();
+      expect(input).toHaveValue('1,235');
+    });
+
+    it('ignores custom decimals override for zero-decimal currencies like JPY', async () => {
+      const jpyCurrency: CurrencyOptionItem = {
+        value: 'JPY',
+        label: 'JPY',
+        note: 'Japanese yen',
+        currency: 'jpy',
+      };
+      customRender({
+        decimals: 4,
+        selectedCurrency: jpyCurrency,
+        currencies: [jpyCurrency],
+        amount: 1234,
+      });
+      const input = getInput();
+      expect(input).toHaveValue('1,234');
+      await userEvent.clear(input);
+      await userEvent.type(input, '5678.9999');
+      await userEvent.tab();
+      expect(input).toHaveValue('5,679');
+    });
   });
 
   it('calls onAmountChange with parsed and formatted value', async () => {
@@ -263,6 +302,12 @@ describe('Money Input', () => {
     expect(initialProps.onAmountChange).toHaveBeenCalledWith(1000.65);
   });
 
+  it('calls onAmountChange with value rounded to custom decimals', async () => {
+    customRender({ decimals: 4, amount: null });
+    await userEvent.type(getInput(), '12.34567');
+    expect(initialProps.onAmountChange).toHaveBeenCalledWith(12.3457);
+  });
+
   it('calls onAmountChange when input value is empty', async () => {
     customRender();
     await userEvent.clear(getInput());

package/src/moneyInput/MoneyInput.tsx

@@ -24,7 +24,7 @@ import {
 import Title from '../title';
 
 import messages from './MoneyInput.messages';
-import { formatAmount, parseAmount } from './currencyFormatting';
+import { formatAmount, formatNumber, getCurrencyDecimals, parseAmount } from './currencyFormatting';
 import withId from '../withId';
 
 export interface CurrencyOptionItem {
@@ -48,24 +48,34 @@ const formatAmountIfSet = ({
   amount,
   currency,
   locale,
+  decimals,
 }: {
   amount: number | null | undefined;
   currency: string;
   locale: string;
+  decimals?: number;
 }) => {
-  return typeof amount === 'number' ? formatAmount(amount, currency, locale) : '';
+  if (typeof amount !== 'number') {
+    return '';
+  }
+  if (decimals != null && getCurrencyDecimals(currency) !== 0) {
+    return formatNumber(amount, locale, decimals);
+  }
+  return formatAmount(amount, currency, locale);
 };
 
 const parseNumber = ({
   amount,
   currency,
   locale,
+  decimals,
 }: {
   amount: string;
   currency: string;
   locale: string;
+  decimals?: number;
 }) => {
-  return parseAmount(amount, currency, locale);
+  return parseAmount(amount, currency, locale, decimals);
 };
 
 const allowedInputKeys = new Set([
@@ -102,6 +112,12 @@ export interface MoneyInputProps extends WrappedComponentProps {
   onCustomAction?: () => void;
   classNames?: Record<string, string>;
   selectProps?: Partial<SelectInputProps<CurrencyOptionItem>>;
+  /**
+   * Specify the number of decimal places to format the amount. When not specified, the number of
+   * decimals is determined by the selected currency (e.g. 2 for EUR, 0 for JPY, 3 for BHD).
+   * This override is ignored for zero-decimal currencies (e.g. JPY, KRW, HUF), which always use 0.
+   */
+  decimals?: number;
 }
 
 export type MoneyInputPropsWithInputAttributes = MoneyInputProps &
@@ -133,6 +149,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
         amount: props.amount,
         currency: props.selectedCurrency.currency,
         locale: props.intl.locale,
+        decimals: props.decimals,
       }),
       locale: props.intl.locale,
     };
@@ -147,6 +164,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
           amount: nextProps.amount,
           currency: nextProps.selectedCurrency.currency,
           locale: nextProps.intl.locale,
+          decimals: nextProps.decimals,
         }),
       });
     }
@@ -174,6 +192,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
           amount: paste,
           currency: this.props.selectedCurrency.currency,
           locale,
+          decimals: this.props.decimals,
         });
 
     if (isNumberOrNull(parsed)) {
@@ -182,6 +201,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
           amount: parsed,
           currency: this.props.selectedCurrency.currency,
           locale,
+          decimals: this.props.decimals,
         }),
       });
       this.props.onAmountChange?.(parsed);
@@ -201,6 +221,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
           amount: value,
           currency: this.props.selectedCurrency.currency,
           locale: this.state.locale,
+          decimals: this.props.decimals,
         });
     if (isNumberOrNull(parsed)) {
       this.props.onAmountChange?.(parsed);
@@ -248,6 +269,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
         amount: previousState.formattedAmount,
         currency: this.props.selectedCurrency.currency,
         locale: previousState.locale,
+        decimals: this.props.decimals,
       });
       if (!isNumberOrNull(parsed)) {
         return {
@@ -259,6 +281,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
           amount: parsed,
           currency: this.props.selectedCurrency.currency,
           locale: previousState.locale,
+          decimals: this.props.decimals,
         }),
       };
     });
@@ -340,6 +363,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
             amount: this.props.placeholder,
             currency: this.props.selectedCurrency.currency,
             locale: this.state.locale,
+            decimals: this.props.decimals,
           })}
           autoComplete="off"
           aria-describedby={selectedCurrencyElementId}

package/src/moneyInput/currencyFormatting.ts

@@ -1,8 +1,8 @@
-import { formatAmount } from '@transferwise/formatting';
+import { formatAmount, formatNumber } from '@transferwise/formatting';
 
 import { DEFAULT_LOCALE } from '../common/locale';
 
-export { formatAmount };
+export { formatAmount, formatNumber };
 
 // TODO: do not duplicate this between formatting and components
 const currencyDecimals: Record<string, number> = {
@@ -52,7 +52,7 @@ function getValidLocale(locale: string) {
   }
 }
 
-function getCurrencyDecimals(currency: string) {
+export function getCurrencyDecimals(currency: string) {
   const upperCaseCurrency = currency.toUpperCase();
   return currencyDecimals[upperCaseCurrency] ?? DEFAULT_CURRENCY_DECIMALS;
 }
@@ -61,10 +61,16 @@ function getDecimalSeparator(locale: string) {
   return isNumberLocaleSupported() ? (1.1).toLocaleString(locale)[1] : '.';
 }
 
-export function parseAmount(number: string, currency: string, locale = DEFAULT_LOCALE) {
+export function parseAmount(
+  number: string,
+  currency: string,
+  locale = DEFAULT_LOCALE,
+  decimals?: number,
+) {
   const validLocale = getValidLocale(locale);
 
-  const precision = getCurrencyDecimals(currency);
+  const currencyDefault = getCurrencyDecimals(currency);
+  const precision = currencyDefault === 0 ? 0 : (decimals ?? currencyDefault);
   const groupSeparator = isNumberLocaleSupported() ? (10000).toLocaleString(validLocale)[2] : ',';
   const decimalSeparator = getDecimalSeparator(validLocale);
   const numberWithStandardDecimalSeparator = (number || '')

package/src/sentimentSurface/SentimentSurface.css

@@ -49,7 +49,7 @@
   --color-sentiment-interactive-control: #CB272F;
   --color-sentiment-interactive-control-hover: #B8232B;
   --color-sentiment-interactive-control-active: #A72027;
-  --color-sentiment-background-surface: #90000D;
+  --color-sentiment-background-surface: #CB272F;
   --color-sentiment-background-surface-hover: #B8232B;
   --color-sentiment-background-surface-active: #A72027;
 }

package/src/sentimentSurface/SentimentSurface.less

@@ -27,7 +27,7 @@
                     #CB272F, #B8232B, #A72027,
                     #9B141B, #831116, #6D0e13,
                     #CB272F, #B8232B, #A72027,
-                    #90000D, #B8232B, #A72027
+                    #CB272F, #B8232B, #A72027
                 );
       }
     }

package/src/statusIcon/StatusIcon.css

@@ -1,6 +1,37 @@
-.wds-sentiment-surface.status-circle {
-  background-color: var(--color-sentiment-interactive-primary);
+.status-circle.negative,
+.status-circle.error {
+  background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-negative));
 }
-.wds-sentiment-surface.status-circle .status-icon {
-  color: var(--color-sentiment-interactive-control);
+.status-circle.negative .status-icon,
+.status-circle.error .status-icon {
+  color: var(--color-sentiment-interactive-control, var(--color-sentiment-negative-secondary));
+}
+.status-circle.positive,
+.status-circle.success {
+  background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-positive));
+}
+.status-circle.positive .status-icon,
+.status-circle.success .status-icon {
+  color: var(--color-sentiment-interactive-control, var(--color-sentiment-positive-secondary));
+}
+.status-circle.warning,
+.status-circle.pending {
+  background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-warning));
+}
+.status-circle.warning .status-icon,
+.status-circle.pending .status-icon {
+  color: var(--color-sentiment-interactive-control, var(--color-dark));
+}
+.status-circle.neutral,
+.status-circle.info {
+  background-color: #5d7079;
+  background-color: var(--color-sentiment-interactive-primary, var(--color-content-secondary));
+}
+.status-circle.neutral .status-icon,
+.status-circle.info .status-icon {
+  color: var(--color-sentiment-interactive-control, var(--color-contrast-overlay));
+}
+.np-theme-personal--bright-green .status-circle.neutral .status-icon,
+.np-theme-personal--bright-green .status-circle.info .status-icon {
+  color: var(--color-sentiment-interactive-control, var(--color-white));
 }

package/src/statusIcon/StatusIcon.less

@@ -1,6 +1,37 @@
-.wds-sentiment-surface.status-circle {
-  background-color: var(--color-sentiment-interactive-primary);
-  .status-icon {
-    color: var(--color-sentiment-interactive-control);
+.status-circle {
+  &.negative,
+  &.error {
+    background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-negative));
+    .status-icon {
+      color: var(--color-sentiment-interactive-control, var(--color-sentiment-negative-secondary));
+    }
+  }
+
+  &.positive,
+  &.success {
+    background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-positive));
+    .status-icon {
+      color: var(--color-sentiment-interactive-control, var(--color-sentiment-positive-secondary));
+    }
+  }
+
+  &.warning,
+  &.pending {
+    background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-warning));
+    .status-icon {
+      color: var(--color-sentiment-interactive-control, var(--color-dark));
+    }
+  }
+
+  &.neutral,
+  &.info {
+    background-color: var(--color-sentiment-interactive-primary, var(--color-content-secondary));
+    .status-icon {
+      color: var(--color-sentiment-interactive-control, var(--color-contrast-overlay));
+
+      .np-theme-personal--bright-green & {
+        color: var(--color-sentiment-interactive-control, var(--color-white));
+      }
+    }
   }
 }