npm - @transferwise/components - Versions diffs - 0.0.0-experimental-cf1eaec → 0.0.0-experimental-c087593 - Mend

@transferwise/components 0.0.0-experimental-cf1eaec → 0.0.0-experimental-c087593

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 (17) hide show

package/build/main.css CHANGED Viewed

@@ -32093,6 +32093,42 @@ html:not([dir="rtl"]) .np-navigation-option {
   }
 }
+.wds-critical-banner-overhang-query {
+  container-name: critical-banner-overhang;
+  container-type: inline-size;
+  inline-size: 100%;
+}
+@container critical-banner-overhang (max-width: 600px) {
+  .wds-critical-banner-overhang-query {
+    --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;
+  }
+  .wds-critical-banner-overhang-query .wds-critical-banner-overhang {
+    margin-bottom: var(--critical-banner-mobile-overhang-size);
+  }
+  .wds-critical-banner-overhang-query .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: var(--critical-banner-background);
+    -webkit-mask: var(--critical-banner-overhang-mask);
+    mask: var(--critical-banner-overhang-mask);
+  }
+}
 @media (prefers-reduced-motion: reduce) {
   .wds-critical-banner__description,
   .wds-critical-banner__title,

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

@@ -67,7 +67,7 @@ const CriticalBanner = ({
     sentiment: sentiment,
     emphasis: sentiment === 'neutral' ? 'base' : 'elevated',
     "data-testid": testId,
-    className: clsx.clsx('wds-critical-banner', {
+    className: clsx.clsx('wds-critical-banner', 'wds-critical-banner-overhang', {
       'wds-critical-banner--collapsed': !resolvedExpanded,
       'wds-critical-banner--with-two-actions': !!actionSecondary
     }, className),
@@ -139,7 +139,10 @@ const CriticalBanner = ({
       actionLabel: action?.label,
       actionSecondaryLabel: actionSecondary?.label
     }),
-    children: bannerSurface
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "wds-critical-banner-overhang-query",
+      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 {\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 {bannerSurface}\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

@@ -65,7 +65,7 @@ const CriticalBanner = ({
     sentiment: sentiment,
     emphasis: sentiment === 'neutral' ? 'base' : 'elevated',
     "data-testid": testId,
-    className: clsx('wds-critical-banner', {
+    className: clsx('wds-critical-banner', 'wds-critical-banner-overhang', {
       'wds-critical-banner--collapsed': !resolvedExpanded,
       'wds-critical-banner--with-two-actions': !!actionSecondary
     }, className),
@@ -137,7 +137,10 @@ const CriticalBanner = ({
       actionLabel: action?.label,
       actionSecondaryLabel: actionSecondary?.label
     }),
-    children: bannerSurface
+    children: /*#__PURE__*/jsx("div", {
+      className: "wds-critical-banner-overhang-query",
+      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 {\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 {bannerSurface}\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/main.css CHANGED Viewed

@@ -32093,6 +32093,42 @@ html:not([dir="rtl"]) .np-navigation-option {
   }
 }
+.wds-critical-banner-overhang-query {
+  container-name: critical-banner-overhang;
+  container-type: inline-size;
+  inline-size: 100%;
+}
+@container critical-banner-overhang (max-width: 600px) {
+  .wds-critical-banner-overhang-query {
+    --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;
+  }
+  .wds-critical-banner-overhang-query .wds-critical-banner-overhang {
+    margin-bottom: var(--critical-banner-mobile-overhang-size);
+  }
+  .wds-critical-banner-overhang-query .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: var(--critical-banner-background);
+    -webkit-mask: var(--critical-banner-overhang-mask);
+    mask: var(--critical-banner-overhang-mask);
+  }
+}
 @media (prefers-reduced-motion: reduce) {
   .wds-critical-banner__description,
   .wds-critical-banner__title,

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

@@ -122,6 +122,40 @@
     min-width: fit-content;
   }
 }
+.wds-critical-banner-overhang-query {
+  container-name: critical-banner-overhang;
+  container-type: inline-size;
+  inline-size: 100%;
+}
+@container critical-banner-overhang (max-width: 600px) {
+  .wds-critical-banner-overhang-query {
+    --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;
+  }
+  .wds-critical-banner-overhang-query .wds-critical-banner-overhang {
+    margin-bottom: var(--critical-banner-mobile-overhang-size);
+  }
+  .wds-critical-banner-overhang-query .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: var(--critical-banner-background);
+    -webkit-mask: var(--critical-banner-overhang-mask);
+    mask: var(--critical-banner-overhang-mask);
+  }
+}
 @media (prefers-reduced-motion: reduce) {
   .wds-critical-banner__description,
   .wds-critical-banner__title,

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,~~gCA2HrB~~,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": "0.0.0-experimental-cf1eaec",
+  "version": "0.0.0-experimental-c087593",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/main.css CHANGED Viewed

@@ -32093,6 +32093,42 @@ html:not([dir="rtl"]) .np-navigation-option {
   }
 }
+.wds-critical-banner-overhang-query {
+  container-name: critical-banner-overhang;
+  container-type: inline-size;
+  inline-size: 100%;
+}
+@container critical-banner-overhang (max-width: 600px) {
+  .wds-critical-banner-overhang-query {
+    --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;
+  }
+  .wds-critical-banner-overhang-query .wds-critical-banner-overhang {
+    margin-bottom: var(--critical-banner-mobile-overhang-size);
+  }
+  .wds-critical-banner-overhang-query .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: var(--critical-banner-background);
+    -webkit-mask: var(--critical-banner-overhang-mask);
+    mask: var(--critical-banner-overhang-mask);
+  }
+}
 @media (prefers-reduced-motion: reduce) {
   .wds-critical-banner__description,
   .wds-critical-banner__title,

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

@@ -122,6 +122,40 @@
     min-width: fit-content;
   }
 }
+.wds-critical-banner-overhang-query {
+  container-name: critical-banner-overhang;
+  container-type: inline-size;
+  inline-size: 100%;
+}
+@container critical-banner-overhang (max-width: 600px) {
+  .wds-critical-banner-overhang-query {
+    --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;
+  }
+  .wds-critical-banner-overhang-query .wds-critical-banner-overhang {
+    margin-bottom: var(--critical-banner-mobile-overhang-size);
+  }
+  .wds-critical-banner-overhang-query .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: var(--critical-banner-background);
+    -webkit-mask: var(--critical-banner-overhang-mask);
+    mask: var(--critical-banner-overhang-mask);
+  }
+}
 @media (prefers-reduced-motion: reduce) {
   .wds-critical-banner__description,
   .wds-critical-banner__title,

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

@@ -10,7 +10,7 @@
   --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.
+  // for neutral banners and their mobile overhang.
   --critical-banner-background:
     linear-gradient(
       var(--critical-banner-background-surface),
@@ -151,6 +151,48 @@
   }
 }
+.wds-critical-banner-overhang-query {
+  container-name: critical-banner-overhang;
+  container-type: inline-size;
+  inline-size: 100%;
+  @container critical-banner-overhang (max-width: @wds-critical-banner-mobile-overhang-max) {
+    --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;
+    .wds-critical-banner-overhang {
+      margin-bottom: var(--critical-banner-mobile-overhang-size);
+      &::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: var(--critical-banner-background);
+        -webkit-mask: var(--critical-banner-overhang-mask);
+        mask: var(--critical-banner-overhang-mask);
+      }
+    }
+  }
+}
 // Reduced motion support
 @media (prefers-reduced-motion: reduce) {
   .wds-critical-banner__description,

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

@@ -560,6 +560,31 @@ export const Responsiveness: Story = {
   },
 };
+/**
+ * Mobile viewport regression test for the overhang.
+ * The overhang is always applied below 600px.
+ */
+export const MobileOverhang: Story = {
+  argTypes: hiddenArgTypes,
+  render: function Render() {
+    return (
+      <div style={{ width: 350 }}>
+        <CriticalBanner
+          sentiment="negative"
+          title="Your account requires verification"
+          description="Please verify your identity to continue using all features."
+          action={{ label: 'Verify now', onClick: fn() }}
+        />
+      </div>
+    );
+  },
+  parameters: {
+    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

@@ -150,7 +150,7 @@ export const MobileVariants: Story = {
   ...withVariantConfig(['mobile']),
 };
-/** Neutral background regression test with page content scrolled under the sticky banner. */
+/** Neutral background regression test with page content scrolled under the mobile overhang. */
 export const BackgroundIsNotTransparent: Story = {
   args: {
     sentiment: 'neutral',

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

@@ -15,14 +15,14 @@ describe('CriticalBanner', () => {
     resetLiveRegionAnnouncementQueue();
   });
-  it('renders without mobile overhang or entry animation markup', () => {
+  it('renders mobile overhang markup without entry animation markup', () => {
     const { container } = render(
       <CriticalBanner {...defaultProps} data-testid="critical-banner" />,
     );
     expect(screen.getByTestId('critical-banner')).toBeInTheDocument();
-    expect(container.querySelector('.wds-critical-banner-overhang')).not.toBeInTheDocument();
-    expect(container.querySelector('.wds-critical-banner-overhang-query')).not.toBeInTheDocument();
+    expect(container.querySelector('.wds-critical-banner-overhang')).toBeInTheDocument();
+    expect(container.querySelector('.wds-critical-banner-overhang-query')).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

@@ -89,6 +89,7 @@ export const CriticalBanner = ({
       data-testid={testId}
       className={clsx(
         'wds-critical-banner',
+        'wds-critical-banner-overhang',
         {
           'wds-critical-banner--collapsed': !resolvedExpanded,
           'wds-critical-banner--with-two-actions': !!actionSecondary,
@@ -178,7 +179,7 @@ export const CriticalBanner = ({
         actionSecondaryLabel: actionSecondary?.label,
       })}
     >
-      {bannerSurface}
+      <div className="wds-critical-banner-overhang-query">{bannerSurface}</div>
     </LiveRegion>
   );
 };

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

@@ -3,4 +3,5 @@
 // * collapse toggle is visible below collapsible-max token
 // At some point in the not too distant future hopefully these two value will be the same but because of launchpad quirks, for now they'll be different
 @wds-critical-banner-action-wrapper-max: 600px;
+@wds-critical-banner-mobile-overhang-max: 600px;
 @wds-critical-banner-collapsible-max: 768px;