npm - @transferwise/components - Versions diffs - 46.154.0 → 46.155.1 - Mend

@transferwise/components 46.154.0 → 46.155.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (184) hide show

package/build/AvatarLayout/AvatarLayout.js.map +1 -1
package/build/AvatarLayout/AvatarLayout.mjs.map +1 -1
package/build/AvatarView/AvatarView.js.map +1 -1
package/build/AvatarView/AvatarView.mjs.map +1 -1
package/build/AvatarView/Dot/Dot.js.map +1 -1
package/build/AvatarView/Dot/Dot.mjs.map +1 -1
package/build/Body/Body.js.map +1 -1
package/build/Body/Body.mjs.map +1 -1
package/build/Chips/Chip/Chip.js.map +1 -1
package/build/Chips/Chip/Chip.mjs.map +1 -1
package/build/DefinitionList/DefinitionList.js +2 -1
package/build/DefinitionList/DefinitionList.js.map +1 -1
package/build/DefinitionList/DefinitionList.mjs +2 -1
package/build/DefinitionList/DefinitionList.mjs.map +1 -1
package/build/Display/Display.js.map +1 -1
package/build/Display/Display.mjs.map +1 -1
package/build/ExpressiveMoneyInput/AmountInput/AmountInput.js +2 -2
package/build/ExpressiveMoneyInput/AmountInput/AmountInput.js.map +1 -1
package/build/ExpressiveMoneyInput/AmountInput/AmountInput.mjs +1 -1
package/build/ExpressiveMoneyInput/AmountInput/AmountInput.mjs.map +1 -1
package/build/ExpressiveMoneyInput/AnimatedNumber/AnimatedNumber.js +4 -4
package/build/ExpressiveMoneyInput/AnimatedNumber/AnimatedNumber.js.map +1 -1
package/build/ExpressiveMoneyInput/AnimatedNumber/AnimatedNumber.mjs +1 -1
package/build/ExpressiveMoneyInput/AnimatedNumber/AnimatedNumber.mjs.map +1 -1
package/build/ExpressiveMoneyInput/Chevron/Chevron.js +2 -2
package/build/ExpressiveMoneyInput/Chevron/Chevron.js.map +1 -1
package/build/ExpressiveMoneyInput/Chevron/Chevron.mjs +1 -1
package/build/ExpressiveMoneyInput/Chevron/Chevron.mjs.map +1 -1
package/build/ExpressiveMoneyInput/CurrencySelector/CurrencySelector.js.map +1 -1
package/build/ExpressiveMoneyInput/CurrencySelector/CurrencySelector.mjs.map +1 -1
package/build/ExpressiveMoneyInput/ExpressiveMoneyInput.js +3 -3
package/build/ExpressiveMoneyInput/ExpressiveMoneyInput.js.map +1 -1
package/build/ExpressiveMoneyInput/ExpressiveMoneyInput.mjs +1 -1
package/build/ExpressiveMoneyInput/ExpressiveMoneyInput.mjs.map +1 -1
package/build/ExpressiveMoneyInput/hooks/useInputStyle.js.map +1 -1
package/build/ExpressiveMoneyInput/hooks/useInputStyle.mjs.map +1 -1
package/build/IconButton/IconButton.js.map +1 -1
package/build/IconButton/IconButton.mjs.map +1 -1
package/build/Link/Link.js.map +1 -1
package/build/Link/Link.mjs.map +1 -1
package/build/ListItem/Navigation/ListItemNavigation.js +4 -2
package/build/ListItem/Navigation/ListItemNavigation.js.map +1 -1
package/build/ListItem/Navigation/ListItemNavigation.mjs +4 -2
package/build/ListItem/Navigation/ListItemNavigation.mjs.map +1 -1
package/build/Nudge/Nudge.js +11 -2
package/build/Nudge/Nudge.js.map +1 -1
package/build/Nudge/Nudge.mjs +12 -3
package/build/Nudge/Nudge.mjs.map +1 -1
package/build/Sticky/Sticky.js +1 -0
package/build/Sticky/Sticky.js.map +1 -1
package/build/Sticky/Sticky.mjs +1 -0
package/build/Sticky/Sticky.mjs.map +1 -1
package/build/Title/Title.js +1 -0
package/build/Title/Title.js.map +1 -1
package/build/Title/Title.mjs +1 -0
package/build/Title/Title.mjs.map +1 -1
package/build/_deprecated/Select/Option/Option.js.map +1 -1
package/build/_deprecated/Select/Option/Option.mjs.map +1 -1
package/build/_deprecated/Select/SearchBox/SearchBox.js.map +1 -1
package/build/_deprecated/Select/SearchBox/SearchBox.mjs.map +1 -1
package/build/common/Circle/Circle.js.map +1 -1
package/build/common/Circle/Circle.mjs.map +1 -1
package/build/main.css +36 -1
package/build/styles/DefinitionList/DefinitionList.css +30 -0
package/build/styles/Nudge/Nudge.css +1 -1
package/build/styles/Sticky/Sticky.css +4 -0
package/build/styles/main.css +36 -1
package/build/types/AvatarLayout/AvatarLayout.d.ts +2 -2
package/build/types/AvatarLayout/AvatarLayout.d.ts.map +1 -1
package/build/types/AvatarLayout/index.d.ts +1 -1
package/build/types/AvatarLayout/index.d.ts.map +1 -1
package/build/types/AvatarView/AvatarView.d.ts +2 -2
package/build/types/AvatarView/AvatarView.d.ts.map +1 -1
package/build/types/AvatarView/Dot/Dot.d.ts +1 -1
package/build/types/AvatarView/Dot/Dot.d.ts.map +1 -1
package/build/types/AvatarView/index.d.ts +1 -1
package/build/types/AvatarView/index.d.ts.map +1 -1
package/build/types/Body/Body.d.ts +11 -0
package/build/types/Body/Body.d.ts.map +1 -1
package/build/types/Body/index.d.ts +1 -0
package/build/types/Body/index.d.ts.map +1 -1
package/build/types/Chips/Chip/Chip.d.ts +2 -2
package/build/types/Chips/Chip/Chip.d.ts.map +1 -1
package/build/types/Chips/index.d.ts +1 -1
package/build/types/Chips/index.d.ts.map +1 -1
package/build/types/DefinitionList/DefinitionList.d.ts.map +1 -1
package/build/types/Display/Display.d.ts +2 -2
package/build/types/Display/Display.d.ts.map +1 -1
package/build/types/Display/index.d.ts +1 -0
package/build/types/Display/index.d.ts.map +1 -1
package/build/types/ExpressiveMoneyInput/AmountInput/AmountInput.d.ts +3 -3
package/build/types/ExpressiveMoneyInput/AmountInput/AmountInput.d.ts.map +1 -1
package/build/types/ExpressiveMoneyInput/CurrencySelector/CurrencySelector.d.ts +3 -3
package/build/types/ExpressiveMoneyInput/CurrencySelector/CurrencySelector.d.ts.map +1 -1
package/build/types/ExpressiveMoneyInput/ExpressiveMoneyInput.d.ts +4 -4
package/build/types/ExpressiveMoneyInput/ExpressiveMoneyInput.d.ts.map +1 -1
package/build/types/ExpressiveMoneyInput/hooks/useInputStyle.d.ts +1 -1
package/build/types/ExpressiveMoneyInput/hooks/useInputStyle.d.ts.map +1 -1
package/build/types/ExpressiveMoneyInput/index.d.ts +1 -1
package/build/types/ExpressiveMoneyInput/index.d.ts.map +1 -1
package/build/types/IconButton/IconButton.d.ts +1 -1
package/build/types/IconButton/IconButton.d.ts.map +1 -1
package/build/types/IconButton/index.d.ts +1 -1
package/build/types/IconButton/index.d.ts.map +1 -1
package/build/types/Link/Link.d.ts +2 -2
package/build/types/Link/Link.d.ts.map +1 -1
package/build/types/Link/index.d.ts +1 -1
package/build/types/Link/index.d.ts.map +1 -1
package/build/types/ListItem/ListItem.d.ts +1 -1
package/build/types/ListItem/Navigation/ListItemNavigation.d.ts +12 -2
package/build/types/ListItem/Navigation/ListItemNavigation.d.ts.map +1 -1
package/build/types/Nudge/Nudge.d.ts +28 -5
package/build/types/Nudge/Nudge.d.ts.map +1 -1
package/build/types/Nudge/index.d.ts +1 -1
package/build/types/Nudge/index.d.ts.map +1 -1
package/build/types/Sticky/Sticky.d.ts.map +1 -1
package/build/types/Title/Title.d.ts +12 -2
package/build/types/Title/Title.d.ts.map +1 -1
package/build/types/Title/index.d.ts +1 -0
package/build/types/Title/index.d.ts.map +1 -1
package/build/types/_deprecated/Select/Option/Option.d.ts +2 -2
package/build/types/_deprecated/Select/Option/Option.d.ts.map +1 -1
package/build/types/common/Circle/Circle.d.ts +1 -1
package/build/types/common/Circle/Circle.d.ts.map +1 -1
package/build/types/common/Circle/index.d.ts +1 -1
package/build/types/common/Circle/index.d.ts.map +1 -1
package/build/types/index.d.ts +4 -0
package/build/types/index.d.ts.map +1 -1
package/package.json +5 -5
package/src/AvatarLayout/AvatarLayout.tsx +3 -3
package/src/AvatarLayout/index.ts +1 -1
package/src/AvatarView/AvatarView.tsx +4 -4
package/src/AvatarView/Dot/Dot.tsx +1 -1
package/src/AvatarView/index.ts +1 -1
package/src/Body/Body.tsx +2 -2
package/src/Body/index.ts +1 -0
package/src/Chips/Chip/Chip.tsx +2 -2
package/src/Chips/index.ts +1 -1
package/src/DefinitionList/DefinitionList.css +30 -0
package/src/DefinitionList/DefinitionList.less +24 -0
package/src/DefinitionList/DefinitionList.tsx +1 -0
package/src/DefinitionList/_stories/DefinitionList.test.story.tsx +168 -0
package/src/Display/Display.tsx +2 -2
package/src/Display/index.ts +1 -0
package/src/Drawer/Drawer.test.tsx +2 -3
package/src/ExpressiveMoneyInput/AmountInput/AmountInput.tsx +4 -4
package/src/ExpressiveMoneyInput/AnimatedNumber/AnimatedNumber.tsx +1 -1
package/src/ExpressiveMoneyInput/Chevron/Chevron.tsx +1 -1
package/src/ExpressiveMoneyInput/CurrencySelector/CurrencySelector.tsx +3 -3
package/src/ExpressiveMoneyInput/ExpressiveMoneyInput.test.tsx +1 -1
package/src/ExpressiveMoneyInput/ExpressiveMoneyInput.tsx +5 -8
package/src/ExpressiveMoneyInput/_stories/ExpressiveMoneyInput.story.tsx +1 -1
package/src/ExpressiveMoneyInput/_stories/ExpressiveMoneyInput.test.story.tsx +1 -1
package/src/ExpressiveMoneyInput/hooks/useInputStyle.ts +1 -1
package/src/ExpressiveMoneyInput/index.ts +1 -1
package/src/IconButton/IconButton.tsx +2 -2
package/src/IconButton/_stories/IconButton.story.tsx +8 -8
package/src/IconButton/index.ts +1 -1
package/src/Link/Link.tsx +2 -2
package/src/Link/index.ts +1 -1
package/src/ListItem/Navigation/ListItemNavigation.test.tsx +23 -0
package/src/ListItem/Navigation/ListItemNavigation.tsx +17 -3
package/src/ListItem/Navigation/_stories/ListItemNavigation.story.tsx +33 -0
package/src/Nudge/Nudge.css +1 -1
package/src/Nudge/Nudge.less +1 -1
package/src/Nudge/Nudge.test.tsx +43 -0
package/src/Nudge/Nudge.tsx +43 -8
package/src/Nudge/index.ts +1 -1
package/src/Sticky/Sticky.css +4 -0
package/src/Sticky/Sticky.less +6 -0
package/src/Sticky/Sticky.test.tsx +1 -0
package/src/Sticky/Sticky.tsx +1 -0
package/src/Sticky/_stories/Sticky.test.story.tsx +177 -0
package/src/Title/Title.tsx +25 -20
package/src/Title/index.ts +1 -0
package/src/_deprecated/LegacyListItem/_stories/LegacyListItem.story.tsx +2 -3
package/src/_deprecated/Select/Option/Option.test.tsx +1 -1
package/src/_deprecated/Select/Option/Option.tsx +2 -2
package/src/_deprecated/Select/SearchBox/SearchBox.tsx +2 -2
package/src/common/Circle/Circle.tsx +2 -2
package/src/common/Circle/index.ts +1 -1
package/src/index.ts +4 -0
package/src/main.css +36 -1
package/src/main.less +1 -0

package/src/Nudge/Nudge.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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/Title/Title.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import React, { forwardRef, LabelHTMLAttributes, LiHTMLAttributes } from 'react';
+import React, { LabelHTMLAttributes, LiHTMLAttributes } from 'react';
 import { TitleTypes, Typography, Heading } from '../common';
@@ -13,7 +13,9 @@ const titleTypeMapping = {
   [Typography.TITLE_GROUP]: 'h5',
 } as const;
-type Props = LabelHTMLAttributes<HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement> &
+export type TitleProps = LabelHTMLAttributes<
+  HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement
+> &
   LiHTMLAttributes<HTMLLIElement> & {
     /**
      * Default value will based one `type` prop
@@ -25,29 +27,32 @@ type Props = LabelHTMLAttributes<HTMLHeadingElement | HTMLSpanElement | HTMLLabe
     type?: TitleTypes;
   };
-const Title = React.forwardRef<HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement, Props>(
-  ({ as, type = DEFAULT_TYPE, className, ...props }, ref) => {
-    const mapping = titleTypeMapping[type as keyof typeof titleTypeMapping];
-    const isTypeSupported = mapping !== undefined;
-    if (isTypeSupported) {
-      const HeaderTag = as ?? mapping;
-      return (
-        <HeaderTag
-          ref={ref as React.Ref<any>}
-          {...props}
-          className={clsx(`np-text-${type}`, className)}
-        />
-      );
-    }
-    const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];
+const Title = React.forwardRef<
+  HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement | HTMLLIElement | HTMLLegendElement,
+  TitleProps
+>(({ as, type = DEFAULT_TYPE, className, ...props }, ref) => {
+  const mapping = titleTypeMapping[type as keyof typeof titleTypeMapping];
+  const isTypeSupported = mapping !== undefined;
+  if (isTypeSupported) {
+    const HeaderTag = as ?? mapping;
     return (
       <HeaderTag
         ref={ref as React.Ref<any>}
         {...props}
-        className={clsx(`np-text-${DEFAULT_TYPE}`, className)}
+        className={clsx(`np-text-${type}`, className)}
       />
     );
-  },
-);
+  }
+  const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];
+  return (
+    <HeaderTag
+      ref={ref as React.Ref<any>}
+      {...props}
+      className={clsx(`np-text-${DEFAULT_TYPE}`, className)}
+    />
+  );
+});
+Title.displayName = 'Title';
 export default Title;

package/src/Title/index.ts CHANGED Viewed

	@@ -1 +1,2 @@
1 1	export { default } from './Title';
2	+ export type { TitleProps } from './Title';

package/src/_deprecated/LegacyListItem/_stories/LegacyListItem.story.tsx CHANGED Viewed

@@ -1,12 +1,11 @@
 import { action } from 'storybook/actions';
 import { Documents, FastFlag } from '@transferwise/icons';
-import { ComponentProps } from 'react';
 import { Button, IconButton, List } from '../../..';
 import AvatarView from '../../../AvatarView';
 import Info from '../../../Info';
 import Title from '../../../Title/Title';
-import LegacyListItem from '..';
+import LegacyListItem, { type LegacyListItemProps } from '..';
 /**
  * > ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs)
@@ -22,7 +21,7 @@ const Template = ({
   title = 'Wise',
   value = 'We’re building the world’s most international account',
   ...props
-}: Partial<ComponentProps<typeof LegacyListItem>>) => {
+}: Partial<LegacyListItemProps>) => {
   return <LegacyListItem title={title} value={value} {...props} />;
 };

package/src/_deprecated/Select/Option/Option.test.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { Person } from '@transferwise/icons';
-import Option, { Props as OptionProps } from './Option';
+import Option, { type OptionProps } from './Option';
 describe('Option', () => {
   const defaultProps: OptionProps<string> = {

package/src/_deprecated/Select/Option/Option.tsx CHANGED Viewed

@@ -6,7 +6,7 @@ import { cloneElement, ReactElement, ReactNode } from 'react';
 import Body from '../../../Body';
 import { Typography } from '../../../common';
-export type Props<T> = {
+export type OptionProps<T> = {
   label: ReactNode;
   value: T;
   currency?: string;
@@ -27,7 +27,7 @@ function Option<T>({
   icon,
   selected = false,
   testId,
-}: Props<T>) {
+}: OptionProps<T>) {
   const iconElement = icon
     ? cloneElement(icon as ReactElement<IdIconProps>, {
         size: 24,

package/src/_deprecated/Select/SearchBox/SearchBox.tsx CHANGED Viewed

@@ -4,13 +4,13 @@ import { forwardRef, InputHTMLAttributes } from 'react';
 import { Input } from '../../../Inputs/Input/Input';
-type Props = {
+type SearchBoxProps = {
   id?: string;
   classNames?: Record<string, string>;
   focusedOptionId?: string;
 } & Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onClick' | 'placeholder' | 'value'>;
-const SearchBox = forwardRef<HTMLInputElement, Props>(
+const SearchBox = forwardRef<HTMLInputElement, SearchBoxProps>(
   (
     {
       id,

package/src/common/Circle/Circle.tsx CHANGED Viewed

@@ -5,7 +5,7 @@ import { useMedia } from '../hooks/useMedia';
 export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72 | 88 | 96;
-export type Props = {
+export type CircleProps = {
   /**
    * Modify underlying element, `div` by default
    */
@@ -64,7 +64,7 @@ const Circle = forwardRef(function Circle(
     className,
     style,
     ...props
-  }: Props,
+  }: CircleProps,
   ref,
 ) {
   const isTinyViewport = useMedia(`(max-width: ${Breakpoint.EXTRA_SMALL}px)`);

package/src/common/Circle/index.ts CHANGED Viewed

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

package/src/index.ts CHANGED Viewed

@@ -25,6 +25,7 @@ export type {
   ButtonProps as LegacyButtonProps,
   AnchorElementProps,
 } from './Button';
+export type { BodyProps } from './Body';
 export type { CardProps } from './_deprecated/Card';
 export type {
   CarouselProps,
@@ -63,6 +64,7 @@ export type {
   DefinitionListLayout,
 } from './DefinitionList';
 export type { DimmerProps } from './Dimmer';
+export type { DisplayProps } from './Display';
 export type { DrawerProps } from './Drawer';
 export type { DividerProps } from './Divider';
 export type { HeaderProps } from './Header';
@@ -89,6 +91,7 @@ export type { TextAreaProps } from './Inputs/TextArea/TextArea';
 export type { InstructionsListProps } from './InstructionsList';
 export type { LabelProps, LabelOptionalProps, LabelDescriptionProps } from './Label';
 export type { LegacyListItemProps } from './_deprecated/LegacyListItem';
+export type { LinkProps } from './Link';
 export type { LoaderProps } from './Loader';
 export type { MarkdownProps } from './Markdown';
 export type { ModalProps } from './Modal';
@@ -145,6 +148,7 @@ export type { SwitchOptionProps } from './_deprecated/SwitchOption';
 export type { TabItem, TabsProps, TabProps, TabListProps, TabPanelProps } from './Tabs';
 export type { TextareaWithDisplayFormatProps } from './TextareaWithDisplayFormat';
 export type { TileProps } from './Tile';
+export type { TitleProps } from './Title';
 export type { TooltipProps } from './Tooltip';
 export type { TypeaheadOption, TypeaheadProps } from './Typeahead';
 export type { UploadProps } from './Upload';

package/src/main.css CHANGED Viewed

@@ -28611,6 +28611,36 @@ button.np-option {
     margin-bottom: 8px;
     margin-bottom: var(--size-8);
   }
+  .tw-definition-list.tw-definition-list--horizontal-right-aligned {
+    display: grid;
+    grid-template-columns: minmax(0, max-content) minmax(0, max-content);
+    grid-column-gap: 52px;
+    grid-column-gap: var(--size-52);
+    -moz-column-gap: 52px;
+         column-gap: 52px;
+    -moz-column-gap: var(--size-52);
+         column-gap: var(--size-52);
+    justify-content: space-between;
+  }
+  .tw-definition-list.tw-definition-list--horizontal-right-aligned .tw-definition-list__item {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-column: 1 / -1;
+  }
+  .tw-definition-list.tw-definition-list--horizontal-right-aligned .tw-definition-list__item dt {
+    max-width: none;
+    min-width: 0;
+    word-wrap: anywhere;
+    margin-right: 0;
+  }
+  [dir="rtl"] .tw-definition-list.tw-definition-list--horizontal-right-aligned .tw-definition-list__item dt {
+    margin-left: 0;
+    margin-right: 0;
+    margin-right: initial;
+  }
+  .tw-definition-list.tw-definition-list--horizontal-right-aligned .tw-definition-list__item dd {
+    min-width: 0;
+  }
 }
 .np-theme-personal .tw-definition-list dt {
@@ -31453,7 +31483,7 @@ html:not([dir="rtl"]) .np-navigation-option {
 .wds-nudge-media-documents {
   margin-left: -8px;
-  margin-top: 22px;
+  margin-top: 8px;
   position: absolute;
   width: 120px;
 }
@@ -32682,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 CHANGED Viewed

@@ -78,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";