@transferwise/components 0.0.0-experimental-bd48fa9 → 0.0.0-experimental-6e333ba

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

@@ -1 +1 @@
-{"version":3,"file":"Sticky.d.ts","sourceRoot":"","sources":["../../../src/Sticky/Sticky.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAErC,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,WAAW,WAAW;IAC1B,wFAAwF;IACxF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,yGAAyG;IACzG,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,yHAAyH;IACzH,QAAQ,CAAC,EAAE,GAAG,QAAQ,CAAC,GAAG,EAAE,GAAG,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC;IAEpD,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,CAiB1C,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Sticky.d.ts","sourceRoot":"","sources":["../../../src/Sticky/Sticky.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAErC,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,WAAW,WAAW;IAC1B,wFAAwF;IACxF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,yGAAyG;IACzG,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,yHAAyH;IACzH,QAAQ,CAAC,EAAE,GAAG,QAAQ,CAAC,GAAG,EAAE,GAAG,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC;IAEpD,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,CAkB1C,CAAC;AAEF,eAAe,MAAM,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":"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"}
+{"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"}

package/package.json

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

package/src/FlowNavigation/FlowNavigation.css

@@ -4,12 +4,7 @@
   justify-content: center;
   width: 100%;
   box-sizing: border-box;
-  min-height: 80px;
-}
-@media (min-width: 320.02px) {
-  .np-flow-navigation {
-    min-height: 128px;
-  }
+  min-height: 96px;
 }
 .np-flow-navigation--border-bottom {
   border-bottom: 1px solid rgba(0,0,0,0.10196);
@@ -18,7 +13,7 @@
 .np-flow-navigation__content {
   width: 100%;
   min-width: 320px;
-  max-width: none;
+  max-width: calc(1160px - 36px);
 }
 .np-flow-navigation__stepper {
   padding-bottom: 0 !important;
@@ -77,6 +72,17 @@ 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,11 +9,7 @@
   box-sizing: border-box;
 
   // This is the natural height of FlowNavigation when the Avatar is displayed.
-  min-height: 80px;
-
-  @media (--screen-xs) {
-    min-height: 128px;
-  }
+  min-height: 96px;
 
   &--border-bottom {
     border-bottom: 1px solid var(--color-border-neutral);
@@ -22,7 +18,7 @@
   &__content {
     width: 100%;
     min-width: 320px;
-    max-width: none;
+    max-width: calc(@screen-lg-min - 36px);
   }
 
   &__stepper {
@@ -73,6 +69,19 @@
     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,13 +26,20 @@ 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) | React.MouseEventHandler<HTMLButtonElement>;
+  onClose?: () => void;
   /** 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;
@@ -46,6 +53,7 @@ const FlowNavigation = ({
   onClose,
   onGoBack,
   steps,
+  composable = false,
   showBottomBorder = true,
 }: FlowNavigationProps) => {
   const intl = useIntl();
@@ -61,6 +69,7 @@ const FlowNavigation = ({
     <FlowHeader
       className={clsx(
         'np-flow-navigation__content',
+        !composable && 'p-x-3',
         screenSm == null
           ? 'np-flow-navigation--hidden'
           : {
@@ -110,15 +119,27 @@ 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 (
-    <Container
-      size="fluid"
-      className={clsx('np-flow-navigation', {
-        'np-flow-navigation--border-bottom': showBottomBorder,
+    <div
+      className={clsx('np-flow-navigation p-y-3', {
+        'np-flow-navigation--border-bottom': !done,
       })}
     >
       {flowHeaderContent}
-    </Container>
+    </div>
   );
 };
 

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

@@ -384,6 +384,89 @@ 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,
@@ -492,6 +575,7 @@ export const BorderControl: Story = {
 
         {/* Composable: showBottomBorder=true, done=false - SHOWS BORDER */}
         <FlowNavigation
+          composable
           avatar={<AvatarView profileType={args.profileType} />}
           logo={<Logo />}
           activeStep={activeStep}
@@ -507,6 +591,7 @@ export const BorderControl: Story = {
 
         {/* Composable: showBottomBorder=true, done=true - SHOWS BORDER */}
         <FlowNavigation
+          composable
           avatar={<AvatarView profileType={args.profileType} />}
           logo={<Logo />}
           activeStep={activeStep}
@@ -522,6 +607,7 @@ export const BorderControl: Story = {
 
         {/* Composable: showBottomBorder=false, done=false - HIDES BORDER */}
         <FlowNavigation
+          composable
           avatar={<AvatarView profileType={args.profileType} />}
           logo={<Logo />}
           activeStep={activeStep}

package/src/Sticky/Sticky.css

@@ -0,0 +1,4 @@
+.wds-sticky.sliding-panel--open-bottom {
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  padding-bottom: var(--wds-sticky-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
+}

package/src/Sticky/Sticky.less

@@ -0,0 +1,6 @@
+.wds-sticky.sliding-panel--open-bottom {
+  padding-bottom: var(
+    --wds-sticky-safe-area-inset-bottom,
+    env(safe-area-inset-bottom, 0px)
+  );
+}

package/src/Sticky/Sticky.test.tsx

@@ -21,6 +21,7 @@ describe('Sticky', () => {
 
   test('renders with default props', () => {
     expect(screen.getByTestId('test-sticky-panel')).toBeVisible();
+    expect(screen.getByTestId('test-sticky-panel')).toHaveClass('wds-sticky');
     expect(screen.getByTestId('test-sticky-panel')).toHaveClass('sliding-panel--open-bottom');
     expect(screen.getByText('Test Content')).toBeInTheDocument();
   });

package/src/Sticky/Sticky.tsx

@@ -46,6 +46,7 @@ const Sticky: FunctionComponent<StickyProps> = ({
 }: StickyProps) => {
   return (
     <SlidingPanel
+      className="wds-sticky"
       testId={testId}
       open={open}
       position={position}

package/src/Sticky/_stories/Sticky.test.story.tsx

@@ -0,0 +1,177 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Card, Home, Payments, Recipients } from '@transferwise/icons';
+import type { CSSProperties } from 'react';
+import { useState } from 'react';
+import { expect, userEvent, within } from 'storybook/test';
+
+import { withVariantConfig } from '../../../.storybook/helpers';
+import Button from '../../Button';
+import { wait } from '../../test-utils/wait';
+import Sticky from '../Sticky';
+
+const SAFE_AREA_INSET = 64;
+const DEMO_HEIGHT = 400;
+const DEMO_WIDTH = 390;
+const SAFE_AREA_VIEWPORT = 'safe-area-demo';
+
+type SafeAreaDemoStyle = CSSProperties & {
+  '--wds-sticky-safe-area-inset-bottom': string;
+};
+
+const safeAreaDemoStyle: SafeAreaDemoStyle = {
+  '--wds-sticky-safe-area-inset-bottom': `${SAFE_AREA_INSET}px`,
+  background: 'var(--color-background-screen)',
+  height: DEMO_HEIGHT,
+  overflow: 'hidden',
+};
+
+const navigationItems = [
+  { Icon: Home, label: 'Home' },
+  { Icon: Card, label: 'Card' },
+  { Icon: Recipients, label: 'Recipients' },
+  { Icon: Payments, label: 'Payments' },
+] as const;
+
+function SafeAreaBottomBar() {
+  return (
+    <nav
+      aria-label="Safe area bottom bar"
+      data-testid="safe-area-bottom-bar"
+      style={{
+        alignItems: 'center',
+        background: 'var(--color-background-elevated)',
+        borderTop: '1px solid var(--color-border-neutral)',
+        bottom: 0,
+        display: 'flex',
+        height: SAFE_AREA_INSET,
+        justifyContent: 'space-around',
+        left: 0,
+        padding: '0 8px',
+        position: 'fixed',
+        right: 0,
+        zIndex: 1031,
+      }}
+    >
+      {navigationItems.map(({ Icon, label }) => (
+        <span
+          key={label}
+          style={{
+            alignItems: 'center',
+            color: 'var(--color-content-primary)',
+            display: 'flex',
+            flexDirection: 'column',
+            fontSize: 11,
+            gap: 2,
+          }}
+        >
+          <Icon size={24} />
+          {label}
+        </span>
+      ))}
+    </nav>
+  );
+}
+
+function SafeAreaDemo() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <main style={safeAreaDemoStyle}>
+      <section style={{ maxWidth: 520, padding: 32 }}>
+        <h1 style={{ fontSize: 32, lineHeight: 1.15, margin: '0 0 16px' }}>
+          Sticky respects safe area at bottom of screen
+        </h1>
+        <Button v2 onClick={() => setOpen((currentOpen) => !currentOpen)}>
+          {open ? 'Hide Sticky' : 'Show Sticky'}
+        </Button>
+      </section>
+
+      <SafeAreaBottomBar />
+
+      <Sticky open={open} position="bottom" testId="safe-area-sticky">
+        <div className="p-a-2" data-testid="sticky-content">
+          Sticky
+        </div>
+      </Sticky>
+    </main>
+  );
+}
+
+const meta = {
+  component: Sticky,
+  parameters: {
+    controls: { disable: true },
+    layout: 'fullscreen',
+  },
+  tags: ['!autodocs', '!manifest'],
+  title: 'Dialogs/Sticky/Tests',
+} satisfies Meta<typeof Sticky>;
+
+export default meta;
+
+type Story = StoryObj<typeof Sticky>;
+
+const SafeAreaRegression: Story = {
+  parameters: {
+    chromatic: { delay: 500 },
+    viewport: {
+      options: {
+        [SAFE_AREA_VIEWPORT]: {
+          name: 'Safe area demo',
+          styles: { height: `${DEMO_HEIGHT}px`, width: `${DEMO_WIDTH}px` },
+          type: 'mobile',
+        },
+      },
+    },
+  },
+  globals: {
+    viewport: SAFE_AREA_VIEWPORT,
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    const expectStickyAboveSafeArea = async () => {
+      await wait(400);
+
+      const sticky = canvas.getByTestId('safe-area-sticky');
+      const stickyContent = canvas.getByTestId('sticky-content');
+      const safeArea = canvas.getByTestId('safe-area-bottom-bar');
+
+      await expect(sticky).toBeVisible();
+      await expect(window.getComputedStyle(sticky).paddingBottom).toBe(`${SAFE_AREA_INSET}px`);
+      await expect(Math.round(stickyContent.getBoundingClientRect().bottom)).toBe(
+        Math.round(safeArea.getBoundingClientRect().top),
+      );
+      await expect(stickyContent.getBoundingClientRect().bottom).toBeLessThanOrEqual(
+        safeArea.getBoundingClientRect().top,
+      );
+    };
+
+    await step('Open Sticky from the top button', async () => {
+      await userEvent.click(canvas.getByRole('button', { name: /^show sticky$/i }));
+    });
+
+    await step('Keep Sticky above the bottom safe area', expectStickyAboveSafeArea);
+
+    await step('Toggle Sticky closed and open again', async () => {
+      const hideStickyButton = canvas.getByRole('button', { name: /^hide sticky$/i });
+
+      await userEvent.click(hideStickyButton);
+      await wait(400);
+      await expect(canvas.queryByTestId('safe-area-sticky')).not.toBeInTheDocument();
+
+      await userEvent.click(canvas.getByRole('button', { name: /^show sticky$/i }));
+      await expectStickyAboveSafeArea();
+    });
+  },
+  render: () => <SafeAreaDemo />,
+};
+
+/**
+ * Reproduces the MobileNav replacement from DS-7193 with a fixed bottom safe area.
+ * It verifies that Sticky clears the inset.
+ */
+export const MobileNavSafeArea: Story = {
+  ...SafeAreaRegression,
+  ...withVariantConfig(['mobile'], SafeAreaRegression),
+};

package/src/_deprecated/OverlayHeader/OverlayHeader.css

@@ -0,0 +1,15 @@
+.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);
+}

package/src/_deprecated/OverlayHeader/OverlayHeader.less

@@ -0,0 +1,24 @@
+@import (reference) "@transferwise/neptune-tokens/breakpoints.less";
+@import (reference) "./../../styles/less/addons/_spacing-utilities.less";
+
+.np-overlay-header {
+  .np-overlay-header__content {
+    // Same height and width as in FlowNavigation
+    min-height: 97px;
+    width: 100%;
+    min-width: @screen-xs-min;
+    max-width: calc(@screen-lg-min - 36px);
+  }
+
+  .np-theme-personal & {
+    border-bottom: 1px solid var(--color-border-neutral);
+  }
+
+  .np-theme-personal--forest-green &,
+  .np-theme-personal--bright-green &,
+  .np-theme-personal--dark & {
+    .np-flow-header__left path {
+      fill: var(--color-interactive-primary);
+    }
+  }
+}

package/src/_deprecated/OverlayHeader/OverlayHeader.tsx

@@ -1,5 +1,9 @@
+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={[]}`
@@ -18,5 +22,20 @@ const defaultLogo = <Logo />;
  * @deprecated Use `FlowNavigation` component instead
  */
 export default function OverlayHeader({ avatar, onClose, logo = defaultLogo }: OverlayHeaderProps) {
-  return <FlowNavigation {...{ avatar, onClose, logo }} />;
+  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>
+  );
 }

package/src/main.css

@@ -28933,13 +28933,7 @@ button.np-option {
   justify-content: center;
   width: 100%;
   box-sizing: border-box;
-  min-height: 80px;
-}
-
-@media (min-width: 320.02px) {
-  .np-flow-navigation {
-    min-height: 128px;
-  }
+  min-height: 96px;
 }
 
 .np-flow-navigation--border-bottom {
@@ -28950,7 +28944,7 @@ button.np-option {
 .np-flow-navigation__content {
   width: 100%;
   min-width: 320px;
-  max-width: none;
+  max-width: calc(1160px - 36px);
 }
 
 .np-flow-navigation__stepper {
@@ -29027,6 +29021,20 @@ 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 {
@@ -31527,6 +31535,24 @@ 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;
 }
@@ -32686,6 +32712,11 @@ html:not([dir="rtl"]) .np-navigation-option {
   will-change: width;
 }
 
+.wds-sticky.sliding-panel--open-bottom {
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  padding-bottom: var(--wds-sticky-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
+}
+
 .np-select .np-dropdown-toggle {
   background-color: #ffffff;
   background-color: var(--color-background-screen);

package/src/main.less

@@ -62,6 +62,7 @@
 @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";
@@ -77,6 +78,7 @@
 @import "./Snackbar/Snackbar.less";
 @import "./StatusIcon/StatusIcon.less";
 @import "./Stepper/Stepper.less";
+@import "./Sticky/Sticky.less";
 @import "./_deprecated/Select/Select.less";
 @import "./SegmentedControl/SegmentedControl.less";
 @import "./_deprecated/Summary/Summary.less";