@transferwise/components 46.160.0 → 46.160.1

package/build/ExpressiveMoneyInput/Chevron/Chevron.js

@@ -3,16 +3,24 @@
 var icons = require('@transferwise/icons');
 var clsx = require('clsx');
 var react = require('motion/react');
+require('@transferwise/neptune-validation');
+require('react');
+var useDirection = require('../../common/hooks/useDirection/useDirection.js');
+require('@transferwise/neptune-tokens');
 var jsxRuntime = require('react/jsx-runtime');
 
 const Chevron = ({
   shouldShow = true
 }) => {
+  const {
+    isRTL
+  } = useDirection.useDirection();
+  const Icon = isRTL ? icons.ChevronRight : icons.ChevronLeft;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: clsx.clsx('d-flex align-items-center', 'wds-chevron-container', !shouldShow && 'wds-chevron-hidden'),
     children: /*#__PURE__*/jsxRuntime.jsx(react.motion.div, {
       animate: {
-        x: [12, 0, 0, -12],
+        x: isRTL ? [-12, 0, 0, 12] : [12, 0, 0, -12],
         opacity: [0, 1, 1, 0]
       },
       transition: {
@@ -22,7 +30,7 @@ const Chevron = ({
         repeat: Infinity,
         repeatType: 'loop'
       },
-      children: /*#__PURE__*/jsxRuntime.jsx(icons.ChevronLeft, {})
+      children: /*#__PURE__*/jsxRuntime.jsx(Icon, {})
     })
   });
 };

package/build/ExpressiveMoneyInput/Chevron/Chevron.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chevron.js","sources":["../../../src/ExpressiveMoneyInput/Chevron/Chevron.tsx"],"sourcesContent":["import { ChevronLeft } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { motion } from 'motion/react';\n\ninterface Props {\n  shouldShow: boolean;\n}\n\nexport const Chevron = ({ shouldShow = true }: Props) => {\n  return (\n    <div\n      className={clsx(\n        'd-flex align-items-center',\n        'wds-chevron-container',\n        !shouldShow && 'wds-chevron-hidden',\n      )}\n    >\n      <motion.div\n        animate={{\n          x: [12, 0, 0, -12],\n          opacity: [0, 1, 1, 0],\n        }}\n        transition={{\n          duration: 3,\n          ease: [[0.3, 0, 0.1, 1], 'linear', [0.3, 0, 0.1, 1]],\n          times: [0, 0.1, 0.9, 1],\n          repeat: Infinity,\n          repeatType: 'loop',\n        }}\n      >\n        <ChevronLeft />\n      </motion.div>\n    </div>\n  );\n};\n"],"names":["Chevron","shouldShow","_jsx","className","clsx","children","motion","div","animate","x","opacity","transition","duration","ease","times","repeat","Infinity","repeatType","ChevronLeft"],"mappings":";;;;;;;AAQO,MAAMA,OAAO,GAAGA,CAAC;AAAEC,EAAAA,UAAU,GAAG;AAAI,CAAS,KAAI;AACtD,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;IACEC,SAAS,EAAEC,SAAI,CACb,2BAA2B,EAC3B,uBAAuB,EACvB,CAACH,UAAU,IAAI,oBAAoB,CACnC;AAAAI,IAAAA,QAAA,eAEFH,cAAA,CAACI,YAAM,CAACC,GAAG,EAAA;AACTC,MAAAA,OAAO,EAAE;QACPC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC;QAClBC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;OACpB;AACFC,MAAAA,UAAU,EAAE;AACVC,QAAAA,QAAQ,EAAE,CAAC;QACXC,IAAI,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;QACpDC,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;AACvBC,QAAAA,MAAM,EAAEC,QAAQ;AAChBC,QAAAA,UAAU,EAAE;OACZ;AAAAZ,MAAAA,QAAA,eAEFH,cAAA,CAACgB,iBAAW,EAAA,EAAA;KACF;AACd,GAAK,CAAC;AAEV;;;;"}
+{"version":3,"file":"Chevron.js","sources":["../../../src/ExpressiveMoneyInput/Chevron/Chevron.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { motion } from 'motion/react';\n\nimport { useDirection } from '../../common/hooks';\n\ninterface Props {\n  shouldShow: boolean;\n}\n\nexport const Chevron = ({ shouldShow = true }: Props) => {\n  const { isRTL } = useDirection();\n  const Icon = isRTL ? ChevronRight : ChevronLeft;\n\n  return (\n    <div\n      className={clsx(\n        'd-flex align-items-center',\n        'wds-chevron-container',\n        !shouldShow && 'wds-chevron-hidden',\n      )}\n    >\n      <motion.div\n        animate={{\n          x: isRTL ? [-12, 0, 0, 12] : [12, 0, 0, -12],\n          opacity: [0, 1, 1, 0],\n        }}\n        transition={{\n          duration: 3,\n          ease: [[0.3, 0, 0.1, 1], 'linear', [0.3, 0, 0.1, 1]],\n          times: [0, 0.1, 0.9, 1],\n          repeat: Infinity,\n          repeatType: 'loop',\n        }}\n      >\n        <Icon />\n      </motion.div>\n    </div>\n  );\n};\n"],"names":["Chevron","shouldShow","isRTL","useDirection","Icon","ChevronRight","ChevronLeft","_jsx","className","clsx","children","motion","div","animate","x","opacity","transition","duration","ease","times","repeat","Infinity","repeatType"],"mappings":";;;;;;;;;;;AAUO,MAAMA,OAAO,GAAGA,CAAC;AAAEC,EAAAA,UAAU,GAAG;AAAI,CAAS,KAAI;EACtD,MAAM;AAAEC,IAAAA;GAAO,GAAGC,yBAAY,EAAE;AAChC,EAAA,MAAMC,IAAI,GAAGF,KAAK,GAAGG,kBAAY,GAAGC,iBAAW;AAE/C,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;IACEC,SAAS,EAAEC,SAAI,CACb,2BAA2B,EAC3B,uBAAuB,EACvB,CAACR,UAAU,IAAI,oBAAoB,CACnC;AAAAS,IAAAA,QAAA,eAEFH,cAAA,CAACI,YAAM,CAACC,GAAG,EAAA;AACTC,MAAAA,OAAO,EAAE;QACPC,CAAC,EAAEZ,KAAK,GAAG,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC;QAC5Ca,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;OACpB;AACFC,MAAAA,UAAU,EAAE;AACVC,QAAAA,QAAQ,EAAE,CAAC;QACXC,IAAI,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;QACpDC,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;AACvBC,QAAAA,MAAM,EAAEC,QAAQ;AAChBC,QAAAA,UAAU,EAAE;OACZ;AAAAZ,MAAAA,QAAA,eAEFH,cAAA,CAACH,IAAI,EAAA,EAAA;KACK;AACd,GAAK,CAAC;AAEV;;;;"}

package/build/ExpressiveMoneyInput/Chevron/Chevron.mjs

@@ -1,16 +1,24 @@
-import { ChevronLeft } from '@transferwise/icons';
+import { ChevronRight, ChevronLeft } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import { motion } from 'motion/react';
+import '@transferwise/neptune-validation';
+import 'react';
+import { useDirection } from '../../common/hooks/useDirection/useDirection.mjs';
+import '@transferwise/neptune-tokens';
 import { jsx } from 'react/jsx-runtime';
 
 const Chevron = ({
   shouldShow = true
 }) => {
+  const {
+    isRTL
+  } = useDirection();
+  const Icon = isRTL ? ChevronRight : ChevronLeft;
   return /*#__PURE__*/jsx("div", {
     className: clsx('d-flex align-items-center', 'wds-chevron-container', !shouldShow && 'wds-chevron-hidden'),
     children: /*#__PURE__*/jsx(motion.div, {
       animate: {
-        x: [12, 0, 0, -12],
+        x: isRTL ? [-12, 0, 0, 12] : [12, 0, 0, -12],
         opacity: [0, 1, 1, 0]
       },
       transition: {
@@ -20,7 +28,7 @@ const Chevron = ({
         repeat: Infinity,
         repeatType: 'loop'
       },
-      children: /*#__PURE__*/jsx(ChevronLeft, {})
+      children: /*#__PURE__*/jsx(Icon, {})
     })
   });
 };

package/build/ExpressiveMoneyInput/Chevron/Chevron.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Chevron.mjs","sources":["../../../src/ExpressiveMoneyInput/Chevron/Chevron.tsx"],"sourcesContent":["import { ChevronLeft } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { motion } from 'motion/react';\n\ninterface Props {\n  shouldShow: boolean;\n}\n\nexport const Chevron = ({ shouldShow = true }: Props) => {\n  return (\n    <div\n      className={clsx(\n        'd-flex align-items-center',\n        'wds-chevron-container',\n        !shouldShow && 'wds-chevron-hidden',\n      )}\n    >\n      <motion.div\n        animate={{\n          x: [12, 0, 0, -12],\n          opacity: [0, 1, 1, 0],\n        }}\n        transition={{\n          duration: 3,\n          ease: [[0.3, 0, 0.1, 1], 'linear', [0.3, 0, 0.1, 1]],\n          times: [0, 0.1, 0.9, 1],\n          repeat: Infinity,\n          repeatType: 'loop',\n        }}\n      >\n        <ChevronLeft />\n      </motion.div>\n    </div>\n  );\n};\n"],"names":["Chevron","shouldShow","_jsx","className","clsx","children","motion","div","animate","x","opacity","transition","duration","ease","times","repeat","Infinity","repeatType","ChevronLeft"],"mappings":";;;;;AAQO,MAAMA,OAAO,GAAGA,CAAC;AAAEC,EAAAA,UAAU,GAAG;AAAI,CAAS,KAAI;AACtD,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;IACEC,SAAS,EAAEC,IAAI,CACb,2BAA2B,EAC3B,uBAAuB,EACvB,CAACH,UAAU,IAAI,oBAAoB,CACnC;AAAAI,IAAAA,QAAA,eAEFH,GAAA,CAACI,MAAM,CAACC,GAAG,EAAA;AACTC,MAAAA,OAAO,EAAE;QACPC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC;QAClBC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;OACpB;AACFC,MAAAA,UAAU,EAAE;AACVC,QAAAA,QAAQ,EAAE,CAAC;QACXC,IAAI,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;QACpDC,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;AACvBC,QAAAA,MAAM,EAAEC,QAAQ;AAChBC,QAAAA,UAAU,EAAE;OACZ;AAAAZ,MAAAA,QAAA,eAEFH,GAAA,CAACgB,WAAW,EAAA,EAAA;KACF;AACd,GAAK,CAAC;AAEV;;;;"}
+{"version":3,"file":"Chevron.mjs","sources":["../../../src/ExpressiveMoneyInput/Chevron/Chevron.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { motion } from 'motion/react';\n\nimport { useDirection } from '../../common/hooks';\n\ninterface Props {\n  shouldShow: boolean;\n}\n\nexport const Chevron = ({ shouldShow = true }: Props) => {\n  const { isRTL } = useDirection();\n  const Icon = isRTL ? ChevronRight : ChevronLeft;\n\n  return (\n    <div\n      className={clsx(\n        'd-flex align-items-center',\n        'wds-chevron-container',\n        !shouldShow && 'wds-chevron-hidden',\n      )}\n    >\n      <motion.div\n        animate={{\n          x: isRTL ? [-12, 0, 0, 12] : [12, 0, 0, -12],\n          opacity: [0, 1, 1, 0],\n        }}\n        transition={{\n          duration: 3,\n          ease: [[0.3, 0, 0.1, 1], 'linear', [0.3, 0, 0.1, 1]],\n          times: [0, 0.1, 0.9, 1],\n          repeat: Infinity,\n          repeatType: 'loop',\n        }}\n      >\n        <Icon />\n      </motion.div>\n    </div>\n  );\n};\n"],"names":["Chevron","shouldShow","isRTL","useDirection","Icon","ChevronRight","ChevronLeft","_jsx","className","clsx","children","motion","div","animate","x","opacity","transition","duration","ease","times","repeat","Infinity","repeatType"],"mappings":";;;;;;;;;AAUO,MAAMA,OAAO,GAAGA,CAAC;AAAEC,EAAAA,UAAU,GAAG;AAAI,CAAS,KAAI;EACtD,MAAM;AAAEC,IAAAA;GAAO,GAAGC,YAAY,EAAE;AAChC,EAAA,MAAMC,IAAI,GAAGF,KAAK,GAAGG,YAAY,GAAGC,WAAW;AAE/C,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;IACEC,SAAS,EAAEC,IAAI,CACb,2BAA2B,EAC3B,uBAAuB,EACvB,CAACR,UAAU,IAAI,oBAAoB,CACnC;AAAAS,IAAAA,QAAA,eAEFH,GAAA,CAACI,MAAM,CAACC,GAAG,EAAA;AACTC,MAAAA,OAAO,EAAE;QACPC,CAAC,EAAEZ,KAAK,GAAG,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC;QAC5Ca,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;OACpB;AACFC,MAAAA,UAAU,EAAE;AACVC,QAAAA,QAAQ,EAAE,CAAC;QACXC,IAAI,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;QACpDC,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;AACvBC,QAAAA,MAAM,EAAEC,QAAQ;AAChBC,QAAAA,UAAU,EAAE;OACZ;AAAAZ,MAAAA,QAAA,eAEFH,GAAA,CAACH,IAAI,EAAA,EAAA;KACK;AACd,GAAK,CAAC;AAEV;;;;"}

package/build/ProcessIndicator/ProcessIndicator.js

@@ -30,7 +30,7 @@ require('../common/CloseButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 const radius = {
-  xxs: 6,
+  xxs: 5,
   xs: 11,
   sm: 22,
   xl: 61

package/build/ProcessIndicator/ProcessIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProcessIndicator.js","sources":["../../src/ProcessIndicator/ProcessIndicator.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { Component } from 'react';\n\nimport { Status, Size } from '../common';\n\nconst radius = { xxs: 6, xs: 11, sm: 22, xl: 61 };\n\nconst ANIMATION_DURATION_IN_MS = 1500;\n\nexport type ProcessIndicatorStatus =\n  `${Status.PROCESSING | Status.FAILED | Status.SUCCEEDED | Status.HIDDEN}`;\n\nexport interface ProcessIndicatorProps {\n  /** @default 'processing' */\n  status?: ProcessIndicatorStatus;\n  /** @default 'sm' */\n  size?: 'xxs' | `${Size.EXTRA_SMALL | Size.SMALL | Size.EXTRA_LARGE}`;\n  className?: string;\n  'data-testid'?: string;\n  onAnimationCompleted?: (status: ProcessIndicatorStatus) => void;\n}\n\ntype ProcessIndicatorState = Required<Pick<ProcessIndicatorProps, 'status' | 'size'>>;\n\nexport default class ProcessIndicator extends Component<\n  ProcessIndicatorProps,\n  ProcessIndicatorState\n> {\n  declare props: ProcessIndicatorProps &\n    Required<Pick<ProcessIndicatorProps, keyof typeof ProcessIndicator.defaultProps>>;\n\n  static defaultProps = {\n    status: 'processing',\n    size: 'sm',\n  } satisfies Partial<ProcessIndicatorProps>;\n\n  interval = 0;\n  timeout = 0;\n\n  constructor(props: ProcessIndicator['props']) {\n    super(props);\n    this.state = {\n      status: props.status,\n      size: props.size,\n    };\n  }\n\n  /**\n   * Create interval for animation duration (1500ms)\n   * Update state only at the end of every interval\n   * (end of animation loop) if props changed before end of animation\n   */\n  componentDidMount() {\n    this.interval = window.setInterval(() => {\n      const { status: targetStatus, size: targetSize, onAnimationCompleted } = this.props;\n      const { status: currentStatus, size: currentSize } = this.state;\n\n      if (currentStatus !== targetStatus) {\n        this.setState({ status: targetStatus }, () => {\n          if (onAnimationCompleted) {\n            this.timeout = window.setTimeout(() => {\n              onAnimationCompleted(targetStatus);\n            }, ANIMATION_DURATION_IN_MS);\n          }\n        });\n      }\n\n      if (currentSize !== targetSize) {\n        this.setState({ size: targetSize });\n      }\n    }, ANIMATION_DURATION_IN_MS);\n  }\n\n  /**\n   * Only trigger render if comopnent's state got\n   * updated from interval callback\n   */\n  shouldComponentUpdate(nextProps: ProcessIndicator['props'], nextState: ProcessIndicatorState) {\n    const isSameStatus = nextProps.status === nextState.status;\n    const isSameSize = nextProps.size === nextState.size;\n\n    return isSameStatus && isSameSize;\n  }\n\n  // Clear interval before destroying component\n  componentWillUnmount() {\n    window.clearInterval(this.interval);\n    window.clearTimeout(this.timeout);\n  }\n\n  render() {\n    const { className, 'data-testid': dataTestId } = this.props;\n    const { size, status } = this.state;\n    const classes = clsx(`process process-${size}`, className, {\n      [`process-danger`]: status === Status.FAILED,\n      [`process-stopped`]: status === Status.HIDDEN,\n      [`process-success`]: status === Status.SUCCEEDED,\n    });\n\n    return (\n      <span className={classes} data-testid={dataTestId}>\n        <span className=\"process-icon-container\">\n          <span className=\"process-icon-horizontal\" />\n          <span className=\"process-icon-vertical\" />\n        </span>\n        <svg xmlns=\"http://www.w3.org/2000/svg\">\n          <circle className=\"process-circle\" cx=\"50%\" cy=\"50%\" r={radius[size]} fillOpacity=\"0.0\" />\n        </svg>\n      </span>\n    );\n  }\n}\n"],"names":["radius","xxs","xs","sm","xl","ANIMATION_DURATION_IN_MS","ProcessIndicator","Component","defaultProps","status","size","interval","timeout","constructor","props","state","componentDidMount","window","setInterval","targetStatus","targetSize","onAnimationCompleted","currentStatus","currentSize","setState","setTimeout","shouldComponentUpdate","nextProps","nextState","isSameStatus","isSameSize","componentWillUnmount","clearInterval","clearTimeout","render","className","dataTestId","classes","clsx","Status","FAILED","HIDDEN","SUCCEEDED","_jsxs","children","_jsx","xmlns","cx","cy","r","fillOpacity"],"mappings":"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"}
+{"version":3,"file":"ProcessIndicator.js","sources":["../../src/ProcessIndicator/ProcessIndicator.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { Component } from 'react';\n\nimport { Status, Size } from '../common';\n\nconst radius = { xxs: 5, xs: 11, sm: 22, xl: 61 };\n\nconst ANIMATION_DURATION_IN_MS = 1500;\n\nexport type ProcessIndicatorStatus =\n  `${Status.PROCESSING | Status.FAILED | Status.SUCCEEDED | Status.HIDDEN}`;\n\nexport interface ProcessIndicatorProps {\n  /** @default 'processing' */\n  status?: ProcessIndicatorStatus;\n  /** @default 'sm' */\n  size?: 'xxs' | `${Size.EXTRA_SMALL | Size.SMALL | Size.EXTRA_LARGE}`;\n  className?: string;\n  'data-testid'?: string;\n  onAnimationCompleted?: (status: ProcessIndicatorStatus) => void;\n}\n\ntype ProcessIndicatorState = Required<Pick<ProcessIndicatorProps, 'status' | 'size'>>;\n\nexport default class ProcessIndicator extends Component<\n  ProcessIndicatorProps,\n  ProcessIndicatorState\n> {\n  declare props: ProcessIndicatorProps &\n    Required<Pick<ProcessIndicatorProps, keyof typeof ProcessIndicator.defaultProps>>;\n\n  static defaultProps = {\n    status: 'processing',\n    size: 'sm',\n  } satisfies Partial<ProcessIndicatorProps>;\n\n  interval = 0;\n  timeout = 0;\n\n  constructor(props: ProcessIndicator['props']) {\n    super(props);\n    this.state = {\n      status: props.status,\n      size: props.size,\n    };\n  }\n\n  /**\n   * Create interval for animation duration (1500ms)\n   * Update state only at the end of every interval\n   * (end of animation loop) if props changed before end of animation\n   */\n  componentDidMount() {\n    this.interval = window.setInterval(() => {\n      const { status: targetStatus, size: targetSize, onAnimationCompleted } = this.props;\n      const { status: currentStatus, size: currentSize } = this.state;\n\n      if (currentStatus !== targetStatus) {\n        this.setState({ status: targetStatus }, () => {\n          if (onAnimationCompleted) {\n            this.timeout = window.setTimeout(() => {\n              onAnimationCompleted(targetStatus);\n            }, ANIMATION_DURATION_IN_MS);\n          }\n        });\n      }\n\n      if (currentSize !== targetSize) {\n        this.setState({ size: targetSize });\n      }\n    }, ANIMATION_DURATION_IN_MS);\n  }\n\n  /**\n   * Only trigger render if comopnent's state got\n   * updated from interval callback\n   */\n  shouldComponentUpdate(nextProps: ProcessIndicator['props'], nextState: ProcessIndicatorState) {\n    const isSameStatus = nextProps.status === nextState.status;\n    const isSameSize = nextProps.size === nextState.size;\n\n    return isSameStatus && isSameSize;\n  }\n\n  // Clear interval before destroying component\n  componentWillUnmount() {\n    window.clearInterval(this.interval);\n    window.clearTimeout(this.timeout);\n  }\n\n  render() {\n    const { className, 'data-testid': dataTestId } = this.props;\n    const { size, status } = this.state;\n    const classes = clsx(`process process-${size}`, className, {\n      [`process-danger`]: status === Status.FAILED,\n      [`process-stopped`]: status === Status.HIDDEN,\n      [`process-success`]: status === Status.SUCCEEDED,\n    });\n\n    return (\n      <span className={classes} data-testid={dataTestId}>\n        <span className=\"process-icon-container\">\n          <span className=\"process-icon-horizontal\" />\n          <span className=\"process-icon-vertical\" />\n        </span>\n        <svg xmlns=\"http://www.w3.org/2000/svg\">\n          <circle className=\"process-circle\" cx=\"50%\" cy=\"50%\" r={radius[size]} fillOpacity=\"0.0\" />\n        </svg>\n      </span>\n    );\n  }\n}\n"],"names":["radius","xxs","xs","sm","xl","ANIMATION_DURATION_IN_MS","ProcessIndicator","Component","defaultProps","status","size","interval","timeout","constructor","props","state","componentDidMount","window","setInterval","targetStatus","targetSize","onAnimationCompleted","currentStatus","currentSize","setState","setTimeout","shouldComponentUpdate","nextProps","nextState","isSameStatus","isSameSize","componentWillUnmount","clearInterval","clearTimeout","render","className","dataTestId","classes","clsx","Status","FAILED","HIDDEN","SUCCEEDED","_jsxs","children","_jsx","xmlns","cx","cy","r","fillOpacity"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAMA,MAAM,GAAG;AAAEC,EAAAA,GAAG,EAAE,CAAC;AAAEC,EAAAA,EAAE,EAAE,EAAE;AAAEC,EAAAA,EAAE,EAAE,EAAE;AAAEC,EAAAA,EAAE,EAAE;CAAI;AAEjD,MAAMC,wBAAwB,GAAG,IAAI;AAiBvB,MAAOC,gBAAiB,SAAQC,eAG7C,CAAA;AAIC,EAAA,OAAOC,YAAY,GAAG;AACpBC,IAAAA,MAAM,EAAE,YAAY;AACpBC,IAAAA,IAAI,EAAE;GACkC;AAE1CC,EAAAA,QAAQ,GAAG,CAAC;AACZC,EAAAA,OAAO,GAAG,CAAC;EAEXC,WAAAA,CAAYC,KAAgC,EAAA;IAC1C,KAAK,CAACA,KAAK,CAAC;IACZ,IAAI,CAACC,KAAK,GAAG;MACXN,MAAM,EAAEK,KAAK,CAACL,MAAM;MACpBC,IAAI,EAAEI,KAAK,CAACJ;KACb;AACH,EAAA;AAEA;;;;AAIG;AACHM,EAAAA,iBAAiBA,GAAA;AACf,IAAA,IAAI,CAACL,QAAQ,GAAGM,MAAM,CAACC,WAAW,CAAC,MAAK;MACtC,MAAM;AAAET,QAAAA,MAAM,EAAEU,YAAY;AAAET,QAAAA,IAAI,EAAEU,UAAU;AAAEC,QAAAA;OAAsB,GAAG,IAAI,CAACP,KAAK;MACnF,MAAM;AAAEL,QAAAA,MAAM,EAAEa,aAAa;AAAEZ,QAAAA,IAAI,EAAEa;OAAa,GAAG,IAAI,CAACR,KAAK;MAE/D,IAAIO,aAAa,KAAKH,YAAY,EAAE;QAClC,IAAI,CAACK,QAAQ,CAAC;AAAEf,UAAAA,MAAM,EAAEU;AAAY,SAAE,EAAE,MAAK;AAC3C,UAAA,IAAIE,oBAAoB,EAAE;AACxB,YAAA,IAAI,CAACT,OAAO,GAAGK,MAAM,CAACQ,UAAU,CAAC,MAAK;cACpCJ,oBAAoB,CAACF,YAAY,CAAC;YACpC,CAAC,EAAEd,wBAAwB,CAAC;AAC9B,UAAA;AACF,QAAA,CAAC,CAAC;AACJ,MAAA;MAEA,IAAIkB,WAAW,KAAKH,UAAU,EAAE;QAC9B,IAAI,CAACI,QAAQ,CAAC;AAAEd,UAAAA,IAAI,EAAEU;AAAU,SAAE,CAAC;AACrC,MAAA;IACF,CAAC,EAAEf,wBAAwB,CAAC;AAC9B,EAAA;AAEA;;;AAGG;AACHqB,EAAAA,qBAAqBA,CAACC,SAAoC,EAAEC,SAAgC,EAAA;IAC1F,MAAMC,YAAY,GAAGF,SAAS,CAAClB,MAAM,KAAKmB,SAAS,CAACnB,MAAM;IAC1D,MAAMqB,UAAU,GAAGH,SAAS,CAACjB,IAAI,KAAKkB,SAAS,CAAClB,IAAI;IAEpD,OAAOmB,YAAY,IAAIC,UAAU;AACnC,EAAA;AAEA;AACAC,EAAAA,oBAAoBA,GAAA;AAClBd,IAAAA,MAAM,CAACe,aAAa,CAAC,IAAI,CAACrB,QAAQ,CAAC;AACnCM,IAAAA,MAAM,CAACgB,YAAY,CAAC,IAAI,CAACrB,OAAO,CAAC;AACnC,EAAA;AAEAsB,EAAAA,MAAMA,GAAA;IACJ,MAAM;MAAEC,SAAS;AAAE,MAAA,aAAa,EAAEC;KAAY,GAAG,IAAI,CAACtB,KAAK;IAC3D,MAAM;MAAEJ,IAAI;AAAED,cAAAA;KAAQ,GAAG,IAAI,CAACM,KAAK;IACnC,MAAMsB,OAAO,GAAGC,SAAI,CAAC,mBAAmB5B,IAAI,CAAA,CAAE,EAAEyB,SAAS,EAAE;AACzD,MAAA,CAAC,gBAAgB,GAAG1B,QAAM,KAAK8B,aAAM,CAACC,MAAM;AAC5C,MAAA,CAAC,iBAAiB,GAAG/B,QAAM,KAAK8B,aAAM,CAACE,MAAM;AAC7C,MAAA,CAAC,CAAA,eAAA,CAAiB,GAAGhC,QAAM,KAAK8B,aAAM,CAACG;AACxC,KAAA,CAAC;AAEF,IAAA,oBACEC,eAAA,CAAA,MAAA,EAAA;AAAMR,MAAAA,SAAS,EAAEE,OAAQ;AAAC,MAAA,aAAA,EAAaD,UAAW;AAAAQ,MAAAA,QAAA,gBAChDD,eAAA,CAAA,MAAA,EAAA;AAAMR,QAAAA,SAAS,EAAC,wBAAwB;AAAAS,QAAAA,QAAA,gBACtCC,cAAA,CAAA,MAAA,EAAA;AAAMV,UAAAA,SAAS,EAAC;SAAyB,CACzC,eAAAU,cAAA,CAAA,MAAA,EAAA;AAAMV,UAAAA,SAAS,EAAC;AAAuB,SAAA,CACzC;OAAM,CACN,eAAAU,cAAA,CAAA,KAAA,EAAA;AAAKC,QAAAA,KAAK,EAAC,4BAA4B;AAAAF,QAAAA,QAAA,eACrCC,cAAA,CAAA,QAAA,EAAA;AAAQV,UAAAA,SAAS,EAAC,gBAAgB;AAACY,UAAAA,EAAE,EAAC,KAAK;AAACC,UAAAA,EAAE,EAAC,KAAK;AAACC,UAAAA,CAAC,EAAEjD,MAAM,CAACU,IAAI,CAAE;AAACwC,UAAAA,WAAW,EAAC;SAAK;AACzF,OAAK,CACP;AAAA,KAAM,CAAC;AAEX,EAAA;;;;;"}

package/build/ProcessIndicator/ProcessIndicator.mjs

@@ -26,7 +26,7 @@ import '../common/CloseButton/CloseButton.messages.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 const radius = {
-  xxs: 6,
+  xxs: 5,
   xs: 11,
   sm: 22,
   xl: 61

package/build/ProcessIndicator/ProcessIndicator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ProcessIndicator.mjs","sources":["../../src/ProcessIndicator/ProcessIndicator.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { Component } from 'react';\n\nimport { Status, Size } from '../common';\n\nconst radius = { xxs: 6, xs: 11, sm: 22, xl: 61 };\n\nconst ANIMATION_DURATION_IN_MS = 1500;\n\nexport type ProcessIndicatorStatus =\n  `${Status.PROCESSING | Status.FAILED | Status.SUCCEEDED | Status.HIDDEN}`;\n\nexport interface ProcessIndicatorProps {\n  /** @default 'processing' */\n  status?: ProcessIndicatorStatus;\n  /** @default 'sm' */\n  size?: 'xxs' | `${Size.EXTRA_SMALL | Size.SMALL | Size.EXTRA_LARGE}`;\n  className?: string;\n  'data-testid'?: string;\n  onAnimationCompleted?: (status: ProcessIndicatorStatus) => void;\n}\n\ntype ProcessIndicatorState = Required<Pick<ProcessIndicatorProps, 'status' | 'size'>>;\n\nexport default class ProcessIndicator extends Component<\n  ProcessIndicatorProps,\n  ProcessIndicatorState\n> {\n  declare props: ProcessIndicatorProps &\n    Required<Pick<ProcessIndicatorProps, keyof typeof ProcessIndicator.defaultProps>>;\n\n  static defaultProps = {\n    status: 'processing',\n    size: 'sm',\n  } satisfies Partial<ProcessIndicatorProps>;\n\n  interval = 0;\n  timeout = 0;\n\n  constructor(props: ProcessIndicator['props']) {\n    super(props);\n    this.state = {\n      status: props.status,\n      size: props.size,\n    };\n  }\n\n  /**\n   * Create interval for animation duration (1500ms)\n   * Update state only at the end of every interval\n   * (end of animation loop) if props changed before end of animation\n   */\n  componentDidMount() {\n    this.interval = window.setInterval(() => {\n      const { status: targetStatus, size: targetSize, onAnimationCompleted } = this.props;\n      const { status: currentStatus, size: currentSize } = this.state;\n\n      if (currentStatus !== targetStatus) {\n        this.setState({ status: targetStatus }, () => {\n          if (onAnimationCompleted) {\n            this.timeout = window.setTimeout(() => {\n              onAnimationCompleted(targetStatus);\n            }, ANIMATION_DURATION_IN_MS);\n          }\n        });\n      }\n\n      if (currentSize !== targetSize) {\n        this.setState({ size: targetSize });\n      }\n    }, ANIMATION_DURATION_IN_MS);\n  }\n\n  /**\n   * Only trigger render if comopnent's state got\n   * updated from interval callback\n   */\n  shouldComponentUpdate(nextProps: ProcessIndicator['props'], nextState: ProcessIndicatorState) {\n    const isSameStatus = nextProps.status === nextState.status;\n    const isSameSize = nextProps.size === nextState.size;\n\n    return isSameStatus && isSameSize;\n  }\n\n  // Clear interval before destroying component\n  componentWillUnmount() {\n    window.clearInterval(this.interval);\n    window.clearTimeout(this.timeout);\n  }\n\n  render() {\n    const { className, 'data-testid': dataTestId } = this.props;\n    const { size, status } = this.state;\n    const classes = clsx(`process process-${size}`, className, {\n      [`process-danger`]: status === Status.FAILED,\n      [`process-stopped`]: status === Status.HIDDEN,\n      [`process-success`]: status === Status.SUCCEEDED,\n    });\n\n    return (\n      <span className={classes} data-testid={dataTestId}>\n        <span className=\"process-icon-container\">\n          <span className=\"process-icon-horizontal\" />\n          <span className=\"process-icon-vertical\" />\n        </span>\n        <svg xmlns=\"http://www.w3.org/2000/svg\">\n          <circle className=\"process-circle\" cx=\"50%\" cy=\"50%\" r={radius[size]} fillOpacity=\"0.0\" />\n        </svg>\n      </span>\n    );\n  }\n}\n"],"names":["radius","xxs","xs","sm","xl","ANIMATION_DURATION_IN_MS","ProcessIndicator","Component","defaultProps","status","size","interval","timeout","constructor","props","state","componentDidMount","window","setInterval","targetStatus","targetSize","onAnimationCompleted","currentStatus","currentSize","setState","setTimeout","shouldComponentUpdate","nextProps","nextState","isSameStatus","isSameSize","componentWillUnmount","clearInterval","clearTimeout","render","className","dataTestId","classes","clsx","Status","FAILED","HIDDEN","SUCCEEDED","_jsxs","children","_jsx","xmlns","cx","cy","r","fillOpacity"],"mappings":"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"}
+{"version":3,"file":"ProcessIndicator.mjs","sources":["../../src/ProcessIndicator/ProcessIndicator.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { Component } from 'react';\n\nimport { Status, Size } from '../common';\n\nconst radius = { xxs: 5, xs: 11, sm: 22, xl: 61 };\n\nconst ANIMATION_DURATION_IN_MS = 1500;\n\nexport type ProcessIndicatorStatus =\n  `${Status.PROCESSING | Status.FAILED | Status.SUCCEEDED | Status.HIDDEN}`;\n\nexport interface ProcessIndicatorProps {\n  /** @default 'processing' */\n  status?: ProcessIndicatorStatus;\n  /** @default 'sm' */\n  size?: 'xxs' | `${Size.EXTRA_SMALL | Size.SMALL | Size.EXTRA_LARGE}`;\n  className?: string;\n  'data-testid'?: string;\n  onAnimationCompleted?: (status: ProcessIndicatorStatus) => void;\n}\n\ntype ProcessIndicatorState = Required<Pick<ProcessIndicatorProps, 'status' | 'size'>>;\n\nexport default class ProcessIndicator extends Component<\n  ProcessIndicatorProps,\n  ProcessIndicatorState\n> {\n  declare props: ProcessIndicatorProps &\n    Required<Pick<ProcessIndicatorProps, keyof typeof ProcessIndicator.defaultProps>>;\n\n  static defaultProps = {\n    status: 'processing',\n    size: 'sm',\n  } satisfies Partial<ProcessIndicatorProps>;\n\n  interval = 0;\n  timeout = 0;\n\n  constructor(props: ProcessIndicator['props']) {\n    super(props);\n    this.state = {\n      status: props.status,\n      size: props.size,\n    };\n  }\n\n  /**\n   * Create interval for animation duration (1500ms)\n   * Update state only at the end of every interval\n   * (end of animation loop) if props changed before end of animation\n   */\n  componentDidMount() {\n    this.interval = window.setInterval(() => {\n      const { status: targetStatus, size: targetSize, onAnimationCompleted } = this.props;\n      const { status: currentStatus, size: currentSize } = this.state;\n\n      if (currentStatus !== targetStatus) {\n        this.setState({ status: targetStatus }, () => {\n          if (onAnimationCompleted) {\n            this.timeout = window.setTimeout(() => {\n              onAnimationCompleted(targetStatus);\n            }, ANIMATION_DURATION_IN_MS);\n          }\n        });\n      }\n\n      if (currentSize !== targetSize) {\n        this.setState({ size: targetSize });\n      }\n    }, ANIMATION_DURATION_IN_MS);\n  }\n\n  /**\n   * Only trigger render if comopnent's state got\n   * updated from interval callback\n   */\n  shouldComponentUpdate(nextProps: ProcessIndicator['props'], nextState: ProcessIndicatorState) {\n    const isSameStatus = nextProps.status === nextState.status;\n    const isSameSize = nextProps.size === nextState.size;\n\n    return isSameStatus && isSameSize;\n  }\n\n  // Clear interval before destroying component\n  componentWillUnmount() {\n    window.clearInterval(this.interval);\n    window.clearTimeout(this.timeout);\n  }\n\n  render() {\n    const { className, 'data-testid': dataTestId } = this.props;\n    const { size, status } = this.state;\n    const classes = clsx(`process process-${size}`, className, {\n      [`process-danger`]: status === Status.FAILED,\n      [`process-stopped`]: status === Status.HIDDEN,\n      [`process-success`]: status === Status.SUCCEEDED,\n    });\n\n    return (\n      <span className={classes} data-testid={dataTestId}>\n        <span className=\"process-icon-container\">\n          <span className=\"process-icon-horizontal\" />\n          <span className=\"process-icon-vertical\" />\n        </span>\n        <svg xmlns=\"http://www.w3.org/2000/svg\">\n          <circle className=\"process-circle\" cx=\"50%\" cy=\"50%\" r={radius[size]} fillOpacity=\"0.0\" />\n        </svg>\n      </span>\n    );\n  }\n}\n"],"names":["radius","xxs","xs","sm","xl","ANIMATION_DURATION_IN_MS","ProcessIndicator","Component","defaultProps","status","size","interval","timeout","constructor","props","state","componentDidMount","window","setInterval","targetStatus","targetSize","onAnimationCompleted","currentStatus","currentSize","setState","setTimeout","shouldComponentUpdate","nextProps","nextState","isSameStatus","isSameSize","componentWillUnmount","clearInterval","clearTimeout","render","className","dataTestId","classes","clsx","Status","FAILED","HIDDEN","SUCCEEDED","_jsxs","children","_jsx","xmlns","cx","cy","r","fillOpacity"],"mappings":"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"}

package/build/Prompt/CriticalBanner/CriticalBanner.js

@@ -43,6 +43,7 @@ const CriticalBanner = ({
   media = {},
   action,
   actionSecondary,
+  animateEntry = true,
   expanded: expandedProp,
   onToggle,
   id,
@@ -141,7 +142,15 @@ const CriticalBanner = ({
     }),
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "wds-critical-banner-overhang-query",
-      children: bannerSurface
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: clsx.clsx('wds-critical-banner__entry-mask', {
+          'wds-critical-banner__entry-mask--animated': animateEntry
+        }),
+        children: /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "wds-critical-banner__entry-track",
+          children: bannerSurface
+        })
+      })
     })
   });
 };

package/build/Prompt/CriticalBanner/CriticalBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"CriticalBanner.js","sources":["../../../src/Prompt/CriticalBanner/CriticalBanner.tsx"],"sourcesContent":["import { ElementType, ReactNode, useId, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport Body from '../../Body';\nimport Button from '../../Button';\nimport Container from '../../Container';\nimport { Breakpoint, LiveRegion, Typography } from '../../common';\nimport { ButtonProps } from '../../Button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\n\nimport { renderPromptMedia, PromptMedia } from '../helpers/promptMedia';\nimport { ExpanderToggle } from '../common/Expander/Expander';\nimport { buildAnnouncementString } from './helpers';\nimport { useContainerSize } from '../../common/hooks/useContainerSize';\n\nexport type CriticalBannerProps = {\n  title?: ReactNode;\n  description: ReactNode;\n  media?: PromptMedia;\n  action?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n    label: ButtonProps['children'];\n  };\n  actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n    label: ButtonProps['children'];\n  };\n  sentiment?: Exclude<PrimitivePromptProps['sentiment'], 'proposition'>;\n  /**\n   * Controls whether the description and actions are visible, as a controlled component.\n   * When collapsed with a title, only the title is shown.\n   * When collapsed without a title, the description is trimmed to 2 lines.\n   *\n   * Note: On desktop (container width >= 768px), the banner is always expanded\n   * regardless of this prop value.\n   */\n  expanded?: boolean;\n  /**\n   * Called when the user clicks the chevron toggle.\n   * If not provided, the component will manage expanded state internally.\n   */\n  onToggle?: () => void;\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid'>;\n\n/**\n * A full-width, non-dismissible banner for critical messages such as account blocks or\n * time-sensitive actions that require immediate user attention.\n\n * @see {@link https://docs.wise.design/components/critical-banner Design Spec}\n */\nexport const CriticalBanner = ({\n  sentiment = 'negative',\n  title,\n  description,\n  media = {},\n  action,\n  actionSecondary,\n  expanded: expandedProp,\n  onToggle,\n  id,\n  className,\n  'data-testid': testId,\n}: CriticalBannerProps) => {\n  const [containerRef, isDesktop] = useContainerSize(Breakpoint.MEDIUM);\n  const isControlled = expandedProp !== undefined && onToggle !== undefined;\n  const [internalExpanded, setInternalExpanded] = useState(true);\n  const resolvedExpanded = isDesktop ? true : isControlled ? expandedProp : internalExpanded;\n  const handleToggle = isControlled\n    ? onToggle\n    : () => setInternalExpanded((previousExpanded) => !previousExpanded);\n  const hasActions = action ?? actionSecondary;\n  const mediaId = useId();\n  const titleId = useId();\n  const descId = useId();\n\n  const ariaLabelledByIds = [\n    media['aria-hidden'] ? undefined : mediaId,\n    !title ? undefined : titleId,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const bannerSurface = (\n    <Container\n      ref={containerRef}\n      size=\"fluid\"\n      as={PrimitivePrompt as ElementType}\n      id={id}\n      sentiment={sentiment}\n      emphasis={sentiment === 'neutral' ? 'base' : 'elevated'}\n      data-testid={testId}\n      className={clsx(\n        'wds-critical-banner',\n        'wds-critical-banner-overhang',\n        {\n          'wds-critical-banner--collapsed': !resolvedExpanded,\n          'wds-critical-banner--with-two-actions': !!actionSecondary,\n        },\n        className,\n      )}\n      media={renderPromptMedia({\n        media,\n        sentiment,\n        mediaId,\n        imgClassName: 'wds-critical-banner--media-image',\n      })}\n      actions={\n        hasActions ? (\n          <div aria-hidden={!resolvedExpanded ? true : undefined} style={{ display: 'contents' }}>\n            {actionSecondary && (\n              // @ts-expect-error onClick type mismatch\n              <Button\n                v2\n                size=\"md\"\n                priority=\"secondary\"\n                href={actionSecondary.href}\n                tabIndex={resolvedExpanded ? undefined : -1}\n                onClick={actionSecondary?.onClick}\n              >\n                {actionSecondary.label}\n              </Button>\n            )}\n            {action && (\n              // @ts-expect-error onClick type mismatch\n              <Button\n                v2\n                size=\"md\"\n                priority=\"primary\"\n                href={action.href}\n                tabIndex={resolvedExpanded ? undefined : -1}\n                onClick={action.onClick}\n              >\n                {action.label}\n              </Button>\n            )}\n          </div>\n        ) : undefined\n      }\n      role=\"region\"\n      aria-labelledby={ariaLabelledByIds || undefined}\n      aria-describedby={description ? descId : undefined}\n    >\n      <div className=\"wds-critical-banner__text-wrapper\">\n        {title && (\n          <Body\n            id={titleId}\n            type={Typography.BODY_LARGE_BOLD}\n            className=\"wds-critical-banner__content wds-critical-banner__title\"\n          >\n            {title}\n          </Body>\n        )}\n        {description && (\n          <Body\n            id={descId}\n            className={clsx('wds-critical-banner__content', 'wds-critical-banner__description', {\n              'wds-critical-banner__description--with-title': !!title,\n            })}\n          >\n            {description}\n          </Body>\n        )}\n      </div>\n      <ExpanderToggle\n        expanded={resolvedExpanded}\n        size={24}\n        className=\"wds-critical-banner__toggle\"\n        onToggle={handleToggle}\n      />\n    </Container>\n  );\n\n  return (\n    <LiveRegion\n      aria-live=\"assertive\"\n      announceOnChange={buildAnnouncementString({\n        title,\n        description,\n        expanded: resolvedExpanded,\n        actionLabel: action?.label,\n        actionSecondaryLabel: actionSecondary?.label,\n      })}\n    >\n      <div className=\"wds-critical-banner-overhang-query\">{bannerSurface}</div>\n    </LiveRegion>\n  );\n};\n\nexport default CriticalBanner;\n"],"names":["CriticalBanner","sentiment","title","description","media","action","actionSecondary","expanded","expandedProp","onToggle","id","className","testId","containerRef","isDesktop","useContainerSize","Breakpoint","MEDIUM","isControlled","undefined","internalExpanded","setInternalExpanded","useState","resolvedExpanded","handleToggle","previousExpanded","hasActions","mediaId","useId","titleId","descId","ariaLabelledByIds","filter","Boolean","join","bannerSurface","_jsxs","Container","ref","size","as","PrimitivePrompt","emphasis","clsx","renderPromptMedia","imgClassName","actions","style","display","children","_jsx","Button","v2","priority","href","tabIndex","onClick","label","role","Body","type","Typography","BODY_LARGE_BOLD","ExpanderToggle","LiveRegion","announceOnChange","buildAnnouncementString","actionLabel","actionSecondaryLabel"],"mappings":"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"}
+{"version":3,"file":"CriticalBanner.js","sources":["../../../src/Prompt/CriticalBanner/CriticalBanner.tsx"],"sourcesContent":["import { ElementType, ReactNode, useId, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport Body from '../../Body';\nimport Button from '../../Button';\nimport Container from '../../Container';\nimport { Breakpoint, LiveRegion, Typography } from '../../common';\nimport { ButtonProps } from '../../Button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\n\nimport { renderPromptMedia, PromptMedia } from '../helpers/promptMedia';\nimport { ExpanderToggle } from '../common/Expander/Expander';\nimport { buildAnnouncementString } from './helpers';\nimport { useContainerSize } from '../../common/hooks/useContainerSize';\n\nexport type CriticalBannerProps = {\n  title?: ReactNode;\n  description: ReactNode;\n  media?: PromptMedia;\n  action?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n    label: ButtonProps['children'];\n  };\n  actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n    label: ButtonProps['children'];\n  };\n  sentiment?: Exclude<PrimitivePromptProps['sentiment'], 'proposition'>;\n  /**\n   * Controls whether the banner plays its entry animation 500ms after mounting.\n   * Expand and collapse animations are unaffected.\n   */\n  animateEntry?: boolean;\n  /**\n   * Controls whether the description and actions are visible, as a controlled component.\n   * When collapsed with a title, only the title is shown.\n   * When collapsed without a title, the description is trimmed to 2 lines.\n   *\n   * Note: On desktop (container width >= 768px), the banner is always expanded\n   * regardless of this prop value.\n   */\n  expanded?: boolean;\n  /**\n   * Called when the user clicks the chevron toggle.\n   * If not provided, the component will manage expanded state internally.\n   */\n  onToggle?: () => void;\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid'>;\n\n/**\n * A full-width, non-dismissible banner for critical messages such as account blocks or\n * time-sensitive actions that require immediate user attention.\n\n * @see {@link https://docs.wise.design/components/critical-banner Design Spec}\n */\nexport const CriticalBanner = ({\n  sentiment = 'negative',\n  title,\n  description,\n  media = {},\n  action,\n  actionSecondary,\n  animateEntry = true,\n  expanded: expandedProp,\n  onToggle,\n  id,\n  className,\n  'data-testid': testId,\n}: CriticalBannerProps) => {\n  const [containerRef, isDesktop] = useContainerSize(Breakpoint.MEDIUM);\n  const isControlled = expandedProp !== undefined && onToggle !== undefined;\n  const [internalExpanded, setInternalExpanded] = useState(true);\n  const resolvedExpanded = isDesktop ? true : isControlled ? expandedProp : internalExpanded;\n  const handleToggle = isControlled\n    ? onToggle\n    : () => setInternalExpanded((previousExpanded) => !previousExpanded);\n  const hasActions = action ?? actionSecondary;\n  const mediaId = useId();\n  const titleId = useId();\n  const descId = useId();\n\n  const ariaLabelledByIds = [\n    media['aria-hidden'] ? undefined : mediaId,\n    !title ? undefined : titleId,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const bannerSurface = (\n    <Container\n      ref={containerRef}\n      size=\"fluid\"\n      as={PrimitivePrompt as ElementType}\n      id={id}\n      sentiment={sentiment}\n      emphasis={sentiment === 'neutral' ? 'base' : 'elevated'}\n      data-testid={testId}\n      className={clsx(\n        'wds-critical-banner',\n        'wds-critical-banner-overhang',\n        {\n          'wds-critical-banner--collapsed': !resolvedExpanded,\n          'wds-critical-banner--with-two-actions': !!actionSecondary,\n        },\n        className,\n      )}\n      media={renderPromptMedia({\n        media,\n        sentiment,\n        mediaId,\n        imgClassName: 'wds-critical-banner--media-image',\n      })}\n      actions={\n        hasActions ? (\n          <div aria-hidden={!resolvedExpanded ? true : undefined} style={{ display: 'contents' }}>\n            {actionSecondary && (\n              // @ts-expect-error onClick type mismatch\n              <Button\n                v2\n                size=\"md\"\n                priority=\"secondary\"\n                href={actionSecondary.href}\n                tabIndex={resolvedExpanded ? undefined : -1}\n                onClick={actionSecondary?.onClick}\n              >\n                {actionSecondary.label}\n              </Button>\n            )}\n            {action && (\n              // @ts-expect-error onClick type mismatch\n              <Button\n                v2\n                size=\"md\"\n                priority=\"primary\"\n                href={action.href}\n                tabIndex={resolvedExpanded ? undefined : -1}\n                onClick={action.onClick}\n              >\n                {action.label}\n              </Button>\n            )}\n          </div>\n        ) : undefined\n      }\n      role=\"region\"\n      aria-labelledby={ariaLabelledByIds || undefined}\n      aria-describedby={description ? descId : undefined}\n    >\n      <div className=\"wds-critical-banner__text-wrapper\">\n        {title && (\n          <Body\n            id={titleId}\n            type={Typography.BODY_LARGE_BOLD}\n            className=\"wds-critical-banner__content wds-critical-banner__title\"\n          >\n            {title}\n          </Body>\n        )}\n        {description && (\n          <Body\n            id={descId}\n            className={clsx('wds-critical-banner__content', 'wds-critical-banner__description', {\n              'wds-critical-banner__description--with-title': !!title,\n            })}\n          >\n            {description}\n          </Body>\n        )}\n      </div>\n      <ExpanderToggle\n        expanded={resolvedExpanded}\n        size={24}\n        className=\"wds-critical-banner__toggle\"\n        onToggle={handleToggle}\n      />\n    </Container>\n  );\n\n  return (\n    <LiveRegion\n      aria-live=\"assertive\"\n      announceOnChange={buildAnnouncementString({\n        title,\n        description,\n        expanded: resolvedExpanded,\n        actionLabel: action?.label,\n        actionSecondaryLabel: actionSecondary?.label,\n      })}\n    >\n      <div className=\"wds-critical-banner-overhang-query\">\n        <div\n          className={clsx('wds-critical-banner__entry-mask', {\n            'wds-critical-banner__entry-mask--animated': animateEntry,\n          })}\n        >\n          <div className=\"wds-critical-banner__entry-track\">{bannerSurface}</div>\n        </div>\n      </div>\n    </LiveRegion>\n  );\n};\n\nexport default CriticalBanner;\n"],"names":["CriticalBanner","sentiment","title","description","media","action","actionSecondary","animateEntry","expanded","expandedProp","onToggle","id","className","testId","containerRef","isDesktop","useContainerSize","Breakpoint","MEDIUM","isControlled","undefined","internalExpanded","setInternalExpanded","useState","resolvedExpanded","handleToggle","previousExpanded","hasActions","mediaId","useId","titleId","descId","ariaLabelledByIds","filter","Boolean","join","bannerSurface","_jsxs","Container","ref","size","as","PrimitivePrompt","emphasis","clsx","renderPromptMedia","imgClassName","actions","style","display","children","_jsx","Button","v2","priority","href","tabIndex","onClick","label","role","Body","type","Typography","BODY_LARGE_BOLD","ExpanderToggle","LiveRegion","announceOnChange","buildAnnouncementString","actionLabel","actionSecondaryLabel"],"mappings":"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"}

package/build/Prompt/CriticalBanner/CriticalBanner.mjs

@@ -41,6 +41,7 @@ const CriticalBanner = ({
   media = {},
   action,
   actionSecondary,
+  animateEntry = true,
   expanded: expandedProp,
   onToggle,
   id,
@@ -139,7 +140,15 @@ const CriticalBanner = ({
     }),
     children: /*#__PURE__*/jsx("div", {
       className: "wds-critical-banner-overhang-query",
-      children: bannerSurface
+      children: /*#__PURE__*/jsx("div", {
+        className: clsx('wds-critical-banner__entry-mask', {
+          'wds-critical-banner__entry-mask--animated': animateEntry
+        }),
+        children: /*#__PURE__*/jsx("div", {
+          className: "wds-critical-banner__entry-track",
+          children: bannerSurface
+        })
+      })
     })
   });
 };

package/build/Prompt/CriticalBanner/CriticalBanner.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CriticalBanner.mjs","sources":["../../../src/Prompt/CriticalBanner/CriticalBanner.tsx"],"sourcesContent":["import { ElementType, ReactNode, useId, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport Body from '../../Body';\nimport Button from '../../Button';\nimport Container from '../../Container';\nimport { Breakpoint, LiveRegion, Typography } from '../../common';\nimport { ButtonProps } from '../../Button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\n\nimport { renderPromptMedia, PromptMedia } from '../helpers/promptMedia';\nimport { ExpanderToggle } from '../common/Expander/Expander';\nimport { buildAnnouncementString } from './helpers';\nimport { useContainerSize } from '../../common/hooks/useContainerSize';\n\nexport type CriticalBannerProps = {\n  title?: ReactNode;\n  description: ReactNode;\n  media?: PromptMedia;\n  action?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n    label: ButtonProps['children'];\n  };\n  actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n    label: ButtonProps['children'];\n  };\n  sentiment?: Exclude<PrimitivePromptProps['sentiment'], 'proposition'>;\n  /**\n   * Controls whether the description and actions are visible, as a controlled component.\n   * When collapsed with a title, only the title is shown.\n   * When collapsed without a title, the description is trimmed to 2 lines.\n   *\n   * Note: On desktop (container width >= 768px), the banner is always expanded\n   * regardless of this prop value.\n   */\n  expanded?: boolean;\n  /**\n   * Called when the user clicks the chevron toggle.\n   * If not provided, the component will manage expanded state internally.\n   */\n  onToggle?: () => void;\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid'>;\n\n/**\n * A full-width, non-dismissible banner for critical messages such as account blocks or\n * time-sensitive actions that require immediate user attention.\n\n * @see {@link https://docs.wise.design/components/critical-banner Design Spec}\n */\nexport const CriticalBanner = ({\n  sentiment = 'negative',\n  title,\n  description,\n  media = {},\n  action,\n  actionSecondary,\n  expanded: expandedProp,\n  onToggle,\n  id,\n  className,\n  'data-testid': testId,\n}: CriticalBannerProps) => {\n  const [containerRef, isDesktop] = useContainerSize(Breakpoint.MEDIUM);\n  const isControlled = expandedProp !== undefined && onToggle !== undefined;\n  const [internalExpanded, setInternalExpanded] = useState(true);\n  const resolvedExpanded = isDesktop ? true : isControlled ? expandedProp : internalExpanded;\n  const handleToggle = isControlled\n    ? onToggle\n    : () => setInternalExpanded((previousExpanded) => !previousExpanded);\n  const hasActions = action ?? actionSecondary;\n  const mediaId = useId();\n  const titleId = useId();\n  const descId = useId();\n\n  const ariaLabelledByIds = [\n    media['aria-hidden'] ? undefined : mediaId,\n    !title ? undefined : titleId,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const bannerSurface = (\n    <Container\n      ref={containerRef}\n      size=\"fluid\"\n      as={PrimitivePrompt as ElementType}\n      id={id}\n      sentiment={sentiment}\n      emphasis={sentiment === 'neutral' ? 'base' : 'elevated'}\n      data-testid={testId}\n      className={clsx(\n        'wds-critical-banner',\n        'wds-critical-banner-overhang',\n        {\n          'wds-critical-banner--collapsed': !resolvedExpanded,\n          'wds-critical-banner--with-two-actions': !!actionSecondary,\n        },\n        className,\n      )}\n      media={renderPromptMedia({\n        media,\n        sentiment,\n        mediaId,\n        imgClassName: 'wds-critical-banner--media-image',\n      })}\n      actions={\n        hasActions ? (\n          <div aria-hidden={!resolvedExpanded ? true : undefined} style={{ display: 'contents' }}>\n            {actionSecondary && (\n              // @ts-expect-error onClick type mismatch\n              <Button\n                v2\n                size=\"md\"\n                priority=\"secondary\"\n                href={actionSecondary.href}\n                tabIndex={resolvedExpanded ? undefined : -1}\n                onClick={actionSecondary?.onClick}\n              >\n                {actionSecondary.label}\n              </Button>\n            )}\n            {action && (\n              // @ts-expect-error onClick type mismatch\n              <Button\n                v2\n                size=\"md\"\n                priority=\"primary\"\n                href={action.href}\n                tabIndex={resolvedExpanded ? undefined : -1}\n                onClick={action.onClick}\n              >\n                {action.label}\n              </Button>\n            )}\n          </div>\n        ) : undefined\n      }\n      role=\"region\"\n      aria-labelledby={ariaLabelledByIds || undefined}\n      aria-describedby={description ? descId : undefined}\n    >\n      <div className=\"wds-critical-banner__text-wrapper\">\n        {title && (\n          <Body\n            id={titleId}\n            type={Typography.BODY_LARGE_BOLD}\n            className=\"wds-critical-banner__content wds-critical-banner__title\"\n          >\n            {title}\n          </Body>\n        )}\n        {description && (\n          <Body\n            id={descId}\n            className={clsx('wds-critical-banner__content', 'wds-critical-banner__description', {\n              'wds-critical-banner__description--with-title': !!title,\n            })}\n          >\n            {description}\n          </Body>\n        )}\n      </div>\n      <ExpanderToggle\n        expanded={resolvedExpanded}\n        size={24}\n        className=\"wds-critical-banner__toggle\"\n        onToggle={handleToggle}\n      />\n    </Container>\n  );\n\n  return (\n    <LiveRegion\n      aria-live=\"assertive\"\n      announceOnChange={buildAnnouncementString({\n        title,\n        description,\n        expanded: resolvedExpanded,\n        actionLabel: action?.label,\n        actionSecondaryLabel: actionSecondary?.label,\n      })}\n    >\n      <div className=\"wds-critical-banner-overhang-query\">{bannerSurface}</div>\n    </LiveRegion>\n  );\n};\n\nexport default CriticalBanner;\n"],"names":["CriticalBanner","sentiment","title","description","media","action","actionSecondary","expanded","expandedProp","onToggle","id","className","testId","containerRef","isDesktop","useContainerSize","Breakpoint","MEDIUM","isControlled","undefined","internalExpanded","setInternalExpanded","useState","resolvedExpanded","handleToggle","previousExpanded","hasActions","mediaId","useId","titleId","descId","ariaLabelledByIds","filter","Boolean","join","bannerSurface","_jsxs","Container","ref","size","as","PrimitivePrompt","emphasis","clsx","renderPromptMedia","imgClassName","actions","style","display","children","_jsx","Button","v2","priority","href","tabIndex","onClick","label","role","Body","type","Typography","BODY_LARGE_BOLD","ExpanderToggle","LiveRegion","announceOnChange","buildAnnouncementString","actionLabel","actionSecondaryLabel"],"mappings":"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"}
+{"version":3,"file":"CriticalBanner.mjs","sources":["../../../src/Prompt/CriticalBanner/CriticalBanner.tsx"],"sourcesContent":["import { ElementType, ReactNode, useId, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport Body from '../../Body';\nimport Button from '../../Button';\nimport Container from '../../Container';\nimport { Breakpoint, LiveRegion, Typography } from '../../common';\nimport { ButtonProps } from '../../Button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\n\nimport { renderPromptMedia, PromptMedia } from '../helpers/promptMedia';\nimport { ExpanderToggle } from '../common/Expander/Expander';\nimport { buildAnnouncementString } from './helpers';\nimport { useContainerSize } from '../../common/hooks/useContainerSize';\n\nexport type CriticalBannerProps = {\n  title?: ReactNode;\n  description: ReactNode;\n  media?: PromptMedia;\n  action?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n    label: ButtonProps['children'];\n  };\n  actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n    label: ButtonProps['children'];\n  };\n  sentiment?: Exclude<PrimitivePromptProps['sentiment'], 'proposition'>;\n  /**\n   * Controls whether the banner plays its entry animation 500ms after mounting.\n   * Expand and collapse animations are unaffected.\n   */\n  animateEntry?: boolean;\n  /**\n   * Controls whether the description and actions are visible, as a controlled component.\n   * When collapsed with a title, only the title is shown.\n   * When collapsed without a title, the description is trimmed to 2 lines.\n   *\n   * Note: On desktop (container width >= 768px), the banner is always expanded\n   * regardless of this prop value.\n   */\n  expanded?: boolean;\n  /**\n   * Called when the user clicks the chevron toggle.\n   * If not provided, the component will manage expanded state internally.\n   */\n  onToggle?: () => void;\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid'>;\n\n/**\n * A full-width, non-dismissible banner for critical messages such as account blocks or\n * time-sensitive actions that require immediate user attention.\n\n * @see {@link https://docs.wise.design/components/critical-banner Design Spec}\n */\nexport const CriticalBanner = ({\n  sentiment = 'negative',\n  title,\n  description,\n  media = {},\n  action,\n  actionSecondary,\n  animateEntry = true,\n  expanded: expandedProp,\n  onToggle,\n  id,\n  className,\n  'data-testid': testId,\n}: CriticalBannerProps) => {\n  const [containerRef, isDesktop] = useContainerSize(Breakpoint.MEDIUM);\n  const isControlled = expandedProp !== undefined && onToggle !== undefined;\n  const [internalExpanded, setInternalExpanded] = useState(true);\n  const resolvedExpanded = isDesktop ? true : isControlled ? expandedProp : internalExpanded;\n  const handleToggle = isControlled\n    ? onToggle\n    : () => setInternalExpanded((previousExpanded) => !previousExpanded);\n  const hasActions = action ?? actionSecondary;\n  const mediaId = useId();\n  const titleId = useId();\n  const descId = useId();\n\n  const ariaLabelledByIds = [\n    media['aria-hidden'] ? undefined : mediaId,\n    !title ? undefined : titleId,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const bannerSurface = (\n    <Container\n      ref={containerRef}\n      size=\"fluid\"\n      as={PrimitivePrompt as ElementType}\n      id={id}\n      sentiment={sentiment}\n      emphasis={sentiment === 'neutral' ? 'base' : 'elevated'}\n      data-testid={testId}\n      className={clsx(\n        'wds-critical-banner',\n        'wds-critical-banner-overhang',\n        {\n          'wds-critical-banner--collapsed': !resolvedExpanded,\n          'wds-critical-banner--with-two-actions': !!actionSecondary,\n        },\n        className,\n      )}\n      media={renderPromptMedia({\n        media,\n        sentiment,\n        mediaId,\n        imgClassName: 'wds-critical-banner--media-image',\n      })}\n      actions={\n        hasActions ? (\n          <div aria-hidden={!resolvedExpanded ? true : undefined} style={{ display: 'contents' }}>\n            {actionSecondary && (\n              // @ts-expect-error onClick type mismatch\n              <Button\n                v2\n                size=\"md\"\n                priority=\"secondary\"\n                href={actionSecondary.href}\n                tabIndex={resolvedExpanded ? undefined : -1}\n                onClick={actionSecondary?.onClick}\n              >\n                {actionSecondary.label}\n              </Button>\n            )}\n            {action && (\n              // @ts-expect-error onClick type mismatch\n              <Button\n                v2\n                size=\"md\"\n                priority=\"primary\"\n                href={action.href}\n                tabIndex={resolvedExpanded ? undefined : -1}\n                onClick={action.onClick}\n              >\n                {action.label}\n              </Button>\n            )}\n          </div>\n        ) : undefined\n      }\n      role=\"region\"\n      aria-labelledby={ariaLabelledByIds || undefined}\n      aria-describedby={description ? descId : undefined}\n    >\n      <div className=\"wds-critical-banner__text-wrapper\">\n        {title && (\n          <Body\n            id={titleId}\n            type={Typography.BODY_LARGE_BOLD}\n            className=\"wds-critical-banner__content wds-critical-banner__title\"\n          >\n            {title}\n          </Body>\n        )}\n        {description && (\n          <Body\n            id={descId}\n            className={clsx('wds-critical-banner__content', 'wds-critical-banner__description', {\n              'wds-critical-banner__description--with-title': !!title,\n            })}\n          >\n            {description}\n          </Body>\n        )}\n      </div>\n      <ExpanderToggle\n        expanded={resolvedExpanded}\n        size={24}\n        className=\"wds-critical-banner__toggle\"\n        onToggle={handleToggle}\n      />\n    </Container>\n  );\n\n  return (\n    <LiveRegion\n      aria-live=\"assertive\"\n      announceOnChange={buildAnnouncementString({\n        title,\n        description,\n        expanded: resolvedExpanded,\n        actionLabel: action?.label,\n        actionSecondaryLabel: actionSecondary?.label,\n      })}\n    >\n      <div className=\"wds-critical-banner-overhang-query\">\n        <div\n          className={clsx('wds-critical-banner__entry-mask', {\n            'wds-critical-banner__entry-mask--animated': animateEntry,\n          })}\n        >\n          <div className=\"wds-critical-banner__entry-track\">{bannerSurface}</div>\n        </div>\n      </div>\n    </LiveRegion>\n  );\n};\n\nexport default CriticalBanner;\n"],"names":["CriticalBanner","sentiment","title","description","media","action","actionSecondary","animateEntry","expanded","expandedProp","onToggle","id","className","testId","containerRef","isDesktop","useContainerSize","Breakpoint","MEDIUM","isControlled","undefined","internalExpanded","setInternalExpanded","useState","resolvedExpanded","handleToggle","previousExpanded","hasActions","mediaId","useId","titleId","descId","ariaLabelledByIds","filter","Boolean","join","bannerSurface","_jsxs","Container","ref","size","as","PrimitivePrompt","emphasis","clsx","renderPromptMedia","imgClassName","actions","style","display","children","_jsx","Button","v2","priority","href","tabIndex","onClick","label","role","Body","type","Typography","BODY_LARGE_BOLD","ExpanderToggle","LiveRegion","announceOnChange","buildAnnouncementString","actionLabel","actionSecondaryLabel"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDO,MAAMA,cAAc,GAAGA,CAAC;AAC7BC,EAAAA,SAAS,GAAG,UAAU;EACtBC,KAAK;EACLC,WAAW;EACXC,KAAK,GAAG,EAAE;EACVC,MAAM;EACNC,eAAe;AACfC,EAAAA,YAAY,GAAG,IAAI;AACnBC,EAAAA,QAAQ,EAAEC,YAAY;EACtBC,QAAQ;EACRC,EAAE;EACFC,SAAS;AACT,EAAA,aAAa,EAAEC;AAAM,CACD,KAAI;EACxB,MAAM,CAACC,YAAY,EAAEC,SAAS,CAAC,GAAGC,gBAAgB,CAACC,UAAU,CAACC,MAAM,CAAC;EACrE,MAAMC,YAAY,GAAGV,YAAY,KAAKW,SAAS,IAAIV,QAAQ,KAAKU,SAAS;EACzE,MAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGC,QAAQ,CAAC,IAAI,CAAC;EAC9D,MAAMC,gBAAgB,GAAGT,SAAS,GAAG,IAAI,GAAGI,YAAY,GAAGV,YAAY,GAAGY,gBAAgB;AAC1F,EAAA,MAAMI,YAAY,GAAGN,YAAY,GAC7BT,QAAQ,GACR,MAAMY,mBAAmB,CAAEI,gBAAgB,IAAK,CAACA,gBAAgB,CAAC;AACtE,EAAA,MAAMC,UAAU,GAAGtB,MAAM,IAAIC,eAAe;AAC5C,EAAA,MAAMsB,OAAO,GAAGC,KAAK,EAAE;AACvB,EAAA,MAAMC,OAAO,GAAGD,KAAK,EAAE;AACvB,EAAA,MAAME,MAAM,GAAGF,KAAK,EAAE;AAEtB,EAAA,MAAMG,iBAAiB,GAAG,CACxB5B,KAAK,CAAC,aAAa,CAAC,GAAGgB,SAAS,GAAGQ,OAAO,EAC1C,CAAC1B,KAAK,GAAGkB,SAAS,GAAGU,OAAO,CAC7B,CACEG,MAAM,CAACC,OAAO,CAAC,CACfC,IAAI,CAAC,GAAG,CAAC;AAEZ,EAAA,MAAMC,aAAa,gBACjBC,IAAA,CAACC,SAAS,EAAA;AACRC,IAAAA,GAAG,EAAEzB,YAAa;AAClB0B,IAAAA,IAAI,EAAC,OAAO;AACZC,IAAAA,EAAE,EAAEC,eAA+B;AACnC/B,IAAAA,EAAE,EAAEA,EAAG;AACPV,IAAAA,SAAS,EAAEA,SAAU;AACrB0C,IAAAA,QAAQ,EAAE1C,SAAS,KAAK,SAAS,GAAG,MAAM,GAAG,UAAW;AACxD,IAAA,aAAA,EAAaY,MAAO;AACpBD,IAAAA,SAAS,EAAEgC,IAAI,CACb,qBAAqB,EACrB,8BAA8B,EAC9B;MACE,gCAAgC,EAAE,CAACpB,gBAAgB;MACnD,uCAAuC,EAAE,CAAC,CAAClB;KAC5C,EACDM,SAAS,CACT;IACFR,KAAK,EAAEyC,iBAAiB,CAAC;MACvBzC,KAAK;MACLH,SAAS;MACT2B,OAAO;AACPkB,MAAAA,YAAY,EAAE;AACf,KAAA,CAAE;IACHC,OAAO,EACLpB,UAAU,gBACRU,IAAA,CAAA,KAAA,EAAA;AAAK,MAAA,aAAA,EAAa,CAACb,gBAAgB,GAAG,IAAI,GAAGJ,SAAU;AAAC4B,MAAAA,KAAK,EAAE;AAAEC,QAAAA,OAAO,EAAE;OAAa;AAAAC,MAAAA,QAAA,GACpF5C,eAAe;AAAA;AACd;AACA6C,MAAAA,GAAA,CAACC,MAAM,EAAA;QACLC,EAAE,EAAA,IAAA;AACFb,QAAAA,IAAI,EAAC,IAAI;AACTc,QAAAA,QAAQ,EAAC,WAAW;QACpBC,IAAI,EAAEjD,eAAe,CAACiD,IAAK;AAC3BC,QAAAA,QAAQ,EAAEhC,gBAAgB,GAAGJ,SAAS,GAAG,EAAG;QAC5CqC,OAAO,EAAEnD,eAAe,EAAEmD,OAAQ;QAAAP,QAAA,EAEjC5C,eAAe,CAACoD;OACX,CACT,EACArD,MAAM;AAAA;AACL;AACA8C,MAAAA,GAAA,CAACC,MAAM,EAAA;QACLC,EAAE,EAAA,IAAA;AACFb,QAAAA,IAAI,EAAC,IAAI;AACTc,QAAAA,QAAQ,EAAC,SAAS;QAClBC,IAAI,EAAElD,MAAM,CAACkD,IAAK;AAClBC,QAAAA,QAAQ,EAAEhC,gBAAgB,GAAGJ,SAAS,GAAG,EAAG;QAC5CqC,OAAO,EAAEpD,MAAM,CAACoD,OAAQ;QAAAP,QAAA,EAEvB7C,MAAM,CAACqD;AAAK,OACP,CACT;KACE,CAAC,GACJtC,SACL;AACDuC,IAAAA,IAAI,EAAC,QAAQ;IACb,iBAAA,EAAiB3B,iBAAiB,IAAIZ,SAAU;AAChD,IAAA,kBAAA,EAAkBjB,WAAW,GAAG4B,MAAM,GAAGX,SAAU;AAAA8B,IAAAA,QAAA,gBAEnDb,IAAA,CAAA,KAAA,EAAA;AAAKzB,MAAAA,SAAS,EAAC,mCAAmC;AAAAsC,MAAAA,QAAA,EAAA,CAC/ChD,KAAK,iBACJiD,GAAA,CAACS,IAAI,EAAA;AACHjD,QAAAA,EAAE,EAAEmB,OAAQ;QACZ+B,IAAI,EAAEC,UAAU,CAACC,eAAgB;AACjCnD,QAAAA,SAAS,EAAC,yDAAyD;AAAAsC,QAAAA,QAAA,EAElEhD;AAAK,OACF,CACP,EACAC,WAAW,iBACVgD,GAAA,CAACS,IAAI,EAAA;AACHjD,QAAAA,EAAE,EAAEoB,MAAO;AACXnB,QAAAA,SAAS,EAAEgC,IAAI,CAAC,8BAA8B,EAAE,kCAAkC,EAAE;UAClF,8CAA8C,EAAE,CAAC,CAAC1C;AACnD,SAAA,CAAE;AAAAgD,QAAAA,QAAA,EAEF/C;AAAW,OACR,CACP;AAAA,KACE,CACL,eAAAgD,GAAA,CAACa,cAAc,EAAA;AACbxD,MAAAA,QAAQ,EAAEgB,gBAAiB;AAC3BgB,MAAAA,IAAI,EAAE,EAAG;AACT5B,MAAAA,SAAS,EAAC,6BAA6B;AACvCF,MAAAA,QAAQ,EAAEe;AAAa,KAAA,CAE3B;AAAA,GAAW,CACZ;EAED,oBACE0B,GAAA,CAACc,UAAU,EAAA;AACT,IAAA,WAAA,EAAU,WAAW;IACrBC,gBAAgB,EAAEC,uBAAuB,CAAC;MACxCjE,KAAK;MACLC,WAAW;AACXK,MAAAA,QAAQ,EAAEgB,gBAAgB;MAC1B4C,WAAW,EAAE/D,MAAM,EAAEqD,KAAK;MAC1BW,oBAAoB,EAAE/D,eAAe,EAAEoD;AACxC,KAAA,CAAE;AAAAR,IAAAA,QAAA,eAEHC,GAAA,CAAA,KAAA,EAAA;AAAKvC,MAAAA,SAAS,EAAC,oCAAoC;AAAAsC,MAAAA,QAAA,eACjDC,GAAA,CAAA,KAAA,EAAA;AACEvC,QAAAA,SAAS,EAAEgC,IAAI,CAAC,iCAAiC,EAAE;AACjD,UAAA,2CAA2C,EAAErC;AAC9C,SAAA,CAAE;AAAA2C,QAAAA,QAAA,eAEHC,GAAA,CAAA,KAAA,EAAA;AAAKvC,UAAAA,SAAS,EAAC,kCAAkC;AAAAsC,UAAAA,QAAA,EAAEd;SAAmB;OACnE;KACF;AACP,GAAY,CAAC;AAEjB;;;;"}

package/build/common/Panel/Panel.js

@@ -5,6 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('@floating-ui/react');
 var clsx = require('clsx');
 var React = require('react');
+var OverlayIdProvider = require('../../Provider/overlay/OverlayIdProvider.js');
+var Dimmer = require('../../Dimmer/Dimmer.js');
+var useDirection = require('../hooks/useDirection/useDirection.js');
 require('../theme.js');
 require('../direction.js');
 require('@transferwise/neptune-tokens');
@@ -29,27 +32,8 @@ require('@transferwise/icons');
 require('react-intl');
 require('../CloseButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
-var Dimmer = require('../../Dimmer/Dimmer.js');
-var OverlayIdProvider = require('../../Provider/overlay/OverlayIdProvider.js');
+var Panel_positionUtils = require('./Panel.positionUtils.js');
 
-const POPOVER_OFFSET = 16;
-// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space
-// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.
-// This mapping forces popover to try the four available positions before going back to the initial chosen one.
-const fallbackPlacements = {
-  [position.Position.TOP]: [position.Position.BOTTOM, position.Position.RIGHT, position.Position.LEFT],
-  [position.Position.BOTTOM]: [position.Position.TOP, position.Position.RIGHT, position.Position.LEFT],
-  [position.Position.LEFT]: [position.Position.RIGHT, position.Position.TOP, position.Position.BOTTOM],
-  [position.Position.RIGHT]: [position.Position.LEFT, position.Position.TOP, position.Position.BOTTOM],
-  'top-start': ['bottom-start', 'top-end', 'bottom-end'],
-  'top-end': ['bottom-end', 'top-start', 'bottom-start'],
-  'bottom-start': ['top-start', 'bottom-end', 'top-end'],
-  'bottom-end': ['top-end', 'bottom-start', 'top-start'],
-  'left-start': ['right-start', 'left-end', 'right-end'],
-  'left-end': ['right-end', 'left-start', 'right-start'],
-  'right-start': ['left-start', 'right-end', 'left-end'],
-  'right-end': ['left-end', 'right-start', 'left-start']
-};
 const Panel = /*#__PURE__*/React.forwardRef(function Panel({
   arrow = false,
   flip = true,
@@ -64,14 +48,18 @@ const Panel = /*#__PURE__*/React.forwardRef(function Panel({
   ...rest
 }, reference) {
   const arrowRef = React.useRef(null);
-  const floatingPlacement = position.positionToPlacement(position$1);
+  const {
+    isRTL
+  } = useDirection.useDirection();
+  const resolvedPosition = isRTL ? Panel_positionUtils.mirrorPositionForRtl(position$1) : position$1;
+  const floatingPlacement = Panel_positionUtils.positionToPlacement(resolvedPosition);
   const middleware = [];
   if (arrow) {
-    middleware.push(react.offset(POPOVER_OFFSET));
+    middleware.push(react.offset(Panel_positionUtils.POPOVER_OFFSET));
   }
-  if (flip && fallbackPlacements[floatingPlacement]) {
+  if (flip && Panel_positionUtils.fallbackPlacements[floatingPlacement]) {
     middleware.push(react.flip({
-      fallbackPlacements: fallbackPlacements[floatingPlacement]
+      fallbackPlacements: Panel_positionUtils.fallbackPlacements[floatingPlacement]
     }));
   }
   if (altAxis) {
@@ -85,7 +73,7 @@ const Panel = /*#__PURE__*/React.forwardRef(function Panel({
   }
   if (considerHeight) {
     middleware.push(react.size({
-      padding: POPOVER_OFFSET,
+      padding: Panel_positionUtils.POPOVER_OFFSET,
       apply: ({
         elements,
         availableHeight

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  size as sizeMiddleware,\n  useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  PropsWithChildren,\n  RefObject,\n  SyntheticEvent,\n  forwardRef,\n  useContext,\n  useRef,\n} from 'react';\n\nimport { Position, type FloatingPlacement, positionToPlacement } 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<Placement, 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  'top-start': ['bottom-start', 'top-end', 'bottom-end'],\n  'top-end': ['bottom-end', 'top-start', 'bottom-start'],\n  'bottom-start': ['top-start', 'bottom-end', 'top-end'],\n  'bottom-end': ['top-end', 'bottom-start', 'top-start'],\n  'left-start': ['right-start', 'left-end', 'right-end'],\n  'left-end': ['right-end', 'left-start', 'right-start'],\n  'right-start': ['left-start', 'right-end', 'left-end'],\n  'right-end': ['left-end', 'right-start', 'left-start'],\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?: FloatingPlacement;\n  anchorRef: RefObject<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  const floatingPlacement = positionToPlacement(position);\n\n  const middleware = [];\n\n  if (arrow) {\n    middleware.push(offset(POPOVER_OFFSET));\n  }\n\n  if (flip && fallbackPlacements[floatingPlacement]) {\n    middleware.push(\n      flipMiddleware({\n        fallbackPlacements: fallbackPlacements[floatingPlacement],\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  if (considerHeight) {\n    middleware.push(\n      sizeMiddleware({\n        padding: POPOVER_OFFSET,\n        apply: ({ elements, availableHeight }) => {\n          elements.floating.style.setProperty(\n            '--np-panel-available-height',\n            `${availableHeight}px`,\n          );\n        },\n      }),\n    );\n  }\n\n  const { refs, floatingStyles, placement, middlewareData } = useFloating({\n    placement: floatingPlacement,\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","floatingPlacement","positionToPlacement","middleware","push","offset","flipMiddleware","shift","arrowMiddleware","element","padding","sizeMiddleware","apply","elements","availableHeight","floating","style","setProperty","refs","floatingStyles","placement","middlewareData","useFloating","current","whileElementsMounted","autoUpdate","undefined","arrowStyle","x","left","y","top","contentStyle","width","clientWidth","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","id","ref","setFloating","role","className","clsx","_jsxs"],"mappings":"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"}
+{"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  shift,\n  size as sizeMiddleware,\n  useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  PropsWithChildren,\n  RefObject,\n  SyntheticEvent,\n  forwardRef,\n  useContext,\n  useRef,\n} from 'react';\n\nimport { OverlayIdContext } from '../../Provider/overlay/OverlayIdProvider';\nimport Dimmer from '../../Dimmer';\nimport useDirection from '../hooks/useDirection';\nimport { Position } from '..';\nimport {\n  type FloatingPlacement,\n  POPOVER_OFFSET,\n  fallbackPlacements,\n  mirrorPositionForRtl,\n  positionToPlacement,\n} from './Panel.positionUtils';\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?: FloatingPlacement;\n  anchorRef: RefObject<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  const { isRTL } = useDirection();\n  const resolvedPosition = isRTL ? mirrorPositionForRtl(position) : position;\n  const floatingPlacement = positionToPlacement(resolvedPosition);\n\n  const middleware = [];\n\n  if (arrow) {\n    middleware.push(offset(POPOVER_OFFSET));\n  }\n\n  if (flip && fallbackPlacements[floatingPlacement]) {\n    middleware.push(\n      flipMiddleware({\n        fallbackPlacements: fallbackPlacements[floatingPlacement],\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  if (considerHeight) {\n    middleware.push(\n      sizeMiddleware({\n        padding: POPOVER_OFFSET,\n        apply: ({ elements, availableHeight }) => {\n          elements.floating.style.setProperty(\n            '--np-panel-available-height',\n            `${availableHeight}px`,\n          );\n        },\n      }),\n    );\n  }\n\n  const { refs, floatingStyles, placement, middlewareData } = useFloating({\n    placement: floatingPlacement,\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":["Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","Position","BOTTOM","anchorRef","anchorWidth","considerHeight","rest","reference","arrowRef","useRef","isRTL","useDirection","resolvedPosition","mirrorPositionForRtl","floatingPlacement","positionToPlacement","middleware","push","offset","POPOVER_OFFSET","fallbackPlacements","flipMiddleware","shift","arrowMiddleware","element","padding","sizeMiddleware","apply","elements","availableHeight","floating","style","setProperty","refs","floatingStyles","placement","middlewareData","useFloating","current","whileElementsMounted","autoUpdate","undefined","arrowStyle","x","left","y","top","contentStyle","width","clientWidth","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","id","ref","setFloating","role","className","clsx","_jsxs"],"mappings":"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"}

package/build/common/Panel/Panel.mjs

@@ -1,6 +1,9 @@
 import { offset, flip, shift, arrow, size, useFloating, autoUpdate } from '@floating-ui/react';
 import { clsx } from 'clsx';
 import { forwardRef, useRef, useContext } from 'react';
+import { OverlayIdContext } from '../../Provider/overlay/OverlayIdProvider.mjs';
+import Dimmer from '../../Dimmer/Dimmer.mjs';
+import { useDirection } from '../hooks/useDirection/useDirection.mjs';
 import '../theme.mjs';
 import '../direction.mjs';
 import '@transferwise/neptune-tokens';
@@ -11,7 +14,7 @@ import '../PropsValues/width.mjs';
 import '../PropsValues/type.mjs';
 import '../PropsValues/dateMode.mjs';
 import '../PropsValues/monthFormat.mjs';
-import { Position, positionToPlacement } from '../PropsValues/position.mjs';
+import { Position } from '../PropsValues/position.mjs';
 import '../PropsValues/layouts.mjs';
 import '../PropsValues/status.mjs';
 import '../PropsValues/sentiment.mjs';
@@ -25,27 +28,8 @@ import '@transferwise/icons';
 import 'react-intl';
 import '../CloseButton/CloseButton.messages.mjs';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import Dimmer from '../../Dimmer/Dimmer.mjs';
-import { OverlayIdContext } from '../../Provider/overlay/OverlayIdProvider.mjs';
+import { POPOVER_OFFSET, fallbackPlacements, positionToPlacement, mirrorPositionForRtl } from './Panel.positionUtils.mjs';
 
-const POPOVER_OFFSET = 16;
-// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space
-// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.
-// This mapping forces popover to try the four available positions before going back to the initial chosen one.
-const fallbackPlacements = {
-  [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],
-  [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],
-  [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],
-  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],
-  'top-start': ['bottom-start', 'top-end', 'bottom-end'],
-  'top-end': ['bottom-end', 'top-start', 'bottom-start'],
-  'bottom-start': ['top-start', 'bottom-end', 'top-end'],
-  'bottom-end': ['top-end', 'bottom-start', 'top-start'],
-  'left-start': ['right-start', 'left-end', 'right-end'],
-  'left-end': ['right-end', 'left-start', 'right-start'],
-  'right-start': ['left-start', 'right-end', 'left-end'],
-  'right-end': ['left-end', 'right-start', 'left-start']
-};
 const Panel = /*#__PURE__*/forwardRef(function Panel({
   arrow: arrow$1 = false,
   flip: flip$1 = true,
@@ -60,7 +44,11 @@ const Panel = /*#__PURE__*/forwardRef(function Panel({
   ...rest
 }, reference) {
   const arrowRef = useRef(null);
-  const floatingPlacement = positionToPlacement(position);
+  const {
+    isRTL
+  } = useDirection();
+  const resolvedPosition = isRTL ? mirrorPositionForRtl(position) : position;
+  const floatingPlacement = positionToPlacement(resolvedPosition);
   const middleware = [];
   if (arrow$1) {
     middleware.push(offset(POPOVER_OFFSET));