@transferwise/components 46.155.0 → 46.155.1

package/src/ExpressiveMoneyInput/AmountInput/AmountInput.tsx

@@ -1,10 +1,10 @@
 import { formatAmount } from '@transferwise/formatting';
 import { clsx } from 'clsx';
-import { AnimatePresence } from 'framer-motion';
+import { AnimatePresence } from 'motion/react';
 import { type ChangeEvent, type KeyboardEvent, useEffect, useMemo, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 
-import { Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
+import type { ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
 import { AnimatedNumber } from '../AnimatedNumber/AnimatedNumber';
 import { useFocus } from '../hooks/useFocus';
 import { useInputStyle } from '../hooks/useInputStyle';
@@ -19,7 +19,7 @@ import {
   isInputPossiblyOverflowing,
 } from './utils';
 
-type Props = {
+type AmountInputProps = {
   id: string;
   describedById?: string;
   amount?: number | null;
@@ -38,7 +38,7 @@ export const AmountInput = ({
   onChange,
   onFocusChange,
   loading,
-}: Props) => {
+}: AmountInputProps) => {
   const intl = useIntl();
   const { focus, setFocus, visualFocus, setVisualFocus } = useFocus();
 

package/src/ExpressiveMoneyInput/AnimatedNumber/AnimatedNumber.tsx

@@ -1,4 +1,4 @@
-import { motion, useReducedMotion } from 'framer-motion';
+import { motion, useReducedMotion } from 'motion/react';
 import type { ReactNode } from 'react';
 
 interface Props {

package/src/ExpressiveMoneyInput/Chevron/Chevron.tsx

@@ -1,6 +1,6 @@
 import { ChevronLeft } from '@transferwise/icons';
 import { clsx } from 'clsx';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 
 interface Props {
   shouldShow: boolean;

package/src/ExpressiveMoneyInput/CurrencySelector/CurrencySelector.tsx

@@ -5,7 +5,7 @@ import {
   SelectInputOptionContent,
   SelectInputTriggerButton,
 } from '../../Inputs/SelectInput';
-import { CurrencyType, Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
+import type { CurrencyType, ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
 import { ChevronDown } from '@transferwise/icons';
 import { Flag } from '@wise/art';
 import {
@@ -34,7 +34,7 @@ export interface CurrencySection {
 
 export type CurrencyOptions = CurrencySection[];
 
-export type Props = {
+export type CurrencySelectorProps = {
   id: string;
   labelId: string;
   options?: CurrencyOptions;
@@ -53,7 +53,7 @@ export const CurrencySelector = ({
   addons,
   onOpen,
   onSearchChange,
-}: Props) => {
+}: CurrencySelectorProps) => {
   const intl = useIntl();
 
   const allCurrencyOptions = useMemo(() => getUniqueCurrencies(options), [options]);

package/src/ExpressiveMoneyInput/ExpressiveMoneyInput.test.tsx

@@ -2,7 +2,7 @@ import { screen, render, mockMatchMedia, mockResizeObserver, waitFor } from '../
 import { Sentiment } from '../common';
 
 import ExpressiveMoneyInput from './ExpressiveMoneyInput';
-import type { Props as ExpressiveMoneyInputProps } from './ExpressiveMoneyInput';
+import type { ExpressiveMoneyInputProps } from './ExpressiveMoneyInput';
 import { Confetti } from '@transferwise/icons';
 
 const defaultProps: ExpressiveMoneyInputProps = {

package/src/ExpressiveMoneyInput/ExpressiveMoneyInput.tsx

@@ -1,12 +1,9 @@
 import Body from '../Body';
 import { clsx } from 'clsx';
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'motion/react';
 import { useId, type ReactNode } from 'react';
 
-import {
-  type Props as CurrencySelectorProps,
-  CurrencySelector,
-} from './CurrencySelector/CurrencySelector';
+import { CurrencySelector, type CurrencySelectorProps } from './CurrencySelector/CurrencySelector';
 import { CommonProps } from '../common';
 import { AmountInput } from './AmountInput/AmountInput';
 import { Chevron } from './Chevron/Chevron';
@@ -26,7 +23,7 @@ type CustomCurrencySelectorInstanceType = {
 type CurrencySelectorType = DefaultCurrencySelectorInstanceType &
   CustomCurrencySelectorInstanceType;
 
-export type Props = {
+export type ExpressiveMoneyInputProps = {
   label?: ReactNode;
   currencySelector?: CurrencySelectorType;
   amount?: AmountType;
@@ -65,7 +62,7 @@ export type Props = {
  * direct contributions by consuming product teams are highly encouraged.
  *
  * > ⚠️ **Prerequisite:** <br />The component depends on the
- * [framer-motion](https://www.npmjs.com/package/framer-motion) package, which has been
+ * [motion](https://www.npmjs.com/package/motion) package, which has been
  * deliberately excluded from the Design System bundle and kept as an opt-in only.
  * **Make sure to add it to your project dependencies.**
  */
@@ -81,7 +78,7 @@ export default function ExpressiveMoneyInput({
   autoFocus,
   loading,
   onFocusChange,
-}: Props) {
+}: ExpressiveMoneyInputProps) {
   const inputId = useId();
   const labelId = useId();
   const customAlertId = useId();

package/src/ExpressiveMoneyInput/_stories/ExpressiveMoneyInput.story.tsx

@@ -19,7 +19,7 @@ import Modal from '../../Modal';
 import ListItem from '../../ListItem';
 import List from '../../List';
 import ExpressiveMoneyInput, { type ExpressiveMoneyInputProps } from '..';
-import type { Props as CurrencySelectorProps } from '../CurrencySelector/CurrencySelector';
+import type { CurrencySelectorProps } from '../CurrencySelector/CurrencySelector';
 
 const getCurrencySelectorProps = ({
   logEvents = false,

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

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
-import ExpressiveMoneyInput, { Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
+import ExpressiveMoneyInput, { type ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
 
 const meta: Meta<typeof ExpressiveMoneyInput> = {
   component: ExpressiveMoneyInput,

package/src/ExpressiveMoneyInput/hooks/useInputStyle.ts

@@ -6,7 +6,7 @@ import {
   useLayoutEffect,
   useState,
 } from 'react';
-import { Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
+import type { ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
 
 type InputStyleObject = {
   value: string;

package/src/ExpressiveMoneyInput/index.ts

@@ -1,2 +1,2 @@
-export type { Props as ExpressiveMoneyInputProps, CurrencyType } from './ExpressiveMoneyInput';
+export type { ExpressiveMoneyInputProps, CurrencyType } from './ExpressiveMoneyInput';
 export { default } from './ExpressiveMoneyInput';

package/src/IconButton/IconButton.tsx

@@ -3,7 +3,7 @@ import { PrimitiveAnchor, PrimitiveButton } from '../Primitives';
 import Circle from '../common/Circle';
 import { clsx } from 'clsx';
 
-export type Props = {
+export type IconButtonProps = {
   /** @default 48 */
   size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;
   /** @default 'primary' */
@@ -27,7 +27,7 @@ const IconButton = forwardRef(function IconButton(
     priority = 'primary',
     type = 'default',
     ...props
-  }: Props,
+  }: IconButtonProps,
   ref,
 ) {
   const isLink = href !== '#';

package/src/IconButton/_stories/IconButton.story.tsx

@@ -18,7 +18,7 @@ import {
   createSandboxStory,
   globalScope,
 } from '../../../.storybook/components/sandbox/SandboxEditor';
-import IconButton, { Props } from '../IconButton';
+import IconButton, { type IconButtonProps } from '../IconButton';
 import SentimentSurface from '../../SentimentSurface';
 
 /**
@@ -46,7 +46,7 @@ export default {
 
 type Story = StoryObj<typeof IconButton>;
 
-const sizes: Props['size'][] = [16, 24, 32, 40, 48, 56, 72];
+const sizes: IconButtonProps['size'][] = [16, 24, 32, 40, 48, 56, 72];
 
 /**
  * Explore size, priority, type, and disabled state via the controls panel.
@@ -107,7 +107,7 @@ export const Priority: Story = {
       </div>
     ),
   ],
-  render: (args: Props) => (
+  render: (args: IconButtonProps) => (
     <>
       <IconButton priority="primary" type={args.type} aria-label="Primary" onClick={fn()}>
         <Plus />
@@ -152,7 +152,7 @@ export const Type: Story = {
       </div>
     ),
   ],
-  render: (args: Props) => (
+  render: (args: IconButtonProps) => (
     <>
       <IconButton priority={args.priority} type="default" aria-label="Default" onClick={fn()}>
         <Plus />
@@ -195,7 +195,7 @@ export const Size: Story = {
       </div>
     ),
   ],
-  render: (args: Props) => (
+  render: (args: IconButtonProps) => (
     <>
       {sizes.map((size) => (
         <div
@@ -254,7 +254,7 @@ export const Disabled: Story = {
     target: { table: { disable: true } },
     onClick: { table: { disable: true } },
   },
-  render: (args: Props) => (
+  render: (args: IconButtonProps) => (
     <IconButton disabled priority={args.priority} type={args.type} aria-label="Disabled">
       <Plus />
     </IconButton>
@@ -284,7 +284,7 @@ export const AsAnchor: Story = {
     disabled: { table: { disable: true } },
     onClick: { table: { disable: true } },
   },
-  render: (args: Props) => (
+  render: (args: IconButtonProps) => (
     <IconButton {...args} aria-label="External link">
       <ArrowLeft />
     </IconButton>
@@ -305,7 +305,7 @@ export const SentimentAwareness: Story = {
       options: [16, 24, 32, 40, 48, 56, 72],
     },
   },
-  render: (args: Props) => {
+  render: (args: IconButtonProps) => {
     const priorities = [
       { key: 'primary', label: 'primary' },
       { key: 'secondary', label: 'secondary' },

package/src/IconButton/index.ts

@@ -1,2 +1,2 @@
-export type { Props as IconButtonProps } from './IconButton';
+export type { IconButtonProps } from './IconButton';
 export { default } from './IconButton';

package/src/Link/Link.tsx

@@ -8,7 +8,7 @@ import { LinkLarge, LinkDefault, Typography } from '../common';
 
 import messages from './Link.messages';
 
-export type Props = PrimitiveAnchorProps &
+export type LinkProps = PrimitiveAnchorProps &
   Pick<PrimitiveButtonProps, 'onClick'> & { type?: LinkLarge | LinkDefault };
 
 /**
@@ -26,7 +26,7 @@ const Link = ({
   onClick,
   disabled,
   ...props
-}: Props) => {
+}: LinkProps) => {
   const { formatMessage } = useIntl();
   const isButton = Boolean(onClick) && href === undefined;
   const isBlank = target === '_blank';

package/src/Link/index.ts

@@ -1,2 +1,2 @@
 export { default } from './Link';
-export type { Props as LinkProps } from './Link';
+export type { LinkProps } from './Link';

package/src/Nudge/Nudge.css

@@ -171,7 +171,7 @@
 }
 .wds-nudge-media-documents {
   margin-left: -8px;
-  margin-top: 22px;
+  margin-top: 8px;
   position: absolute;
   width: 120px;
 }

package/src/Nudge/Nudge.less

@@ -82,7 +82,7 @@
     }
 
     &-documents {
-      .media-position(120px, -8px, 22px);
+      .media-position(120px, -8px, 8px);
     }
   }
 

package/src/Nudge/Nudge.test.tsx

@@ -42,6 +42,49 @@ describe('Nudge', () => {
     expect(defaultProps.onDismiss).toHaveBeenCalledTimes(1);
   });
 
+  it('renders action only when both action and link/href are supplied', () => {
+    const consoleWarn = jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+    render(
+      <Nudge
+        {...defaultProps}
+        action={{
+          text: 'Learn more',
+          href: '#action-link',
+          'aria-label': 'Learn more about rewards',
+        }}
+      />,
+    );
+
+    expect(screen.queryByText('CTA')).not.toBeInTheDocument();
+
+    const actionLink = screen.getByText('Learn more');
+    expect(actionLink).toBeInTheDocument();
+    expect(actionLink).toHaveAttribute('href', '#action-link');
+
+    consoleWarn.mockRestore();
+  });
+  it('shows a warning in development when both action and link/href are supplied', () => {
+    const consoleWarn = jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+    render(
+      <Nudge
+        {...defaultProps}
+        action={{
+          text: 'Learn more',
+          href: '#action-link',
+          'aria-label': 'Learn more about rewards',
+        }}
+      />,
+    );
+
+    expect(consoleWarn).toHaveBeenCalledWith(
+      'Nudge received both action and link/href props. Rendering action only. Remove link/href to silence this warning.',
+    );
+
+    consoleWarn.mockRestore();
+  });
+
   describe('Nudge persistance', () => {
     beforeEach(() => {
       jest.resetAllMocks();

package/src/Nudge/Nudge.tsx

@@ -25,7 +25,7 @@ const getLocalStorage = (): string[] => {
         return storage.map((item) => String(item));
       }
     }
-  } catch (error) {}
+  } catch {}
 
   return [];
 };
@@ -47,18 +47,41 @@ type MediaNameType =
   | `${Assets.DOCUMENTS}`;
 
 type BaseProps = {
-  /** @deprecated Use `mediaName` property instead. */
+  /**
+   * @deprecated Use `mediaName` instead.
+   * Legacy custom media content is no longer used by `Nudge`.
+   */
   media?: ReactNode;
-  /** Media name  */
+  /**
+   * Illustration asset name shown at the start of the nudge.
+   */
   mediaName?: MediaNameType;
+  /** Main nudge message content. */
   title: ReactNode;
+  /**
+   * Legacy CTA label content.
+   * Rendered only when `action` is not provided.
+   */
   link?: ReactNode;
+  /**
+   * Legacy CTA destination for `link`.
+   * Ignored when `action` is provided.
+   */
   href?: string;
+  /**
+   * Legacy click handler for `link`.
+   * Ignored when `action` is provided.
+   */
   onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;
   /** Fired when the user clicks on close button */
   onDismiss?: () => void;
-  /** An optional call to action to sit under the main body of the nudge. If your label is short, use aria-label to provide more context */
+  /**
+   * Preferred CTA configuration rendered under the nudge body.
+   * Single CTA rule: when `action` is provided, legacy `link`/`href` is not rendered.
+   * If your label is short, use `aria-label` to provide more context.
+   */
   action?: AlertAction;
+  /** Optional class name applied to the root nudge container. */
   className?: string;
 };
 
@@ -81,7 +104,7 @@ export interface RequiredPersistProps extends BaseProps {
   isPreviouslyDismissed?: (value: boolean) => void;
 }
 
-export type Props = OptionalId | RequiredPersistProps;
+export type NudgeProps = OptionalId | RequiredPersistProps;
 
 const Nudge = ({
   mediaName,
@@ -95,8 +118,21 @@ const Nudge = ({
   id,
   className,
   action,
-}: Props) => {
+}: NudgeProps) => {
   const intl = useIntl();
+  const hasLegacyLink = Boolean(link);
+  const hasAction = action != null;
+  const shouldRenderLegacyLink = hasLegacyLink && !hasAction;
+
+  useEffect(() => {
+    if (process.env.NODE_ENV !== 'production' && hasAction && (hasLegacyLink || href != null)) {
+      // eslint-disable-next-line no-console -- Intentional developer warning for conflicting API usage.
+      console.warn(
+        'Nudge received both action and link/href props. Rendering action only. Remove link/href to silence this warning.',
+      );
+    }
+  }, [hasAction, hasLegacyLink, href]);
+
   const getIsDismissed = useCallback(
     () => (persistDismissal && id ? !!getLocalStorage()?.find((item) => item === id) : false),
     [persistDismissal, id],
@@ -166,8 +202,7 @@ const Nudge = ({
           <Body type={Typography.BODY_LARGE} className={clsx('wds-nudge-body')}>
             {title}
           </Body>
-          {/* Merge these two Link instances into one */}
-          {link && (
+          {shouldRenderLegacyLink && (
             <Link
               href={href}
               type={Typography.LINK_LARGE}

package/src/Nudge/index.ts

@@ -1,7 +1,7 @@
 export { default } from './Nudge';
 
 export type {
-  Props as NudgeProps,
+  NudgeProps,
   OptionalId as NudgeOptionalId,
   RequiredPersistProps as NudgeRequiredPersistProps,
 } from './Nudge';

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),
+};