@transferwise/components 0.0.0-experimental-e76a002 → 0.0.0-experimental-a39eaa6

package/build/types/FlowNavigation/FlowNavigation.d.ts

@@ -8,24 +8,17 @@ export interface FlowNavigationProps {
     /** @default false */
     done?: boolean;
     /** Called when the close button is clicked. If not provided the close button won't show */
-    onClose?: () => void;
+    onClose?: (() => void) | React.MouseEventHandler<HTMLButtonElement>;
     /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */
     onGoBack?: () => void;
     /** Steps to be displayed in stepper. If not provided, the stepper won't show. */
     steps?: readonly Step[];
-    /**
-     * When true, renders in composable mode using a fluid Container.
-     * This allows the FlowNavigation to be used within custom layout containers.
-     * @default false
-     */
-    composable?: boolean;
     /**
      * Controls whether the bottom border is displayed.
-     * Only applies to the composable variant. Non-composable variant always uses the done state.
      * @default true
      */
     showBottomBorder?: boolean;
 }
-declare const FlowNavigation: ({ activeStep, avatar, logo, done, onClose, onGoBack, steps, composable, showBottomBorder, }: FlowNavigationProps) => import("react").JSX.Element;
+declare const FlowNavigation: ({ activeStep, avatar, logo, done, onClose, onGoBack, steps, showBottomBorder, }: FlowNavigationProps) => import("react").JSX.Element;
 export default FlowNavigation;
 //# sourceMappingURL=FlowNavigation.d.ts.map

package/build/types/FlowNavigation/FlowNavigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FlowNavigation.d.ts","sourceRoot":"","sources":["../../../src/FlowNavigation/FlowNavigation.tsx"],"names":[],"mappings":"AAQA,OAAgB,EAAE,KAAK,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAWxD,MAAM,WAAW,mBAAmB;IAClC,iBAAiB;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,wBAAwB;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,qBAAqB;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2FAA2F;IAC3F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sIAAsI;IACtI,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iFAAiF;IACjF,KAAK,CAAC,EAAE,SAAS,IAAI,EAAE,CAAC;IACxB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,cAAc,GAAI,6FAUrB,mBAAmB,gCAsFrB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"FlowNavigation.d.ts","sourceRoot":"","sources":["../../../src/FlowNavigation/FlowNavigation.tsx"],"names":[],"mappings":"AAQA,OAAgB,EAAE,KAAK,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAWxD,MAAM,WAAW,mBAAmB;IAClC,iBAAiB;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,wBAAwB;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,qBAAqB;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2FAA2F;IAC3F,OAAO,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACpE,sIAAsI;IACtI,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iFAAiF;IACjF,KAAK,CAAC,EAAE,SAAS,IAAI,EAAE,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,cAAc,GAAI,iFASrB,mBAAmB,gCAyErB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/build/types/_deprecated/OverlayHeader/OverlayHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayHeader.d.ts","sourceRoot":"","sources":["../../../../src/_deprecated/OverlayHeader/OverlayHeader.tsx"],"names":[],"mappings":"AAOA;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,gBAAgB;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,gDAAgD;IAChD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACtD;AAID;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,IAAkB,EAAE,EAAE,kBAAkB,+BAiBhG"}
+{"version":3,"file":"OverlayHeader.d.ts","sourceRoot":"","sources":["../../../../src/_deprecated/OverlayHeader/OverlayHeader.tsx"],"names":[],"mappings":"AAGA;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,gBAAgB;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,gDAAgD;IAChD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACtD;AAID;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,IAAkB,EAAE,EAAE,kBAAkB,+BAEhG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-e76a002",
+  "version": "0.0.0-experimental-a39eaa6",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/Container/Container.css

@@ -36,8 +36,3 @@
 .wds-container--fluid {
   max-width: var(--wds-container-width-fluid);
 }
-.wds-container--align-center {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}

package/src/Container/Container.less

@@ -36,10 +36,4 @@
   &--fluid {
     max-width: var(--wds-container-width-fluid);
   }
-
-  &--align-center {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
 }

package/src/Container/Container.test.tsx

@@ -34,21 +34,4 @@ describe('Container', () => {
     const el = screen.getByTestId('my-container');
     expect(el).toHaveAttribute('id', 'test-id');
   });
-
-  it('does not apply any alignment class by default (none)', () => {
-    renderContainer();
-    expect(screen.getByText(childText)).not.toHaveClass('wds-container--align-center');
-  });
-
-  it('applies the center alignment class', () => {
-    renderContainer({ alignContent: 'center' });
-    expect(screen.getByText(childText)).toHaveClass('wds-container--align-center');
-  });
-
-  it('does not apply alignment class when alignContent is none', () => {
-    renderContainer({ alignContent: 'none' });
-    const el = screen.getByText(childText);
-    expect(el).not.toHaveClass('wds-container--align-none');
-    expect(el).not.toHaveClass('wds-container--align-center');
-  });
 });

package/src/Container/Container.tsx

@@ -6,10 +6,6 @@ import { CommonProps } from '../common';
 type ContainerOwnProps<T extends ElementType> = CommonProps & {
   /** Controls the maximum width: `fluid` (100%), `standard` (1160px), `narrow` (840px), `compact` (600px). @default 'standard' */
   size?: 'fluid' | 'standard' | 'narrow' | 'compact';
-  /** Controls content alignment within the container.
-   * `none` applies no positioning, `center` centers content both vertically and horizontally.
-   * @default 'none' */
-  alignContent?: 'none' | 'center';
   as?: T;
 };
 
@@ -25,7 +21,6 @@ export type ContainerProps<T extends ElementType = 'div'> = PropsWithChildren<
  */
 const Container = <T extends ElementType = 'div'>({
   size = 'standard',
-  alignContent = 'none',
   as,
   className,
   children,
@@ -33,15 +28,7 @@ const Container = <T extends ElementType = 'div'>({
 }: ContainerProps<T>) => {
   const Element = as ?? 'div';
   return (
-    <Element
-      {...otherProps}
-      className={clsx(
-        'wds-container',
-        `wds-container--${size}`,
-        alignContent !== 'none' && `wds-container--align-${alignContent}`,
-        className,
-      )}
-    >
+    <Element {...otherProps} className={clsx('wds-container', `wds-container--${size}`, className)}>
       {children}
     </Element>
   );

package/src/Container/_stories/Container.story.tsx

@@ -17,16 +17,11 @@ export default {
       control: 'radio',
       options: ['fluid', 'standard', 'narrow', 'compact'],
     },
-    alignContent: {
-      control: 'radio',
-      options: ['none', 'center'],
-    },
     as: { control: 'text' },
     className: { table: { category: 'Common' } },
   },
   args: {
     size: 'standard',
-    alignContent: 'none',
     as: undefined,
     className: undefined,
   },
@@ -144,42 +139,3 @@ export const Size: Story = {
     },
   },
 };
-
-/**
- * Use `alignContent` to control how children are positioned inside the container. <br />
- * `none` (default) applies no positioning — content flows naturally. `center` centers content both vertically and horizontally.
- */
-export const AlignContent: Story = {
-  argTypes: {
-    size: { table: { disable: true } },
-    alignContent: { table: { disable: true } },
-    as: { table: { disable: true } },
-    className: { table: { disable: true } },
-  },
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
-      {(['none', 'center'] as const).map((alignContent) => (
-        <div
-          key={alignContent}
-          style={{ background: 'var(--color-background-neutral)', paddingBlock: 'var(--size-16)' }}
-        >
-          <Container size="narrow" alignContent={alignContent} style={{ minHeight: '120px' }}>
-            <div style={{ background: 'white', borderRadius: '16px', padding: 'var(--size-16)' }}>
-              <Title type="title-section">alignContent=&quot;{alignContent}&quot;</Title>
-              <Body>Content inside the container.</Body>
-            </div>
-          </Container>
-        </div>
-      ))}
-    </div>
-  ),
-  parameters: {
-    docs: {
-      source: {
-        code: `<Container alignContent="none">No positioning (default)</Container>
-
-<Container alignContent="center">Centered content</Container>`,
-      },
-    },
-  },
-};

package/src/FlowNavigation/FlowNavigation.css

@@ -4,7 +4,12 @@
   justify-content: center;
   width: 100%;
   box-sizing: border-box;
-  min-height: 96px;
+  min-height: 80px;
+}
+@media (min-width: 320.02px) {
+  .np-flow-navigation {
+    min-height: 128px;
+  }
 }
 .np-flow-navigation--border-bottom {
   border-bottom: 1px solid rgba(0,0,0,0.10196);
@@ -13,7 +18,7 @@
 .np-flow-navigation__content {
   width: 100%;
   min-width: 320px;
-  max-width: calc(1160px - 36px);
+  max-width: none;
 }
 .np-flow-navigation__stepper {
   padding-bottom: 0 !important;
@@ -72,17 +77,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .np-flow-navigation--hidden {
   visibility: hidden;
 }
-.np-flow-navigation--composable {
-  min-height: 80px;
-}
-@media (min-width: 320.02px) {
-  .np-flow-navigation--composable {
-    min-height: 128px;
-  }
-}
-.np-flow-navigation--composable .np-flow-navigation__content {
-  max-width: none;
-}
 .np-theme-personal--forest-green .np-flow-navigation .np-flow-header__left path,
 .np-theme-personal--bright-green .np-flow-navigation .np-flow-header__left path,
 .np-theme-personal--dark .np-flow-navigation .np-flow-header__left path {

package/src/FlowNavigation/FlowNavigation.less

@@ -9,7 +9,11 @@
   box-sizing: border-box;
 
   // This is the natural height of FlowNavigation when the Avatar is displayed.
-  min-height: 96px;
+  min-height: 80px;
+
+  @media (--screen-xs) {
+    min-height: 128px;
+  }
 
   &--border-bottom {
     border-bottom: 1px solid var(--color-border-neutral);
@@ -18,7 +22,7 @@
   &__content {
     width: 100%;
     min-width: 320px;
-    max-width: calc(@screen-lg-min - 36px);
+    max-width: none;
   }
 
   &__stepper {
@@ -69,19 +73,6 @@
     visibility: hidden;
   }
 
-  &--composable {
-    min-height: 80px;
-
-    @media (--screen-xs) {
-      min-height: 128px;
-    }
-
-    .np-flow-navigation__content {
-      // Remove max-width constraint for fluid layout
-      max-width: none;
-    }
-  }
-
   .np-theme-personal--forest-green &,
   .np-theme-personal--bright-green &,
   .np-theme-personal--dark & {

package/src/FlowNavigation/FlowNavigation.tsx

@@ -26,20 +26,13 @@ export interface FlowNavigationProps {
   /** @default false */
   done?: boolean;
   /** Called when the close button is clicked. If not provided the close button won't show */
-  onClose?: () => void;
+  onClose?: (() => void) | React.MouseEventHandler<HTMLButtonElement>;
   /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */
   onGoBack?: () => void;
   /** Steps to be displayed in stepper. If not provided, the stepper won't show. */
   steps?: readonly Step[];
-  /**
-   * When true, renders in composable mode using a fluid Container.
-   * This allows the FlowNavigation to be used within custom layout containers.
-   * @default false
-   */
-  composable?: boolean;
   /**
    * Controls whether the bottom border is displayed.
-   * Only applies to the composable variant. Non-composable variant always uses the done state.
    * @default true
    */
   showBottomBorder?: boolean;
@@ -53,7 +46,6 @@ const FlowNavigation = ({
   onClose,
   onGoBack,
   steps,
-  composable = false,
   showBottomBorder = true,
 }: FlowNavigationProps) => {
   const intl = useIntl();
@@ -69,7 +61,6 @@ const FlowNavigation = ({
     <FlowHeader
       className={clsx(
         'np-flow-navigation__content',
-        !composable && 'p-x-3',
         screenSm == null
           ? 'np-flow-navigation--hidden'
           : {
@@ -119,27 +110,15 @@ const FlowNavigation = ({
     />
   );
 
-  if (composable) {
-    return (
-      <Container
-        size="fluid"
-        className={clsx('np-flow-navigation np-flow-navigation--composable', {
-          'np-flow-navigation--border-bottom': showBottomBorder,
-        })}
-      >
-        {flowHeaderContent}
-      </Container>
-    );
-  }
-
   return (
-    <div
-      className={clsx('np-flow-navigation p-y-3', {
-        'np-flow-navigation--border-bottom': !done,
+    <Container
+      size="fluid"
+      className={clsx('np-flow-navigation', {
+        'np-flow-navigation--border-bottom': showBottomBorder,
       })}
     >
       {flowHeaderContent}
-    </div>
+    </Container>
   );
 };
 

package/src/FlowNavigation/_stories/FlowNavigation.story.tsx

@@ -323,7 +323,10 @@ export const SendFlow: Story = {
         </Container>
 
         <Sticky>
-          <Container size="narrow" alignContent="center" className="p-y-3">
+          <Container
+            size="narrow"
+            className="d-flex justify-content-center align-items-center p-y-3"
+          >
             <Button
               v2
               disabled={activeStep === 3}
@@ -381,89 +384,6 @@ export const WithOverlayHeaderComparison: Story = {
   },
 };
 
-export const ComposableVariant: Story = {
-  args: {
-    profileType: ProfileType.PERSONAL,
-    showCloseButton: true,
-    showMobileBackButton: true,
-    done: false,
-    avatarURL: '../tapestry-01.png',
-  },
-  parameters: {
-    padding: '0',
-    chromatic: {
-      viewports,
-    },
-  },
-  render: (args) => {
-    const [activeStep, setActiveStep] = useState(2);
-    const steps = [
-      {
-        label: 'Recipient',
-        onClick: () => setActiveStep(0),
-      },
-      {
-        label: 'Amount',
-        hoverLabel: (
-          <>
-            You send 100 GBP <br />
-            You get 99.39 GBP{' '}
-          </>
-        ),
-        ...(activeStep > 1 && { onClick: () => setActiveStep(1) }),
-      },
-      {
-        label: 'Review',
-        ...(activeStep > 2 && { onClick: () => setActiveStep(2) }),
-      },
-      {
-        label: 'Pay',
-        ...(activeStep > 3 && { onClick: () => setActiveStep(3) }),
-      },
-    ];
-    return (
-      <>
-        <FlowNavigation
-          composable
-          avatar={<AvatarView profileType={args.profileType} />}
-          logo={<Logo />}
-          activeStep={activeStep}
-          steps={steps}
-          onClose={args.showCloseButton ? () => alert('close') : undefined}
-          onGoBack={
-            args.showMobileBackButton
-              ? () => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)
-              : undefined
-          }
-        />
-        <Container size="narrow">
-          <Body className="m-a-3">
-            <Display type={Typography.DISPLAY_SMALL}>{steps[activeStep].label} Step</Display>
-            <br />
-            {lorem10}
-          </Body>
-        </Container>
-
-        <Sticky>
-          <Container
-            size="narrow"
-            className="d-flex justify-content-center align-items-center p-y-3"
-          >
-            <Button
-              v2
-              disabled={activeStep === 3}
-              block
-              onClick={() => setActiveStep(activeStep + 1)}
-            >
-              Continue
-            </Button>
-          </Container>
-        </Sticky>
-      </>
-    );
-  },
-};
-
 export const WithoutStepper: Story = {
   args: {
     profileType: ProfileType.PERSONAL,
@@ -572,7 +492,6 @@ export const BorderControl: Story = {
 
         {/* Composable: showBottomBorder=true, done=false - SHOWS BORDER */}
         <FlowNavigation
-          composable
           avatar={<AvatarView profileType={args.profileType} />}
           logo={<Logo />}
           activeStep={activeStep}
@@ -588,7 +507,6 @@ export const BorderControl: Story = {
 
         {/* Composable: showBottomBorder=true, done=true - SHOWS BORDER */}
         <FlowNavigation
-          composable
           avatar={<AvatarView profileType={args.profileType} />}
           logo={<Logo />}
           activeStep={activeStep}
@@ -604,7 +522,6 @@ export const BorderControl: Story = {
 
         {/* Composable: showBottomBorder=false, done=false - HIDES BORDER */}
         <FlowNavigation
-          composable
           avatar={<AvatarView profileType={args.profileType} />}
           logo={<Logo />}
           activeStep={activeStep}

package/src/Loader/_stories/Loader.story.tsx

@@ -1,16 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { useState } from 'react';
 import { createSandboxStory } from '../../../.storybook/components/sandbox/SandboxEditor';
 
 import Loader from '..';
-import Button from '../../Button';
-import Container from '../../Container';
-import FlowNavigation from '../../FlowNavigation';
-import Logo from '../../Logo';
-import Sticky from '../../Sticky';
-import Title from '../../Title';
-import Body from '../../Body';
-import { lorem10 } from '../../test-utils';
 
 export default {
   component: Loader,
@@ -40,42 +31,3 @@ export const Sandbox = createSandboxStory({
 });
 
 export const Basic: Story = {};
-
-export const LoaderInFlow: Story = {
-  parameters: {
-    padding: '0',
-  },
-  render: () => {
-    const [activeStep] = useState(2);
-    const steps = [
-      { label: 'Recipient' },
-      { label: 'Amount' },
-      { label: 'Review' },
-      { label: 'Pay' },
-    ];
-    return (
-      <>
-        <FlowNavigation
-          logo={<Logo />}
-          activeStep={activeStep}
-          steps={steps}
-          onClose={() => alert('close')}
-        />
-        <Container size="narrow" alignContent="center" className="p-t-4">
-          <Title type="title-section">Some title</Title>
-          <Body className="m-b-4">{lorem10}</Body>
-        </Container>
-        <Container size="narrow" alignContent="center">
-          <Loader label="Loading form..." />
-        </Container>
-        <Sticky>
-          <Container size="narrow" alignContent="center" className="p-y-3">
-            <Button v2 block onClick={() => alert('continue')}>
-              Continue
-            </Button>
-          </Container>
-        </Sticky>
-      </>
-    );
-  },
-};

package/src/_deprecated/OverlayHeader/OverlayHeader.tsx

@@ -1,9 +1,5 @@
-import { clsx } from 'clsx';
-
-import { Size } from '../../common';
-import { CloseButton } from '../../common/CloseButton';
-import FlowHeader from '../../common/FlowHeader';
 import Logo from '../../Logo';
+import FlowNavigation from '../../FlowNavigation';
 
 /**
  * @deprecated Use `FlowNavigation` component instead, with `steps={[]}`
@@ -22,20 +18,5 @@ const defaultLogo = <Logo />;
  * @deprecated Use `FlowNavigation` component instead
  */
 export default function OverlayHeader({ avatar, onClose, logo = defaultLogo }: OverlayHeaderProps) {
-  const closeButton = onClose && <CloseButton size={Size.LARGE} onClick={onClose} />;
-  return (
-    <div className="np-overlay-header d-flex justify-content-center">
-      <FlowHeader
-        className="np-overlay-header__content p-a-3"
-        leftContent={logo}
-        rightContent={
-          <div className={clsx('d-flex', 'align-items-center', 'order-2')}>
-            {avatar}
-            {avatar && closeButton && <span className={clsx('m-x-1')} />}
-            {closeButton}
-          </div>
-        }
-      />
-    </div>
-  );
+  return <FlowNavigation {...{ avatar, onClose, logo }} />;
 }

package/src/main.css

@@ -26110,12 +26110,6 @@ a[data-toggle="tooltip"] {
   max-width: var(--wds-container-width-fluid);
 }
 
-.wds-container--align-center {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
 .critical-comms {
   border-radius: 16px;
   border-radius: var(--radius-medium);
@@ -29019,7 +29013,13 @@ button.np-option {
   justify-content: center;
   width: 100%;
   box-sizing: border-box;
-  min-height: 96px;
+  min-height: 80px;
+}
+
+@media (min-width: 320.02px) {
+  .np-flow-navigation {
+    min-height: 128px;
+  }
 }
 
 .np-flow-navigation--border-bottom {
@@ -29030,7 +29030,7 @@ button.np-option {
 .np-flow-navigation__content {
   width: 100%;
   min-width: 320px;
-  max-width: calc(1160px - 36px);
+  max-width: none;
 }
 
 .np-flow-navigation__stepper {
@@ -29107,20 +29107,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   visibility: hidden;
 }
 
-.np-flow-navigation--composable {
-  min-height: 80px;
-}
-
-@media (min-width: 320.02px) {
-  .np-flow-navigation--composable {
-    min-height: 128px;
-  }
-}
-
-.np-flow-navigation--composable .np-flow-navigation__content {
-  max-width: none;
-}
-
 .np-theme-personal--forest-green .np-flow-navigation .np-flow-header__left path,
 .np-theme-personal--bright-green .np-flow-navigation .np-flow-header__left path,
 .np-theme-personal--dark .np-flow-navigation .np-flow-header__left path {
@@ -31656,24 +31642,6 @@ html:not([dir="rtl"]) .np-navigation-option {
           text-decoration: var(--nudge-link-text-decoration);
 }
 
-.np-overlay-header .np-overlay-header__content {
-  min-height: 97px;
-  width: 100%;
-  min-width: 320px;
-  max-width: calc(1160px - 36px);
-}
-
-.np-theme-personal .np-overlay-header {
-  border-bottom: 1px solid rgba(0,0,0,0.10196);
-  border-bottom: 1px solid var(--color-border-neutral);
-}
-
-.np-theme-personal--forest-green .np-overlay-header .np-flow-header__left path,
-.np-theme-personal--bright-green .np-overlay-header .np-flow-header__left path,
-.np-theme-personal--dark .np-overlay-header .np-flow-header__left path {
-  fill: var(--color-interactive-primary);
-}
-
 .tw-telephone {
   display: flex;
 }

package/src/main.less

@@ -63,7 +63,6 @@
 @import "./_deprecated/NavigationOption/NavigationOption.less";
 @import "./_deprecated/NavigationOptionsList/NavigationOptionsList.less";
 @import "./Nudge/Nudge.less";
-@import "./_deprecated/OverlayHeader/OverlayHeader.less";
 @import "./PhoneNumberInput/PhoneNumberInput.less";
 @import "./Popover/Popover.less";
 @import "./PromoCard/PromoCard.less";

package/build/styles/_deprecated/OverlayHeader/OverlayHeader.css

@@ -1,15 +0,0 @@
-.np-overlay-header .np-overlay-header__content {
-  min-height: 97px;
-  width: 100%;
-  min-width: 320px;
-  max-width: calc(1160px - 36px);
-}
-.np-theme-personal .np-overlay-header {
-  border-bottom: 1px solid rgba(0,0,0,0.10196);
-  border-bottom: 1px solid var(--color-border-neutral);
-}
-.np-theme-personal--forest-green .np-overlay-header .np-flow-header__left path,
-.np-theme-personal--bright-green .np-overlay-header .np-flow-header__left path,
-.np-theme-personal--dark .np-overlay-header .np-flow-header__left path {
-  fill: var(--color-interactive-primary);
-}