@transferwise/components 0.0.0-experimental-c990279 → 0.0.0-experimental-826e553

package/build/upload/steps/processingStep/processingStep.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var Button_resolver = require('../../../button/Button.resolver.js');
 require('../../../common/theme.js');
 require('../../../common/direction.js');
-require('@transferwise/neptune-tokens');
 require('../../../common/propsValues/control.js');
+require('../../../common/propsValues/breakpoint.js');
 require('../../../common/propsValues/size.js');
 var typography = require('../../../common/propsValues/typography.js');
 require('../../../common/propsValues/width.js');

package/build/upload/steps/processingStep/processingStep.mjs

@@ -1,8 +1,8 @@
 import Button from '../../../button/Button.resolver.mjs';
 import '../../../common/theme.mjs';
 import '../../../common/direction.mjs';
-import '@transferwise/neptune-tokens';
 import '../../../common/propsValues/control.mjs';
+import '../../../common/propsValues/breakpoint.mjs';
 import '../../../common/propsValues/size.mjs';
 import { Typography } from '../../../common/propsValues/typography.mjs';
 import '../../../common/propsValues/width.mjs';

package/build/upload/steps/uploadImageStep/uploadImageStep.js

@@ -7,8 +7,8 @@ var React = require('react');
 var StatusIcon = require('../../../statusIcon/StatusIcon.js');
 require('../../../common/theme.js');
 require('../../../common/direction.js');
-require('@transferwise/neptune-tokens');
 require('../../../common/propsValues/control.js');
+require('../../../common/propsValues/breakpoint.js');
 var size = require('../../../common/propsValues/size.js');
 require('../../../common/propsValues/typography.js');
 require('../../../common/propsValues/width.js');

package/build/upload/steps/uploadImageStep/uploadImageStep.mjs

@@ -3,8 +3,8 @@ import { PureComponent, createRef } from 'react';
 import StatusIcon from '../../../statusIcon/StatusIcon.mjs';
 import '../../../common/theme.mjs';
 import '../../../common/direction.mjs';
-import '@transferwise/neptune-tokens';
 import '../../../common/propsValues/control.mjs';
+import '../../../common/propsValues/breakpoint.mjs';
 import { Size } from '../../../common/propsValues/size.mjs';
 import '../../../common/propsValues/typography.mjs';
 import '../../../common/propsValues/width.mjs';

package/build/uploadInput/UploadInput.js

@@ -8,8 +8,8 @@ var reactIntl = require('react-intl');
 var Button_resolver = require('../button/Button.resolver.js');
 require('../common/theme.js');
 require('../common/direction.js');
-require('@transferwise/neptune-tokens');
 var control = require('../common/propsValues/control.js');
+require('../common/propsValues/breakpoint.js');
 require('../common/propsValues/size.js');
 require('../common/propsValues/typography.js');
 require('../common/propsValues/width.js');

package/build/uploadInput/UploadInput.mjs

@@ -4,8 +4,8 @@ import { useIntl } from 'react-intl';
 import Button from '../button/Button.resolver.mjs';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
-import '@transferwise/neptune-tokens';
 import { ControlType, Priority } from '../common/propsValues/control.mjs';
+import '../common/propsValues/breakpoint.mjs';
 import '../common/propsValues/size.mjs';
 import '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';

package/build/uploadInput/uploadButton/UploadButton.js

@@ -9,8 +9,8 @@ var reactIntl = require('react-intl');
 var Body = require('../../body/Body.js');
 require('../../common/theme.js');
 require('../../common/direction.js');
-require('@transferwise/neptune-tokens');
 require('../../common/propsValues/control.js');
+require('../../common/propsValues/breakpoint.js');
 require('../../common/propsValues/size.js');
 var typography = require('../../common/propsValues/typography.js');
 require('../../common/propsValues/width.js');

package/build/uploadInput/uploadButton/UploadButton.mjs

@@ -5,8 +5,8 @@ import { useIntl } from 'react-intl';
 import Body from '../../body/Body.mjs';
 import '../../common/theme.mjs';
 import '../../common/direction.mjs';
-import '@transferwise/neptune-tokens';
 import '../../common/propsValues/control.mjs';
+import '../../common/propsValues/breakpoint.mjs';
 import '../../common/propsValues/size.mjs';
 import { Typography } from '../../common/propsValues/typography.mjs';
 import '../../common/propsValues/width.mjs';

package/build/uploadInput/uploadButton/defaults.js

@@ -2,8 +2,8 @@
 
 require('../../common/theme.js');
 require('../../common/direction.js');
-require('@transferwise/neptune-tokens');
 require('../../common/propsValues/control.js');
+require('../../common/propsValues/breakpoint.js');
 require('../../common/propsValues/size.js');
 require('../../common/propsValues/typography.js');
 require('../../common/propsValues/width.js');

package/build/uploadInput/uploadButton/defaults.mjs

@@ -1,7 +1,7 @@
 import '../../common/theme.mjs';
 import '../../common/direction.mjs';
-import '@transferwise/neptune-tokens';
 import '../../common/propsValues/control.mjs';
+import '../../common/propsValues/breakpoint.mjs';
 import '../../common/propsValues/size.mjs';
 import '../../common/propsValues/typography.mjs';
 import '../../common/propsValues/width.mjs';

package/build/uploadInput/uploadItem/UploadItem.js

@@ -9,8 +9,8 @@ var reactIntl = require('react-intl');
 var Body = require('../../body/Body.js');
 require('../../common/theme.js');
 require('../../common/direction.js');
-require('@transferwise/neptune-tokens');
 require('../../common/propsValues/control.js');
+require('../../common/propsValues/breakpoint.js');
 var size = require('../../common/propsValues/size.js');
 var typography = require('../../common/propsValues/typography.js');
 require('../../common/propsValues/width.js');

package/build/uploadInput/uploadItem/UploadItem.mjs

@@ -5,8 +5,8 @@ import { useIntl } from 'react-intl';
 import Body from '../../body/Body.mjs';
 import '../../common/theme.mjs';
 import '../../common/direction.mjs';
-import '@transferwise/neptune-tokens';
 import '../../common/propsValues/control.mjs';
+import '../../common/propsValues/breakpoint.mjs';
 import { Size } from '../../common/propsValues/size.mjs';
 import { Typography } from '../../common/propsValues/typography.mjs';
 import '../../common/propsValues/width.mjs';

package/build/withDisplayFormat/WithDisplayFormat.js

@@ -6,8 +6,8 @@ var React = require('react');
 var historyNavigator = require('../common/historyNavigator/historyNavigator.js');
 require('../common/theme.js');
 require('../common/direction.js');
-require('@transferwise/neptune-tokens');
 require('../common/propsValues/control.js');
+require('../common/propsValues/breakpoint.js');
 require('../common/propsValues/size.js');
 require('../common/propsValues/typography.js');
 require('../common/propsValues/width.js');

package/build/withDisplayFormat/WithDisplayFormat.mjs

@@ -2,8 +2,8 @@ import * as React from 'react';
 import HistoryNavigator from '../common/historyNavigator/historyNavigator.mjs';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
-import '@transferwise/neptune-tokens';
 import '../common/propsValues/control.mjs';
+import '../common/propsValues/breakpoint.mjs';
 import '../common/propsValues/size.mjs';
 import '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-c990279",
+  "version": "0.0.0-experimental-826e553",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -87,7 +87,7 @@
     "storybook-addon-tag-badges": "^3.1.0",
     "storybook-addon-test-codegen": "^3.0.1",
     "@transferwise/less-config": "3.1.2",
-    "@transferwise/neptune-css": "0.0.0-experimental-c990279",
+    "@transferwise/neptune-css": "14.27.1",
     "@wise/components-theming": "1.10.1",
     "@wise/wds-configs": "0.0.0"
   },
@@ -104,11 +104,9 @@
     "@babel/runtime": "^7.29.2",
     "@floating-ui/react": "^0.27.19",
     "@headlessui/react": "^2.2.9",
-    "@popperjs/core": "^2.11.8",
     "@react-aria/focus": "^3.21.5",
     "@react-aria/overlays": "^3.31.2",
     "@transferwise/formatting": "^2.14.0",
-    "@transferwise/neptune-tokens": "0.0.0-experimental-c7adfac",
     "@transferwise/neptune-validation": "^3.3.3",
     "clsx": "^2.1.1",
     "commonmark": "^0.31.2",
@@ -117,9 +115,9 @@
     "lodash.clamp": "^4.0.3",
     "lodash.debounce": "^4.0.8",
     "merge-props": "^6.0.0",
-    "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
-    "virtua": "^0.48.8"
+    "virtua": "^0.48.8",
+    "@transferwise/neptune-tokens": "^8.20.3"
   },
   "publishConfig": {
     "access": "public",

package/src/accordion/Accordion.css

@@ -18,7 +18,7 @@
   border-bottom: 1px solid rgba(0,0,0,0.10196);
   border-bottom: 1px solid var(--color-border-neutral);
 }
-@media (min-width: 320px) {
+@media (min-width: 480px) {
   .np-accordion-item__content.has-icon {
     padding-left: 68px;
   }

package/src/card/Card.css

@@ -24,13 +24,13 @@
 .np-card--inactive .decision {
   cursor: default;
 }
-@media (min-width: 320px) {
+@media (min-width: 480px) {
   .np-card--has-icon .np-card__content {
     padding: 24px 72px;
     padding: var(--size-24) var(--size-72);
   }
 }
-@media (min-width: 320px) {
+@media (min-width: 480px) {
   .np-card--has-icon .np-card__divider--expanded {
     margin: 0 72px;
     margin: 0 var(--size-72);

package/src/carousel/Carousel.css

@@ -13,7 +13,7 @@
   padding: 8px;
   padding: var(--size-8);
 }
-@media (max-width: 839.98px) {
+@media (max-width: 767px) {
   .carousel {
     gap: 8px;
     gap: var(--size-8);
@@ -51,14 +51,14 @@
   -webkit-scroll-snap-align: center;
   transition: all 0.4s !important;
 }
-@media (min-width: 1160px) {
+@media (min-width: 1200px) {
   .carousel__card {
     min-width: 280px;
     width: 280px;
     height: 280px;
   }
 }
-@media (min-width: 840px) {
+@media (min-width: 768px) {
   .carousel-wrapper {
     overflow: visible;
   }
@@ -67,14 +67,14 @@
     margin: 0 calc(-1 * var(--size-8));
   }
 }
-@media (max-width: 1159.98px) {
+@media (max-width: 1199px) {
   .carousel__card {
     min-width: 242px;
     width: 242px;
     height: 242px;
   }
 }
-@media (max-width: 839.98px) {
+@media (max-width: 767px) {
   .carousel__card {
     min-width: 336px;
     width: 336px;

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';
 

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.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;

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;
 

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/panel/Panel.tsx

@@ -1,3 +1,12 @@
+import {
+  arrow as arrowMiddleware,
+  autoUpdate,
+  flip as flipMiddleware,
+  offset,
+  type Placement,
+  shift,
+  useFloating,
+} from '@floating-ui/react';
 import { clsx } from 'clsx';
 import {
   CSSProperties,
@@ -7,21 +16,19 @@ import {
   SyntheticEvent,
   forwardRef,
   useContext,
-  useEffect,
-  useState,
+  useRef,
 } from 'react';
-import { usePopper } from 'react-popper';
 
 import { Position, PositionBottom, PositionLeft, PositionRight, PositionTop } from '..';
 import Dimmer from '../../dimmer';
 import { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';
 
-const POPOVER_OFFSET = [0, 16];
+const POPOVER_OFFSET = 16;
 
 // By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space
 // the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.
 // This mapping forces popover to try the four available positions before going back to the initial chosen one.
-const fallbackPlacements = {
+const fallbackPlacements: Record<string, Placement[]> = {
   [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],
   [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],
   [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],
@@ -57,56 +64,40 @@ const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(
   }: PanelProps,
   reference,
 ) {
-  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  const arrowRef = useRef<HTMLDivElement | null>(null);
 
-  const modifiers = [];
-
-  if (altAxis) {
-    modifiers.push({
-      // https://popper.js.org/docs/v2/modifiers/prevent-overflow
-      name: 'preventOverflow',
-      options: {
-        altAxis: true,
-        tether: false,
-      },
-    });
-  }
+  const middleware = [];
 
   if (arrow) {
-    modifiers.push({
-      name: 'arrow',
-      options: {
-        element: arrowElement,
-        options: {
-          padding: 8, // 8px from the edges of the popper
-        },
-      },
-    });
-    // This lets you displace a popper element from its reference element.
-    modifiers.push({ name: 'offset', options: { offset: POPOVER_OFFSET } });
+    middleware.push(offset(POPOVER_OFFSET));
+    middleware.push(arrowMiddleware({ element: arrowRef, padding: 8 }));
   }
+
   if (flip && fallbackPlacements[position]) {
-    modifiers.push({
-      name: 'flip',
-      options: {
+    middleware.push(
+      flipMiddleware({
         fallbackPlacements: fallbackPlacements[position],
-      },
-    });
+      }),
+    );
   }
 
-  const { styles, attributes, forceUpdate } = usePopper(anchorRef.current, popperElement, {
+  if (altAxis) {
+    middleware.push(shift());
+  }
+
+  const { refs, floatingStyles, placement, middlewareData } = useFloating({
     placement: position,
-    modifiers,
+    middleware,
+    elements: {
+      reference: anchorRef.current,
+    },
+    whileElementsMounted: autoUpdate,
   });
 
-  // If the trigger is not visible when the position is calculated, it will be incorrect. Because this can happen repeatedly (on resize for example),
-  // it is most simple just to always position before opening
-  useEffect(() => {
-    if (open && forceUpdate) {
-      forceUpdate();
-    }
-  }, [open]);
+  const arrowStyle: CSSProperties = {
+    ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),
+    ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),
+  };
 
   const contentStyle: CSSProperties = {
     ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),
@@ -119,18 +110,16 @@ const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(
       <div
         id={overlayId}
         {...rest}
-        ref={setPopperElement}
+        ref={refs.setFloating}
         role="dialog"
-        style={{ ...styles.popper }}
-        {...attributes.popper}
+        style={floatingStyles}
+        data-popper-placement={placement}
         className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}
       >
         <div ref={reference} style={contentStyle} className={clsx('np-panel__content')}>
           {children}
           {/* Arrow has to stay inside content to get the same animations as the "dialog" and to get hidden when panel is closed. */}
-          {arrow && (
-            <div ref={setArrowElement} className={clsx('np-panel__arrow')} style={styles.arrow} />
-          )}
+          {arrow && <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />}
         </div>
       </div>
     </Dimmer>

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/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

@@ -246,10 +246,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,