@transferwise/components 46.116.0 → 46.116.1

package/build/alert/Alert.js

@@ -98,9 +98,10 @@ function Alert({
   const [shouldFire, setShouldFire] = React.useState();
   const [shouldAnnounce, setShouldAnnounce] = React.useState(false);
   React.useEffect(() => {
-    setTimeout(() => {
+    const timeoutId = setTimeout(() => {
       setShouldAnnounce(true);
     }, constants.WDS_LIVE_REGION_DELAY_MS);
+    return () => clearTimeout(timeoutId);
   }, []);
   const closeButtonReference = React.useRef(null);
   /**

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\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}`;\nexport type AlertType = AlertTypeResolved | AlertTypeDeprecated;\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\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  /** The type dictates which icon and colour will be used */\n  type?: AlertType;\n  /** @deprecated Use `InlineAlert` 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\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 'InlineAlert' 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    setTimeout(() => {\n      setShouldAnnounce(true);\n    }, WDS_LIVE_REGION_DELAY_MS);\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","setTimeout","WDS_LIVE_REGION_DELAY_MS","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\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}`;\nexport type AlertType = AlertTypeResolved | AlertTypeDeprecated;\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\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  /** The type dictates which icon and colour will be used */\n  type?: AlertType;\n  /** @deprecated Use `InlineAlert` 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\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 'InlineAlert' 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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"}

package/build/alert/Alert.mjs

@@ -94,9 +94,10 @@ function Alert({
   const [shouldFire, setShouldFire] = useState();
   const [shouldAnnounce, setShouldAnnounce] = useState(false);
   useEffect(() => {
-    setTimeout(() => {
+    const timeoutId = setTimeout(() => {
       setShouldAnnounce(true);
     }, WDS_LIVE_REGION_DELAY_MS);
+    return () => clearTimeout(timeoutId);
   }, []);
   const closeButtonReference = useRef(null);
   /**

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\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}`;\nexport type AlertType = AlertTypeResolved | AlertTypeDeprecated;\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\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  /** The type dictates which icon and colour will be used */\n  type?: AlertType;\n  /** @deprecated Use `InlineAlert` 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\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 'InlineAlert' 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    setTimeout(() => {\n      setShouldAnnounce(true);\n    }, WDS_LIVE_REGION_DELAY_MS);\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","setTimeout","WDS_LIVE_REGION_DELAY_MS","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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAyCYA;AAAZ,CAAA,UAAYA,kBAAkB,EAAA;AAC5BA,EAAAA,kBAAA,CAAA,UAAA,CAAA,GAAA,SAAoB;AACpBA,EAAAA,kBAAA,CAAA,KAAA,CAAA,GAAA,WAAiB;AACjBA,EAAAA,kBAAA,CAAA,WAAA,CAAA,GAAA,UAAsB;AACtBA,EAAAA,kBAAA,CAAA,aAAA,CAAA,GAAA,WAAyB;AACzBA,EAAAA,kBAAA,CAAA,QAAA,CAAA,GAAA,aAAsB;AACtBA,EAAAA,kBAAA,CAAA,cAAA,CAAA,GAAA,YAA2B;AAC7B,CAAC,EAPWA,kBAAkB,KAAlBA,kBAAkB,GAAA,EAAA,CAAA,CAAA;AAsC9B,SAASC,WAAWA,CAACC,IAAe,EAAA;AAClC,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,SAAS;AACZ,MAAA,OAAO,UAAU;AACnB,IAAA,KAAK,MAAM;AACT,MAAA,OAAO,SAAS;AAClB,IAAA,KAAK,OAAO;AACV,MAAA,OAAO,UAAU;AACnB,IAAA;AACE,MAAA,OAAOA,IAAI;AACf;AACF;AAEc,SAAUC,KAAKA,CAAC;EAC5BC,MAAM;EACNC,SAAS;EACTC,IAAI;EACJC,eAAe;EACfC,SAAS;EACTC,OAAO;EACPC,KAAK;AACLR,EAAAA,IAAI,GAAG,SAAS;EAChBS,KAAK;EACLC,QAAQ;EACRC,IAAI;AACJC,EAAAA;AAAW,CACA,EAAA;AACXC,EAAAA,SAAS,CAAC,MAAK;IACb,IAAIJ,KAAK,KAAKK,SAAS,EAAE;MACvBC,iBAAiB,CACf,6EAA6E,CAC9E;AACH,IAAA;AACF,EAAA,CAAC,EAAE,CAACN,KAAK,CAAC,CAAC;AAEXI,EAAAA,SAAS,CAAC,MAAK;IACb,IAAIH,QAAQ,KAAKI,SAAS,EAAE;MAC1BC,iBAAiB,CACf,4EAA4E,CAC7E;AACH,IAAA;AACF,EAAA,CAAC,EAAE,CAACL,QAAQ,CAAC,CAAC;AAEdG,EAAAA,SAAS,CAAC,MAAK;IACb,IAAID,WAAW,KAAKE,SAAS,EAAE;MAC7BC,iBAAiB,CACf,iFAAiF,CAClF;AACH,IAAA;AACF,EAAA,CAAC,EAAE,CAACH,WAAW,CAAC,CAAC;AAEjBC,EAAAA,SAAS,CAAC,MAAK;IACb,IAAIF,IAAI,KAAKG,SAAS,EAAE;MACtBC,iBAAiB,CAAC,0EAA0E,CAAC;AAC/F,IAAA;AACF,EAAA,CAAC,EAAE,CAACJ,IAAI,CAAC,CAAC;AAEV,EAAA,MAAMK,YAAY,GAAGjB,WAAW,CAACC,IAAI,CAAC;AACtCa,EAAAA,SAAS,CAAC,MAAK;IACb,IAAIG,YAAY,KAAKhB,IAAI,EAAE;AACzBe,MAAAA,iBAAiB,CACf,CAAA,gCAAA,EAAmCf,IAAI,CAAA,yCAAA,EAA4CgB,YAAY,YAAY,CAC5G;AACH,IAAA;AACF,EAAA,CAAC,EAAE,CAACA,YAAY,EAAEhB,IAAI,CAAC,CAAC;EAExB,MAAM,CAACiB,UAAU,EAAEC,aAAa,CAAC,GAAGC,QAAQ,EAAW;EAEvD,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGF,QAAQ,CAAU,KAAK,CAAC;AACpEN,EAAAA,SAAS,CAAC,MAAK;AACbS,IAAAA,UAAU,CAAC,MAAK;MACdD,iBAAiB,CAAC,IAAI,CAAC;IACzB,CAAC,EAAEE,wBAAwB,CAAC;EAC9B,CAAC,EAAE,EAAE,CAAC;AAEN,EAAA,MAAMC,oBAAoB,GAAGC,MAAM,CAAoB,IAAI,CAAC;AAE5D;;;AAGG;AACH,EAAA,MAAMC,kBAAkB,GAAGN,cAAc,GAAGN,SAAS,GAAG,EAAE;AAE1D,EAAA,oBACEa,GAAA,CAAA,KAAA,EAAA;IACEC,IAAI,EAAEZ,YAAY,KAAKa,SAAS,CAACC,QAAQ,GAAG,OAAO,GAAG,QAAS;AAC/D3B,IAAAA,SAAS,EAAC,uBAAuB;AAAAO,IAAAA,QAAA,eAEjCqB,IAAA,CAAA,KAAA,EAAA;AACE,MAAA,aAAA,EAAaX,cAAc,GAAGN,SAAS,GAAG,MAAO;AACjDX,MAAAA,SAAS,EAAE6B,IAAI,CACb,cAAc,EACd,CAAA,MAAA,EAAShB,YAAY,CAAA,CAAE,EACvBP,KAAK,IAAI,IAAI,IAAIwB,oBAAoB,CAACxB,KAAK,CAAC,EAC5CN,SAAS,CACT;AACF,MAAA,aAAA,EAAY,OAAO;AACnB+B,MAAAA,YAAY,EAAEA,MAAMhB,aAAa,CAAC,IAAI,CAAE;MACxCiB,UAAU,EAAGC,KAAK,IAAI;AACpB,QAAA,IACEnB,UAAU,IACVf,MAAM,EAAEmC,IAAI;AACZ;QACAD,KAAK,CAACE,MAAM,YAAYC,IAAI,IAC5Bf,oBAAoB,CAACgB,OAAO,IAC5B,CAAChB,oBAAoB,CAACgB,OAAO,CAACC,QAAQ,CAACL,KAAK,CAACE,MAAM,CAAC,EACpD;AACA,UAAA,IAAIpC,MAAM,CAACoC,MAAM,KAAK,QAAQ,EAAE;YAC9BI,MAAM,CAACC,GAAG,EAAEC,IAAI,CAAC1C,MAAM,CAACmC,IAAI,CAAC;AAC/B,UAAA,CAAC,MAAM;YACLK,MAAM,CAACC,GAAG,EAAEE,QAAQ,CAACC,MAAM,CAAC5C,MAAM,CAACmC,IAAI,CAAC;AAC1C,UAAA;AACF,QAAA;QACAnB,aAAa,CAAC,KAAK,CAAC;MACtB,CAAE;AACF6B,MAAAA,WAAW,EAAEA,MAAM7B,aAAa,CAAC,KAAK,CAAE;AAAAR,MAAAA,QAAA,gBAExCiB,GAAA,CAAA,KAAA,EAAA;AAAKxB,QAAAA,SAAS,EAAC,aAAa;AAAAO,QAAAA,QAAA,EACzBN,IAAI,iBAAIuB,GAAA,CAACqB,UAAU,EAAA;AAACrC,UAAAA,IAAI,EAAE,EAAG;AAACsC,UAAAA,SAAS,EAAEjC,YAAa;AAACkC,UAAAA,SAAS,EAAE7C;SAAgB;OAChF,CACL,eAAAsB,GAAA,CAAA,KAAA,EAAA;QAAKxB,SAAS,EAAE6B,IAAI,CAAC,gBAAgB,EAAE,QAAQ,EAAE,aAAa,CAAE;AAAAtB,QAAAA,QAAA,eAC9DqB,IAAA,CAAA,KAAA,EAAA;AAAK5B,UAAAA,SAAS,EAAC,gBAAgB;AAAAO,UAAAA,QAAA,gBAC7BqB,IAAA,CAAA,KAAA,EAAA;AAAArB,YAAAA,QAAA,EAAA,CACGF,KAAK,iBACJmB,GAAA,CAACwB,KAAK,EAAA;AAAChD,cAAAA,SAAS,EAAC,OAAO;cAACH,IAAI,EAAEoD,UAAU,CAACC,UAAW;AAAA3C,cAAAA,QAAA,EAClDF;AAAK,aACD,CACR,eACDmB,GAAA,CAAC2B,IAAI,EAAA;AAACC,cAAAA,EAAE,EAAC,MAAM;AAACpD,cAAAA,SAAS,EAAC,SAAS;cAACH,IAAI,EAAEoD,UAAU,CAACI,UAAW;AAAA9C,cAAAA,QAAA,EAC7DA,QAAQ,iBAAIiB,GAAA,CAAC8B,cAAc,EAAA;AAAA/C,gBAAAA,QAAA,EAAEH;eAAwB;AAAC,aACnD,CACR;WAAK,CACL,EAACL,MAAM,KACJ,MAAM,IAAIA,MAAM,gBACfyB,GAAA,CAAC+B,IAAI,EAAA;YACHrB,IAAI,EAAEnC,MAAM,CAACmC,IAAK;YAClB,YAAA,EAAYnC,MAAM,CAAC,YAAY,CAAE;YACjCoC,MAAM,EAAEpC,MAAM,CAACoC,MAAO;YACtBtC,IAAI,EAAEoD,UAAU,CAACO,UAAW;AAC5BxD,YAAAA,SAAS,EAAC,eAAe;AACzByD,YAAAA,QAAQ,EAAElC,kBAAmB;YAC7BmC,OAAO,EAAE3D,MAAM,CAAC2D,OAAQ;YAAAnD,QAAA,EAEvBR,MAAM,CAAC4D;AAAI,WACR,CAAC,gBAEPnC,GAAA,CAACoC,MAAM,EAAA;YACLC,EAAE,EAAA,IAAA;AACFrD,YAAAA,IAAI,EAAC,IAAI;AACTsC,YAAAA,SAAS,EAAC,SAAS;YACnB,YAAA,EAAY/C,MAAM,CAAC,YAAY,CAAE;AACjC+D,YAAAA,QAAQ,EAAC,mBAAmB;AAC5B9D,YAAAA,SAAS,EAAC,eAAe;AACzByD,YAAAA,QAAQ,EAAElC,kBAAmB;YAC7BmC,OAAO,EAAE3D,MAAM,CAAC2D,OAAQ;YAAAnD,QAAA,EAEvBR,MAAM,CAAC4D;AAAI,WACN,CACT,CAAC;SACD;AACP,OAAK,CACL,EAACxD,SAAS,iBACRqB,GAAA,CAAA,KAAA,EAAA;AAAKxB,QAAAA,SAAS,EAAC,cAAc;QAAAO,QAAA,eAC3BiB,GAAA,CAACuC,WAAW,EAAA;AACVC,UAAAA,GAAG,EAAE3C,oBAAqB;AAC1Bb,UAAAA,IAAI,EAAC,IAAI;AACTiD,UAAAA,QAAQ,EAAElC,kBAAmB;AAC7BmC,UAAAA,OAAO,EAAEvD;SAAU;AAEvB,OAAK,CACN;KACE;AACP,GAAK,CAAC;AAEV;AAEA,SAAS2B,oBAAoBA,CAACxB,KAA8B,EAAA;AAC1D,EAAA,QAAQA,KAAK;AACX,IAAA,KAAK,aAAa;AAChB,MAAA,OAAO,iCAAiC;AAC1C,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,+BAA+B;AACxC,IAAA,KAAK,YAAY;AACf,MAAA,OAAO,gCAAgC;AACzC,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,oBAAoB;AAC7B,IAAA,KAAK,UAAU;AACb,MAAA,OAAO,mBAAmB;AAC5B,IAAA,KAAK,SAAS;AACd,IAAA;AACE,MAAA,OAAO,OAAO;AAClB;AACF;;;;"}
+{"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\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}`;\nexport type AlertType = AlertTypeResolved | AlertTypeDeprecated;\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\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  /** The type dictates which icon and colour will be used */\n  type?: AlertType;\n  /** @deprecated Use `InlineAlert` 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\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 'InlineAlert' 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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"}

package/build/main.css

@@ -1,7 +1,3 @@
-.wds-sentiment-surface {
-  background-color: var(--color-sentiment-background-surface);
-  color: var(--color-sentiment-content-primary);
-}
 .np-theme-personal .wds-sentiment-surface-negative-base,
 .np-theme-personal--bright-green .wds-sentiment-surface-negative-base {
   --color-sentiment-content-primary: #CB272F;
@@ -3133,8 +3129,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 }
 @supports (hyphenate-limit-chars: 1) {
   .np-form-control--size-lg {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
   @media (min-width: 768px) {
@@ -3150,8 +3145,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 }
 @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
   .np-form-control--size-lg {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }
@@ -5189,8 +5183,7 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 @supports (hyphenate-limit-chars: 1) {
   .np-popover__container.np-bottom-sheet .np-popover__title {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
   @media (min-width: 768px) {
@@ -5206,8 +5199,7 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
   .np-popover__container.np-bottom-sheet .np-popover__title {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }

package/build/styles/inputs/Input.css

@@ -108,8 +108,7 @@
 }
 @supports (hyphenate-limit-chars: 1) {
   .np-form-control--size-lg {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
   @media (min-width: 768px) {
@@ -125,8 +124,7 @@
 }
 @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
   .np-form-control--size-lg {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }

package/build/styles/inputs/TextArea.css

@@ -108,8 +108,7 @@
 }
 @supports (hyphenate-limit-chars: 1) {
   .np-form-control--size-lg {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
   @media (min-width: 768px) {
@@ -125,8 +124,7 @@
 }
 @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
   .np-form-control--size-lg {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }

package/build/styles/main.css

@@ -1,7 +1,3 @@
-.wds-sentiment-surface {
-  background-color: var(--color-sentiment-background-surface);
-  color: var(--color-sentiment-content-primary);
-}
 .np-theme-personal .wds-sentiment-surface-negative-base,
 .np-theme-personal--bright-green .wds-sentiment-surface-negative-base {
   --color-sentiment-content-primary: #CB272F;
@@ -3133,8 +3129,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 }
 @supports (hyphenate-limit-chars: 1) {
   .np-form-control--size-lg {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
   @media (min-width: 768px) {
@@ -3150,8 +3145,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 }
 @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
   .np-form-control--size-lg {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }
@@ -5189,8 +5183,7 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 @supports (hyphenate-limit-chars: 1) {
   .np-popover__container.np-bottom-sheet .np-popover__title {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
   @media (min-width: 768px) {
@@ -5206,8 +5199,7 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
   .np-popover__container.np-bottom-sheet .np-popover__title {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }

package/build/styles/popover/Popover.css

@@ -38,8 +38,7 @@
 }
 @supports (hyphenate-limit-chars: 1) {
   .np-popover__container.np-bottom-sheet .np-popover__title {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
   @media (min-width: 768px) {
@@ -55,8 +54,7 @@
 }
 @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
   .np-popover__container.np-bottom-sheet .np-popover__title {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }

package/build/styles/sentimentSurface/SentimentSurface.css

@@ -1,7 +1,3 @@
-.wds-sentiment-surface {
-  background-color: var(--color-sentiment-background-surface);
-  color: var(--color-sentiment-content-primary);
-}
 .np-theme-personal .wds-sentiment-surface-negative-base,
 .np-theme-personal--bright-green .wds-sentiment-surface-negative-base {
   --color-sentiment-content-primary: #CB272F;

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,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;AACrB,MAAM,MAAM,SAAS,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;AAEhE,oBAAY,kBAAkB;IAC5B,QAAQ,YAAY;IACpB,GAAG,cAAc;IACjB,SAAS,aAAa;IACtB,WAAW,cAAc;IACzB,MAAM,gBAAgB;IACtB,YAAY,eAAe;CAC5B;AAED,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,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,6CAA6C;IAC7C,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,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,+BAoJZ"}
+{"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,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;AACrB,MAAM,MAAM,SAAS,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;AAEhE,oBAAY,kBAAkB;IAC5B,QAAQ,YAAY;IACpB,GAAG,cAAc;IACjB,SAAS,aAAa;IACtB,WAAW,cAAc;IACzB,MAAM,gBAAgB;IACtB,YAAY,eAAe;CAC5B;AAED,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,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,6CAA6C;IAC7C,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,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.116.0",
+  "version": "46.116.1",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -85,7 +85,7 @@
     "storybook-addon-test-codegen": "^2.0.1",
     "@transferwise/less-config": "3.1.2",
     "@transferwise/neptune-css": "14.25.2",
-    "@wise/components-theming": "1.9.0",
+    "@wise/components-theming": "1.9.1",
     "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {

package/src/alert/Alert.tsx

@@ -147,9 +147,11 @@ export default function Alert({
 
   const [shouldAnnounce, setShouldAnnounce] = useState<boolean>(false);
   useEffect(() => {
-    setTimeout(() => {
+    const timeoutId = setTimeout(() => {
       setShouldAnnounce(true);
     }, WDS_LIVE_REGION_DELAY_MS);
+
+    return () => clearTimeout(timeoutId);
   }, []);
 
   const closeButtonReference = useRef<HTMLButtonElement>(null);

package/src/inputs/Input.css

@@ -108,8 +108,7 @@
 }
 @supports (hyphenate-limit-chars: 1) {
   .np-form-control--size-lg {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
   @media (min-width: 768px) {
@@ -125,8 +124,7 @@
 }
 @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
   .np-form-control--size-lg {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }

package/src/inputs/TextArea.css

@@ -108,8 +108,7 @@
 }
 @supports (hyphenate-limit-chars: 1) {
   .np-form-control--size-lg {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
   @media (min-width: 768px) {
@@ -125,8 +124,7 @@
 }
 @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
   .np-form-control--size-lg {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }

package/src/main.css

@@ -1,7 +1,3 @@
-.wds-sentiment-surface {
-  background-color: var(--color-sentiment-background-surface);
-  color: var(--color-sentiment-content-primary);
-}
 .np-theme-personal .wds-sentiment-surface-negative-base,
 .np-theme-personal--bright-green .wds-sentiment-surface-negative-base {
   --color-sentiment-content-primary: #CB272F;
@@ -3133,8 +3129,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 }
 @supports (hyphenate-limit-chars: 1) {
   .np-form-control--size-lg {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
   @media (min-width: 768px) {
@@ -3150,8 +3145,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 }
 @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
   .np-form-control--size-lg {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }
@@ -5189,8 +5183,7 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 @supports (hyphenate-limit-chars: 1) {
   .np-popover__container.np-bottom-sheet .np-popover__title {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
   @media (min-width: 768px) {
@@ -5206,8 +5199,7 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
   .np-popover__container.np-bottom-sheet .np-popover__title {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }

package/src/popover/Popover.css

@@ -38,8 +38,7 @@
 }
 @supports (hyphenate-limit-chars: 1) {
   .np-popover__container.np-bottom-sheet .np-popover__title {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
   @media (min-width: 768px) {
@@ -55,8 +54,7 @@
 }
 @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
   .np-popover__container.np-bottom-sheet .np-popover__title {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }

package/src/sentimentSurface/SentimentSurface.css

@@ -1,7 +1,3 @@
-.wds-sentiment-surface {
-  background-color: var(--color-sentiment-background-surface);
-  color: var(--color-sentiment-content-primary);
-}
 .np-theme-personal .wds-sentiment-surface-negative-base,
 .np-theme-personal--bright-green .wds-sentiment-surface-negative-base {
   --color-sentiment-content-primary: #CB272F;

package/src/sentimentSurface/SentimentSurface.docs.mdx

@@ -5,7 +5,7 @@ import * as SentimentSurfaceStories from './SentimentSurface.story';
 
 # SentimentSurface Developer Guide
 
-`SentimentSurface` is a polymorphic container component that applies contextual background colours and text styling based on sentiment types. It's designed to visually communicate the nature or importance of content through colour and establish a semantic colour context for nested interactive components.
+`SentimentSurface` is a polymorphic container component that establishes a semantic colour context by setting CSS custom properties (tokens) based on sentiment types. It does not apply any default background or text styling - instead, it provides access to sentiment-aware tokens that child components can use to style themselves appropriately.
 
 ## Basic Usage
 
@@ -51,15 +51,15 @@ The component supports five sentiment types (`negative`, `warning`, `neutral`, `
 
 ## Emphasis Levels
 
-Each sentiment type supports two emphasis levels to provide different levels of visual prominence (`base`, `elevated`):
+Each sentiment type supports two emphasis levels that provide different sets of token values (`base`, `elevated`):
 
 ```tsx
 <SentimentSurface sentiment="success" emphasis="base">
-  Base emphasis - subtle background
+  Base emphasis - provides tokens suited for subtle contexts
 </SentimentSurface>
 
 <SentimentSurface sentiment="success" emphasis="elevated">
-  Elevated emphasis - strong background
+  Elevated emphasis - provides tokens suited for prominent contexts
 </SentimentSurface>
 ```
 
@@ -68,6 +68,8 @@ Each sentiment type supports two emphasis levels to provide different levels of
 - **Base**: For inline notifications, subtle callouts, or when sentiment needs to be communicated without drawing too much attention
 - **Elevated**: For prominent banners, critical alerts, or when the sentiment should be immediately noticeable
 
+Note: The component does not apply background or text colours by default. Use the provided tokens in your styles to achieve the desired visual effect.
+
 ---
 
 ## Polymorphic Rendering
@@ -191,7 +193,7 @@ Sentiment surfaces can be nested to create layered contexts. Each nested surface
 
 ## CSS Custom Properties (Tokens)
 
-The component sets CSS custom properties (CSS variables) that child components can use to adapt their styling to the sentiment context. This enables a powerful theming system where nested components automatically adjust their appearance.
+The component sets CSS custom properties (CSS variables) that child components can use to style themselves according to the sentiment context. The component itself does not apply any visual styling - it simply makes these tokens available for use in your own styles or by sentiment-aware child components.
 
 ### Available Tokens
 
@@ -310,6 +312,26 @@ import { Button, Body } from '@transferwise/components';
 
 The buttons will automatically use appropriate colours based on the sentiment context.
 
+### Applying Sentiment Tokens
+
+To visually style content within a SentimentSurface, use the provided tokens in your styles:
+
+```tsx
+// Apply tokens via inline styles
+<SentimentSurface sentiment="warning">
+  <div
+    style={{
+      padding: '24px',
+      borderRadius: '16px',
+      backgroundColor: 'var(--color-sentiment-background-surface)',
+      color: 'var(--color-sentiment-content-primary)',
+    }}
+  >
+    This content uses the sentiment tokens for styling
+  </div>
+</SentimentSurface>
+```
+
 ### Creating Custom Components with Sentiment Tokens
 
 You can create your own components that respect sentiment context:
@@ -436,14 +458,14 @@ Add appropriate ARIA attributes for screen readers:
 
 ### Color Contrast
 
-The component is designed with WCAG AA contrast ratios in mind:
+The tokens provided by the component are designed with WCAG AA contrast ratios in mind:
 
-- **Base emphasis**: Provides sufficient contrast for body text
-- **Elevated emphasis**: Provides higher contrast, often with inverted colours
+- **Base emphasis**: Tokens provide sufficient contrast for body text
+- **Elevated emphasis**: Tokens provide higher contrast, often with inverted colours
 
 Always test your content for contrast compliance, especially when:
 
-- Adding custom text colours via `style` or `className`
+- Applying tokens via `style` or `className`
 - Using small text sizes
 - Displaying important information
 

package/src/sentimentSurface/SentimentSurface.less

@@ -1,7 +1,4 @@
 .wds-sentiment-surface {
-    background-color: var(--color-sentiment-background-surface);
-    color: var(--color-sentiment-content-primary);
-
     &-negative {
         .np-theme-personal &,
         .np-theme-personal--bright-green & {

package/src/sentimentSurface/SentimentSurface.story.tsx

@@ -72,7 +72,6 @@ const meta: Meta<typeof SentimentSurface> = {
     sentiment: 'neutral',
     emphasis: 'base',
     children: 'This is a sentiment surface',
-    style: { padding: '24px', borderRadius: '16px' },
   },
   decorators: [withContainer],
   parameters: {
@@ -94,37 +93,18 @@ export const Playground: Story = {
   args: {
     sentiment: 'negative',
     emphasis: 'base',
-    children: 'Customise the sentiment and emphasis using the controls below',
-  },
-};
-
-/**
- * There are five different sentiment types that communicate different types of information or states.
- */
-export const Sentiments: Story = {
-  render: (args) => (
-    <>
-      <SentimentSurface {...args} sentiment="negative">
-        Negative: Your payment has failed
-      </SentimentSurface>
-      <SentimentSurface {...args} sentiment="warning">
-        Warning: Action required on your account
-      </SentimentSurface>
-      <SentimentSurface {...args} sentiment="neutral">
-        Neutral: Your account is up to date
-      </SentimentSurface>
-      <SentimentSurface {...args} sentiment="success">
-        Success: Your payment was successful
-      </SentimentSurface>
-      <SentimentSurface {...args} sentiment="proposition">
-        Proposition: Try our new feature
-      </SentimentSurface>
-    </>
-  ),
-  parameters: {
-    controls: { disable: true },
+    children: (
+      <div
+        style={{
+          padding: '24px',
+          backgroundColor: 'var(--color-sentiment-background-surface)',
+          color: 'var(--color-sentiment-content-primary)',
+        }}
+      >
+        This is a custom div demostrating a sentiment surface.
+      </div>
+    ),
   },
-  decorators: [withComponentGrid],
 };
 
 /**
@@ -134,39 +114,48 @@ export const EmphasisLevels: Story = {
   render: (args) => (
     <>
       <SentimentSurface {...args} sentiment="negative" emphasis="base">
-        Negative - Base emphasis
+        <div
+          style={{
+            padding: '24px',
+            backgroundColor: 'var(--color-sentiment-background-surface)',
+            color: 'var(--color-sentiment-content-primary)',
+          }}
+        >
+          Negative - Base emphasis
+        </div>
       </SentimentSurface>
       <SentimentSurface {...args} sentiment="negative" emphasis="elevated">
-        Negative - Elevated emphasis
+        <div
+          style={{
+            padding: '24px',
+            backgroundColor: 'var(--color-sentiment-background-surface)',
+            color: 'var(--color-sentiment-content-primary)',
+          }}
+        >
+          Negative - Elevated emphasis
+        </div>
       </SentimentSurface>
       <SentimentSurface {...args} sentiment="success" emphasis="base">
-        Success - Base emphasis
+        <div
+          style={{
+            padding: '24px',
+            backgroundColor: 'var(--color-sentiment-background-surface)',
+            color: 'var(--color-sentiment-content-primary)',
+          }}
+        >
+          Success - Base emphasis
+        </div>
       </SentimentSurface>
       <SentimentSurface {...args} sentiment="success" emphasis="elevated">
-        Success - Elevated emphasis
-      </SentimentSurface>
-    </>
-  ),
-  parameters: {
-    controls: { disable: true },
-  },
-  decorators: [withComponentGrid],
-};
-
-/**
- * The component can be rendered as any HTML element using the `as` prop.
- */
-export const PolymorphicRendering: Story = {
-  render: (args) => (
-    <>
-      <SentimentSurface {...args} sentiment="negative">
-        Rendered as div (default)
-      </SentimentSurface>
-      <SentimentSurface {...args} sentiment="negative" as="section">
-        Rendered as section
-      </SentimentSurface>
-      <SentimentSurface {...args} sentiment="negative" as="article">
-        Rendered as article
+        <div
+          style={{
+            padding: '24px',
+            backgroundColor: 'var(--color-sentiment-background-surface)',
+            color: 'var(--color-sentiment-content-primary)',
+          }}
+        >
+          Success - Elevated emphasis
+        </div>
       </SentimentSurface>
     </>
   ),
@@ -252,14 +241,18 @@ export const Tokens: Story = {
             key={`${sentiment}-${emphasis}`}
             sentiment={sentiment}
             emphasis={emphasis}
-            style={{ padding: '24px', borderRadius: '16px' }}
+            style={{
+              padding: '24px',
+              borderRadius: '16px',
+              backgroundColor: 'var(--color-sentiment-background-surface)',
+              color: 'var(--color-sentiment-content-primary)',
+            }}
           >
             <div style={{ marginBottom: '16px' }}>
               <strong
                 style={{
                   fontSize: '16px',
                   textTransform: 'capitalize',
-                  color: 'var(--color-sentiment-content-primary)',
                 }}
               >
                 {sentiment} - {emphasis}
@@ -308,33 +301,3 @@ export const Tokens: Story = {
     ),
   ],
 };
-
-export const AllVariants = storyConfig(
-  {
-    tags: ['!autodocs'],
-    parameters: {
-      padding: '0',
-      controls: { disable: true },
-    },
-    render: () => (
-      <div
-        className="sentiment-surface-variants"
-        style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '800px' }}
-      >
-        {sentiments.map((sentiment) =>
-          emphasisLevels.map((emphasis) => (
-            <SentimentSurface
-              key={`${sentiment}-${emphasis}`}
-              sentiment={sentiment}
-              emphasis={emphasis}
-              style={{ padding: '24px', borderRadius: '16px' }}
-            >
-              {sentiment} - {emphasis} emphasis
-            </SentimentSurface>
-          )),
-        )}
-      </div>
-    ),
-  },
-  { variants: ['default', 'dark', 'bright-green', 'forest-green'] },
-);

package/src/sentimentSurface/SentimentSurface.tests.story.tsx

@@ -1,7 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { expect, within } from 'storybook/test';
 import SentimentSurface from './SentimentSurface';
-import { storyConfig } from '../test-utils';
 
 export default {
   component: SentimentSurface,
@@ -10,110 +8,61 @@ export default {
 
 type Story = StoryObj<typeof SentimentSurface>;
 
-export const AllSentiments: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-      <SentimentSurface sentiment="negative">
-        Negative sentiment - Your payment has failed
-      </SentimentSurface>
-      <SentimentSurface sentiment="warning">
-        Warning sentiment - Action required on your account
-      </SentimentSurface>
-      <SentimentSurface sentiment="neutral">
-        Neutral sentiment - Your account is up to date
-      </SentimentSurface>
-      <SentimentSurface sentiment="success">
-        Success sentiment - Your payment was successful
-      </SentimentSurface>
-      <SentimentSurface sentiment="proposition">
-        Proposition sentiment - Try our new feature
-      </SentimentSurface>
-    </div>
-  ),
-};
-
-export const AllEmphasisLevels: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-      <SentimentSurface sentiment="neutral" emphasis="base">
-        Base emphasis (default)
-      </SentimentSurface>
-      <SentimentSurface sentiment="neutral" emphasis="elevated">
-        Elevated emphasis
-      </SentimentSurface>
-    </div>
-  ),
-};
-
-export const PolymorphicRendering: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Test that all elements are rendered with correct tags
-    const divElement = canvas.getByText('Rendered as div');
-    await expect(divElement.tagName).toBe('DIV');
-
-    const sectionElement = canvas.getByText('Rendered as section');
-    await expect(sectionElement.tagName).toBe('SECTION');
-
-    const articleElement = canvas.getByText('Rendered as article');
-    await expect(articleElement.tagName).toBe('ARTICLE');
-  },
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-      <SentimentSurface sentiment="neutral">Rendered as div</SentimentSurface>
-      <SentimentSurface sentiment="success" as="section">
-        Rendered as section
-      </SentimentSurface>
-      <SentimentSurface sentiment="proposition" as="article">
-        Rendered as article
-      </SentimentSurface>
-    </div>
-  ),
-};
-
-export const AllVariants = storyConfig(
-  {
-    render: () => (
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
-        {(['negative', 'warning', 'neutral', 'success', 'proposition'] as const).map(
-          (sentiment) => (
-            <div key={sentiment} style={{ display: 'contents' }}>
-              <SentimentSurface sentiment={sentiment} emphasis="base">
-                {sentiment} - base
-              </SentimentSurface>
-              <SentimentSurface sentiment={sentiment} emphasis="elevated">
-                {sentiment} - elevated
-              </SentimentSurface>
-            </div>
-          ),
-        )}
-      </div>
-    ),
-  },
-  { variants: ['default', 'dark'] },
-);
-
 export const NestedSentiments: Story = {
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
-      <SentimentSurface sentiment="negative" emphasis="base">
+      <SentimentSurface
+        sentiment="negative"
+        emphasis="base"
+        style={{
+          backgroundColor: 'var(--color-sentiment-background-surface)',
+          color: 'var(--color-sentiment-content-primary)',
+        }}
+      >
         Outer: Negative, base
         <div style={{ margin: '16px 0 0 16px' }}>
-          <SentimentSurface sentiment="success" emphasis="elevated">
+          <SentimentSurface
+            sentiment="success"
+            emphasis="elevated"
+            style={{
+              backgroundColor: 'var(--color-sentiment-background-surface)',
+              color: 'var(--color-sentiment-content-primary)',
+            }}
+          >
             Inner: Success, elevated
             <div style={{ margin: '12px 0 0 12px' }}>
-              <SentimentSurface sentiment="warning" emphasis="base">
+              <SentimentSurface
+                sentiment="warning"
+                emphasis="base"
+                style={{
+                  backgroundColor: 'var(--color-sentiment-background-surface)',
+                  color: 'var(--color-sentiment-content-primary)',
+                }}
+              >
                 Deepest: Warning, base
               </SentimentSurface>
             </div>
           </SentimentSurface>
         </div>
       </SentimentSurface>
-      <SentimentSurface sentiment="proposition" emphasis="elevated">
+      <SentimentSurface
+        sentiment="proposition"
+        emphasis="elevated"
+        style={{
+          backgroundColor: 'var(--color-sentiment-background-surface)',
+          color: 'var(--color-sentiment-content-primary)',
+        }}
+      >
         Outer: Proposition, elevated
         <div style={{ margin: '16px 0 0 16px' }}>
-          <SentimentSurface sentiment="neutral" emphasis="base">
+          <SentimentSurface
+            sentiment="neutral"
+            emphasis="base"
+            style={{
+              backgroundColor: 'var(--color-sentiment-background-surface)',
+              color: 'var(--color-sentiment-content-primary)',
+            }}
+          >
             Inner: Neutral, base
           </SentimentSurface>
         </div>