@transferwise/components 46.147.0 → 46.148.0

package/build/main.css

@@ -31935,6 +31935,7 @@ html:not([dir="rtl"]) .np-navigation-option {
   --Prompt-gap: var(--size-10) var(--size-16);
   --Prompt-border-radius: 0;
   container-type: inline-size;
+  position: relative;
   --critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
   --critical-banner-duration: 150ms;
   /* Override PrimitivePrompt's --screen-sm-max actions behaviour:
@@ -32075,6 +32076,53 @@ html:not([dir="rtl"]) .np-navigation-option {
   }
 }
 
+.wds-critical-banner-overhang-query {
+  container-name: critical-banner-overhang;
+  container-type: inline-size;
+  inline-size: 100%;
+}
+
+.wds-critical-banner__entry-mask {
+  display: grid;
+  grid-template-rows: 0fr;
+  overflow: hidden;
+  animation: wds-critical-banner-reveal-height 400ms cubic-bezier(0.3, 0, 0.1, 1) 500ms both;
+}
+
+@container critical-banner-overhang (max-width: 600px) {
+  .wds-critical-banner__entry-mask {
+    --critical-banner-mobile-overhang-size: 32px;
+  }
+  .wds-critical-banner__entry-mask .wds-critical-banner-overhang {
+    margin-bottom: var(--critical-banner-mobile-overhang-size);
+  }
+  .wds-critical-banner__entry-mask .wds-critical-banner-overhang::after {
+    content: "";
+    position: absolute;
+    right: 0;
+    bottom: calc(-1 * var(--critical-banner-mobile-overhang-size));
+    left: 0;
+    height: var(--critical-banner-mobile-overhang-size);
+    pointer-events: none;
+    background: radial-gradient(circle at 100% 100%, transparent var(--critical-banner-mobile-overhang-size), var(--color-sentiment-background-surface) var(--critical-banner-mobile-overhang-size)) 0 0 / var(--critical-banner-mobile-overhang-size) var(--critical-banner-mobile-overhang-size) no-repeat, radial-gradient(circle at 0% 100%, transparent var(--critical-banner-mobile-overhang-size), var(--color-sentiment-background-surface) var(--critical-banner-mobile-overhang-size)) 100% 0 / var(--critical-banner-mobile-overhang-size) var(--critical-banner-mobile-overhang-size) no-repeat;
+  }
+}
+
+.wds-critical-banner__entry-track {
+  min-height: 0;
+}
+
+@keyframes wds-critical-banner-reveal-height {
+  from {
+    grid-template-rows: 0fr;
+    overflow: hidden;
+  }
+  to {
+    grid-template-rows: 1fr;
+    overflow: visible;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .wds-critical-banner__description,
   .wds-critical-banner__title,
@@ -32082,6 +32130,11 @@ html:not([dir="rtl"]) .np-navigation-option {
   .wds-critical-banner__toggle {
     transition: none !important;
   }
+  .wds-critical-banner__entry-mask {
+    animation: none;
+    grid-template-rows: 1fr;
+    overflow: visible;
+  }
 }
 
 .wds-expander-toggle {

package/build/prompt/CriticalBanner/CriticalBanner.js

@@ -58,6 +58,75 @@ const CriticalBanner = ({
   const titleId = React.useId();
   const descId = React.useId();
   const ariaLabelledByIds = [media['aria-hidden'] ? undefined : mediaId, !title ? undefined : titleId].filter(Boolean).join(' ');
+  const bannerSurface = /*#__PURE__*/jsxRuntime.jsxs(PrimitivePrompt.PrimitivePrompt, {
+    ref: containerRef,
+    id: id,
+    sentiment: sentiment,
+    emphasis: sentiment === 'neutral' ? 'base' : 'elevated',
+    "data-testid": testId,
+    className: clsx.clsx('wds-critical-banner', 'wds-critical-banner-overhang', {
+      'wds-critical-banner--collapsed': !resolvedExpanded,
+      'wds-critical-banner--with-two-actions': !!actionSecondary
+    }, className),
+    media: promptMedia.renderPromptMedia({
+      media,
+      sentiment,
+      mediaId,
+      imgClassName: 'wds-critical-banner--media-image'
+    }),
+    actions: hasActions ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+      "aria-hidden": !resolvedExpanded ? true : undefined,
+      style: {
+        display: 'contents'
+      },
+      children: [actionSecondary &&
+      /*#__PURE__*/
+      // @ts-expect-error onClick type mismatch
+      jsxRuntime.jsx(Button_resolver.default, {
+        v2: true,
+        size: "md",
+        priority: "secondary",
+        href: actionSecondary.href,
+        tabIndex: resolvedExpanded ? undefined : -1,
+        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,
+        tabIndex: resolvedExpanded ? undefined : -1,
+        onClick: action.onClick,
+        children: action.label
+      })]
+    }) : undefined,
+    role: "region",
+    "aria-labelledby": ariaLabelledByIds || undefined,
+    "aria-describedby": description ? descId : undefined,
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "wds-critical-banner__text-wrapper",
+      children: [title && /*#__PURE__*/jsxRuntime.jsx(Body.default, {
+        id: titleId,
+        type: typography.Typography.BODY_LARGE_BOLD,
+        className: "wds-critical-banner__content wds-critical-banner__title",
+        children: title
+      }), description && /*#__PURE__*/jsxRuntime.jsx(Body.default, {
+        id: descId,
+        className: clsx.clsx('wds-critical-banner__content', 'wds-critical-banner__description', {
+          'wds-critical-banner__description--with-title': !!title
+        }),
+        children: description
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(Expander.ExpanderToggle, {
+      expanded: resolvedExpanded,
+      size: 24,
+      className: "wds-critical-banner__toggle",
+      onToggle: handleToggle
+    })]
+  });
   return /*#__PURE__*/jsxRuntime.jsx(LiveRegion.LiveRegion, {
     "aria-live": "assertive",
     announceOnChange: helpers.buildAnnouncementString({
@@ -67,74 +136,15 @@ const CriticalBanner = ({
       actionLabel: action?.label,
       actionSecondaryLabel: actionSecondary?.label
     }),
-    children: /*#__PURE__*/jsxRuntime.jsxs(PrimitivePrompt.PrimitivePrompt, {
-      ref: containerRef,
-      id: id,
-      sentiment: sentiment,
-      emphasis: sentiment === 'neutral' ? 'base' : 'elevated',
-      "data-testid": testId,
-      className: clsx.clsx('wds-critical-banner', {
-        'wds-critical-banner--collapsed': !resolvedExpanded,
-        'wds-critical-banner--with-two-actions': !!actionSecondary
-      }, className),
-      media: promptMedia.renderPromptMedia({
-        media,
-        sentiment,
-        mediaId,
-        imgClassName: 'wds-critical-banner--media-image'
-      }),
-      actions: hasActions ? /*#__PURE__*/jsxRuntime.jsxs("div", {
-        "aria-hidden": !resolvedExpanded ? true : undefined,
-        style: {
-          display: 'contents'
-        },
-        children: [actionSecondary &&
-        /*#__PURE__*/
-        // @ts-expect-error onClick type mismatch
-        jsxRuntime.jsx(Button_resolver.default, {
-          v2: true,
-          size: "md",
-          priority: "secondary",
-          href: actionSecondary.href,
-          tabIndex: resolvedExpanded ? undefined : -1,
-          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,
-          tabIndex: resolvedExpanded ? undefined : -1,
-          onClick: action.onClick,
-          children: action.label
-        })]
-      }) : undefined,
-      role: "region",
-      "aria-labelledby": ariaLabelledByIds || undefined,
-      "aria-describedby": description ? descId : undefined,
-      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "wds-critical-banner__text-wrapper",
-        children: [title && /*#__PURE__*/jsxRuntime.jsx(Body.default, {
-          id: titleId,
-          type: typography.Typography.BODY_LARGE_BOLD,
-          className: "wds-critical-banner__content wds-critical-banner__title",
-          children: title
-        }), description && /*#__PURE__*/jsxRuntime.jsx(Body.default, {
-          id: descId,
-          className: clsx.clsx('wds-critical-banner__content', 'wds-critical-banner__description', {
-            'wds-critical-banner__description--with-title': !!title
-          }),
-          children: description
-        })]
-      }), /*#__PURE__*/jsxRuntime.jsx(Expander.ExpanderToggle, {
-        expanded: resolvedExpanded,
-        size: 24,
-        className: "wds-critical-banner__toggle",
-        onToggle: handleToggle
-      })]
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "wds-critical-banner-overhang-query",
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "wds-critical-banner__entry-mask",
+        children: /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "wds-critical-banner__entry-track",
+          children: bannerSurface
+        })
+      })
     })
   });
 };

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

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

package/build/prompt/CriticalBanner/CriticalBanner.mjs

@@ -25,7 +25,7 @@ import '@transferwise/formatting';
 import '@transferwise/icons';
 import 'react-intl';
 import '../../common/closeButton/CloseButton.messages.mjs';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { LiveRegion } from '../../common/liveRegion/LiveRegion.mjs';
 import { PrimitivePrompt } from '../PrimitivePrompt/PrimitivePrompt.mjs';
 import { renderPromptMedia } from '../helpers/promptMedia.mjs';
@@ -56,6 +56,75 @@ const CriticalBanner = ({
   const titleId = useId();
   const descId = useId();
   const ariaLabelledByIds = [media['aria-hidden'] ? undefined : mediaId, !title ? undefined : titleId].filter(Boolean).join(' ');
+  const bannerSurface = /*#__PURE__*/jsxs(PrimitivePrompt, {
+    ref: containerRef,
+    id: id,
+    sentiment: sentiment,
+    emphasis: sentiment === 'neutral' ? 'base' : 'elevated',
+    "data-testid": testId,
+    className: clsx('wds-critical-banner', 'wds-critical-banner-overhang', {
+      'wds-critical-banner--collapsed': !resolvedExpanded,
+      'wds-critical-banner--with-two-actions': !!actionSecondary
+    }, className),
+    media: renderPromptMedia({
+      media,
+      sentiment,
+      mediaId,
+      imgClassName: 'wds-critical-banner--media-image'
+    }),
+    actions: hasActions ? /*#__PURE__*/jsxs("div", {
+      "aria-hidden": !resolvedExpanded ? true : undefined,
+      style: {
+        display: 'contents'
+      },
+      children: [actionSecondary &&
+      /*#__PURE__*/
+      // @ts-expect-error onClick type mismatch
+      jsx(Button, {
+        v2: true,
+        size: "md",
+        priority: "secondary",
+        href: actionSecondary.href,
+        tabIndex: resolvedExpanded ? undefined : -1,
+        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,
+        tabIndex: resolvedExpanded ? undefined : -1,
+        onClick: action.onClick,
+        children: action.label
+      })]
+    }) : undefined,
+    role: "region",
+    "aria-labelledby": ariaLabelledByIds || undefined,
+    "aria-describedby": description ? descId : undefined,
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "wds-critical-banner__text-wrapper",
+      children: [title && /*#__PURE__*/jsx(Body, {
+        id: titleId,
+        type: Typography.BODY_LARGE_BOLD,
+        className: "wds-critical-banner__content wds-critical-banner__title",
+        children: title
+      }), description && /*#__PURE__*/jsx(Body, {
+        id: descId,
+        className: clsx('wds-critical-banner__content', 'wds-critical-banner__description', {
+          'wds-critical-banner__description--with-title': !!title
+        }),
+        children: description
+      })]
+    }), /*#__PURE__*/jsx(ExpanderToggle, {
+      expanded: resolvedExpanded,
+      size: 24,
+      className: "wds-critical-banner__toggle",
+      onToggle: handleToggle
+    })]
+  });
   return /*#__PURE__*/jsx(LiveRegion, {
     "aria-live": "assertive",
     announceOnChange: buildAnnouncementString({
@@ -65,74 +134,15 @@ const CriticalBanner = ({
       actionLabel: action?.label,
       actionSecondaryLabel: actionSecondary?.label
     }),
-    children: /*#__PURE__*/jsxs(PrimitivePrompt, {
-      ref: containerRef,
-      id: id,
-      sentiment: sentiment,
-      emphasis: sentiment === 'neutral' ? 'base' : 'elevated',
-      "data-testid": testId,
-      className: clsx('wds-critical-banner', {
-        'wds-critical-banner--collapsed': !resolvedExpanded,
-        'wds-critical-banner--with-two-actions': !!actionSecondary
-      }, className),
-      media: renderPromptMedia({
-        media,
-        sentiment,
-        mediaId,
-        imgClassName: 'wds-critical-banner--media-image'
-      }),
-      actions: hasActions ? /*#__PURE__*/jsxs("div", {
-        "aria-hidden": !resolvedExpanded ? true : undefined,
-        style: {
-          display: 'contents'
-        },
-        children: [actionSecondary &&
-        /*#__PURE__*/
-        // @ts-expect-error onClick type mismatch
-        jsx(Button, {
-          v2: true,
-          size: "md",
-          priority: "secondary",
-          href: actionSecondary.href,
-          tabIndex: resolvedExpanded ? undefined : -1,
-          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,
-          tabIndex: resolvedExpanded ? undefined : -1,
-          onClick: action.onClick,
-          children: action.label
-        })]
-      }) : undefined,
-      role: "region",
-      "aria-labelledby": ariaLabelledByIds || undefined,
-      "aria-describedby": description ? descId : undefined,
-      children: [/*#__PURE__*/jsxs("div", {
-        className: "wds-critical-banner__text-wrapper",
-        children: [title && /*#__PURE__*/jsx(Body, {
-          id: titleId,
-          type: Typography.BODY_LARGE_BOLD,
-          className: "wds-critical-banner__content wds-critical-banner__title",
-          children: title
-        }), description && /*#__PURE__*/jsx(Body, {
-          id: descId,
-          className: clsx('wds-critical-banner__content', 'wds-critical-banner__description', {
-            'wds-critical-banner__description--with-title': !!title
-          }),
-          children: description
-        })]
-      }), /*#__PURE__*/jsx(ExpanderToggle, {
-        expanded: resolvedExpanded,
-        size: 24,
-        className: "wds-critical-banner__toggle",
-        onToggle: handleToggle
-      })]
+    children: /*#__PURE__*/jsx("div", {
+      className: "wds-critical-banner-overhang-query",
+      children: /*#__PURE__*/jsx("div", {
+        className: "wds-critical-banner__entry-mask",
+        children: /*#__PURE__*/jsx("div", {
+          className: "wds-critical-banner__entry-track",
+          children: bannerSurface
+        })
+      })
     })
   });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"CriticalBanner.mjs","sources":["../../../src/prompt/CriticalBanner/CriticalBanner.tsx"],"sourcesContent":["import { ReactNode, useId, useState } 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';\n\nimport { renderPromptMedia, PromptMedia } from '../helpers/promptMedia';\nimport { ExpanderToggle } from '../common/Expander/Expander';\nimport { buildAnnouncementString } from './helpers';\nimport { useContainerSize } from '../../common/hooks/useContainerSize';\n\nexport type CriticalBannerProps = {\n  title?: ReactNode;\n  description: ReactNode;\n  media?: PromptMedia;\n  action?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n    label: ButtonProps['children'];\n  };\n  actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n    label: ButtonProps['children'];\n  };\n  sentiment?: Exclude<PrimitivePromptProps['sentiment'], 'proposition'>;\n  /**\n   * Controls whether the description and actions are visible, as a controlled component.\n   * When collapsed with a title, only the title is shown.\n   * When collapsed without a title, the description is trimmed to 2 lines.\n   *\n   * Note: On desktop (container width >= 768px), the banner is always expanded\n   * regardless of this prop value.\n   */\n  expanded?: boolean;\n  /**\n   * Called when the user clicks the chevron toggle.\n   * If not provided, the component will manage expanded state internally.\n   */\n  onToggle?: () => void;\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid'>;\n\n/**\n * A full-width, non-dismissible banner for critical messages such as account blocks or\n * time-sensitive actions that require immediate user attention.\n\n * @see {@link https://docs.wise.design/components/critical-banner Design Spec}\n */\nexport const CriticalBanner = ({\n  sentiment = 'negative',\n  title,\n  description,\n  media = {},\n  action,\n  actionSecondary,\n  expanded: expandedProp,\n  onToggle,\n  id,\n  className,\n  'data-testid': testId,\n}: CriticalBannerProps) => {\n  const [containerRef, isDesktop] = useContainerSize(Breakpoint.MEDIUM);\n  const isControlled = expandedProp !== undefined && onToggle !== undefined;\n  const [internalExpanded, setInternalExpanded] = useState(true);\n  const resolvedExpanded = isDesktop ? true : isControlled ? expandedProp : internalExpanded;\n  const handleToggle = isControlled\n    ? onToggle\n    : () => setInternalExpanded((previousExpanded) => !previousExpanded);\n  const hasActions = action ?? actionSecondary;\n  const mediaId = useId();\n  const titleId = useId();\n  const descId = useId();\n\n  const ariaLabelledByIds = [\n    media['aria-hidden'] ? undefined : mediaId,\n    !title ? undefined : titleId,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  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        ref={containerRef}\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--collapsed': !resolvedExpanded,\n            'wds-critical-banner--with-two-actions': !!actionSecondary,\n          },\n          className,\n        )}\n        media={renderPromptMedia({\n          media,\n          sentiment,\n          mediaId,\n          imgClassName: 'wds-critical-banner--media-image',\n        })}\n        actions={\n          hasActions ? (\n            <div aria-hidden={!resolvedExpanded ? true : undefined} style={{ display: 'contents' }}>\n              {actionSecondary && (\n                // @ts-expect-error onClick type mismatch\n                <Button\n                  v2\n                  size=\"md\"\n                  priority=\"secondary\"\n                  href={actionSecondary.href}\n                  tabIndex={resolvedExpanded ? undefined : -1}\n                  onClick={actionSecondary?.onClick}\n                >\n                  {actionSecondary.label}\n                </Button>\n              )}\n              {action && (\n                // @ts-expect-error onClick type mismatch\n                <Button\n                  v2\n                  size=\"md\"\n                  priority=\"primary\"\n                  href={action.href}\n                  tabIndex={resolvedExpanded ? undefined : -1}\n                  onClick={action.onClick}\n                >\n                  {action.label}\n                </Button>\n              )}\n            </div>\n          ) : undefined\n        }\n        role=\"region\"\n        aria-labelledby={ariaLabelledByIds || undefined}\n        aria-describedby={description ? descId : undefined}\n      >\n        <div className=\"wds-critical-banner__text-wrapper\">\n          {title && (\n            <Body\n              id={titleId}\n              type={Typography.BODY_LARGE_BOLD}\n              className=\"wds-critical-banner__content wds-critical-banner__title\"\n            >\n              {title}\n            </Body>\n          )}\n          {description && (\n            <Body\n              id={descId}\n              className={clsx('wds-critical-banner__content', 'wds-critical-banner__description', {\n                'wds-critical-banner__description--with-title': !!title,\n              })}\n            >\n              {description}\n            </Body>\n          )}\n        </div>\n        <ExpanderToggle\n          expanded={resolvedExpanded}\n          size={24}\n          className=\"wds-critical-banner__toggle\"\n          onToggle={handleToggle}\n        />\n      </PrimitivePrompt>\n    </LiveRegion>\n  );\n};\n\nexport default CriticalBanner;\n"],"names":["CriticalBanner","sentiment","title","description","media","action","actionSecondary","expanded","expandedProp","onToggle","id","className","testId","containerRef","isDesktop","useContainerSize","Breakpoint","MEDIUM","isControlled","undefined","internalExpanded","setInternalExpanded","useState","resolvedExpanded","handleToggle","previousExpanded","hasActions","mediaId","useId","titleId","descId","ariaLabelledByIds","filter","Boolean","join","_jsx","LiveRegion","announceOnChange","buildAnnouncementString","actionLabel","label","actionSecondaryLabel","children","_jsxs","PrimitivePrompt","ref","emphasis","clsx","renderPromptMedia","imgClassName","actions","style","display","Button","v2","size","priority","href","tabIndex","onClick","role","Body","type","Typography","BODY_LARGE_BOLD","ExpanderToggle"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CO,MAAMA,cAAc,GAAGA,CAAC;AAC7BC,EAAAA,SAAS,GAAG,UAAU;EACtBC,KAAK;EACLC,WAAW;EACXC,KAAK,GAAG,EAAE;EACVC,MAAM;EACNC,eAAe;AACfC,EAAAA,QAAQ,EAAEC,YAAY;EACtBC,QAAQ;EACRC,EAAE;EACFC,SAAS;AACT,EAAA,aAAa,EAAEC;AAAM,CACD,KAAI;EACxB,MAAM,CAACC,YAAY,EAAEC,SAAS,CAAC,GAAGC,gBAAgB,CAACC,UAAU,CAACC,MAAM,CAAC;EACrE,MAAMC,YAAY,GAAGV,YAAY,KAAKW,SAAS,IAAIV,QAAQ,KAAKU,SAAS;EACzE,MAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGC,QAAQ,CAAC,IAAI,CAAC;EAC9D,MAAMC,gBAAgB,GAAGT,SAAS,GAAG,IAAI,GAAGI,YAAY,GAAGV,YAAY,GAAGY,gBAAgB;AAC1F,EAAA,MAAMI,YAAY,GAAGN,YAAY,GAC7BT,QAAQ,GACR,MAAMY,mBAAmB,CAAEI,gBAAgB,IAAK,CAACA,gBAAgB,CAAC;AACtE,EAAA,MAAMC,UAAU,GAAGrB,MAAM,IAAIC,eAAe;AAC5C,EAAA,MAAMqB,OAAO,GAAGC,KAAK,EAAE;AACvB,EAAA,MAAMC,OAAO,GAAGD,KAAK,EAAE;AACvB,EAAA,MAAME,MAAM,GAAGF,KAAK,EAAE;AAEtB,EAAA,MAAMG,iBAAiB,GAAG,CACxB3B,KAAK,CAAC,aAAa,CAAC,GAAGe,SAAS,GAAGQ,OAAO,EAC1C,CAACzB,KAAK,GAAGiB,SAAS,GAAGU,OAAO,CAC7B,CACEG,MAAM,CAACC,OAAO,CAAC,CACfC,IAAI,CAAC,GAAG,CAAC;EAEZ,oBACEC,GAAA,CAACC,UAAU,EAAA;AACT,IAAA,WAAA,EAAU,WAAW;IACrBC,gBAAgB,EAAEC,uBAAuB,CAAC;MACxCpC,KAAK;MACLC,WAAW;AACXI,MAAAA,QAAQ,EAAEgB,gBAAgB;MAC1BgB,WAAW,EAAElC,MAAM,EAAEmC,KAAK;MAC1BC,oBAAoB,EAAEnC,eAAe,EAAEkC;AACxC,KAAA,CAAE;IAAAE,QAAA,eAEHC,IAAA,CAACC,eAAe,EAAA;AACdC,MAAAA,GAAG,EAAEhC,YAAa;AAClBH,MAAAA,EAAE,EAAEA,EAAG;AACPT,MAAAA,SAAS,EAAEA,SAAU;AACrB6C,MAAAA,QAAQ,EAAE7C,SAAS,KAAK,SAAS,GAAG,MAAM,GAAG,UAAW;AACxD,MAAA,aAAA,EAAaW,MAAO;AACpBD,MAAAA,SAAS,EAAEoC,IAAI,CACb,qBAAqB,EACrB;QACE,gCAAgC,EAAE,CAACxB,gBAAgB;QACnD,uCAAuC,EAAE,CAAC,CAACjB;OAC5C,EACDK,SAAS,CACT;MACFP,KAAK,EAAE4C,iBAAiB,CAAC;QACvB5C,KAAK;QACLH,SAAS;QACT0B,OAAO;AACPsB,QAAAA,YAAY,EAAE;AACf,OAAA,CAAE;MACHC,OAAO,EACLxB,UAAU,gBACRiB,IAAA,CAAA,KAAA,EAAA;AAAK,QAAA,aAAA,EAAa,CAACpB,gBAAgB,GAAG,IAAI,GAAGJ,SAAU;AAACgC,QAAAA,KAAK,EAAE;AAAEC,UAAAA,OAAO,EAAE;SAAa;AAAAV,QAAAA,QAAA,GACpFpC,eAAe;AAAA;AACd;AACA6B,QAAAA,GAAA,CAACkB,MAAM,EAAA;UACLC,EAAE,EAAA,IAAA;AACFC,UAAAA,IAAI,EAAC,IAAI;AACTC,UAAAA,QAAQ,EAAC,WAAW;UACpBC,IAAI,EAAEnD,eAAe,CAACmD,IAAK;AAC3BC,UAAAA,QAAQ,EAAEnC,gBAAgB,GAAGJ,SAAS,GAAG,EAAG;UAC5CwC,OAAO,EAAErD,eAAe,EAAEqD,OAAQ;UAAAjB,QAAA,EAEjCpC,eAAe,CAACkC;SACX,CACT,EACAnC,MAAM;AAAA;AACL;AACA8B,QAAAA,GAAA,CAACkB,MAAM,EAAA;UACLC,EAAE,EAAA,IAAA;AACFC,UAAAA,IAAI,EAAC,IAAI;AACTC,UAAAA,QAAQ,EAAC,SAAS;UAClBC,IAAI,EAAEpD,MAAM,CAACoD,IAAK;AAClBC,UAAAA,QAAQ,EAAEnC,gBAAgB,GAAGJ,SAAS,GAAG,EAAG;UAC5CwC,OAAO,EAAEtD,MAAM,CAACsD,OAAQ;UAAAjB,QAAA,EAEvBrC,MAAM,CAACmC;AAAK,SACP,CACT;OACE,CAAC,GACJrB,SACL;AACDyC,MAAAA,IAAI,EAAC,QAAQ;MACb,iBAAA,EAAiB7B,iBAAiB,IAAIZ,SAAU;AAChD,MAAA,kBAAA,EAAkBhB,WAAW,GAAG2B,MAAM,GAAGX,SAAU;AAAAuB,MAAAA,QAAA,gBAEnDC,IAAA,CAAA,KAAA,EAAA;AAAKhC,QAAAA,SAAS,EAAC,mCAAmC;AAAA+B,QAAAA,QAAA,EAAA,CAC/CxC,KAAK,iBACJiC,GAAA,CAAC0B,IAAI,EAAA;AACHnD,UAAAA,EAAE,EAAEmB,OAAQ;UACZiC,IAAI,EAAEC,UAAU,CAACC,eAAgB;AACjCrD,UAAAA,SAAS,EAAC,yDAAyD;AAAA+B,UAAAA,QAAA,EAElExC;AAAK,SACF,CACP,EACAC,WAAW,iBACVgC,GAAA,CAAC0B,IAAI,EAAA;AACHnD,UAAAA,EAAE,EAAEoB,MAAO;AACXnB,UAAAA,SAAS,EAAEoC,IAAI,CAAC,8BAA8B,EAAE,kCAAkC,EAAE;YAClF,8CAA8C,EAAE,CAAC,CAAC7C;AACnD,WAAA,CAAE;AAAAwC,UAAAA,QAAA,EAEFvC;AAAW,SACR,CACP;AAAA,OACE,CACL,eAAAgC,GAAA,CAAC8B,cAAc,EAAA;AACb1D,QAAAA,QAAQ,EAAEgB,gBAAiB;AAC3BgC,QAAAA,IAAI,EAAE,EAAG;AACT5C,QAAAA,SAAS,EAAC,6BAA6B;AACvCF,QAAAA,QAAQ,EAAEe;AAAa,OAAA,CAE3B;KAAiB;AACnB,GAAY,CAAC;AAEjB;;;;"}
+{"version":3,"file":"CriticalBanner.mjs","sources":["../../../src/prompt/CriticalBanner/CriticalBanner.tsx"],"sourcesContent":["import { ReactNode, useId, useState } 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';\n\nimport { renderPromptMedia, PromptMedia } from '../helpers/promptMedia';\nimport { ExpanderToggle } from '../common/Expander/Expander';\nimport { buildAnnouncementString } from './helpers';\nimport { useContainerSize } from '../../common/hooks/useContainerSize';\n\nexport type CriticalBannerProps = {\n  title?: ReactNode;\n  description: ReactNode;\n  media?: PromptMedia;\n  action?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n    label: ButtonProps['children'];\n  };\n  actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n    label: ButtonProps['children'];\n  };\n  sentiment?: Exclude<PrimitivePromptProps['sentiment'], 'proposition'>;\n  /**\n   * Controls whether the description and actions are visible, as a controlled component.\n   * When collapsed with a title, only the title is shown.\n   * When collapsed without a title, the description is trimmed to 2 lines.\n   *\n   * Note: On desktop (container width >= 768px), the banner is always expanded\n   * regardless of this prop value.\n   */\n  expanded?: boolean;\n  /**\n   * Called when the user clicks the chevron toggle.\n   * If not provided, the component will manage expanded state internally.\n   */\n  onToggle?: () => void;\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid'>;\n\n/**\n * A full-width, non-dismissible banner for critical messages such as account blocks or\n * time-sensitive actions that require immediate user attention.\n\n * @see {@link https://docs.wise.design/components/critical-banner Design Spec}\n */\nexport const CriticalBanner = ({\n  sentiment = 'negative',\n  title,\n  description,\n  media = {},\n  action,\n  actionSecondary,\n  expanded: expandedProp,\n  onToggle,\n  id,\n  className,\n  'data-testid': testId,\n}: CriticalBannerProps) => {\n  const [containerRef, isDesktop] = useContainerSize(Breakpoint.MEDIUM);\n  const isControlled = expandedProp !== undefined && onToggle !== undefined;\n  const [internalExpanded, setInternalExpanded] = useState(true);\n  const resolvedExpanded = isDesktop ? true : isControlled ? expandedProp : internalExpanded;\n  const handleToggle = isControlled\n    ? onToggle\n    : () => setInternalExpanded((previousExpanded) => !previousExpanded);\n  const hasActions = action ?? actionSecondary;\n  const mediaId = useId();\n  const titleId = useId();\n  const descId = useId();\n\n  const ariaLabelledByIds = [\n    media['aria-hidden'] ? undefined : mediaId,\n    !title ? undefined : titleId,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const bannerSurface = (\n    <PrimitivePrompt\n      ref={containerRef}\n      id={id}\n      sentiment={sentiment}\n      emphasis={sentiment === 'neutral' ? 'base' : 'elevated'}\n      data-testid={testId}\n      className={clsx(\n        'wds-critical-banner',\n        'wds-critical-banner-overhang',\n        {\n          'wds-critical-banner--collapsed': !resolvedExpanded,\n          'wds-critical-banner--with-two-actions': !!actionSecondary,\n        },\n        className,\n      )}\n      media={renderPromptMedia({\n        media,\n        sentiment,\n        mediaId,\n        imgClassName: 'wds-critical-banner--media-image',\n      })}\n      actions={\n        hasActions ? (\n          <div aria-hidden={!resolvedExpanded ? true : undefined} style={{ display: 'contents' }}>\n            {actionSecondary && (\n              // @ts-expect-error onClick type mismatch\n              <Button\n                v2\n                size=\"md\"\n                priority=\"secondary\"\n                href={actionSecondary.href}\n                tabIndex={resolvedExpanded ? undefined : -1}\n                onClick={actionSecondary?.onClick}\n              >\n                {actionSecondary.label}\n              </Button>\n            )}\n            {action && (\n              // @ts-expect-error onClick type mismatch\n              <Button\n                v2\n                size=\"md\"\n                priority=\"primary\"\n                href={action.href}\n                tabIndex={resolvedExpanded ? undefined : -1}\n                onClick={action.onClick}\n              >\n                {action.label}\n              </Button>\n            )}\n          </div>\n        ) : undefined\n      }\n      role=\"region\"\n      aria-labelledby={ariaLabelledByIds || undefined}\n      aria-describedby={description ? descId : undefined}\n    >\n      <div className=\"wds-critical-banner__text-wrapper\">\n        {title && (\n          <Body\n            id={titleId}\n            type={Typography.BODY_LARGE_BOLD}\n            className=\"wds-critical-banner__content wds-critical-banner__title\"\n          >\n            {title}\n          </Body>\n        )}\n        {description && (\n          <Body\n            id={descId}\n            className={clsx('wds-critical-banner__content', 'wds-critical-banner__description', {\n              'wds-critical-banner__description--with-title': !!title,\n            })}\n          >\n            {description}\n          </Body>\n        )}\n      </div>\n      <ExpanderToggle\n        expanded={resolvedExpanded}\n        size={24}\n        className=\"wds-critical-banner__toggle\"\n        onToggle={handleToggle}\n      />\n    </PrimitivePrompt>\n  );\n\n  return (\n    <LiveRegion\n      aria-live=\"assertive\"\n      announceOnChange={buildAnnouncementString({\n        title,\n        description,\n        expanded: resolvedExpanded,\n        actionLabel: action?.label,\n        actionSecondaryLabel: actionSecondary?.label,\n      })}\n    >\n      <div className=\"wds-critical-banner-overhang-query\">\n        <div className=\"wds-critical-banner__entry-mask\">\n          <div className=\"wds-critical-banner__entry-track\">{bannerSurface}</div>\n        </div>\n      </div>\n    </LiveRegion>\n  );\n};\n\nexport default CriticalBanner;\n"],"names":["CriticalBanner","sentiment","title","description","media","action","actionSecondary","expanded","expandedProp","onToggle","id","className","testId","containerRef","isDesktop","useContainerSize","Breakpoint","MEDIUM","isControlled","undefined","internalExpanded","setInternalExpanded","useState","resolvedExpanded","handleToggle","previousExpanded","hasActions","mediaId","useId","titleId","descId","ariaLabelledByIds","filter","Boolean","join","bannerSurface","_jsxs","PrimitivePrompt","ref","emphasis","clsx","renderPromptMedia","imgClassName","actions","style","display","children","_jsx","Button","v2","size","priority","href","tabIndex","onClick","label","role","Body","type","Typography","BODY_LARGE_BOLD","ExpanderToggle","LiveRegion","announceOnChange","buildAnnouncementString","actionLabel","actionSecondaryLabel"],"mappings":"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"}

package/build/styles/main.css

@@ -31935,6 +31935,7 @@ html:not([dir="rtl"]) .np-navigation-option {
   --Prompt-gap: var(--size-10) var(--size-16);
   --Prompt-border-radius: 0;
   container-type: inline-size;
+  position: relative;
   --critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
   --critical-banner-duration: 150ms;
   /* Override PrimitivePrompt's --screen-sm-max actions behaviour:
@@ -32075,6 +32076,53 @@ html:not([dir="rtl"]) .np-navigation-option {
   }
 }
 
+.wds-critical-banner-overhang-query {
+  container-name: critical-banner-overhang;
+  container-type: inline-size;
+  inline-size: 100%;
+}
+
+.wds-critical-banner__entry-mask {
+  display: grid;
+  grid-template-rows: 0fr;
+  overflow: hidden;
+  animation: wds-critical-banner-reveal-height 400ms cubic-bezier(0.3, 0, 0.1, 1) 500ms both;
+}
+
+@container critical-banner-overhang (max-width: 600px) {
+  .wds-critical-banner__entry-mask {
+    --critical-banner-mobile-overhang-size: 32px;
+  }
+  .wds-critical-banner__entry-mask .wds-critical-banner-overhang {
+    margin-bottom: var(--critical-banner-mobile-overhang-size);
+  }
+  .wds-critical-banner__entry-mask .wds-critical-banner-overhang::after {
+    content: "";
+    position: absolute;
+    right: 0;
+    bottom: calc(-1 * var(--critical-banner-mobile-overhang-size));
+    left: 0;
+    height: var(--critical-banner-mobile-overhang-size);
+    pointer-events: none;
+    background: radial-gradient(circle at 100% 100%, transparent var(--critical-banner-mobile-overhang-size), var(--color-sentiment-background-surface) var(--critical-banner-mobile-overhang-size)) 0 0 / var(--critical-banner-mobile-overhang-size) var(--critical-banner-mobile-overhang-size) no-repeat, radial-gradient(circle at 0% 100%, transparent var(--critical-banner-mobile-overhang-size), var(--color-sentiment-background-surface) var(--critical-banner-mobile-overhang-size)) 100% 0 / var(--critical-banner-mobile-overhang-size) var(--critical-banner-mobile-overhang-size) no-repeat;
+  }
+}
+
+.wds-critical-banner__entry-track {
+  min-height: 0;
+}
+
+@keyframes wds-critical-banner-reveal-height {
+  from {
+    grid-template-rows: 0fr;
+    overflow: hidden;
+  }
+  to {
+    grid-template-rows: 1fr;
+    overflow: visible;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .wds-critical-banner__description,
   .wds-critical-banner__title,
@@ -32082,6 +32130,11 @@ html:not([dir="rtl"]) .np-navigation-option {
   .wds-critical-banner__toggle {
     transition: none !important;
   }
+  .wds-critical-banner__entry-mask {
+    animation: none;
+    grid-template-rows: 1fr;
+    overflow: visible;
+  }
 }
 
 .wds-expander-toggle {

package/build/styles/prompt/CriticalBanner/CriticalBanner.css

@@ -4,6 +4,7 @@
   --Prompt-gap: var(--size-10) var(--size-16);
   --Prompt-border-radius: 0;
   container-type: inline-size;
+  position: relative;
   --critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
   --critical-banner-duration: 150ms;
   /* Override PrimitivePrompt's --screen-sm-max actions behaviour:
@@ -124,6 +125,48 @@
     min-width: fit-content;
   }
 }
+.wds-critical-banner-overhang-query {
+  container-name: critical-banner-overhang;
+  container-type: inline-size;
+  inline-size: 100%;
+}
+.wds-critical-banner__entry-mask {
+  display: grid;
+  grid-template-rows: 0fr;
+  overflow: hidden;
+  animation: wds-critical-banner-reveal-height 400ms cubic-bezier(0.3, 0, 0.1, 1) 500ms both;
+}
+@container critical-banner-overhang (max-width: 600px) {
+  .wds-critical-banner__entry-mask {
+    --critical-banner-mobile-overhang-size: 32px;
+  }
+  .wds-critical-banner__entry-mask .wds-critical-banner-overhang {
+    margin-bottom: var(--critical-banner-mobile-overhang-size);
+  }
+  .wds-critical-banner__entry-mask .wds-critical-banner-overhang::after {
+    content: "";
+    position: absolute;
+    right: 0;
+    bottom: calc(-1 * var(--critical-banner-mobile-overhang-size));
+    left: 0;
+    height: var(--critical-banner-mobile-overhang-size);
+    pointer-events: none;
+    background: radial-gradient(circle at 100% 100%, transparent var(--critical-banner-mobile-overhang-size), var(--color-sentiment-background-surface) var(--critical-banner-mobile-overhang-size)) 0 0 / var(--critical-banner-mobile-overhang-size) var(--critical-banner-mobile-overhang-size) no-repeat, radial-gradient(circle at 0% 100%, transparent var(--critical-banner-mobile-overhang-size), var(--color-sentiment-background-surface) var(--critical-banner-mobile-overhang-size)) 100% 0 / var(--critical-banner-mobile-overhang-size) var(--critical-banner-mobile-overhang-size) no-repeat;
+  }
+}
+.wds-critical-banner__entry-track {
+  min-height: 0;
+}
+@keyframes wds-critical-banner-reveal-height {
+  from {
+    grid-template-rows: 0fr;
+    overflow: hidden;
+  }
+  to {
+    grid-template-rows: 1fr;
+    overflow: visible;
+  }
+}
 @media (prefers-reduced-motion: reduce) {
   .wds-critical-banner__description,
   .wds-critical-banner__title,
@@ -131,4 +174,9 @@
   .wds-critical-banner__toggle {
     transition: none !important;
   }
+  .wds-critical-banner__entry-mask {
+    animation: none;
+    grid-template-rows: 1fr;
+    overflow: visible;
+  }
 }