@transferwise/components 46.165.5 → 46.167.0

package/src/Prompt/CriticalBanner/_stories/CriticalBanner.docs.mdx

@@ -0,0 +1,122 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks';
+
+<Meta title="Prompts/CriticalBanner/Developer Guide" tags={['new']} />
+
+# Developer Guide
+
+**Note:** Any usages of `Layout`, `Flow` or `HashRouterFlow` rely on the `global-critical-banner` feature flag being enabled. Whilst this flag is currently disabled in production, it's recommended to test with this flag enabled in staging, to ensure the critical banner behaves as expected for your users.
+
+Typically `CriticalBanner` should be used in one of three ways. Pick the one that matches the page or flow you're building and avoid using CriticalBanner as a standalone component.
+
+- `Layout` via `@transferwise/navigation-ui` - Fetched automatically from navigation-service (for non-flow layouts)
+- `Flow` / `HashRouterFlow` via `@transferwise/flow` - Fetched automatically from navigation-service (for flows)
+- `FlowNavigation` via `@transferwise/components` - Passed in by you through the `banner` prop (for custom solutions)
+
+If your page uses `Layout`, `Flow` or `HashRouterFlow`, you don't need to render `CriticalBanner` yourself. These components fetch the banner, cache it and render it for you automatically.
+
+## Layout from @transferwise/navigation-ui
+
+`Layout` has no banner prop. It fetches the critical banner from navigation-service on the client and renders it above the page content.
+
+Requirements:
+
+- `@transferwise/navigation-ui` `4.46.0` or later
+- The page must use the composable layout, and `global-critical-banner` feature flags in navigation-service control this. The legacy layout doesn't render the banner.
+
+<Source
+  code={`import { Layout, fetchNavigationData, type NavigationData } from '@transferwise/navigation-ui';
+
+// Optional: fetch initial navigation data server side, so the banner cache is scoped correctly.
+export const getServerSideProps = async () => {
+    const navigationData = await fetchNavigationData({
+      httpClient,
+      navigationServiceUrl: process.env.NAVIGATION_SERVICE_URL,
+    });
+
+    return { props: { navigationData } };
+};
+
+const Page = ({ navigationData }: { navigationData: NavigationData }) => (
+    <Layout navigationData={navigationData} onMixpanelEvent={trackEvent}>
+      { /* Page content */ }
+    </Layout>
+);
+`}
+  language="typescript"
+  dark
+/>
+
+`Layout` also handles:
+
+- saving the collapsed or expanded state when the user toggles the banner
+- caching the banner for the session, so the entry animation only plays for new or changed banners
+- sending Mixpanel events for toggles and action clicks through `onMixpanelEvent`
+
+
+## Flow / HashRouterFlow from @transferwise/flow
+
+`Flow` and `HashRouterFlow`, from `@transferwise/flow` render `FlowNavigationWrapper` from `@transferwise/navigation-ui`. It fetches, caches and renders the critical banner the same way `Layout` does. You don't need to pass a banner, but do require `@transferwise/navigation-ui` as a dependency.
+
+Requirements:
+
+- `@transferwise/flow` `13.0.0` or later
+- `@transferwise/navigation-ui` `4.51.0` or later, which is a required peer dependency
+
+You can pass two optional properties in the `navigation` options:
+
+- `navigationData`: initial navigation data, usually fetched server side, so the banner cache is scoped correctly. If you leave it out, the banner is fetched on the client.
+- `onMixpanelEvent`: called when the user toggles the banner or clicks its action.
+
+<Source
+  code={`import { HashRouterFlow } from '@transferwise/flow';
+import type { NavigationData } from '@transferwise/navigation-ui';
+
+const SendFlow = ({ navigationData }: { navigationData?: NavigationData }) => (
+    <HashRouterFlow
+      steps={steps}
+      trackEvent={trackEvent}
+      navigation={{
+      profile,
+      onClose,
+      navigationData,
+      onMixpanelEvent: trackEvent,
+      }}
+    />
+);
+`}
+  language="typescript"
+  dark
+/>
+
+## FlowNavigation from @transferwise/components
+
+`FlowNavigation` from `@transferwise/components` renders a critical banner above the navigation when you pass a `banner` prop. Use this if you build your flow with `FlowNavigation` directly. You're responsible for getting the banner data.
+
+`banner` accepts either:
+
+- `CriticalBannerProps`, the same props `CriticalBanner` takes
+- the legacy `CriticalBannerData` shape returned by navigation-service. `FlowNavigation` maps it to `CriticalBannerProps` for you.
+
+<Source
+  code={`import { FlowNavigation, type CriticalBannerProps } from '@transferwise/components';
+
+    const banner: CriticalBannerProps = {
+      sentiment: 'negative',
+      title: 'Action required',
+      description: 'Please verify your identity to continue with this transfer.',
+      action: { label: 'Verify now', onClick: handleVerify },
+    };
+
+    <FlowNavigation
+      banner={banner}
+      steps={steps}
+      activeStep={activeStep}
+      avatar={avatar}
+      onClose={onClose}
+    />;
+`}
+  language="typescript"
+  dark
+/>
+
+Requires `@transferwise/components` `46.162.0` or later. Support for the legacy `CriticalBannerData` shape was added in `46.164.0`.

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

@@ -14,8 +14,6 @@ import { CriticalBanner, type CriticalBannerProps } from '..';
  * **Design guidance**: <a href="https://docs.wise.design/components/critical-banner" target="_blank">wise.design/components/critical-banner</a>
  *
  * Can be controlled or uncontrolled. When `onToggle` is provided, the consumer manages the expanded state via `expanded` and the banner calls `onToggle` when the user clicks the chevron. When `onToggle` is not provided, the banner manages its own expanded state internally and toggles it when the user clicks the chevron.
- *
- * **Using with FlowNavigation**: See the [FlowNavigation Critical Banner Guide](?path=/docs/navigation-flownavigation-critical-banner-guide--docs) for integration patterns and data mapping examples.
  */
 const meta = {
   component: CriticalBanner,

package/src/Prompt/PrimitivePrompt/PrimitivePrompt.css

@@ -21,7 +21,8 @@
 }
 .wds-prompt__media-wrapper {
   align-self: flex-start;
-  padding-block-start: calc(var(--size-4) - 1px);
+  align-content: center;
+  min-block-size: calc(var(--wds-line-height-body) * var(--wds-font-size-body));
 }
 .wds-prompt__media-wrapper .tw-icon-tags,
 .wds-prompt__media-wrapper .tw-icon-confetti {

package/src/Prompt/PrimitivePrompt/PrimitivePrompt.less

@@ -22,7 +22,8 @@
 
   &__media-wrapper {
     align-self: flex-start;
-    padding-top: calc(var(--size-4) - 1px);
+    align-content: center;
+    min-height: calc(var(--wds-line-height-body) * var(--wds-font-size-body));
 
     .tw-icon-tags,
     .tw-icon-confetti {

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

@@ -564,7 +564,7 @@ export const ExposedTokens: Story = {
             }}
           >
             <h4
-              className="d-block m-b-2 text-capitalize np-text-title-body"
+              className="d-block m-b-2 text-capitalize wds-text-title-body"
               style={{
                 color: 'inherit',
               }}

package/src/Snackbar/Snackbar.css

@@ -15,7 +15,7 @@
   align-items: center;
   justify-content: space-between;
   text-align: start;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   margin-block: 0;
   margin-inline: var(--size-16);
   padding-block: var(--size-8);

package/src/Snackbar/Snackbar.less

@@ -21,7 +21,7 @@
     justify-content: space-between;
     text-align: left;
 
-    font-size: var(--font-size-14);
+    font-size: var(--wds-font-size-body);
     margin: 0 var(--size-16);
     padding: var(--size-8) var(--size-16);
     width: calc(100% - var(--size-32));

package/src/Stepper/Stepper.tsx

@@ -61,7 +61,7 @@ const Stepper = ({ steps, activeStep = 0, className, testId }: StepperProps) =>
         className="btn-unstyled tw-stepper__step-label"
         onClick={() => clickable && step.onClick?.()}
       >
-        <small>{step.label}</small>
+        <span className="wds-text-body-default">{step.label}</span>
       </button>
     ) : (
       <span className="tw-stepper__step-label">{step.label}</span>
@@ -73,7 +73,9 @@ const Stepper = ({ steps, activeStep = 0, className, testId }: StepperProps) =>
         className={clsx(
           'hidden-xs',
           'tw-stepper__step',
-          active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default',
+          active
+            ? 'np-text-body-default-bold wds-text-body-default-bold tw-stepper__step--active'
+            : 'np-text-body-default wds-text-body-default',
           clickable && 'tw-stepper__step--clickable',
           step.hoverLabel && 'tw-stepper__step--has-tooltip',
         )}

package/src/Table/Header/TableHeader.tsx

@@ -50,7 +50,7 @@ const TableHeader = ({
     // If headers are empty, we still should render empty headers to keep visual consistency
     return (
       <div
-        className="np-table-header-content np-text-body-default-bold"
+        className="np-table-header-content np-text-body-default-bold wds-text-body-default-bold"
         data-testid="np-table-empty-header"
       >
         &nbsp;

package/src/Table/StatusText/TableStatusText.test.tsx

@@ -13,7 +13,10 @@ describe('TableStatusText Component', () => {
   it('renders the text and applies the default class', () => {
     renderComponent();
     expect(screen.getByText('Status Text')).toBeInTheDocument();
-    expect(screen.getByText('Status Text')).toHaveClass('np-text-body-default');
+    expect(screen.getByText('Status Text')).toHaveClass(
+      'np-text-body-default',
+      'wds-text-body-default',
+    );
   });
 
   it('applies the custom class name', () => {
@@ -23,12 +26,18 @@ describe('TableStatusText Component', () => {
 
   it('applies the default typography class when typography is not provided', () => {
     renderComponent();
-    expect(screen.getByText('Status Text')).toHaveClass('np-text-body-default');
+    expect(screen.getByText('Status Text')).toHaveClass(
+      'np-text-body-default',
+      'wds-text-body-default',
+    );
   });
 
   it('applies the typography class when typography equals `default-bold`', () => {
     renderComponent({ typography: 'default-bold' });
-    expect(screen.getByText('Status Text')).toHaveClass('np-text-body-default-bold');
+    expect(screen.getByText('Status Text')).toHaveClass(
+      'np-text-body-default-bold',
+      'wds-text-body-default-bold',
+    );
   });
 
   it('does not render any icon when status is not provided', () => {
@@ -39,14 +48,20 @@ describe('TableStatusText Component', () => {
 
   it('applies the typography and status classes, renders the error icon when status equals `error`', () => {
     renderComponent({ status: 'error' });
-    expect(screen.getByText('Status Text')).toHaveClass('np-text-body-default-bold');
+    expect(screen.getByText('Status Text')).toHaveClass(
+      'np-text-body-default-bold',
+      'wds-text-body-default-bold',
+    );
     expect(screen.getByText('Status Text')).toHaveClass('np-table-content--error');
     expect(screen.getByTestId('alert-icon')).toBeInTheDocument();
   });
 
   it('applies the typography and status classes, renders the success icon when status equals `success`', () => {
     renderComponent({ status: 'success' });
-    expect(screen.getByText('Status Text')).toHaveClass('np-text-body-default-bold');
+    expect(screen.getByText('Status Text')).toHaveClass(
+      'np-text-body-default-bold',
+      'wds-text-body-default-bold',
+    );
     expect(screen.getByText('Status Text')).toHaveClass('np-table-content--success');
     expect(screen.getByTestId('check-icon')).toBeInTheDocument();
   });

package/src/Table/Table.css

@@ -37,10 +37,16 @@
 }
 .np-table-inner-container {
   background-image: linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));
-  background-position: left center, right center, left center, right center;
+  background-position: left center,
+      right center,
+      left center,
+      right center;
   background-repeat: no-repeat;
   background-color: var(--color-contrast-overlay);
-  background-size: 15px 100%, 15px 100%, 15px 100%, 15px 100%;
+  background-size: 15px 100%,
+      15px 100%,
+      15px 100%,
+      15px 100%;
   background-attachment: local, local, scroll, scroll;
   overflow-x: auto;
   border-radius: 10px;
@@ -130,7 +136,9 @@
   padding-inline-end: 0;
 }
 .np-table-header.np-table-header--right > .np-text-body-default,
-.np-table-cell.np-table-cell--right > .np-text-body-default {
+.np-table-cell.np-table-cell--right > .np-text-body-default,
+.np-table-header.np-table-header--right > .wds-text-body-default,
+.np-table-cell.np-table-cell--right > .wds-text-body-default {
   text-align: end;
 }
 .np-table-header.np-table-header--right + .np-table-header:not(.np-table-header--right),
@@ -159,8 +167,8 @@
   padding-block-start: 5px;
   padding-block-end: 5px;
   white-space: nowrap;
-  line-height: var(--line-height-22);
-  letter-spacing: var(--letter-spacing-sm);
+  line-height: var(--wds-line-height-title-subsection);
+  letter-spacing: var(--wds-letter-spacing-title-subsection);
 }
 .np-table-header--error {
   color: var(--color-sentiment-negative);
@@ -180,7 +188,8 @@
 .np-table-cell--primary {
   min-inline-size: 200px;
 }
-.np-table-cell--currency .np-text-body-default {
+.np-table-cell--currency .np-text-body-default,
+.np-table-cell--currency .wds-text-body-default {
   white-space: nowrap;
 }
 .np-table-cell .tw-chevron {
@@ -193,7 +202,8 @@
   background-color: var(--color-background-neutral);
   padding: 0;
 }
-.np-table-cell .np-text-body-default-bold {
+.np-table-cell .np-text-body-default-bold,
+.np-table-cell .wds-text-body-default-bold {
   display: flex;
   align-items: center;
   color: var(--color-content-primary);
@@ -232,7 +242,7 @@
 .np-table-content-body {
   display: flex;
   flex-direction: column;
-  font-size: var(--font-size-12);
+  font-size: var(--wds-font-size-nav);
   color: var(--color-content-tertiary);
 }
 .np-table-content--reversed {

package/src/Table/Table.less

@@ -59,10 +59,18 @@
       linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)),
       linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)),
       linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));
-    background-position: left center, right center, left center, right center;
+    background-position:
+      left center,
+      right center,
+      left center,
+      right center;
     background-repeat: no-repeat;
     background-color: var(--color-contrast-overlay);
-    background-size: 15px 100%, 15px 100%, 15px 100%, 15px 100%;
+    background-size:
+      15px 100%,
+      15px 100%,
+      15px 100%,
+      15px 100%;
     background-attachment: local, local, scroll, scroll;
     overflow-x: auto;
     border-radius: @table-inner-border-radius;
@@ -188,7 +196,8 @@
 
   &-header.np-table-header--right,
   &-cell.np-table-cell--right {
-    > .np-text-body-default {
+    > .np-text-body-default,
+    > .wds-text-body-default {
       text-align: right;
     }
   }
@@ -222,8 +231,8 @@
       padding-top: 5px;
       padding-bottom: 5px;
       white-space: nowrap;
-      line-height: var(--line-height-22);
-      letter-spacing: var(--letter-spacing-sm);
+      line-height: var(--wds-line-height-title-subsection);
+      letter-spacing: var(--wds-letter-spacing-title-subsection);
     }
 
     &--error {
@@ -249,7 +258,8 @@
     }
 
     &--currency {
-      .np-text-body-default {
+      .np-text-body-default,
+      .wds-text-body-default {
         white-space: nowrap;
       }
     }
@@ -266,7 +276,8 @@
       padding: 0;
     }
 
-    .np-text-body-default-bold {
+    .np-text-body-default-bold,
+    .wds-text-body-default-bold {
       display: flex;
       align-items: center;
       color: var(--color-content-primary);
@@ -306,11 +317,11 @@
     &-media {
       flex-shrink: 0;
     }
-    
+
     &-body {
       display: flex;
       flex-direction: column;
-      font-size: var(--font-size-12);
+      font-size: var(--wds-font-size-nav);
       color: var(--color-content-tertiary);
     }
 

package/src/Tabs/Tab/Tab.tsx

@@ -49,11 +49,17 @@ const Tab = forwardRef(function Tab(
   return (
     <li
       ref={reference}
-      className={clsx('tabs__tab', selected ? 'np-text-body-large-bold' : 'np-text-body-large', {
-        'tabs__tab--selected': selected,
-        clickable: !disabled,
-        disabled,
-      })}
+      className={clsx(
+        'tabs__tab',
+        selected
+          ? 'np-text-body-large-bold wds-text-body-large-bold'
+          : 'np-text-body-large wds-text-body-large',
+        {
+          'tabs__tab--selected': selected,
+          clickable: !disabled,
+          disabled,
+        },
+      )}
       role="tab"
       id={id}
       aria-selected={selected ? 'true' : 'false'}

package/src/Tabs/Tabs.css

@@ -8,19 +8,19 @@
   padding: var(--size-8);
   margin-block-end: -2px;
   color: var(--color-content-primary);
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-body-bold);
   transition: color 0.15s ease-in-out;
 }
 .np-theme-personal .tabs__tab {
   color: var(--color-content-secondary);
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--wds-font-weight-body-regular);
 }
 .tabs__tab--selected {
   color: var(--color-content-accent);
 }
 .np-theme-personal .tabs__tab--selected {
   color: var(--color-interactive-primary);
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-body-bold);
 }
 .tabs__tab__content {
   border-radius: 2px;

package/src/Tabs/Tabs.less

@@ -16,12 +16,12 @@
     padding: var(--size-8);
     margin-bottom: -@line-thickness;
     color: var(--color-content-primary);
-    font-weight: var(--font-weight-semi-bold);
+    font-weight: var(--wds-font-weight-body-bold);
     transition: color @short-transition-duration @transition-timing-function;
 
     .np-theme-personal & {
       color: var(--color-content-secondary);
-      font-weight: var(--font-weight-regular);
+      font-weight: var(--wds-font-weight-body-regular);
     }
 
     &--selected {
@@ -29,7 +29,7 @@
 
       .np-theme-personal & {
         color: var(--color-interactive-primary);
-        font-weight: var(--font-weight-semi-bold);
+        font-weight: var(--wds-font-weight-body-bold);
       }
     }
 

package/src/Tag/Tag.css

@@ -11,7 +11,7 @@
 }
 .wds-tag--small {
   border-radius: 6px;
-  font-size: var(--font-size-12);
+  font-size: var(--wds-font-size-nav);
   padding-block: 1px;
   padding-inline: var(--size-4);
 }

package/src/Tag/Tag.less

@@ -10,7 +10,7 @@
 
   &--small {
     border-radius: 6px;
-    font-size: var(--font-size-12);
+    font-size: var(--wds-font-size-nav);
     padding-block: 1px;
     padding-inline: var(--size-4);
   }

package/src/Tag/Tag.tsx

@@ -58,7 +58,7 @@ const Tag = forwardRef<HTMLSpanElement, TagProps>(function Tag(
           'wds-tag',
           `wds-tag--${size}`,
           `wds-tag--${sentiment}`,
-          'np-text-body-default-bold',
+          'np-text-body-default-bold wds-text-body-default-bold',
           className,
         )}
       >

package/src/Tag/_stories/Tag.story.tsx

@@ -29,7 +29,7 @@ const PHOTO = '../card-payment-bakery.webp';
 
 const Label = ({ children }: { children: ReactNode }) => (
   <span
-    className="np-text-body-default"
+    className="wds-text-body-default"
     style={{
       color: 'var(--color-content-secondary)',
       textTransform: 'capitalize',

package/src/Tile/Tile.css

@@ -22,7 +22,8 @@
 .np-theme-personal .np-tile.decision:active {
   background-color: var(--color-background-neutral-active);
 }
-.np-theme-personal .np-tile.decision .np-text-body-default {
+.np-theme-personal .np-tile.decision .np-text-body-default,
+.np-theme-personal .np-tile.decision .wds-text-body-default {
   color: var(--color-content-secondary);
 }
 .np-tile.np-decision__tile--fixed-width {
@@ -50,7 +51,7 @@
 }
 .np-tile__description {
   color: var(--color-content-secondary);
-  font-weight: var(--font-weight-regular);
-  line-height: var(--line-height-body);
+  font-weight: var(--wds-font-weight-body-regular);
+  line-height: var(--wds-line-height-body);
   margin-block-start: var(--size-12);
 }

package/src/Tile/Tile.less

@@ -28,7 +28,8 @@
         background-color: var(--color-background-neutral-active);
       }
 
-      .np-text-body-default {
+      .np-text-body-default,
+      .wds-text-body-default {
         color: var(--color-content-secondary);
       }
     }
@@ -71,7 +72,7 @@
 
 .np-tile__description {
   color: var(--color-content-secondary);
-  font-weight: var(--font-weight-regular);
-  line-height: var(--line-height-body);
+  font-weight: var(--wds-font-weight-body-regular);
+  line-height: var(--wds-line-height-body);
   margin-top: var(--size-12);
 }

package/src/Title/Title.test.tsx

@@ -9,7 +9,20 @@ describe('Title', () => {
     const copy = screen.getByText('Test');
     expect(copy).toBeInTheDocument();
     expect(copy.tagName).toBe('H5');
-    expect(copy).toHaveClass(`np-text-${Typography.TITLE_GROUP}`);
+    expect(copy).toHaveClass(
+      `np-text-${Typography.TITLE_GROUP}`,
+      `wds-text-${Typography.TITLE_GROUP}`,
+    );
+  });
+
+  it('renders both typography classes for the given type', () => {
+    render(<Title type={Typography.TITLE_SCREEN}>Test</Title>);
+    const copy = screen.getByText('Test');
+    expect(copy.tagName).toBe('H1');
+    expect(copy).toHaveClass(
+      `np-text-${Typography.TITLE_SCREEN}`,
+      `wds-text-${Typography.TITLE_SCREEN}`,
+    );
   });
 
   it('enforces tag via `as` prop', () => {
@@ -17,7 +30,10 @@ describe('Title', () => {
     const copy = screen.getByText('Test');
     expect(copy).toBeInTheDocument();
     expect(copy.tagName).toBe('SPAN');
-    expect(copy).toHaveClass(`np-text-${Typography.TITLE_GROUP}`);
+    expect(copy).toHaveClass(
+      `np-text-${Typography.TITLE_GROUP}`,
+      `wds-text-${Typography.TITLE_GROUP}`,
+    );
   });
 
   it('supports native HTML attrs', () => {
@@ -39,6 +55,9 @@ describe('Title', () => {
     const copy = screen.getByText('Test');
     expect(copy).toBeInTheDocument();
     expect(copy.tagName).toBe('H5');
-    expect(copy).toHaveClass(`np-text-${Typography.TITLE_GROUP}`);
+    expect(copy).toHaveClass(
+      `np-text-${Typography.TITLE_GROUP}`,
+      `wds-text-${Typography.TITLE_GROUP}`,
+    );
   });
 });

package/src/Title/Title.tsx

@@ -39,7 +39,7 @@ const Title = React.forwardRef<
       <HeaderTag
         ref={ref as React.Ref<any>}
         {...props}
-        className={clsx(`np-text-${type}`, className)}
+        className={clsx(`np-text-${type}`, `wds-text-${type}`, className)}
       />
     );
   }
@@ -48,7 +48,7 @@ const Title = React.forwardRef<
     <HeaderTag
       ref={ref as React.Ref<any>}
       {...props}
-      className={clsx(`np-text-${DEFAULT_TYPE}`, className)}
+      className={clsx(`np-text-${DEFAULT_TYPE}`, `wds-text-${DEFAULT_TYPE}`, className)}
     />
   );
 });

package/src/Typeahead/Typeahead.css

@@ -149,11 +149,13 @@
 .np-theme-personal .typeahead .np-chip {
   margin-block-start: var(--size-8);
 }
-.np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold {
+.np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold,
+.np-theme-personal .typeahead .np-chip--removable .wds-text-body-default-bold {
   padding-inline-end: var(--size-16);
 }
 @media (max-width: 320px) {
-  .np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold {
+  .np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold,
+  .np-theme-personal .typeahead .np-chip--removable .wds-text-body-default-bold {
     padding-inline-end: var(--size-32);
   }
 }

package/src/Typeahead/Typeahead.less

@@ -209,7 +209,8 @@
       margin-top: var(--size-8);
     }
     .np-chip--removable {
-      .np-text-body-default-bold {
+      .np-text-body-default-bold,
+      .wds-text-body-default-bold {
         padding-right: var(--size-16);
         @media (--screen-400-zoom) {
           padding-right: var(--size-32);