@transferwise/components 46.142.0 → 46.143.0

package/src/common/responsivePanel/ResponsivePanel.test.js

@@ -1,6 +1,7 @@
-import { Breakpoint, Position } from '..';
+import { Breakpoint } from '@transferwise/neptune-tokens';
+import { Position } from '..';
 import { mockMatchMedia, render, screen } from '../../test-utils';
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import ResponsivePanel from './ResponsivePanel';
 

package/src/container/Container.css

@@ -9,17 +9,17 @@
   padding-inline: 16px;
   padding-inline: var(--wds-container-padding-inline);
 }
-@media (min-width: 576px) {
+@media (min-width: 600px) {
   .wds-container {
     --wds-container-padding-inline: var(--size-16);
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 840px) {
   .wds-container {
     --wds-container-padding-inline: var(--size-32);
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 1160px) {
   .wds-container {
     --wds-container-padding-inline: var(--size-40);
   }

package/src/criticalBanner/CriticalCommsBanner.css

@@ -44,7 +44,7 @@
   --Button-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover);
   --Button-background-active: var(--color-sentiment-interactive-secondary-neutral-active);
 }
-@media (min-width: 768px) {
+@media (min-width: 840px) {
   .critical-comms .alert-warning .alert__message,
   .critical-comms .alert-negative .alert__message,
   .critical-comms .alert-neutral .alert__message {

package/src/dateInput/DateInput.css

@@ -9,7 +9,7 @@
 .tw-date .tw-date--day {
   margin-bottom: 0;
 }
-@media (min-width: 576px) {
+@media (min-width: 600px) {
   .np-theme-personal .tw-date label {
     margin-bottom: 0;
   }

package/src/dateLookup/DateLookup.tsx

@@ -1,11 +1,11 @@
 import { clsx } from 'clsx';
 import { createRef, PureComponent, KeyboardEvent } from 'react';
+import { Breakpoint } from '@transferwise/neptune-tokens';
 
 import {
   Size,
   MonthFormat,
   Position,
-  Breakpoint,
   type SizeSmall,
   type SizeMedium,
   type SizeLarge,

package/src/decision/Decision.test.tsx

@@ -1,4 +1,5 @@
-import { Breakpoint, Size } from '../common';
+import { Breakpoint } from '@transferwise/neptune-tokens';
+import { Size } from '../common';
 import { mockMatchMedia } from '../mocks';
 import { render, screen } from '../test-utils';
 

package/src/decision/Decision.tsx

@@ -1,6 +1,7 @@
 import { clsx } from 'clsx';
+import { Breakpoint } from '@transferwise/neptune-tokens';
 
-import { Size, Breakpoint, SizeSmall, SizeMedium } from '../common';
+import { Size, SizeSmall, SizeMedium } from '../common';
 import { useScreenSize } from '../common/hooks/useScreenSize';
 import NavigationOption from '../navigationOption';
 import Tile from '../tile';

package/src/definitionList/DefinitionList.css

@@ -9,12 +9,12 @@
 .tw-definition-list__button {
   margin-top: -50%;
 }
-@media (max-width: 576px) {
+@media (max-width: 599.98px) {
   .tw-definition-list--right-aligned-desktop {
     justify-content: space-between;
   }
 }
-@media (min-width: 576px) {
+@media (min-width: 600px) {
   .tw-definition-list--right-aligned-desktop {
     justify-content: flex-end;
   }

package/src/definitionList/DefinitionList.less

@@ -15,13 +15,13 @@
     margin-top: -50%;
   }
 
-  @media (max-width: 576px) {
+  @media (--screen-xs-max) {
     &--right-aligned-desktop {
       justify-content: space-between;
     }
   }
 
-  @media (min-width: 576px) {
+  @media (--screen-sm) {
     &--right-aligned-desktop {
       justify-content: flex-end;
     }

package/src/drawer/Drawer.css

@@ -9,7 +9,7 @@
   max-height: 100vh;
   max-height: 100dvh;
 }
-@media (max-width: 770px) {
+@media (max-width: 839.98px) {
   .np-drawer {
     max-width: none;
     max-width: initial;
@@ -43,7 +43,7 @@
   padding: 0 16px;
   padding: 0 var(--size-16);
 }
-@media (min-width: 768px) {
+@media (min-width: 840px) {
   .np-drawer .np-drawer-header,
   .np-drawer .np-drawer-footer {
     padding: 24px;

package/src/drawer/Drawer.less

@@ -4,14 +4,15 @@
   justify-content: space-between;
   width: 100vw;
   max-width: 600px;
-  @media (max-width: 770px) {
-    max-width: unset;
-  }
   height: 100vh;
   height: 100dvh;
   max-height: 100vh;
   max-height: 100dvh;
 
+  @media (--screen-sm-max) {
+    max-width: unset;
+  }
+
   .np-drawer-header {
     min-height: var(--size-56);
     padding: var(--size-24);

package/src/flowNavigation/FlowNavigation.css

@@ -10,7 +10,7 @@
 .np-flow-navigation__content {
   width: 100%;
   min-width: 320px;
-  max-width: 1164px;
+  max-width: calc(1160px - 36px);
 }
 .np-flow-navigation__stepper {
   padding-bottom: 0 !important;

package/src/flowNavigation/FlowNavigation.less

@@ -1,3 +1,4 @@
+@import (reference) "@transferwise/neptune-tokens/breakpoints.less";
 @import (reference) "./../styles/less/addons/_spacing-utilities.less";
 
 .np-flow-navigation {
@@ -14,7 +15,7 @@
   &__content {
     width: 100%;
     min-width: 320px;
-    max-width: 1164px;
+    max-width: calc(@screen-lg-min - 36px);
   }
 
   &__stepper {

package/src/flowNavigation/FlowNavigation.story.tsx

@@ -1,9 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Breakpoint } from '@transferwise/neptune-tokens';
 import { useState } from 'react';
 import AvatarView from '../avatarView';
 import Body from '../body';
 import Button from '../button';
-import { Breakpoint, ProfileType, Typography } from '../common';
+import { ProfileType, Typography } from '../common';
 import Logo from '../logo';
 import OverlayHeader from '../overlayHeader';
 import { lorem10 } from '../test-utils';
@@ -46,8 +47,7 @@ const meta: Meta<StoryArgs> = {
 export default meta;
 
 const viewports = [
-  Breakpoint.ZOOM_400 - 10,
-  Breakpoint.ZOOM_400 + 10,
+  Breakpoint.EXTRA_SMALL - 10,
   Breakpoint.EXTRA_SMALL + 10,
   Breakpoint.SMALL + 10,
   Breakpoint.MEDIUM + 10,
@@ -314,6 +314,9 @@ export const WithOverlayHeaderComparison: Story = {
     done: false,
     avatarURL: '../tapestry-01.png',
   },
+  parameters: {
+    padding: '0',
+  },
   render: (args) => {
     const [activeStep, setActiveStep] = useState(4);
     const [closed, setClosed] = useState(false);

package/src/flowNavigation/FlowNavigation.test.js

@@ -1,5 +1,5 @@
+import { Breakpoint } from '@transferwise/neptune-tokens';
 import AvatarView from '../avatarView';
-import { Breakpoint } from '../common';
 import { mockMatchMedia, render, screen } from '../test-utils';
 
 import FlowNavigation from './FlowNavigation';

package/src/flowNavigation/FlowNavigation.tsx

@@ -1,7 +1,8 @@
 import { clsx } from 'clsx';
 import { useIntl } from 'react-intl';
+import { Breakpoint } from '@transferwise/neptune-tokens';
 
-import { Breakpoint, Layout } from '../common';
+import { Layout } from '../common';
 import { CloseButton } from '../common/closeButton';
 import FlowHeader from '../common/flowHeader/FlowHeader';
 import Logo from '../logo';

package/src/index.ts

@@ -248,10 +248,10 @@ export { default as useSnackbar } from './snackbar/useSnackbar';
 /**
  * Enums
  */
+export { Breakpoint } from '@transferwise/neptune-tokens';
 export { AlertArrowPosition } from './alert/Alert';
 export { AvatarType } from './avatar';
 export {
-  Breakpoint,
   ControlType,
   DateMode,
   Direction,

package/src/inputs/Input.css

@@ -111,12 +111,12 @@
     hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
-  @media (min-width: 768px) {
+  @media (min-width: 840px) {
     .np-form-control--size-lg {
       hyphenate-limit-chars: 8 3;
     }
   }
-  @media (min-width: 992px) {
+  @media (min-width: 1160px) {
     .np-form-control--size-lg {
       hyphenate-limit-chars: 10 4 3;
     }
@@ -128,7 +128,7 @@
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }
-  @media (min-width: 992px) {
+  @media (min-width: 1160px) {
     .np-form-control--size-lg {
       -webkit-hyphenate-limit-before: 4;
     }

package/src/inputs/SelectInput/Options/SelectInputOptions.css

@@ -6,7 +6,7 @@
 .np-select-input-options-container:focus {
   outline: none;
 }
-@media (min-width: 576px) {
+@media (min-width: 600px) {
   .np-select-input-options-container {
     max-height: 28rem /* 448px */;
   }
@@ -42,7 +42,7 @@
   scroll-padding-bottom: var(--size-8);
   overflow-y: auto;
 }
-@media (min-width: 576px) {
+@media (min-width: 600px) {
   .np-select-input-listbox-container {
     height: auto;
   }

package/src/inputs/SelectInput/SelectInput.css

@@ -250,7 +250,7 @@
 .np-select-input-options-container:focus {
   outline: none;
 }
-@media (min-width: 576px) {
+@media (min-width: 600px) {
   .np-select-input-options-container {
     max-height: 28rem /* 448px */;
   }
@@ -286,7 +286,7 @@
   scroll-padding-bottom: var(--size-8);
   overflow-y: auto;
 }
-@media (min-width: 576px) {
+@media (min-width: 600px) {
   .np-select-input-listbox-container {
     height: auto;
   }

package/src/inputs/SelectInput/SelectInput.tsx

@@ -1,8 +1,8 @@
 import mergeProps from 'merge-props';
 import { useCallback, useEffect, useRef, useState, useDeferredValue } from 'react';
 import { Listbox as ListboxBase } from '@headlessui/react';
+import { Breakpoint } from '@transferwise/neptune-tokens';
 import { useScreenSize } from '../../common/hooks/useScreenSize';
-import { Breakpoint } from '../../common/propsValues/breakpoint';
 import { useEffectEvent } from '../../common/hooks/useEffectEvent';
 import { useInputAttributes } from '../contexts';
 

package/src/inputs/TextArea.css

@@ -111,12 +111,12 @@
     hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
-  @media (min-width: 768px) {
+  @media (min-width: 840px) {
     .np-form-control--size-lg {
       hyphenate-limit-chars: 8 3;
     }
   }
-  @media (min-width: 992px) {
+  @media (min-width: 1160px) {
     .np-form-control--size-lg {
       hyphenate-limit-chars: 10 4 3;
     }
@@ -128,7 +128,7 @@
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }
-  @media (min-width: 992px) {
+  @media (min-width: 1160px) {
     .np-form-control--size-lg {
       -webkit-hyphenate-limit-before: 4;
     }

package/src/logo/Logo.tsx

@@ -92,7 +92,7 @@ const logoAssets: Record<LogoAssetName, () => JSX.Element> = {
 
 /**
  * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports
- * and the full wordmark on ≥576px (small breakpoint and above).
+ * and the full wordmark on ≥600px (small breakpoint and above).
  *
  * @see {@link https://wise.design/foundations/logo Design Spec}
  */