@transferwise/components 0.0.0-experimental-c7da7db → 0.0.0-experimental-24a0a12

package/build/common/panel/Panel.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var react = require('@floating-ui/react');
 var clsx = require('clsx');
 var React = require('react');
+var reactPopper = require('react-popper');
 require('../theme.js');
 require('../direction.js');
 require('../propsValues/control.js');
@@ -24,7 +24,6 @@ require('../propsValues/variant.js');
 require('../propsValues/scroll.js');
 require('../propsValues/markdownNodeType.js');
 require('../fileType.js');
-require('@transferwise/formatting');
 require('@transferwise/icons');
 require('react-intl');
 require('../closeButton/CloseButton.messages.js');
@@ -32,7 +31,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var Dimmer = require('../../dimmer/Dimmer.js');
 var OverlayIdProvider = require('../../provider/overlay/OverlayIdProvider.js');
 
-const POPOVER_OFFSET = 16;
+const POPOVER_OFFSET = [0, 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.
@@ -55,46 +54,60 @@ const Panel = /*#__PURE__*/React.forwardRef(function Panel({
   considerHeight = false,
   ...rest
 }, reference) {
-  const arrowRef = React.useRef(null);
-  const middleware = [];
-  if (arrow) {
-    middleware.push(react.offset(POPOVER_OFFSET));
-  }
-  if (flip && fallbackPlacements[position$1]) {
-    middleware.push(react.flip({
-      fallbackPlacements: fallbackPlacements[position$1]
-    }));
-  }
+  const [arrowElement, setArrowElement] = React.useState(null);
+  const [popperElement, setPopperElement] = React.useState(null);
+  const modifiers = [];
   if (altAxis) {
-    middleware.push(react.shift());
+    modifiers.push({
+      // https://popper.js.org/docs/v2/modifiers/prevent-overflow
+      name: 'preventOverflow',
+      options: {
+        altAxis: true,
+        tether: false
+      }
+    });
   }
   if (arrow) {
-    middleware.push(react.arrow({
-      element: arrowRef,
-      padding: 8
-    }));
+    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
+      }
+    });
+  }
+  if (flip && fallbackPlacements[position$1]) {
+    modifiers.push({
+      name: 'flip',
+      options: {
+        fallbackPlacements: fallbackPlacements[position$1]
+      }
+    });
   }
   const {
-    refs,
-    floatingStyles,
-    placement,
-    middlewareData
-  } = react.useFloating({
+    styles,
+    attributes,
+    forceUpdate
+  } = reactPopper.usePopper(anchorRef.current, popperElement, {
     placement: position$1,
-    middleware,
-    elements: {
-      reference: anchorRef.current
-    },
-    whileElementsMounted: open ? react.autoUpdate : undefined
+    modifiers
   });
-  const arrowStyle = {
-    ...(middlewareData.arrow?.x != null ? {
-      left: middlewareData.arrow.x
-    } : {}),
-    ...(middlewareData.arrow?.y != null ? {
-      top: middlewareData.arrow.y
-    } : {})
-  };
+  // 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
+  React.useEffect(() => {
+    if (open && forceUpdate) {
+      forceUpdate();
+    }
+  }, [open]);
   const contentStyle = {
     ...(anchorWidth ? {
       width: anchorRef.current?.clientWidth
@@ -110,10 +123,12 @@ const Panel = /*#__PURE__*/React.forwardRef(function Panel({
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
       id: overlayId,
       ...rest,
-      ref: refs.setFloating,
+      ref: setPopperElement,
       role: "dialog",
-      style: floatingStyles,
-      "data-popper-placement": placement,
+      style: {
+        ...styles.popper
+      },
+      ...attributes.popper,
       className: clsx.clsx('np-panel', {
         'np-panel--open': open
       }, rest.className),
@@ -122,9 +137,9 @@ const Panel = /*#__PURE__*/React.forwardRef(function Panel({
         style: contentStyle,
         className: clsx.clsx('np-panel__content'),
         children: [children, arrow && /*#__PURE__*/jsxRuntime.jsx("div", {
-          ref: arrowRef,
+          ref: setArrowElement,
           className: clsx.clsx('np-panel__arrow'),
-          style: arrowStyle
+          style: styles.arrow
         })]
       })
     })

package/build/common/panel/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sources":["../../../src/common/panel/Panel.tsx"],"sourcesContent":["import {\n  arrow as arrowMiddleware,\n  autoUpdate,\n  flip as flipMiddleware,\n  offset,\n  type Placement,\n  shift,\n  useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  MutableRefObject,\n  PropsWithChildren,\n  SyntheticEvent,\n  forwardRef,\n  useContext,\n  useRef,\n} from 'react';\n\nimport { Position, PositionBottom, PositionLeft, PositionRight, PositionTop } from '..';\nimport Dimmer from '../../dimmer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\n\nconst POPOVER_OFFSET = 16;\n\n// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space\n// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.\n// This mapping forces popover to try the four available positions before going back to the initial chosen one.\nconst fallbackPlacements: Record<string, Placement[]> = {\n  [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],\n  [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],\n  [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],\n  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],\n};\n\nexport type PanelProps = PropsWithChildren<{\n  arrow?: boolean;\n  flip?: boolean;\n  altAxis?: boolean;\n  open?: boolean;\n  onClose?: (event: Event | SyntheticEvent) => void;\n  position?: PositionBottom | PositionLeft | PositionRight | PositionTop;\n  anchorRef: MutableRefObject<Element | null>;\n  anchorWidth?: boolean;\n  considerHeight?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nconst Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  {\n    arrow = false,\n    flip = true,\n    altAxis = false,\n    children,\n    open = false,\n    onClose,\n    position = Position.BOTTOM,\n    anchorRef,\n    anchorWidth = false,\n    considerHeight = false,\n    ...rest\n  }: PanelProps,\n  reference,\n) {\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n\n  const middleware = [];\n\n  if (arrow) {\n    middleware.push(offset(POPOVER_OFFSET));\n  }\n\n  if (flip && fallbackPlacements[position]) {\n    middleware.push(\n      flipMiddleware({\n        fallbackPlacements: fallbackPlacements[position],\n      }),\n    );\n  }\n\n  if (altAxis) {\n    middleware.push(shift());\n  }\n\n  if (arrow) {\n    middleware.push(arrowMiddleware({ element: arrowRef, padding: 8 }));\n  }\n\n  const { refs, floatingStyles, placement, middlewareData } = useFloating({\n    placement: position,\n    middleware,\n    elements: {\n      reference: anchorRef.current,\n    },\n    whileElementsMounted: open ? autoUpdate : undefined,\n  });\n\n  const arrowStyle: CSSProperties = {\n    ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),\n    ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),\n  };\n\n  const contentStyle: CSSProperties = {\n    ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),\n  };\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>\n      <div\n        id={overlayId}\n        {...rest}\n        ref={refs.setFloating}\n        role=\"dialog\"\n        style={floatingStyles}\n        data-popper-placement={placement}\n        className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}\n      >\n        <div ref={reference} style={contentStyle} className={clsx('np-panel__content')}>\n          {children}\n          {/* Arrow has to stay inside content to get the same animations as the \"dialog\" and to get hidden when panel is closed. */}\n          {arrow && <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />}\n        </div>\n      </div>\n    </Dimmer>\n  );\n});\n\nexport default Panel;\n"],"names":["POPOVER_OFFSET","fallbackPlacements","Position","TOP","BOTTOM","RIGHT","LEFT","Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","anchorRef","anchorWidth","considerHeight","rest","reference","arrowRef","useRef","middleware","push","offset","flipMiddleware","shift","arrowMiddleware","element","padding","refs","floatingStyles","placement","middlewareData","useFloating","elements","current","whileElementsMounted","autoUpdate","undefined","arrowStyle","x","left","y","top","contentStyle","width","clientWidth","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","id","ref","setFloating","role","style","className","clsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Panel.js","sources":["../../../src/common/panel/Panel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  MutableRefObject,\n  PropsWithChildren,\n  SyntheticEvent,\n  forwardRef,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { Position, PositionBottom, PositionLeft, PositionRight, PositionTop } from '..';\nimport Dimmer from '../../dimmer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\n\nconst POPOVER_OFFSET = [0, 16];\n\n// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space\n// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.\n// This mapping forces popover to try the four available positions before going back to the initial chosen one.\nconst fallbackPlacements = {\n  [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],\n  [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],\n  [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],\n  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],\n};\n\nexport type PanelProps = PropsWithChildren<{\n  arrow?: boolean;\n  flip?: boolean;\n  altAxis?: boolean;\n  open?: boolean;\n  onClose?: (event: Event | SyntheticEvent) => void;\n  position?: PositionBottom | PositionLeft | PositionRight | PositionTop;\n  anchorRef: MutableRefObject<Element | null>;\n  anchorWidth?: boolean;\n  considerHeight?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nconst Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  {\n    arrow = false,\n    flip = true,\n    altAxis = false,\n    children,\n    open = false,\n    onClose,\n    position = Position.BOTTOM,\n    anchorRef,\n    anchorWidth = false,\n    considerHeight = false,\n    ...rest\n  }: PanelProps,\n  reference,\n) {\n  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n\n  const modifiers = [];\n\n  if (altAxis) {\n    modifiers.push({\n      // https://popper.js.org/docs/v2/modifiers/prevent-overflow\n      name: 'preventOverflow',\n      options: {\n        altAxis: true,\n        tether: false,\n      },\n    });\n  }\n\n  if (arrow) {\n    modifiers.push({\n      name: 'arrow',\n      options: {\n        element: arrowElement,\n        options: {\n          padding: 8, // 8px from the edges of the popper\n        },\n      },\n    });\n    // This lets you displace a popper element from its reference element.\n    modifiers.push({ name: 'offset', options: { offset: POPOVER_OFFSET } });\n  }\n  if (flip && fallbackPlacements[position]) {\n    modifiers.push({\n      name: 'flip',\n      options: {\n        fallbackPlacements: fallbackPlacements[position],\n      },\n    });\n  }\n\n  const { styles, attributes, forceUpdate } = usePopper(anchorRef.current, popperElement, {\n    placement: position,\n    modifiers,\n  });\n\n  // If the trigger is not visible when the position is calculated, it will be incorrect. Because this can happen repeatedly (on resize for example),\n  // it is most simple just to always position before opening\n  useEffect(() => {\n    if (open && forceUpdate) {\n      forceUpdate();\n    }\n  }, [open]);\n\n  const contentStyle: CSSProperties = {\n    ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),\n  };\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>\n      <div\n        id={overlayId}\n        {...rest}\n        ref={setPopperElement}\n        role=\"dialog\"\n        style={{ ...styles.popper }}\n        {...attributes.popper}\n        className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}\n      >\n        <div ref={reference} style={contentStyle} className={clsx('np-panel__content')}>\n          {children}\n          {/* Arrow has to stay inside content to get the same animations as the \"dialog\" and to get hidden when panel is closed. */}\n          {arrow && (\n            <div ref={setArrowElement} className={clsx('np-panel__arrow')} style={styles.arrow} />\n          )}\n        </div>\n      </div>\n    </Dimmer>\n  );\n});\n\nexport default Panel;\n"],"names":["POPOVER_OFFSET","fallbackPlacements","Position","TOP","BOTTOM","RIGHT","LEFT","Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","anchorRef","anchorWidth","considerHeight","rest","reference","arrowElement","setArrowElement","useState","popperElement","setPopperElement","modifiers","push","name","options","tether","element","padding","offset","styles","attributes","forceUpdate","usePopper","current","placement","useEffect","contentStyle","width","clientWidth","undefined","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","id","ref","role","style","popper","className","clsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,cAAc,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC;AAE9B;AACA;AACA;AACA,MAAMC,kBAAkB,GAAG;AACzB,EAAA,CAACC,iBAAQ,CAACC,GAAG,GAAG,CAACD,iBAAQ,CAACE,MAAM,EAAEF,iBAAQ,CAACG,KAAK,EAAEH,iBAAQ,CAACI,IAAI,CAAC;AAChE,EAAA,CAACJ,iBAAQ,CAACE,MAAM,GAAG,CAACF,iBAAQ,CAACC,GAAG,EAAED,iBAAQ,CAACG,KAAK,EAAEH,iBAAQ,CAACI,IAAI,CAAC;AAChE,EAAA,CAACJ,iBAAQ,CAACI,IAAI,GAAG,CAACJ,iBAAQ,CAACG,KAAK,EAAEH,iBAAQ,CAACC,GAAG,EAAED,iBAAQ,CAACE,MAAM,CAAC;AAChE,EAAA,CAACF,iBAAQ,CAACG,KAAK,GAAG,CAACH,iBAAQ,CAACI,IAAI,EAAEJ,iBAAQ,CAACC,GAAG,EAAED,iBAAQ,CAACE,MAAM;CAChE;AAeD,MAAMG,KAAK,gBAAGC,gBAAU,CAA6B,SAASD,KAAKA,CACjE;AACEE,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,IAAI,GAAG,IAAI;AACXC,EAAAA,OAAO,GAAG,KAAK;EACfC,QAAQ;AACRC,EAAAA,IAAI,GAAG,KAAK;EACZC,OAAO;YACPC,UAAQ,GAAGb,iBAAQ,CAACE,MAAM;EAC1BY,SAAS;AACTC,EAAAA,WAAW,GAAG,KAAK;AACnBC,EAAAA,cAAc,GAAG,KAAK;EACtB,GAAGC;AAAI,CACI,EACbC,SAAS,EAAA;EAET,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGC,cAAQ,CAAwB,IAAI,CAAC;EAC7E,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGF,cAAQ,CAAwB,IAAI,CAAC;EAE/E,MAAMG,SAAS,GAAG,EAAE;AAEpB,EAAA,IAAIf,OAAO,EAAE;IACXe,SAAS,CAACC,IAAI,CAAC;AACb;AACAC,MAAAA,IAAI,EAAE,iBAAiB;AACvBC,MAAAA,OAAO,EAAE;AACPlB,QAAAA,OAAO,EAAE,IAAI;AACbmB,QAAAA,MAAM,EAAE;AACT;AACF,KAAA,CAAC;AACJ,EAAA;AAEA,EAAA,IAAIrB,KAAK,EAAE;IACTiB,SAAS,CAACC,IAAI,CAAC;AACbC,MAAAA,IAAI,EAAE,OAAO;AACbC,MAAAA,OAAO,EAAE;AACPE,QAAAA,OAAO,EAAEV,YAAY;AACrBQ,QAAAA,OAAO,EAAE;UACPG,OAAO,EAAE,CAAC;AACX;AACF;AACF,KAAA,CAAC;AACF;IACAN,SAAS,CAACC,IAAI,CAAC;AAAEC,MAAAA,IAAI,EAAE,QAAQ;AAAEC,MAAAA,OAAO,EAAE;AAAEI,QAAAA,MAAM,EAAEjC;AAAc;AAAE,KAAE,CAAC;AACzE,EAAA;AACA,EAAA,IAAIU,IAAI,IAAIT,kBAAkB,CAACc,UAAQ,CAAC,EAAE;IACxCW,SAAS,CAACC,IAAI,CAAC;AACbC,MAAAA,IAAI,EAAE,MAAM;AACZC,MAAAA,OAAO,EAAE;QACP5B,kBAAkB,EAAEA,kBAAkB,CAACc,UAAQ;AAChD;AACF,KAAA,CAAC;AACJ,EAAA;EAEA,MAAM;IAAEmB,MAAM;IAAEC,UAAU;AAAEC,IAAAA;GAAa,GAAGC,qBAAS,CAACrB,SAAS,CAACsB,OAAO,EAAEd,aAAa,EAAE;AACtFe,IAAAA,SAAS,EAAExB,UAAQ;AACnBW,IAAAA;AACD,GAAA,CAAC;AAEF;AACA;AACAc,EAAAA,eAAS,CAAC,MAAK;IACb,IAAI3B,IAAI,IAAIuB,WAAW,EAAE;AACvBA,MAAAA,WAAW,EAAE;AACf,IAAA;AACF,EAAA,CAAC,EAAE,CAACvB,IAAI,CAAC,CAAC;AAEV,EAAA,MAAM4B,YAAY,GAAkB;AAClC,IAAA,IAAIxB,WAAW,GAAG;AAAEyB,MAAAA,KAAK,EAAE1B,SAAS,CAACsB,OAAO,EAAEK;AAAW,KAAE,GAAGC,SAAS;GACxE;AAED,EAAA,MAAMC,SAAS,GAAGC,gBAAU,CAACC,kCAAgB,CAAC;EAE9C,oBACEC,cAAA,CAACC,cAAM,EAAA;AAACpC,IAAAA,IAAI,EAAEA,IAAK;IAACqC,WAAW,EAAA,IAAA;IAACC,kBAAkB,EAAA,IAAA;IAACC,iBAAiB,EAAA,IAAA;AAACtC,IAAAA,OAAO,EAAEA,OAAQ;AAAAF,IAAAA,QAAA,eACpFoC,cAAA,CAAA,KAAA,EAAA;AACEK,MAAAA,EAAE,EAAER,SAAU;AAAA,MAAA,GACV1B,IAAI;AACRmC,MAAAA,GAAG,EAAE7B,gBAAiB;AACtB8B,MAAAA,IAAI,EAAC,QAAQ;AACbC,MAAAA,KAAK,EAAE;AAAE,QAAA,GAAGtB,MAAM,CAACuB;OAAS;MAAA,GACxBtB,UAAU,CAACsB,MAAM;AACrBC,MAAAA,SAAS,EAAEC,SAAI,CAAC,UAAU,EAAE;AAAE,QAAA,gBAAgB,EAAE9C;AAAI,OAAE,EAAEM,IAAI,CAACuC,SAAS,CAAE;AAAA9C,MAAAA,QAAA,eAExEgD,eAAA,CAAA,KAAA,EAAA;AAAKN,QAAAA,GAAG,EAAElC,SAAU;AAACoC,QAAAA,KAAK,EAAEf,YAAa;AAACiB,QAAAA,SAAS,EAAEC,SAAI,CAAC,mBAAmB,CAAE;AAAA/C,QAAAA,QAAA,EAAA,CAC5EA,QAAQ,EAERH,KAAK,iBACJuC,cAAA,CAAA,KAAA,EAAA;AAAKM,UAAAA,GAAG,EAAEhC,eAAgB;AAACoC,UAAAA,SAAS,EAAEC,SAAI,CAAC,iBAAiB,CAAE;UAACH,KAAK,EAAEtB,MAAM,CAACzB;AAAM,SAAA,CACpF;OACE;KACF;AACP,GAAQ,CAAC;AAEb,CAAC;;;;"}

package/build/common/panel/Panel.mjs

@@ -1,6 +1,6 @@
-import { offset, flip, shift, arrow, useFloating, autoUpdate } from '@floating-ui/react';
 import { clsx } from 'clsx';
-import { forwardRef, useRef, useContext } from 'react';
+import { forwardRef, useState, useEffect, useContext } from 'react';
+import { usePopper } from 'react-popper';
 import '../theme.mjs';
 import '../direction.mjs';
 import '../propsValues/control.mjs';
@@ -20,7 +20,6 @@ import '../propsValues/variant.mjs';
 import '../propsValues/scroll.mjs';
 import '../propsValues/markdownNodeType.mjs';
 import '../fileType.mjs';
-import '@transferwise/formatting';
 import '@transferwise/icons';
 import 'react-intl';
 import '../closeButton/CloseButton.messages.mjs';
@@ -28,7 +27,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import Dimmer from '../../dimmer/Dimmer.mjs';
 import { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider.mjs';
 
-const POPOVER_OFFSET = 16;
+const POPOVER_OFFSET = [0, 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.
@@ -39,8 +38,8 @@ const fallbackPlacements = {
   [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM]
 };
 const Panel = /*#__PURE__*/forwardRef(function Panel({
-  arrow: arrow$1 = false,
-  flip: flip$1 = true,
+  arrow = false,
+  flip = true,
   altAxis = false,
   children,
   open = false,
@@ -51,46 +50,60 @@ const Panel = /*#__PURE__*/forwardRef(function Panel({
   considerHeight = false,
   ...rest
 }, reference) {
-  const arrowRef = useRef(null);
-  const middleware = [];
-  if (arrow$1) {
-    middleware.push(offset(POPOVER_OFFSET));
-  }
-  if (flip$1 && fallbackPlacements[position]) {
-    middleware.push(flip({
-      fallbackPlacements: fallbackPlacements[position]
-    }));
-  }
+  const [arrowElement, setArrowElement] = useState(null);
+  const [popperElement, setPopperElement] = useState(null);
+  const modifiers = [];
   if (altAxis) {
-    middleware.push(shift());
+    modifiers.push({
+      // https://popper.js.org/docs/v2/modifiers/prevent-overflow
+      name: 'preventOverflow',
+      options: {
+        altAxis: true,
+        tether: false
+      }
+    });
   }
-  if (arrow$1) {
-    middleware.push(arrow({
-      element: arrowRef,
-      padding: 8
-    }));
+  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
+      }
+    });
+  }
+  if (flip && fallbackPlacements[position]) {
+    modifiers.push({
+      name: 'flip',
+      options: {
+        fallbackPlacements: fallbackPlacements[position]
+      }
+    });
   }
   const {
-    refs,
-    floatingStyles,
-    placement,
-    middlewareData
-  } = useFloating({
+    styles,
+    attributes,
+    forceUpdate
+  } = usePopper(anchorRef.current, popperElement, {
     placement: position,
-    middleware,
-    elements: {
-      reference: anchorRef.current
-    },
-    whileElementsMounted: open ? autoUpdate : undefined
+    modifiers
   });
-  const arrowStyle = {
-    ...(middlewareData.arrow?.x != null ? {
-      left: middlewareData.arrow.x
-    } : {}),
-    ...(middlewareData.arrow?.y != null ? {
-      top: middlewareData.arrow.y
-    } : {})
-  };
+  // 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 contentStyle = {
     ...(anchorWidth ? {
       width: anchorRef.current?.clientWidth
@@ -106,10 +119,12 @@ const Panel = /*#__PURE__*/forwardRef(function Panel({
     children: /*#__PURE__*/jsx("div", {
       id: overlayId,
       ...rest,
-      ref: refs.setFloating,
+      ref: setPopperElement,
       role: "dialog",
-      style: floatingStyles,
-      "data-popper-placement": placement,
+      style: {
+        ...styles.popper
+      },
+      ...attributes.popper,
       className: clsx('np-panel', {
         'np-panel--open': open
       }, rest.className),
@@ -117,10 +132,10 @@ const Panel = /*#__PURE__*/forwardRef(function Panel({
         ref: reference,
         style: contentStyle,
         className: clsx('np-panel__content'),
-        children: [children, arrow$1 && /*#__PURE__*/jsx("div", {
-          ref: arrowRef,
+        children: [children, arrow && /*#__PURE__*/jsx("div", {
+          ref: setArrowElement,
           className: clsx('np-panel__arrow'),
-          style: arrowStyle
+          style: styles.arrow
         })]
       })
     })

package/build/common/panel/Panel.mjs.map

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

package/build/common/responsivePanel/ResponsivePanel.js

@@ -23,7 +23,6 @@ require('../propsValues/variant.js');
 require('../propsValues/scroll.js');
 require('../propsValues/markdownNodeType.js');
 require('../fileType.js');
-require('@transferwise/formatting');
 require('@transferwise/icons');
 require('clsx');
 require('react-intl');

package/build/common/responsivePanel/ResponsivePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsivePanel.js","sources":["../../../src/common/responsivePanel/ResponsivePanel.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { Position } from '..';\nimport BottomSheet from '../bottomSheet';\nimport { useLayout } from '../hooks';\nimport Panel, { type PanelProps } from '../panel';\nimport { isServerSide } from '../domHelpers';\n\nconst ResponsivePanel = forwardRef<HTMLDivElement, PanelProps>(function ResponsivePanel(\n  {\n    anchorRef,\n    arrow = false,\n    flip = true,\n    children,\n    className = undefined,\n    onClose,\n    open = false,\n    position = Position.BOTTOM,\n    anchorWidth = false,\n    'aria-label': ariaLabel,\n    considerHeight = false,\n    'aria-labelledby': ariaLabelledBy,\n  }: PanelProps,\n  reference,\n) {\n  const { isMobile } = useLayout();\n  const SHORT_SCREEN = 500;\n  const isShortViewport = considerHeight && !isServerSide() && window.innerHeight < SHORT_SCREEN;\n\n  if (isMobile || isShortViewport) {\n    return (\n      <BottomSheet\n        key=\"bottomSheet\"\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        open={open}\n        className={className}\n        onClose={onClose}\n      >\n        {children}\n      </BottomSheet>\n    );\n  }\n  return (\n    <Panel\n      key=\"panel\"\n      ref={reference}\n      flip={flip}\n      arrow={arrow}\n      open={open}\n      position={position}\n      anchorWidth={anchorWidth}\n      anchorRef={anchorRef}\n      aria-label={ariaLabel}\n      considerHeight={considerHeight}\n      aria-labelledby={ariaLabelledBy}\n      className={className}\n      onClose={onClose}\n    >\n      {children}\n    </Panel>\n  );\n});\n\nexport default ResponsivePanel;\n"],"names":["ResponsivePanel","forwardRef","anchorRef","arrow","flip","children","className","undefined","onClose","open","position","Position","BOTTOM","anchorWidth","ariaLabel","considerHeight","ariaLabelledBy","reference","isMobile","useLayout","SHORT_SCREEN","isShortViewport","isServerSide","window","innerHeight","_jsx","BottomSheet","Panel","ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAMA,eAAe,gBAAGC,gBAAU,CAA6B,SAASD,eAAeA,CACrF;EACEE,SAAS;AACTC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,IAAI,GAAG,IAAI;EACXC,QAAQ;AACRC,EAAAA,SAAS,GAAGC,SAAS;EACrBC,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;YACZC,UAAQ,GAAGC,iBAAQ,CAACC,MAAM;AAC1BC,EAAAA,WAAW,GAAG,KAAK;AACnB,EAAA,YAAY,EAAEC,SAAS;AACvBC,EAAAA,cAAc,GAAG,KAAK;AACtB,EAAA,iBAAiB,EAAEC;AAAc,CACtB,EACbC,SAAS,EAAA;EAET,MAAM;AAAEC,IAAAA;GAAU,GAAGC,mBAAS,EAAE;EAChC,MAAMC,YAAY,GAAG,GAAG;AACxB,EAAA,MAAMC,eAAe,GAAGN,cAAc,IAAI,CAACO,6BAAY,EAAE,IAAIC,MAAM,CAACC,WAAW,GAAGJ,YAAY;EAE9F,IAAIF,QAAQ,IAAIG,eAAe,EAAE;IAC/B,oBACEI,cAAA,CAACC,mBAAW,EAAA;AAEV,MAAA,YAAA,EAAYZ,SAAU;AACtB,MAAA,iBAAA,EAAiBE,cAAe;AAChCP,MAAAA,IAAI,EAAEA,IAAK;AACXH,MAAAA,SAAS,EAAEA,SAAU;AACrBE,MAAAA,OAAO,EAAEA,OAAQ;AAAAH,MAAAA,QAAA,EAEhBA;AAAQ,KAAA,EAPL,aAQO,CAAC;AAElB,EAAA;EACA,oBACEoB,cAAA,CAACE,aAAK,EAAA;AAEJC,IAAAA,GAAG,EAAEX,SAAU;AACfb,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,KAAK,EAAEA,KAAM;AACbM,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,UAAS;AACnBG,IAAAA,WAAW,EAAEA,WAAY;AACzBX,IAAAA,SAAS,EAAEA,SAAU;AACrB,IAAA,YAAA,EAAYY,SAAU;AACtBC,IAAAA,cAAc,EAAEA,cAAe;AAC/B,IAAA,iBAAA,EAAiBC,cAAe;AAChCV,IAAAA,SAAS,EAAEA,SAAU;AACrBE,IAAAA,OAAO,EAAEA,OAAQ;AAAAH,IAAAA,QAAA,EAEhBA;AAAQ,GAAA,EAdL,OAeC,CAAC;AAEZ,CAAC;;;;"}
+{"version":3,"file":"ResponsivePanel.js","sources":["../../../src/common/responsivePanel/ResponsivePanel.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { Position } from '..';\nimport BottomSheet from '../bottomSheet';\nimport { useLayout } from '../hooks';\nimport Panel, { type PanelProps } from '../panel';\nimport { isServerSide } from '../domHelpers';\n\nconst ResponsivePanel = forwardRef<HTMLDivElement, PanelProps>(function ResponsivePanel(\n  {\n    anchorRef,\n    arrow = false,\n    flip = true,\n    children,\n    className = undefined,\n    onClose,\n    open = false,\n    position = Position.BOTTOM,\n    anchorWidth = false,\n    'aria-label': ariaLabel,\n    considerHeight = false,\n    'aria-labelledby': ariaLabelledBy,\n  }: PanelProps,\n  reference,\n) {\n  const { isMobile } = useLayout();\n  const SHORT_SCREEN = 500;\n  const isShortViewport = considerHeight && !isServerSide() && window.innerHeight < SHORT_SCREEN;\n\n  if (isMobile || isShortViewport) {\n    return (\n      <BottomSheet\n        key=\"bottomSheet\"\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        open={open}\n        className={className}\n        onClose={onClose}\n      >\n        {children}\n      </BottomSheet>\n    );\n  }\n  return (\n    <Panel\n      key=\"panel\"\n      ref={reference}\n      flip={flip}\n      arrow={arrow}\n      open={open}\n      position={position}\n      anchorWidth={anchorWidth}\n      anchorRef={anchorRef}\n      aria-label={ariaLabel}\n      considerHeight={considerHeight}\n      aria-labelledby={ariaLabelledBy}\n      className={className}\n      onClose={onClose}\n    >\n      {children}\n    </Panel>\n  );\n});\n\nexport default ResponsivePanel;\n"],"names":["ResponsivePanel","forwardRef","anchorRef","arrow","flip","children","className","undefined","onClose","open","position","Position","BOTTOM","anchorWidth","ariaLabel","considerHeight","ariaLabelledBy","reference","isMobile","useLayout","SHORT_SCREEN","isShortViewport","isServerSide","window","innerHeight","_jsx","BottomSheet","Panel","ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAMA,eAAe,gBAAGC,gBAAU,CAA6B,SAASD,eAAeA,CACrF;EACEE,SAAS;AACTC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,IAAI,GAAG,IAAI;EACXC,QAAQ;AACRC,EAAAA,SAAS,GAAGC,SAAS;EACrBC,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;YACZC,UAAQ,GAAGC,iBAAQ,CAACC,MAAM;AAC1BC,EAAAA,WAAW,GAAG,KAAK;AACnB,EAAA,YAAY,EAAEC,SAAS;AACvBC,EAAAA,cAAc,GAAG,KAAK;AACtB,EAAA,iBAAiB,EAAEC;AAAc,CACtB,EACbC,SAAS,EAAA;EAET,MAAM;AAAEC,IAAAA;GAAU,GAAGC,mBAAS,EAAE;EAChC,MAAMC,YAAY,GAAG,GAAG;AACxB,EAAA,MAAMC,eAAe,GAAGN,cAAc,IAAI,CAACO,6BAAY,EAAE,IAAIC,MAAM,CAACC,WAAW,GAAGJ,YAAY;EAE9F,IAAIF,QAAQ,IAAIG,eAAe,EAAE;IAC/B,oBACEI,cAAA,CAACC,mBAAW,EAAA;AAEV,MAAA,YAAA,EAAYZ,SAAU;AACtB,MAAA,iBAAA,EAAiBE,cAAe;AAChCP,MAAAA,IAAI,EAAEA,IAAK;AACXH,MAAAA,SAAS,EAAEA,SAAU;AACrBE,MAAAA,OAAO,EAAEA,OAAQ;AAAAH,MAAAA,QAAA,EAEhBA;AAAQ,KAAA,EAPL,aAQO,CAAC;AAElB,EAAA;EACA,oBACEoB,cAAA,CAACE,aAAK,EAAA;AAEJC,IAAAA,GAAG,EAAEX,SAAU;AACfb,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,KAAK,EAAEA,KAAM;AACbM,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,UAAS;AACnBG,IAAAA,WAAW,EAAEA,WAAY;AACzBX,IAAAA,SAAS,EAAEA,SAAU;AACrB,IAAA,YAAA,EAAYY,SAAU;AACtBC,IAAAA,cAAc,EAAEA,cAAe;AAC/B,IAAA,iBAAA,EAAiBC,cAAe;AAChCV,IAAAA,SAAS,EAAEA,SAAU;AACrBE,IAAAA,OAAO,EAAEA,OAAQ;AAAAH,IAAAA,QAAA,EAEhBA;AAAQ,GAAA,EAdL,OAeC,CAAC;AAEZ,CAAC;;;;"}

package/build/common/responsivePanel/ResponsivePanel.mjs

@@ -19,7 +19,6 @@ import '../propsValues/variant.mjs';
 import '../propsValues/scroll.mjs';
 import '../propsValues/markdownNodeType.mjs';
 import '../fileType.mjs';
-import '@transferwise/formatting';
 import '@transferwise/icons';
 import 'clsx';
 import 'react-intl';

package/build/common/responsivePanel/ResponsivePanel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsivePanel.mjs","sources":["../../../src/common/responsivePanel/ResponsivePanel.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { Position } from '..';\nimport BottomSheet from '../bottomSheet';\nimport { useLayout } from '../hooks';\nimport Panel, { type PanelProps } from '../panel';\nimport { isServerSide } from '../domHelpers';\n\nconst ResponsivePanel = forwardRef<HTMLDivElement, PanelProps>(function ResponsivePanel(\n  {\n    anchorRef,\n    arrow = false,\n    flip = true,\n    children,\n    className = undefined,\n    onClose,\n    open = false,\n    position = Position.BOTTOM,\n    anchorWidth = false,\n    'aria-label': ariaLabel,\n    considerHeight = false,\n    'aria-labelledby': ariaLabelledBy,\n  }: PanelProps,\n  reference,\n) {\n  const { isMobile } = useLayout();\n  const SHORT_SCREEN = 500;\n  const isShortViewport = considerHeight && !isServerSide() && window.innerHeight < SHORT_SCREEN;\n\n  if (isMobile || isShortViewport) {\n    return (\n      <BottomSheet\n        key=\"bottomSheet\"\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        open={open}\n        className={className}\n        onClose={onClose}\n      >\n        {children}\n      </BottomSheet>\n    );\n  }\n  return (\n    <Panel\n      key=\"panel\"\n      ref={reference}\n      flip={flip}\n      arrow={arrow}\n      open={open}\n      position={position}\n      anchorWidth={anchorWidth}\n      anchorRef={anchorRef}\n      aria-label={ariaLabel}\n      considerHeight={considerHeight}\n      aria-labelledby={ariaLabelledBy}\n      className={className}\n      onClose={onClose}\n    >\n      {children}\n    </Panel>\n  );\n});\n\nexport default ResponsivePanel;\n"],"names":["ResponsivePanel","forwardRef","anchorRef","arrow","flip","children","className","undefined","onClose","open","position","Position","BOTTOM","anchorWidth","ariaLabel","considerHeight","ariaLabelledBy","reference","isMobile","useLayout","SHORT_SCREEN","isShortViewport","isServerSide","window","innerHeight","_jsx","BottomSheet","Panel","ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAMA,eAAe,gBAAGC,UAAU,CAA6B,SAASD,eAAeA,CACrF;EACEE,SAAS;AACTC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,IAAI,GAAG,IAAI;EACXC,QAAQ;AACRC,EAAAA,SAAS,GAAGC,SAAS;EACrBC,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;EACZC,QAAQ,GAAGC,QAAQ,CAACC,MAAM;AAC1BC,EAAAA,WAAW,GAAG,KAAK;AACnB,EAAA,YAAY,EAAEC,SAAS;AACvBC,EAAAA,cAAc,GAAG,KAAK;AACtB,EAAA,iBAAiB,EAAEC;AAAc,CACtB,EACbC,SAAS,EAAA;EAET,MAAM;AAAEC,IAAAA;GAAU,GAAGC,SAAS,EAAE;EAChC,MAAMC,YAAY,GAAG,GAAG;AACxB,EAAA,MAAMC,eAAe,GAAGN,cAAc,IAAI,CAACO,YAAY,EAAE,IAAIC,MAAM,CAACC,WAAW,GAAGJ,YAAY;EAE9F,IAAIF,QAAQ,IAAIG,eAAe,EAAE;IAC/B,oBACEI,GAAA,CAACC,WAAW,EAAA;AAEV,MAAA,YAAA,EAAYZ,SAAU;AACtB,MAAA,iBAAA,EAAiBE,cAAe;AAChCP,MAAAA,IAAI,EAAEA,IAAK;AACXH,MAAAA,SAAS,EAAEA,SAAU;AACrBE,MAAAA,OAAO,EAAEA,OAAQ;AAAAH,MAAAA,QAAA,EAEhBA;AAAQ,KAAA,EAPL,aAQO,CAAC;AAElB,EAAA;EACA,oBACEoB,GAAA,CAACE,KAAK,EAAA;AAEJC,IAAAA,GAAG,EAAEX,SAAU;AACfb,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,KAAK,EAAEA,KAAM;AACbM,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,QAAS;AACnBG,IAAAA,WAAW,EAAEA,WAAY;AACzBX,IAAAA,SAAS,EAAEA,SAAU;AACrB,IAAA,YAAA,EAAYY,SAAU;AACtBC,IAAAA,cAAc,EAAEA,cAAe;AAC/B,IAAA,iBAAA,EAAiBC,cAAe;AAChCV,IAAAA,SAAS,EAAEA,SAAU;AACrBE,IAAAA,OAAO,EAAEA,OAAQ;AAAAH,IAAAA,QAAA,EAEhBA;AAAQ,GAAA,EAdL,OAeC,CAAC;AAEZ,CAAC;;;;"}
+{"version":3,"file":"ResponsivePanel.mjs","sources":["../../../src/common/responsivePanel/ResponsivePanel.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { Position } from '..';\nimport BottomSheet from '../bottomSheet';\nimport { useLayout } from '../hooks';\nimport Panel, { type PanelProps } from '../panel';\nimport { isServerSide } from '../domHelpers';\n\nconst ResponsivePanel = forwardRef<HTMLDivElement, PanelProps>(function ResponsivePanel(\n  {\n    anchorRef,\n    arrow = false,\n    flip = true,\n    children,\n    className = undefined,\n    onClose,\n    open = false,\n    position = Position.BOTTOM,\n    anchorWidth = false,\n    'aria-label': ariaLabel,\n    considerHeight = false,\n    'aria-labelledby': ariaLabelledBy,\n  }: PanelProps,\n  reference,\n) {\n  const { isMobile } = useLayout();\n  const SHORT_SCREEN = 500;\n  const isShortViewport = considerHeight && !isServerSide() && window.innerHeight < SHORT_SCREEN;\n\n  if (isMobile || isShortViewport) {\n    return (\n      <BottomSheet\n        key=\"bottomSheet\"\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        open={open}\n        className={className}\n        onClose={onClose}\n      >\n        {children}\n      </BottomSheet>\n    );\n  }\n  return (\n    <Panel\n      key=\"panel\"\n      ref={reference}\n      flip={flip}\n      arrow={arrow}\n      open={open}\n      position={position}\n      anchorWidth={anchorWidth}\n      anchorRef={anchorRef}\n      aria-label={ariaLabel}\n      considerHeight={considerHeight}\n      aria-labelledby={ariaLabelledBy}\n      className={className}\n      onClose={onClose}\n    >\n      {children}\n    </Panel>\n  );\n});\n\nexport default ResponsivePanel;\n"],"names":["ResponsivePanel","forwardRef","anchorRef","arrow","flip","children","className","undefined","onClose","open","position","Position","BOTTOM","anchorWidth","ariaLabel","considerHeight","ariaLabelledBy","reference","isMobile","useLayout","SHORT_SCREEN","isShortViewport","isServerSide","window","innerHeight","_jsx","BottomSheet","Panel","ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAMA,eAAe,gBAAGC,UAAU,CAA6B,SAASD,eAAeA,CACrF;EACEE,SAAS;AACTC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,IAAI,GAAG,IAAI;EACXC,QAAQ;AACRC,EAAAA,SAAS,GAAGC,SAAS;EACrBC,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;EACZC,QAAQ,GAAGC,QAAQ,CAACC,MAAM;AAC1BC,EAAAA,WAAW,GAAG,KAAK;AACnB,EAAA,YAAY,EAAEC,SAAS;AACvBC,EAAAA,cAAc,GAAG,KAAK;AACtB,EAAA,iBAAiB,EAAEC;AAAc,CACtB,EACbC,SAAS,EAAA;EAET,MAAM;AAAEC,IAAAA;GAAU,GAAGC,SAAS,EAAE;EAChC,MAAMC,YAAY,GAAG,GAAG;AACxB,EAAA,MAAMC,eAAe,GAAGN,cAAc,IAAI,CAACO,YAAY,EAAE,IAAIC,MAAM,CAACC,WAAW,GAAGJ,YAAY;EAE9F,IAAIF,QAAQ,IAAIG,eAAe,EAAE;IAC/B,oBACEI,GAAA,CAACC,WAAW,EAAA;AAEV,MAAA,YAAA,EAAYZ,SAAU;AACtB,MAAA,iBAAA,EAAiBE,cAAe;AAChCP,MAAAA,IAAI,EAAEA,IAAK;AACXH,MAAAA,SAAS,EAAEA,SAAU;AACrBE,MAAAA,OAAO,EAAEA,OAAQ;AAAAH,MAAAA,QAAA,EAEhBA;AAAQ,KAAA,EAPL,aAQO,CAAC;AAElB,EAAA;EACA,oBACEoB,GAAA,CAACE,KAAK,EAAA;AAEJC,IAAAA,GAAG,EAAEX,SAAU;AACfb,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,KAAK,EAAEA,KAAM;AACbM,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,QAAS;AACnBG,IAAAA,WAAW,EAAEA,WAAY;AACzBX,IAAAA,SAAS,EAAEA,SAAU;AACrB,IAAA,YAAA,EAAYY,SAAU;AACtBC,IAAAA,cAAc,EAAEA,cAAe;AAC/B,IAAA,iBAAA,EAAiBC,cAAe;AAChCV,IAAAA,SAAS,EAAEA,SAAU;AACrBE,IAAAA,OAAO,EAAEA,OAAQ;AAAAH,IAAAA,QAAA,EAEhBA;AAAQ,GAAA,EAdL,OAeC,CAAC;AAEZ,CAAC;;;;"}

package/build/criticalBanner/CriticalCommsBanner.js

@@ -24,7 +24,6 @@ require('../common/propsValues/variant.js');
 require('../common/propsValues/scroll.js');
 require('../common/propsValues/markdownNodeType.js');
 require('../common/fileType.js');
-require('@transferwise/formatting');
 require('react');
 require('react-intl');
 require('../common/closeButton/CloseButton.messages.js');

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\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;;;;"}
+{"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

@@ -20,7 +20,6 @@ import '../common/propsValues/variant.mjs';
 import '../common/propsValues/scroll.mjs';
 import '../common/propsValues/markdownNodeType.mjs';
 import '../common/fileType.mjs';
-import '@transferwise/formatting';
 import 'react';
 import 'react-intl';
 import '../common/closeButton/CloseButton.messages.mjs';

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\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;;;;"}
+{"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

@@ -36,9 +36,9 @@ require('../common/propsValues/variant.js');
 require('../common/propsValues/scroll.js');
 require('../common/propsValues/markdownNodeType.js');
 require('../common/fileType.js');
-require('@transferwise/formatting');
 require('../common/closeButton/CloseButton.messages.js');
 require('../inputs/SelectInput/SelectInput.messages.js');
+require('@transferwise/formatting');
 var getMonthNames = require('../common/dateUtils/getMonthNames/getMonthNames.js');
 var isDateValid = require('../common/dateUtils/isDateValid/isDateValid.js');
 var isMonthAndYearFormat = require('../common/dateUtils/isMonthAndYearFormat/isMonthAndYearFormat.js');

package/build/dateInput/DateInput.mjs

@@ -32,9 +32,9 @@ import '../common/propsValues/variant.mjs';
 import '../common/propsValues/scroll.mjs';
 import '../common/propsValues/markdownNodeType.mjs';
 import '../common/fileType.mjs';
-import '@transferwise/formatting';
 import '../common/closeButton/CloseButton.messages.mjs';
 import '../inputs/SelectInput/SelectInput.messages.mjs';
+import '@transferwise/formatting';
 import { getMonthNames } from '../common/dateUtils/getMonthNames/getMonthNames.mjs';
 import { isDateValid } from '../common/dateUtils/isDateValid/isDateValid.mjs';
 import { isMonthAndYearFormat } from '../common/dateUtils/isMonthAndYearFormat/isMonthAndYearFormat.mjs';

package/build/dateLookup/DateLookup.js

@@ -23,11 +23,11 @@ require('../common/propsValues/variant.js');
 require('../common/propsValues/scroll.js');
 require('../common/propsValues/markdownNodeType.js');
 require('../common/fileType.js');
-require('@transferwise/formatting');
 require('@transferwise/icons');
 require('react-intl');
 require('../common/closeButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
+require('@transferwise/formatting');
 var moveToWithinRange = require('../common/dateUtils/moveToWithinRange/moveToWithinRange.js');
 var isWithinRange = require('../common/dateUtils/isWithinRange/isWithinRange.js');
 var getDateView = require('../common/dateUtils/getDateView/getDateView.js');

package/build/dateLookup/DateLookup.mjs

@@ -19,11 +19,11 @@ import '../common/propsValues/variant.mjs';
 import '../common/propsValues/scroll.mjs';
 import '../common/propsValues/markdownNodeType.mjs';
 import '../common/fileType.mjs';
-import '@transferwise/formatting';
 import '@transferwise/icons';
 import 'react-intl';
 import '../common/closeButton/CloseButton.messages.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import '@transferwise/formatting';
 import { moveToWithinRange } from '../common/dateUtils/moveToWithinRange/moveToWithinRange.mjs';
 import { isWithinRange } from '../common/dateUtils/isWithinRange/isWithinRange.mjs';
 import { returnDateView } from '../common/dateUtils/getDateView/getDateView.mjs';

package/build/dateLookup/dateHeader/DateHeader.js

@@ -23,7 +23,6 @@ require('../../common/propsValues/variant.js');
 require('../../common/propsValues/scroll.js');
 require('../../common/propsValues/markdownNodeType.js');
 require('../../common/fileType.js');
-require('@transferwise/formatting');
 var icons = require('@transferwise/icons');
 require('react');
 require('../../common/closeButton/CloseButton.messages.js');