@transferwise/components 46.142.0 → 46.143.0

package/build/markdown/Markdown.js

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

package/build/markdown/Markdown.mjs

@@ -1,8 +1,8 @@
 import * as commonmark from 'commonmark';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
 import '../common/propsValues/size.mjs';
 import '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';

package/build/modal/Modal.js

@@ -8,8 +8,8 @@ var reactTransitionGroup = require('react-transition-group');
 var reactIntl = require('react-intl');
 require('../common/theme.js');
 require('../common/direction.js');
+require('@transferwise/neptune-tokens');
 require('../common/propsValues/control.js');
-require('../common/propsValues/breakpoint.js');
 var size = require('../common/propsValues/size.js');
 var typography = require('../common/propsValues/typography.js');
 require('../common/propsValues/width.js');
@@ -55,12 +55,12 @@ const Modal = ({
 }) => {
   const intl = reactIntl.useIntl();
   const {
-    isMedium
+    isSmall
   } = useLayout.useLayout();
   const contentReference = React.useRef(null);
   const titleId = React.useId();
   const overlayId = React.useContext(OverlayIdProvider.OverlayIdContext);
-  return !isMedium ? /*#__PURE__*/jsxRuntime.jsx(Drawer.default, {
+  return !isSmall ? /*#__PURE__*/jsxRuntime.jsx(Drawer.default, {
     open: open,
     className: className,
     headerTitle: title,

package/build/modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../src/modal/Modal.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode, useContext, useId, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { useIntl } from 'react-intl';\n\nimport {\n  Size,\n  Position,\n  PositionTop,\n  PositionCenter,\n  Scroll,\n  CommonProps,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n  SizeExtraLarge,\n  ScrollContent,\n  ScrollViewport,\n  Typography,\n} from '../common';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport Drawer from '../drawer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport Title from '../title/Title';\nimport { Cross } from '@transferwise/icons';\nimport IconButton from '../iconButton';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\n\nconst TRANSITION_DURATION_IN_MILLISECONDS = 150;\n\nexport type ModalProps = CommonProps & {\n  /** @default null */\n  title?: ReactNode;\n  body: ReactNode;\n  /** @default null */\n  footer?: ReactNode;\n  /** @default 'md' */\n  size?: SizeSmall | SizeMedium | SizeLarge | SizeExtraLarge;\n  onClose: () => void;\n  onUnmount?: () => void;\n  open: boolean;\n  /** @default 'viewport' */\n  scroll?: ScrollContent | ScrollViewport;\n  /** @default 'center' */\n  position?: PositionTop | PositionCenter;\n  /** @default false */\n  disableDimmerClickToClose?: boolean;\n};\n\nconst Modal = ({\n  title = null,\n  body,\n  footer = null,\n  onClose,\n  onUnmount,\n  className,\n  open,\n  size = Size.MEDIUM,\n  scroll = Scroll.VIEWPORT,\n  position = Position.CENTER,\n  disableDimmerClickToClose = false,\n  ...otherProps\n}: ModalProps) => {\n  const intl = useIntl();\n  const { isMedium } = useLayout();\n\n  const contentReference = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return !isMedium ? (\n    <Drawer\n      open={open}\n      className={className}\n      headerTitle={title}\n      footerContent={footer}\n      position={Position.BOTTOM}\n      onClose={onClose}\n      onUnmount={onUnmount}\n    >\n      {body}\n    </Drawer>\n  ) : (\n    <Dimmer\n      open={open}\n      scrollable={scroll === Scroll.VIEWPORT}\n      contentPosition={position}\n      disableClickToClose={disableDimmerClickToClose}\n      onClose={onClose}\n      onExited={onUnmount}\n    >\n      <CSSTransition\n        nodeRef={contentReference}\n        appear\n        in={open}\n        classNames={{ enterDone: 'in' }}\n        timeout={TRANSITION_DURATION_IN_MILLISECONDS}\n        unmountOnExit\n      >\n        <div\n          ref={contentReference}\n          className={clsx(\n            'tw-modal',\n            'd-flex',\n            'fade',\n            'outline-none',\n            scroll === Scroll.CONTENT && 'tw-modal--scrollable',\n            className,\n          )}\n          {...otherProps}\n        >\n          <div\n            id={overlayId}\n            role=\"dialog\"\n            aria-modal\n            aria-labelledby={titleId}\n            className={clsx('tw-modal-dialog', 'd-flex', {\n              [`tw-modal-${size}`]: size,\n            })}\n          >\n            <div\n              className={clsx(\n                'tw-modal-content',\n                'd-flex',\n                'flex-column',\n                'justify-content-between',\n              )}\n            >\n              <div\n                className={clsx(\n                  'tw-modal-header',\n                  'd-flex',\n                  'align-items-center',\n                  title ? 'justify-content-between' : 'justify-content-end',\n                  'flex-wrap',\n                )}\n              >\n                {title && (\n                  <Title id={titleId} type={Typography.TITLE_SUBSECTION} className=\"tw-modal-title\">\n                    {title}\n                  </Title>\n                )}\n                <IconButton\n                  size={40}\n                  priority=\"tertiary\"\n                  aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n                  onClick={onClose}\n                >\n                  <Cross />\n                </IconButton>\n              </div>\n              <div\n                className={clsx('tw-modal-body', {\n                  'tw-modal-body--scrollable': scroll === Scroll.CONTENT,\n                })}\n              >\n                {body}\n              </div>\n              {footer ? (\n                <div\n                  className={clsx('tw-modal-footer', 'd-flex', 'align-items-center', 'flex-wrap')}\n                >\n                  {footer}\n                </div>\n              ) : (\n                <div className=\"m-t-3\" />\n              )}\n            </div>\n          </div>\n        </div>\n      </CSSTransition>\n    </Dimmer>\n  );\n};\n\nexport default Modal;\n"],"names":["TRANSITION_DURATION_IN_MILLISECONDS","Modal","title","body","footer","onClose","onUnmount","className","open","size","Size","MEDIUM","scroll","Scroll","VIEWPORT","position","Position","CENTER","disableDimmerClickToClose","otherProps","intl","useIntl","isMedium","useLayout","contentReference","useRef","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Drawer","headerTitle","footerContent","BOTTOM","children","Dimmer","scrollable","contentPosition","disableClickToClose","onExited","CSSTransition","nodeRef","appear","in","classNames","enterDone","timeout","unmountOnExit","ref","clsx","CONTENT","id","role","_jsxs","Title","type","Typography","TITLE_SUBSECTION","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross"],"mappings":"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"}
+{"version":3,"file":"Modal.js","sources":["../../src/modal/Modal.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode, useContext, useId, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { useIntl } from 'react-intl';\n\nimport {\n  Size,\n  Position,\n  PositionTop,\n  PositionCenter,\n  Scroll,\n  CommonProps,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n  SizeExtraLarge,\n  ScrollContent,\n  ScrollViewport,\n  Typography,\n} from '../common';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport Drawer from '../drawer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport Title from '../title/Title';\nimport { Cross } from '@transferwise/icons';\nimport IconButton from '../iconButton';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\n\nconst TRANSITION_DURATION_IN_MILLISECONDS = 150;\n\nexport type ModalProps = CommonProps & {\n  /** @default null */\n  title?: ReactNode;\n  body: ReactNode;\n  /** @default null */\n  footer?: ReactNode;\n  /** @default 'md' */\n  size?: SizeSmall | SizeMedium | SizeLarge | SizeExtraLarge;\n  onClose: () => void;\n  onUnmount?: () => void;\n  open: boolean;\n  /** @default 'viewport' */\n  scroll?: ScrollContent | ScrollViewport;\n  /** @default 'center' */\n  position?: PositionTop | PositionCenter;\n  /** @default false */\n  disableDimmerClickToClose?: boolean;\n};\n\nconst Modal = ({\n  title = null,\n  body,\n  footer = null,\n  onClose,\n  onUnmount,\n  className,\n  open,\n  size = Size.MEDIUM,\n  scroll = Scroll.VIEWPORT,\n  position = Position.CENTER,\n  disableDimmerClickToClose = false,\n  ...otherProps\n}: ModalProps) => {\n  const intl = useIntl();\n  const { isSmall } = useLayout();\n\n  const contentReference = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return !isSmall ? (\n    <Drawer\n      open={open}\n      className={className}\n      headerTitle={title}\n      footerContent={footer}\n      position={Position.BOTTOM}\n      onClose={onClose}\n      onUnmount={onUnmount}\n    >\n      {body}\n    </Drawer>\n  ) : (\n    <Dimmer\n      open={open}\n      scrollable={scroll === Scroll.VIEWPORT}\n      contentPosition={position}\n      disableClickToClose={disableDimmerClickToClose}\n      onClose={onClose}\n      onExited={onUnmount}\n    >\n      <CSSTransition\n        nodeRef={contentReference}\n        appear\n        in={open}\n        classNames={{ enterDone: 'in' }}\n        timeout={TRANSITION_DURATION_IN_MILLISECONDS}\n        unmountOnExit\n      >\n        <div\n          ref={contentReference}\n          className={clsx(\n            'tw-modal',\n            'd-flex',\n            'fade',\n            'outline-none',\n            scroll === Scroll.CONTENT && 'tw-modal--scrollable',\n            className,\n          )}\n          {...otherProps}\n        >\n          <div\n            id={overlayId}\n            role=\"dialog\"\n            aria-modal\n            aria-labelledby={titleId}\n            className={clsx('tw-modal-dialog', 'd-flex', {\n              [`tw-modal-${size}`]: size,\n            })}\n          >\n            <div\n              className={clsx(\n                'tw-modal-content',\n                'd-flex',\n                'flex-column',\n                'justify-content-between',\n              )}\n            >\n              <div\n                className={clsx(\n                  'tw-modal-header',\n                  'd-flex',\n                  'align-items-center',\n                  title ? 'justify-content-between' : 'justify-content-end',\n                  'flex-wrap',\n                )}\n              >\n                {title && (\n                  <Title id={titleId} type={Typography.TITLE_SUBSECTION} className=\"tw-modal-title\">\n                    {title}\n                  </Title>\n                )}\n                <IconButton\n                  size={40}\n                  priority=\"tertiary\"\n                  aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n                  onClick={onClose}\n                >\n                  <Cross />\n                </IconButton>\n              </div>\n              <div\n                className={clsx('tw-modal-body', {\n                  'tw-modal-body--scrollable': scroll === Scroll.CONTENT,\n                })}\n              >\n                {body}\n              </div>\n              {footer ? (\n                <div\n                  className={clsx('tw-modal-footer', 'd-flex', 'align-items-center', 'flex-wrap')}\n                >\n                  {footer}\n                </div>\n              ) : (\n                <div className=\"m-t-3\" />\n              )}\n            </div>\n          </div>\n        </div>\n      </CSSTransition>\n    </Dimmer>\n  );\n};\n\nexport default Modal;\n"],"names":["TRANSITION_DURATION_IN_MILLISECONDS","Modal","title","body","footer","onClose","onUnmount","className","open","size","Size","MEDIUM","scroll","Scroll","VIEWPORT","position","Position","CENTER","disableDimmerClickToClose","otherProps","intl","useIntl","isSmall","useLayout","contentReference","useRef","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Drawer","headerTitle","footerContent","BOTTOM","children","Dimmer","scrollable","contentPosition","disableClickToClose","onExited","CSSTransition","nodeRef","appear","in","classNames","enterDone","timeout","unmountOnExit","ref","clsx","CONTENT","id","role","_jsxs","Title","type","Typography","TITLE_SUBSECTION","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross"],"mappings":"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"}

package/build/modal/Modal.mjs

@@ -4,8 +4,8 @@ import { CSSTransition } from 'react-transition-group';
 import { useIntl } from 'react-intl';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
 import { Size } from '../common/propsValues/size.mjs';
 import { Typography } from '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';
@@ -51,12 +51,12 @@ const Modal = ({
 }) => {
   const intl = useIntl();
   const {
-    isMedium
+    isSmall
   } = useLayout();
   const contentReference = useRef(null);
   const titleId = useId();
   const overlayId = useContext(OverlayIdContext);
-  return !isMedium ? /*#__PURE__*/jsx(Drawer, {
+  return !isSmall ? /*#__PURE__*/jsx(Drawer, {
     open: open,
     className: className,
     headerTitle: title,

package/build/modal/Modal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.mjs","sources":["../../src/modal/Modal.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode, useContext, useId, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { useIntl } from 'react-intl';\n\nimport {\n  Size,\n  Position,\n  PositionTop,\n  PositionCenter,\n  Scroll,\n  CommonProps,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n  SizeExtraLarge,\n  ScrollContent,\n  ScrollViewport,\n  Typography,\n} from '../common';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport Drawer from '../drawer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport Title from '../title/Title';\nimport { Cross } from '@transferwise/icons';\nimport IconButton from '../iconButton';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\n\nconst TRANSITION_DURATION_IN_MILLISECONDS = 150;\n\nexport type ModalProps = CommonProps & {\n  /** @default null */\n  title?: ReactNode;\n  body: ReactNode;\n  /** @default null */\n  footer?: ReactNode;\n  /** @default 'md' */\n  size?: SizeSmall | SizeMedium | SizeLarge | SizeExtraLarge;\n  onClose: () => void;\n  onUnmount?: () => void;\n  open: boolean;\n  /** @default 'viewport' */\n  scroll?: ScrollContent | ScrollViewport;\n  /** @default 'center' */\n  position?: PositionTop | PositionCenter;\n  /** @default false */\n  disableDimmerClickToClose?: boolean;\n};\n\nconst Modal = ({\n  title = null,\n  body,\n  footer = null,\n  onClose,\n  onUnmount,\n  className,\n  open,\n  size = Size.MEDIUM,\n  scroll = Scroll.VIEWPORT,\n  position = Position.CENTER,\n  disableDimmerClickToClose = false,\n  ...otherProps\n}: ModalProps) => {\n  const intl = useIntl();\n  const { isMedium } = useLayout();\n\n  const contentReference = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return !isMedium ? (\n    <Drawer\n      open={open}\n      className={className}\n      headerTitle={title}\n      footerContent={footer}\n      position={Position.BOTTOM}\n      onClose={onClose}\n      onUnmount={onUnmount}\n    >\n      {body}\n    </Drawer>\n  ) : (\n    <Dimmer\n      open={open}\n      scrollable={scroll === Scroll.VIEWPORT}\n      contentPosition={position}\n      disableClickToClose={disableDimmerClickToClose}\n      onClose={onClose}\n      onExited={onUnmount}\n    >\n      <CSSTransition\n        nodeRef={contentReference}\n        appear\n        in={open}\n        classNames={{ enterDone: 'in' }}\n        timeout={TRANSITION_DURATION_IN_MILLISECONDS}\n        unmountOnExit\n      >\n        <div\n          ref={contentReference}\n          className={clsx(\n            'tw-modal',\n            'd-flex',\n            'fade',\n            'outline-none',\n            scroll === Scroll.CONTENT && 'tw-modal--scrollable',\n            className,\n          )}\n          {...otherProps}\n        >\n          <div\n            id={overlayId}\n            role=\"dialog\"\n            aria-modal\n            aria-labelledby={titleId}\n            className={clsx('tw-modal-dialog', 'd-flex', {\n              [`tw-modal-${size}`]: size,\n            })}\n          >\n            <div\n              className={clsx(\n                'tw-modal-content',\n                'd-flex',\n                'flex-column',\n                'justify-content-between',\n              )}\n            >\n              <div\n                className={clsx(\n                  'tw-modal-header',\n                  'd-flex',\n                  'align-items-center',\n                  title ? 'justify-content-between' : 'justify-content-end',\n                  'flex-wrap',\n                )}\n              >\n                {title && (\n                  <Title id={titleId} type={Typography.TITLE_SUBSECTION} className=\"tw-modal-title\">\n                    {title}\n                  </Title>\n                )}\n                <IconButton\n                  size={40}\n                  priority=\"tertiary\"\n                  aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n                  onClick={onClose}\n                >\n                  <Cross />\n                </IconButton>\n              </div>\n              <div\n                className={clsx('tw-modal-body', {\n                  'tw-modal-body--scrollable': scroll === Scroll.CONTENT,\n                })}\n              >\n                {body}\n              </div>\n              {footer ? (\n                <div\n                  className={clsx('tw-modal-footer', 'd-flex', 'align-items-center', 'flex-wrap')}\n                >\n                  {footer}\n                </div>\n              ) : (\n                <div className=\"m-t-3\" />\n              )}\n            </div>\n          </div>\n        </div>\n      </CSSTransition>\n    </Dimmer>\n  );\n};\n\nexport default Modal;\n"],"names":["TRANSITION_DURATION_IN_MILLISECONDS","Modal","title","body","footer","onClose","onUnmount","className","open","size","Size","MEDIUM","scroll","Scroll","VIEWPORT","position","Position","CENTER","disableDimmerClickToClose","otherProps","intl","useIntl","isMedium","useLayout","contentReference","useRef","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Drawer","headerTitle","footerContent","BOTTOM","children","Dimmer","scrollable","contentPosition","disableClickToClose","onExited","CSSTransition","nodeRef","appear","in","classNames","enterDone","timeout","unmountOnExit","ref","clsx","CONTENT","id","role","_jsxs","Title","type","Typography","TITLE_SUBSECTION","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross"],"mappings":"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"}
+{"version":3,"file":"Modal.mjs","sources":["../../src/modal/Modal.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode, useContext, useId, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { useIntl } from 'react-intl';\n\nimport {\n  Size,\n  Position,\n  PositionTop,\n  PositionCenter,\n  Scroll,\n  CommonProps,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n  SizeExtraLarge,\n  ScrollContent,\n  ScrollViewport,\n  Typography,\n} from '../common';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport Drawer from '../drawer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport Title from '../title/Title';\nimport { Cross } from '@transferwise/icons';\nimport IconButton from '../iconButton';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\n\nconst TRANSITION_DURATION_IN_MILLISECONDS = 150;\n\nexport type ModalProps = CommonProps & {\n  /** @default null */\n  title?: ReactNode;\n  body: ReactNode;\n  /** @default null */\n  footer?: ReactNode;\n  /** @default 'md' */\n  size?: SizeSmall | SizeMedium | SizeLarge | SizeExtraLarge;\n  onClose: () => void;\n  onUnmount?: () => void;\n  open: boolean;\n  /** @default 'viewport' */\n  scroll?: ScrollContent | ScrollViewport;\n  /** @default 'center' */\n  position?: PositionTop | PositionCenter;\n  /** @default false */\n  disableDimmerClickToClose?: boolean;\n};\n\nconst Modal = ({\n  title = null,\n  body,\n  footer = null,\n  onClose,\n  onUnmount,\n  className,\n  open,\n  size = Size.MEDIUM,\n  scroll = Scroll.VIEWPORT,\n  position = Position.CENTER,\n  disableDimmerClickToClose = false,\n  ...otherProps\n}: ModalProps) => {\n  const intl = useIntl();\n  const { isSmall } = useLayout();\n\n  const contentReference = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return !isSmall ? (\n    <Drawer\n      open={open}\n      className={className}\n      headerTitle={title}\n      footerContent={footer}\n      position={Position.BOTTOM}\n      onClose={onClose}\n      onUnmount={onUnmount}\n    >\n      {body}\n    </Drawer>\n  ) : (\n    <Dimmer\n      open={open}\n      scrollable={scroll === Scroll.VIEWPORT}\n      contentPosition={position}\n      disableClickToClose={disableDimmerClickToClose}\n      onClose={onClose}\n      onExited={onUnmount}\n    >\n      <CSSTransition\n        nodeRef={contentReference}\n        appear\n        in={open}\n        classNames={{ enterDone: 'in' }}\n        timeout={TRANSITION_DURATION_IN_MILLISECONDS}\n        unmountOnExit\n      >\n        <div\n          ref={contentReference}\n          className={clsx(\n            'tw-modal',\n            'd-flex',\n            'fade',\n            'outline-none',\n            scroll === Scroll.CONTENT && 'tw-modal--scrollable',\n            className,\n          )}\n          {...otherProps}\n        >\n          <div\n            id={overlayId}\n            role=\"dialog\"\n            aria-modal\n            aria-labelledby={titleId}\n            className={clsx('tw-modal-dialog', 'd-flex', {\n              [`tw-modal-${size}`]: size,\n            })}\n          >\n            <div\n              className={clsx(\n                'tw-modal-content',\n                'd-flex',\n                'flex-column',\n                'justify-content-between',\n              )}\n            >\n              <div\n                className={clsx(\n                  'tw-modal-header',\n                  'd-flex',\n                  'align-items-center',\n                  title ? 'justify-content-between' : 'justify-content-end',\n                  'flex-wrap',\n                )}\n              >\n                {title && (\n                  <Title id={titleId} type={Typography.TITLE_SUBSECTION} className=\"tw-modal-title\">\n                    {title}\n                  </Title>\n                )}\n                <IconButton\n                  size={40}\n                  priority=\"tertiary\"\n                  aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n                  onClick={onClose}\n                >\n                  <Cross />\n                </IconButton>\n              </div>\n              <div\n                className={clsx('tw-modal-body', {\n                  'tw-modal-body--scrollable': scroll === Scroll.CONTENT,\n                })}\n              >\n                {body}\n              </div>\n              {footer ? (\n                <div\n                  className={clsx('tw-modal-footer', 'd-flex', 'align-items-center', 'flex-wrap')}\n                >\n                  {footer}\n                </div>\n              ) : (\n                <div className=\"m-t-3\" />\n              )}\n            </div>\n          </div>\n        </div>\n      </CSSTransition>\n    </Dimmer>\n  );\n};\n\nexport default Modal;\n"],"names":["TRANSITION_DURATION_IN_MILLISECONDS","Modal","title","body","footer","onClose","onUnmount","className","open","size","Size","MEDIUM","scroll","Scroll","VIEWPORT","position","Position","CENTER","disableDimmerClickToClose","otherProps","intl","useIntl","isSmall","useLayout","contentReference","useRef","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Drawer","headerTitle","footerContent","BOTTOM","children","Dimmer","scrollable","contentPosition","disableClickToClose","onExited","CSSTransition","nodeRef","appear","in","classNames","enterDone","timeout","unmountOnExit","ref","clsx","CONTENT","id","role","_jsxs","Title","type","Typography","TITLE_SUBSECTION","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross"],"mappings":"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"}

package/build/moneyInput/MoneyInput.js

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

package/build/moneyInput/MoneyInput.mjs

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

package/build/navigationOption/NavigationOption.js

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

package/build/navigationOption/NavigationOption.mjs

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

package/build/nudge/Nudge.js

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

package/build/nudge/Nudge.mjs

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

package/build/overlayHeader/OverlayHeader.js

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

package/build/overlayHeader/OverlayHeader.mjs

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

package/build/phoneNumberInput/PhoneNumberInput.js

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

package/build/phoneNumberInput/PhoneNumberInput.mjs

@@ -2,8 +2,8 @@ import { useRef, useState, useEffect, useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
 import { Size } from '../common/propsValues/size.mjs';
 import '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';

package/build/popover/Popover.js

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

package/build/popover/Popover.mjs

@@ -2,8 +2,8 @@ import { clsx } from 'clsx';
 import { useId, useEffect, useRef, useState, isValidElement, cloneElement } from 'react';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
 import '../common/propsValues/size.mjs';
 import { Typography } from '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';

package/build/processIndicator/ProcessIndicator.js

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

package/build/processIndicator/ProcessIndicator.mjs

@@ -2,8 +2,8 @@ import { clsx } from 'clsx';
 import { Component } from 'react';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
 import '../common/propsValues/size.mjs';
 import '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';

package/build/progressBar/ProgressBar.js

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

package/build/progressBar/ProgressBar.mjs

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

package/build/promoCard/PromoCard.js

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

package/build/promoCard/PromoCard.mjs

@@ -4,8 +4,8 @@ import React__default, { forwardRef, useState, useId, useEffect } from 'react';
 import Body from '../body/Body.mjs';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
 import '../common/propsValues/size.mjs';
 import { Typography } from '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';

package/build/promoCard/PromoCardIndicator.js

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

package/build/promoCard/PromoCardIndicator.mjs

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

package/build/prompt/ActionPrompt/ActionPrompt.js

@@ -1,13 +1,13 @@
 'use strict';
 
 var React = require('react');
+var neptuneTokens = require('@transferwise/neptune-tokens');
 var clsx = require('clsx');
 var Body = require('../../body/Body.js');
 var Button_resolver = require('../../button/Button.resolver.js');
 require('../../common/theme.js');
 require('../../common/direction.js');
 require('../../common/propsValues/control.js');
-var breakpoint = require('../../common/propsValues/breakpoint.js');
 require('../../common/propsValues/size.js');
 var typography = require('../../common/propsValues/typography.js');
 require('../../common/propsValues/width.js');
@@ -45,7 +45,7 @@ const ActionPrompt = ({
   'data-testid': testId,
   'aria-label': ariaLabel
 }) => {
-  const isMobile = !useScreenSize.useScreenSize(breakpoint.Breakpoint.MEDIUM);
+  const isMobile = !useScreenSize.useScreenSize(neptuneTokens.Breakpoint.SMALL);
   const mediaId = React.useId();
   const titleId = React.useId();
   const descId = React.useId();

package/build/prompt/ActionPrompt/ActionPrompt.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionPrompt.js","sources":["../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"sourcesContent":["import { AriaAttributes, ReactNode, useId } from 'react';\nimport { clsx } from 'clsx';\n\nimport Body from '../../body';\nimport Button from '../../button';\nimport { Breakpoint, Typography } from '../../common';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\nimport { renderPromptMedia, PromptMedia } from '../helpers/promptMedia';\n\nexport type ActionPromptProps = {\n  title: ReactNode;\n  description?: ReactNode;\n  /** @default {} */\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  'aria-label'?: AriaAttributes['aria-label'];\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'onDismiss'> & {\n    /**\n     * The sentiment determines the colour scheme\n     * @default 'neutral'\n     */\n    sentiment?: PrimitivePromptProps['sentiment'];\n  };\n\n/**\n * Use an action prompt for optional feedback that doesn't require immediate action, such as feature upsells, warnings, or suggestions. These prompts are typically used outside of core product flows (e.g., Launchpad, Recipient, or Transaction screens) and can be addressed at the user's convenience.\n *\n * If your message is about immediate user feedback (e.g., form submission errors, download failures, missing data warnings), use an [info prompt](https://storybook.wise.design/?path=/docs/prompts-infoprompt--docs) instead.\n *\n * Guidance can be found in the [design system](https://wise.design/components/action-prompt).\n */\nexport const ActionPrompt = ({\n  sentiment = 'neutral',\n  title,\n  description,\n  onDismiss,\n  media = {},\n  action,\n  actionSecondary,\n  id,\n  className,\n  'data-testid': testId,\n  'aria-label': ariaLabel,\n}: ActionPromptProps) => {\n  const isMobile = !useScreenSize(Breakpoint.MEDIUM);\n\n  const mediaId = useId();\n  const titleId = useId();\n  const descId = useId();\n\n  const ariaLabelledByIds = [\n    media['aria-hidden'] ? undefined : mediaId,\n    ariaLabel ? undefined : titleId,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const renderMedia = () =>\n    renderPromptMedia({\n      media,\n      sentiment,\n      mediaId,\n      imgClassName: 'wds-action-prompt--media-image',\n    });\n\n  return (\n    <PrimitivePrompt\n      id={id}\n      sentiment={sentiment}\n      data-testid={testId}\n      className={clsx(\n        'wds-action-prompt',\n        { 'wds-action-prompt--with-two-actions': !!actionSecondary },\n        className,\n      )}\n      media={renderMedia()}\n      actions={\n        <>\n          {actionSecondary && (\n            // @ts-expect-error onClick type mismatch\n            <Button\n              v2\n              size=\"md\"\n              priority=\"secondary\"\n              href={actionSecondary.href}\n              block={isMobile}\n              onClick={actionSecondary?.onClick}\n            >\n              {actionSecondary.label}\n            </Button>\n          )}\n          {/* @ts-expect-error onClick type mismatch */}\n          <Button\n            v2\n            size=\"md\"\n            priority=\"primary\"\n            href={action.href}\n            block={isMobile}\n            onClick={action.onClick}\n          >\n            {action.label}\n          </Button>\n        </>\n      }\n      role=\"region\"\n      onDismiss={onDismiss}\n      {...(ariaLabel\n        ? { 'aria-label': ariaLabel }\n        : {\n            'aria-labelledby': ariaLabelledByIds,\n            'aria-describedby': descId,\n          })}\n    >\n      <div className={clsx('d-flex', 'flex-column', 'justify-content-center')}>\n        <Body id={titleId} type={Typography.BODY_LARGE_BOLD} className=\"wds-action-prompt__content\">\n          {title}\n        </Body>\n        {description && (\n          <Body id={descId} className=\"wds-action-prompt__content\">\n            {description}\n          </Body>\n        )}\n      </div>\n    </PrimitivePrompt>\n  );\n};\n\nexport default ActionPrompt;\n"],"names":["ActionPrompt","sentiment","title","description","onDismiss","media","action","actionSecondary","id","className","testId","ariaLabel","isMobile","useScreenSize","Breakpoint","MEDIUM","mediaId","useId","titleId","descId","ariaLabelledByIds","undefined","filter","Boolean","join","renderMedia","renderPromptMedia","imgClassName","_jsx","PrimitivePrompt","clsx","actions","_jsxs","_Fragment","children","Button","v2","size","priority","href","block","onClick","label","role","Body","type","Typography","BODY_LARGE_BOLD"],"mappings":"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"}
+{"version":3,"file":"ActionPrompt.js","sources":["../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"sourcesContent":["import { AriaAttributes, ReactNode, useId } from 'react';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\nimport { clsx } from 'clsx';\n\nimport Body from '../../body';\nimport Button from '../../button';\nimport { Typography } from '../../common';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\nimport { renderPromptMedia, PromptMedia } from '../helpers/promptMedia';\n\nexport type ActionPromptProps = {\n  title: ReactNode;\n  description?: ReactNode;\n  /** @default {} */\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  'aria-label'?: AriaAttributes['aria-label'];\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'onDismiss'> & {\n    /**\n     * The sentiment determines the colour scheme\n     * @default 'neutral'\n     */\n    sentiment?: PrimitivePromptProps['sentiment'];\n  };\n\n/**\n * Use an action prompt for optional feedback that doesn't require immediate action, such as feature upsells, warnings, or suggestions. These prompts are typically used outside of core product flows (e.g., Launchpad, Recipient, or Transaction screens) and can be addressed at the user's convenience.\n *\n * If your message is about immediate user feedback (e.g., form submission errors, download failures, missing data warnings), use an [info prompt](https://storybook.wise.design/?path=/docs/prompts-infoprompt--docs) instead.\n *\n * Guidance can be found in the [design system](https://wise.design/components/action-prompt).\n */\nexport const ActionPrompt = ({\n  sentiment = 'neutral',\n  title,\n  description,\n  onDismiss,\n  media = {},\n  action,\n  actionSecondary,\n  id,\n  className,\n  'data-testid': testId,\n  'aria-label': ariaLabel,\n}: ActionPromptProps) => {\n  const isMobile = !useScreenSize(Breakpoint.SMALL);\n\n  const mediaId = useId();\n  const titleId = useId();\n  const descId = useId();\n\n  const ariaLabelledByIds = [\n    media['aria-hidden'] ? undefined : mediaId,\n    ariaLabel ? undefined : titleId,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const renderMedia = () =>\n    renderPromptMedia({\n      media,\n      sentiment,\n      mediaId,\n      imgClassName: 'wds-action-prompt--media-image',\n    });\n\n  return (\n    <PrimitivePrompt\n      id={id}\n      sentiment={sentiment}\n      data-testid={testId}\n      className={clsx(\n        'wds-action-prompt',\n        { 'wds-action-prompt--with-two-actions': !!actionSecondary },\n        className,\n      )}\n      media={renderMedia()}\n      actions={\n        <>\n          {actionSecondary && (\n            // @ts-expect-error onClick type mismatch\n            <Button\n              v2\n              size=\"md\"\n              priority=\"secondary\"\n              href={actionSecondary.href}\n              block={isMobile}\n              onClick={actionSecondary?.onClick}\n            >\n              {actionSecondary.label}\n            </Button>\n          )}\n          {/* @ts-expect-error onClick type mismatch */}\n          <Button\n            v2\n            size=\"md\"\n            priority=\"primary\"\n            href={action.href}\n            block={isMobile}\n            onClick={action.onClick}\n          >\n            {action.label}\n          </Button>\n        </>\n      }\n      role=\"region\"\n      onDismiss={onDismiss}\n      {...(ariaLabel\n        ? { 'aria-label': ariaLabel }\n        : {\n            'aria-labelledby': ariaLabelledByIds,\n            'aria-describedby': descId,\n          })}\n    >\n      <div className={clsx('d-flex', 'flex-column', 'justify-content-center')}>\n        <Body id={titleId} type={Typography.BODY_LARGE_BOLD} className=\"wds-action-prompt__content\">\n          {title}\n        </Body>\n        {description && (\n          <Body id={descId} className=\"wds-action-prompt__content\">\n            {description}\n          </Body>\n        )}\n      </div>\n    </PrimitivePrompt>\n  );\n};\n\nexport default ActionPrompt;\n"],"names":["ActionPrompt","sentiment","title","description","onDismiss","media","action","actionSecondary","id","className","testId","ariaLabel","isMobile","useScreenSize","Breakpoint","SMALL","mediaId","useId","titleId","descId","ariaLabelledByIds","undefined","filter","Boolean","join","renderMedia","renderPromptMedia","imgClassName","_jsx","PrimitivePrompt","clsx","actions","_jsxs","_Fragment","children","Button","v2","size","priority","href","block","onClick","label","role","Body","type","Typography","BODY_LARGE_BOLD"],"mappings":"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"}

package/build/prompt/ActionPrompt/ActionPrompt.mjs

@@ -1,11 +1,11 @@
 import { useId } from 'react';
+import { Breakpoint } from '@transferwise/neptune-tokens';
 import { clsx } from 'clsx';
 import Body from '../../body/Body.mjs';
 import Button from '../../button/Button.resolver.mjs';
 import '../../common/theme.mjs';
 import '../../common/direction.mjs';
 import '../../common/propsValues/control.mjs';
-import { Breakpoint } from '../../common/propsValues/breakpoint.mjs';
 import '../../common/propsValues/size.mjs';
 import { Typography } from '../../common/propsValues/typography.mjs';
 import '../../common/propsValues/width.mjs';
@@ -43,7 +43,7 @@ const ActionPrompt = ({
   'data-testid': testId,
   'aria-label': ariaLabel
 }) => {
-  const isMobile = !useScreenSize(Breakpoint.MEDIUM);
+  const isMobile = !useScreenSize(Breakpoint.SMALL);
   const mediaId = useId();
   const titleId = useId();
   const descId = useId();

package/build/prompt/ActionPrompt/ActionPrompt.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionPrompt.mjs","sources":["../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"sourcesContent":["import { AriaAttributes, ReactNode, useId } from 'react';\nimport { clsx } from 'clsx';\n\nimport Body from '../../body';\nimport Button from '../../button';\nimport { Breakpoint, Typography } from '../../common';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\nimport { renderPromptMedia, PromptMedia } from '../helpers/promptMedia';\n\nexport type ActionPromptProps = {\n  title: ReactNode;\n  description?: ReactNode;\n  /** @default {} */\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  'aria-label'?: AriaAttributes['aria-label'];\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'onDismiss'> & {\n    /**\n     * The sentiment determines the colour scheme\n     * @default 'neutral'\n     */\n    sentiment?: PrimitivePromptProps['sentiment'];\n  };\n\n/**\n * Use an action prompt for optional feedback that doesn't require immediate action, such as feature upsells, warnings, or suggestions. These prompts are typically used outside of core product flows (e.g., Launchpad, Recipient, or Transaction screens) and can be addressed at the user's convenience.\n *\n * If your message is about immediate user feedback (e.g., form submission errors, download failures, missing data warnings), use an [info prompt](https://storybook.wise.design/?path=/docs/prompts-infoprompt--docs) instead.\n *\n * Guidance can be found in the [design system](https://wise.design/components/action-prompt).\n */\nexport const ActionPrompt = ({\n  sentiment = 'neutral',\n  title,\n  description,\n  onDismiss,\n  media = {},\n  action,\n  actionSecondary,\n  id,\n  className,\n  'data-testid': testId,\n  'aria-label': ariaLabel,\n}: ActionPromptProps) => {\n  const isMobile = !useScreenSize(Breakpoint.MEDIUM);\n\n  const mediaId = useId();\n  const titleId = useId();\n  const descId = useId();\n\n  const ariaLabelledByIds = [\n    media['aria-hidden'] ? undefined : mediaId,\n    ariaLabel ? undefined : titleId,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const renderMedia = () =>\n    renderPromptMedia({\n      media,\n      sentiment,\n      mediaId,\n      imgClassName: 'wds-action-prompt--media-image',\n    });\n\n  return (\n    <PrimitivePrompt\n      id={id}\n      sentiment={sentiment}\n      data-testid={testId}\n      className={clsx(\n        'wds-action-prompt',\n        { 'wds-action-prompt--with-two-actions': !!actionSecondary },\n        className,\n      )}\n      media={renderMedia()}\n      actions={\n        <>\n          {actionSecondary && (\n            // @ts-expect-error onClick type mismatch\n            <Button\n              v2\n              size=\"md\"\n              priority=\"secondary\"\n              href={actionSecondary.href}\n              block={isMobile}\n              onClick={actionSecondary?.onClick}\n            >\n              {actionSecondary.label}\n            </Button>\n          )}\n          {/* @ts-expect-error onClick type mismatch */}\n          <Button\n            v2\n            size=\"md\"\n            priority=\"primary\"\n            href={action.href}\n            block={isMobile}\n            onClick={action.onClick}\n          >\n            {action.label}\n          </Button>\n        </>\n      }\n      role=\"region\"\n      onDismiss={onDismiss}\n      {...(ariaLabel\n        ? { 'aria-label': ariaLabel }\n        : {\n            'aria-labelledby': ariaLabelledByIds,\n            'aria-describedby': descId,\n          })}\n    >\n      <div className={clsx('d-flex', 'flex-column', 'justify-content-center')}>\n        <Body id={titleId} type={Typography.BODY_LARGE_BOLD} className=\"wds-action-prompt__content\">\n          {title}\n        </Body>\n        {description && (\n          <Body id={descId} className=\"wds-action-prompt__content\">\n            {description}\n          </Body>\n        )}\n      </div>\n    </PrimitivePrompt>\n  );\n};\n\nexport default ActionPrompt;\n"],"names":["ActionPrompt","sentiment","title","description","onDismiss","media","action","actionSecondary","id","className","testId","ariaLabel","isMobile","useScreenSize","Breakpoint","MEDIUM","mediaId","useId","titleId","descId","ariaLabelledByIds","undefined","filter","Boolean","join","renderMedia","renderPromptMedia","imgClassName","_jsx","PrimitivePrompt","clsx","actions","_jsxs","_Fragment","children","Button","v2","size","priority","href","block","onClick","label","role","Body","type","Typography","BODY_LARGE_BOLD"],"mappings":"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"}
+{"version":3,"file":"ActionPrompt.mjs","sources":["../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"sourcesContent":["import { AriaAttributes, ReactNode, useId } from 'react';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\nimport { clsx } from 'clsx';\n\nimport Body from '../../body';\nimport Button from '../../button';\nimport { Typography } from '../../common';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\nimport { renderPromptMedia, PromptMedia } from '../helpers/promptMedia';\n\nexport type ActionPromptProps = {\n  title: ReactNode;\n  description?: ReactNode;\n  /** @default {} */\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  'aria-label'?: AriaAttributes['aria-label'];\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'onDismiss'> & {\n    /**\n     * The sentiment determines the colour scheme\n     * @default 'neutral'\n     */\n    sentiment?: PrimitivePromptProps['sentiment'];\n  };\n\n/**\n * Use an action prompt for optional feedback that doesn't require immediate action, such as feature upsells, warnings, or suggestions. These prompts are typically used outside of core product flows (e.g., Launchpad, Recipient, or Transaction screens) and can be addressed at the user's convenience.\n *\n * If your message is about immediate user feedback (e.g., form submission errors, download failures, missing data warnings), use an [info prompt](https://storybook.wise.design/?path=/docs/prompts-infoprompt--docs) instead.\n *\n * Guidance can be found in the [design system](https://wise.design/components/action-prompt).\n */\nexport const ActionPrompt = ({\n  sentiment = 'neutral',\n  title,\n  description,\n  onDismiss,\n  media = {},\n  action,\n  actionSecondary,\n  id,\n  className,\n  'data-testid': testId,\n  'aria-label': ariaLabel,\n}: ActionPromptProps) => {\n  const isMobile = !useScreenSize(Breakpoint.SMALL);\n\n  const mediaId = useId();\n  const titleId = useId();\n  const descId = useId();\n\n  const ariaLabelledByIds = [\n    media['aria-hidden'] ? undefined : mediaId,\n    ariaLabel ? undefined : titleId,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const renderMedia = () =>\n    renderPromptMedia({\n      media,\n      sentiment,\n      mediaId,\n      imgClassName: 'wds-action-prompt--media-image',\n    });\n\n  return (\n    <PrimitivePrompt\n      id={id}\n      sentiment={sentiment}\n      data-testid={testId}\n      className={clsx(\n        'wds-action-prompt',\n        { 'wds-action-prompt--with-two-actions': !!actionSecondary },\n        className,\n      )}\n      media={renderMedia()}\n      actions={\n        <>\n          {actionSecondary && (\n            // @ts-expect-error onClick type mismatch\n            <Button\n              v2\n              size=\"md\"\n              priority=\"secondary\"\n              href={actionSecondary.href}\n              block={isMobile}\n              onClick={actionSecondary?.onClick}\n            >\n              {actionSecondary.label}\n            </Button>\n          )}\n          {/* @ts-expect-error onClick type mismatch */}\n          <Button\n            v2\n            size=\"md\"\n            priority=\"primary\"\n            href={action.href}\n            block={isMobile}\n            onClick={action.onClick}\n          >\n            {action.label}\n          </Button>\n        </>\n      }\n      role=\"region\"\n      onDismiss={onDismiss}\n      {...(ariaLabel\n        ? { 'aria-label': ariaLabel }\n        : {\n            'aria-labelledby': ariaLabelledByIds,\n            'aria-describedby': descId,\n          })}\n    >\n      <div className={clsx('d-flex', 'flex-column', 'justify-content-center')}>\n        <Body id={titleId} type={Typography.BODY_LARGE_BOLD} className=\"wds-action-prompt__content\">\n          {title}\n        </Body>\n        {description && (\n          <Body id={descId} className=\"wds-action-prompt__content\">\n            {description}\n          </Body>\n        )}\n      </div>\n    </PrimitivePrompt>\n  );\n};\n\nexport default ActionPrompt;\n"],"names":["ActionPrompt","sentiment","title","description","onDismiss","media","action","actionSecondary","id","className","testId","ariaLabel","isMobile","useScreenSize","Breakpoint","SMALL","mediaId","useId","titleId","descId","ariaLabelledByIds","undefined","filter","Boolean","join","renderMedia","renderPromptMedia","imgClassName","_jsx","PrimitivePrompt","clsx","actions","_jsxs","_Fragment","children","Button","v2","size","priority","href","block","onClick","label","role","Body","type","Typography","BODY_LARGE_BOLD"],"mappings":"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"}

package/build/prompt/CriticalBanner/CriticalBanner.js

@@ -6,8 +6,8 @@ var Body = require('../../body/Body.js');
 var Button_resolver = require('../../button/Button.resolver.js');
 require('../../common/theme.js');
 require('../../common/direction.js');
+var neptuneTokens = require('@transferwise/neptune-tokens');
 require('../../common/propsValues/control.js');
-var breakpoint = require('../../common/propsValues/breakpoint.js');
 require('../../common/propsValues/size.js');
 var typography = require('../../common/propsValues/typography.js');
 require('../../common/propsValues/width.js');
@@ -48,7 +48,7 @@ const CriticalBanner = ({
   className,
   'data-testid': testId
 }) => {
-  const [containerRef, isDesktop] = useContainerSize.useContainerSize(breakpoint.Breakpoint.MEDIUM);
+  const [containerRef, isDesktop] = useContainerSize.useContainerSize(neptuneTokens.Breakpoint.MEDIUM);
   const isControlled = expandedProp !== undefined && onToggle !== undefined;
   const [internalExpanded, setInternalExpanded] = React.useState(true);
   const resolvedExpanded = isDesktop ? true : isControlled ? expandedProp : internalExpanded;