npm - @transferwise/components - Versions diffs - 46.149.0 → 46.149.2 - Mend

@transferwise/components 46.149.0 → 46.149.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/build/main.css +24 -45
package/build/prompt/CriticalBanner/CriticalBanner.js +1 -7
package/build/prompt/CriticalBanner/CriticalBanner.js.map +1 -1
package/build/prompt/CriticalBanner/CriticalBanner.mjs +1 -7
package/build/prompt/CriticalBanner/CriticalBanner.mjs.map +1 -1
package/build/styles/avatarView/AvatarView.css +1 -0
package/build/styles/main.css +24 -45
package/build/styles/prompt/CriticalBanner/CriticalBanner.css +22 -40
package/build/types/prompt/CriticalBanner/CriticalBanner.d.ts.map +1 -1
package/package.json +1 -1
package/src/avatarView/AvatarView.css +1 -0
package/src/avatarView/AvatarView.less +3 -1
package/src/main.css +24 -45
package/src/prompt/CriticalBanner/CriticalBanner.accessibility.docs.mdx +1 -4
package/src/prompt/CriticalBanner/CriticalBanner.css +22 -40
package/src/prompt/CriticalBanner/CriticalBanner.less +35 -59
package/src/prompt/CriticalBanner/CriticalBanner.story.tsx +22 -53
package/src/prompt/CriticalBanner/CriticalBanner.test.story.tsx +60 -10
package/src/prompt/CriticalBanner/CriticalBanner.test.tsx +3 -11
package/src/prompt/CriticalBanner/CriticalBanner.tsx +1 -5

package/build/main.css CHANGED Viewed

@@ -26549,6 +26549,7 @@ a[data-toggle="tooltip"] {
 }
 .np-avatar-view .np-avatar-view-content {
+  --circle-border-color: var(--color-sentiment-border-overlay, var(--color-border-neutral));
   color: #37517e;
   color: var(--color-sentiment-content-primary, var(--color-content-primary));
 }
@@ -31955,6 +31956,9 @@ html:not([dir="rtl"]) .np-navigation-option {
   --Prompt-actions-gap: var(--size-8);
   --Prompt-gap: var(--size-10) var(--size-16);
   --Prompt-border-radius: 0;
+  --critical-banner-background-base: transparent;
+  --critical-banner-background-surface: var(--color-sentiment-background-surface);
+  --critical-banner-background: linear-gradient(var(--critical-banner-background-surface), var(--critical-banner-background-surface)), var(--critical-banner-background-base);
   container-type: inline-size;
   position: relative;
   --critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
@@ -31963,6 +31967,11 @@ html:not([dir="rtl"]) .np-navigation-option {
      actions only go full-width below mobile-max token (container query) */
 }
+.wds-critical-banner.wds-prompt--neutral {
+  --critical-banner-background-base: var(--color-background-elevated);
+  background: var(--critical-banner-background);
+}
 .wds-critical-banner--media-image {
   width: 48px;
   width: var(--size-48);
@@ -32028,19 +32037,6 @@ html:not([dir="rtl"]) .np-navigation-option {
   min-width: 0;
   max-width: 480px;
   height: 100%;
-  padding-top: 3px;
-}
-@media (max-width: 320px) {
-  .wds-critical-banner__text-wrapper {
-    padding-top: 0;
-  }
-}
-@container (width < 320px) {
-  .wds-critical-banner__text-wrapper {
-    padding-top: 0;
-  }
 }
 .wds-critical-banner--collapsed .wds-critical-banner__title,
@@ -32103,21 +32099,22 @@ html:not([dir="rtl"]) .np-navigation-option {
   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 {
+  .wds-critical-banner-overhang-query .wds-critical-banner-overhang {
     --critical-banner-mobile-overhang-size: 32px;
-  }
-  .wds-critical-banner__entry-mask .wds-critical-banner-overhang {
+    --critical-banner-overhang-mask: radial-gradient(circle at 100% 100%, transparent var(--critical-banner-mobile-overhang-size), #000 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),
+            #000 var(--critical-banner-mobile-overhang-size)
+          )
+          100% 0 / var(--critical-banner-mobile-overhang-size)
+          var(--critical-banner-mobile-overhang-size) no-repeat;
+    margin-bottom: 32px;
     margin-bottom: var(--critical-banner-mobile-overhang-size);
   }
-  .wds-critical-banner__entry-mask .wds-critical-banner-overhang::after {
+  .wds-critical-banner-overhang-query .wds-critical-banner-overhang::after {
     content: "";
     position: absolute;
     right: 0;
@@ -32125,22 +32122,9 @@ html:not([dir="rtl"]) .np-navigation-option {
     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;
+    background: var(--critical-banner-background);
+    -webkit-mask: var(--critical-banner-overhang-mask);
+    mask: var(--critical-banner-overhang-mask);
   }
 }
@@ -32151,11 +32135,6 @@ 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 CHANGED Viewed

@@ -141,13 +141,7 @@ const CriticalBanner = ({
     }),
     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
-        })
-      })
+      children: bannerSurface
     })
   });
 };

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

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

package/build/prompt/CriticalBanner/CriticalBanner.mjs CHANGED Viewed

@@ -139,13 +139,7 @@ const CriticalBanner = ({
     }),
     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
-        })
-      })
+      children: bannerSurface
     })
   });
 };

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

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

package/build/styles/avatarView/AvatarView.css CHANGED Viewed

@@ -25,6 +25,7 @@
   background-color: var(--color-interactive-accent);
 }
 .np-avatar-view .np-avatar-view-content {
+  --circle-border-color: var(--color-sentiment-border-overlay, var(--color-border-neutral));
   color: #37517e;
   color: var(--color-sentiment-content-primary, var(--color-content-primary));
 }

package/build/styles/main.css CHANGED Viewed

@@ -26549,6 +26549,7 @@ a[data-toggle="tooltip"] {
 }
 .np-avatar-view .np-avatar-view-content {
+  --circle-border-color: var(--color-sentiment-border-overlay, var(--color-border-neutral));
   color: #37517e;
   color: var(--color-sentiment-content-primary, var(--color-content-primary));
 }
@@ -31955,6 +31956,9 @@ html:not([dir="rtl"]) .np-navigation-option {
   --Prompt-actions-gap: var(--size-8);
   --Prompt-gap: var(--size-10) var(--size-16);
   --Prompt-border-radius: 0;
+  --critical-banner-background-base: transparent;
+  --critical-banner-background-surface: var(--color-sentiment-background-surface);
+  --critical-banner-background: linear-gradient(var(--critical-banner-background-surface), var(--critical-banner-background-surface)), var(--critical-banner-background-base);
   container-type: inline-size;
   position: relative;
   --critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
@@ -31963,6 +31967,11 @@ html:not([dir="rtl"]) .np-navigation-option {
      actions only go full-width below mobile-max token (container query) */
 }
+.wds-critical-banner.wds-prompt--neutral {
+  --critical-banner-background-base: var(--color-background-elevated);
+  background: var(--critical-banner-background);
+}
 .wds-critical-banner--media-image {
   width: 48px;
   width: var(--size-48);
@@ -32028,19 +32037,6 @@ html:not([dir="rtl"]) .np-navigation-option {
   min-width: 0;
   max-width: 480px;
   height: 100%;
-  padding-top: 3px;
-}
-@media (max-width: 320px) {
-  .wds-critical-banner__text-wrapper {
-    padding-top: 0;
-  }
-}
-@container (width < 320px) {
-  .wds-critical-banner__text-wrapper {
-    padding-top: 0;
-  }
 }
 .wds-critical-banner--collapsed .wds-critical-banner__title,
@@ -32103,21 +32099,22 @@ html:not([dir="rtl"]) .np-navigation-option {
   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 {
+  .wds-critical-banner-overhang-query .wds-critical-banner-overhang {
     --critical-banner-mobile-overhang-size: 32px;
-  }
-  .wds-critical-banner__entry-mask .wds-critical-banner-overhang {
+    --critical-banner-overhang-mask: radial-gradient(circle at 100% 100%, transparent var(--critical-banner-mobile-overhang-size), #000 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),
+            #000 var(--critical-banner-mobile-overhang-size)
+          )
+          100% 0 / var(--critical-banner-mobile-overhang-size)
+          var(--critical-banner-mobile-overhang-size) no-repeat;
+    margin-bottom: 32px;
     margin-bottom: var(--critical-banner-mobile-overhang-size);
   }
-  .wds-critical-banner__entry-mask .wds-critical-banner-overhang::after {
+  .wds-critical-banner-overhang-query .wds-critical-banner-overhang::after {
     content: "";
     position: absolute;
     right: 0;
@@ -32125,22 +32122,9 @@ html:not([dir="rtl"]) .np-navigation-option {
     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;
+    background: var(--critical-banner-background);
+    -webkit-mask: var(--critical-banner-overhang-mask);
+    mask: var(--critical-banner-overhang-mask);
   }
 }
@@ -32151,11 +32135,6 @@ 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 CHANGED Viewed

@@ -4,6 +4,9 @@
   --Prompt-actions-gap: var(--size-8);
   --Prompt-gap: var(--size-10) var(--size-16);
   --Prompt-border-radius: 0;
+  --critical-banner-background-base: transparent;
+  --critical-banner-background-surface: var(--color-sentiment-background-surface);
+  --critical-banner-background: linear-gradient(var(--critical-banner-background-surface), var(--critical-banner-background-surface)), var(--critical-banner-background-base);
   container-type: inline-size;
   position: relative;
   --critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
@@ -11,6 +14,10 @@
   /* Override PrimitivePrompt's --screen-sm-max actions behaviour:
      actions only go full-width below mobile-max token (container query) */
 }
+.wds-critical-banner.wds-prompt--neutral {
+  --critical-banner-background-base: var(--color-background-elevated);
+  background: var(--critical-banner-background);
+}
 .wds-critical-banner--media-image {
   width: 48px;
   width: var(--size-48);
@@ -68,17 +75,6 @@
   min-width: 0;
   max-width: 480px;
   height: 100%;
-  padding-top: 3px;
-}
-@media (max-width: 320px) {
-  .wds-critical-banner__text-wrapper {
-    padding-top: 0;
-  }
-}
-@container (width < 320px) {
-  .wds-critical-banner__text-wrapper {
-    padding-top: 0;
-  }
 }
 .wds-critical-banner--collapsed .wds-critical-banner__title,
 .wds-critical-banner--collapsed .wds-critical-banner__description {
@@ -131,20 +127,22 @@
   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 {
+  .wds-critical-banner-overhang-query .wds-critical-banner-overhang {
     --critical-banner-mobile-overhang-size: 32px;
-  }
-  .wds-critical-banner__entry-mask .wds-critical-banner-overhang {
+    --critical-banner-overhang-mask: radial-gradient(circle at 100% 100%, transparent var(--critical-banner-mobile-overhang-size), #000 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),
+            #000 var(--critical-banner-mobile-overhang-size)
+          )
+          100% 0 / var(--critical-banner-mobile-overhang-size)
+          var(--critical-banner-mobile-overhang-size) no-repeat;
+    margin-bottom: 32px;
     margin-bottom: var(--critical-banner-mobile-overhang-size);
   }
-  .wds-critical-banner__entry-mask .wds-critical-banner-overhang::after {
+  .wds-critical-banner-overhang-query .wds-critical-banner-overhang::after {
     content: "";
     position: absolute;
     right: 0;
@@ -152,20 +150,9 @@
     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;
+    background: var(--critical-banner-background);
+    -webkit-mask: var(--critical-banner-overhang-mask);
+    mask: var(--critical-banner-overhang-mask);
   }
 }
 @media (prefers-reduced-motion: reduce) {
@@ -175,9 +162,4 @@
   .wds-critical-banner__toggle {
     transition: none !important;
   }
-  .wds-critical-banner__entry-mask {
-    animation: none;
-    grid-template-rows: 1fr;
-    overflow: visible;
-  }
 }

package/build/types/prompt/CriticalBanner/CriticalBanner.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CriticalBanner.d.ts","sourceRoot":"","sources":["../../../../src/prompt/CriticalBanner/CriticalBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,SAAS,EAAmB,MAAM,OAAO,CAAC;AAOhE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE3E,OAAO,EAAqB,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAKxE,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,EAAE,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QAC1D,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;IACF,eAAe,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QACnE,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;IACF,SAAS,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,WAAW,CAAC,EAAE,aAAa,CAAC,CAAC;IACtE;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,GAAG,IAAI,CAAC,oBAAoB,EAAE,IAAI,GAAG,WAAW,GAAG,aAAa,CAAC,CAAC;AAEnE;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GAAI,4IAY5B,mBAAmB,~~gCAgIrB~~,CAAC;AAEF,eAAe,cAAc,CAAC"}
1	+ {"version":3,"file":"CriticalBanner.d.ts","sourceRoot":"","sources":["../../../../src/prompt/CriticalBanner/CriticalBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,SAAS,EAAmB,MAAM,OAAO,CAAC;AAOhE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE3E,OAAO,EAAqB,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAKxE,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,EAAE,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QAC1D,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;IACF,eAAe,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QACnE,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;IACF,SAAS,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,WAAW,CAAC,EAAE,aAAa,CAAC,CAAC;IACtE;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,GAAG,IAAI,CAAC,oBAAoB,EAAE,IAAI,GAAG,WAAW,GAAG,aAAa,CAAC,CAAC;AAEnE;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GAAI,4IAY5B,mBAAmB,gCA4HrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.149.0",
+  "version": "46.149.2",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/avatarView/AvatarView.css CHANGED Viewed

@@ -25,6 +25,7 @@
   background-color: var(--color-interactive-accent);
 }
 .np-avatar-view .np-avatar-view-content {
+  --circle-border-color: var(--color-sentiment-border-overlay, var(--color-border-neutral));
   color: #37517e;
   color: var(--color-sentiment-content-primary, var(--color-content-primary));
 }

package/src/avatarView/AvatarView.less CHANGED Viewed

@@ -1,7 +1,9 @@
-@import './Dot.less';
+@import "./Dot.less";
 .np-avatar-view {
   .np-avatar-view-content {
+    --circle-border-color: var(--color-sentiment-border-overlay, var(--color-border-neutral));
     color: var(--color-sentiment-content-primary, var(--color-content-primary));
   }

package/src/main.css CHANGED Viewed

@@ -26549,6 +26549,7 @@ a[data-toggle="tooltip"] {
 }
 .np-avatar-view .np-avatar-view-content {
+  --circle-border-color: var(--color-sentiment-border-overlay, var(--color-border-neutral));
   color: #37517e;
   color: var(--color-sentiment-content-primary, var(--color-content-primary));
 }
@@ -31955,6 +31956,9 @@ html:not([dir="rtl"]) .np-navigation-option {
   --Prompt-actions-gap: var(--size-8);
   --Prompt-gap: var(--size-10) var(--size-16);
   --Prompt-border-radius: 0;
+  --critical-banner-background-base: transparent;
+  --critical-banner-background-surface: var(--color-sentiment-background-surface);
+  --critical-banner-background: linear-gradient(var(--critical-banner-background-surface), var(--critical-banner-background-surface)), var(--critical-banner-background-base);
   container-type: inline-size;
   position: relative;
   --critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
@@ -31963,6 +31967,11 @@ html:not([dir="rtl"]) .np-navigation-option {
      actions only go full-width below mobile-max token (container query) */
 }
+.wds-critical-banner.wds-prompt--neutral {
+  --critical-banner-background-base: var(--color-background-elevated);
+  background: var(--critical-banner-background);
+}
 .wds-critical-banner--media-image {
   width: 48px;
   width: var(--size-48);
@@ -32028,19 +32037,6 @@ html:not([dir="rtl"]) .np-navigation-option {
   min-width: 0;
   max-width: 480px;
   height: 100%;
-  padding-top: 3px;
-}
-@media (max-width: 320px) {
-  .wds-critical-banner__text-wrapper {
-    padding-top: 0;
-  }
-}
-@container (width < 320px) {
-  .wds-critical-banner__text-wrapper {
-    padding-top: 0;
-  }
 }
 .wds-critical-banner--collapsed .wds-critical-banner__title,
@@ -32103,21 +32099,22 @@ html:not([dir="rtl"]) .np-navigation-option {
   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 {
+  .wds-critical-banner-overhang-query .wds-critical-banner-overhang {
     --critical-banner-mobile-overhang-size: 32px;
-  }
-  .wds-critical-banner__entry-mask .wds-critical-banner-overhang {
+    --critical-banner-overhang-mask: radial-gradient(circle at 100% 100%, transparent var(--critical-banner-mobile-overhang-size), #000 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),
+            #000 var(--critical-banner-mobile-overhang-size)
+          )
+          100% 0 / var(--critical-banner-mobile-overhang-size)
+          var(--critical-banner-mobile-overhang-size) no-repeat;
+    margin-bottom: 32px;
     margin-bottom: var(--critical-banner-mobile-overhang-size);
   }
-  .wds-critical-banner__entry-mask .wds-critical-banner-overhang::after {
+  .wds-critical-banner-overhang-query .wds-critical-banner-overhang::after {
     content: "";
     position: absolute;
     right: 0;
@@ -32125,22 +32122,9 @@ html:not([dir="rtl"]) .np-navigation-option {
     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;
+    background: var(--critical-banner-background);
+    -webkit-mask: var(--critical-banner-overhang-mask);
+    mask: var(--critical-banner-overhang-mask);
   }
 }
@@ -32151,11 +32135,6 @@ 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/src/prompt/CriticalBanner/CriticalBanner.accessibility.docs.mdx CHANGED Viewed

@@ -66,10 +66,7 @@ Screen readers announce the banner content whenever:
 ## Reduced Motion
-`CriticalBanner` respects the user's reduced motion preference. When reduced motion is on, the component does not show:
-- the entry animation that reveals the banner from above when it first appears
-- the collapse and expand animation used when the user toggles the banner content
+`CriticalBanner` respects the user's reduced motion preference. When reduced motion is on, the component does not show the collapse and expand animation used when the user toggles the banner content.
 The same content is still rendered and announced. Reduced motion only removes the visual movement.

package/src/prompt/CriticalBanner/CriticalBanner.css CHANGED Viewed

@@ -4,6 +4,9 @@
   --Prompt-actions-gap: var(--size-8);
   --Prompt-gap: var(--size-10) var(--size-16);
   --Prompt-border-radius: 0;
+  --critical-banner-background-base: transparent;
+  --critical-banner-background-surface: var(--color-sentiment-background-surface);
+  --critical-banner-background: linear-gradient(var(--critical-banner-background-surface), var(--critical-banner-background-surface)), var(--critical-banner-background-base);
   container-type: inline-size;
   position: relative;
   --critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
@@ -11,6 +14,10 @@
   /* Override PrimitivePrompt's --screen-sm-max actions behaviour:
      actions only go full-width below mobile-max token (container query) */
 }
+.wds-critical-banner.wds-prompt--neutral {
+  --critical-banner-background-base: var(--color-background-elevated);
+  background: var(--critical-banner-background);
+}
 .wds-critical-banner--media-image {
   width: 48px;
   width: var(--size-48);
@@ -68,17 +75,6 @@
   min-width: 0;
   max-width: 480px;
   height: 100%;
-  padding-top: 3px;
-}
-@media (max-width: 320px) {
-  .wds-critical-banner__text-wrapper {
-    padding-top: 0;
-  }
-}
-@container (width < 320px) {
-  .wds-critical-banner__text-wrapper {
-    padding-top: 0;
-  }
 }
 .wds-critical-banner--collapsed .wds-critical-banner__title,
 .wds-critical-banner--collapsed .wds-critical-banner__description {
@@ -131,20 +127,22 @@
   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 {
+  .wds-critical-banner-overhang-query .wds-critical-banner-overhang {
     --critical-banner-mobile-overhang-size: 32px;
-  }
-  .wds-critical-banner__entry-mask .wds-critical-banner-overhang {
+    --critical-banner-overhang-mask: radial-gradient(circle at 100% 100%, transparent var(--critical-banner-mobile-overhang-size), #000 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),
+            #000 var(--critical-banner-mobile-overhang-size)
+          )
+          100% 0 / var(--critical-banner-mobile-overhang-size)
+          var(--critical-banner-mobile-overhang-size) no-repeat;
+    margin-bottom: 32px;
     margin-bottom: var(--critical-banner-mobile-overhang-size);
   }
-  .wds-critical-banner__entry-mask .wds-critical-banner-overhang::after {
+  .wds-critical-banner-overhang-query .wds-critical-banner-overhang::after {
     content: "";
     position: absolute;
     right: 0;
@@ -152,20 +150,9 @@
     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;
+    background: var(--critical-banner-background);
+    -webkit-mask: var(--critical-banner-overhang-mask);
+    mask: var(--critical-banner-overhang-mask);
   }
 }
 @media (prefers-reduced-motion: reduce) {
@@ -175,9 +162,4 @@
   .wds-critical-banner__toggle {
     transition: none !important;
   }
-  .wds-critical-banner__entry-mask {
-    animation: none;
-    grid-template-rows: 1fr;
-    overflow: visible;
-  }
 }

package/src/prompt/CriticalBanner/CriticalBanner.less CHANGED Viewed

@@ -7,6 +7,16 @@
   --Prompt-actions-gap: var(--size-8);
   --Prompt-gap: var(--size-10) var(--size-16);
   --Prompt-border-radius: 0;
+  --critical-banner-background-base: transparent;
+  --critical-banner-background-surface: var(--color-sentiment-background-surface);
+  // The sentiment surface can be translucent, so layer it over an opaque base
+  // for neutral banners and their mobile overhang.
+  --critical-banner-background:
+    linear-gradient(
+      var(--critical-banner-background-surface),
+      var(--critical-banner-background-surface)
+    ),
+    var(--critical-banner-background-base);
   container-type: inline-size;
   position: relative;
@@ -14,6 +24,11 @@
   --critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
   --critical-banner-duration: 150ms;
+  &.wds-prompt--neutral {
+    --critical-banner-background-base: var(--color-background-elevated);
+    background: var(--critical-banner-background);
+  }
   &--media-image {
     width: var(--size-48);
     height: var(--size-48);
@@ -79,16 +94,6 @@
     min-width: 0;
     max-width: 480px;
     height: 100%;
-    // Padding prevents text shifting when collapsing/expanding layout shift
-    padding-top: 3px;
-    @media (--screen-400-zoom) {
-      padding-top: 0;
-    }
-    @container (width < @screen-xs-min) {
-      padding-top: 0;
-    }
   }
   &--collapsed &__title,
@@ -146,25 +151,30 @@
   }
 }
-// Entry animation: after a 500ms delay, reveal the already-positioned banner
-// over 400ms. The mask clips only during the reveal, then becomes visible so the
-// overhang and actions are not clipped after the animation.
 .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: @wds-critical-banner-mobile-overhang-max) {
-    --critical-banner-mobile-overhang-size: 32px;
     .wds-critical-banner-overhang {
+      --critical-banner-mobile-overhang-size: 32px;
+      --critical-banner-overhang-mask:
+        radial-gradient(
+            circle at 100% 100%,
+            transparent var(--critical-banner-mobile-overhang-size),
+            #000 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),
+            #000 var(--critical-banner-mobile-overhang-size)
+          )
+          100% 0 / var(--critical-banner-mobile-overhang-size)
+          var(--critical-banner-mobile-overhang-size) no-repeat;
       margin-bottom: var(--critical-banner-mobile-overhang-size);
       &::after {
@@ -175,42 +185,14 @@
         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;
+        background: var(--critical-banner-background);
+        -webkit-mask: var(--critical-banner-overhang-mask);
+        mask: var(--critical-banner-overhang-mask);
       }
     }
   }
 }
-.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;
-  }
-}
 // Reduced motion support
 @media (prefers-reduced-motion: reduce) {
   .wds-critical-banner__description,
@@ -219,10 +201,4 @@
   .wds-critical-banner__toggle {
     transition: none !important;
   }
-  .wds-critical-banner__entry-mask {
-    animation: none;
-    grid-template-rows: 1fr;
-    overflow: visible;
-  }
 }

package/src/prompt/CriticalBanner/CriticalBanner.story.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo, useRef, type ReactNode } from 'react';
+import { useState, useEffect, useRef, type ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 import { Meta, StoryObj, Decorator } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
@@ -137,29 +137,6 @@ const hiddenArgTypes = {
   'data-testid': { table: { disable: true } },
 } as const;
-const AnimatedEntryPreview = (args: CriticalBannerProps) => {
-  const { id = 'animated-entry' } = args;
-  const [bannerInstance, setBannerInstance] = useState(0);
-  const animatedBanner = useMemo(
-    () => ({
-      ...args,
-      id: `${id}-${bannerInstance}`,
-    }),
-    [args, bannerInstance, id],
-  );
-  return (
-    <>
-      <CriticalBanner key={animatedBanner.id} {...animatedBanner} />
-      <div className="p-t-3">
-        <Button block v2 onClick={() => setBannerInstance((current) => current + 1)}>
-          Replay
-        </Button>
-      </div>
-    </>
-  );
-};
 /** Renders children inside an iframe that inherits the parent page's stylesheets. */
 function IframeContainer({ width, children }: { width: number; children: ReactNode }) {
   const iframeRef = useRef<HTMLIFrameElement>(null);
@@ -351,12 +328,17 @@ export const Actions: Story = {
  * Each sentiment has a default status icon. Override it with a custom image or an AvatarView.
  */
 export const MediaTypes: Story = {
+  args: {
+    sentiment: 'neutral',
+  },
   decorators: [ContainerDecorator('2rem')],
   parameters: {
     docs: {
       source: {
-        code: `{/* Default — sentiment icon */}
-<CriticalBanner sentiment="neutral" />
+        code: `{/* Change sentiment using the story controls */}
+{/* Default — sentiment icon */}
+<CriticalBanner sentiment={sentiment} />
 {/* Custom image */}
 <CriticalBanner media={{ imgSrc: '/card.svg', 'aria-label': 'Wise card' }} ... />
@@ -375,8 +357,14 @@ export const MediaTypes: Story = {
       },
     },
   },
-  argTypes: hiddenArgTypes,
-  render: function Render() {
+  argTypes: {
+    ...hiddenArgTypes,
+    sentiment: {
+      control: 'radio',
+      options: ['negative', 'warning', 'neutral', 'success'],
+    },
+  },
+  render: function Render({ sentiment }) {
     const [expandedStates, setExpandedStates] = useState<Record<string, boolean>>({
       default: true,
       image: true,
@@ -392,7 +380,7 @@ export const MediaTypes: Story = {
     return (
       <>
         <CriticalBanner
-          sentiment="neutral"
+          sentiment={sentiment}
           title="Default status icon"
           description="When no media is provided, the sentiment's default icon is displayed."
           action={{ label: 'Continue', onClick: fn() }}
@@ -400,7 +388,7 @@ export const MediaTypes: Story = {
           onToggle={() => toggle('default')}
         />
         <CriticalBanner
-          sentiment="neutral"
+          sentiment={sentiment}
           title="Custom image"
           description="Your card has been blocked for security reasons."
           media={{ imgSrc: '../../wise-card.svg', 'aria-label': 'Wise debit card' }}
@@ -409,7 +397,7 @@ export const MediaTypes: Story = {
           onToggle={() => toggle('image')}
         />
         <CriticalBanner
-          sentiment="neutral"
+          sentiment={sentiment}
           title="Avatar with photo"
           description="The default badge is the status icon for the sentiment."
           media={{ avatar: { imgSrc: '../../avatar-rectangle-fox.webp' } }}
@@ -418,7 +406,7 @@ export const MediaTypes: Story = {
           onToggle={() => toggle('avatarPhoto')}
         />
         <CriticalBanner
-          sentiment="neutral"
+          sentiment={sentiment}
           title="Avatar with initials"
           description="The default badge is the status icon for the sentiment."
           media={{ avatar: { profileName: 'John Doe' } }}
@@ -427,7 +415,7 @@ export const MediaTypes: Story = {
           onToggle={() => toggle('avatarInitials')}
         />
         <CriticalBanner
-          sentiment="neutral"
+          sentiment={sentiment}
           title="Avatar with custom icon"
           description="The default badge is the status icon for the sentiment."
           media={{ avatar: { asset: <Bank title="Bank account" /> } }}
@@ -436,7 +424,7 @@ export const MediaTypes: Story = {
           onToggle={() => toggle('avatarIcon')}
         />
         <CriticalBanner
-          sentiment="neutral"
+          sentiment={sentiment}
           title="Business profile with badge"
           description="Your business account requires additional documentation."
           media={{ avatar: { profileType: 'BUSINESS', badge: { flagCode: 'GB' } } }}
@@ -597,25 +585,6 @@ export const MobileOverhang: Story = {
   },
 };
-/**
- * Mobile-only entry animation: the banner reveals from above.
- */
-export const AnimatedEntry: Story = {
-  args: {
-    title: 'Your account is restricted.',
-    description: 'Review your personal details to get your account active again.',
-    action: { label: 'Review details', onClick: fn() },
-  },
-  argTypes: hiddenArgTypes,
-  render: (args) => <AnimatedEntryPreview {...args} />,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      canvas: { sourceState: 'hidden' },
-    },
-  },
-};
 /**
  * The text container is capped at 480px for optimal readability, even though
  * the banner itself stretches to the full available width.

package/src/prompt/CriticalBanner/CriticalBanner.test.story.tsx CHANGED Viewed

@@ -25,6 +25,19 @@ const ANIMATION_DURATION = 200; // 150ms animation + 50ms buffer
 const longDescription =
   'We have detected unusual activity on your account that does not match your typical usage patterns. To protect your funds and personal information, we have temporarily restricted access. Please verify your identity to restore full access to your account.';
+const BACKGROUND_SCROLL_CONTENT = [
+  'Manage your card settings, limits, and delivery details from this page.',
+  'Your recent payments, subscriptions, and cash withdrawals will appear here.',
+  'Freeze your card any time if it is lost, stolen, or somewhere unexpected.',
+  'Set spending limits for online, in-store, and contactless payments.',
+  'Add your card to a digital wallet for quicker checkout in supported stores.',
+  'Choose the currency balance you want to spend from before you travel.',
+  'Review fees before using an ATM or paying in a currency you do not hold.',
+  'Order a replacement card if yours is damaged or about to expire.',
+  'Keep your delivery address up to date so new cards arrive in the right place.',
+  'Contact support if a card payment looks unfamiliar or incorrect.',
+];
 function AllVariants({ gap = '1rem' }: { gap?: string }) {
   const [states, setStates] = useState({
     negativeExpanded: true,
@@ -137,21 +150,58 @@ export const MobileVariants: Story = {
   ...withVariantConfig(['mobile']),
 };
-/** Mobile entry animation visual regression test. */
-export const AnimatedEntryMobile: Story = {
-  render: function Render() {
+/** Neutral background regression test with page content scrolled under the mobile overhang. */
+export const BackgroundIsNotTransparent: Story = {
+  args: {
+    sentiment: 'neutral',
+  },
+  argTypes: {
+    sentiment: {
+      control: 'radio',
+      options: ['negative', 'warning', 'neutral', 'success'],
+    },
+  },
+  render: function Render({ sentiment }) {
     return (
-      <CriticalBanner
-        sentiment="negative"
-        title="Your account is restricted."
-        description="Review your personal details to get your account active again."
-        action={{ label: 'Review details', onClick: fn() }}
-      />
+      <div
+        data-testid="background-scroll-container"
+        style={{
+          width: 350,
+          height: 640,
+          overflowY: 'auto',
+          border: '1px solid var(--color-border-neutral)',
+        }}
+      >
+        <div style={{ position: 'sticky', top: 0, zIndex: 1 }}>
+          <CriticalBanner
+            sentiment={sentiment}
+            title="Your account requires verification"
+            description="Please verify your identity to continue using all features."
+            action={{ label: 'Verify now', onClick: fn() }}
+          />
+        </div>
+        <main style={{ padding: 'var(--size-24) var(--size-16) var(--size-48)' }}>
+          <h1 style={{ margin: '0 0 var(--size-8)', fontSize: 32, lineHeight: 1.1 }}>Debit card</h1>
+          <p style={{ margin: '0 0 var(--size-24)' }}>Spend in 150+ currencies</p>
+          {BACKGROUND_SCROLL_CONTENT.map((paragraph) => (
+            <p key={paragraph}>{paragraph}</p>
+          ))}
+        </main>
+      </div>
     );
   },
+  play: async ({ canvasElement }) => {
+    const scrollContainer = canvasElement.querySelector(
+      '[data-testid="background-scroll-container"]',
+    );
+    if (scrollContainer) {
+      scrollContainer.scrollTop = 250;
+    }
+  },
   ...withVariantConfig(['mobile'], {
     parameters: {
-      chromatic: { pauseAnimationAtEnd: true },
+      controls: { include: ['sentiment'] },
     },
   }),
 };

package/src/prompt/CriticalBanner/CriticalBanner.test.tsx CHANGED Viewed

@@ -15,7 +15,7 @@ describe('CriticalBanner', () => {
     resetLiveRegionAnnouncementQueue();
   });
-  it('applies mobile overhang classes by default', () => {
+  it('renders mobile overhang markup without entry animation markup', () => {
     const { container } = render(
       <CriticalBanner {...defaultProps} data-testid="critical-banner" />,
     );
@@ -23,15 +23,7 @@ describe('CriticalBanner', () => {
     expect(screen.getByTestId('critical-banner')).toBeInTheDocument();
     expect(container.querySelector('.wds-critical-banner-overhang')).toBeInTheDocument();
     expect(container.querySelector('.wds-critical-banner-overhang-query')).toBeInTheDocument();
-  });
-  it('wraps the banner in the css entry animation structure', () => {
-    const { container } = render(
-      <CriticalBanner {...defaultProps} data-testid="critical-banner" />,
-    );
-    expect(screen.getByTestId('critical-banner')).toBeInTheDocument();
-    expect(container.querySelector('.wds-critical-banner__entry-mask')).toBeInTheDocument();
-    expect(container.querySelector('.wds-critical-banner__entry-track')).toBeInTheDocument();
+    expect(container.querySelector('.wds-critical-banner__entry-mask')).not.toBeInTheDocument();
+    expect(container.querySelector('.wds-critical-banner__entry-track')).not.toBeInTheDocument();
   });
 });

package/src/prompt/CriticalBanner/CriticalBanner.tsx CHANGED Viewed

@@ -179,11 +179,7 @@ export const CriticalBanner = ({
         actionSecondaryLabel: actionSecondary?.label,
       })}
     >
-      <div className="wds-critical-banner-overhang-query">
-        <div className="wds-critical-banner__entry-mask">
-          <div className="wds-critical-banner__entry-track">{bannerSurface}</div>
-        </div>
-      </div>
+      <div className="wds-critical-banner-overhang-query">{bannerSurface}</div>
     </LiveRegion>
   );
 };