@transferwise/components 46.146.0 → 46.148.0

package/build/main.css

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

package/build/nudge/Nudge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Nudge.js","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, type IllustrationNames } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState, MouseEvent, useCallback } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport Link from '../link';\nimport type { AlertAction } from '../alert';\nimport IconButton from '../iconButton';\nimport { Cross } from '@transferwise/icons';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\n\n// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too\nexport const STORAGE_NAME = 'dismissedNudges';\n\nconst getLocalStorage = (): string[] => {\n  try {\n    const storageItem = localStorage.getItem(STORAGE_NAME);\n\n    if (storageItem) {\n      const storage: unknown = JSON.parse(storageItem);\n\n      if (Array.isArray(storage)) {\n        return storage.map((item) => String(item));\n      }\n    }\n  } catch (error) {}\n\n  return [];\n};\n\ntype MediaNameType =\n  | `${Assets.GLOBE}`\n  | `${Assets.LOCK}`\n  | `${Assets.WALLET}`\n  | `${Assets.GEAR}`\n  | `${Assets.INVITE_LETTER}`\n  | `${Assets.PERSONAL_CARD}`\n  | `${Assets.BUSINESS_CARD}`\n  | `${Assets.HEART}`\n  | `${Assets.MULTI_CURRENCY}`\n  | `${Assets.SHOPPING_BAG}`\n  | `${Assets.FLOWER}`\n  | `${Assets.GIFT_BOX}`\n  | `${Assets.BACKPACK}`;\n\ntype BaseProps = {\n  /** @deprecated Use `mediaName` property instead. */\n  media?: ReactNode;\n  /** Media name  */\n  mediaName?: MediaNameType;\n  title: ReactNode;\n  link?: ReactNode;\n  href?: string;\n  onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;\n  /** Fired when the user clicks on close button */\n  onDismiss?: () => void;\n  /** An optional call to action to sit under the main body of the nudge. If your label is short, use aria-label to provide more context */\n  action?: AlertAction;\n  className?: string;\n};\n\nexport interface OptionalId extends BaseProps {\n  id?: string;\n  persistDismissal?: false;\n  isPreviouslyDismissed?: undefined;\n}\n\nexport interface RequiredPersistProps extends BaseProps {\n  /** This ID should be completely unique to the page and feature as it uses a shared array which could conflict with other nudges in Wise */\n  id: string;\n  /** Use persist dismissal to keep the nudge dismissed using the browser's localStorage */\n  persistDismissal: true;\n  /**\n   * Fired on mount for determining if nudge has been dismissed before\n   *\n   * @param {boolean}  value - set to true if dismissed previously\n   */\n  isPreviouslyDismissed?: (value: boolean) => void;\n}\n\nexport type Props = OptionalId | RequiredPersistProps;\n\nconst Nudge = ({\n  mediaName,\n  title,\n  link,\n  href,\n  onClick,\n  onDismiss,\n  persistDismissal,\n  isPreviouslyDismissed,\n  id,\n  className,\n  action,\n}: Props) => {\n  const intl = useIntl();\n  const getIsDismissed = useCallback(\n    () => (persistDismissal && id ? !!getLocalStorage()?.find((item) => item === id) : false),\n    [persistDismissal, id],\n  );\n\n  const [nudgeState, setNudgeState] = useState(() => ({\n    isDismissed: getIsDismissed(),\n    isMounted: false,\n  }));\n\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- Setting mount state in mount effect\n    setNudgeState((prev) => ({ ...prev, isMounted: true }));\n  }, []);\n\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing dismissed state from localStorage on prop change\n    setNudgeState((prev) => ({ ...prev, isDismissed: getIsDismissed() }));\n  }, [getIsDismissed, id, persistDismissal]);\n\n  const { isDismissed } = nudgeState;\n\n  const handleOnDismiss = () => {\n    const dismissedNudgesStorage = getLocalStorage();\n\n    if (persistDismissal && id) {\n      try {\n        localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));\n      } catch {}\n\n      setNudgeState((prev) => ({ ...prev, isDismissed: true }));\n    }\n\n    if (onDismiss) {\n      onDismiss();\n    }\n  };\n\n  useEffect(() => {\n    if (persistDismissal && id && isPreviouslyDismissed) {\n      const dismissedNudgesStorage = getLocalStorage();\n      const wasDismissed = !!dismissedNudgesStorage?.find((item) => item === id);\n      isPreviouslyDismissed(wasDismissed);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [id, persistDismissal]);\n\n  if (persistDismissal && (isDismissed || !nudgeState.isMounted)) {\n    return null;\n  }\n\n  return (\n    <div className={clsx('wds-nudge', className)} id={id}>\n      {!!mediaName && (\n        <div className=\"wds-nudge-media\">\n          <Illustration\n            name={mediaName}\n            className={clsx(`wds-nudge-media-${mediaName}`)}\n            size=\"small\"\n            disablePadding\n            alt=\"\"\n          />\n        </div>\n      )}\n      <div className=\"wds-nudge-container\">\n        <div className=\"wds-nudge-content\">\n          <Body type={Typography.BODY_LARGE} className={clsx('wds-nudge-body')}>\n            {title}\n          </Body>\n          {/* Merge these two Link instances into one */}\n          {link && (\n            <Link\n              href={href}\n              type={Typography.LINK_LARGE}\n              className=\"wds-nudge-link\"\n              onClick={onClick}\n            >\n              {link}\n            </Link>\n          )}\n          {action && (\n            <Link\n              href={action.href}\n              target={action.target}\n              className=\"m-t-1\"\n              aria-label={action['aria-label']}\n              type={Typography.LINK_LARGE}\n              onClick={action.onClick}\n            >\n              {action.text}\n            </Link>\n          )}\n        </div>\n        {onDismiss || persistDismissal ? (\n          <IconButton\n            size={24}\n            priority=\"tertiary\"\n            aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n            onClick={handleOnDismiss}\n          >\n            <Cross />\n          </IconButton>\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nexport default Nudge;\n"],"names":["STORAGE_NAME","getLocalStorage","storageItem","localStorage","getItem","storage","JSON","parse","Array","isArray","map","item","String","error","Nudge","mediaName","title","link","href","onClick","onDismiss","persistDismissal","isPreviouslyDismissed","id","className","action","intl","useIntl","getIsDismissed","useCallback","find","nudgeState","setNudgeState","useState","isDismissed","isMounted","useEffect","prev","handleOnDismiss","dismissedNudgesStorage","setItem","stringify","wasDismissed","_jsxs","clsx","children","_jsx","Illustration","name","size","disablePadding","alt","Body","type","Typography","BODY_LARGE","Link","LINK_LARGE","target","text","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","Cross"],"mappings":"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"}
+{"version":3,"file":"Nudge.js","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, type IllustrationNames } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState, MouseEvent, useCallback } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport Link from '../link';\nimport type { AlertAction } from '../alert';\nimport IconButton from '../iconButton';\nimport { Cross } from '@transferwise/icons';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\n\n// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too\nexport const STORAGE_NAME = 'dismissedNudges';\n\nconst getLocalStorage = (): string[] => {\n  try {\n    const storageItem = localStorage.getItem(STORAGE_NAME);\n\n    if (storageItem) {\n      const storage: unknown = JSON.parse(storageItem);\n\n      if (Array.isArray(storage)) {\n        return storage.map((item) => String(item));\n      }\n    }\n  } catch (error) {}\n\n  return [];\n};\n\ntype MediaNameType =\n  | `${Assets.GLOBE}`\n  | `${Assets.LOCK}`\n  | `${Assets.WALLET}`\n  | `${Assets.GEAR}`\n  | `${Assets.INVITE_LETTER}`\n  | `${Assets.PERSONAL_CARD}`\n  | `${Assets.BUSINESS_CARD}`\n  | `${Assets.HEART}`\n  | `${Assets.MULTI_CURRENCY}`\n  | `${Assets.SHOPPING_BAG}`\n  | `${Assets.FLOWER}`\n  | `${Assets.GIFT_BOX}`\n  | `${Assets.BACKPACK}`\n  | `${Assets.DOCUMENTS}`;\n\ntype BaseProps = {\n  /** @deprecated Use `mediaName` property instead. */\n  media?: ReactNode;\n  /** Media name  */\n  mediaName?: MediaNameType;\n  title: ReactNode;\n  link?: ReactNode;\n  href?: string;\n  onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;\n  /** Fired when the user clicks on close button */\n  onDismiss?: () => void;\n  /** An optional call to action to sit under the main body of the nudge. If your label is short, use aria-label to provide more context */\n  action?: AlertAction;\n  className?: string;\n};\n\nexport interface OptionalId extends BaseProps {\n  id?: string;\n  persistDismissal?: false;\n  isPreviouslyDismissed?: undefined;\n}\n\nexport interface RequiredPersistProps extends BaseProps {\n  /** This ID should be completely unique to the page and feature as it uses a shared array which could conflict with other nudges in Wise */\n  id: string;\n  /** Use persist dismissal to keep the nudge dismissed using the browser's localStorage */\n  persistDismissal: true;\n  /**\n   * Fired on mount for determining if nudge has been dismissed before\n   *\n   * @param {boolean}  value - set to true if dismissed previously\n   */\n  isPreviouslyDismissed?: (value: boolean) => void;\n}\n\nexport type Props = OptionalId | RequiredPersistProps;\n\nconst Nudge = ({\n  mediaName,\n  title,\n  link,\n  href,\n  onClick,\n  onDismiss,\n  persistDismissal,\n  isPreviouslyDismissed,\n  id,\n  className,\n  action,\n}: Props) => {\n  const intl = useIntl();\n  const getIsDismissed = useCallback(\n    () => (persistDismissal && id ? !!getLocalStorage()?.find((item) => item === id) : false),\n    [persistDismissal, id],\n  );\n\n  const [nudgeState, setNudgeState] = useState(() => ({\n    isDismissed: getIsDismissed(),\n    isMounted: false,\n  }));\n\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- Setting mount state in mount effect\n    setNudgeState((prev) => ({ ...prev, isMounted: true }));\n  }, []);\n\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing dismissed state from localStorage on prop change\n    setNudgeState((prev) => ({ ...prev, isDismissed: getIsDismissed() }));\n  }, [getIsDismissed, id, persistDismissal]);\n\n  const { isDismissed } = nudgeState;\n\n  const handleOnDismiss = () => {\n    const dismissedNudgesStorage = getLocalStorage();\n\n    if (persistDismissal && id) {\n      try {\n        localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));\n      } catch {}\n\n      setNudgeState((prev) => ({ ...prev, isDismissed: true }));\n    }\n\n    if (onDismiss) {\n      onDismiss();\n    }\n  };\n\n  useEffect(() => {\n    if (persistDismissal && id && isPreviouslyDismissed) {\n      const dismissedNudgesStorage = getLocalStorage();\n      const wasDismissed = !!dismissedNudgesStorage?.find((item) => item === id);\n      isPreviouslyDismissed(wasDismissed);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [id, persistDismissal]);\n\n  if (persistDismissal && (isDismissed || !nudgeState.isMounted)) {\n    return null;\n  }\n\n  return (\n    <div className={clsx('wds-nudge', className)} id={id}>\n      {!!mediaName && (\n        <div className=\"wds-nudge-media\">\n          <Illustration\n            name={mediaName}\n            className={clsx(`wds-nudge-media-${mediaName}`)}\n            size=\"small\"\n            disablePadding\n            alt=\"\"\n          />\n        </div>\n      )}\n      <div className=\"wds-nudge-container\">\n        <div className=\"wds-nudge-content\">\n          <Body type={Typography.BODY_LARGE} className={clsx('wds-nudge-body')}>\n            {title}\n          </Body>\n          {/* Merge these two Link instances into one */}\n          {link && (\n            <Link\n              href={href}\n              type={Typography.LINK_LARGE}\n              className=\"wds-nudge-link\"\n              onClick={onClick}\n            >\n              {link}\n            </Link>\n          )}\n          {action && (\n            <Link\n              href={action.href}\n              target={action.target}\n              className=\"m-t-1\"\n              aria-label={action['aria-label']}\n              type={Typography.LINK_LARGE}\n              onClick={action.onClick}\n            >\n              {action.text}\n            </Link>\n          )}\n        </div>\n        {onDismiss || persistDismissal ? (\n          <IconButton\n            size={24}\n            priority=\"tertiary\"\n            aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n            onClick={handleOnDismiss}\n          >\n            <Cross />\n          </IconButton>\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nexport default Nudge;\n"],"names":["STORAGE_NAME","getLocalStorage","storageItem","localStorage","getItem","storage","JSON","parse","Array","isArray","map","item","String","error","Nudge","mediaName","title","link","href","onClick","onDismiss","persistDismissal","isPreviouslyDismissed","id","className","action","intl","useIntl","getIsDismissed","useCallback","find","nudgeState","setNudgeState","useState","isDismissed","isMounted","useEffect","prev","handleOnDismiss","dismissedNudgesStorage","setItem","stringify","wasDismissed","_jsxs","clsx","children","_jsx","Illustration","name","size","disablePadding","alt","Body","type","Typography","BODY_LARGE","Link","LINK_LARGE","target","text","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","Cross"],"mappings":"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"}

package/build/nudge/Nudge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Nudge.mjs","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, type IllustrationNames } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState, MouseEvent, useCallback } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport Link from '../link';\nimport type { AlertAction } from '../alert';\nimport IconButton from '../iconButton';\nimport { Cross } from '@transferwise/icons';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\n\n// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too\nexport const STORAGE_NAME = 'dismissedNudges';\n\nconst getLocalStorage = (): string[] => {\n  try {\n    const storageItem = localStorage.getItem(STORAGE_NAME);\n\n    if (storageItem) {\n      const storage: unknown = JSON.parse(storageItem);\n\n      if (Array.isArray(storage)) {\n        return storage.map((item) => String(item));\n      }\n    }\n  } catch (error) {}\n\n  return [];\n};\n\ntype MediaNameType =\n  | `${Assets.GLOBE}`\n  | `${Assets.LOCK}`\n  | `${Assets.WALLET}`\n  | `${Assets.GEAR}`\n  | `${Assets.INVITE_LETTER}`\n  | `${Assets.PERSONAL_CARD}`\n  | `${Assets.BUSINESS_CARD}`\n  | `${Assets.HEART}`\n  | `${Assets.MULTI_CURRENCY}`\n  | `${Assets.SHOPPING_BAG}`\n  | `${Assets.FLOWER}`\n  | `${Assets.GIFT_BOX}`\n  | `${Assets.BACKPACK}`;\n\ntype BaseProps = {\n  /** @deprecated Use `mediaName` property instead. */\n  media?: ReactNode;\n  /** Media name  */\n  mediaName?: MediaNameType;\n  title: ReactNode;\n  link?: ReactNode;\n  href?: string;\n  onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;\n  /** Fired when the user clicks on close button */\n  onDismiss?: () => void;\n  /** An optional call to action to sit under the main body of the nudge. If your label is short, use aria-label to provide more context */\n  action?: AlertAction;\n  className?: string;\n};\n\nexport interface OptionalId extends BaseProps {\n  id?: string;\n  persistDismissal?: false;\n  isPreviouslyDismissed?: undefined;\n}\n\nexport interface RequiredPersistProps extends BaseProps {\n  /** This ID should be completely unique to the page and feature as it uses a shared array which could conflict with other nudges in Wise */\n  id: string;\n  /** Use persist dismissal to keep the nudge dismissed using the browser's localStorage */\n  persistDismissal: true;\n  /**\n   * Fired on mount for determining if nudge has been dismissed before\n   *\n   * @param {boolean}  value - set to true if dismissed previously\n   */\n  isPreviouslyDismissed?: (value: boolean) => void;\n}\n\nexport type Props = OptionalId | RequiredPersistProps;\n\nconst Nudge = ({\n  mediaName,\n  title,\n  link,\n  href,\n  onClick,\n  onDismiss,\n  persistDismissal,\n  isPreviouslyDismissed,\n  id,\n  className,\n  action,\n}: Props) => {\n  const intl = useIntl();\n  const getIsDismissed = useCallback(\n    () => (persistDismissal && id ? !!getLocalStorage()?.find((item) => item === id) : false),\n    [persistDismissal, id],\n  );\n\n  const [nudgeState, setNudgeState] = useState(() => ({\n    isDismissed: getIsDismissed(),\n    isMounted: false,\n  }));\n\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- Setting mount state in mount effect\n    setNudgeState((prev) => ({ ...prev, isMounted: true }));\n  }, []);\n\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing dismissed state from localStorage on prop change\n    setNudgeState((prev) => ({ ...prev, isDismissed: getIsDismissed() }));\n  }, [getIsDismissed, id, persistDismissal]);\n\n  const { isDismissed } = nudgeState;\n\n  const handleOnDismiss = () => {\n    const dismissedNudgesStorage = getLocalStorage();\n\n    if (persistDismissal && id) {\n      try {\n        localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));\n      } catch {}\n\n      setNudgeState((prev) => ({ ...prev, isDismissed: true }));\n    }\n\n    if (onDismiss) {\n      onDismiss();\n    }\n  };\n\n  useEffect(() => {\n    if (persistDismissal && id && isPreviouslyDismissed) {\n      const dismissedNudgesStorage = getLocalStorage();\n      const wasDismissed = !!dismissedNudgesStorage?.find((item) => item === id);\n      isPreviouslyDismissed(wasDismissed);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [id, persistDismissal]);\n\n  if (persistDismissal && (isDismissed || !nudgeState.isMounted)) {\n    return null;\n  }\n\n  return (\n    <div className={clsx('wds-nudge', className)} id={id}>\n      {!!mediaName && (\n        <div className=\"wds-nudge-media\">\n          <Illustration\n            name={mediaName}\n            className={clsx(`wds-nudge-media-${mediaName}`)}\n            size=\"small\"\n            disablePadding\n            alt=\"\"\n          />\n        </div>\n      )}\n      <div className=\"wds-nudge-container\">\n        <div className=\"wds-nudge-content\">\n          <Body type={Typography.BODY_LARGE} className={clsx('wds-nudge-body')}>\n            {title}\n          </Body>\n          {/* Merge these two Link instances into one */}\n          {link && (\n            <Link\n              href={href}\n              type={Typography.LINK_LARGE}\n              className=\"wds-nudge-link\"\n              onClick={onClick}\n            >\n              {link}\n            </Link>\n          )}\n          {action && (\n            <Link\n              href={action.href}\n              target={action.target}\n              className=\"m-t-1\"\n              aria-label={action['aria-label']}\n              type={Typography.LINK_LARGE}\n              onClick={action.onClick}\n            >\n              {action.text}\n            </Link>\n          )}\n        </div>\n        {onDismiss || persistDismissal ? (\n          <IconButton\n            size={24}\n            priority=\"tertiary\"\n            aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n            onClick={handleOnDismiss}\n          >\n            <Cross />\n          </IconButton>\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nexport default Nudge;\n"],"names":["STORAGE_NAME","getLocalStorage","storageItem","localStorage","getItem","storage","JSON","parse","Array","isArray","map","item","String","error","Nudge","mediaName","title","link","href","onClick","onDismiss","persistDismissal","isPreviouslyDismissed","id","className","action","intl","useIntl","getIsDismissed","useCallback","find","nudgeState","setNudgeState","useState","isDismissed","isMounted","useEffect","prev","handleOnDismiss","dismissedNudgesStorage","setItem","stringify","wasDismissed","_jsxs","clsx","children","_jsx","Illustration","name","size","disablePadding","alt","Body","type","Typography","BODY_LARGE","Link","LINK_LARGE","target","text","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","Cross"],"mappings":"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"}
+{"version":3,"file":"Nudge.mjs","sources":["../../src/nudge/Nudge.tsx"],"sourcesContent":["import { Illustration, Assets, type IllustrationNames } from '@wise/art';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState, MouseEvent, useCallback } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport Link from '../link';\nimport type { AlertAction } from '../alert';\nimport IconButton from '../iconButton';\nimport { Cross } from '@transferwise/icons';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\n\n// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too\nexport const STORAGE_NAME = 'dismissedNudges';\n\nconst getLocalStorage = (): string[] => {\n  try {\n    const storageItem = localStorage.getItem(STORAGE_NAME);\n\n    if (storageItem) {\n      const storage: unknown = JSON.parse(storageItem);\n\n      if (Array.isArray(storage)) {\n        return storage.map((item) => String(item));\n      }\n    }\n  } catch (error) {}\n\n  return [];\n};\n\ntype MediaNameType =\n  | `${Assets.GLOBE}`\n  | `${Assets.LOCK}`\n  | `${Assets.WALLET}`\n  | `${Assets.GEAR}`\n  | `${Assets.INVITE_LETTER}`\n  | `${Assets.PERSONAL_CARD}`\n  | `${Assets.BUSINESS_CARD}`\n  | `${Assets.HEART}`\n  | `${Assets.MULTI_CURRENCY}`\n  | `${Assets.SHOPPING_BAG}`\n  | `${Assets.FLOWER}`\n  | `${Assets.GIFT_BOX}`\n  | `${Assets.BACKPACK}`\n  | `${Assets.DOCUMENTS}`;\n\ntype BaseProps = {\n  /** @deprecated Use `mediaName` property instead. */\n  media?: ReactNode;\n  /** Media name  */\n  mediaName?: MediaNameType;\n  title: ReactNode;\n  link?: ReactNode;\n  href?: string;\n  onClick?: (event?: MouseEvent<HTMLSpanElement>) => void;\n  /** Fired when the user clicks on close button */\n  onDismiss?: () => void;\n  /** An optional call to action to sit under the main body of the nudge. If your label is short, use aria-label to provide more context */\n  action?: AlertAction;\n  className?: string;\n};\n\nexport interface OptionalId extends BaseProps {\n  id?: string;\n  persistDismissal?: false;\n  isPreviouslyDismissed?: undefined;\n}\n\nexport interface RequiredPersistProps extends BaseProps {\n  /** This ID should be completely unique to the page and feature as it uses a shared array which could conflict with other nudges in Wise */\n  id: string;\n  /** Use persist dismissal to keep the nudge dismissed using the browser's localStorage */\n  persistDismissal: true;\n  /**\n   * Fired on mount for determining if nudge has been dismissed before\n   *\n   * @param {boolean}  value - set to true if dismissed previously\n   */\n  isPreviouslyDismissed?: (value: boolean) => void;\n}\n\nexport type Props = OptionalId | RequiredPersistProps;\n\nconst Nudge = ({\n  mediaName,\n  title,\n  link,\n  href,\n  onClick,\n  onDismiss,\n  persistDismissal,\n  isPreviouslyDismissed,\n  id,\n  className,\n  action,\n}: Props) => {\n  const intl = useIntl();\n  const getIsDismissed = useCallback(\n    () => (persistDismissal && id ? !!getLocalStorage()?.find((item) => item === id) : false),\n    [persistDismissal, id],\n  );\n\n  const [nudgeState, setNudgeState] = useState(() => ({\n    isDismissed: getIsDismissed(),\n    isMounted: false,\n  }));\n\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- Setting mount state in mount effect\n    setNudgeState((prev) => ({ ...prev, isMounted: true }));\n  }, []);\n\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing dismissed state from localStorage on prop change\n    setNudgeState((prev) => ({ ...prev, isDismissed: getIsDismissed() }));\n  }, [getIsDismissed, id, persistDismissal]);\n\n  const { isDismissed } = nudgeState;\n\n  const handleOnDismiss = () => {\n    const dismissedNudgesStorage = getLocalStorage();\n\n    if (persistDismissal && id) {\n      try {\n        localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));\n      } catch {}\n\n      setNudgeState((prev) => ({ ...prev, isDismissed: true }));\n    }\n\n    if (onDismiss) {\n      onDismiss();\n    }\n  };\n\n  useEffect(() => {\n    if (persistDismissal && id && isPreviouslyDismissed) {\n      const dismissedNudgesStorage = getLocalStorage();\n      const wasDismissed = !!dismissedNudgesStorage?.find((item) => item === id);\n      isPreviouslyDismissed(wasDismissed);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [id, persistDismissal]);\n\n  if (persistDismissal && (isDismissed || !nudgeState.isMounted)) {\n    return null;\n  }\n\n  return (\n    <div className={clsx('wds-nudge', className)} id={id}>\n      {!!mediaName && (\n        <div className=\"wds-nudge-media\">\n          <Illustration\n            name={mediaName}\n            className={clsx(`wds-nudge-media-${mediaName}`)}\n            size=\"small\"\n            disablePadding\n            alt=\"\"\n          />\n        </div>\n      )}\n      <div className=\"wds-nudge-container\">\n        <div className=\"wds-nudge-content\">\n          <Body type={Typography.BODY_LARGE} className={clsx('wds-nudge-body')}>\n            {title}\n          </Body>\n          {/* Merge these two Link instances into one */}\n          {link && (\n            <Link\n              href={href}\n              type={Typography.LINK_LARGE}\n              className=\"wds-nudge-link\"\n              onClick={onClick}\n            >\n              {link}\n            </Link>\n          )}\n          {action && (\n            <Link\n              href={action.href}\n              target={action.target}\n              className=\"m-t-1\"\n              aria-label={action['aria-label']}\n              type={Typography.LINK_LARGE}\n              onClick={action.onClick}\n            >\n              {action.text}\n            </Link>\n          )}\n        </div>\n        {onDismiss || persistDismissal ? (\n          <IconButton\n            size={24}\n            priority=\"tertiary\"\n            aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n            onClick={handleOnDismiss}\n          >\n            <Cross />\n          </IconButton>\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nexport default Nudge;\n"],"names":["STORAGE_NAME","getLocalStorage","storageItem","localStorage","getItem","storage","JSON","parse","Array","isArray","map","item","String","error","Nudge","mediaName","title","link","href","onClick","onDismiss","persistDismissal","isPreviouslyDismissed","id","className","action","intl","useIntl","getIsDismissed","useCallback","find","nudgeState","setNudgeState","useState","isDismissed","isMounted","useEffect","prev","handleOnDismiss","dismissedNudgesStorage","setItem","stringify","wasDismissed","_jsxs","clsx","children","_jsx","Illustration","name","size","disablePadding","alt","Body","type","Typography","BODY_LARGE","Link","LINK_LARGE","target","text","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","Cross"],"mappings":"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"}

package/build/prompt/CriticalBanner/CriticalBanner.js

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

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

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

package/build/prompt/CriticalBanner/CriticalBanner.mjs

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