@transferwise/components 0.0.0-experimental-4c97d70 → 0.0.0-experimental-862fadc

package/src/styles/less/neptune.css

@@ -1,6 +1,6 @@
 /**
- * Do not edit directly
- * Generated on Wed, 07 Jan 2026 11:56:15 GMT
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 :root {
@@ -53,6 +53,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -142,8 +143,8 @@
 }
 
 /**
- * Do not edit directly
- * Generated on Wed, 07 Jan 2026 11:56:15 GMT
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-personal {
@@ -236,6 +237,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -391,8 +393,8 @@
 }
 
 /**
- * Do not edit directly
- * Generated on Wed, 07 Jan 2026 11:56:15 GMT
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-personal--forest-green {
@@ -485,6 +487,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -640,8 +643,8 @@
 }
 
 /**
- * Do not edit directly
- * Generated on Wed, 07 Jan 2026 11:56:15 GMT
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-personal--bright-green {
@@ -734,6 +737,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -889,8 +893,8 @@
 }
 
 /**
- * Do not edit directly
- * Generated on Wed, 07 Jan 2026 11:56:15 GMT
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-personal--dark {
@@ -983,6 +987,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1138,8 +1143,8 @@
 }
 
 /**
- * Do not edit directly
- * Generated on Wed, 07 Jan 2026 11:56:15 GMT
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-platform {
@@ -1232,6 +1237,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1321,8 +1327,8 @@
 }
 
 /**
- * Do not edit directly
- * Generated on Wed, 07 Jan 2026 11:56:15 GMT
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-platform--forest-green {
@@ -1415,6 +1421,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1504,8 +1511,8 @@
 }
 
 /**
- * Do not edit directly
- * Generated on Wed, 07 Jan 2026 11:56:15 GMT
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-business {
@@ -1599,6 +1606,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1688,8 +1696,8 @@
 }
 
 /**
- * Do not edit directly
- * Generated on Wed, 07 Jan 2026 11:56:15 GMT
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-business--dark {
@@ -1783,6 +1791,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1872,8 +1881,8 @@
 }
 
 /**
- * Do not edit directly
- * Generated on Wed, 07 Jan 2026 11:56:15 GMT
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 
 .np-theme-business--forest-green {
@@ -1967,6 +1976,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -2056,8 +2066,8 @@
 }
 
 /**
- * Do not edit directly
- * Generated on Wed, 07 Jan 2026 11:56:15 GMT
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Fri, 10 Apr 2026 14:46:01 GMT
  */
 
 .np-theme-business--bright-green {
@@ -2151,6 +2161,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;

package/src/tooltip/Tooltip.tsx

@@ -1,17 +1,22 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
+import {
+  arrow as arrowMiddleware,
+  autoUpdate,
+  flip,
+  offset,
+  useFloating,
+} from '@floating-ui/react';
 import { clsx } from 'clsx';
 import {
   AriaAttributes,
+  CSSProperties,
   PropsWithChildren,
   ReactElement,
   ReactNode,
   cloneElement,
-  useEffect,
   useId,
   useRef,
   useState,
 } from 'react';
-import { usePopper } from 'react-popper';
 
 import { CommonProps, Position } from '../common';
 import {
@@ -36,48 +41,30 @@ const Tooltip = ({
   className,
 }: TooltipProps) => {
   const [open, setOpen] = useState(false);
-  const anchorReference = useRef(null);
-  const [arrowElement, setArrowElement] = useState(null);
-  const [popperElement, setPopperElement] = useState(null);
+  const arrowRef = useRef<HTMLDivElement | null>(null);
 
   const fallbackId = useId();
   const tooltipId = id ?? fallbackId;
-  const modifiers = [];
-
-  modifiers.push({
-    name: 'arrow',
-    options: {
-      element: arrowElement,
-      options: {
-        padding: 8, // 8px from the edges of the popper
-      },
-    },
-  });
-  // This lets you displace a popper element from its reference element.
-  modifiers.push({ name: 'offset', options: { offset: [0, 16] } });
-  modifiers.push({
-    name: 'flip',
-    options: {
-      fallbackPlacements: Position.TOP,
-    },
-  });
 
-  const { styles, attributes, forceUpdate } = usePopper(anchorReference.current, popperElement, {
+  const { refs, floatingStyles, placement, middlewareData } = useFloating({
     placement: position,
-    modifiers,
+    middleware: [
+      offset(16),
+      flip({ fallbackPlacements: [Position.TOP] }),
+      arrowMiddleware({ element: arrowRef, padding: 8 }),
+    ],
+    whileElementsMounted: open ? autoUpdate : undefined,
+    open,
   });
 
-  // If the trigger is not visible when the position is calculated, it will be incorrect. Because this can happen repeatedly (on resize for example),
-  // it is most simple just to always position before opening
-  useEffect(() => {
-    if (open && forceUpdate) {
-      forceUpdate();
-    }
-  }, [open]);
+  const arrowStyle: CSSProperties = {
+    ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),
+    ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),
+  };
 
   return (
     <span
-      ref={anchorReference}
+      ref={refs.setReference}
       className="tw-tooltip-container"
       onMouseOver={() => setOpen(true)}
       onFocus={() => setOpen(true)}
@@ -90,28 +77,22 @@ const Tooltip = ({
           })
         : null}
       <div
-        // @ts-expect-error
-        ref={setPopperElement}
+        ref={refs.setFloating}
         className={clsx(
           'np-tooltip',
           'np-panel',
           open ? `np-panel--open np-tooltip--open` : null,
           className,
         )}
-        style={{ ...styles.popper }}
-        {...attributes.popper}
+        style={floatingStyles}
+        data-popper-placement={placement}
         aria-hidden={!open}
         role="tooltip"
         id={`${tooltipId}-tooltip`}
       >
         <div className="np-panel__content tooltip-inner">
           {label}
-          <div
-            // @ts-expect-error
-            ref={setArrowElement}
-            className={clsx('np-panel__arrow')}
-            style={styles.arrow}
-          />
+          <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />
         </div>
       </div>
     </span>

package/build/prompt/CriticalBanner/CriticalBanner.js

@@ -1,143 +0,0 @@
-'use strict';
-
-var React = require('react');
-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');
-require('../../common/propsValues/type.js');
-require('../../common/propsValues/dateMode.js');
-require('../../common/propsValues/monthFormat.js');
-require('../../common/propsValues/position.js');
-require('../../common/propsValues/layouts.js');
-require('../../common/propsValues/status.js');
-require('../../common/propsValues/sentiment.js');
-require('../../common/propsValues/profileType.js');
-require('../../common/propsValues/variant.js');
-require('../../common/propsValues/scroll.js');
-require('../../common/propsValues/markdownNodeType.js');
-require('../../common/fileType.js');
-require('@transferwise/icons');
-require('react-intl');
-require('../../common/closeButton/CloseButton.messages.js');
-var jsxRuntime = require('react/jsx-runtime');
-var LiveRegion = require('../../common/liveRegion/LiveRegion.js');
-var PrimitivePrompt = require('../PrimitivePrompt/PrimitivePrompt.js');
-var useScreenSize = require('../../common/hooks/useScreenSize.js');
-var promptMedia = require('../helpers/promptMedia.js');
-var Expander = require('../common/Expander/Expander.js');
-var helpers = require('./helpers.js');
-
-const CriticalBanner = ({
-  sentiment = 'negative',
-  title,
-  description,
-  media = {},
-  action,
-  actionSecondary,
-  expanded = true,
-  onToggle,
-  id,
-  className,
-  'data-testid': testId
-}) => {
-  const isMobile = !useScreenSize.useScreenSize(breakpoint.Breakpoint.EXTRA_SMALL);
-  const resolvedExpanded = !isMobile || expanded;
-  const hasActions = action ?? actionSecondary;
-  const mediaId = React.useId();
-  const titleId = React.useId();
-  const descId = React.useId();
-  const ariaLabelledByIds = [media['aria-hidden'] ? undefined : mediaId, !title ? undefined : titleId].filter(Boolean).join(' ');
-  return /*#__PURE__*/jsxRuntime.jsx(LiveRegion.LiveRegion, {
-    "aria-live": "assertive",
-    announceOnChange: helpers.buildAnnouncementString({
-      title,
-      description,
-      expanded: resolvedExpanded,
-      actionLabel: action?.label,
-      actionSecondaryLabel: actionSecondary?.label
-    }),
-    children: /*#__PURE__*/jsxRuntime.jsxs(PrimitivePrompt.PrimitivePrompt, {
-      id: id,
-      sentiment: sentiment,
-      emphasis: sentiment === 'neutral' ? 'base' : 'elevated',
-      "data-testid": testId,
-      className: clsx.clsx('wds-critical-banner', {
-        'wds-critical-banner__mobile--collapsed': !resolvedExpanded,
-        'wds-critical-banner--with-two-actions': !!actionSecondary
-      }, className),
-      media: promptMedia.renderPromptMedia({
-        media,
-        sentiment,
-        mediaId,
-        imgClassName: 'wds-critical-banner--media-image'
-      }),
-      actions: Expander.shouldShowWhenExpanded({
-        expanded: resolvedExpanded,
-        hasContent: !!hasActions
-      }) ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [actionSecondary &&
-        /*#__PURE__*/
-        // @ts-expect-error onClick type mismatch
-        jsxRuntime.jsx(Button_resolver.default, {
-          v2: true,
-          size: "md",
-          priority: "secondary",
-          href: actionSecondary.href,
-          block: isMobile,
-          onClick: actionSecondary?.onClick,
-          children: actionSecondary.label
-        }), action &&
-        /*#__PURE__*/
-        // @ts-expect-error onClick type mismatch
-        jsxRuntime.jsx(Button_resolver.default, {
-          v2: true,
-          size: "md",
-          priority: "primary",
-          href: action.href,
-          block: isMobile,
-          onClick: action.onClick,
-          children: action.label
-        })]
-      }) : undefined,
-      role: "region",
-      "aria-labelledby": ariaLabelledByIds,
-      "aria-describedby": descId,
-      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: clsx.clsx('d-flex', 'flex-column', 'justify-content-center', 'wds-critical-banner__text-wrapper'),
-        children: [title && /*#__PURE__*/jsxRuntime.jsx(Body.default, {
-          id: titleId,
-          type: typography.Typography.BODY_LARGE_BOLD,
-          className: clsx.clsx('wds-critical-banner__content', {
-            'wds-critical-banner__title--collapsed': !resolvedExpanded
-          }),
-          children: title
-        }), Expander.shouldShowWhenExpanded({
-          expanded: resolvedExpanded,
-          hasContent: !!description,
-          alwaysShow: !title
-        }) && /*#__PURE__*/jsxRuntime.jsx(Body.default, {
-          id: descId,
-          className: clsx.clsx('wds-critical-banner__content', {
-            'wds-critical-banner__description--collapsed': !resolvedExpanded && !title
-          }),
-          children: description
-        })]
-      }), isMobile && /*#__PURE__*/jsxRuntime.jsx(Expander.ExpanderToggle, {
-        expanded: expanded,
-        size: 24,
-        className: "wds-critical-banner__toggle",
-        onToggle: onToggle
-      })]
-    })
-  });
-};
-
-exports.CriticalBanner = CriticalBanner;
-//# sourceMappingURL=CriticalBanner.js.map

package/build/prompt/CriticalBanner/CriticalBanner.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CriticalBanner.js","sources":["../../../src/prompt/CriticalBanner/CriticalBanner.tsx"],"sourcesContent":["import { ReactNode, useId } from 'react';\nimport { clsx } from 'clsx';\n\nimport Body from '../../body';\nimport Button from '../../button';\nimport { Breakpoint, LiveRegion, Typography } from '../../common';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\n\nimport { renderPromptMedia, PromptMedia } from '../helpers/promptMedia';\nimport { shouldShowWhenExpanded, ExpanderToggle } from '../common/Expander/Expander';\nimport { buildAnnouncementString } from './helpers';\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.\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  expanded?: boolean;\n  /** Called when the user clicks the chevron toggle. */\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://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 = true,\n  onToggle,\n  id,\n  className,\n  'data-testid': testId,\n}: CriticalBannerProps) => {\n  const isMobile = !useScreenSize(Breakpoint.EXTRA_SMALL);\n  const resolvedExpanded = !isMobile || expanded;\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  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      <PrimitivePrompt\n        id={id}\n        sentiment={sentiment}\n        emphasis={sentiment === 'neutral' ? 'base' : 'elevated'}\n        data-testid={testId}\n        className={clsx(\n          'wds-critical-banner',\n          {\n            'wds-critical-banner__mobile--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          shouldShowWhenExpanded({ expanded: resolvedExpanded, hasContent: !!hasActions }) ? (\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              {action && (\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          ) : undefined\n        }\n        role=\"region\"\n        aria-labelledby={ariaLabelledByIds}\n        aria-describedby={descId}\n      >\n        <div\n          className={clsx(\n            'd-flex',\n            'flex-column',\n            'justify-content-center',\n            'wds-critical-banner__text-wrapper',\n          )}\n        >\n          {title && (\n            <Body\n              id={titleId}\n              type={Typography.BODY_LARGE_BOLD}\n              className={clsx('wds-critical-banner__content', {\n                'wds-critical-banner__title--collapsed': !resolvedExpanded,\n              })}\n            >\n              {title}\n            </Body>\n          )}\n          {shouldShowWhenExpanded({\n            expanded: resolvedExpanded,\n            hasContent: !!description,\n            alwaysShow: !title,\n          }) && (\n            <Body\n              id={descId}\n              className={clsx('wds-critical-banner__content', {\n                'wds-critical-banner__description--collapsed': !resolvedExpanded && !title,\n              })}\n            >\n              {description}\n            </Body>\n          )}\n        </div>\n        {isMobile && (\n          <ExpanderToggle\n            expanded={expanded}\n            size={24}\n            className=\"wds-critical-banner__toggle\"\n            onToggle={onToggle}\n          />\n        )}\n      </PrimitivePrompt>\n    </LiveRegion>\n  );\n};\n\nexport default CriticalBanner;\n"],"names":["CriticalBanner","sentiment","title","description","media","action","actionSecondary","expanded","onToggle","id","className","testId","isMobile","useScreenSize","Breakpoint","EXTRA_SMALL","resolvedExpanded","hasActions","mediaId","useId","titleId","descId","ariaLabelledByIds","undefined","filter","Boolean","join","_jsx","LiveRegion","announceOnChange","buildAnnouncementString","actionLabel","label","actionSecondaryLabel","children","_jsxs","PrimitivePrompt","emphasis","clsx","renderPromptMedia","imgClassName","actions","shouldShowWhenExpanded","hasContent","_Fragment","Button","v2","size","priority","href","block","onClick","role","Body","type","Typography","BODY_LARGE_BOLD","alwaysShow","ExpanderToggle"],"mappings":"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"}

package/build/prompt/CriticalBanner/CriticalBanner.mjs

@@ -1,141 +0,0 @@
-import { useId } from 'react';
-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';
-import '../../common/propsValues/type.mjs';
-import '../../common/propsValues/dateMode.mjs';
-import '../../common/propsValues/monthFormat.mjs';
-import '../../common/propsValues/position.mjs';
-import '../../common/propsValues/layouts.mjs';
-import '../../common/propsValues/status.mjs';
-import '../../common/propsValues/sentiment.mjs';
-import '../../common/propsValues/profileType.mjs';
-import '../../common/propsValues/variant.mjs';
-import '../../common/propsValues/scroll.mjs';
-import '../../common/propsValues/markdownNodeType.mjs';
-import '../../common/fileType.mjs';
-import '@transferwise/icons';
-import 'react-intl';
-import '../../common/closeButton/CloseButton.messages.mjs';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { LiveRegion } from '../../common/liveRegion/LiveRegion.mjs';
-import { PrimitivePrompt } from '../PrimitivePrompt/PrimitivePrompt.mjs';
-import { useScreenSize } from '../../common/hooks/useScreenSize.mjs';
-import { renderPromptMedia } from '../helpers/promptMedia.mjs';
-import { shouldShowWhenExpanded, ExpanderToggle } from '../common/Expander/Expander.mjs';
-import { buildAnnouncementString } from './helpers.mjs';
-
-const CriticalBanner = ({
-  sentiment = 'negative',
-  title,
-  description,
-  media = {},
-  action,
-  actionSecondary,
-  expanded = true,
-  onToggle,
-  id,
-  className,
-  'data-testid': testId
-}) => {
-  const isMobile = !useScreenSize(Breakpoint.EXTRA_SMALL);
-  const resolvedExpanded = !isMobile || expanded;
-  const hasActions = action ?? actionSecondary;
-  const mediaId = useId();
-  const titleId = useId();
-  const descId = useId();
-  const ariaLabelledByIds = [media['aria-hidden'] ? undefined : mediaId, !title ? undefined : titleId].filter(Boolean).join(' ');
-  return /*#__PURE__*/jsx(LiveRegion, {
-    "aria-live": "assertive",
-    announceOnChange: buildAnnouncementString({
-      title,
-      description,
-      expanded: resolvedExpanded,
-      actionLabel: action?.label,
-      actionSecondaryLabel: actionSecondary?.label
-    }),
-    children: /*#__PURE__*/jsxs(PrimitivePrompt, {
-      id: id,
-      sentiment: sentiment,
-      emphasis: sentiment === 'neutral' ? 'base' : 'elevated',
-      "data-testid": testId,
-      className: clsx('wds-critical-banner', {
-        'wds-critical-banner__mobile--collapsed': !resolvedExpanded,
-        'wds-critical-banner--with-two-actions': !!actionSecondary
-      }, className),
-      media: renderPromptMedia({
-        media,
-        sentiment,
-        mediaId,
-        imgClassName: 'wds-critical-banner--media-image'
-      }),
-      actions: shouldShowWhenExpanded({
-        expanded: resolvedExpanded,
-        hasContent: !!hasActions
-      }) ? /*#__PURE__*/jsxs(Fragment, {
-        children: [actionSecondary &&
-        /*#__PURE__*/
-        // @ts-expect-error onClick type mismatch
-        jsx(Button, {
-          v2: true,
-          size: "md",
-          priority: "secondary",
-          href: actionSecondary.href,
-          block: isMobile,
-          onClick: actionSecondary?.onClick,
-          children: actionSecondary.label
-        }), action &&
-        /*#__PURE__*/
-        // @ts-expect-error onClick type mismatch
-        jsx(Button, {
-          v2: true,
-          size: "md",
-          priority: "primary",
-          href: action.href,
-          block: isMobile,
-          onClick: action.onClick,
-          children: action.label
-        })]
-      }) : undefined,
-      role: "region",
-      "aria-labelledby": ariaLabelledByIds,
-      "aria-describedby": descId,
-      children: [/*#__PURE__*/jsxs("div", {
-        className: clsx('d-flex', 'flex-column', 'justify-content-center', 'wds-critical-banner__text-wrapper'),
-        children: [title && /*#__PURE__*/jsx(Body, {
-          id: titleId,
-          type: Typography.BODY_LARGE_BOLD,
-          className: clsx('wds-critical-banner__content', {
-            'wds-critical-banner__title--collapsed': !resolvedExpanded
-          }),
-          children: title
-        }), shouldShowWhenExpanded({
-          expanded: resolvedExpanded,
-          hasContent: !!description,
-          alwaysShow: !title
-        }) && /*#__PURE__*/jsx(Body, {
-          id: descId,
-          className: clsx('wds-critical-banner__content', {
-            'wds-critical-banner__description--collapsed': !resolvedExpanded && !title
-          }),
-          children: description
-        })]
-      }), isMobile && /*#__PURE__*/jsx(ExpanderToggle, {
-        expanded: expanded,
-        size: 24,
-        className: "wds-critical-banner__toggle",
-        onToggle: onToggle
-      })]
-    })
-  });
-};
-
-export { CriticalBanner };
-//# sourceMappingURL=CriticalBanner.mjs.map

package/build/prompt/CriticalBanner/CriticalBanner.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"CriticalBanner.mjs","sources":["../../../src/prompt/CriticalBanner/CriticalBanner.tsx"],"sourcesContent":["import { ReactNode, useId } from 'react';\nimport { clsx } from 'clsx';\n\nimport Body from '../../body';\nimport Button from '../../button';\nimport { Breakpoint, LiveRegion, Typography } from '../../common';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\n\nimport { renderPromptMedia, PromptMedia } from '../helpers/promptMedia';\nimport { shouldShowWhenExpanded, ExpanderToggle } from '../common/Expander/Expander';\nimport { buildAnnouncementString } from './helpers';\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.\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  expanded?: boolean;\n  /** Called when the user clicks the chevron toggle. */\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://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 = true,\n  onToggle,\n  id,\n  className,\n  'data-testid': testId,\n}: CriticalBannerProps) => {\n  const isMobile = !useScreenSize(Breakpoint.EXTRA_SMALL);\n  const resolvedExpanded = !isMobile || expanded;\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  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      <PrimitivePrompt\n        id={id}\n        sentiment={sentiment}\n        emphasis={sentiment === 'neutral' ? 'base' : 'elevated'}\n        data-testid={testId}\n        className={clsx(\n          'wds-critical-banner',\n          {\n            'wds-critical-banner__mobile--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          shouldShowWhenExpanded({ expanded: resolvedExpanded, hasContent: !!hasActions }) ? (\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              {action && (\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          ) : undefined\n        }\n        role=\"region\"\n        aria-labelledby={ariaLabelledByIds}\n        aria-describedby={descId}\n      >\n        <div\n          className={clsx(\n            'd-flex',\n            'flex-column',\n            'justify-content-center',\n            'wds-critical-banner__text-wrapper',\n          )}\n        >\n          {title && (\n            <Body\n              id={titleId}\n              type={Typography.BODY_LARGE_BOLD}\n              className={clsx('wds-critical-banner__content', {\n                'wds-critical-banner__title--collapsed': !resolvedExpanded,\n              })}\n            >\n              {title}\n            </Body>\n          )}\n          {shouldShowWhenExpanded({\n            expanded: resolvedExpanded,\n            hasContent: !!description,\n            alwaysShow: !title,\n          }) && (\n            <Body\n              id={descId}\n              className={clsx('wds-critical-banner__content', {\n                'wds-critical-banner__description--collapsed': !resolvedExpanded && !title,\n              })}\n            >\n              {description}\n            </Body>\n          )}\n        </div>\n        {isMobile && (\n          <ExpanderToggle\n            expanded={expanded}\n            size={24}\n            className=\"wds-critical-banner__toggle\"\n            onToggle={onToggle}\n          />\n        )}\n      </PrimitivePrompt>\n    </LiveRegion>\n  );\n};\n\nexport default CriticalBanner;\n"],"names":["CriticalBanner","sentiment","title","description","media","action","actionSecondary","expanded","onToggle","id","className","testId","isMobile","useScreenSize","Breakpoint","EXTRA_SMALL","resolvedExpanded","hasActions","mediaId","useId","titleId","descId","ariaLabelledByIds","undefined","filter","Boolean","join","_jsx","LiveRegion","announceOnChange","buildAnnouncementString","actionLabel","label","actionSecondaryLabel","children","_jsxs","PrimitivePrompt","emphasis","clsx","renderPromptMedia","imgClassName","actions","shouldShowWhenExpanded","hasContent","_Fragment","Button","v2","size","priority","href","block","onClick","role","Body","type","Typography","BODY_LARGE_BOLD","alwaysShow","ExpanderToggle"],"mappings":"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"}