@transferwise/components 46.125.0 → 46.127.1

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

@@ -0,0 +1,224 @@
+import { fireEvent, mockMatchMedia, render, screen, userEvent } from '../../test-utils';
+import { InfoPrompt, InfoPromptProps } from './InfoPrompt';
+
+mockMatchMedia();
+
+const CUSTOM_MEDIA = <span data-testid="custom-media">Custom Media</span>;
+
+describe('InfoPrompt', () => {
+  const defaultProps: InfoPromptProps = {
+    description: 'Prompt description',
+  };
+
+  it('renders description', () => {
+    render(<InfoPrompt {...defaultProps} />);
+    expect(screen.getByText('Prompt description')).toBeInTheDocument();
+  });
+
+  it('renders title when provided', () => {
+    render(<InfoPrompt {...defaultProps} title="Test Title" />);
+    expect(screen.getByText('Test Title')).toBeInTheDocument();
+    expect(screen.getByText('Prompt description')).toBeInTheDocument();
+  });
+
+  it('renders with GiftBox icon as default for `proposition` sentiment', () => {
+    render(<InfoPrompt {...defaultProps} sentiment="proposition" data-testid="info-prompt" />);
+    expect(screen.getByText('Prompt description')).toBeInTheDocument();
+    // GiftBox icon should be rendered for proposition sentiment
+    const prompt = screen.getByTestId('info-prompt');
+    expect(prompt.querySelector('svg')).toBeInTheDocument();
+  });
+
+  describe('sentiments', () => {
+    [
+      { sentiment: 'negative' as const, surfaceClass: 'wds-prompt--negative' },
+      { sentiment: 'warning' as const, surfaceClass: 'wds-prompt--warning' },
+      { sentiment: 'neutral' as const, surfaceClass: 'wds-prompt--neutral' },
+      { sentiment: 'success' as const, surfaceClass: 'wds-prompt--success' },
+      { sentiment: 'proposition' as const, surfaceClass: 'wds-prompt--proposition' },
+    ].forEach(({ sentiment, surfaceClass }) => {
+      describe(sentiment, () => {
+        it('should apply correct styles', () => {
+          render(<InfoPrompt {...defaultProps} sentiment={sentiment} data-testid="info-prompt" />);
+          expect(screen.getByTestId('info-prompt')).toHaveClass(surfaceClass);
+        });
+      });
+    });
+  });
+
+  describe('custom media', () => {
+    it('should render custom media when provided', () => {
+      render(<InfoPrompt {...defaultProps} media={{ asset: CUSTOM_MEDIA }} />);
+      expect(screen.getByTestId('custom-media')).toBeInTheDocument();
+    });
+
+    it('should render custom media for any sentiment', () => {
+      render(<InfoPrompt {...defaultProps} sentiment="neutral" media={{ asset: CUSTOM_MEDIA }} />);
+      expect(screen.getByTestId('custom-media')).toBeInTheDocument();
+    });
+  });
+
+  describe('action', () => {
+    it('should render action link when action is provided with href', () => {
+      render(
+        <InfoPrompt {...defaultProps} action={{ label: 'Learn more', href: '/learn-more' }} />,
+      );
+      const actionLink = screen.getByRole('link', { name: 'Learn more' });
+      expect(actionLink).toBeInTheDocument();
+      expect(actionLink).toHaveAttribute('href', '/learn-more');
+    });
+
+    it('should render action link with target when provided', () => {
+      render(
+        <InfoPrompt
+          {...defaultProps}
+          action={{ label: 'External link', href: 'https://example.com', target: '_blank' }}
+        />,
+      );
+      const actionLink = screen.getByRole('link', { name: /External link/i });
+      expect(actionLink).toHaveAttribute('target', '_blank');
+    });
+
+    it('should call onClick when action button is clicked', async () => {
+      const user = userEvent.setup();
+      const onClick = jest.fn();
+      render(<InfoPrompt {...defaultProps} action={{ label: 'Click me', onClick }} />);
+      const actionButton = screen.getByRole('button', { name: 'Click me' });
+      await user.click(actionButton);
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not render action when not provided', () => {
+      render(<InfoPrompt {...defaultProps} />);
+      expect(screen.queryByRole('link', { name: 'Learn more' })).not.toBeInTheDocument();
+    });
+  });
+
+  describe('HTML attributes', () => {
+    it('applies custom className, id, and data-testid', () => {
+      render(
+        <InfoPrompt
+          {...defaultProps}
+          className="custom-class"
+          id="custom-id"
+          data-testid="custom-test"
+        />,
+      );
+      const el = screen.getByTestId('custom-test');
+      expect(el).toHaveClass('custom-class');
+      expect(el).toHaveAttribute('id', 'custom-id');
+    });
+  });
+
+  describe('SentimentSurface integration', () => {
+    it('maps success sentiment correctly for SentimentSurface', () => {
+      render(<InfoPrompt {...defaultProps} sentiment="success" data-testid="prompt" />);
+      const el = screen.getByTestId('prompt');
+      expect(el).toHaveClass('wds-prompt--success');
+      expect(el).toHaveClass('wds-sentiment-surface');
+    });
+
+    it('passes through other sentiments unchanged', () => {
+      render(<InfoPrompt {...defaultProps} sentiment="negative" data-testid="prompt" />);
+      const el = screen.getByTestId('prompt');
+      expect(el).toHaveClass('wds-prompt--negative');
+      expect(el).toHaveClass('wds-sentiment-surface');
+    });
+  });
+
+  describe('touch interactions', () => {
+    const originalLocation = window.location;
+
+    beforeAll(() => {
+      jest.spyOn(window, 'open').mockImplementation();
+      Object.defineProperty(window, 'location', {
+        configurable: true,
+        value: {
+          ...originalLocation,
+          assign: jest.fn(),
+        },
+      });
+    });
+
+    afterEach(() => {
+      jest.clearAllMocks();
+    });
+
+    afterAll(() => {
+      Object.defineProperty(window, 'location', {
+        configurable: true,
+        value: originalLocation,
+      });
+    });
+
+    it('should navigate to action href on touch tap', () => {
+      render(
+        <InfoPrompt
+          {...defaultProps}
+          action={{ label: 'Learn more', href: '/learn-more' }}
+          data-testid="prompt"
+        />,
+      );
+      const prompt = screen.getByTestId('prompt');
+
+      fireEvent.touchStart(prompt);
+      expect(window.location.assign).not.toHaveBeenCalled();
+      fireEvent.touchEnd(prompt);
+      expect(window.location.assign).toHaveBeenCalledWith('/learn-more');
+    });
+
+    it('should open in new tab when action target is _blank', () => {
+      render(
+        <InfoPrompt
+          {...defaultProps}
+          action={{ label: 'External link', href: 'https://example.com', target: '_blank' }}
+          data-testid="prompt"
+        />,
+      );
+      const prompt = screen.getByTestId('prompt');
+
+      fireEvent.touchStart(prompt);
+      expect(window.open).not.toHaveBeenCalled();
+      fireEvent.touchEnd(prompt);
+      expect(window.open).toHaveBeenCalledWith(
+        'https://example.com',
+        '_blank',
+        'noopener, noreferrer',
+      );
+    });
+
+    it('should not navigate if touch move occurs (scrolling)', () => {
+      render(
+        <InfoPrompt
+          {...defaultProps}
+          action={{ label: 'Learn more', href: '/learn-more' }}
+          data-testid="prompt"
+        />,
+      );
+      const prompt = screen.getByTestId('prompt');
+
+      fireEvent.touchStart(prompt);
+      expect(window.location.assign).not.toHaveBeenCalled();
+      fireEvent.touchMove(prompt);
+      expect(window.location.assign).not.toHaveBeenCalled();
+      fireEvent.touchEnd(prompt);
+      expect(window.location.assign).not.toHaveBeenCalled();
+    });
+
+    it('should not navigate if no action href is provided', () => {
+      render(
+        <InfoPrompt
+          {...defaultProps}
+          action={{ label: 'Click me', onClick: jest.fn() }}
+          data-testid="prompt"
+        />,
+      );
+      const prompt = screen.getByTestId('prompt');
+
+      fireEvent.touchStart(prompt);
+      fireEvent.touchEnd(prompt);
+      expect(window.location.assign).not.toHaveBeenCalled();
+      expect(window.open).not.toHaveBeenCalled();
+    });
+  });
+});

package/src/prompt/InfoPrompt/InfoPrompt.tsx

@@ -0,0 +1,148 @@
+import { HTMLAttributes, ReactNode, useState } from 'react';
+import { Sentiment, Typography } from '../../common';
+import { GiftBox } from '@transferwise/icons';
+import type { Sentiment as SurfaceSentiment } from '../../sentimentSurface';
+import StatusIcon from '../../statusIcon';
+import { clsx } from 'clsx';
+import Body from '../../body';
+import Link, { LinkProps } from '../../link';
+import { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';
+
+export type InfoPromptAction = Pick<LinkProps, 'href' | 'target' | 'onClick'> & {
+  /**
+   * The label text for the action link
+   */
+  label: string;
+};
+
+export type InfoPromptMedia = {
+  /**
+   * The icon/image asset to display.
+   * The asset should include its own accessibility attributes (e.g. title, aria-label)
+   * if it conveys meaning, or aria-hidden="true" if decorative.
+   */
+  asset: ReactNode;
+};
+
+export type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> &
+  Pick<PrimitivePromptProps, 'data-testid'> & {
+    /**
+     * The sentiment determines the colour scheme
+     * @default 'neutral'
+     */
+    sentiment?: SurfaceSentiment;
+    /**
+     * Handler called when the close button is clicked.
+     * If not provided, the close button is hidden.
+     */
+    onDismiss?: () => void;
+    /**
+     * Custom media to override the default status icon.
+     * Success and proposition sentiments support 2 status variations: standard checkmark & confetti.
+     */
+    media?: InfoPromptMedia;
+    /**
+     * Action link to be displayed below the description
+     */
+    action?: InfoPromptAction;
+    /**
+     * Title content for the prompt
+     */
+    title?: string;
+    /**
+     * Description text for the prompt (required)
+     */
+    description: string;
+  };
+
+/**
+ * InfoPrompt displays important contextual messages to users within a screen.
+ * It provides a visually distinct way to communicate information, warnings, errors,
+ * or positive feedback with optional actions and dismissal capabilities.
+ *
+ * Use this component to replace the deprecated Alert component.
+ */
+export const InfoPrompt = ({
+  sentiment = 'neutral',
+  onDismiss,
+  media,
+  action,
+  title,
+  description,
+  className,
+  'data-testid': dataTestId,
+  ...restProps
+}: InfoPromptProps) => {
+  const [shouldFire, setShouldFire] = useState<boolean>();
+  const statusIconSentiment =
+    sentiment === 'success'
+      ? Sentiment.POSITIVE
+      : (sentiment as Exclude<SurfaceSentiment, 'proposition'>);
+
+  const handleTouchStart = () => {
+    setShouldFire(true);
+  };
+
+  const handleTouchEnd = () => {
+    if (shouldFire && action?.href) {
+      if (action.target === '_blank') {
+        window.top?.open(action.href, '_blank', 'noopener, noreferrer');
+      } else {
+        window.top?.location.assign(action.href);
+      }
+    }
+    setShouldFire(false);
+  };
+
+  const handleTouchMove = () => {
+    setShouldFire(false);
+  };
+
+  const renderMedia = () => {
+    if (media) {
+      return <span className="wds-info-prompt__media">{media.asset}</span>;
+    }
+
+    if (sentiment === 'proposition') {
+      return <GiftBox size={24} />;
+    }
+
+    return <StatusIcon size={24} sentiment={statusIconSentiment} />;
+  };
+
+  return (
+    <PrimitivePrompt
+      sentiment={sentiment}
+      media={renderMedia()}
+      data-testid={dataTestId}
+      className={clsx('wds-info-prompt', className)}
+      {...restProps}
+      onTouchStart={handleTouchStart}
+      onTouchEnd={handleTouchEnd}
+      onTouchMove={handleTouchMove}
+      onDismiss={onDismiss}
+    >
+      <div className="wds-info-prompt__content">
+        {title && (
+          <Body className="wds-info-prompt__title" type={Typography.BODY_LARGE_BOLD} as="span">
+            {title}
+          </Body>
+        )}
+        <Body as="span" className="wds-info-prompt__description">
+          {description}
+        </Body>
+        {action && (
+          <Link
+            href={action.href}
+            target={action.target}
+            type={Typography.LINK_DEFAULT}
+            className="wds-info-prompt__action"
+            onClick={action.onClick}
+          >
+            {action.label}
+          </Link>
+        )}
+      </div>
+    </PrimitivePrompt>
+  );
+};

package/src/prompt/InfoPrompt/index.ts

@@ -0,0 +1,2 @@
+export type { InfoPromptProps, InfoPromptAction, InfoPromptMedia } from './InfoPrompt';
+export { InfoPrompt } from './InfoPrompt';

package/src/prompt/InlinePrompt/InlinePrompt.story.tsx

@@ -225,24 +225,27 @@ export const Muted: StoryObj<PreviewStoryArgs> = {
  * While all main sentiments (`warning`, `negative`, `positive` and`neutral`) are associated with a
  * default `StatusIcon`s, we also allow for Icon overrides to bring the prompt's visual language
  * closer to the prompt's content. <br /><br />
- * It's also possible to override the default icon's accessible name announced by screen readers
- * via `mediaLabel` prop, which is especially useful for the `proposition` sentiment.
+ * It's also possible to override the default StatusIcon's accessible name announced by screen
+ * readers via `mediaLabel` prop, which is especially useful for the `proposition` sentiment.
+ * <br /><br />
+ * **NB**: If you're setting a label on a custom Icon, the accessible name should be provided via
+ * Icon's `title` prop instead.
  */
 export const IconOverrides: StoryObj<PreviewStoryArgs> = {
   render: (args: PreviewStoryArgs) => {
     return (
       <>
-        <InlinePrompt {...args} media={<Travel />} sentiment="positive" mediaLabel="Success: ">
-          Your travel account is set up and ready to use.
-        </InlinePrompt>
-        <InlinePrompt {...args} media={<Taxi />} sentiment="proposition" mediaLabel="Taxi addon: ">
-          Connect Wise with your taxi app to get exclusive discounts.
+        <InlinePrompt {...args} sentiment="negative" mediaLabel="Rejected: ">
+          This prompt uses default Icon, but with a custom label for screen readers.
         </InlinePrompt>
-        <InlinePrompt {...args} media={<Clock />} sentiment="warning" mediaLabel="Processing: ">
+        <InlinePrompt {...args} media={<Clock title="Processing: " />} sentiment="warning">
           The account verification is taking longer than usual.
         </InlinePrompt>
-        <InlinePrompt {...args} media={<Id />} sentiment="negative" mediaLabel="Error: ">
-          The identity document you provided has expired.
+        <InlinePrompt {...args} media={<Travel title="Activated: " />} sentiment="positive">
+          Your travel account is set up and ready to use.
+        </InlinePrompt>
+        <InlinePrompt {...args} media={<Taxi title="Taxi addon: " />} sentiment="proposition">
+          Connect Wise with your taxi app to get exclusive discounts.
         </InlinePrompt>
       </>
     );

package/src/prompt/InlinePrompt/InlinePrompt.test.tsx

@@ -1,3 +1,4 @@
+import { Clock } from '@transferwise/icons';
 import { mockMatchMedia, render, screen } from '../../test-utils';
 import { InlinePrompt, InlinePromptProps } from './InlinePrompt';
 import { Sentiment } from '../../common';
@@ -91,11 +92,22 @@ describe('InlinePrompt', () => {
           });
         }
 
-        it('should allow for customisation of aria label', () => {
+        it('should allow for customisation of aria label for StatusIcon', () => {
           render(<InlinePrompt {...defaultProps} sentiment={sentiment} mediaLabel={mediaLabel} />);
           expect(screen.getByLabelText(mediaLabel)).toBeInTheDocument();
         });
 
+        it('should allow for customisation of aria label for a custom Icon', () => {
+          render(
+            <InlinePrompt
+              {...defaultProps}
+              sentiment={sentiment}
+              media={<Clock title={mediaLabel} />}
+            />,
+          );
+          expect(screen.getByLabelText(mediaLabel)).toBeInTheDocument();
+        });
+
         it('should retain custom label while muted', () => {
           render(
             <InlinePrompt {...defaultProps} sentiment={sentiment} mediaLabel={mediaLabel} muted />,

package/src/prompt/PrimitivePrompt/PrimitivePrompt.less

@@ -44,4 +44,4 @@
       }
     }
   }
-}
+}

package/src/prompt/PrimitivePrompt/PrimitivePrompt.tsx

@@ -4,9 +4,9 @@ import SentimentSurface, { Sentiment } from '../../sentimentSurface';
 import IconButton from '../../iconButton';
 import { useIntl } from 'react-intl';
 import closeBtnMessages from '../../common/closeButton/CloseButton.messages';
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 
-export type PrimitivePromptProps = {
+export type PrimitivePromptProps = HTMLAttributes<HTMLDivElement> & {
   /**
    * The sentiment determines the colour scheme
    * @default success
@@ -24,10 +24,10 @@ export type PrimitivePromptProps = {
    * Handler called when the close button is clicked. If not provided, then the close button is hidden.
    */
   onDismiss?: () => void;
-  id?: string;
-  className?: string;
+  /**
+   * Test ID for testing tools
+   */
   'data-testid'?: string;
-  children: ReactNode;
 };
 
 /**

package/src/prompt/index.ts

@@ -5,5 +5,10 @@
 export type { InlinePromptProps } from './InlinePrompt';
 export { InlinePrompt } from './InlinePrompt';
 
+// ActionPrompt
 export type { ActionPromptProps } from './ActionPrompt';
 export { ActionPrompt } from './ActionPrompt';
+
+// InfoPrompt
+export type { InfoPromptProps, InfoPromptAction, InfoPromptMedia } from './InfoPrompt';
+export { InfoPrompt } from './InfoPrompt';

package/src/radioOption/RadioOption.tsx

@@ -3,7 +3,8 @@ import RadioButton from '../common/RadioButton';
 import { RadioButtonProps } from '../common/RadioButton/RadioButton';
 
 export interface RadioOptionProps<T extends string | number = string>
-  extends Required<Pick<RadioButtonProps<T>, 'id' | 'name' | 'onChange'>>,
+  extends
+    Required<Pick<RadioButtonProps<T>, 'id' | 'name' | 'onChange'>>,
     Omit<RadioButtonProps<T>, 'readOnly' | 'id' | 'name' | 'onChange'> {
   'aria-label'?: string;
   media?: React.ReactNode;

package/src/sentimentSurface/SentimentSurface.css

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

package/src/sentimentSurface/SentimentSurface.less

@@ -178,12 +178,12 @@
     .np-theme-business--bright-green & {
       &-base {
         .sentiment-surface-tokens(
-                    #454745, #353635, #232423,  // content-primary (default, hover, active)
-                    #454745, #353635, #232423,  // interactive-primary
-                    #F1F1ED, #E7E7E1, #DFDED5,  // interactive-secondary
-                    #E4E4DC, #DCDCD2, #D3D2C6,  // interactive-secondary-neutral
-                    #F1F1ED, #E7E7E1, #DFDED5,  // interactive-control
-                    #F1F1ED, #E7E7E1, #DFDED5   // background-surface
+                    #454745, #353635, #232423,                                            // content-primary (default, hover, active)
+                    #454745, #353635, #232423,                                            // interactive-primary
+                    rgba(62, 59, 7, 0.07), rgba(62, 59, 7, 0.12), rgba(62, 59, 7, 0.17),  // interactive-secondary
+                    rgba(62, 59, 7, 0.07), rgba(62, 59, 7, 0.12), rgba(62, 59, 7, 0.17),  // interactive-secondary-neutral
+                    #F1F1ED, #E7E7E1, #DFDED5,                                            // interactive-control
+                    rgba(62, 59, 7, 0.07), rgba(62, 59, 7, 0.12), rgba(62, 59, 7, 0.17)  // background-surface
                 );
       }
       &-elevated {
@@ -191,7 +191,7 @@
                     #F1F1ED, #E7E7E1, #DFDED5,  // content-primary
                     #F1F1ED, #E7E7E1, #DFDED5,  // interactive-primary
                     #454745, #353635, #232423,  // interactive-secondary
-                    #5A5C5A, #6D6F6D, #727472,  // interactive-secondary-neutral
+                    #585958, #6A6C6A, #7D7E7D,  // interactive-secondary-neutral
                     #454745, #353635, #232423,  // interactive-control
                     #454745, #353635, #232423   // background-surface
                 );
@@ -205,12 +205,12 @@
     .np-theme-platform--forest-green & {
       &-base {
         .sentiment-surface-tokens(
-                    #F1F1ED, #E7E7E1, #DFDED5,  // content-primary
-                    #F1F1ED, #E7E7E1, #DFDED5,  // interactive-primary
-                    #2A2C29, #414441, #595B58,  // interactive-secondary
-                    #424441, #4C4E4B, #565955,  // interactive-secondary-neutral
-                    #2A2C29, #414441, #595B58,  // interactive-control
-                    #2A2C29, #414441, #595B58   // background-surface
+                    #F1F1ED, #E7E7E1, #DFDED5,                                                       // content-primary
+                    #F1F1ED, #E7E7E1, #DFDED5,                                                       // interactive-primary
+                    rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.30),  // interactive-secondary
+                    rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.30),  // interactive-secondary-neutral
+                    #2A2C29, #414441, #595B58,                                                       // interactive-control
+                    rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.30)   // background-surface
                 );
       }
       &-elevated {

package/src/sentimentSurface/SentimentSurface.story.tsx

@@ -31,7 +31,7 @@ const withComponentGrid = (Story: () => JSX.Element) => (
  */
 const meta: Meta<typeof SentimentSurface> = {
   component: SentimentSurface,
-  title: 'Foundations/SentimentSurface',
+  title: 'Content/SentimentSurface',
   argTypes: {
     sentiment: {
       control: 'select',