@transferwise/components 46.130.1 → 46.130.2

package/build/alert/Alert.js

@@ -157,7 +157,7 @@ function Alert({
                 children: message
               })
             })]
-          }), action && ('href' in action ? /*#__PURE__*/jsxRuntime.jsx(Link.default, {
+          }), action && ('href' in action && action.as !== 'button' ? /*#__PURE__*/jsxRuntime.jsx(Link.default, {
             href: action.href,
             "aria-label": action['aria-label'],
             target: action.target,
@@ -168,6 +168,9 @@ function Alert({
             children: action.text
           }) : /*#__PURE__*/jsxRuntime.jsx(Button_resolver.default, {
             v2: true,
+            as: action.href ? 'a' : 'button',
+            href: action.href,
+            target: action.target,
             size: "sm",
             sentiment: "default",
             "aria-label": action['aria-label'],

package/build/alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["../../src/alert/Alert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useState, useRef, useEffect } from 'react';\n\nimport Body from '../body/Body';\nimport {\n  CloseButton,\n  Sentiment,\n  Size,\n  Status,\n  Typography,\n  WDS_LIVE_REGION_DELAY_MS,\n} from '../common';\n\nimport StatusIcon from '../statusIcon';\nimport Title from '../title/Title';\nimport { logActionRequired } from '../utilities';\n\nimport InlineMarkdown from './inlineMarkdown';\nimport Button from '../button';\nimport Link from '../link';\n\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\n */\nexport type AlertAction = {\n  'aria-label'?: string;\n  href?: string;\n  target?: string;\n  text: React.ReactNode;\n  onClick?: () => void;\n};\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype AlertTypeDeprecated = `${Sentiment.SUCCESS | Sentiment.INFO | Sentiment.ERROR}`;\ntype AlertTypeResolved = `${\n  | Sentiment.POSITIVE\n  | Sentiment.NEUTRAL\n  | Sentiment.WARNING\n  | Sentiment.NEGATIVE\n  // remove when all instances of Sentiment.PENDING have been updated to Status.PENDING\n  | Sentiment.PENDING\n  | Status.PENDING}`;\n\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\n */\nexport type AlertType = AlertTypeResolved | AlertTypeDeprecated;\n\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\n */\nexport enum AlertArrowPosition {\n  TOP_LEFT = 'up-left',\n  TOP = 'up-center',\n  TOP_RIGHT = 'up-right',\n  BOTTOM_LEFT = 'down-left',\n  BOTTOM = 'down-center',\n  BOTTOM_RIGHT = 'down-right',\n}\n\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\n */\nexport interface AlertProps {\n  /** An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context */\n  action?: AlertAction;\n  className?: string;\n  /** An optional icon. If not provided, we will default the icon to something appropriate for the type */\n  icon?: React.ReactNode;\n  /**\n   * Override for [StatusIcon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  statusIconLabel?: string;\n  /** Title for the alert component */\n  title?: string;\n  /** The main body of the alert. Accepts plain text and bold words specified with **double stars */\n  message?: string;\n  /** The presence of the onDismiss handler will trigger the visibility of the close button */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The type dictates which icon and colour will be used\n   * @default 'neutral'\n   */\n  type?: AlertType;\n  /** @deprecated Use `InlinePrompt` instead. */\n  arrow?: `${AlertArrowPosition}`;\n  /** @deprecated Use `message` instead. Be aware `message` only accepts plain text or text with **bold** markdown. */\n  children?: React.ReactNode;\n  /** @deprecated Use `onDismiss` instead. */\n  dismissible?: boolean;\n  /** @deprecated Alert component doesn't support `size` anymore, please remove this prop. */\n  size?: `${Size}`;\n}\n\nfunction resolveType(type: AlertType): AlertTypeResolved {\n  switch (type) {\n    case 'success':\n      return 'positive';\n    case 'info':\n      return 'neutral';\n    case 'error':\n      return 'negative';\n    default:\n      return type;\n  }\n}\n\n/**\n * @deprecated Use [`InfoPrompt`](https://storybook.wise.design/?path=/docs/prompts-infoprompt--docs) component instead.\n */\nexport default function Alert({\n  action,\n  className,\n  icon,\n  statusIconLabel,\n  onDismiss,\n  message,\n  title,\n  type = 'neutral',\n  arrow,\n  children,\n  size,\n  dismissible,\n}: AlertProps) {\n  useEffect(() => {\n    if (arrow !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'arrow' anymore, use 'InlinePrompt' instead.\",\n      );\n    }\n  }, [arrow]);\n\n  useEffect(() => {\n    if (children !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'children' anymore, use 'message' instead.\",\n      );\n    }\n  }, [children]);\n\n  useEffect(() => {\n    if (dismissible !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.\",\n      );\n    }\n  }, [dismissible]);\n\n  useEffect(() => {\n    if (size !== undefined) {\n      logActionRequired(\"Alert component doesn't support 'size' anymore, please remove that prop.\");\n    }\n  }, [size]);\n\n  const resolvedType = resolveType(type);\n  useEffect(() => {\n    if (resolvedType !== type) {\n      logActionRequired(\n        `Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`,\n      );\n    }\n  }, [resolvedType, type]);\n\n  const [shouldFire, setShouldFire] = useState<boolean>();\n\n  const [shouldAnnounce, setShouldAnnounce] = useState<boolean>(false);\n  useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      setShouldAnnounce(true);\n    }, WDS_LIVE_REGION_DELAY_MS);\n\n    return () => clearTimeout(timeoutId);\n  }, []);\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n  /**\n   * All focusable elements must be disabled until we announce the alert.\n   * @see https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI\n   */\n  const accessibleTabIndex = shouldAnnounce ? undefined : -1;\n\n  return (\n    <div\n      role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}\n      className=\"wds-alert__liveRegion\"\n    >\n      <div\n        aria-hidden={shouldAnnounce ? undefined : 'true'}\n        className={clsx(\n          'alert d-flex',\n          `alert-${resolvedType}`,\n          arrow != null && alertArrowClassNames(arrow),\n          className,\n        )}\n        data-testid=\"alert\"\n        onTouchStart={() => setShouldFire(true)}\n        onTouchEnd={(event) => {\n          if (\n            shouldFire &&\n            action?.href &&\n            // Check if current event is triggered from closeButton\n            event.target instanceof Node &&\n            closeButtonReference.current &&\n            !closeButtonReference.current.contains(event.target)\n          ) {\n            if (action.target === '_blank') {\n              window.top?.open(action.href);\n            } else {\n              window.top?.location.assign(action.href);\n            }\n          }\n          setShouldFire(false);\n        }}\n        onTouchMove={() => setShouldFire(false)}\n      >\n        <div className=\"alert__icon\">\n          {icon || <StatusIcon size={32} sentiment={resolvedType} iconLabel={statusIconLabel} />}\n        </div>\n        <div className={clsx('alert__content', 'd-flex', 'flex-grow-1')}>\n          <div className=\"alert__message\">\n            <div>\n              {title && (\n                <Title className=\"m-b-1\" type={Typography.TITLE_BODY}>\n                  {title}\n                </Title>\n              )}\n              <Body as=\"span\" className=\"d-block\" type={Typography.BODY_LARGE}>\n                {children || <InlineMarkdown>{message}</InlineMarkdown>}\n              </Body>\n            </div>\n            {action &&\n              ('href' in action ? (\n                <Link\n                  href={action.href}\n                  aria-label={action['aria-label']}\n                  target={action.target}\n                  type={Typography.LINK_LARGE}\n                  className=\"alert__action\"\n                  tabIndex={accessibleTabIndex}\n                  onClick={action.onClick}\n                >\n                  {action.text}\n                </Link>\n              ) : (\n                <Button\n                  v2\n                  size=\"sm\"\n                  sentiment=\"default\"\n                  aria-label={action['aria-label']}\n                  priority=\"secondary-neutral\"\n                  className=\"alert__action\"\n                  tabIndex={accessibleTabIndex}\n                  onClick={action.onClick}\n                >\n                  {action.text}\n                </Button>\n              ))}\n          </div>\n        </div>\n        {onDismiss && (\n          <div className=\"alert__close\">\n            <CloseButton\n              ref={closeButtonReference}\n              size=\"xs\"\n              tabIndex={accessibleTabIndex}\n              onClick={onDismiss}\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction alertArrowClassNames(arrow: `${AlertArrowPosition}`) {\n  switch (arrow) {\n    case 'down-center':\n      return 'arrow arrow-bottom arrow-center';\n    case 'down-left':\n      return 'arrow arrow-bottom arrow-left';\n    case 'down-right':\n      return 'arrow arrow-bottom arrow-right';\n    case 'up-center':\n      return 'arrow arrow-center';\n    case 'up-right':\n      return 'arrow arrow-right';\n    case 'up-left':\n    default:\n      return 'arrow';\n  }\n}\n"],"names":["AlertArrowPosition","resolveType","type","Alert","action","className","icon","statusIconLabel","onDismiss","message","title","arrow","children","size","dismissible","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","shouldAnnounce","setShouldAnnounce","timeoutId","setTimeout","WDS_LIVE_REGION_DELAY_MS","clearTimeout","closeButtonReference","useRef","accessibleTabIndex","_jsx","role","Sentiment","NEGATIVE","_jsxs","clsx","alertArrowClassNames","onTouchStart","onTouchEnd","event","href","target","Node","current","contains","window","top","open","location","assign","onTouchMove","StatusIcon","sentiment","iconLabel","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Link","LINK_LARGE","tabIndex","onClick","text","Button","v2","priority","CloseButton","ref"],"mappings":"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"}
+{"version":3,"file":"Alert.js","sources":["../../src/alert/Alert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useState, useRef, useEffect } from 'react';\n\nimport Body from '../body/Body';\nimport {\n  CloseButton,\n  Sentiment,\n  Size,\n  Status,\n  Typography,\n  WDS_LIVE_REGION_DELAY_MS,\n} from '../common';\n\nimport StatusIcon from '../statusIcon';\nimport Title from '../title/Title';\nimport { logActionRequired } from '../utilities';\n\nimport InlineMarkdown from './inlineMarkdown';\nimport Button from '../button';\nimport Link from '../link';\n\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\n */\nexport type AlertAction = {\n  'aria-label'?: string;\n  href?: string;\n  target?: string;\n  text: React.ReactNode;\n  onClick?: () => void;\n  /** Controls the rendered element: `'link'` (default) renders a Link, `'button'` renders a Button. When `'button'` is used with `href`, renders an anchor styled as a button. */\n  as?: 'button' | 'link';\n};\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype AlertTypeDeprecated = `${Sentiment.SUCCESS | Sentiment.INFO | Sentiment.ERROR}`;\ntype AlertTypeResolved = `${\n  | Sentiment.POSITIVE\n  | Sentiment.NEUTRAL\n  | Sentiment.WARNING\n  | Sentiment.NEGATIVE\n  // remove when all instances of Sentiment.PENDING have been updated to Status.PENDING\n  | Sentiment.PENDING\n  | Status.PENDING}`;\n\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\n */\nexport type AlertType = AlertTypeResolved | AlertTypeDeprecated;\n\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\n */\nexport enum AlertArrowPosition {\n  TOP_LEFT = 'up-left',\n  TOP = 'up-center',\n  TOP_RIGHT = 'up-right',\n  BOTTOM_LEFT = 'down-left',\n  BOTTOM = 'down-center',\n  BOTTOM_RIGHT = 'down-right',\n}\n\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\n */\nexport interface AlertProps {\n  /** An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context */\n  action?: AlertAction;\n  className?: string;\n  /** An optional icon. If not provided, we will default the icon to something appropriate for the type */\n  icon?: React.ReactNode;\n  /**\n   * Override for [StatusIcon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  statusIconLabel?: string;\n  /** Title for the alert component */\n  title?: string;\n  /** The main body of the alert. Accepts plain text and bold words specified with **double stars */\n  message?: string;\n  /** The presence of the onDismiss handler will trigger the visibility of the close button */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The type dictates which icon and colour will be used\n   * @default 'neutral'\n   */\n  type?: AlertType;\n  /** @deprecated Use `InlinePrompt` instead. */\n  arrow?: `${AlertArrowPosition}`;\n  /** @deprecated Use `message` instead. Be aware `message` only accepts plain text or text with **bold** markdown. */\n  children?: React.ReactNode;\n  /** @deprecated Use `onDismiss` instead. */\n  dismissible?: boolean;\n  /** @deprecated Alert component doesn't support `size` anymore, please remove this prop. */\n  size?: `${Size}`;\n}\n\nfunction resolveType(type: AlertType): AlertTypeResolved {\n  switch (type) {\n    case 'success':\n      return 'positive';\n    case 'info':\n      return 'neutral';\n    case 'error':\n      return 'negative';\n    default:\n      return type;\n  }\n}\n\n/**\n * @deprecated Use [`InfoPrompt`](https://storybook.wise.design/?path=/docs/prompts-infoprompt--docs) component instead.\n */\nexport default function Alert({\n  action,\n  className,\n  icon,\n  statusIconLabel,\n  onDismiss,\n  message,\n  title,\n  type = 'neutral',\n  arrow,\n  children,\n  size,\n  dismissible,\n}: AlertProps) {\n  useEffect(() => {\n    if (arrow !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'arrow' anymore, use 'InlinePrompt' instead.\",\n      );\n    }\n  }, [arrow]);\n\n  useEffect(() => {\n    if (children !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'children' anymore, use 'message' instead.\",\n      );\n    }\n  }, [children]);\n\n  useEffect(() => {\n    if (dismissible !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.\",\n      );\n    }\n  }, [dismissible]);\n\n  useEffect(() => {\n    if (size !== undefined) {\n      logActionRequired(\"Alert component doesn't support 'size' anymore, please remove that prop.\");\n    }\n  }, [size]);\n\n  const resolvedType = resolveType(type);\n  useEffect(() => {\n    if (resolvedType !== type) {\n      logActionRequired(\n        `Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`,\n      );\n    }\n  }, [resolvedType, type]);\n\n  const [shouldFire, setShouldFire] = useState<boolean>();\n\n  const [shouldAnnounce, setShouldAnnounce] = useState<boolean>(false);\n  useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      setShouldAnnounce(true);\n    }, WDS_LIVE_REGION_DELAY_MS);\n\n    return () => clearTimeout(timeoutId);\n  }, []);\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n  /**\n   * All focusable elements must be disabled until we announce the alert.\n   * @see https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI\n   */\n  const accessibleTabIndex = shouldAnnounce ? undefined : -1;\n\n  return (\n    <div\n      role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}\n      className=\"wds-alert__liveRegion\"\n    >\n      <div\n        aria-hidden={shouldAnnounce ? undefined : 'true'}\n        className={clsx(\n          'alert d-flex',\n          `alert-${resolvedType}`,\n          arrow != null && alertArrowClassNames(arrow),\n          className,\n        )}\n        data-testid=\"alert\"\n        onTouchStart={() => setShouldFire(true)}\n        onTouchEnd={(event) => {\n          if (\n            shouldFire &&\n            action?.href &&\n            // Check if current event is triggered from closeButton\n            event.target instanceof Node &&\n            closeButtonReference.current &&\n            !closeButtonReference.current.contains(event.target)\n          ) {\n            if (action.target === '_blank') {\n              window.top?.open(action.href);\n            } else {\n              window.top?.location.assign(action.href);\n            }\n          }\n          setShouldFire(false);\n        }}\n        onTouchMove={() => setShouldFire(false)}\n      >\n        <div className=\"alert__icon\">\n          {icon || <StatusIcon size={32} sentiment={resolvedType} iconLabel={statusIconLabel} />}\n        </div>\n        <div className={clsx('alert__content', 'd-flex', 'flex-grow-1')}>\n          <div className=\"alert__message\">\n            <div>\n              {title && (\n                <Title className=\"m-b-1\" type={Typography.TITLE_BODY}>\n                  {title}\n                </Title>\n              )}\n              <Body as=\"span\" className=\"d-block\" type={Typography.BODY_LARGE}>\n                {children || <InlineMarkdown>{message}</InlineMarkdown>}\n              </Body>\n            </div>\n            {action &&\n              ('href' in action && action.as !== 'button' ? (\n                <Link\n                  href={action.href}\n                  aria-label={action['aria-label']}\n                  target={action.target}\n                  type={Typography.LINK_LARGE}\n                  className=\"alert__action\"\n                  tabIndex={accessibleTabIndex}\n                  onClick={action.onClick}\n                >\n                  {action.text}\n                </Link>\n              ) : (\n                <Button\n                  v2\n                  as={action.href ? 'a' : 'button'}\n                  href={action.href}\n                  target={action.target}\n                  size=\"sm\"\n                  sentiment=\"default\"\n                  aria-label={action['aria-label']}\n                  priority=\"secondary-neutral\"\n                  className=\"alert__action\"\n                  tabIndex={accessibleTabIndex}\n                  onClick={action.onClick}\n                >\n                  {action.text}\n                </Button>\n              ))}\n          </div>\n        </div>\n        {onDismiss && (\n          <div className=\"alert__close\">\n            <CloseButton\n              ref={closeButtonReference}\n              size=\"xs\"\n              tabIndex={accessibleTabIndex}\n              onClick={onDismiss}\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction alertArrowClassNames(arrow: `${AlertArrowPosition}`) {\n  switch (arrow) {\n    case 'down-center':\n      return 'arrow arrow-bottom arrow-center';\n    case 'down-left':\n      return 'arrow arrow-bottom arrow-left';\n    case 'down-right':\n      return 'arrow arrow-bottom arrow-right';\n    case 'up-center':\n      return 'arrow arrow-center';\n    case 'up-right':\n      return 'arrow arrow-right';\n    case 'up-left':\n    default:\n      return 'arrow';\n  }\n}\n"],"names":["AlertArrowPosition","resolveType","type","Alert","action","className","icon","statusIconLabel","onDismiss","message","title","arrow","children","size","dismissible","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","shouldAnnounce","setShouldAnnounce","timeoutId","setTimeout","WDS_LIVE_REGION_DELAY_MS","clearTimeout","closeButtonReference","useRef","accessibleTabIndex","_jsx","role","Sentiment","NEGATIVE","_jsxs","clsx","alertArrowClassNames","onTouchStart","onTouchEnd","event","href","target","Node","current","contains","window","top","open","location","assign","onTouchMove","StatusIcon","sentiment","iconLabel","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Link","LINK_LARGE","tabIndex","onClick","text","Button","v2","priority","CloseButton","ref"],"mappings":"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"}

package/build/alert/Alert.mjs

@@ -153,7 +153,7 @@ function Alert({
                 children: message
               })
             })]
-          }), action && ('href' in action ? /*#__PURE__*/jsx(Link, {
+          }), action && ('href' in action && action.as !== 'button' ? /*#__PURE__*/jsx(Link, {
             href: action.href,
             "aria-label": action['aria-label'],
             target: action.target,
@@ -164,6 +164,9 @@ function Alert({
             children: action.text
           }) : /*#__PURE__*/jsx(Button, {
             v2: true,
+            as: action.href ? 'a' : 'button',
+            href: action.href,
+            target: action.target,
             size: "sm",
             sentiment: "default",
             "aria-label": action['aria-label'],

package/build/alert/Alert.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.mjs","sources":["../../src/alert/Alert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useState, useRef, useEffect } from 'react';\n\nimport Body from '../body/Body';\nimport {\n  CloseButton,\n  Sentiment,\n  Size,\n  Status,\n  Typography,\n  WDS_LIVE_REGION_DELAY_MS,\n} from '../common';\n\nimport StatusIcon from '../statusIcon';\nimport Title from '../title/Title';\nimport { logActionRequired } from '../utilities';\n\nimport InlineMarkdown from './inlineMarkdown';\nimport Button from '../button';\nimport Link from '../link';\n\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\n */\nexport type AlertAction = {\n  'aria-label'?: string;\n  href?: string;\n  target?: string;\n  text: React.ReactNode;\n  onClick?: () => void;\n};\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype AlertTypeDeprecated = `${Sentiment.SUCCESS | Sentiment.INFO | Sentiment.ERROR}`;\ntype AlertTypeResolved = `${\n  | Sentiment.POSITIVE\n  | Sentiment.NEUTRAL\n  | Sentiment.WARNING\n  | Sentiment.NEGATIVE\n  // remove when all instances of Sentiment.PENDING have been updated to Status.PENDING\n  | Sentiment.PENDING\n  | Status.PENDING}`;\n\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\n */\nexport type AlertType = AlertTypeResolved | AlertTypeDeprecated;\n\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\n */\nexport enum AlertArrowPosition {\n  TOP_LEFT = 'up-left',\n  TOP = 'up-center',\n  TOP_RIGHT = 'up-right',\n  BOTTOM_LEFT = 'down-left',\n  BOTTOM = 'down-center',\n  BOTTOM_RIGHT = 'down-right',\n}\n\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\n */\nexport interface AlertProps {\n  /** An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context */\n  action?: AlertAction;\n  className?: string;\n  /** An optional icon. If not provided, we will default the icon to something appropriate for the type */\n  icon?: React.ReactNode;\n  /**\n   * Override for [StatusIcon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  statusIconLabel?: string;\n  /** Title for the alert component */\n  title?: string;\n  /** The main body of the alert. Accepts plain text and bold words specified with **double stars */\n  message?: string;\n  /** The presence of the onDismiss handler will trigger the visibility of the close button */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The type dictates which icon and colour will be used\n   * @default 'neutral'\n   */\n  type?: AlertType;\n  /** @deprecated Use `InlinePrompt` instead. */\n  arrow?: `${AlertArrowPosition}`;\n  /** @deprecated Use `message` instead. Be aware `message` only accepts plain text or text with **bold** markdown. */\n  children?: React.ReactNode;\n  /** @deprecated Use `onDismiss` instead. */\n  dismissible?: boolean;\n  /** @deprecated Alert component doesn't support `size` anymore, please remove this prop. */\n  size?: `${Size}`;\n}\n\nfunction resolveType(type: AlertType): AlertTypeResolved {\n  switch (type) {\n    case 'success':\n      return 'positive';\n    case 'info':\n      return 'neutral';\n    case 'error':\n      return 'negative';\n    default:\n      return type;\n  }\n}\n\n/**\n * @deprecated Use [`InfoPrompt`](https://storybook.wise.design/?path=/docs/prompts-infoprompt--docs) component instead.\n */\nexport default function Alert({\n  action,\n  className,\n  icon,\n  statusIconLabel,\n  onDismiss,\n  message,\n  title,\n  type = 'neutral',\n  arrow,\n  children,\n  size,\n  dismissible,\n}: AlertProps) {\n  useEffect(() => {\n    if (arrow !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'arrow' anymore, use 'InlinePrompt' instead.\",\n      );\n    }\n  }, [arrow]);\n\n  useEffect(() => {\n    if (children !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'children' anymore, use 'message' instead.\",\n      );\n    }\n  }, [children]);\n\n  useEffect(() => {\n    if (dismissible !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.\",\n      );\n    }\n  }, [dismissible]);\n\n  useEffect(() => {\n    if (size !== undefined) {\n      logActionRequired(\"Alert component doesn't support 'size' anymore, please remove that prop.\");\n    }\n  }, [size]);\n\n  const resolvedType = resolveType(type);\n  useEffect(() => {\n    if (resolvedType !== type) {\n      logActionRequired(\n        `Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`,\n      );\n    }\n  }, [resolvedType, type]);\n\n  const [shouldFire, setShouldFire] = useState<boolean>();\n\n  const [shouldAnnounce, setShouldAnnounce] = useState<boolean>(false);\n  useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      setShouldAnnounce(true);\n    }, WDS_LIVE_REGION_DELAY_MS);\n\n    return () => clearTimeout(timeoutId);\n  }, []);\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n  /**\n   * All focusable elements must be disabled until we announce the alert.\n   * @see https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI\n   */\n  const accessibleTabIndex = shouldAnnounce ? undefined : -1;\n\n  return (\n    <div\n      role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}\n      className=\"wds-alert__liveRegion\"\n    >\n      <div\n        aria-hidden={shouldAnnounce ? undefined : 'true'}\n        className={clsx(\n          'alert d-flex',\n          `alert-${resolvedType}`,\n          arrow != null && alertArrowClassNames(arrow),\n          className,\n        )}\n        data-testid=\"alert\"\n        onTouchStart={() => setShouldFire(true)}\n        onTouchEnd={(event) => {\n          if (\n            shouldFire &&\n            action?.href &&\n            // Check if current event is triggered from closeButton\n            event.target instanceof Node &&\n            closeButtonReference.current &&\n            !closeButtonReference.current.contains(event.target)\n          ) {\n            if (action.target === '_blank') {\n              window.top?.open(action.href);\n            } else {\n              window.top?.location.assign(action.href);\n            }\n          }\n          setShouldFire(false);\n        }}\n        onTouchMove={() => setShouldFire(false)}\n      >\n        <div className=\"alert__icon\">\n          {icon || <StatusIcon size={32} sentiment={resolvedType} iconLabel={statusIconLabel} />}\n        </div>\n        <div className={clsx('alert__content', 'd-flex', 'flex-grow-1')}>\n          <div className=\"alert__message\">\n            <div>\n              {title && (\n                <Title className=\"m-b-1\" type={Typography.TITLE_BODY}>\n                  {title}\n                </Title>\n              )}\n              <Body as=\"span\" className=\"d-block\" type={Typography.BODY_LARGE}>\n                {children || <InlineMarkdown>{message}</InlineMarkdown>}\n              </Body>\n            </div>\n            {action &&\n              ('href' in action ? (\n                <Link\n                  href={action.href}\n                  aria-label={action['aria-label']}\n                  target={action.target}\n                  type={Typography.LINK_LARGE}\n                  className=\"alert__action\"\n                  tabIndex={accessibleTabIndex}\n                  onClick={action.onClick}\n                >\n                  {action.text}\n                </Link>\n              ) : (\n                <Button\n                  v2\n                  size=\"sm\"\n                  sentiment=\"default\"\n                  aria-label={action['aria-label']}\n                  priority=\"secondary-neutral\"\n                  className=\"alert__action\"\n                  tabIndex={accessibleTabIndex}\n                  onClick={action.onClick}\n                >\n                  {action.text}\n                </Button>\n              ))}\n          </div>\n        </div>\n        {onDismiss && (\n          <div className=\"alert__close\">\n            <CloseButton\n              ref={closeButtonReference}\n              size=\"xs\"\n              tabIndex={accessibleTabIndex}\n              onClick={onDismiss}\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction alertArrowClassNames(arrow: `${AlertArrowPosition}`) {\n  switch (arrow) {\n    case 'down-center':\n      return 'arrow arrow-bottom arrow-center';\n    case 'down-left':\n      return 'arrow arrow-bottom arrow-left';\n    case 'down-right':\n      return 'arrow arrow-bottom arrow-right';\n    case 'up-center':\n      return 'arrow arrow-center';\n    case 'up-right':\n      return 'arrow arrow-right';\n    case 'up-left':\n    default:\n      return 'arrow';\n  }\n}\n"],"names":["AlertArrowPosition","resolveType","type","Alert","action","className","icon","statusIconLabel","onDismiss","message","title","arrow","children","size","dismissible","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","shouldAnnounce","setShouldAnnounce","timeoutId","setTimeout","WDS_LIVE_REGION_DELAY_MS","clearTimeout","closeButtonReference","useRef","accessibleTabIndex","_jsx","role","Sentiment","NEGATIVE","_jsxs","clsx","alertArrowClassNames","onTouchStart","onTouchEnd","event","href","target","Node","current","contains","window","top","open","location","assign","onTouchMove","StatusIcon","sentiment","iconLabel","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Link","LINK_LARGE","tabIndex","onClick","text","Button","v2","priority","CloseButton","ref"],"mappings":"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"}
+{"version":3,"file":"Alert.mjs","sources":["../../src/alert/Alert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useState, useRef, useEffect } from 'react';\n\nimport Body from '../body/Body';\nimport {\n  CloseButton,\n  Sentiment,\n  Size,\n  Status,\n  Typography,\n  WDS_LIVE_REGION_DELAY_MS,\n} from '../common';\n\nimport StatusIcon from '../statusIcon';\nimport Title from '../title/Title';\nimport { logActionRequired } from '../utilities';\n\nimport InlineMarkdown from './inlineMarkdown';\nimport Button from '../button';\nimport Link from '../link';\n\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\n */\nexport type AlertAction = {\n  'aria-label'?: string;\n  href?: string;\n  target?: string;\n  text: React.ReactNode;\n  onClick?: () => void;\n  /** Controls the rendered element: `'link'` (default) renders a Link, `'button'` renders a Button. When `'button'` is used with `href`, renders an anchor styled as a button. */\n  as?: 'button' | 'link';\n};\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype AlertTypeDeprecated = `${Sentiment.SUCCESS | Sentiment.INFO | Sentiment.ERROR}`;\ntype AlertTypeResolved = `${\n  | Sentiment.POSITIVE\n  | Sentiment.NEUTRAL\n  | Sentiment.WARNING\n  | Sentiment.NEGATIVE\n  // remove when all instances of Sentiment.PENDING have been updated to Status.PENDING\n  | Sentiment.PENDING\n  | Status.PENDING}`;\n\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\n */\nexport type AlertType = AlertTypeResolved | AlertTypeDeprecated;\n\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\n */\nexport enum AlertArrowPosition {\n  TOP_LEFT = 'up-left',\n  TOP = 'up-center',\n  TOP_RIGHT = 'up-right',\n  BOTTOM_LEFT = 'down-left',\n  BOTTOM = 'down-center',\n  BOTTOM_RIGHT = 'down-right',\n}\n\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\n */\nexport interface AlertProps {\n  /** An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context */\n  action?: AlertAction;\n  className?: string;\n  /** An optional icon. If not provided, we will default the icon to something appropriate for the type */\n  icon?: React.ReactNode;\n  /**\n   * Override for [StatusIcon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  statusIconLabel?: string;\n  /** Title for the alert component */\n  title?: string;\n  /** The main body of the alert. Accepts plain text and bold words specified with **double stars */\n  message?: string;\n  /** The presence of the onDismiss handler will trigger the visibility of the close button */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The type dictates which icon and colour will be used\n   * @default 'neutral'\n   */\n  type?: AlertType;\n  /** @deprecated Use `InlinePrompt` instead. */\n  arrow?: `${AlertArrowPosition}`;\n  /** @deprecated Use `message` instead. Be aware `message` only accepts plain text or text with **bold** markdown. */\n  children?: React.ReactNode;\n  /** @deprecated Use `onDismiss` instead. */\n  dismissible?: boolean;\n  /** @deprecated Alert component doesn't support `size` anymore, please remove this prop. */\n  size?: `${Size}`;\n}\n\nfunction resolveType(type: AlertType): AlertTypeResolved {\n  switch (type) {\n    case 'success':\n      return 'positive';\n    case 'info':\n      return 'neutral';\n    case 'error':\n      return 'negative';\n    default:\n      return type;\n  }\n}\n\n/**\n * @deprecated Use [`InfoPrompt`](https://storybook.wise.design/?path=/docs/prompts-infoprompt--docs) component instead.\n */\nexport default function Alert({\n  action,\n  className,\n  icon,\n  statusIconLabel,\n  onDismiss,\n  message,\n  title,\n  type = 'neutral',\n  arrow,\n  children,\n  size,\n  dismissible,\n}: AlertProps) {\n  useEffect(() => {\n    if (arrow !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'arrow' anymore, use 'InlinePrompt' instead.\",\n      );\n    }\n  }, [arrow]);\n\n  useEffect(() => {\n    if (children !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'children' anymore, use 'message' instead.\",\n      );\n    }\n  }, [children]);\n\n  useEffect(() => {\n    if (dismissible !== undefined) {\n      logActionRequired(\n        \"Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.\",\n      );\n    }\n  }, [dismissible]);\n\n  useEffect(() => {\n    if (size !== undefined) {\n      logActionRequired(\"Alert component doesn't support 'size' anymore, please remove that prop.\");\n    }\n  }, [size]);\n\n  const resolvedType = resolveType(type);\n  useEffect(() => {\n    if (resolvedType !== type) {\n      logActionRequired(\n        `Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`,\n      );\n    }\n  }, [resolvedType, type]);\n\n  const [shouldFire, setShouldFire] = useState<boolean>();\n\n  const [shouldAnnounce, setShouldAnnounce] = useState<boolean>(false);\n  useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      setShouldAnnounce(true);\n    }, WDS_LIVE_REGION_DELAY_MS);\n\n    return () => clearTimeout(timeoutId);\n  }, []);\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n  /**\n   * All focusable elements must be disabled until we announce the alert.\n   * @see https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI\n   */\n  const accessibleTabIndex = shouldAnnounce ? undefined : -1;\n\n  return (\n    <div\n      role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}\n      className=\"wds-alert__liveRegion\"\n    >\n      <div\n        aria-hidden={shouldAnnounce ? undefined : 'true'}\n        className={clsx(\n          'alert d-flex',\n          `alert-${resolvedType}`,\n          arrow != null && alertArrowClassNames(arrow),\n          className,\n        )}\n        data-testid=\"alert\"\n        onTouchStart={() => setShouldFire(true)}\n        onTouchEnd={(event) => {\n          if (\n            shouldFire &&\n            action?.href &&\n            // Check if current event is triggered from closeButton\n            event.target instanceof Node &&\n            closeButtonReference.current &&\n            !closeButtonReference.current.contains(event.target)\n          ) {\n            if (action.target === '_blank') {\n              window.top?.open(action.href);\n            } else {\n              window.top?.location.assign(action.href);\n            }\n          }\n          setShouldFire(false);\n        }}\n        onTouchMove={() => setShouldFire(false)}\n      >\n        <div className=\"alert__icon\">\n          {icon || <StatusIcon size={32} sentiment={resolvedType} iconLabel={statusIconLabel} />}\n        </div>\n        <div className={clsx('alert__content', 'd-flex', 'flex-grow-1')}>\n          <div className=\"alert__message\">\n            <div>\n              {title && (\n                <Title className=\"m-b-1\" type={Typography.TITLE_BODY}>\n                  {title}\n                </Title>\n              )}\n              <Body as=\"span\" className=\"d-block\" type={Typography.BODY_LARGE}>\n                {children || <InlineMarkdown>{message}</InlineMarkdown>}\n              </Body>\n            </div>\n            {action &&\n              ('href' in action && action.as !== 'button' ? (\n                <Link\n                  href={action.href}\n                  aria-label={action['aria-label']}\n                  target={action.target}\n                  type={Typography.LINK_LARGE}\n                  className=\"alert__action\"\n                  tabIndex={accessibleTabIndex}\n                  onClick={action.onClick}\n                >\n                  {action.text}\n                </Link>\n              ) : (\n                <Button\n                  v2\n                  as={action.href ? 'a' : 'button'}\n                  href={action.href}\n                  target={action.target}\n                  size=\"sm\"\n                  sentiment=\"default\"\n                  aria-label={action['aria-label']}\n                  priority=\"secondary-neutral\"\n                  className=\"alert__action\"\n                  tabIndex={accessibleTabIndex}\n                  onClick={action.onClick}\n                >\n                  {action.text}\n                </Button>\n              ))}\n          </div>\n        </div>\n        {onDismiss && (\n          <div className=\"alert__close\">\n            <CloseButton\n              ref={closeButtonReference}\n              size=\"xs\"\n              tabIndex={accessibleTabIndex}\n              onClick={onDismiss}\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction alertArrowClassNames(arrow: `${AlertArrowPosition}`) {\n  switch (arrow) {\n    case 'down-center':\n      return 'arrow arrow-bottom arrow-center';\n    case 'down-left':\n      return 'arrow arrow-bottom arrow-left';\n    case 'down-right':\n      return 'arrow arrow-bottom arrow-right';\n    case 'up-center':\n      return 'arrow arrow-center';\n    case 'up-right':\n      return 'arrow arrow-right';\n    case 'up-left':\n    default:\n      return 'arrow';\n  }\n}\n"],"names":["AlertArrowPosition","resolveType","type","Alert","action","className","icon","statusIconLabel","onDismiss","message","title","arrow","children","size","dismissible","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","shouldAnnounce","setShouldAnnounce","timeoutId","setTimeout","WDS_LIVE_REGION_DELAY_MS","clearTimeout","closeButtonReference","useRef","accessibleTabIndex","_jsx","role","Sentiment","NEGATIVE","_jsxs","clsx","alertArrowClassNames","onTouchStart","onTouchEnd","event","href","target","Node","current","contains","window","top","open","location","assign","onTouchMove","StatusIcon","sentiment","iconLabel","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Link","LINK_LARGE","tabIndex","onClick","text","Button","v2","priority","CloseButton","ref"],"mappings":"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"}

package/build/criticalBanner/CriticalCommsBanner.js

@@ -81,10 +81,12 @@ function CriticalCommsBanner({
     children: /*#__PURE__*/jsxRuntime.jsx(Alert.default, {
       title: title,
       message: subtitle,
-      action: {
-        onClick: action?.onClick,
-        target: action?.href,
-        text: action?.label
+      action: action && {
+        onClick: action.onClick,
+        href: action.href,
+        target: action.target,
+        text: action.label,
+        as: 'button'
       },
       className: className,
       type: sentiment$1,

package/build/criticalBanner/CriticalCommsBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"CriticalCommsBanner.js","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import { Alert as AlertIcon, ClockBorderless as ClockIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport Alert from '../alert';\nimport { Sentiment } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport SentimentSurface from '../sentimentSurface';\n\nexport type CriticalCommsBannerSentiment =\n  | `${Sentiment.WARNING}`\n  | `${Sentiment.NEGATIVE}`\n  | `${Sentiment.NEUTRAL}`;\n\nexport type CriticalCommsBannerProps = {\n  title: string;\n  subtitle?: string;\n  action?: {\n    label: string;\n    href?: string;\n    onClick?: () => void;\n  };\n  sentiment?: CriticalCommsBannerSentiment;\n  className?: string;\n};\n\nconst makeSurface = (sentiment: CriticalCommsBannerSentiment) => {\n  const Surface = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (\n    <SentimentSurface as=\"span\" emphasis=\"elevated\" sentiment={sentiment} {...props} />\n  );\n  Surface.displayName = `CriticalCommsSurface(${sentiment})`;\n  return Surface;\n};\n\nconst iconBySentiment: Record<CriticalCommsBannerSentiment, React.ReactNode> = {\n  [Sentiment.NEGATIVE]: (\n    <Circle as={makeSurface(Sentiment.NEGATIVE)} size={32} className=\"status-circle negative\">\n      <AlertIcon className=\"status-icon light\" />\n    </Circle>\n  ),\n  [Sentiment.WARNING]: (\n    <Circle as={makeSurface(Sentiment.WARNING)} size={32} className=\"status-circle warning\">\n      <AlertIcon className=\"status-icon dark\" />\n    </Circle>\n  ),\n  [Sentiment.NEUTRAL]: (\n    <Circle as={makeSurface(Sentiment.NEUTRAL)} size={32} className=\"status-circle neutral\">\n      <ClockIcon className=\"status-icon dark\" />\n    </Circle>\n  ),\n};\n\nfunction CriticalCommsBanner({\n  title,\n  subtitle,\n  action,\n  sentiment = Sentiment.NEGATIVE,\n  className,\n}: CriticalCommsBannerProps) {\n  return (\n    <SentimentSurface\n      sentiment={sentiment}\n      emphasis=\"elevated\"\n      className={clsx('critical-comms', className)}\n    >\n      <Alert\n        title={title}\n        message={subtitle}\n        action={{ onClick: action?.onClick, target: action?.href, text: action?.label }}\n        className={className}\n        type={sentiment}\n        icon={iconBySentiment[sentiment]}\n      />\n    </SentimentSurface>\n  );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["makeSurface","sentiment","Surface","props","_jsx","SentimentSurface","as","emphasis","displayName","iconBySentiment","Sentiment","NEGATIVE","Circle","size","className","children","AlertIcon","WARNING","NEUTRAL","ClockIcon","CriticalCommsBanner","title","subtitle","action","clsx","Alert","message","onClick","target","href","text","label","type","icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAMA,WAAW,GAAIC,SAAuC,IAAI;AAC9D,EAAA,MAAMC,OAAO,GAAIC,KAAwD,iBACvEC,cAAA,CAACC,wBAAgB,EAAA;AAACC,IAAAA,EAAE,EAAC,MAAM;AAACC,IAAAA,QAAQ,EAAC,UAAU;AAACN,IAAAA,SAAS,EAAEA,SAAU;IAAA,GAAKE;AAAK,GAAC,CACjF;AACDD,EAAAA,OAAO,CAACM,WAAW,GAAG,CAAA,qBAAA,EAAwBP,SAAS,CAAA,CAAA,CAAG;AAC1D,EAAA,OAAOC,OAAO;AAChB,CAAC;AAED,MAAMO,eAAe,GAA0D;AAC7E,EAAA,CAACC,mBAAS,CAACC,QAAQ,gBACjBP,cAAA,CAACQ,cAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,mBAAS,CAACC,QAAQ,CAAE;AAACE,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,wBAAwB;IAAAC,QAAA,eACvFX,cAAA,CAACY,WAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAmB;AAC1C,GAAQ,CACT;AACD,EAAA,CAACJ,mBAAS,CAACO,OAAO,gBAChBb,cAAA,CAACQ,cAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,mBAAS,CAACO,OAAO,CAAE;AAACJ,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,cAAA,CAACY,WAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAkB;AACzC,GAAQ,CACT;AACD,EAAA,CAACJ,mBAAS,CAACQ,OAAO,gBAChBd,cAAA,CAACQ,cAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,mBAAS,CAACQ,OAAO,CAAE;AAACL,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,cAAA,CAACe,qBAAS,EAAA;AAACL,MAAAA,SAAS,EAAC;KAAkB;GACjC;CAEX;AAED,SAASM,mBAAmBA,CAAC;EAC3BC,KAAK;EACLC,QAAQ;EACRC,MAAM;aACNtB,WAAS,GAAGS,mBAAS,CAACC,QAAQ;AAC9BG,EAAAA;AAAS,CACgB,EAAA;EACzB,oBACEV,cAAA,CAACC,wBAAgB,EAAA;AACfJ,IAAAA,SAAS,EAAEA,WAAU;AACrBM,IAAAA,QAAQ,EAAC,UAAU;AACnBO,IAAAA,SAAS,EAAEU,SAAI,CAAC,gBAAgB,EAAEV,SAAS,CAAE;IAAAC,QAAA,eAE7CX,cAAA,CAACqB,aAAK,EAAA;AACJJ,MAAAA,KAAK,EAAEA,KAAM;AACbK,MAAAA,OAAO,EAAEJ,QAAS;AAClBC,MAAAA,MAAM,EAAE;QAAEI,OAAO,EAAEJ,MAAM,EAAEI,OAAO;QAAEC,MAAM,EAAEL,MAAM,EAAEM,IAAI;QAAEC,IAAI,EAAEP,MAAM,EAAEQ;OAAQ;AAChFjB,MAAAA,SAAS,EAAEA,SAAU;AACrBkB,MAAAA,IAAI,EAAE/B,WAAU;MAChBgC,IAAI,EAAExB,eAAe,CAACR,WAAS;KAAE;AAErC,GAAkB,CAAC;AAEvB;;;;"}
+{"version":3,"file":"CriticalCommsBanner.js","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import { Alert as AlertIcon, ClockBorderless as ClockIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport Alert from '../alert';\nimport { Sentiment } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport SentimentSurface from '../sentimentSurface';\n\nexport type CriticalCommsBannerSentiment =\n  | `${Sentiment.WARNING}`\n  | `${Sentiment.NEGATIVE}`\n  | `${Sentiment.NEUTRAL}`;\n\nexport type CriticalCommsBannerProps = {\n  title: string;\n  subtitle?: string;\n  action?: {\n    label: string;\n    href?: string;\n    target?: HTMLAnchorElement['target'];\n    onClick?: () => void;\n  };\n  sentiment?: CriticalCommsBannerSentiment;\n  className?: string;\n};\n\nconst makeSurface = (sentiment: CriticalCommsBannerSentiment) => {\n  const Surface = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (\n    <SentimentSurface as=\"span\" emphasis=\"elevated\" sentiment={sentiment} {...props} />\n  );\n  Surface.displayName = `CriticalCommsSurface(${sentiment})`;\n  return Surface;\n};\n\nconst iconBySentiment: Record<CriticalCommsBannerSentiment, React.ReactNode> = {\n  [Sentiment.NEGATIVE]: (\n    <Circle as={makeSurface(Sentiment.NEGATIVE)} size={32} className=\"status-circle negative\">\n      <AlertIcon className=\"status-icon light\" />\n    </Circle>\n  ),\n  [Sentiment.WARNING]: (\n    <Circle as={makeSurface(Sentiment.WARNING)} size={32} className=\"status-circle warning\">\n      <AlertIcon className=\"status-icon dark\" />\n    </Circle>\n  ),\n  [Sentiment.NEUTRAL]: (\n    <Circle as={makeSurface(Sentiment.NEUTRAL)} size={32} className=\"status-circle neutral\">\n      <ClockIcon className=\"status-icon dark\" />\n    </Circle>\n  ),\n};\n\nfunction CriticalCommsBanner({\n  title,\n  subtitle,\n  action,\n  sentiment = Sentiment.NEGATIVE,\n  className,\n}: CriticalCommsBannerProps) {\n  return (\n    <SentimentSurface\n      sentiment={sentiment}\n      emphasis=\"elevated\"\n      className={clsx('critical-comms', className)}\n    >\n      <Alert\n        title={title}\n        message={subtitle}\n        action={\n          action && {\n            onClick: action.onClick,\n            href: action.href,\n            target: action.target,\n            text: action.label,\n            as: 'button',\n          }\n        }\n        className={className}\n        type={sentiment}\n        icon={iconBySentiment[sentiment]}\n      />\n    </SentimentSurface>\n  );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["makeSurface","sentiment","Surface","props","_jsx","SentimentSurface","as","emphasis","displayName","iconBySentiment","Sentiment","NEGATIVE","Circle","size","className","children","AlertIcon","WARNING","NEUTRAL","ClockIcon","CriticalCommsBanner","title","subtitle","action","clsx","Alert","message","onClick","href","target","text","label","type","icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAMA,WAAW,GAAIC,SAAuC,IAAI;AAC9D,EAAA,MAAMC,OAAO,GAAIC,KAAwD,iBACvEC,cAAA,CAACC,wBAAgB,EAAA;AAACC,IAAAA,EAAE,EAAC,MAAM;AAACC,IAAAA,QAAQ,EAAC,UAAU;AAACN,IAAAA,SAAS,EAAEA,SAAU;IAAA,GAAKE;AAAK,GAAC,CACjF;AACDD,EAAAA,OAAO,CAACM,WAAW,GAAG,CAAA,qBAAA,EAAwBP,SAAS,CAAA,CAAA,CAAG;AAC1D,EAAA,OAAOC,OAAO;AAChB,CAAC;AAED,MAAMO,eAAe,GAA0D;AAC7E,EAAA,CAACC,mBAAS,CAACC,QAAQ,gBACjBP,cAAA,CAACQ,cAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,mBAAS,CAACC,QAAQ,CAAE;AAACE,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,wBAAwB;IAAAC,QAAA,eACvFX,cAAA,CAACY,WAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAmB;AAC1C,GAAQ,CACT;AACD,EAAA,CAACJ,mBAAS,CAACO,OAAO,gBAChBb,cAAA,CAACQ,cAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,mBAAS,CAACO,OAAO,CAAE;AAACJ,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,cAAA,CAACY,WAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAkB;AACzC,GAAQ,CACT;AACD,EAAA,CAACJ,mBAAS,CAACQ,OAAO,gBAChBd,cAAA,CAACQ,cAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,mBAAS,CAACQ,OAAO,CAAE;AAACL,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,cAAA,CAACe,qBAAS,EAAA;AAACL,MAAAA,SAAS,EAAC;KAAkB;GACjC;CAEX;AAED,SAASM,mBAAmBA,CAAC;EAC3BC,KAAK;EACLC,QAAQ;EACRC,MAAM;aACNtB,WAAS,GAAGS,mBAAS,CAACC,QAAQ;AAC9BG,EAAAA;AAAS,CACgB,EAAA;EACzB,oBACEV,cAAA,CAACC,wBAAgB,EAAA;AACfJ,IAAAA,SAAS,EAAEA,WAAU;AACrBM,IAAAA,QAAQ,EAAC,UAAU;AACnBO,IAAAA,SAAS,EAAEU,SAAI,CAAC,gBAAgB,EAAEV,SAAS,CAAE;IAAAC,QAAA,eAE7CX,cAAA,CAACqB,aAAK,EAAA;AACJJ,MAAAA,KAAK,EAAEA,KAAM;AACbK,MAAAA,OAAO,EAAEJ,QAAS;MAClBC,MAAM,EACJA,MAAM,IAAI;QACRI,OAAO,EAAEJ,MAAM,CAACI,OAAO;QACvBC,IAAI,EAAEL,MAAM,CAACK,IAAI;QACjBC,MAAM,EAAEN,MAAM,CAACM,MAAM;QACrBC,IAAI,EAAEP,MAAM,CAACQ,KAAK;AAClBzB,QAAAA,EAAE,EAAE;OAEP;AACDQ,MAAAA,SAAS,EAAEA,SAAU;AACrBkB,MAAAA,IAAI,EAAE/B,WAAU;MAChBgC,IAAI,EAAExB,eAAe,CAACR,WAAS;KAAE;AAErC,GAAkB,CAAC;AAEvB;;;;"}

package/build/criticalBanner/CriticalCommsBanner.mjs

@@ -77,10 +77,12 @@ function CriticalCommsBanner({
     children: /*#__PURE__*/jsx(Alert$1, {
       title: title,
       message: subtitle,
-      action: {
-        onClick: action?.onClick,
-        target: action?.href,
-        text: action?.label
+      action: action && {
+        onClick: action.onClick,
+        href: action.href,
+        target: action.target,
+        text: action.label,
+        as: 'button'
       },
       className: className,
       type: sentiment,

package/build/criticalBanner/CriticalCommsBanner.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CriticalCommsBanner.mjs","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import { Alert as AlertIcon, ClockBorderless as ClockIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport Alert from '../alert';\nimport { Sentiment } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport SentimentSurface from '../sentimentSurface';\n\nexport type CriticalCommsBannerSentiment =\n  | `${Sentiment.WARNING}`\n  | `${Sentiment.NEGATIVE}`\n  | `${Sentiment.NEUTRAL}`;\n\nexport type CriticalCommsBannerProps = {\n  title: string;\n  subtitle?: string;\n  action?: {\n    label: string;\n    href?: string;\n    onClick?: () => void;\n  };\n  sentiment?: CriticalCommsBannerSentiment;\n  className?: string;\n};\n\nconst makeSurface = (sentiment: CriticalCommsBannerSentiment) => {\n  const Surface = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (\n    <SentimentSurface as=\"span\" emphasis=\"elevated\" sentiment={sentiment} {...props} />\n  );\n  Surface.displayName = `CriticalCommsSurface(${sentiment})`;\n  return Surface;\n};\n\nconst iconBySentiment: Record<CriticalCommsBannerSentiment, React.ReactNode> = {\n  [Sentiment.NEGATIVE]: (\n    <Circle as={makeSurface(Sentiment.NEGATIVE)} size={32} className=\"status-circle negative\">\n      <AlertIcon className=\"status-icon light\" />\n    </Circle>\n  ),\n  [Sentiment.WARNING]: (\n    <Circle as={makeSurface(Sentiment.WARNING)} size={32} className=\"status-circle warning\">\n      <AlertIcon className=\"status-icon dark\" />\n    </Circle>\n  ),\n  [Sentiment.NEUTRAL]: (\n    <Circle as={makeSurface(Sentiment.NEUTRAL)} size={32} className=\"status-circle neutral\">\n      <ClockIcon className=\"status-icon dark\" />\n    </Circle>\n  ),\n};\n\nfunction CriticalCommsBanner({\n  title,\n  subtitle,\n  action,\n  sentiment = Sentiment.NEGATIVE,\n  className,\n}: CriticalCommsBannerProps) {\n  return (\n    <SentimentSurface\n      sentiment={sentiment}\n      emphasis=\"elevated\"\n      className={clsx('critical-comms', className)}\n    >\n      <Alert\n        title={title}\n        message={subtitle}\n        action={{ onClick: action?.onClick, target: action?.href, text: action?.label }}\n        className={className}\n        type={sentiment}\n        icon={iconBySentiment[sentiment]}\n      />\n    </SentimentSurface>\n  );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["makeSurface","sentiment","Surface","props","_jsx","SentimentSurface","as","emphasis","displayName","iconBySentiment","Sentiment","NEGATIVE","Circle","size","className","children","AlertIcon","WARNING","NEUTRAL","ClockIcon","CriticalCommsBanner","title","subtitle","action","clsx","Alert","message","onClick","target","href","text","label","type","icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAMA,WAAW,GAAIC,SAAuC,IAAI;AAC9D,EAAA,MAAMC,OAAO,GAAIC,KAAwD,iBACvEC,GAAA,CAACC,gBAAgB,EAAA;AAACC,IAAAA,EAAE,EAAC,MAAM;AAACC,IAAAA,QAAQ,EAAC,UAAU;AAACN,IAAAA,SAAS,EAAEA,SAAU;IAAA,GAAKE;AAAK,GAAC,CACjF;AACDD,EAAAA,OAAO,CAACM,WAAW,GAAG,CAAA,qBAAA,EAAwBP,SAAS,CAAA,CAAA,CAAG;AAC1D,EAAA,OAAOC,OAAO;AAChB,CAAC;AAED,MAAMO,eAAe,GAA0D;AAC7E,EAAA,CAACC,SAAS,CAACC,QAAQ,gBACjBP,GAAA,CAACQ,MAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,SAAS,CAACC,QAAQ,CAAE;AAACE,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,wBAAwB;IAAAC,QAAA,eACvFX,GAAA,CAACY,KAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAmB;AAC1C,GAAQ,CACT;AACD,EAAA,CAACJ,SAAS,CAACO,OAAO,gBAChBb,GAAA,CAACQ,MAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,SAAS,CAACO,OAAO,CAAE;AAACJ,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,GAAA,CAACY,KAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAkB;AACzC,GAAQ,CACT;AACD,EAAA,CAACJ,SAAS,CAACQ,OAAO,gBAChBd,GAAA,CAACQ,MAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,SAAS,CAACQ,OAAO,CAAE;AAACL,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,GAAA,CAACe,eAAS,EAAA;AAACL,MAAAA,SAAS,EAAC;KAAkB;GACjC;CAEX;AAED,SAASM,mBAAmBA,CAAC;EAC3BC,KAAK;EACLC,QAAQ;EACRC,MAAM;EACNtB,SAAS,GAAGS,SAAS,CAACC,QAAQ;AAC9BG,EAAAA;AAAS,CACgB,EAAA;EACzB,oBACEV,GAAA,CAACC,gBAAgB,EAAA;AACfJ,IAAAA,SAAS,EAAEA,SAAU;AACrBM,IAAAA,QAAQ,EAAC,UAAU;AACnBO,IAAAA,SAAS,EAAEU,IAAI,CAAC,gBAAgB,EAAEV,SAAS,CAAE;IAAAC,QAAA,eAE7CX,GAAA,CAACqB,OAAK,EAAA;AACJJ,MAAAA,KAAK,EAAEA,KAAM;AACbK,MAAAA,OAAO,EAAEJ,QAAS;AAClBC,MAAAA,MAAM,EAAE;QAAEI,OAAO,EAAEJ,MAAM,EAAEI,OAAO;QAAEC,MAAM,EAAEL,MAAM,EAAEM,IAAI;QAAEC,IAAI,EAAEP,MAAM,EAAEQ;OAAQ;AAChFjB,MAAAA,SAAS,EAAEA,SAAU;AACrBkB,MAAAA,IAAI,EAAE/B,SAAU;MAChBgC,IAAI,EAAExB,eAAe,CAACR,SAAS;KAAE;AAErC,GAAkB,CAAC;AAEvB;;;;"}
+{"version":3,"file":"CriticalCommsBanner.mjs","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import { Alert as AlertIcon, ClockBorderless as ClockIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport Alert from '../alert';\nimport { Sentiment } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport SentimentSurface from '../sentimentSurface';\n\nexport type CriticalCommsBannerSentiment =\n  | `${Sentiment.WARNING}`\n  | `${Sentiment.NEGATIVE}`\n  | `${Sentiment.NEUTRAL}`;\n\nexport type CriticalCommsBannerProps = {\n  title: string;\n  subtitle?: string;\n  action?: {\n    label: string;\n    href?: string;\n    target?: HTMLAnchorElement['target'];\n    onClick?: () => void;\n  };\n  sentiment?: CriticalCommsBannerSentiment;\n  className?: string;\n};\n\nconst makeSurface = (sentiment: CriticalCommsBannerSentiment) => {\n  const Surface = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (\n    <SentimentSurface as=\"span\" emphasis=\"elevated\" sentiment={sentiment} {...props} />\n  );\n  Surface.displayName = `CriticalCommsSurface(${sentiment})`;\n  return Surface;\n};\n\nconst iconBySentiment: Record<CriticalCommsBannerSentiment, React.ReactNode> = {\n  [Sentiment.NEGATIVE]: (\n    <Circle as={makeSurface(Sentiment.NEGATIVE)} size={32} className=\"status-circle negative\">\n      <AlertIcon className=\"status-icon light\" />\n    </Circle>\n  ),\n  [Sentiment.WARNING]: (\n    <Circle as={makeSurface(Sentiment.WARNING)} size={32} className=\"status-circle warning\">\n      <AlertIcon className=\"status-icon dark\" />\n    </Circle>\n  ),\n  [Sentiment.NEUTRAL]: (\n    <Circle as={makeSurface(Sentiment.NEUTRAL)} size={32} className=\"status-circle neutral\">\n      <ClockIcon className=\"status-icon dark\" />\n    </Circle>\n  ),\n};\n\nfunction CriticalCommsBanner({\n  title,\n  subtitle,\n  action,\n  sentiment = Sentiment.NEGATIVE,\n  className,\n}: CriticalCommsBannerProps) {\n  return (\n    <SentimentSurface\n      sentiment={sentiment}\n      emphasis=\"elevated\"\n      className={clsx('critical-comms', className)}\n    >\n      <Alert\n        title={title}\n        message={subtitle}\n        action={\n          action && {\n            onClick: action.onClick,\n            href: action.href,\n            target: action.target,\n            text: action.label,\n            as: 'button',\n          }\n        }\n        className={className}\n        type={sentiment}\n        icon={iconBySentiment[sentiment]}\n      />\n    </SentimentSurface>\n  );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["makeSurface","sentiment","Surface","props","_jsx","SentimentSurface","as","emphasis","displayName","iconBySentiment","Sentiment","NEGATIVE","Circle","size","className","children","AlertIcon","WARNING","NEUTRAL","ClockIcon","CriticalCommsBanner","title","subtitle","action","clsx","Alert","message","onClick","href","target","text","label","type","icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAMA,WAAW,GAAIC,SAAuC,IAAI;AAC9D,EAAA,MAAMC,OAAO,GAAIC,KAAwD,iBACvEC,GAAA,CAACC,gBAAgB,EAAA;AAACC,IAAAA,EAAE,EAAC,MAAM;AAACC,IAAAA,QAAQ,EAAC,UAAU;AAACN,IAAAA,SAAS,EAAEA,SAAU;IAAA,GAAKE;AAAK,GAAC,CACjF;AACDD,EAAAA,OAAO,CAACM,WAAW,GAAG,CAAA,qBAAA,EAAwBP,SAAS,CAAA,CAAA,CAAG;AAC1D,EAAA,OAAOC,OAAO;AAChB,CAAC;AAED,MAAMO,eAAe,GAA0D;AAC7E,EAAA,CAACC,SAAS,CAACC,QAAQ,gBACjBP,GAAA,CAACQ,MAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,SAAS,CAACC,QAAQ,CAAE;AAACE,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,wBAAwB;IAAAC,QAAA,eACvFX,GAAA,CAACY,KAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAmB;AAC1C,GAAQ,CACT;AACD,EAAA,CAACJ,SAAS,CAACO,OAAO,gBAChBb,GAAA,CAACQ,MAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,SAAS,CAACO,OAAO,CAAE;AAACJ,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,GAAA,CAACY,KAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAkB;AACzC,GAAQ,CACT;AACD,EAAA,CAACJ,SAAS,CAACQ,OAAO,gBAChBd,GAAA,CAACQ,MAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,SAAS,CAACQ,OAAO,CAAE;AAACL,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,GAAA,CAACe,eAAS,EAAA;AAACL,MAAAA,SAAS,EAAC;KAAkB;GACjC;CAEX;AAED,SAASM,mBAAmBA,CAAC;EAC3BC,KAAK;EACLC,QAAQ;EACRC,MAAM;EACNtB,SAAS,GAAGS,SAAS,CAACC,QAAQ;AAC9BG,EAAAA;AAAS,CACgB,EAAA;EACzB,oBACEV,GAAA,CAACC,gBAAgB,EAAA;AACfJ,IAAAA,SAAS,EAAEA,SAAU;AACrBM,IAAAA,QAAQ,EAAC,UAAU;AACnBO,IAAAA,SAAS,EAAEU,IAAI,CAAC,gBAAgB,EAAEV,SAAS,CAAE;IAAAC,QAAA,eAE7CX,GAAA,CAACqB,OAAK,EAAA;AACJJ,MAAAA,KAAK,EAAEA,KAAM;AACbK,MAAAA,OAAO,EAAEJ,QAAS;MAClBC,MAAM,EACJA,MAAM,IAAI;QACRI,OAAO,EAAEJ,MAAM,CAACI,OAAO;QACvBC,IAAI,EAAEL,MAAM,CAACK,IAAI;QACjBC,MAAM,EAAEN,MAAM,CAACM,MAAM;QACrBC,IAAI,EAAEP,MAAM,CAACQ,KAAK;AAClBzB,QAAAA,EAAE,EAAE;OAEP;AACDQ,MAAAA,SAAS,EAAEA,SAAU;AACrBkB,MAAAA,IAAI,EAAE/B,SAAU;MAChBgC,IAAI,EAAExB,eAAe,CAACR,SAAS;KAAE;AAErC,GAAkB,CAAC;AAEvB;;;;"}

package/build/main.css

@@ -518,6 +518,15 @@
   --Button-background-hover: var(--color-sentiment-interactive-primary-hover);
   --Button-background-active: var(--color-sentiment-interactive-primary-active);
 }
+.critical-comms .wds-Button[class] {
+  color: var(--Button-color);
+}
+.critical-comms .wds-Button[class]:hover {
+  color: var(--Button-color-hover);
+}
+.critical-comms .wds-Button[class]:active {
+  color: var(--Button-color-active);
+}
 .critical-comms .alert-warning .wds-Button {
   --Button-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover);
   --Button-background-active: var(--color-sentiment-interactive-secondary-neutral-active);

package/build/styles/criticalBanner/CriticalCommsBanner.css

@@ -31,6 +31,15 @@
   --Button-background-hover: var(--color-sentiment-interactive-primary-hover);
   --Button-background-active: var(--color-sentiment-interactive-primary-active);
 }
+.critical-comms .wds-Button[class] {
+  color: var(--Button-color);
+}
+.critical-comms .wds-Button[class]:hover {
+  color: var(--Button-color-hover);
+}
+.critical-comms .wds-Button[class]:active {
+  color: var(--Button-color-active);
+}
 .critical-comms .alert-warning .wds-Button {
   --Button-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover);
   --Button-background-active: var(--color-sentiment-interactive-secondary-neutral-active);

package/build/styles/main.css

@@ -518,6 +518,15 @@
   --Button-background-hover: var(--color-sentiment-interactive-primary-hover);
   --Button-background-active: var(--color-sentiment-interactive-primary-active);
 }
+.critical-comms .wds-Button[class] {
+  color: var(--Button-color);
+}
+.critical-comms .wds-Button[class]:hover {
+  color: var(--Button-color-hover);
+}
+.critical-comms .wds-Button[class]:active {
+  color: var(--Button-color-active);
+}
 .critical-comms .alert-warning .wds-Button {
   --Button-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover);
   --Button-background-active: var(--color-sentiment-interactive-secondary-neutral-active);

package/build/types/alert/Alert.d.ts

@@ -8,6 +8,8 @@ export type AlertAction = {
     target?: string;
     text: React.ReactNode;
     onClick?: () => void;
+    /** Controls the rendered element: `'link'` (default) renders a Link, `'button'` renders a Button. When `'button'` is used with `href`, renders an anchor styled as a button. */
+    as?: 'button' | 'link';
 };
 /** @deprecated Use `"top" | "bottom"` instead. */
 type AlertTypeDeprecated = `${Sentiment.SUCCESS | Sentiment.INFO | Sentiment.ERROR}`;

package/build/types/alert/Alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/alert/Alert.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,SAAS,EACT,IAAI,EACJ,MAAM,EAGP,MAAM,WAAW,CAAC;AAUnB;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,kDAAkD;AAClD,KAAK,mBAAmB,GAAG,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,CAAC;AACrF,KAAK,iBAAiB,GAAG,GACrB,SAAS,CAAC,QAAQ,GAClB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,QAAQ,GAElB,SAAS,CAAC,OAAO,GACjB,MAAM,CAAC,OAAO,EAAE,CAAC;AAErB;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;AAEhE;;GAEG;AACH,oBAAY,kBAAkB;IAC5B,QAAQ,YAAY;IACpB,GAAG,cAAc;IACjB,SAAS,aAAa;IACtB,WAAW,cAAc;IACzB,MAAM,gBAAgB;IACtB,YAAY,eAAe;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,yIAAyI;IACzI,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;SAGK;IACL,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kGAAkG;IAClG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvD;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAChC,oHAAoH;IACpH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC;CAClB;AAeD;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,MAAM,EACN,SAAS,EACT,IAAI,EACJ,eAAe,EACf,SAAS,EACT,OAAO,EACP,KAAK,EACL,IAAgB,EAChB,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,WAAW,GACZ,EAAE,UAAU,+BAsJZ"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/alert/Alert.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,SAAS,EACT,IAAI,EACJ,MAAM,EAGP,MAAM,WAAW,CAAC;AAUnB;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gLAAgL;IAChL,EAAE,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;CACxB,CAAC;AAEF,kDAAkD;AAClD,KAAK,mBAAmB,GAAG,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,CAAC;AACrF,KAAK,iBAAiB,GAAG,GACrB,SAAS,CAAC,QAAQ,GAClB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,QAAQ,GAElB,SAAS,CAAC,OAAO,GACjB,MAAM,CAAC,OAAO,EAAE,CAAC;AAErB;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;AAEhE;;GAEG;AACH,oBAAY,kBAAkB;IAC5B,QAAQ,YAAY;IACpB,GAAG,cAAc;IACjB,SAAS,aAAa;IACtB,WAAW,cAAc;IACzB,MAAM,gBAAgB;IACtB,YAAY,eAAe;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,yIAAyI;IACzI,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;SAGK;IACL,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kGAAkG;IAClG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvD;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAChC,oHAAoH;IACpH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC;CAClB;AAeD;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,MAAM,EACN,SAAS,EACT,IAAI,EACJ,eAAe,EACf,SAAS,EACT,OAAO,EACP,KAAK,EACL,IAAgB,EAChB,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,WAAW,GACZ,EAAE,UAAU,+BAyJZ"}

package/build/types/criticalBanner/CriticalCommsBanner.d.ts

@@ -6,6 +6,7 @@ export type CriticalCommsBannerProps = {
     action?: {
         label: string;
         href?: string;
+        target?: HTMLAnchorElement['target'];
         onClick?: () => void;
     };
     sentiment?: CriticalCommsBannerSentiment;

package/build/types/criticalBanner/CriticalCommsBanner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CriticalCommsBanner.d.ts","sourceRoot":"","sources":["../../../src/criticalBanner/CriticalCommsBanner.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAItC,MAAM,MAAM,4BAA4B,GACpC,GAAG,SAAS,CAAC,OAAO,EAAE,GACtB,GAAG,SAAS,CAAC,QAAQ,EAAE,GACvB,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC;AAE3B,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC;IACF,SAAS,CAAC,EAAE,4BAA4B,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA4BF,iBAAS,mBAAmB,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAA8B,EAC9B,SAAS,GACV,EAAE,wBAAwB,+BAiB1B;AAED,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"CriticalCommsBanner.d.ts","sourceRoot":"","sources":["../../../src/criticalBanner/CriticalCommsBanner.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAItC,MAAM,MAAM,4BAA4B,GACpC,GAAG,SAAS,CAAC,OAAO,EAAE,GACtB,GAAG,SAAS,CAAC,QAAQ,EAAE,GACvB,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC;AAE3B,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,MAAM,CAAC,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC;QACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC;IACF,SAAS,CAAC,EAAE,4BAA4B,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA4BF,iBAAS,mBAAmB,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAA8B,EAC9B,SAAS,GACV,EAAE,wBAAwB,+BAyB1B;AAED,eAAe,mBAAmB,CAAC"}

package/package.json

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

package/src/alert/Alert.tsx

@@ -28,6 +28,8 @@ export type AlertAction = {
   target?: string;
   text: React.ReactNode;
   onClick?: () => void;
+  /** Controls the rendered element: `'link'` (default) renders a Link, `'button'` renders a Button. When `'button'` is used with `href`, renders an anchor styled as a button. */
+  as?: 'button' | 'link';
 };
 
 /** @deprecated Use `"top" | "bottom"` instead. */
@@ -231,7 +233,7 @@ export default function Alert({
               </Body>
             </div>
             {action &&
-              ('href' in action ? (
+              ('href' in action && action.as !== 'button' ? (
                 <Link
                   href={action.href}
                   aria-label={action['aria-label']}
@@ -246,6 +248,9 @@ export default function Alert({
               ) : (
                 <Button
                   v2
+                  as={action.href ? 'a' : 'button'}
+                  href={action.href}
+                  target={action.target}
                   size="sm"
                   sentiment="default"
                   aria-label={action['aria-label']}

package/src/criticalBanner/CriticalCommsBanner.css

@@ -31,6 +31,15 @@
   --Button-background-hover: var(--color-sentiment-interactive-primary-hover);
   --Button-background-active: var(--color-sentiment-interactive-primary-active);
 }
+.critical-comms .wds-Button[class] {
+  color: var(--Button-color);
+}
+.critical-comms .wds-Button[class]:hover {
+  color: var(--Button-color-hover);
+}
+.critical-comms .wds-Button[class]:active {
+  color: var(--Button-color-active);
+}
 .critical-comms .alert-warning .wds-Button {
   --Button-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover);
   --Button-background-active: var(--color-sentiment-interactive-secondary-neutral-active);

package/src/criticalBanner/CriticalCommsBanner.less

@@ -34,6 +34,19 @@
     --Button-background: var(--color-background-screen);
     --Button-background-hover: var(--color-sentiment-interactive-primary-hover);
     --Button-background-active: var(--color-sentiment-interactive-primary-active);
+
+    // Override legacy neptune CSS selector `.np-theme-personal .alert-negative a`
+    &[class] {
+      color: var(--Button-color);
+
+      &:hover {
+        color: var(--Button-color-hover);
+      }
+
+      &:active {
+        color: var(--Button-color-active);
+      }
+    }
   }
 
   .alert-warning .wds-Button {

package/src/criticalBanner/CriticalCommsBanner.test.story.tsx

@@ -68,3 +68,18 @@ export const Zoom: Story = {
   },
   ...withVariantConfig(['400%']),
 };
+
+export const WithoutAction: Story = {
+  render: (args) => (
+    <>
+      <CriticalCommsBanner {...args} sentiment="negative" />
+      <CriticalCommsBanner {...args} sentiment="warning" />
+      <CriticalCommsBanner {...args} sentiment="neutral" />
+    </>
+  ),
+  args: {
+    subtitle: 'Add money within the next 30 days',
+    className: 'm-b-1',
+  },
+  ...withVariantConfig(['default']),
+};

package/src/criticalBanner/CriticalCommsBanner.test.tsx

@@ -19,10 +19,36 @@ describe('CriticalCommsBanner', () => {
     expect(screen.getByTestId('alert')).toHaveClass('alert-negative');
   });
 
-  it('renders the action', () => {
+  it('renders the action as a link with correct href', () => {
     render(<CriticalCommsBanner {...defaultProps} />);
 
-    expect(screen.getByText('Take action')).toBeInTheDocument();
+    const action = screen.getByText('Take action');
+    expect(action.closest('a')).toHaveAttribute('href', 'https://wise.com');
+  });
+
+  it('renders the action as a button when only onClick is provided', () => {
+    const onClick = jest.fn();
+    render(<CriticalCommsBanner title="Test title" action={{ label: 'Take action', onClick }} />);
+
+    expect(screen.getByText('Take action').closest('button')).toBeInTheDocument();
+  });
+
+  it('passes target to the action link', () => {
+    render(
+      <CriticalCommsBanner
+        {...defaultProps}
+        action={{ label: 'Take action', href: 'https://wise.com', target: '_blank' }}
+      />,
+    );
+
+    expect(screen.getByText('Take action').closest('a')).toHaveAttribute('target', '_blank');
+  });
+
+  it('does not render the action when action is undefined', () => {
+    render(<CriticalCommsBanner title="Test title" />);
+
+    expect(screen.queryByRole('link')).not.toBeInTheDocument();
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
   });
 
   describe('sentiment variants', () => {

package/src/criticalBanner/CriticalCommsBanner.tsx

@@ -18,6 +18,7 @@ export type CriticalCommsBannerProps = {
   action?: {
     label: string;
     href?: string;
+    target?: HTMLAnchorElement['target'];
     onClick?: () => void;
   };
   sentiment?: CriticalCommsBannerSentiment;
@@ -66,7 +67,15 @@ function CriticalCommsBanner({
       <Alert
         title={title}
         message={subtitle}
-        action={{ onClick: action?.onClick, target: action?.href, text: action?.label }}
+        action={
+          action && {
+            onClick: action.onClick,
+            href: action.href,
+            target: action.target,
+            text: action.label,
+            as: 'button',
+          }
+        }
         className={className}
         type={sentiment}
         icon={iconBySentiment[sentiment]}

package/src/main.css

@@ -518,6 +518,15 @@
   --Button-background-hover: var(--color-sentiment-interactive-primary-hover);
   --Button-background-active: var(--color-sentiment-interactive-primary-active);
 }
+.critical-comms .wds-Button[class] {
+  color: var(--Button-color);
+}
+.critical-comms .wds-Button[class]:hover {
+  color: var(--Button-color-hover);
+}
+.critical-comms .wds-Button[class]:active {
+  color: var(--Button-color-active);
+}
 .critical-comms .alert-warning .wds-Button {
   --Button-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover);
   --Button-background-active: var(--color-sentiment-interactive-secondary-neutral-active);