@transferwise/components 0.0.0-experimental-21e0162 → 0.0.0-experimental-e611dd1

package/src/circularButton/CircularButton.tsx

@@ -1,8 +1,7 @@
 import { clsx } from 'clsx';
-import { Breakpoint } from '@transferwise/neptune-tokens';
 
 import Body from '../body/Body';
-import { ControlType, Priority, Typography } from '../common';
+import { Breakpoint, ControlType, Priority, Typography } from '../common';
 import IconButton, { IconButtonProps } from '../iconButton';
 import { useMedia } from '../common/hooks/useMedia';
 
@@ -35,7 +34,7 @@ const CircularButton = ({
   priority = Priority.PRIMARY,
   type = 'default',
 }: CircularButtonProps) => {
-  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.EXTRA_SMALL}px)`);
+  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
   return (
     <label
       className={clsx(

package/src/common/Option/Option.css

@@ -92,7 +92,7 @@ button.np-option {
   max-width: none;
   width: auto;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .np-theme-personal .np-option {
     border-radius: 10px;
     border-radius: var(--radius-small);

package/src/common/baseCard/BaseCard.css

@@ -21,7 +21,7 @@
   box-sizing: border-box;
   overflow: hidden;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .np-Card {
     max-width: var(--Card-max-width);
   }

package/src/common/bottomSheet/BottomSheet.test.story.tsx

@@ -5,7 +5,7 @@ import { fireEvent, within } from 'storybook/test';
 import { FastFlag } from '@transferwise/icons';
 import { lorem10, lorem100, lorem500 } from '../../test-utils';
 import { Typography } from '../propsValues/typography';
-import Alert from '../../alert';
+import { InfoPrompt } from '../../prompt/InfoPrompt';
 import Body from '../../body';
 import Button from '../../button';
 import Title from '../../title';
@@ -45,10 +45,11 @@ export const SmoothScrollReset: Story = {
     children: (
       <>
         <Title type={Typography.TITLE_SECTION}>Observe the document</Title>
-        <Alert className="m-t-2" type="warning">
-          Once the <code>BottomSheet</code> opens, the document underneath should be static and
-          should not scroll.
-        </Alert>
+        <InfoPrompt
+          className="m-t-2"
+          sentiment="warning"
+          description="Once the BottomSheet opens, the document underneath should be static and should not scroll."
+        />
         <Body as="p">{lorem100}</Body>
         <Body as="p">{lorem100}</Body>
       </>

package/src/common/bottomSheet/BottomSheet.tsx

@@ -8,7 +8,6 @@ import {
   useRef,
   useState,
 } from 'react';
-import { Breakpoint } from '@transferwise/neptune-tokens';
 
 import Dimmer from '../../dimmer';
 import Drawer from '../../drawer';
@@ -19,6 +18,7 @@ import { CommonProps } from '../commonProps';
 import { isServerSide } from '../domHelpers';
 import { useConditionalListener } from '../hooks';
 import { useMedia } from '../hooks/useMedia';
+import { Breakpoint } from '../propsValues/breakpoint';
 import { Position } from '../propsValues/position';
 
 const INITIAL_Y_POSITION = 0;
@@ -178,7 +178,7 @@ const BottomSheet = ({ role = 'dialog', ...props }: BottomSheetProps) => {
     };
   }
 
-  const is400Zoom = useMedia(`(max-width: ${Breakpoint.EXTRA_SMALL}px)`);
+  const is400Zoom = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
 
   const overlayId = useContext(OverlayIdContext);
 

package/src/common/circle/Circle.tsx

@@ -1,7 +1,7 @@
 import { HTMLAttributes, forwardRef } from 'react';
 import { clsx } from 'clsx';
-import { Breakpoint } from '@transferwise/neptune-tokens';
 import { useMedia } from '../hooks/useMedia';
+import { Breakpoint } from '../propsValues/breakpoint';
 
 export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;
 
@@ -63,7 +63,7 @@ const Circle = forwardRef(function Circle(
   }: Props,
   ref,
 ) {
-  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.EXTRA_SMALL}px)`);
+  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
   return (
     <Element
       {...props}

package/src/common/hooks/useLayout/useLayout.ts

@@ -1,4 +1,4 @@
-import { Breakpoint } from '@transferwise/neptune-tokens';
+import { Breakpoint } from '../../propsValues/breakpoint';
 import { useScreenSize } from '../useScreenSize';
 
 /**

package/src/common/hooks/useScreenSize.ts

@@ -1,4 +1,4 @@
-import { Breakpoint } from '@transferwise/neptune-tokens';
+import { Breakpoint } from '../propsValues/breakpoint';
 
 import { useMedia } from './useMedia';
 

package/src/common/index.ts

@@ -4,8 +4,8 @@ export { addNoScrollClass, removeNoScrollClass } from './DOMOperations';
 export * from './theme';
 export * from './direction';
 // Props
-export { Breakpoint } from '@transferwise/neptune-tokens';
 export * from './propsValues/control';
+export { Breakpoint } from './propsValues/breakpoint';
 export * from './propsValues/size';
 export * from './propsValues/typography';
 export * from './propsValues/width';

package/src/common/propsValues/breakpoint.ts

@@ -0,0 +1,8 @@
+export enum Breakpoint {
+  ZOOM_400 = 320,
+  EXTRA_SMALL = 480,
+  SMALL = 576,
+  MEDIUM = 768,
+  LARGE = 992,
+  EXTRA_LARGE = 1200,
+}

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

@@ -1,7 +1,6 @@
-import { Breakpoint } from '@transferwise/neptune-tokens';
-import { Position } from '..';
+import { Breakpoint, Position } from '..';
 import { mockMatchMedia, render, screen } from '../../test-utils';
-import React from 'react';
+import React, { forwardRef } 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: 600px) {
+@media (min-width: 576px) {
   .wds-container {
     --wds-container-padding-inline: var(--size-16);
   }
 }
-@media (min-width: 840px) {
+@media (min-width: 768px) {
   .wds-container {
     --wds-container-padding-inline: var(--size-32);
   }
 }
-@media (min-width: 1160px) {
+@media (min-width: 992px) {
   .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: 840px) {
+@media (min-width: 768px) {
   .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: 600px) {
+@media (min-width: 576px) {
   .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,5 +1,4 @@
-import { Breakpoint } from '@transferwise/neptune-tokens';
-import { Size } from '../common';
+import { Breakpoint, Size } from '../common';
 import { mockMatchMedia } from '../mocks';
 import { render, screen } from '../test-utils';
 

package/src/decision/Decision.tsx

@@ -1,7 +1,6 @@
 import { clsx } from 'clsx';
-import { Breakpoint } from '@transferwise/neptune-tokens';
 
-import { Size, SizeSmall, SizeMedium } from '../common';
+import { Size, Breakpoint, 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: 599.98px) {
+@media (max-width: 576px) {
   .tw-definition-list--right-aligned-desktop {
     justify-content: space-between;
   }
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .tw-definition-list--right-aligned-desktop {
     justify-content: flex-end;
   }

package/src/definitionList/DefinitionList.less

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

package/src/drawer/Drawer.css

@@ -43,7 +43,7 @@
   padding: 0 16px;
   padding: 0 var(--size-16);
 }
-@media (min-width: 840px) {
+@media (min-width: 768px) {
   .np-drawer .np-drawer-header,
   .np-drawer .np-drawer-footer {
     padding: 24px;

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,8 +1,7 @@
 import { clsx } from 'clsx';
 import { useIntl } from 'react-intl';
-import { Breakpoint } from '@transferwise/neptune-tokens';
 
-import { Layout } from '../common';
+import { Breakpoint, 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: 840px) {
+  @media (min-width: 768px) {
     .np-form-control--size-lg {
       hyphenate-limit-chars: 8 3;
     }
   }
-  @media (min-width: 1160px) {
+  @media (min-width: 992px) {
     .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: 1160px) {
+  @media (min-width: 992px) {
     .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: 600px) {
+@media (min-width: 576px) {
   .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: 600px) {
+@media (min-width: 576px) {
   .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: 600px) {
+@media (min-width: 576px) {
   .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: 600px) {
+@media (min-width: 576px) {
   .np-select-input-listbox-container {
     height: auto;
   }

package/src/inputs/SelectInput/SelectInput.tsx

@@ -1,8 +1,8 @@
 import mergeProps from 'merge-props';
 import { 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: 840px) {
+  @media (min-width: 768px) {
     .np-form-control--size-lg {
       hyphenate-limit-chars: 8 3;
     }
   }
-  @media (min-width: 1160px) {
+  @media (min-width: 992px) {
     .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: 1160px) {
+  @media (min-width: 992px) {
     .np-form-control--size-lg {
       -webkit-hyphenate-limit-before: 4;
     }

package/src/logo/Logo.css

@@ -11,7 +11,7 @@
 .np-logo-svg--size-sm {
   display: block;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .np-logo-svg--size-sm {
     display: none;
   }
@@ -19,7 +19,7 @@
 .np-logo-svg--size-md {
   display: none;
 }
-@media (min-width: 600px) {
+@media (min-width: 576px) {
   .np-logo-svg--size-md {
     display: block;
   }

package/src/logo/Logo.story.tsx

@@ -99,7 +99,7 @@ export const Types: Story = {
 };
 
 /**
- * Below `600px` the flag-only mark is shown; at `600px` and above the full wordmark is displayed.
+ * Below `576px` the flag-only mark is shown; at `576px` and above the full wordmark is displayed.
  */
 export const Responsive: Story = {
   argTypes: {
@@ -110,7 +110,7 @@ export const Responsive: Story = {
     <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
       <div>
         <span style={{ fontSize: '12px', opacity: 0.6, display: 'block', marginBottom: '0.5rem' }}>
-          {'< 600px (flag only)'}
+          {'< 576px (flag only)'}
         </span>
         <div style={{ display: 'flex', gap: '3rem', alignItems: 'center' }}>
           {Object.values(LogoType).map((type) => (
@@ -125,7 +125,7 @@ export const Responsive: Story = {
       </div>
       <div>
         <span style={{ fontSize: '12px', opacity: 0.6, display: 'block', marginBottom: '0.5rem' }}>
-          {'\u2265 600px (full wordmark)'}
+          {'\u2265 576px (full wordmark)'}
         </span>
         <div style={{ display: 'flex', gap: '3rem', alignItems: 'center' }}>
           {Object.values(LogoType).map((type) => (

package/src/logo/Logo.tsx

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