@transferwise/components 0.0.0-experimental-fa9fbe9 → 0.0.0-experimental-00012dd

package/build/common/bottomSheet/BottomSheet.mjs

@@ -1,5 +1,6 @@
 import { clsx } from 'clsx';
 import { useRef, useState, useContext } from 'react';
+import { Breakpoint } from '@transferwise/neptune-tokens';
 import Dimmer from '../../dimmer/Dimmer.mjs';
 import Drawer from '../../drawer/Drawer.mjs';
 import { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider.mjs';
@@ -8,7 +9,6 @@ import { CloseButton } from '../closeButton/CloseButton.mjs';
 import { isServerSide } from '../domHelpers/documentIosClick.mjs';
 import { useConditionalListener } from '../hooks/useConditionalListener/useConditionalListener.mjs';
 import '../../provider/direction/DirectionProvider.mjs';
-import { Breakpoint } from '../propsValues/breakpoint.mjs';
 import { useMedia } from '../hooks/useMedia.mjs';
 import { Position } from '../propsValues/position.mjs';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -143,7 +143,7 @@ const BottomSheet = ({
       maxHeight: `calc(${screenHeight} - ${safeZoneHeight} - ${topbarHeight})`
     };
   }
-  const is400Zoom = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
+  const is400Zoom = useMedia(`(max-width: ${Breakpoint.EXTRA_SMALL}px)`);
   const overlayId = useContext(OverlayIdContext);
   return is400Zoom ? /*#__PURE__*/jsx(Drawer, {
     "aria-labelledby": props['aria-labelledby'],

package/build/common/bottomSheet/BottomSheet.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.mjs","sources":["../../../src/common/bottomSheet/BottomSheet.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  PropsWithChildren,\n  SyntheticEvent,\n  useContext,\n  useRef,\n  useState,\n} from 'react';\n\nimport Dimmer from '../../dimmer';\nimport Drawer from '../../drawer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../../slidingPanel';\nimport { CloseButton } from '../closeButton';\nimport { CommonProps } from '../commonProps';\nimport { isServerSide } from '../domHelpers';\nimport { useConditionalListener } from '../hooks';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\nimport { Position } from '../propsValues/position';\n\nconst INITIAL_Y_POSITION = 0;\n\nconst CONTENT_SCROLL_THRESHOLD = 1;\n\nconst MOVE_OFFSET_THRESHOLD = 50;\n\nexport type BottomSheetProps = PropsWithChildren<\n  {\n    onClose?: (event: Event | SyntheticEvent) => void;\n    open: boolean;\n  } & CommonProps &\n    Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby' | 'aria-label'>\n>;\n\n/**\n * Neptune: https://transferwise.github.io/neptune/components/bottom-sheet/\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet\n *\n */\nconst BottomSheet = ({ role = 'dialog', ...props }: BottomSheetProps) => {\n  const bottomSheetReference = useRef<HTMLDivElement>(null);\n  const topBarReference = useRef<HTMLDivElement>(null);\n  const contentReference = useRef<HTMLDivElement>(null);\n\n  const [pressed, setPressed] = useState<boolean>(false);\n\n  /**\n   * Used to track `requestAnimationFrame` requests\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#return_value\n   */\n  const animationId = useRef<number>(0);\n\n  /**\n   * Difference between initial coordinate ({@link initialYCoordinate})\n   * and new position (when user moves component), it's get calculated on `onTouchMove` and `onMouseMove` events\n   *\n   * @see {@link calculateOffsetAfterMove}\n   */\n  const moveOffset = useRef<number>(0);\n  const initialYCoordinate = useRef<number>(0);\n\n  // apply shadow to the bottom of top-bar when scroll over content\n  useConditionalListener({\n    attachListener: props.open && !isServerSide(),\n    callback: () => {\n      if (topBarReference.current !== null) {\n        const { classList } = topBarReference.current;\n        if (!isContentScrollPositionAtTop()) {\n          classList.add('np-bottom-sheet--top-bar--shadow');\n        } else {\n          classList.remove('np-bottom-sheet--top-bar--shadow');\n        }\n      }\n    },\n    eventType: 'scroll',\n    parent: isServerSide() ? undefined : document,\n  });\n\n  function move(newHeight: number): void {\n    if (bottomSheetReference.current !== null) {\n      bottomSheetReference.current.style.transform = `translateY(${newHeight}px)`;\n    }\n  }\n\n  function close(event: Event | SyntheticEvent): void {\n    setPressed(false);\n    moveOffset.current = INITIAL_Y_POSITION;\n    if (bottomSheetReference.current !== null) {\n      bottomSheetReference.current.style.removeProperty('transform');\n    }\n    if (props.onClose) {\n      props.onClose(event);\n    }\n  }\n\n  const onSwipeStart = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void => {\n    initialYCoordinate.current = ('touches' in event ? event.touches[0] : event).clientY;\n    setPressed(true);\n  };\n\n  const onSwipeMove = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void => {\n    if (pressed) {\n      const { clientY } = 'touches' in event ? event.touches[0] : event;\n\n      const offset = calculateOffsetAfterMove(clientY);\n      // check whether move is to the bottom only and content scroll position is at the top\n      if (offset > INITIAL_Y_POSITION && isContentScrollPositionAtTop()) {\n        moveOffset.current = offset;\n        animationId.current = requestAnimationFrame(() => {\n          if (animationId.current !== undefined && bottomSheetReference.current !== null) {\n            move(offset);\n          }\n        });\n      }\n    }\n  };\n\n  function onSwipeEnd(\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void {\n    // stop moving component\n    cancelAnimationFrame(animationId.current);\n    setPressed(false);\n    // check whether move down is strong enough\n    // and content scroll position is at the top to close the component\n    if (moveOffset.current > MOVE_OFFSET_THRESHOLD && isContentScrollPositionAtTop()) {\n      close(event);\n    }\n    // otherwise move component back to default (initial) position\n    else {\n      move(INITIAL_Y_POSITION);\n    }\n    moveOffset.current = INITIAL_Y_POSITION;\n  }\n\n  function isContentScrollPositionAtTop(): boolean {\n    return (\n      contentReference?.current?.scrollTop !== undefined &&\n      contentReference.current.scrollTop <= CONTENT_SCROLL_THRESHOLD\n    );\n  }\n\n  /**\n   * Calculates how hard user moves component,\n   * result value used to determine whether to hide component or re-position to default state\n   *\n   * @param afterMoveYCoordinate\n   */\n  function calculateOffsetAfterMove(afterMoveYCoordinate: number): number {\n    return afterMoveYCoordinate - initialYCoordinate.current;\n  }\n\n  /**\n   * Set `max-height` for content part (in order to keep it scrollable for content overflow cases) of the component\n   * and ensures space for safe zone (32px) at the top.\n   */\n  function setContentMaxHeight(): CSSProperties {\n    const safeZoneHeight = '64px';\n    const topbarHeight = '32px';\n    const windowHight: number = isServerSide() ? 0 : window.innerHeight;\n    /**\n     * Calculate _real_ height of the screen (taking into account parts of browser interface).\n     *\n     * See https://css-tricks.com/the-trick-to-viewport-units-on-mobile for more details.\n     */\n    const screenHeight = `${windowHight * 0.01 * 100}px`;\n    return {\n      maxHeight: `calc(${screenHeight} - ${safeZoneHeight} - ${topbarHeight})`,\n    };\n  }\n\n  const is400Zoom = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return is400Zoom ? (\n    <Drawer\n      aria-labelledby={props['aria-labelledby']}\n      aria-label={props['aria-label']}\n      role={role}\n      open={props.open}\n      className={props.className}\n      onClose={close}\n    >\n      {props.children}\n    </Drawer>\n  ) : (\n    <Dimmer open={props.open} fadeContentOnEnter fadeContentOnExit onClose={close}>\n      <SlidingPanel\n        ref={bottomSheetReference}\n        open={props.open}\n        position={Position.BOTTOM}\n        className={clsx('np-bottom-sheet', props.className)}\n      >\n        <div\n          id={overlayId}\n          aria-labelledby={props['aria-labelledby'] || undefined}\n          aria-label={props['aria-label'] || undefined}\n          role={role}\n          aria-modal\n          onTouchStart={onSwipeStart}\n          onTouchMove={onSwipeMove}\n          onTouchEnd={onSwipeEnd}\n          onMouseDown={onSwipeStart}\n          onMouseMove={onSwipeMove}\n          onMouseUp={onSwipeEnd}\n        >\n          <div ref={topBarReference} className=\"np-bottom-sheet--top-bar\">\n            <div className=\"np-bottom-sheet--handler\" />\n            <CloseButton size=\"sm\" className=\"sr-only np-bottom-sheet--close-btn\" onClick={close} />\n          </div>\n          <div\n            ref={contentReference}\n            style={setContentMaxHeight()}\n            className=\"np-bottom-sheet--content\"\n          >\n            {props.children}\n          </div>\n        </div>\n      </SlidingPanel>\n    </Dimmer>\n  );\n};\n\nexport default BottomSheet;\n"],"names":["INITIAL_Y_POSITION","CONTENT_SCROLL_THRESHOLD","MOVE_OFFSET_THRESHOLD","BottomSheet","role","props","bottomSheetReference","useRef","topBarReference","contentReference","pressed","setPressed","useState","animationId","moveOffset","initialYCoordinate","useConditionalListener","attachListener","open","isServerSide","callback","current","classList","isContentScrollPositionAtTop","add","remove","eventType","parent","undefined","document","move","newHeight","style","transform","close","event","removeProperty","onClose","onSwipeStart","touches","clientY","onSwipeMove","offset","calculateOffsetAfterMove","requestAnimationFrame","onSwipeEnd","cancelAnimationFrame","scrollTop","afterMoveYCoordinate","setContentMaxHeight","safeZoneHeight","topbarHeight","windowHight","window","innerHeight","screenHeight","maxHeight","is400Zoom","useMedia","Breakpoint","ZOOM_400","overlayId","useContext","OverlayIdContext","_jsx","Drawer","className","children","Dimmer","fadeContentOnEnter","fadeContentOnExit","SlidingPanel","ref","position","Position","BOTTOM","clsx","_jsxs","id","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","CloseButton","size","onClick"],"mappings":"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"}
+{"version":3,"file":"BottomSheet.mjs","sources":["../../../src/common/bottomSheet/BottomSheet.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  PropsWithChildren,\n  SyntheticEvent,\n  useContext,\n  useRef,\n  useState,\n} from 'react';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport Dimmer from '../../dimmer';\nimport Drawer from '../../drawer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../../slidingPanel';\nimport { CloseButton } from '../closeButton';\nimport { CommonProps } from '../commonProps';\nimport { isServerSide } from '../domHelpers';\nimport { useConditionalListener } from '../hooks';\nimport { useMedia } from '../hooks/useMedia';\nimport { Position } from '../propsValues/position';\n\nconst INITIAL_Y_POSITION = 0;\n\nconst CONTENT_SCROLL_THRESHOLD = 1;\n\nconst MOVE_OFFSET_THRESHOLD = 50;\n\nexport type BottomSheetProps = PropsWithChildren<\n  {\n    onClose?: (event: Event | SyntheticEvent) => void;\n    open: boolean;\n  } & CommonProps &\n    Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby' | 'aria-label'>\n>;\n\n/**\n * Neptune: https://transferwise.github.io/neptune/components/bottom-sheet/\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet\n *\n */\nconst BottomSheet = ({ role = 'dialog', ...props }: BottomSheetProps) => {\n  const bottomSheetReference = useRef<HTMLDivElement>(null);\n  const topBarReference = useRef<HTMLDivElement>(null);\n  const contentReference = useRef<HTMLDivElement>(null);\n\n  const [pressed, setPressed] = useState<boolean>(false);\n\n  /**\n   * Used to track `requestAnimationFrame` requests\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#return_value\n   */\n  const animationId = useRef<number>(0);\n\n  /**\n   * Difference between initial coordinate ({@link initialYCoordinate})\n   * and new position (when user moves component), it's get calculated on `onTouchMove` and `onMouseMove` events\n   *\n   * @see {@link calculateOffsetAfterMove}\n   */\n  const moveOffset = useRef<number>(0);\n  const initialYCoordinate = useRef<number>(0);\n\n  // apply shadow to the bottom of top-bar when scroll over content\n  useConditionalListener({\n    attachListener: props.open && !isServerSide(),\n    callback: () => {\n      if (topBarReference.current !== null) {\n        const { classList } = topBarReference.current;\n        if (!isContentScrollPositionAtTop()) {\n          classList.add('np-bottom-sheet--top-bar--shadow');\n        } else {\n          classList.remove('np-bottom-sheet--top-bar--shadow');\n        }\n      }\n    },\n    eventType: 'scroll',\n    parent: isServerSide() ? undefined : document,\n  });\n\n  function move(newHeight: number): void {\n    if (bottomSheetReference.current !== null) {\n      bottomSheetReference.current.style.transform = `translateY(${newHeight}px)`;\n    }\n  }\n\n  function close(event: Event | SyntheticEvent): void {\n    setPressed(false);\n    moveOffset.current = INITIAL_Y_POSITION;\n    if (bottomSheetReference.current !== null) {\n      bottomSheetReference.current.style.removeProperty('transform');\n    }\n    if (props.onClose) {\n      props.onClose(event);\n    }\n  }\n\n  const onSwipeStart = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void => {\n    initialYCoordinate.current = ('touches' in event ? event.touches[0] : event).clientY;\n    setPressed(true);\n  };\n\n  const onSwipeMove = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void => {\n    if (pressed) {\n      const { clientY } = 'touches' in event ? event.touches[0] : event;\n\n      const offset = calculateOffsetAfterMove(clientY);\n      // check whether move is to the bottom only and content scroll position is at the top\n      if (offset > INITIAL_Y_POSITION && isContentScrollPositionAtTop()) {\n        moveOffset.current = offset;\n        animationId.current = requestAnimationFrame(() => {\n          if (animationId.current !== undefined && bottomSheetReference.current !== null) {\n            move(offset);\n          }\n        });\n      }\n    }\n  };\n\n  function onSwipeEnd(\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void {\n    // stop moving component\n    cancelAnimationFrame(animationId.current);\n    setPressed(false);\n    // check whether move down is strong enough\n    // and content scroll position is at the top to close the component\n    if (moveOffset.current > MOVE_OFFSET_THRESHOLD && isContentScrollPositionAtTop()) {\n      close(event);\n    }\n    // otherwise move component back to default (initial) position\n    else {\n      move(INITIAL_Y_POSITION);\n    }\n    moveOffset.current = INITIAL_Y_POSITION;\n  }\n\n  function isContentScrollPositionAtTop(): boolean {\n    return (\n      contentReference?.current?.scrollTop !== undefined &&\n      contentReference.current.scrollTop <= CONTENT_SCROLL_THRESHOLD\n    );\n  }\n\n  /**\n   * Calculates how hard user moves component,\n   * result value used to determine whether to hide component or re-position to default state\n   *\n   * @param afterMoveYCoordinate\n   */\n  function calculateOffsetAfterMove(afterMoveYCoordinate: number): number {\n    return afterMoveYCoordinate - initialYCoordinate.current;\n  }\n\n  /**\n   * Set `max-height` for content part (in order to keep it scrollable for content overflow cases) of the component\n   * and ensures space for safe zone (32px) at the top.\n   */\n  function setContentMaxHeight(): CSSProperties {\n    const safeZoneHeight = '64px';\n    const topbarHeight = '32px';\n    const windowHight: number = isServerSide() ? 0 : window.innerHeight;\n    /**\n     * Calculate _real_ height of the screen (taking into account parts of browser interface).\n     *\n     * See https://css-tricks.com/the-trick-to-viewport-units-on-mobile for more details.\n     */\n    const screenHeight = `${windowHight * 0.01 * 100}px`;\n    return {\n      maxHeight: `calc(${screenHeight} - ${safeZoneHeight} - ${topbarHeight})`,\n    };\n  }\n\n  const is400Zoom = useMedia(`(max-width: ${Breakpoint.EXTRA_SMALL}px)`);\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return is400Zoom ? (\n    <Drawer\n      aria-labelledby={props['aria-labelledby']}\n      aria-label={props['aria-label']}\n      role={role}\n      open={props.open}\n      className={props.className}\n      onClose={close}\n    >\n      {props.children}\n    </Drawer>\n  ) : (\n    <Dimmer open={props.open} fadeContentOnEnter fadeContentOnExit onClose={close}>\n      <SlidingPanel\n        ref={bottomSheetReference}\n        open={props.open}\n        position={Position.BOTTOM}\n        className={clsx('np-bottom-sheet', props.className)}\n      >\n        <div\n          id={overlayId}\n          aria-labelledby={props['aria-labelledby'] || undefined}\n          aria-label={props['aria-label'] || undefined}\n          role={role}\n          aria-modal\n          onTouchStart={onSwipeStart}\n          onTouchMove={onSwipeMove}\n          onTouchEnd={onSwipeEnd}\n          onMouseDown={onSwipeStart}\n          onMouseMove={onSwipeMove}\n          onMouseUp={onSwipeEnd}\n        >\n          <div ref={topBarReference} className=\"np-bottom-sheet--top-bar\">\n            <div className=\"np-bottom-sheet--handler\" />\n            <CloseButton size=\"sm\" className=\"sr-only np-bottom-sheet--close-btn\" onClick={close} />\n          </div>\n          <div\n            ref={contentReference}\n            style={setContentMaxHeight()}\n            className=\"np-bottom-sheet--content\"\n          >\n            {props.children}\n          </div>\n        </div>\n      </SlidingPanel>\n    </Dimmer>\n  );\n};\n\nexport default BottomSheet;\n"],"names":["INITIAL_Y_POSITION","CONTENT_SCROLL_THRESHOLD","MOVE_OFFSET_THRESHOLD","BottomSheet","role","props","bottomSheetReference","useRef","topBarReference","contentReference","pressed","setPressed","useState","animationId","moveOffset","initialYCoordinate","useConditionalListener","attachListener","open","isServerSide","callback","current","classList","isContentScrollPositionAtTop","add","remove","eventType","parent","undefined","document","move","newHeight","style","transform","close","event","removeProperty","onClose","onSwipeStart","touches","clientY","onSwipeMove","offset","calculateOffsetAfterMove","requestAnimationFrame","onSwipeEnd","cancelAnimationFrame","scrollTop","afterMoveYCoordinate","setContentMaxHeight","safeZoneHeight","topbarHeight","windowHight","window","innerHeight","screenHeight","maxHeight","is400Zoom","useMedia","Breakpoint","EXTRA_SMALL","overlayId","useContext","OverlayIdContext","_jsx","Drawer","className","children","Dimmer","fadeContentOnEnter","fadeContentOnExit","SlidingPanel","ref","position","Position","BOTTOM","clsx","_jsxs","id","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","CloseButton","size","onClick"],"mappings":"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"}

package/build/common/circle/Circle.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var clsx = require('clsx');
+var neptuneTokens = require('@transferwise/neptune-tokens');
 var useMedia = require('../hooks/useMedia.js');
-var breakpoint = require('../propsValues/breakpoint.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 const MAP_ICON_SIZE = {
@@ -41,7 +41,7 @@ const Circle = /*#__PURE__*/React.forwardRef(function Circle({
   style,
   ...props
 }, ref) {
-  const isTinyViewport = useMedia.useMedia(`(max-width: ${breakpoint.Breakpoint.ZOOM_400}px)`);
+  const isTinyViewport = useMedia.useMedia(`(max-width: ${neptuneTokens.Breakpoint.EXTRA_SMALL}px)`);
   return /*#__PURE__*/jsxRuntime.jsx(Element, {
     ...props,
     ref: ref,

package/build/common/circle/Circle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Circle.js","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\n\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;\n\nexport type Props = {\n  /**\n   * Modify underlying element, `div` by default\n   */\n  as?: React.ElementType;\n  /**\n   * Set size of the circle in px, `48` by default\n   */\n  size?: ShapeSize;\n  /**\n   * When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-*`)\n   * as those can be dynamic a at certain viewport sizes\n   */\n  fixedSize?: boolean;\n  enableBorder?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\n/**\n * circle like components has custom sizes for icons\n */\nconst MAP_ICON_SIZE = {\n  16: 12,\n  24: 16,\n  32: 18,\n  40: 20,\n  48: 24,\n  56: 28,\n  72: 36,\n};\n\n/**\n * circle like components have custom typography styles for for default (Inter) font\n *\n * circle size : font size (px)\n */\nconst MAP_FONT_SIZE = {\n  16: 8,\n  24: 12,\n  32: 14,\n  40: 18,\n  48: 22,\n  56: 26,\n  72: 30,\n};\n\nconst Circle = forwardRef(function Circle(\n  {\n    as: Element = 'div',\n    children,\n    size = 48,\n    fixedSize = false,\n    enableBorder = false,\n    className,\n    style,\n    ...props\n  }: Props,\n  ref,\n) {\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  return (\n    <Element\n      {...props}\n      ref={ref}\n      style={{\n        '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,\n        '--circle-icon-size':\n          isTinyViewport && !fixedSize\n            ? `${MAP_ICON_SIZE[size] / 2}px`\n            : `${MAP_ICON_SIZE[size]}px`,\n        '--circle-font-size': `${MAP_FONT_SIZE[size]}px`,\n        ...style,\n      }}\n      className={clsx(\n        'np-circle',\n        { 'np-circle-border': enableBorder },\n        'd-flex align-items-center justify-content-center',\n        className,\n      )}\n    >\n      {children}\n    </Element>\n  );\n});\n\nexport default Circle;\n"],"names":["MAP_ICON_SIZE","MAP_FONT_SIZE","Circle","forwardRef","as","Element","children","size","fixedSize","enableBorder","className","style","props","ref","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","clsx"],"mappings":";;;;;;;;;;AA2BA,MAAMA,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE;CACL;AAED;;;;AAIG;AACH,MAAMC,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE;CACL;AAED,MAAMC,MAAM,gBAAGC,gBAAU,CAAC,SAASD,MAAMA,CACvC;EACEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,KAAK;AACjBC,EAAAA,YAAY,GAAG,KAAK;EACpBC,SAAS;EACTC,KAAK;EACL,GAAGC;AAAK,CACF,EACRC,GAAG,EAAA;EAEH,MAAMC,cAAc,GAAGC,iBAAQ,CAAC,eAAeC,qBAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC;EACxE,oBACEC,cAAA,CAACb,OAAO,EAAA;AAAA,IAAA,GACFO,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;MACL,eAAe,EAAEH,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAA,EAAA,CAAI,GAAG,CAAA,WAAA,EAAcA,IAAI,CAAA,CAAA,CAAG;MAChE,oBAAoB,EAClBO,cAAc,IAAI,CAACN,SAAS,GACxB,CAAA,EAAGR,aAAa,CAACO,IAAI,CAAC,GAAG,CAAC,IAAI,GAC9B,CAAA,EAAGP,aAAa,CAACO,IAAI,CAAC,CAAA,EAAA,CAAI;AAChC,MAAA,oBAAoB,EAAE,CAAA,EAAGN,aAAa,CAACM,IAAI,CAAC,CAAA,EAAA,CAAI;MAChD,GAAGI;KACH;AACFD,IAAAA,SAAS,EAAES,SAAI,CACb,WAAW,EACX;AAAE,MAAA,kBAAkB,EAAEV;KAAc,EACpC,kDAAkD,EAClDC,SAAS,CACT;AAAAJ,IAAAA,QAAA,EAEDA;AAAQ,GACF,CAAC;AAEd,CAAC;;;;"}
+{"version":3,"file":"Circle.js","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\nimport { useMedia } from '../hooks/useMedia';\n\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;\n\nexport type Props = {\n  /**\n   * Modify underlying element, `div` by default\n   */\n  as?: React.ElementType;\n  /**\n   * Set size of the circle in px, `48` by default\n   */\n  size?: ShapeSize;\n  /**\n   * When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-*`)\n   * as those can be dynamic a at certain viewport sizes\n   */\n  fixedSize?: boolean;\n  enableBorder?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\n/**\n * circle like components has custom sizes for icons\n */\nconst MAP_ICON_SIZE = {\n  16: 12,\n  24: 16,\n  32: 18,\n  40: 20,\n  48: 24,\n  56: 28,\n  72: 36,\n};\n\n/**\n * circle like components have custom typography styles for for default (Inter) font\n *\n * circle size : font size (px)\n */\nconst MAP_FONT_SIZE = {\n  16: 8,\n  24: 12,\n  32: 14,\n  40: 18,\n  48: 22,\n  56: 26,\n  72: 30,\n};\n\nconst Circle = forwardRef(function Circle(\n  {\n    as: Element = 'div',\n    children,\n    size = 48,\n    fixedSize = false,\n    enableBorder = false,\n    className,\n    style,\n    ...props\n  }: Props,\n  ref,\n) {\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.EXTRA_SMALL}px)`);\n  return (\n    <Element\n      {...props}\n      ref={ref}\n      style={{\n        '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,\n        '--circle-icon-size':\n          isTinyViewport && !fixedSize\n            ? `${MAP_ICON_SIZE[size] / 2}px`\n            : `${MAP_ICON_SIZE[size]}px`,\n        '--circle-font-size': `${MAP_FONT_SIZE[size]}px`,\n        ...style,\n      }}\n      className={clsx(\n        'np-circle',\n        { 'np-circle-border': enableBorder },\n        'd-flex align-items-center justify-content-center',\n        className,\n      )}\n    >\n      {children}\n    </Element>\n  );\n});\n\nexport default Circle;\n"],"names":["MAP_ICON_SIZE","MAP_FONT_SIZE","Circle","forwardRef","as","Element","children","size","fixedSize","enableBorder","className","style","props","ref","isTinyViewport","useMedia","Breakpoint","EXTRA_SMALL","_jsx","clsx"],"mappings":";;;;;;;;;;AA2BA,MAAMA,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE;CACL;AAED;;;;AAIG;AACH,MAAMC,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE;CACL;AAED,MAAMC,MAAM,gBAAGC,gBAAU,CAAC,SAASD,MAAMA,CACvC;EACEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,KAAK;AACjBC,EAAAA,YAAY,GAAG,KAAK;EACpBC,SAAS;EACTC,KAAK;EACL,GAAGC;AAAK,CACF,EACRC,GAAG,EAAA;EAEH,MAAMC,cAAc,GAAGC,iBAAQ,CAAC,eAAeC,wBAAU,CAACC,WAAW,CAAA,GAAA,CAAK,CAAC;EAC3E,oBACEC,cAAA,CAACb,OAAO,EAAA;AAAA,IAAA,GACFO,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;MACL,eAAe,EAAEH,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAA,EAAA,CAAI,GAAG,CAAA,WAAA,EAAcA,IAAI,CAAA,CAAA,CAAG;MAChE,oBAAoB,EAClBO,cAAc,IAAI,CAACN,SAAS,GACxB,CAAA,EAAGR,aAAa,CAACO,IAAI,CAAC,GAAG,CAAC,IAAI,GAC9B,CAAA,EAAGP,aAAa,CAACO,IAAI,CAAC,CAAA,EAAA,CAAI;AAChC,MAAA,oBAAoB,EAAE,CAAA,EAAGN,aAAa,CAACM,IAAI,CAAC,CAAA,EAAA,CAAI;MAChD,GAAGI;KACH;AACFD,IAAAA,SAAS,EAAES,SAAI,CACb,WAAW,EACX;AAAE,MAAA,kBAAkB,EAAEV;KAAc,EACpC,kDAAkD,EAClDC,SAAS,CACT;AAAAJ,IAAAA,QAAA,EAEDA;AAAQ,GACF,CAAC;AAEd,CAAC;;;;"}

package/build/common/circle/Circle.mjs

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 import { clsx } from 'clsx';
+import { Breakpoint } from '@transferwise/neptune-tokens';
 import { useMedia } from '../hooks/useMedia.mjs';
-import { Breakpoint } from '../propsValues/breakpoint.mjs';
 import { jsx } from 'react/jsx-runtime';
 
 const MAP_ICON_SIZE = {
@@ -37,7 +37,7 @@ const Circle = /*#__PURE__*/forwardRef(function Circle({
   style,
   ...props
 }, ref) {
-  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
+  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.EXTRA_SMALL}px)`);
   return /*#__PURE__*/jsx(Element, {
     ...props,
     ref: ref,

package/build/common/circle/Circle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Circle.mjs","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\n\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;\n\nexport type Props = {\n  /**\n   * Modify underlying element, `div` by default\n   */\n  as?: React.ElementType;\n  /**\n   * Set size of the circle in px, `48` by default\n   */\n  size?: ShapeSize;\n  /**\n   * When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-*`)\n   * as those can be dynamic a at certain viewport sizes\n   */\n  fixedSize?: boolean;\n  enableBorder?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\n/**\n * circle like components has custom sizes for icons\n */\nconst MAP_ICON_SIZE = {\n  16: 12,\n  24: 16,\n  32: 18,\n  40: 20,\n  48: 24,\n  56: 28,\n  72: 36,\n};\n\n/**\n * circle like components have custom typography styles for for default (Inter) font\n *\n * circle size : font size (px)\n */\nconst MAP_FONT_SIZE = {\n  16: 8,\n  24: 12,\n  32: 14,\n  40: 18,\n  48: 22,\n  56: 26,\n  72: 30,\n};\n\nconst Circle = forwardRef(function Circle(\n  {\n    as: Element = 'div',\n    children,\n    size = 48,\n    fixedSize = false,\n    enableBorder = false,\n    className,\n    style,\n    ...props\n  }: Props,\n  ref,\n) {\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  return (\n    <Element\n      {...props}\n      ref={ref}\n      style={{\n        '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,\n        '--circle-icon-size':\n          isTinyViewport && !fixedSize\n            ? `${MAP_ICON_SIZE[size] / 2}px`\n            : `${MAP_ICON_SIZE[size]}px`,\n        '--circle-font-size': `${MAP_FONT_SIZE[size]}px`,\n        ...style,\n      }}\n      className={clsx(\n        'np-circle',\n        { 'np-circle-border': enableBorder },\n        'd-flex align-items-center justify-content-center',\n        className,\n      )}\n    >\n      {children}\n    </Element>\n  );\n});\n\nexport default Circle;\n"],"names":["MAP_ICON_SIZE","MAP_FONT_SIZE","Circle","forwardRef","as","Element","children","size","fixedSize","enableBorder","className","style","props","ref","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","clsx"],"mappings":";;;;;;AA2BA,MAAMA,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE;CACL;AAED;;;;AAIG;AACH,MAAMC,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE;CACL;AAED,MAAMC,MAAM,gBAAGC,UAAU,CAAC,SAASD,MAAMA,CACvC;EACEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,KAAK;AACjBC,EAAAA,YAAY,GAAG,KAAK;EACpBC,SAAS;EACTC,KAAK;EACL,GAAGC;AAAK,CACF,EACRC,GAAG,EAAA;EAEH,MAAMC,cAAc,GAAGC,QAAQ,CAAC,eAAeC,UAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC;EACxE,oBACEC,GAAA,CAACb,OAAO,EAAA;AAAA,IAAA,GACFO,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;MACL,eAAe,EAAEH,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAA,EAAA,CAAI,GAAG,CAAA,WAAA,EAAcA,IAAI,CAAA,CAAA,CAAG;MAChE,oBAAoB,EAClBO,cAAc,IAAI,CAACN,SAAS,GACxB,CAAA,EAAGR,aAAa,CAACO,IAAI,CAAC,GAAG,CAAC,IAAI,GAC9B,CAAA,EAAGP,aAAa,CAACO,IAAI,CAAC,CAAA,EAAA,CAAI;AAChC,MAAA,oBAAoB,EAAE,CAAA,EAAGN,aAAa,CAACM,IAAI,CAAC,CAAA,EAAA,CAAI;MAChD,GAAGI;KACH;AACFD,IAAAA,SAAS,EAAES,IAAI,CACb,WAAW,EACX;AAAE,MAAA,kBAAkB,EAAEV;KAAc,EACpC,kDAAkD,EAClDC,SAAS,CACT;AAAAJ,IAAAA,QAAA,EAEDA;AAAQ,GACF,CAAC;AAEd,CAAC;;;;"}
+{"version":3,"file":"Circle.mjs","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\nimport { useMedia } from '../hooks/useMedia';\n\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;\n\nexport type Props = {\n  /**\n   * Modify underlying element, `div` by default\n   */\n  as?: React.ElementType;\n  /**\n   * Set size of the circle in px, `48` by default\n   */\n  size?: ShapeSize;\n  /**\n   * When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-*`)\n   * as those can be dynamic a at certain viewport sizes\n   */\n  fixedSize?: boolean;\n  enableBorder?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\n/**\n * circle like components has custom sizes for icons\n */\nconst MAP_ICON_SIZE = {\n  16: 12,\n  24: 16,\n  32: 18,\n  40: 20,\n  48: 24,\n  56: 28,\n  72: 36,\n};\n\n/**\n * circle like components have custom typography styles for for default (Inter) font\n *\n * circle size : font size (px)\n */\nconst MAP_FONT_SIZE = {\n  16: 8,\n  24: 12,\n  32: 14,\n  40: 18,\n  48: 22,\n  56: 26,\n  72: 30,\n};\n\nconst Circle = forwardRef(function Circle(\n  {\n    as: Element = 'div',\n    children,\n    size = 48,\n    fixedSize = false,\n    enableBorder = false,\n    className,\n    style,\n    ...props\n  }: Props,\n  ref,\n) {\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.EXTRA_SMALL}px)`);\n  return (\n    <Element\n      {...props}\n      ref={ref}\n      style={{\n        '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,\n        '--circle-icon-size':\n          isTinyViewport && !fixedSize\n            ? `${MAP_ICON_SIZE[size] / 2}px`\n            : `${MAP_ICON_SIZE[size]}px`,\n        '--circle-font-size': `${MAP_FONT_SIZE[size]}px`,\n        ...style,\n      }}\n      className={clsx(\n        'np-circle',\n        { 'np-circle-border': enableBorder },\n        'd-flex align-items-center justify-content-center',\n        className,\n      )}\n    >\n      {children}\n    </Element>\n  );\n});\n\nexport default Circle;\n"],"names":["MAP_ICON_SIZE","MAP_FONT_SIZE","Circle","forwardRef","as","Element","children","size","fixedSize","enableBorder","className","style","props","ref","isTinyViewport","useMedia","Breakpoint","EXTRA_SMALL","_jsx","clsx"],"mappings":";;;;;;AA2BA,MAAMA,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE;CACL;AAED;;;;AAIG;AACH,MAAMC,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE;CACL;AAED,MAAMC,MAAM,gBAAGC,UAAU,CAAC,SAASD,MAAMA,CACvC;EACEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,KAAK;AACjBC,EAAAA,YAAY,GAAG,KAAK;EACpBC,SAAS;EACTC,KAAK;EACL,GAAGC;AAAK,CACF,EACRC,GAAG,EAAA;EAEH,MAAMC,cAAc,GAAGC,QAAQ,CAAC,eAAeC,UAAU,CAACC,WAAW,CAAA,GAAA,CAAK,CAAC;EAC3E,oBACEC,GAAA,CAACb,OAAO,EAAA;AAAA,IAAA,GACFO,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;MACL,eAAe,EAAEH,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAA,EAAA,CAAI,GAAG,CAAA,WAAA,EAAcA,IAAI,CAAA,CAAA,CAAG;MAChE,oBAAoB,EAClBO,cAAc,IAAI,CAACN,SAAS,GACxB,CAAA,EAAGR,aAAa,CAACO,IAAI,CAAC,GAAG,CAAC,IAAI,GAC9B,CAAA,EAAGP,aAAa,CAACO,IAAI,CAAC,CAAA,EAAA,CAAI;AAChC,MAAA,oBAAoB,EAAE,CAAA,EAAGN,aAAa,CAACM,IAAI,CAAC,CAAA,EAAA,CAAI;MAChD,GAAGI;KACH;AACFD,IAAAA,SAAS,EAAES,IAAI,CACb,WAAW,EACX;AAAE,MAAA,kBAAkB,EAAEV;KAAc,EACpC,kDAAkD,EAClDC,SAAS,CACT;AAAAJ,IAAAA,QAAA,EAEDA;AAAQ,GACF,CAAC;AAEd,CAAC;;;;"}

package/build/common/hooks/useLayout/useLayout.js

@@ -1,17 +1,17 @@
 'use strict';
 
-var breakpoint = require('../../propsValues/breakpoint.js');
+var neptuneTokens = require('@transferwise/neptune-tokens');
 var useScreenSize = require('../useScreenSize.js');
 
 /**
  * @deprecated Prefer `useScreenSize` instead.
  */
 const useLayout = () => {
-  const screenXs = useScreenSize.useScreenSize(breakpoint.Breakpoint.EXTRA_SMALL);
-  const screenSm = useScreenSize.useScreenSize(breakpoint.Breakpoint.SMALL);
-  const screenMd = useScreenSize.useScreenSize(breakpoint.Breakpoint.MEDIUM);
-  const screenLg = useScreenSize.useScreenSize(breakpoint.Breakpoint.LARGE);
-  const screenXl = useScreenSize.useScreenSize(breakpoint.Breakpoint.EXTRA_LARGE);
+  const screenXs = useScreenSize.useScreenSize(neptuneTokens.Breakpoint.EXTRA_SMALL);
+  const screenSm = useScreenSize.useScreenSize(neptuneTokens.Breakpoint.SMALL);
+  const screenMd = useScreenSize.useScreenSize(neptuneTokens.Breakpoint.MEDIUM);
+  const screenLg = useScreenSize.useScreenSize(neptuneTokens.Breakpoint.LARGE);
+  const screenXl = useScreenSize.useScreenSize(neptuneTokens.Breakpoint.EXTRA_LARGE);
   return {
     isMobile: screenSm != null ? !screenSm : undefined,
     isExtraSmall: screenXs,

package/build/common/hooks/useLayout/useLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLayout.js","sources":["../../../../src/common/hooks/useLayout/useLayout.ts"],"sourcesContent":["import { Breakpoint } from '../../propsValues/breakpoint';\nimport { useScreenSize } from '../useScreenSize';\n\n/**\n * @deprecated Prefer `useScreenSize` instead.\n */\nexport const useLayout = (): {\n  isMobile: boolean | undefined;\n  isExtraSmall: boolean | undefined;\n  isSmall: boolean | undefined;\n  isMedium: boolean | undefined;\n  isLarge: boolean | undefined;\n  isExtraLarge: boolean | undefined;\n} => {\n  const screenXs = useScreenSize(Breakpoint.EXTRA_SMALL);\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n  const screenMd = useScreenSize(Breakpoint.MEDIUM);\n  const screenLg = useScreenSize(Breakpoint.LARGE);\n  const screenXl = useScreenSize(Breakpoint.EXTRA_LARGE);\n\n  return {\n    isMobile: screenSm != null ? !screenSm : undefined,\n    isExtraSmall: screenXs,\n    isSmall: screenSm,\n    isMedium: screenMd,\n    isLarge: screenLg,\n    isExtraLarge: screenXl,\n  };\n};\n"],"names":["useLayout","screenXs","useScreenSize","Breakpoint","EXTRA_SMALL","screenSm","SMALL","screenMd","MEDIUM","screenLg","LARGE","screenXl","EXTRA_LARGE","isMobile","undefined","isExtraSmall","isSmall","isMedium","isLarge","isExtraLarge"],"mappings":";;;;;AAGA;;AAEG;AACI,MAAMA,SAAS,GAAGA,MAOrB;AACF,EAAA,MAAMC,QAAQ,GAAGC,2BAAa,CAACC,qBAAU,CAACC,WAAW,CAAC;AACtD,EAAA,MAAMC,QAAQ,GAAGH,2BAAa,CAACC,qBAAU,CAACG,KAAK,CAAC;AAChD,EAAA,MAAMC,QAAQ,GAAGL,2BAAa,CAACC,qBAAU,CAACK,MAAM,CAAC;AACjD,EAAA,MAAMC,QAAQ,GAAGP,2BAAa,CAACC,qBAAU,CAACO,KAAK,CAAC;AAChD,EAAA,MAAMC,QAAQ,GAAGT,2BAAa,CAACC,qBAAU,CAACS,WAAW,CAAC;EAEtD,OAAO;IACLC,QAAQ,EAAER,QAAQ,IAAI,IAAI,GAAG,CAACA,QAAQ,GAAGS,SAAS;AAClDC,IAAAA,YAAY,EAAEd,QAAQ;AACtBe,IAAAA,OAAO,EAAEX,QAAQ;AACjBY,IAAAA,QAAQ,EAAEV,QAAQ;AAClBW,IAAAA,OAAO,EAAET,QAAQ;AACjBU,IAAAA,YAAY,EAAER;GACf;AACH;;;;"}
+{"version":3,"file":"useLayout.js","sources":["../../../../src/common/hooks/useLayout/useLayout.ts"],"sourcesContent":["import { Breakpoint } from '@transferwise/neptune-tokens';\nimport { useScreenSize } from '../useScreenSize';\n\n/**\n * @deprecated Prefer `useScreenSize` instead.\n */\nexport const useLayout = (): {\n  isMobile: boolean | undefined;\n  isExtraSmall: boolean | undefined;\n  isSmall: boolean | undefined;\n  isMedium: boolean | undefined;\n  isLarge: boolean | undefined;\n  isExtraLarge: boolean | undefined;\n} => {\n  const screenXs = useScreenSize(Breakpoint.EXTRA_SMALL);\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n  const screenMd = useScreenSize(Breakpoint.MEDIUM);\n  const screenLg = useScreenSize(Breakpoint.LARGE);\n  const screenXl = useScreenSize(Breakpoint.EXTRA_LARGE);\n\n  return {\n    isMobile: screenSm != null ? !screenSm : undefined,\n    isExtraSmall: screenXs,\n    isSmall: screenSm,\n    isMedium: screenMd,\n    isLarge: screenLg,\n    isExtraLarge: screenXl,\n  };\n};\n"],"names":["useLayout","screenXs","useScreenSize","Breakpoint","EXTRA_SMALL","screenSm","SMALL","screenMd","MEDIUM","screenLg","LARGE","screenXl","EXTRA_LARGE","isMobile","undefined","isExtraSmall","isSmall","isMedium","isLarge","isExtraLarge"],"mappings":";;;;;AAGA;;AAEG;AACI,MAAMA,SAAS,GAAGA,MAOrB;AACF,EAAA,MAAMC,QAAQ,GAAGC,2BAAa,CAACC,wBAAU,CAACC,WAAW,CAAC;AACtD,EAAA,MAAMC,QAAQ,GAAGH,2BAAa,CAACC,wBAAU,CAACG,KAAK,CAAC;AAChD,EAAA,MAAMC,QAAQ,GAAGL,2BAAa,CAACC,wBAAU,CAACK,MAAM,CAAC;AACjD,EAAA,MAAMC,QAAQ,GAAGP,2BAAa,CAACC,wBAAU,CAACO,KAAK,CAAC;AAChD,EAAA,MAAMC,QAAQ,GAAGT,2BAAa,CAACC,wBAAU,CAACS,WAAW,CAAC;EAEtD,OAAO;IACLC,QAAQ,EAAER,QAAQ,IAAI,IAAI,GAAG,CAACA,QAAQ,GAAGS,SAAS;AAClDC,IAAAA,YAAY,EAAEd,QAAQ;AACtBe,IAAAA,OAAO,EAAEX,QAAQ;AACjBY,IAAAA,QAAQ,EAAEV,QAAQ;AAClBW,IAAAA,OAAO,EAAET,QAAQ;AACjBU,IAAAA,YAAY,EAAER;GACf;AACH;;;;"}

package/build/common/hooks/useLayout/useLayout.mjs

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

package/build/common/hooks/useLayout/useLayout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useLayout.mjs","sources":["../../../../src/common/hooks/useLayout/useLayout.ts"],"sourcesContent":["import { Breakpoint } from '../../propsValues/breakpoint';\nimport { useScreenSize } from '../useScreenSize';\n\n/**\n * @deprecated Prefer `useScreenSize` instead.\n */\nexport const useLayout = (): {\n  isMobile: boolean | undefined;\n  isExtraSmall: boolean | undefined;\n  isSmall: boolean | undefined;\n  isMedium: boolean | undefined;\n  isLarge: boolean | undefined;\n  isExtraLarge: boolean | undefined;\n} => {\n  const screenXs = useScreenSize(Breakpoint.EXTRA_SMALL);\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n  const screenMd = useScreenSize(Breakpoint.MEDIUM);\n  const screenLg = useScreenSize(Breakpoint.LARGE);\n  const screenXl = useScreenSize(Breakpoint.EXTRA_LARGE);\n\n  return {\n    isMobile: screenSm != null ? !screenSm : undefined,\n    isExtraSmall: screenXs,\n    isSmall: screenSm,\n    isMedium: screenMd,\n    isLarge: screenLg,\n    isExtraLarge: screenXl,\n  };\n};\n"],"names":["useLayout","screenXs","useScreenSize","Breakpoint","EXTRA_SMALL","screenSm","SMALL","screenMd","MEDIUM","screenLg","LARGE","screenXl","EXTRA_LARGE","isMobile","undefined","isExtraSmall","isSmall","isMedium","isLarge","isExtraLarge"],"mappings":";;;AAGA;;AAEG;AACI,MAAMA,SAAS,GAAGA,MAOrB;AACF,EAAA,MAAMC,QAAQ,GAAGC,aAAa,CAACC,UAAU,CAACC,WAAW,CAAC;AACtD,EAAA,MAAMC,QAAQ,GAAGH,aAAa,CAACC,UAAU,CAACG,KAAK,CAAC;AAChD,EAAA,MAAMC,QAAQ,GAAGL,aAAa,CAACC,UAAU,CAACK,MAAM,CAAC;AACjD,EAAA,MAAMC,QAAQ,GAAGP,aAAa,CAACC,UAAU,CAACO,KAAK,CAAC;AAChD,EAAA,MAAMC,QAAQ,GAAGT,aAAa,CAACC,UAAU,CAACS,WAAW,CAAC;EAEtD,OAAO;IACLC,QAAQ,EAAER,QAAQ,IAAI,IAAI,GAAG,CAACA,QAAQ,GAAGS,SAAS;AAClDC,IAAAA,YAAY,EAAEd,QAAQ;AACtBe,IAAAA,OAAO,EAAEX,QAAQ;AACjBY,IAAAA,QAAQ,EAAEV,QAAQ;AAClBW,IAAAA,OAAO,EAAET,QAAQ;AACjBU,IAAAA,YAAY,EAAER;GACf;AACH;;;;"}
+{"version":3,"file":"useLayout.mjs","sources":["../../../../src/common/hooks/useLayout/useLayout.ts"],"sourcesContent":["import { Breakpoint } from '@transferwise/neptune-tokens';\nimport { useScreenSize } from '../useScreenSize';\n\n/**\n * @deprecated Prefer `useScreenSize` instead.\n */\nexport const useLayout = (): {\n  isMobile: boolean | undefined;\n  isExtraSmall: boolean | undefined;\n  isSmall: boolean | undefined;\n  isMedium: boolean | undefined;\n  isLarge: boolean | undefined;\n  isExtraLarge: boolean | undefined;\n} => {\n  const screenXs = useScreenSize(Breakpoint.EXTRA_SMALL);\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n  const screenMd = useScreenSize(Breakpoint.MEDIUM);\n  const screenLg = useScreenSize(Breakpoint.LARGE);\n  const screenXl = useScreenSize(Breakpoint.EXTRA_LARGE);\n\n  return {\n    isMobile: screenSm != null ? !screenSm : undefined,\n    isExtraSmall: screenXs,\n    isSmall: screenSm,\n    isMedium: screenMd,\n    isLarge: screenLg,\n    isExtraLarge: screenXl,\n  };\n};\n"],"names":["useLayout","screenXs","useScreenSize","Breakpoint","EXTRA_SMALL","screenSm","SMALL","screenMd","MEDIUM","screenLg","LARGE","screenXl","EXTRA_LARGE","isMobile","undefined","isExtraSmall","isSmall","isMedium","isLarge","isExtraLarge"],"mappings":";;;AAGA;;AAEG;AACI,MAAMA,SAAS,GAAGA,MAOrB;AACF,EAAA,MAAMC,QAAQ,GAAGC,aAAa,CAACC,UAAU,CAACC,WAAW,CAAC;AACtD,EAAA,MAAMC,QAAQ,GAAGH,aAAa,CAACC,UAAU,CAACG,KAAK,CAAC;AAChD,EAAA,MAAMC,QAAQ,GAAGL,aAAa,CAACC,UAAU,CAACK,MAAM,CAAC;AACjD,EAAA,MAAMC,QAAQ,GAAGP,aAAa,CAACC,UAAU,CAACO,KAAK,CAAC;AAChD,EAAA,MAAMC,QAAQ,GAAGT,aAAa,CAACC,UAAU,CAACS,WAAW,CAAC;EAEtD,OAAO;IACLC,QAAQ,EAAER,QAAQ,IAAI,IAAI,GAAG,CAACA,QAAQ,GAAGS,SAAS;AAClDC,IAAAA,YAAY,EAAEd,QAAQ;AACtBe,IAAAA,OAAO,EAAEX,QAAQ;AACjBY,IAAAA,QAAQ,EAAEV,QAAQ;AAClBW,IAAAA,OAAO,EAAET,QAAQ;AACjBU,IAAAA,YAAY,EAAER;GACf;AACH;;;;"}

package/build/common/hooks/useResizeObserver.js

@@ -3,7 +3,7 @@
 var React = require('react');
 var useEffectEvent = require('./useEffectEvent.js');
 
-function useResizeObserver(ref, callback, box = 'border-box') {
+function useResizeObserver(ref, callback) {
   const handleCallback = useEffectEvent.useEffectEvent(callback);
   React.useEffect(() => {
     if (ref.current != null) {
@@ -11,14 +11,14 @@ function useResizeObserver(ref, callback, box = 'border-box') {
         handleCallback(entry);
       });
       resizeObserver.observe(ref.current, {
-        box
+        box: 'border-box'
       });
       return () => {
         resizeObserver.disconnect();
       };
     }
     return () => {};
-  }, [handleCallback, ref, box]);
+  }, [handleCallback, ref]);
 }
 
 exports.useResizeObserver = useResizeObserver;

package/build/common/hooks/useResizeObserver.js.map

@@ -1 +1 @@
-{"version":3,"file":"useResizeObserver.js","sources":["../../../src/common/hooks/useResizeObserver.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { useEffectEvent } from './useEffectEvent';\n\nexport function useResizeObserver(\n  ref: React.MutableRefObject<Element | null>,\n  callback: (entry: ResizeObserverEntry) => void,\n  box: ResizeObserverBoxOptions = 'border-box',\n) {\n  const handleCallback = useEffectEvent(callback);\n  useEffect(() => {\n    if (ref.current != null) {\n      const resizeObserver = new ResizeObserver(([entry]) => {\n        handleCallback(entry);\n      });\n      resizeObserver.observe(ref.current, { box });\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }\n    return () => {};\n  }, [handleCallback, ref, box]);\n}\n"],"names":["useResizeObserver","ref","callback","box","handleCallback","useEffectEvent","useEffect","current","resizeObserver","ResizeObserver","entry","observe","disconnect"],"mappings":";;;;;AAIM,SAAUA,iBAAiBA,CAC/BC,GAA2C,EAC3CC,QAA8C,EAC9CC,MAAgC,YAAY,EAAA;AAE5C,EAAA,MAAMC,cAAc,GAAGC,6BAAc,CAACH,QAAQ,CAAC;AAC/CI,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIL,GAAG,CAACM,OAAO,IAAI,IAAI,EAAE;MACvB,MAAMC,cAAc,GAAG,IAAIC,cAAc,CAAC,CAAC,CAACC,KAAK,CAAC,KAAI;QACpDN,cAAc,CAACM,KAAK,CAAC;AACvB,MAAA,CAAC,CAAC;AACFF,MAAAA,cAAc,CAACG,OAAO,CAACV,GAAG,CAACM,OAAO,EAAE;AAAEJ,QAAAA;AAAG,OAAE,CAAC;AAC5C,MAAA,OAAO,MAAK;QACVK,cAAc,CAACI,UAAU,EAAE;MAC7B,CAAC;AACH,IAAA;IACA,OAAO,MAAK,CAAE,CAAC;EACjB,CAAC,EAAE,CAACR,cAAc,EAAEH,GAAG,EAAEE,GAAG,CAAC,CAAC;AAChC;;;;"}
+{"version":3,"file":"useResizeObserver.js","sources":["../../../src/common/hooks/useResizeObserver.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { useEffectEvent } from './useEffectEvent';\n\nexport function useResizeObserver(\n  ref: React.MutableRefObject<Element | null>,\n  callback: (entry: ResizeObserverEntry) => void,\n) {\n  const handleCallback = useEffectEvent(callback);\n  useEffect(() => {\n    if (ref.current != null) {\n      const resizeObserver = new ResizeObserver(([entry]) => {\n        handleCallback(entry);\n      });\n      resizeObserver.observe(ref.current, { box: 'border-box' });\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }\n    return () => {};\n  }, [handleCallback, ref]);\n}\n"],"names":["useResizeObserver","ref","callback","handleCallback","useEffectEvent","useEffect","current","resizeObserver","ResizeObserver","entry","observe","box","disconnect"],"mappings":";;;;;AAIM,SAAUA,iBAAiBA,CAC/BC,GAA2C,EAC3CC,QAA8C,EAAA;AAE9C,EAAA,MAAMC,cAAc,GAAGC,6BAAc,CAACF,QAAQ,CAAC;AAC/CG,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIJ,GAAG,CAACK,OAAO,IAAI,IAAI,EAAE;MACvB,MAAMC,cAAc,GAAG,IAAIC,cAAc,CAAC,CAAC,CAACC,KAAK,CAAC,KAAI;QACpDN,cAAc,CAACM,KAAK,CAAC;AACvB,MAAA,CAAC,CAAC;AACFF,MAAAA,cAAc,CAACG,OAAO,CAACT,GAAG,CAACK,OAAO,EAAE;AAAEK,QAAAA,GAAG,EAAE;AAAY,OAAE,CAAC;AAC1D,MAAA,OAAO,MAAK;QACVJ,cAAc,CAACK,UAAU,EAAE;MAC7B,CAAC;AACH,IAAA;IACA,OAAO,MAAK,CAAE,CAAC;AACjB,EAAA,CAAC,EAAE,CAACT,cAAc,EAAEF,GAAG,CAAC,CAAC;AAC3B;;;;"}

package/build/common/hooks/useResizeObserver.mjs

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useEffectEvent } from './useEffectEvent.mjs';
 
-function useResizeObserver(ref, callback, box = 'border-box') {
+function useResizeObserver(ref, callback) {
   const handleCallback = useEffectEvent(callback);
   useEffect(() => {
     if (ref.current != null) {
@@ -9,14 +9,14 @@ function useResizeObserver(ref, callback, box = 'border-box') {
         handleCallback(entry);
       });
       resizeObserver.observe(ref.current, {
-        box
+        box: 'border-box'
       });
       return () => {
         resizeObserver.disconnect();
       };
     }
     return () => {};
-  }, [handleCallback, ref, box]);
+  }, [handleCallback, ref]);
 }
 
 export { useResizeObserver };

package/build/common/hooks/useResizeObserver.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useResizeObserver.mjs","sources":["../../../src/common/hooks/useResizeObserver.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { useEffectEvent } from './useEffectEvent';\n\nexport function useResizeObserver(\n  ref: React.MutableRefObject<Element | null>,\n  callback: (entry: ResizeObserverEntry) => void,\n  box: ResizeObserverBoxOptions = 'border-box',\n) {\n  const handleCallback = useEffectEvent(callback);\n  useEffect(() => {\n    if (ref.current != null) {\n      const resizeObserver = new ResizeObserver(([entry]) => {\n        handleCallback(entry);\n      });\n      resizeObserver.observe(ref.current, { box });\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }\n    return () => {};\n  }, [handleCallback, ref, box]);\n}\n"],"names":["useResizeObserver","ref","callback","box","handleCallback","useEffectEvent","useEffect","current","resizeObserver","ResizeObserver","entry","observe","disconnect"],"mappings":";;;AAIM,SAAUA,iBAAiBA,CAC/BC,GAA2C,EAC3CC,QAA8C,EAC9CC,MAAgC,YAAY,EAAA;AAE5C,EAAA,MAAMC,cAAc,GAAGC,cAAc,CAACH,QAAQ,CAAC;AAC/CI,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIL,GAAG,CAACM,OAAO,IAAI,IAAI,EAAE;MACvB,MAAMC,cAAc,GAAG,IAAIC,cAAc,CAAC,CAAC,CAACC,KAAK,CAAC,KAAI;QACpDN,cAAc,CAACM,KAAK,CAAC;AACvB,MAAA,CAAC,CAAC;AACFF,MAAAA,cAAc,CAACG,OAAO,CAACV,GAAG,CAACM,OAAO,EAAE;AAAEJ,QAAAA;AAAG,OAAE,CAAC;AAC5C,MAAA,OAAO,MAAK;QACVK,cAAc,CAACI,UAAU,EAAE;MAC7B,CAAC;AACH,IAAA;IACA,OAAO,MAAK,CAAE,CAAC;EACjB,CAAC,EAAE,CAACR,cAAc,EAAEH,GAAG,EAAEE,GAAG,CAAC,CAAC;AAChC;;;;"}
+{"version":3,"file":"useResizeObserver.mjs","sources":["../../../src/common/hooks/useResizeObserver.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { useEffectEvent } from './useEffectEvent';\n\nexport function useResizeObserver(\n  ref: React.MutableRefObject<Element | null>,\n  callback: (entry: ResizeObserverEntry) => void,\n) {\n  const handleCallback = useEffectEvent(callback);\n  useEffect(() => {\n    if (ref.current != null) {\n      const resizeObserver = new ResizeObserver(([entry]) => {\n        handleCallback(entry);\n      });\n      resizeObserver.observe(ref.current, { box: 'border-box' });\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }\n    return () => {};\n  }, [handleCallback, ref]);\n}\n"],"names":["useResizeObserver","ref","callback","handleCallback","useEffectEvent","useEffect","current","resizeObserver","ResizeObserver","entry","observe","box","disconnect"],"mappings":";;;AAIM,SAAUA,iBAAiBA,CAC/BC,GAA2C,EAC3CC,QAA8C,EAAA;AAE9C,EAAA,MAAMC,cAAc,GAAGC,cAAc,CAACF,QAAQ,CAAC;AAC/CG,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIJ,GAAG,CAACK,OAAO,IAAI,IAAI,EAAE;MACvB,MAAMC,cAAc,GAAG,IAAIC,cAAc,CAAC,CAAC,CAACC,KAAK,CAAC,KAAI;QACpDN,cAAc,CAACM,KAAK,CAAC;AACvB,MAAA,CAAC,CAAC;AACFF,MAAAA,cAAc,CAACG,OAAO,CAACT,GAAG,CAACK,OAAO,EAAE;AAAEK,QAAAA,GAAG,EAAE;AAAY,OAAE,CAAC;AAC1D,MAAA,OAAO,MAAK;QACVJ,cAAc,CAACK,UAAU,EAAE;MAC7B,CAAC;AACH,IAAA;IACA,OAAO,MAAK,CAAE,CAAC;AACjB,EAAA,CAAC,EAAE,CAACT,cAAc,EAAEF,GAAG,CAAC,CAAC;AAC3B;;;;"}

package/build/common/hooks/useScreenSize.js.map

@@ -1 +1 @@
-{"version":3,"file":"useScreenSize.js","sources":["../../../src/common/hooks/useScreenSize.ts"],"sourcesContent":["import { Breakpoint } from '../propsValues/breakpoint';\n\nimport { useMedia } from './useMedia';\n\nexport function useScreenSize(size: Breakpoint) {\n  return useMedia(`(min-width: ${size}px)`);\n}\n"],"names":["useScreenSize","size","useMedia"],"mappings":";;;;AAIM,SAAUA,aAAaA,CAACC,IAAgB,EAAA;AAC5C,EAAA,OAAOC,iBAAQ,CAAC,CAAA,YAAA,EAAeD,IAAI,KAAK,CAAC;AAC3C;;;;"}
+{"version":3,"file":"useScreenSize.js","sources":["../../../src/common/hooks/useScreenSize.ts"],"sourcesContent":["import { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport { useMedia } from './useMedia';\n\nexport function useScreenSize(size: Breakpoint) {\n  return useMedia(`(min-width: ${size}px)`);\n}\n"],"names":["useScreenSize","size","useMedia"],"mappings":";;;;AAIM,SAAUA,aAAaA,CAACC,IAAgB,EAAA;AAC5C,EAAA,OAAOC,iBAAQ,CAAC,CAAA,YAAA,EAAeD,IAAI,KAAK,CAAC;AAC3C;;;;"}

package/build/common/hooks/useScreenSize.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useScreenSize.mjs","sources":["../../../src/common/hooks/useScreenSize.ts"],"sourcesContent":["import { Breakpoint } from '../propsValues/breakpoint';\n\nimport { useMedia } from './useMedia';\n\nexport function useScreenSize(size: Breakpoint) {\n  return useMedia(`(min-width: ${size}px)`);\n}\n"],"names":["useScreenSize","size","useMedia"],"mappings":";;AAIM,SAAUA,aAAaA,CAACC,IAAgB,EAAA;AAC5C,EAAA,OAAOC,QAAQ,CAAC,CAAA,YAAA,EAAeD,IAAI,KAAK,CAAC;AAC3C;;;;"}
+{"version":3,"file":"useScreenSize.mjs","sources":["../../../src/common/hooks/useScreenSize.ts"],"sourcesContent":["import { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport { useMedia } from './useMedia';\n\nexport function useScreenSize(size: Breakpoint) {\n  return useMedia(`(min-width: ${size}px)`);\n}\n"],"names":["useScreenSize","size","useMedia"],"mappings":";;AAIM,SAAUA,aAAaA,CAACC,IAAgB,EAAA;AAC5C,EAAA,OAAOC,QAAQ,CAAC,CAAA,YAAA,EAAeD,IAAI,KAAK,CAAC;AAC3C;;;;"}

package/build/common/panel/Panel.js

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

package/build/common/panel/Panel.mjs

@@ -3,8 +3,8 @@ import { clsx } from 'clsx';
 import { forwardRef, useRef, useContext } from 'react';
 import '../theme.mjs';
 import '../direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../propsValues/control.mjs';
-import '../propsValues/breakpoint.mjs';
 import '../propsValues/size.mjs';
 import '../propsValues/typography.mjs';
 import '../propsValues/width.mjs';

package/build/common/responsivePanel/ResponsivePanel.js

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

package/build/common/responsivePanel/ResponsivePanel.mjs

@@ -2,8 +2,8 @@ import { forwardRef } from 'react';
 import { isServerSide } from '../domHelpers/documentIosClick.mjs';
 import '../theme.mjs';
 import '../direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../propsValues/control.mjs';
-import '../propsValues/breakpoint.mjs';
 import '../propsValues/size.mjs';
 import '../propsValues/typography.mjs';
 import '../propsValues/width.mjs';

package/build/criticalBanner/CriticalCommsBanner.js

@@ -7,8 +7,8 @@ var clsx = require('clsx');
 var Alert = require('../alert/Alert.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');
@@ -68,9 +68,6 @@ const iconBySentiment = {
     })
   })
 };
-/**
- * @deprecated `CriticalCommsBanner` component is deprecated and now replaced by the `CriticalBanner` component.
- */
 function CriticalCommsBanner({
   title,
   subtitle,

package/build/criticalBanner/CriticalCommsBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"CriticalCommsBanner.js","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import { Alert as AlertIcon, ClockBorderless as ClockIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport Alert from '../alert';\nimport { Sentiment } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport SentimentSurface from '../sentimentSurface';\n\nexport type CriticalCommsBannerSentiment =\n  | `${Sentiment.WARNING}`\n  | `${Sentiment.NEGATIVE}`\n  | `${Sentiment.NEUTRAL}`;\n\nexport type CriticalCommsBannerProps = {\n  title: string;\n  subtitle?: string;\n  action?: {\n    label: string;\n    href?: string;\n    target?: HTMLAnchorElement['target'];\n    onClick?: () => void;\n  };\n  sentiment?: CriticalCommsBannerSentiment;\n  className?: string;\n};\n\nconst makeSurface = (sentiment: CriticalCommsBannerSentiment) => {\n  const Surface = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (\n    <SentimentSurface as=\"span\" emphasis=\"elevated\" sentiment={sentiment} {...props} />\n  );\n  Surface.displayName = `CriticalCommsSurface(${sentiment})`;\n  return Surface;\n};\n\nconst iconBySentiment: Record<CriticalCommsBannerSentiment, React.ReactNode> = {\n  [Sentiment.NEGATIVE]: (\n    <Circle as={makeSurface(Sentiment.NEGATIVE)} size={32} className=\"status-circle negative\">\n      <AlertIcon className=\"status-icon light\" />\n    </Circle>\n  ),\n  [Sentiment.WARNING]: (\n    <Circle as={makeSurface(Sentiment.WARNING)} size={32} className=\"status-circle warning\">\n      <AlertIcon className=\"status-icon dark\" />\n    </Circle>\n  ),\n  [Sentiment.NEUTRAL]: (\n    <Circle as={makeSurface(Sentiment.NEUTRAL)} size={32} className=\"status-circle neutral\">\n      <ClockIcon className=\"status-icon dark\" />\n    </Circle>\n  ),\n};\n\n/**\n * @deprecated `CriticalCommsBanner` component is deprecated and now replaced by the `CriticalBanner` component.\n */\nfunction CriticalCommsBanner({\n  title,\n  subtitle,\n  action,\n  sentiment = Sentiment.NEGATIVE,\n  className,\n}: CriticalCommsBannerProps) {\n  return (\n    <SentimentSurface\n      sentiment={sentiment}\n      emphasis=\"elevated\"\n      className={clsx('critical-comms', className)}\n    >\n      <Alert\n        title={title}\n        message={subtitle}\n        action={\n          action && {\n            onClick: action.onClick,\n            href: action.href,\n            target: action.target,\n            text: action.label,\n            as: 'button',\n          }\n        }\n        className={className}\n        type={sentiment}\n        icon={iconBySentiment[sentiment]}\n      />\n    </SentimentSurface>\n  );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["makeSurface","sentiment","Surface","props","_jsx","SentimentSurface","as","emphasis","displayName","iconBySentiment","Sentiment","NEGATIVE","Circle","size","className","children","AlertIcon","WARNING","NEUTRAL","ClockIcon","CriticalCommsBanner","title","subtitle","action","clsx","Alert","message","onClick","href","target","text","label","type","icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAMA,WAAW,GAAIC,SAAuC,IAAI;AAC9D,EAAA,MAAMC,OAAO,GAAIC,KAAwD,iBACvEC,cAAA,CAACC,wBAAgB,EAAA;AAACC,IAAAA,EAAE,EAAC,MAAM;AAACC,IAAAA,QAAQ,EAAC,UAAU;AAACN,IAAAA,SAAS,EAAEA,SAAU;IAAA,GAAKE;AAAK,GAAC,CACjF;AACDD,EAAAA,OAAO,CAACM,WAAW,GAAG,CAAA,qBAAA,EAAwBP,SAAS,CAAA,CAAA,CAAG;AAC1D,EAAA,OAAOC,OAAO;AAChB,CAAC;AAED,MAAMO,eAAe,GAA0D;AAC7E,EAAA,CAACC,mBAAS,CAACC,QAAQ,gBACjBP,cAAA,CAACQ,cAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,mBAAS,CAACC,QAAQ,CAAE;AAACE,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,wBAAwB;IAAAC,QAAA,eACvFX,cAAA,CAACY,WAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAmB;AAC1C,GAAQ,CACT;AACD,EAAA,CAACJ,mBAAS,CAACO,OAAO,gBAChBb,cAAA,CAACQ,cAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,mBAAS,CAACO,OAAO,CAAE;AAACJ,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,cAAA,CAACY,WAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAkB;AACzC,GAAQ,CACT;AACD,EAAA,CAACJ,mBAAS,CAACQ,OAAO,gBAChBd,cAAA,CAACQ,cAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,mBAAS,CAACQ,OAAO,CAAE;AAACL,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,cAAA,CAACe,qBAAS,EAAA;AAACL,MAAAA,SAAS,EAAC;KAAkB;GACjC;CAEX;AAED;;AAEG;AACH,SAASM,mBAAmBA,CAAC;EAC3BC,KAAK;EACLC,QAAQ;EACRC,MAAM;aACNtB,WAAS,GAAGS,mBAAS,CAACC,QAAQ;AAC9BG,EAAAA;AAAS,CACgB,EAAA;EACzB,oBACEV,cAAA,CAACC,wBAAgB,EAAA;AACfJ,IAAAA,SAAS,EAAEA,WAAU;AACrBM,IAAAA,QAAQ,EAAC,UAAU;AACnBO,IAAAA,SAAS,EAAEU,SAAI,CAAC,gBAAgB,EAAEV,SAAS,CAAE;IAAAC,QAAA,eAE7CX,cAAA,CAACqB,aAAK,EAAA;AACJJ,MAAAA,KAAK,EAAEA,KAAM;AACbK,MAAAA,OAAO,EAAEJ,QAAS;MAClBC,MAAM,EACJA,MAAM,IAAI;QACRI,OAAO,EAAEJ,MAAM,CAACI,OAAO;QACvBC,IAAI,EAAEL,MAAM,CAACK,IAAI;QACjBC,MAAM,EAAEN,MAAM,CAACM,MAAM;QACrBC,IAAI,EAAEP,MAAM,CAACQ,KAAK;AAClBzB,QAAAA,EAAE,EAAE;OAEP;AACDQ,MAAAA,SAAS,EAAEA,SAAU;AACrBkB,MAAAA,IAAI,EAAE/B,WAAU;MAChBgC,IAAI,EAAExB,eAAe,CAACR,WAAS;KAAE;AAErC,GAAkB,CAAC;AAEvB;;;;"}
+{"version":3,"file":"CriticalCommsBanner.js","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import { Alert as AlertIcon, ClockBorderless as ClockIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport Alert from '../alert';\nimport { Sentiment } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport SentimentSurface from '../sentimentSurface';\n\nexport type CriticalCommsBannerSentiment =\n  | `${Sentiment.WARNING}`\n  | `${Sentiment.NEGATIVE}`\n  | `${Sentiment.NEUTRAL}`;\n\nexport type CriticalCommsBannerProps = {\n  title: string;\n  subtitle?: string;\n  action?: {\n    label: string;\n    href?: string;\n    target?: HTMLAnchorElement['target'];\n    onClick?: () => void;\n  };\n  sentiment?: CriticalCommsBannerSentiment;\n  className?: string;\n};\n\nconst makeSurface = (sentiment: CriticalCommsBannerSentiment) => {\n  const Surface = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (\n    <SentimentSurface as=\"span\" emphasis=\"elevated\" sentiment={sentiment} {...props} />\n  );\n  Surface.displayName = `CriticalCommsSurface(${sentiment})`;\n  return Surface;\n};\n\nconst iconBySentiment: Record<CriticalCommsBannerSentiment, React.ReactNode> = {\n  [Sentiment.NEGATIVE]: (\n    <Circle as={makeSurface(Sentiment.NEGATIVE)} size={32} className=\"status-circle negative\">\n      <AlertIcon className=\"status-icon light\" />\n    </Circle>\n  ),\n  [Sentiment.WARNING]: (\n    <Circle as={makeSurface(Sentiment.WARNING)} size={32} className=\"status-circle warning\">\n      <AlertIcon className=\"status-icon dark\" />\n    </Circle>\n  ),\n  [Sentiment.NEUTRAL]: (\n    <Circle as={makeSurface(Sentiment.NEUTRAL)} size={32} className=\"status-circle neutral\">\n      <ClockIcon className=\"status-icon dark\" />\n    </Circle>\n  ),\n};\n\nfunction CriticalCommsBanner({\n  title,\n  subtitle,\n  action,\n  sentiment = Sentiment.NEGATIVE,\n  className,\n}: CriticalCommsBannerProps) {\n  return (\n    <SentimentSurface\n      sentiment={sentiment}\n      emphasis=\"elevated\"\n      className={clsx('critical-comms', className)}\n    >\n      <Alert\n        title={title}\n        message={subtitle}\n        action={\n          action && {\n            onClick: action.onClick,\n            href: action.href,\n            target: action.target,\n            text: action.label,\n            as: 'button',\n          }\n        }\n        className={className}\n        type={sentiment}\n        icon={iconBySentiment[sentiment]}\n      />\n    </SentimentSurface>\n  );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["makeSurface","sentiment","Surface","props","_jsx","SentimentSurface","as","emphasis","displayName","iconBySentiment","Sentiment","NEGATIVE","Circle","size","className","children","AlertIcon","WARNING","NEUTRAL","ClockIcon","CriticalCommsBanner","title","subtitle","action","clsx","Alert","message","onClick","href","target","text","label","type","icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAMA,WAAW,GAAIC,SAAuC,IAAI;AAC9D,EAAA,MAAMC,OAAO,GAAIC,KAAwD,iBACvEC,cAAA,CAACC,wBAAgB,EAAA;AAACC,IAAAA,EAAE,EAAC,MAAM;AAACC,IAAAA,QAAQ,EAAC,UAAU;AAACN,IAAAA,SAAS,EAAEA,SAAU;IAAA,GAAKE;AAAK,GAAC,CACjF;AACDD,EAAAA,OAAO,CAACM,WAAW,GAAG,CAAA,qBAAA,EAAwBP,SAAS,CAAA,CAAA,CAAG;AAC1D,EAAA,OAAOC,OAAO;AAChB,CAAC;AAED,MAAMO,eAAe,GAA0D;AAC7E,EAAA,CAACC,mBAAS,CAACC,QAAQ,gBACjBP,cAAA,CAACQ,cAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,mBAAS,CAACC,QAAQ,CAAE;AAACE,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,wBAAwB;IAAAC,QAAA,eACvFX,cAAA,CAACY,WAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAmB;AAC1C,GAAQ,CACT;AACD,EAAA,CAACJ,mBAAS,CAACO,OAAO,gBAChBb,cAAA,CAACQ,cAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,mBAAS,CAACO,OAAO,CAAE;AAACJ,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,cAAA,CAACY,WAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAkB;AACzC,GAAQ,CACT;AACD,EAAA,CAACJ,mBAAS,CAACQ,OAAO,gBAChBd,cAAA,CAACQ,cAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,mBAAS,CAACQ,OAAO,CAAE;AAACL,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,cAAA,CAACe,qBAAS,EAAA;AAACL,MAAAA,SAAS,EAAC;KAAkB;GACjC;CAEX;AAED,SAASM,mBAAmBA,CAAC;EAC3BC,KAAK;EACLC,QAAQ;EACRC,MAAM;aACNtB,WAAS,GAAGS,mBAAS,CAACC,QAAQ;AAC9BG,EAAAA;AAAS,CACgB,EAAA;EACzB,oBACEV,cAAA,CAACC,wBAAgB,EAAA;AACfJ,IAAAA,SAAS,EAAEA,WAAU;AACrBM,IAAAA,QAAQ,EAAC,UAAU;AACnBO,IAAAA,SAAS,EAAEU,SAAI,CAAC,gBAAgB,EAAEV,SAAS,CAAE;IAAAC,QAAA,eAE7CX,cAAA,CAACqB,aAAK,EAAA;AACJJ,MAAAA,KAAK,EAAEA,KAAM;AACbK,MAAAA,OAAO,EAAEJ,QAAS;MAClBC,MAAM,EACJA,MAAM,IAAI;QACRI,OAAO,EAAEJ,MAAM,CAACI,OAAO;QACvBC,IAAI,EAAEL,MAAM,CAACK,IAAI;QACjBC,MAAM,EAAEN,MAAM,CAACM,MAAM;QACrBC,IAAI,EAAEP,MAAM,CAACQ,KAAK;AAClBzB,QAAAA,EAAE,EAAE;OAEP;AACDQ,MAAAA,SAAS,EAAEA,SAAU;AACrBkB,MAAAA,IAAI,EAAE/B,WAAU;MAChBgC,IAAI,EAAExB,eAAe,CAACR,WAAS;KAAE;AAErC,GAAkB,CAAC;AAEvB;;;;"}

package/build/criticalBanner/CriticalCommsBanner.mjs

@@ -3,8 +3,8 @@ import { clsx } from 'clsx';
 import Alert$1 from '../alert/Alert.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';
@@ -64,9 +64,6 @@ const iconBySentiment = {
     })
   })
 };
-/**
- * @deprecated `CriticalCommsBanner` component is deprecated and now replaced by the `CriticalBanner` component.
- */
 function CriticalCommsBanner({
   title,
   subtitle,

package/build/criticalBanner/CriticalCommsBanner.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CriticalCommsBanner.mjs","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import { Alert as AlertIcon, ClockBorderless as ClockIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport Alert from '../alert';\nimport { Sentiment } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport SentimentSurface from '../sentimentSurface';\n\nexport type CriticalCommsBannerSentiment =\n  | `${Sentiment.WARNING}`\n  | `${Sentiment.NEGATIVE}`\n  | `${Sentiment.NEUTRAL}`;\n\nexport type CriticalCommsBannerProps = {\n  title: string;\n  subtitle?: string;\n  action?: {\n    label: string;\n    href?: string;\n    target?: HTMLAnchorElement['target'];\n    onClick?: () => void;\n  };\n  sentiment?: CriticalCommsBannerSentiment;\n  className?: string;\n};\n\nconst makeSurface = (sentiment: CriticalCommsBannerSentiment) => {\n  const Surface = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (\n    <SentimentSurface as=\"span\" emphasis=\"elevated\" sentiment={sentiment} {...props} />\n  );\n  Surface.displayName = `CriticalCommsSurface(${sentiment})`;\n  return Surface;\n};\n\nconst iconBySentiment: Record<CriticalCommsBannerSentiment, React.ReactNode> = {\n  [Sentiment.NEGATIVE]: (\n    <Circle as={makeSurface(Sentiment.NEGATIVE)} size={32} className=\"status-circle negative\">\n      <AlertIcon className=\"status-icon light\" />\n    </Circle>\n  ),\n  [Sentiment.WARNING]: (\n    <Circle as={makeSurface(Sentiment.WARNING)} size={32} className=\"status-circle warning\">\n      <AlertIcon className=\"status-icon dark\" />\n    </Circle>\n  ),\n  [Sentiment.NEUTRAL]: (\n    <Circle as={makeSurface(Sentiment.NEUTRAL)} size={32} className=\"status-circle neutral\">\n      <ClockIcon className=\"status-icon dark\" />\n    </Circle>\n  ),\n};\n\n/**\n * @deprecated `CriticalCommsBanner` component is deprecated and now replaced by the `CriticalBanner` component.\n */\nfunction CriticalCommsBanner({\n  title,\n  subtitle,\n  action,\n  sentiment = Sentiment.NEGATIVE,\n  className,\n}: CriticalCommsBannerProps) {\n  return (\n    <SentimentSurface\n      sentiment={sentiment}\n      emphasis=\"elevated\"\n      className={clsx('critical-comms', className)}\n    >\n      <Alert\n        title={title}\n        message={subtitle}\n        action={\n          action && {\n            onClick: action.onClick,\n            href: action.href,\n            target: action.target,\n            text: action.label,\n            as: 'button',\n          }\n        }\n        className={className}\n        type={sentiment}\n        icon={iconBySentiment[sentiment]}\n      />\n    </SentimentSurface>\n  );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["makeSurface","sentiment","Surface","props","_jsx","SentimentSurface","as","emphasis","displayName","iconBySentiment","Sentiment","NEGATIVE","Circle","size","className","children","AlertIcon","WARNING","NEUTRAL","ClockIcon","CriticalCommsBanner","title","subtitle","action","clsx","Alert","message","onClick","href","target","text","label","type","icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAMA,WAAW,GAAIC,SAAuC,IAAI;AAC9D,EAAA,MAAMC,OAAO,GAAIC,KAAwD,iBACvEC,GAAA,CAACC,gBAAgB,EAAA;AAACC,IAAAA,EAAE,EAAC,MAAM;AAACC,IAAAA,QAAQ,EAAC,UAAU;AAACN,IAAAA,SAAS,EAAEA,SAAU;IAAA,GAAKE;AAAK,GAAC,CACjF;AACDD,EAAAA,OAAO,CAACM,WAAW,GAAG,CAAA,qBAAA,EAAwBP,SAAS,CAAA,CAAA,CAAG;AAC1D,EAAA,OAAOC,OAAO;AAChB,CAAC;AAED,MAAMO,eAAe,GAA0D;AAC7E,EAAA,CAACC,SAAS,CAACC,QAAQ,gBACjBP,GAAA,CAACQ,MAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,SAAS,CAACC,QAAQ,CAAE;AAACE,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,wBAAwB;IAAAC,QAAA,eACvFX,GAAA,CAACY,KAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAmB;AAC1C,GAAQ,CACT;AACD,EAAA,CAACJ,SAAS,CAACO,OAAO,gBAChBb,GAAA,CAACQ,MAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,SAAS,CAACO,OAAO,CAAE;AAACJ,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,GAAA,CAACY,KAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAkB;AACzC,GAAQ,CACT;AACD,EAAA,CAACJ,SAAS,CAACQ,OAAO,gBAChBd,GAAA,CAACQ,MAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,SAAS,CAACQ,OAAO,CAAE;AAACL,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,GAAA,CAACe,eAAS,EAAA;AAACL,MAAAA,SAAS,EAAC;KAAkB;GACjC;CAEX;AAED;;AAEG;AACH,SAASM,mBAAmBA,CAAC;EAC3BC,KAAK;EACLC,QAAQ;EACRC,MAAM;EACNtB,SAAS,GAAGS,SAAS,CAACC,QAAQ;AAC9BG,EAAAA;AAAS,CACgB,EAAA;EACzB,oBACEV,GAAA,CAACC,gBAAgB,EAAA;AACfJ,IAAAA,SAAS,EAAEA,SAAU;AACrBM,IAAAA,QAAQ,EAAC,UAAU;AACnBO,IAAAA,SAAS,EAAEU,IAAI,CAAC,gBAAgB,EAAEV,SAAS,CAAE;IAAAC,QAAA,eAE7CX,GAAA,CAACqB,OAAK,EAAA;AACJJ,MAAAA,KAAK,EAAEA,KAAM;AACbK,MAAAA,OAAO,EAAEJ,QAAS;MAClBC,MAAM,EACJA,MAAM,IAAI;QACRI,OAAO,EAAEJ,MAAM,CAACI,OAAO;QACvBC,IAAI,EAAEL,MAAM,CAACK,IAAI;QACjBC,MAAM,EAAEN,MAAM,CAACM,MAAM;QACrBC,IAAI,EAAEP,MAAM,CAACQ,KAAK;AAClBzB,QAAAA,EAAE,EAAE;OAEP;AACDQ,MAAAA,SAAS,EAAEA,SAAU;AACrBkB,MAAAA,IAAI,EAAE/B,SAAU;MAChBgC,IAAI,EAAExB,eAAe,CAACR,SAAS;KAAE;AAErC,GAAkB,CAAC;AAEvB;;;;"}
+{"version":3,"file":"CriticalCommsBanner.mjs","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import { Alert as AlertIcon, ClockBorderless as ClockIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport Alert from '../alert';\nimport { Sentiment } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport SentimentSurface from '../sentimentSurface';\n\nexport type CriticalCommsBannerSentiment =\n  | `${Sentiment.WARNING}`\n  | `${Sentiment.NEGATIVE}`\n  | `${Sentiment.NEUTRAL}`;\n\nexport type CriticalCommsBannerProps = {\n  title: string;\n  subtitle?: string;\n  action?: {\n    label: string;\n    href?: string;\n    target?: HTMLAnchorElement['target'];\n    onClick?: () => void;\n  };\n  sentiment?: CriticalCommsBannerSentiment;\n  className?: string;\n};\n\nconst makeSurface = (sentiment: CriticalCommsBannerSentiment) => {\n  const Surface = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (\n    <SentimentSurface as=\"span\" emphasis=\"elevated\" sentiment={sentiment} {...props} />\n  );\n  Surface.displayName = `CriticalCommsSurface(${sentiment})`;\n  return Surface;\n};\n\nconst iconBySentiment: Record<CriticalCommsBannerSentiment, React.ReactNode> = {\n  [Sentiment.NEGATIVE]: (\n    <Circle as={makeSurface(Sentiment.NEGATIVE)} size={32} className=\"status-circle negative\">\n      <AlertIcon className=\"status-icon light\" />\n    </Circle>\n  ),\n  [Sentiment.WARNING]: (\n    <Circle as={makeSurface(Sentiment.WARNING)} size={32} className=\"status-circle warning\">\n      <AlertIcon className=\"status-icon dark\" />\n    </Circle>\n  ),\n  [Sentiment.NEUTRAL]: (\n    <Circle as={makeSurface(Sentiment.NEUTRAL)} size={32} className=\"status-circle neutral\">\n      <ClockIcon className=\"status-icon dark\" />\n    </Circle>\n  ),\n};\n\nfunction CriticalCommsBanner({\n  title,\n  subtitle,\n  action,\n  sentiment = Sentiment.NEGATIVE,\n  className,\n}: CriticalCommsBannerProps) {\n  return (\n    <SentimentSurface\n      sentiment={sentiment}\n      emphasis=\"elevated\"\n      className={clsx('critical-comms', className)}\n    >\n      <Alert\n        title={title}\n        message={subtitle}\n        action={\n          action && {\n            onClick: action.onClick,\n            href: action.href,\n            target: action.target,\n            text: action.label,\n            as: 'button',\n          }\n        }\n        className={className}\n        type={sentiment}\n        icon={iconBySentiment[sentiment]}\n      />\n    </SentimentSurface>\n  );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["makeSurface","sentiment","Surface","props","_jsx","SentimentSurface","as","emphasis","displayName","iconBySentiment","Sentiment","NEGATIVE","Circle","size","className","children","AlertIcon","WARNING","NEUTRAL","ClockIcon","CriticalCommsBanner","title","subtitle","action","clsx","Alert","message","onClick","href","target","text","label","type","icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAMA,WAAW,GAAIC,SAAuC,IAAI;AAC9D,EAAA,MAAMC,OAAO,GAAIC,KAAwD,iBACvEC,GAAA,CAACC,gBAAgB,EAAA;AAACC,IAAAA,EAAE,EAAC,MAAM;AAACC,IAAAA,QAAQ,EAAC,UAAU;AAACN,IAAAA,SAAS,EAAEA,SAAU;IAAA,GAAKE;AAAK,GAAC,CACjF;AACDD,EAAAA,OAAO,CAACM,WAAW,GAAG,CAAA,qBAAA,EAAwBP,SAAS,CAAA,CAAA,CAAG;AAC1D,EAAA,OAAOC,OAAO;AAChB,CAAC;AAED,MAAMO,eAAe,GAA0D;AAC7E,EAAA,CAACC,SAAS,CAACC,QAAQ,gBACjBP,GAAA,CAACQ,MAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,SAAS,CAACC,QAAQ,CAAE;AAACE,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,wBAAwB;IAAAC,QAAA,eACvFX,GAAA,CAACY,KAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAmB;AAC1C,GAAQ,CACT;AACD,EAAA,CAACJ,SAAS,CAACO,OAAO,gBAChBb,GAAA,CAACQ,MAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,SAAS,CAACO,OAAO,CAAE;AAACJ,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,GAAA,CAACY,KAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAkB;AACzC,GAAQ,CACT;AACD,EAAA,CAACJ,SAAS,CAACQ,OAAO,gBAChBd,GAAA,CAACQ,MAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,SAAS,CAACQ,OAAO,CAAE;AAACL,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,GAAA,CAACe,eAAS,EAAA;AAACL,MAAAA,SAAS,EAAC;KAAkB;GACjC;CAEX;AAED,SAASM,mBAAmBA,CAAC;EAC3BC,KAAK;EACLC,QAAQ;EACRC,MAAM;EACNtB,SAAS,GAAGS,SAAS,CAACC,QAAQ;AAC9BG,EAAAA;AAAS,CACgB,EAAA;EACzB,oBACEV,GAAA,CAACC,gBAAgB,EAAA;AACfJ,IAAAA,SAAS,EAAEA,SAAU;AACrBM,IAAAA,QAAQ,EAAC,UAAU;AACnBO,IAAAA,SAAS,EAAEU,IAAI,CAAC,gBAAgB,EAAEV,SAAS,CAAE;IAAAC,QAAA,eAE7CX,GAAA,CAACqB,OAAK,EAAA;AACJJ,MAAAA,KAAK,EAAEA,KAAM;AACbK,MAAAA,OAAO,EAAEJ,QAAS;MAClBC,MAAM,EACJA,MAAM,IAAI;QACRI,OAAO,EAAEJ,MAAM,CAACI,OAAO;QACvBC,IAAI,EAAEL,MAAM,CAACK,IAAI;QACjBC,MAAM,EAAEN,MAAM,CAACM,MAAM;QACrBC,IAAI,EAAEP,MAAM,CAACQ,KAAK;AAClBzB,QAAAA,EAAE,EAAE;OAEP;AACDQ,MAAAA,SAAS,EAAEA,SAAU;AACrBkB,MAAAA,IAAI,EAAE/B,SAAU;MAChBgC,IAAI,EAAExB,eAAe,CAACR,SAAS;KAAE;AAErC,GAAkB,CAAC;AAEvB;;;;"}

package/build/dateInput/DateInput.js

@@ -19,8 +19,8 @@ require('../header/Header.js');
 require('virtua');
 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/dateInput/DateInput.mjs

@@ -15,8 +15,8 @@ import '../header/Header.mjs';
 import 'virtua';
 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/dateLookup/DateLookup.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var clsx = require('clsx');
 var React = require('react');
+var neptuneTokens = require('@transferwise/neptune-tokens');
 require('../common/theme.js');
 require('../common/direction.js');
 require('../common/propsValues/control.js');
-var breakpoint = require('../common/propsValues/breakpoint.js');
 var size = require('../common/propsValues/size.js');
 require('../common/propsValues/typography.js');
 require('../common/propsValues/width.js');
@@ -101,7 +101,7 @@ class DateLookup extends React.PureComponent {
     if (this.props.value?.getTime() !== previousProps.value?.getTime() && this.state.open) {
       this.focusOn('.active');
     }
-    const mediaQuery = window.matchMedia(`(max-width: ${breakpoint.Breakpoint.SMALL}px)`);
+    const mediaQuery = window.matchMedia(`(max-width: ${neptuneTokens.Breakpoint.SMALL}px)`);
     this.setState({
       isMobile: mediaQuery.matches
     });