@transferwise/components 46.74.1 → 46.76.0

package/build/alert/Alert.js

@@ -45,13 +45,15 @@ function Alert({
   className,
   dismissible,
   icon,
+  statusIconLabel,
   onDismiss,
   message,
   size: size$1,
   title,
   type = 'neutral',
   variant = 'desktop',
-  active = true
+  active = true,
+  dynamicRender = false
 }) {
   React.useEffect(() => {
     if (arrow !== undefined) {
@@ -82,15 +84,16 @@ function Alert({
   const [shouldFire, setShouldFire] = React.useState();
   const [shouldShow, setShouldShow] = React.useState();
   React.useEffect(() => {
-    if (shouldShow === undefined || !active) {
+    if (shouldShow === undefined && !dynamicRender || !active) {
       setShouldShow(active);
     } else {
       setTimeout(() => setShouldShow(active), constants.WDS_LIVE_REGION_DELAY_MS);
     }
-  }, [active, shouldShow]);
+  }, [active, shouldShow, dynamicRender]);
   const closeButtonReference = React.useRef(null);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     role: resolvedType === sentiment.Sentiment.NEGATIVE ? 'alert' : 'status',
+    className: "wds-alert__liveRegion",
     children: shouldShow && /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: clsx.clsx('alert d-flex', `alert-${resolvedType}`, arrow != null && alertArrowClassNames(arrow), className),
       "data-testid": "alert",
@@ -116,7 +119,8 @@ function Alert({
           children: icon
         }) : /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
           size: size.Size.LARGE,
-          sentiment: resolvedType
+          sentiment: resolvedType,
+          iconLabel: statusIconLabel
         }), /*#__PURE__*/jsxRuntime.jsxs("div", {
           className: "alert__message",
           children: [/*#__PURE__*/jsxRuntime.jsxs("div", {

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  Typography,\n  Variant,\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 { Action } from '../common/action/Action';\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}`;\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  /** 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  variant?: `${Variant}`;\n  /** Controls rendering of the Alert component. <br /> Toggle this prop instead using conditional rendering and logical AND (&&) operator, to make the component work with screen readers. */\n  active?: boolean;\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  arrow,\n  action,\n  children,\n  className,\n  dismissible,\n  icon,\n  onDismiss,\n  message,\n  size,\n  title,\n  type = 'neutral',\n  variant = 'desktop',\n  active = true,\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 [shouldShow, setShouldShow] = useState<boolean>();\n  useEffect(() => {\n    if (shouldShow === undefined || !active) {\n      setShouldShow(active);\n    } else {\n      setTimeout(() => setShouldShow(active), WDS_LIVE_REGION_DELAY_MS);\n    }\n  }, [active, shouldShow]);\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n  return (\n    <div role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}>\n      {shouldShow && (\n        <div\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\n            className={clsx('alert__content', 'd-flex', 'flex-grow-1', variant)}\n            data-testid={variant}\n          >\n            {icon ? (\n              <div className=\"alert__icon\">{icon}</div>\n            ) : (\n              <StatusIcon size={Size.LARGE} sentiment={resolvedType} />\n            )}\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 && <Action action={action} variant=\"action-button\" className=\"m-t-1\" />}\n            </div>\n          </div>\n          {onDismiss && (\n            <CloseButton ref={closeButtonReference} className=\"m-l-2\" onClick={onDismiss} />\n          )}\n        </div>\n      )}\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","arrow","action","children","className","dismissible","icon","onDismiss","message","size","title","variant","active","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","shouldShow","setShouldShow","setTimeout","WDS_LIVE_REGION_DELAY_MS","closeButtonReference","useRef","_jsx","role","Sentiment","NEGATIVE","_jsxs","clsx","alertArrowClassNames","onTouchStart","onTouchEnd","event","href","target","Node","current","contains","window","top","open","location","assign","onTouchMove","StatusIcon","Size","LARGE","sentiment","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Action","CloseButton","ref","onClick"],"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  Typography,\n  Variant,\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 { Action } from '../common/action/Action';\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}`;\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  variant?: `${Variant}`;\n  /**\n   * Controls rendering of the Alert component. <br />\n   * Toggle this prop instead using conditional rendering and logical AND (&&)\n   * operator, to make the component work with screen readers.\n   * @deprecated use `dynamicRender`\n   * */\n  active?: boolean;\n  /**\n   * Toggle this prop when dealing with multiple, dynamic Alerts, to make them\n   * work with screen readers. This is especially helpful for the BFF use cases.\n   * */\n  dynamicRender?: boolean;\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  arrow,\n  action,\n  children,\n  className,\n  dismissible,\n  icon,\n  statusIconLabel,\n  onDismiss,\n  message,\n  size,\n  title,\n  type = 'neutral',\n  variant = 'desktop',\n  active = true,\n  dynamicRender = false,\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 [shouldShow, setShouldShow] = useState<boolean>();\n  useEffect(() => {\n    if ((shouldShow === undefined && !dynamicRender) || !active) {\n      setShouldShow(active);\n    } else {\n      setTimeout(() => setShouldShow(active), WDS_LIVE_REGION_DELAY_MS);\n    }\n  }, [active, shouldShow, dynamicRender]);\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n  return (\n    <div\n      role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}\n      className=\"wds-alert__liveRegion\"\n    >\n      {shouldShow && (\n        <div\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\n            className={clsx('alert__content', 'd-flex', 'flex-grow-1', variant)}\n            data-testid={variant}\n          >\n            {icon ? (\n              <div className=\"alert__icon\">{icon}</div>\n            ) : (\n              <StatusIcon size={Size.LARGE} sentiment={resolvedType} iconLabel={statusIconLabel} />\n            )}\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 && <Action action={action} variant=\"action-button\" className=\"m-t-1\" />}\n            </div>\n          </div>\n          {onDismiss && (\n            <CloseButton ref={closeButtonReference} className=\"m-l-2\" onClick={onDismiss} />\n          )}\n        </div>\n      )}\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","arrow","action","children","className","dismissible","icon","statusIconLabel","onDismiss","message","size","title","variant","active","dynamicRender","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","shouldShow","setShouldShow","setTimeout","WDS_LIVE_REGION_DELAY_MS","closeButtonReference","useRef","_jsx","role","Sentiment","NEGATIVE","_jsxs","clsx","alertArrowClassNames","onTouchStart","onTouchEnd","event","href","target","Node","current","contains","window","top","open","location","assign","onTouchMove","StatusIcon","Size","LARGE","sentiment","iconLabel","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Action","CloseButton","ref","onClick"],"mappings":";;;;;;;;;;;;;;;;;;;AAqCYA,oCAOX;AAPD,CAAA,UAAYA,kBAAkB,EAAA;AAC5BA,EAAAA,kBAAA,CAAA,UAAA,CAAA,GAAA,SAAoB,CAAA;AACpBA,EAAAA,kBAAA,CAAA,KAAA,CAAA,GAAA,WAAiB,CAAA;AACjBA,EAAAA,kBAAA,CAAA,WAAA,CAAA,GAAA,UAAsB,CAAA;AACtBA,EAAAA,kBAAA,CAAA,aAAA,CAAA,GAAA,WAAyB,CAAA;AACzBA,EAAAA,kBAAA,CAAA,QAAA,CAAA,GAAA,aAAsB,CAAA;AACtBA,EAAAA,kBAAA,CAAA,cAAA,CAAA,GAAA,YAA2B,CAAA;AAC7B,CAAC,EAPWA,0BAAkB,KAAlBA,0BAAkB,GAO7B,EAAA,CAAA,CAAA,CAAA;AA4CD,SAASC,WAAWA,CAACC,IAAe,EAAA;AAClC,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,SAAS;AACZ,MAAA,OAAO,UAAU,CAAA;AACnB,IAAA,KAAK,MAAM;AACT,MAAA,OAAO,SAAS,CAAA;AAClB,IAAA,KAAK,OAAO;AACV,MAAA,OAAO,UAAU,CAAA;AACnB,IAAA;AACE,MAAA,OAAOA,IAAI,CAAA;AACf,GAAA;AACF,CAAA;AAEc,SAAUC,KAAKA,CAAC;EAC5BC,KAAK;EACLC,MAAM;EACNC,QAAQ;EACRC,SAAS;EACTC,WAAW;EACXC,IAAI;EACJC,eAAe;EACfC,SAAS;EACTC,OAAO;QACPC,MAAI;EACJC,KAAK;AACLZ,EAAAA,IAAI,GAAG,SAAS;AAChBa,EAAAA,OAAO,GAAG,SAAS;AACnBC,EAAAA,MAAM,GAAG,IAAI;AACbC,EAAAA,aAAa,GAAG,KAAA;AACL,CAAA,EAAA;AACXC,EAAAA,eAAS,CAAC,MAAK;IACb,IAAId,KAAK,KAAKe,SAAS,EAAE;MACvBC,mCAAiB,CACf,6EAA6E,CAC9E,CAAA;AACH,KAAA;AACF,GAAC,EAAE,CAAChB,KAAK,CAAC,CAAC,CAAA;AAEXc,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIZ,QAAQ,KAAKa,SAAS,EAAE;MAC1BC,mCAAiB,CACf,4EAA4E,CAC7E,CAAA;AACH,KAAA;AACF,GAAC,EAAE,CAACd,QAAQ,CAAC,CAAC,CAAA;AAEdY,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIV,WAAW,KAAKW,SAAS,EAAE;MAC7BC,mCAAiB,CACf,iFAAiF,CAClF,CAAA;AACH,KAAA;AACF,GAAC,EAAE,CAACZ,WAAW,CAAC,CAAC,CAAA;AAEjBU,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIL,MAAI,KAAKM,SAAS,EAAE;MACtBC,mCAAiB,CAAC,0EAA0E,CAAC,CAAA;AAC/F,KAAA;AACF,GAAC,EAAE,CAACP,MAAI,CAAC,CAAC,CAAA;AAEV,EAAA,MAAMQ,YAAY,GAAGpB,WAAW,CAACC,IAAI,CAAC,CAAA;AACtCgB,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIG,YAAY,KAAKnB,IAAI,EAAE;AACzBkB,MAAAA,mCAAiB,CACf,CAAmClB,gCAAAA,EAAAA,IAAI,CAA4CmB,yCAAAA,EAAAA,YAAY,YAAY,CAC5G,CAAA;AACH,KAAA;AACF,GAAC,EAAE,CAACA,YAAY,EAAEnB,IAAI,CAAC,CAAC,CAAA;EAExB,MAAM,CAACoB,UAAU,EAAEC,aAAa,CAAC,GAAGC,cAAQ,EAAW,CAAA;EAEvD,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGF,cAAQ,EAAW,CAAA;AACvDN,EAAAA,eAAS,CAAC,MAAK;IACb,IAAKO,UAAU,KAAKN,SAAS,IAAI,CAACF,aAAa,IAAK,CAACD,MAAM,EAAE;MAC3DU,aAAa,CAACV,MAAM,CAAC,CAAA;AACvB,KAAC,MAAM;MACLW,UAAU,CAAC,MAAMD,aAAa,CAACV,MAAM,CAAC,EAAEY,kCAAwB,CAAC,CAAA;AACnE,KAAA;GACD,EAAE,CAACZ,MAAM,EAAES,UAAU,EAAER,aAAa,CAAC,CAAC,CAAA;AAEvC,EAAA,MAAMY,oBAAoB,GAAGC,YAAM,CAAoB,IAAI,CAAC,CAAA;AAE5D,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;IACEC,IAAI,EAAEX,YAAY,KAAKY,mBAAS,CAACC,QAAQ,GAAG,OAAO,GAAG,QAAS;AAC/D3B,IAAAA,SAAS,EAAC,uBAAuB;IAAAD,QAAA,EAEhCmB,UAAU,iBACTU,eAAA,CAAA,KAAA,EAAA;AACE5B,MAAAA,SAAS,EAAE6B,SAAI,CACb,cAAc,EACd,CAAA,MAAA,EAASf,YAAY,CAAE,CAAA,EACvBjB,KAAK,IAAI,IAAI,IAAIiC,oBAAoB,CAACjC,KAAK,CAAC,EAC5CG,SAAS,CACT;AACF,MAAA,aAAA,EAAY,OAAO;AACnB+B,MAAAA,YAAY,EAAEA,MAAMf,aAAa,CAAC,IAAI,CAAE;MACxCgB,UAAU,EAAGC,KAAK,IAAI;AACpB,QAAA,IACElB,UAAU,IACVjB,MAAM,EAAEoC,IAAI;AACZ;QACAD,KAAK,CAACE,MAAM,YAAYC,IAAI,IAC5Bd,oBAAoB,CAACe,OAAO,IAC5B,CAACf,oBAAoB,CAACe,OAAO,CAACC,QAAQ,CAACL,KAAK,CAACE,MAAM,CAAC,EACpD;AACA,UAAA,IAAIrC,MAAM,CAACqC,MAAM,KAAK,QAAQ,EAAE;YAC9BI,MAAM,CAACC,GAAG,EAAEC,IAAI,CAAC3C,MAAM,CAACoC,IAAI,CAAC,CAAA;AAC/B,WAAC,MAAM;YACLK,MAAM,CAACC,GAAG,EAAEE,QAAQ,CAACC,MAAM,CAAC7C,MAAM,CAACoC,IAAI,CAAC,CAAA;AAC1C,WAAA;AACF,SAAA;QACAlB,aAAa,CAAC,KAAK,CAAC,CAAA;OACpB;AACF4B,MAAAA,WAAW,EAAEA,MAAM5B,aAAa,CAAC,KAAK,CAAE;AAAAjB,MAAAA,QAAA,gBAExC6B,eAAA,CAAA,KAAA,EAAA;QACE5B,SAAS,EAAE6B,SAAI,CAAC,gBAAgB,EAAE,QAAQ,EAAE,aAAa,EAAErB,OAAO,CAAE;AACpE,QAAA,aAAA,EAAaA,OAAQ;QAAAT,QAAA,EAAA,CAEpBG,IAAI,gBACHsB,cAAA,CAAA,KAAA,EAAA;AAAKxB,UAAAA,SAAS,EAAC,aAAa;AAAAD,UAAAA,QAAA,EAAEG,IAAAA;AAAI,SAAM,CAAC,gBAEzCsB,cAAA,CAACqB,UAAU,EAAA;UAACvC,IAAI,EAAEwC,SAAI,CAACC,KAAM;AAACC,UAAAA,SAAS,EAAElC,YAAa;AAACmC,UAAAA,SAAS,EAAE9C,eAAAA;SAAmB,CACtF,eACDyB,eAAA,CAAA,KAAA,EAAA;AAAK5B,UAAAA,SAAS,EAAC,gBAAgB;AAAAD,UAAAA,QAAA,gBAC7B6B,eAAA,CAAA,KAAA,EAAA;AAAA7B,YAAAA,QAAA,EACGQ,CAAAA,KAAK,iBACJiB,cAAA,CAAC0B,KAAK,EAAA;AAAClD,cAAAA,SAAS,EAAC,OAAO;cAACL,IAAI,EAAEwD,qBAAU,CAACC,UAAW;AAAArD,cAAAA,QAAA,EAClDQ,KAAAA;AAAK,aACD,CACR,eACDiB,cAAA,CAAC6B,IAAI,EAAA;AAACC,cAAAA,EAAE,EAAC,MAAM;AAACtD,cAAAA,SAAS,EAAC,SAAS;cAACL,IAAI,EAAEwD,qBAAU,CAACI,UAAW;AAAAxD,cAAAA,QAAA,EAC7DA,QAAQ,iBAAIyB,cAAA,CAACgC,cAAc,EAAA;AAAAzD,gBAAAA,QAAA,EAAEM,OAAAA;eAAwB,CAAA;AAAC,aACnD,CACR,CAAA;AAAA,WAAK,CACL,EAACP,MAAM,iBAAI0B,cAAA,CAACiC,aAAM,EAAA;AAAC3D,YAAAA,MAAM,EAAEA,MAAO;AAACU,YAAAA,OAAO,EAAC,eAAe;AAACR,YAAAA,SAAS,EAAC,OAAA;AAAO,YAAG,CAAA;AAAA,SAC5E,CACP,CAAA;AAAA,OAAK,CACL,EAACI,SAAS,iBACRoB,cAAA,CAACkC,uBAAW,EAAA;AAACC,QAAAA,GAAG,EAAErC,oBAAqB;AAACtB,QAAAA,SAAS,EAAC,OAAO;AAAC4D,QAAAA,OAAO,EAAExD,SAAAA;AAAU,OAAG,CACjF,CAAA;KACE,CAAA;AACN,GACE,CAAC,CAAA;AAEV,CAAA;AAEA,SAAS0B,oBAAoBA,CAACjC,KAA8B,EAAA;AAC1D,EAAA,QAAQA,KAAK;AACX,IAAA,KAAK,aAAa;AAChB,MAAA,OAAO,iCAAiC,CAAA;AAC1C,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,+BAA+B,CAAA;AACxC,IAAA,KAAK,YAAY;AACf,MAAA,OAAO,gCAAgC,CAAA;AACzC,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,oBAAoB,CAAA;AAC7B,IAAA,KAAK,UAAU;AACb,MAAA,OAAO,mBAAmB,CAAA;AAC5B,IAAA,KAAK,SAAS,CAAA;AACd,IAAA;AACE,MAAA,OAAO,OAAO,CAAA;AAClB,GAAA;AACF;;;;"}

package/build/alert/Alert.mjs

@@ -41,13 +41,15 @@ function Alert({
   className,
   dismissible,
   icon,
+  statusIconLabel,
   onDismiss,
   message,
   size,
   title,
   type = 'neutral',
   variant = 'desktop',
-  active = true
+  active = true,
+  dynamicRender = false
 }) {
   useEffect(() => {
     if (arrow !== undefined) {
@@ -78,15 +80,16 @@ function Alert({
   const [shouldFire, setShouldFire] = useState();
   const [shouldShow, setShouldShow] = useState();
   useEffect(() => {
-    if (shouldShow === undefined || !active) {
+    if (shouldShow === undefined && !dynamicRender || !active) {
       setShouldShow(active);
     } else {
       setTimeout(() => setShouldShow(active), WDS_LIVE_REGION_DELAY_MS);
     }
-  }, [active, shouldShow]);
+  }, [active, shouldShow, dynamicRender]);
   const closeButtonReference = useRef(null);
   return /*#__PURE__*/jsx("div", {
     role: resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status',
+    className: "wds-alert__liveRegion",
     children: shouldShow && /*#__PURE__*/jsxs("div", {
       className: clsx('alert d-flex', `alert-${resolvedType}`, arrow != null && alertArrowClassNames(arrow), className),
       "data-testid": "alert",
@@ -112,7 +115,8 @@ function Alert({
           children: icon
         }) : /*#__PURE__*/jsx(StatusIcon, {
           size: Size.LARGE,
-          sentiment: resolvedType
+          sentiment: resolvedType,
+          iconLabel: statusIconLabel
         }), /*#__PURE__*/jsxs("div", {
           className: "alert__message",
           children: [/*#__PURE__*/jsxs("div", {

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  Typography,\n  Variant,\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 { Action } from '../common/action/Action';\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}`;\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  /** 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  variant?: `${Variant}`;\n  /** Controls rendering of the Alert component. <br /> Toggle this prop instead using conditional rendering and logical AND (&&) operator, to make the component work with screen readers. */\n  active?: boolean;\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  arrow,\n  action,\n  children,\n  className,\n  dismissible,\n  icon,\n  onDismiss,\n  message,\n  size,\n  title,\n  type = 'neutral',\n  variant = 'desktop',\n  active = true,\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 [shouldShow, setShouldShow] = useState<boolean>();\n  useEffect(() => {\n    if (shouldShow === undefined || !active) {\n      setShouldShow(active);\n    } else {\n      setTimeout(() => setShouldShow(active), WDS_LIVE_REGION_DELAY_MS);\n    }\n  }, [active, shouldShow]);\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n  return (\n    <div role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}>\n      {shouldShow && (\n        <div\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\n            className={clsx('alert__content', 'd-flex', 'flex-grow-1', variant)}\n            data-testid={variant}\n          >\n            {icon ? (\n              <div className=\"alert__icon\">{icon}</div>\n            ) : (\n              <StatusIcon size={Size.LARGE} sentiment={resolvedType} />\n            )}\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 && <Action action={action} variant=\"action-button\" className=\"m-t-1\" />}\n            </div>\n          </div>\n          {onDismiss && (\n            <CloseButton ref={closeButtonReference} className=\"m-l-2\" onClick={onDismiss} />\n          )}\n        </div>\n      )}\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","arrow","action","children","className","dismissible","icon","onDismiss","message","size","title","variant","active","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","shouldShow","setShouldShow","setTimeout","WDS_LIVE_REGION_DELAY_MS","closeButtonReference","useRef","_jsx","role","Sentiment","NEGATIVE","_jsxs","clsx","alertArrowClassNames","onTouchStart","onTouchEnd","event","href","target","Node","current","contains","window","top","open","location","assign","onTouchMove","StatusIcon","Size","LARGE","sentiment","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Action","CloseButton","ref","onClick"],"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  Typography,\n  Variant,\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 { Action } from '../common/action/Action';\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}`;\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  variant?: `${Variant}`;\n  /**\n   * Controls rendering of the Alert component. <br />\n   * Toggle this prop instead using conditional rendering and logical AND (&&)\n   * operator, to make the component work with screen readers.\n   * @deprecated use `dynamicRender`\n   * */\n  active?: boolean;\n  /**\n   * Toggle this prop when dealing with multiple, dynamic Alerts, to make them\n   * work with screen readers. This is especially helpful for the BFF use cases.\n   * */\n  dynamicRender?: boolean;\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  arrow,\n  action,\n  children,\n  className,\n  dismissible,\n  icon,\n  statusIconLabel,\n  onDismiss,\n  message,\n  size,\n  title,\n  type = 'neutral',\n  variant = 'desktop',\n  active = true,\n  dynamicRender = false,\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 [shouldShow, setShouldShow] = useState<boolean>();\n  useEffect(() => {\n    if ((shouldShow === undefined && !dynamicRender) || !active) {\n      setShouldShow(active);\n    } else {\n      setTimeout(() => setShouldShow(active), WDS_LIVE_REGION_DELAY_MS);\n    }\n  }, [active, shouldShow, dynamicRender]);\n\n  const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n  return (\n    <div\n      role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}\n      className=\"wds-alert__liveRegion\"\n    >\n      {shouldShow && (\n        <div\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\n            className={clsx('alert__content', 'd-flex', 'flex-grow-1', variant)}\n            data-testid={variant}\n          >\n            {icon ? (\n              <div className=\"alert__icon\">{icon}</div>\n            ) : (\n              <StatusIcon size={Size.LARGE} sentiment={resolvedType} iconLabel={statusIconLabel} />\n            )}\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 && <Action action={action} variant=\"action-button\" className=\"m-t-1\" />}\n            </div>\n          </div>\n          {onDismiss && (\n            <CloseButton ref={closeButtonReference} className=\"m-l-2\" onClick={onDismiss} />\n          )}\n        </div>\n      )}\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","arrow","action","children","className","dismissible","icon","statusIconLabel","onDismiss","message","size","title","variant","active","dynamicRender","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","shouldShow","setShouldShow","setTimeout","WDS_LIVE_REGION_DELAY_MS","closeButtonReference","useRef","_jsx","role","Sentiment","NEGATIVE","_jsxs","clsx","alertArrowClassNames","onTouchStart","onTouchEnd","event","href","target","Node","current","contains","window","top","open","location","assign","onTouchMove","StatusIcon","Size","LARGE","sentiment","iconLabel","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Action","CloseButton","ref","onClick"],"mappings":"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"}

package/build/field/Field.js

@@ -13,6 +13,7 @@ const Field = ({
   label,
   required = true,
   message: propMessage,
+  messageIconLabel,
   hint,
   description = hint,
   sentiment: propType = sentiment.Sentiment.NEUTRAL,
@@ -74,6 +75,7 @@ const Field = ({
             }) : children, message && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
               type: sentiment$1,
               id: messageId,
+              iconLabel: messageIconLabel,
               children: message
             })]
           })

package/build/field/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId } from 'react';\n\nimport { Sentiment } from '../common';\nimport InlineAlert from '../inlineAlert/InlineAlert';\nimport {\n  FieldLabelIdContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  required?: boolean;\n  /** @deprecated use `description` prop instead */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  description?: React.ReactNode;\n  /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */\n  error?: React.ReactNode;\n  sentiment?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  required = true,\n  message: propMessage,\n  hint,\n  description = hint,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = propMessage || props.error;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n  const messageId = useId();\n  const descriptionId = useId();\n\n  /**\n   * form control can have multiple messages to describe it,\n   * e.g the description underneath the label and inline alert\n   */\n  function ariaDescribedbyByIds() {\n    const messageIds = [];\n    if (description) {\n      messageIds.push(descriptionId);\n    }\n    if (message) {\n      messageIds.push(messageId);\n    }\n    return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n  }\n\n  return (\n    <FieldLabelIdContextProvider value={labelId}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={clsx(\n                'np-field form-group d-block',\n                {\n                  'has-success': sentiment === Sentiment.POSITIVE,\n                  'has-warning': sentiment === Sentiment.WARNING,\n                  'has-error': hasError,\n                  'has-info': sentiment === Sentiment.NEUTRAL,\n                },\n                className,\n              )}\n            >\n              {label != null ? (\n                <>\n                  <Label id={labelId} htmlFor={inputId}>\n                    {required ? label : <Label.Optional>{label}</Label.Optional>}\n                  </Label>\n                  <Label.Description id={descriptionId}>{description}</Label.Description>\n                  <div className=\"np-field-control\">{children}</div>\n                </>\n              ) : (\n                children\n              )}\n\n              {message && (\n                <InlineAlert type={sentiment} id={messageId}>\n                  {message}\n                </InlineAlert>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelIdContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelIdContextProvider","value","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlineAlert","type"],"mappings":";;;;;;;;;;AA8BO,MAAMA,KAAK,GAAGA,CAAC;EACpBC,EAAE;EACFC,KAAK;AACLC,EAAAA,QAAQ,GAAG,IAAI;AACfC,EAAAA,OAAO,EAAEC,WAAW;EACpBC,IAAI;AACJC,EAAAA,WAAW,GAAGD,IAAI;AAClBE,EAAAA,SAAS,EAAEC,QAAQ,GAAGC,mBAAS,CAACC,OAAO;EACvCC,SAAS;EACTC,QAAQ;EACR,GAAGC,KAAAA;AAAK,CACG,KAAI;EACf,MAAMN,WAAS,GAAGM,KAAK,CAACC,KAAK,GAAGL,mBAAS,CAACM,QAAQ,GAAGP,QAAQ,CAAA;AAC7D,EAAA,MAAML,OAAO,GAAGC,WAAW,IAAIS,KAAK,CAACC,KAAK,CAAA;AAC1C,EAAA,MAAME,QAAQ,GAAGT,WAAS,KAAKE,mBAAS,CAACM,QAAQ,CAAA;AAEjD,EAAA,MAAME,OAAO,GAAGC,WAAK,EAAE,CAAA;AAEvB,EAAA,MAAMC,eAAe,GAAGD,WAAK,EAAE,CAAA;EAC/B,MAAME,OAAO,GAAGpB,EAAE,KAAK,IAAI,GAAIA,EAAE,IAAImB,eAAe,GAAIE,SAAS,CAAA;AAEjE,EAAA,MAAMC,SAAS,GAAGJ,WAAK,EAAE,CAAA;AACzB,EAAA,MAAMK,aAAa,GAAGL,WAAK,EAAE,CAAA;AAE7B;;;AAGG;EACH,SAASM,oBAAoBA,GAAA;IAC3B,MAAMC,UAAU,GAAG,EAAE,CAAA;AACrB,IAAA,IAAInB,WAAW,EAAE;AACfmB,MAAAA,UAAU,CAACC,IAAI,CAACH,aAAa,CAAC,CAAA;AAChC,KAAA;AACA,IAAA,IAAIpB,OAAO,EAAE;AACXsB,MAAAA,UAAU,CAACC,IAAI,CAACJ,SAAS,CAAC,CAAA;AAC5B,KAAA;AACA,IAAA,OAAOG,UAAU,CAACE,MAAM,GAAG,CAAC,GAAGF,UAAU,CAACG,IAAI,CAAC,GAAG,CAAC,GAAGP,SAAS,CAAA;AACjE,GAAA;EAEA,oBACEQ,cAAA,CAACC,oCAA2B,EAAA;AAACC,IAAAA,KAAK,EAAEd,OAAQ;IAAAL,QAAA,eAC1CiB,cAAA,CAACG,+BAAsB,EAAA;AAACD,MAAAA,KAAK,EAAEX,OAAQ;MAAAR,QAAA,eACrCiB,cAAA,CAACI,iCAAwB,EAAA;QAACF,KAAK,EAAEP,oBAAoB,EAAG;QAAAZ,QAAA,eACtDiB,cAAA,CAACK,6BAAoB,EAAA;AAACH,UAAAA,KAAK,EAAEf,QAAS;AAAAJ,UAAAA,QAAA,eACpCuB,eAAA,CAAA,KAAA,EAAA;AACExB,YAAAA,SAAS,EAAEyB,SAAI,CACb,6BAA6B,EAC7B;AACE,cAAA,aAAa,EAAE7B,WAAS,KAAKE,mBAAS,CAAC4B,QAAQ;AAC/C,cAAA,aAAa,EAAE9B,WAAS,KAAKE,mBAAS,CAAC6B,OAAO;AAC9C,cAAA,WAAW,EAAEtB,QAAQ;AACrB,cAAA,UAAU,EAAET,WAAS,KAAKE,mBAAS,CAACC,OAAAA;aACrC,EACDC,SAAS,CACT;AAAAC,YAAAA,QAAA,GAEDX,KAAK,IAAI,IAAI,gBACZkC,eAAA,CAAAI,mBAAA,EAAA;cAAA3B,QAAA,EAAA,cACEiB,cAAA,CAACW,WAAK,EAAA;AAACxC,gBAAAA,EAAE,EAAEiB,OAAQ;AAACwB,gBAAAA,OAAO,EAAErB,OAAQ;gBAAAR,QAAA,EAClCV,QAAQ,GAAGD,KAAK,gBAAG4B,cAAA,CAACW,WAAK,CAACE,QAAQ,EAAA;AAAA9B,kBAAAA,QAAA,EAAEX,KAAAA;iBAAsB,CAAA;AAAC,eACvD,CACP,eAAA4B,cAAA,CAACW,WAAK,CAACG,WAAW,EAAA;AAAC3C,gBAAAA,EAAE,EAAEuB,aAAc;AAAAX,gBAAAA,QAAA,EAAEN,WAAAA;eAA+B,CACtE,eAAAuB,cAAA,CAAA,KAAA,EAAA;AAAKlB,gBAAAA,SAAS,EAAC,kBAAkB;AAAAC,gBAAAA,QAAA,EAAEA,QAAAA;AAAQ,eAAM,CACnD,CAAA;aAAA,CAAG,GAEHA,QACD,EAEAT,OAAO,iBACN0B,cAAA,CAACe,WAAW,EAAA;AAACC,cAAAA,IAAI,EAAEtC,WAAU;AAACP,cAAAA,EAAE,EAAEsB,SAAU;AAAAV,cAAAA,QAAA,EACzCT,OAAAA;AAAO,aACG,CACd,CAAA;WACE,CAAA;SACe,CAAA;OACE,CAAA;KACJ,CAAA;AAC1B,GAA6B,CAAC,CAAA;AAElC;;;;"}
+{"version":3,"file":"Field.js","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId } from 'react';\n\nimport { Sentiment } from '../common';\nimport InlineAlert from '../inlineAlert/InlineAlert';\nimport {\n  FieldLabelIdContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  required?: boolean;\n  /** @deprecated use `description` prop instead */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /**\n   * Override for the [InlineAlert icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  messageIconLabel?: string;\n  description?: React.ReactNode;\n  /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */\n  error?: React.ReactNode;\n  sentiment?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  required = true,\n  message: propMessage,\n  messageIconLabel,\n  hint,\n  description = hint,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = propMessage || props.error;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n  const messageId = useId();\n  const descriptionId = useId();\n\n  /**\n   * form control can have multiple messages to describe it,\n   * e.g the description underneath the label and inline alert\n   */\n  function ariaDescribedbyByIds() {\n    const messageIds = [];\n    if (description) {\n      messageIds.push(descriptionId);\n    }\n    if (message) {\n      messageIds.push(messageId);\n    }\n    return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n  }\n\n  return (\n    <FieldLabelIdContextProvider value={labelId}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={clsx(\n                'np-field form-group d-block',\n                {\n                  'has-success': sentiment === Sentiment.POSITIVE,\n                  'has-warning': sentiment === Sentiment.WARNING,\n                  'has-error': hasError,\n                  'has-info': sentiment === Sentiment.NEUTRAL,\n                },\n                className,\n              )}\n            >\n              {label != null ? (\n                <>\n                  <Label id={labelId} htmlFor={inputId}>\n                    {required ? label : <Label.Optional>{label}</Label.Optional>}\n                  </Label>\n                  <Label.Description id={descriptionId}>{description}</Label.Description>\n                  <div className=\"np-field-control\">{children}</div>\n                </>\n              ) : (\n                children\n              )}\n\n              {message && (\n                <InlineAlert type={sentiment} id={messageId} iconLabel={messageIconLabel}>\n                  {message}\n                </InlineAlert>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelIdContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelIdContextProvider","value","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlineAlert","type","iconLabel"],"mappings":"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"}

package/build/field/Field.mjs

@@ -11,6 +11,7 @@ const Field = ({
   label,
   required = true,
   message: propMessage,
+  messageIconLabel,
   hint,
   description = hint,
   sentiment: propType = Sentiment.NEUTRAL,
@@ -72,6 +73,7 @@ const Field = ({
             }) : children, message && /*#__PURE__*/jsx(InlineAlert, {
               type: sentiment,
               id: messageId,
+              iconLabel: messageIconLabel,
               children: message
             })]
           })

package/build/field/Field.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Field.mjs","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId } from 'react';\n\nimport { Sentiment } from '../common';\nimport InlineAlert from '../inlineAlert/InlineAlert';\nimport {\n  FieldLabelIdContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  required?: boolean;\n  /** @deprecated use `description` prop instead */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  description?: React.ReactNode;\n  /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */\n  error?: React.ReactNode;\n  sentiment?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  required = true,\n  message: propMessage,\n  hint,\n  description = hint,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = propMessage || props.error;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n  const messageId = useId();\n  const descriptionId = useId();\n\n  /**\n   * form control can have multiple messages to describe it,\n   * e.g the description underneath the label and inline alert\n   */\n  function ariaDescribedbyByIds() {\n    const messageIds = [];\n    if (description) {\n      messageIds.push(descriptionId);\n    }\n    if (message) {\n      messageIds.push(messageId);\n    }\n    return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n  }\n\n  return (\n    <FieldLabelIdContextProvider value={labelId}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={clsx(\n                'np-field form-group d-block',\n                {\n                  'has-success': sentiment === Sentiment.POSITIVE,\n                  'has-warning': sentiment === Sentiment.WARNING,\n                  'has-error': hasError,\n                  'has-info': sentiment === Sentiment.NEUTRAL,\n                },\n                className,\n              )}\n            >\n              {label != null ? (\n                <>\n                  <Label id={labelId} htmlFor={inputId}>\n                    {required ? label : <Label.Optional>{label}</Label.Optional>}\n                  </Label>\n                  <Label.Description id={descriptionId}>{description}</Label.Description>\n                  <div className=\"np-field-control\">{children}</div>\n                </>\n              ) : (\n                children\n              )}\n\n              {message && (\n                <InlineAlert type={sentiment} id={messageId}>\n                  {message}\n                </InlineAlert>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelIdContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelIdContextProvider","value","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlineAlert","type"],"mappings":"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"}
+{"version":3,"file":"Field.mjs","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId } from 'react';\n\nimport { Sentiment } from '../common';\nimport InlineAlert from '../inlineAlert/InlineAlert';\nimport {\n  FieldLabelIdContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  required?: boolean;\n  /** @deprecated use `description` prop instead */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /**\n   * Override for the [InlineAlert icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  messageIconLabel?: string;\n  description?: React.ReactNode;\n  /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */\n  error?: React.ReactNode;\n  sentiment?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  required = true,\n  message: propMessage,\n  messageIconLabel,\n  hint,\n  description = hint,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = propMessage || props.error;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n  const messageId = useId();\n  const descriptionId = useId();\n\n  /**\n   * form control can have multiple messages to describe it,\n   * e.g the description underneath the label and inline alert\n   */\n  function ariaDescribedbyByIds() {\n    const messageIds = [];\n    if (description) {\n      messageIds.push(descriptionId);\n    }\n    if (message) {\n      messageIds.push(messageId);\n    }\n    return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n  }\n\n  return (\n    <FieldLabelIdContextProvider value={labelId}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={clsx(\n                'np-field form-group d-block',\n                {\n                  'has-success': sentiment === Sentiment.POSITIVE,\n                  'has-warning': sentiment === Sentiment.WARNING,\n                  'has-error': hasError,\n                  'has-info': sentiment === Sentiment.NEUTRAL,\n                },\n                className,\n              )}\n            >\n              {label != null ? (\n                <>\n                  <Label id={labelId} htmlFor={inputId}>\n                    {required ? label : <Label.Optional>{label}</Label.Optional>}\n                  </Label>\n                  <Label.Description id={descriptionId}>{description}</Label.Description>\n                  <div className=\"np-field-control\">{children}</div>\n                </>\n              ) : (\n                children\n              )}\n\n              {message && (\n                <InlineAlert type={sentiment} id={messageId} iconLabel={messageIconLabel}>\n                  {message}\n                </InlineAlert>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelIdContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelIdContextProvider","value","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlineAlert","type","iconLabel"],"mappings":"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"}

package/build/i18n/en.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "No results found",
   "neptune.SelectOption.action.label": "Choose",
   "neptune.SelectOption.selected.action.label": "Change chosen option",
+  "neptune.StatusIcon.iconLabel.error": "Error:",
+  "neptune.StatusIcon.iconLabel.information": "Information:",
+  "neptune.StatusIcon.iconLabel.pending": "Pending:",
+  "neptune.StatusIcon.iconLabel.success": "Success:",
+  "neptune.StatusIcon.iconLabel.warning": "Warning:",
   "neptune.Summary.statusDone": "Item done",
   "neptune.Summary.statusNotDone": "Item to do",
   "neptune.Summary.statusPending": "Item pending",

package/build/i18n/en.json.js

@@ -29,6 +29,11 @@ var en = {
 	"neptune.SelectInput.noResultsFound": "No results found",
 	"neptune.SelectOption.action.label": "Choose",
 	"neptune.SelectOption.selected.action.label": "Change chosen option",
+	"neptune.StatusIcon.iconLabel.error": "Error:",
+	"neptune.StatusIcon.iconLabel.information": "Information:",
+	"neptune.StatusIcon.iconLabel.pending": "Pending:",
+	"neptune.StatusIcon.iconLabel.success": "Success:",
+	"neptune.StatusIcon.iconLabel.warning": "Warning:",
 	"neptune.Summary.statusDone": "Item done",
 	"neptune.Summary.statusNotDone": "Item to do",
 	"neptune.Summary.statusPending": "Item pending",

package/build/i18n/en.json.js.map

@@ -1 +1 @@
-{"version":3,"file":"en.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"en.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/i18n/en.json.mjs

@@ -27,6 +27,11 @@ var en = {
 	"neptune.SelectInput.noResultsFound": "No results found",
 	"neptune.SelectOption.action.label": "Choose",
 	"neptune.SelectOption.selected.action.label": "Change chosen option",
+	"neptune.StatusIcon.iconLabel.error": "Error:",
+	"neptune.StatusIcon.iconLabel.information": "Information:",
+	"neptune.StatusIcon.iconLabel.pending": "Pending:",
+	"neptune.StatusIcon.iconLabel.success": "Success:",
+	"neptune.StatusIcon.iconLabel.warning": "Warning:",
 	"neptune.Summary.statusDone": "Item done",
 	"neptune.Summary.statusNotDone": "Item to do",
 	"neptune.Summary.statusPending": "Item pending",

package/build/i18n/en.json.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"en.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"en.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/inlineAlert/InlineAlert.js

@@ -20,6 +20,7 @@ const iconTypes = new Set([sentiment.Sentiment.NEGATIVE, sentiment.Sentiment.ERR
 function InlineAlert({
   id,
   type = 'neutral',
+  iconLabel,
   className,
   children
 }) {
@@ -29,7 +30,8 @@ function InlineAlert({
     className: clsx.clsx('alert alert-detach', `alert-${type === sentiment.Sentiment.NEGATIVE || type === sentiment.Sentiment.ERROR ? 'danger' : type}`, 'd-flex', className),
     children: [iconTypes.has(type) && /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
       sentiment: type,
-      size: size.Size.SMALL
+      size: size.Size.SMALL,
+      iconLabel: iconLabel
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
       children: children
     })]

package/build/inlineAlert/InlineAlert.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineAlert.js","sources":["../../src/inlineAlert/InlineAlert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\nimport Body from '../body';\n\nexport interface InlineAlertProps {\n  id?: string;\n  type?: `${Sentiment}`;\n  className?: string;\n  children: ReactNode;\n}\n\nconst iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([\n  Sentiment.NEGATIVE,\n  Sentiment.ERROR,\n  Sentiment.POSITIVE,\n  Sentiment.SUCCESS,\n  Sentiment.WARNING,\n]);\n\n/**\n * Avoid using `<InlineAlert>` component directly\n * it's for edge cases when `<Field />` isn't suitable for some reasons.\n *\n * Example:\n * ```\n * <Field sentiment={..} message={..}>..</Field>\n * ```\n */\nexport default function InlineAlert({\n  id,\n  type = 'neutral',\n  className,\n  children,\n}: InlineAlertProps) {\n  return (\n    <Body\n      role=\"alert\"\n      id={id}\n      className={clsx(\n        'alert alert-detach',\n        `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,\n        'd-flex',\n        className,\n      )}\n    >\n      {iconTypes.has(type) && <StatusIcon sentiment={type} size={Size.SMALL} />}\n      <div>{children}</div>\n    </Body>\n  );\n}\n"],"names":["iconTypes","Set","Sentiment","NEGATIVE","ERROR","POSITIVE","SUCCESS","WARNING","InlineAlert","id","type","className","children","_jsxs","Body","role","clsx","has","_jsx","StatusIcon","sentiment","size","Size","SMALL"],"mappings":";;;;;;;;;AAcA,MAAMA,SAAS,GAAG,IAAIC,GAAG,CAAwC,CAC/DC,mBAAS,CAACC,QAAQ,EAClBD,mBAAS,CAACE,KAAK,EACfF,mBAAS,CAACG,QAAQ,EAClBH,mBAAS,CAACI,OAAO,EACjBJ,mBAAS,CAACK,OAAO,CAClB,CAAC,CAAA;AAEF;;;;;;;;AAQG;AACqB,SAAAC,WAAWA,CAAC;EAClCC,EAAE;AACFC,EAAAA,IAAI,GAAG,SAAS;EAChBC,SAAS;AACTC,EAAAA,QAAAA;AACiB,CAAA,EAAA;EACjB,oBACEC,eAAA,CAACC,IAAI,EAAA;AACHC,IAAAA,IAAI,EAAC,OAAO;AACZN,IAAAA,EAAE,EAAEA,EAAG;IACPE,SAAS,EAAEK,SAAI,CACb,oBAAoB,EACpB,CAASN,MAAAA,EAAAA,IAAI,KAAKR,mBAAS,CAACC,QAAQ,IAAIO,IAAI,KAAKR,mBAAS,CAACE,KAAK,GAAG,QAAQ,GAAGM,IAAI,CAAA,CAAE,EACpF,QAAQ,EACRC,SAAS,CACT;IAAAC,QAAA,EAAA,CAEDZ,SAAS,CAACiB,GAAG,CAACP,IAAI,CAAC,iBAAIQ,cAAA,CAACC,UAAU,EAAA;AAACC,MAAAA,SAAS,EAAEV,IAAK;MAACW,IAAI,EAAEC,SAAI,CAACC,KAAAA;KAAM,CAAG,eACzEL,cAAA,CAAA,KAAA,EAAA;AAAAN,MAAAA,QAAA,EAAMA,QAAAA;AAAQ,KAAM,CACtB,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX;;;;"}
+{"version":3,"file":"InlineAlert.js","sources":["../../src/inlineAlert/InlineAlert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\nimport Body from '../body';\n\nexport interface InlineAlertProps {\n  id?: string;\n  type?: `${Sentiment}`;\n  iconLabel?: string;\n  className?: string;\n  children: ReactNode;\n}\n\nconst iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([\n  Sentiment.NEGATIVE,\n  Sentiment.ERROR,\n  Sentiment.POSITIVE,\n  Sentiment.SUCCESS,\n  Sentiment.WARNING,\n]);\n\n/**\n * Avoid using `<InlineAlert>` component directly\n * it's for edge cases when `<Field />` isn't suitable for some reasons.\n *\n * Example:\n * ```\n * <Field sentiment={..} message={..}>..</Field>\n * ```\n */\nexport default function InlineAlert({\n  id,\n  type = 'neutral',\n  iconLabel,\n  className,\n  children,\n}: InlineAlertProps) {\n  return (\n    <Body\n      role=\"alert\"\n      id={id}\n      className={clsx(\n        'alert alert-detach',\n        `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,\n        'd-flex',\n        className,\n      )}\n    >\n      {iconTypes.has(type) && (\n        <StatusIcon sentiment={type} size={Size.SMALL} iconLabel={iconLabel} />\n      )}\n      <div>{children}</div>\n    </Body>\n  );\n}\n"],"names":["iconTypes","Set","Sentiment","NEGATIVE","ERROR","POSITIVE","SUCCESS","WARNING","InlineAlert","id","type","iconLabel","className","children","_jsxs","Body","role","clsx","has","_jsx","StatusIcon","sentiment","size","Size","SMALL"],"mappings":";;;;;;;;;AAeA,MAAMA,SAAS,GAAG,IAAIC,GAAG,CAAwC,CAC/DC,mBAAS,CAACC,QAAQ,EAClBD,mBAAS,CAACE,KAAK,EACfF,mBAAS,CAACG,QAAQ,EAClBH,mBAAS,CAACI,OAAO,EACjBJ,mBAAS,CAACK,OAAO,CAClB,CAAC,CAAA;AAEF;;;;;;;;AAQG;AACW,SAAUC,WAAWA,CAAC;EAClCC,EAAE;AACFC,EAAAA,IAAI,GAAG,SAAS;EAChBC,SAAS;EACTC,SAAS;AACTC,EAAAA,QAAAA;AACiB,CAAA,EAAA;EACjB,oBACEC,eAAA,CAACC,IAAI,EAAA;AACHC,IAAAA,IAAI,EAAC,OAAO;AACZP,IAAAA,EAAE,EAAEA,EAAG;IACPG,SAAS,EAAEK,SAAI,CACb,oBAAoB,EACpB,CAASP,MAAAA,EAAAA,IAAI,KAAKR,mBAAS,CAACC,QAAQ,IAAIO,IAAI,KAAKR,mBAAS,CAACE,KAAK,GAAG,QAAQ,GAAGM,IAAI,CAAA,CAAE,EACpF,QAAQ,EACRE,SAAS,CACT;IAAAC,QAAA,EAAA,CAEDb,SAAS,CAACkB,GAAG,CAACR,IAAI,CAAC,iBAClBS,cAAA,CAACC,UAAU,EAAA;AAACC,MAAAA,SAAS,EAAEX,IAAK;MAACY,IAAI,EAAEC,SAAI,CAACC,KAAM;AAACb,MAAAA,SAAS,EAAEA,SAAAA;KAAU,CACrE,eACDQ,cAAA,CAAA,KAAA,EAAA;AAAAN,MAAAA,QAAA,EAAMA,QAAAA;AAAQ,KAAM,CACtB,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX;;;;"}

package/build/inlineAlert/InlineAlert.mjs

@@ -18,6 +18,7 @@ const iconTypes = new Set([Sentiment.NEGATIVE, Sentiment.ERROR, Sentiment.POSITI
 function InlineAlert({
   id,
   type = 'neutral',
+  iconLabel,
   className,
   children
 }) {
@@ -27,7 +28,8 @@ function InlineAlert({
     className: clsx('alert alert-detach', `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`, 'd-flex', className),
     children: [iconTypes.has(type) && /*#__PURE__*/jsx(StatusIcon, {
       sentiment: type,
-      size: Size.SMALL
+      size: Size.SMALL,
+      iconLabel: iconLabel
     }), /*#__PURE__*/jsx("div", {
       children: children
     })]

package/build/inlineAlert/InlineAlert.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InlineAlert.mjs","sources":["../../src/inlineAlert/InlineAlert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\nimport Body from '../body';\n\nexport interface InlineAlertProps {\n  id?: string;\n  type?: `${Sentiment}`;\n  className?: string;\n  children: ReactNode;\n}\n\nconst iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([\n  Sentiment.NEGATIVE,\n  Sentiment.ERROR,\n  Sentiment.POSITIVE,\n  Sentiment.SUCCESS,\n  Sentiment.WARNING,\n]);\n\n/**\n * Avoid using `<InlineAlert>` component directly\n * it's for edge cases when `<Field />` isn't suitable for some reasons.\n *\n * Example:\n * ```\n * <Field sentiment={..} message={..}>..</Field>\n * ```\n */\nexport default function InlineAlert({\n  id,\n  type = 'neutral',\n  className,\n  children,\n}: InlineAlertProps) {\n  return (\n    <Body\n      role=\"alert\"\n      id={id}\n      className={clsx(\n        'alert alert-detach',\n        `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,\n        'd-flex',\n        className,\n      )}\n    >\n      {iconTypes.has(type) && <StatusIcon sentiment={type} size={Size.SMALL} />}\n      <div>{children}</div>\n    </Body>\n  );\n}\n"],"names":["iconTypes","Set","Sentiment","NEGATIVE","ERROR","POSITIVE","SUCCESS","WARNING","InlineAlert","id","type","className","children","_jsxs","Body","role","clsx","has","_jsx","StatusIcon","sentiment","size","Size","SMALL"],"mappings":";;;;;;;AAcA,MAAMA,SAAS,GAAG,IAAIC,GAAG,CAAwC,CAC/DC,SAAS,CAACC,QAAQ,EAClBD,SAAS,CAACE,KAAK,EACfF,SAAS,CAACG,QAAQ,EAClBH,SAAS,CAACI,OAAO,EACjBJ,SAAS,CAACK,OAAO,CAClB,CAAC,CAAA;AAEF;;;;;;;;AAQG;AACqB,SAAAC,WAAWA,CAAC;EAClCC,EAAE;AACFC,EAAAA,IAAI,GAAG,SAAS;EAChBC,SAAS;AACTC,EAAAA,QAAAA;AACiB,CAAA,EAAA;EACjB,oBACEC,IAAA,CAACC,IAAI,EAAA;AACHC,IAAAA,IAAI,EAAC,OAAO;AACZN,IAAAA,EAAE,EAAEA,EAAG;IACPE,SAAS,EAAEK,IAAI,CACb,oBAAoB,EACpB,CAASN,MAAAA,EAAAA,IAAI,KAAKR,SAAS,CAACC,QAAQ,IAAIO,IAAI,KAAKR,SAAS,CAACE,KAAK,GAAG,QAAQ,GAAGM,IAAI,CAAA,CAAE,EACpF,QAAQ,EACRC,SAAS,CACT;IAAAC,QAAA,EAAA,CAEDZ,SAAS,CAACiB,GAAG,CAACP,IAAI,CAAC,iBAAIQ,GAAA,CAACC,UAAU,EAAA;AAACC,MAAAA,SAAS,EAAEV,IAAK;MAACW,IAAI,EAAEC,IAAI,CAACC,KAAAA;KAAM,CAAG,eACzEL,GAAA,CAAA,KAAA,EAAA;AAAAN,MAAAA,QAAA,EAAMA,QAAAA;AAAQ,KAAM,CACtB,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX;;;;"}
+{"version":3,"file":"InlineAlert.mjs","sources":["../../src/inlineAlert/InlineAlert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\nimport Body from '../body';\n\nexport interface InlineAlertProps {\n  id?: string;\n  type?: `${Sentiment}`;\n  iconLabel?: string;\n  className?: string;\n  children: ReactNode;\n}\n\nconst iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([\n  Sentiment.NEGATIVE,\n  Sentiment.ERROR,\n  Sentiment.POSITIVE,\n  Sentiment.SUCCESS,\n  Sentiment.WARNING,\n]);\n\n/**\n * Avoid using `<InlineAlert>` component directly\n * it's for edge cases when `<Field />` isn't suitable for some reasons.\n *\n * Example:\n * ```\n * <Field sentiment={..} message={..}>..</Field>\n * ```\n */\nexport default function InlineAlert({\n  id,\n  type = 'neutral',\n  iconLabel,\n  className,\n  children,\n}: InlineAlertProps) {\n  return (\n    <Body\n      role=\"alert\"\n      id={id}\n      className={clsx(\n        'alert alert-detach',\n        `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,\n        'd-flex',\n        className,\n      )}\n    >\n      {iconTypes.has(type) && (\n        <StatusIcon sentiment={type} size={Size.SMALL} iconLabel={iconLabel} />\n      )}\n      <div>{children}</div>\n    </Body>\n  );\n}\n"],"names":["iconTypes","Set","Sentiment","NEGATIVE","ERROR","POSITIVE","SUCCESS","WARNING","InlineAlert","id","type","iconLabel","className","children","_jsxs","Body","role","clsx","has","_jsx","StatusIcon","sentiment","size","Size","SMALL"],"mappings":";;;;;;;AAeA,MAAMA,SAAS,GAAG,IAAIC,GAAG,CAAwC,CAC/DC,SAAS,CAACC,QAAQ,EAClBD,SAAS,CAACE,KAAK,EACfF,SAAS,CAACG,QAAQ,EAClBH,SAAS,CAACI,OAAO,EACjBJ,SAAS,CAACK,OAAO,CAClB,CAAC,CAAA;AAEF;;;;;;;;AAQG;AACW,SAAUC,WAAWA,CAAC;EAClCC,EAAE;AACFC,EAAAA,IAAI,GAAG,SAAS;EAChBC,SAAS;EACTC,SAAS;AACTC,EAAAA,QAAAA;AACiB,CAAA,EAAA;EACjB,oBACEC,IAAA,CAACC,IAAI,EAAA;AACHC,IAAAA,IAAI,EAAC,OAAO;AACZP,IAAAA,EAAE,EAAEA,EAAG;IACPG,SAAS,EAAEK,IAAI,CACb,oBAAoB,EACpB,CAASP,MAAAA,EAAAA,IAAI,KAAKR,SAAS,CAACC,QAAQ,IAAIO,IAAI,KAAKR,SAAS,CAACE,KAAK,GAAG,QAAQ,GAAGM,IAAI,CAAA,CAAE,EACpF,QAAQ,EACRE,SAAS,CACT;IAAAC,QAAA,EAAA,CAEDb,SAAS,CAACkB,GAAG,CAACR,IAAI,CAAC,iBAClBS,GAAA,CAACC,UAAU,EAAA;AAACC,MAAAA,SAAS,EAAEX,IAAK;MAACY,IAAI,EAAEC,IAAI,CAACC,KAAM;AAACb,MAAAA,SAAS,EAAEA,SAAAA;KAAU,CACrE,eACDQ,GAAA,CAAA,KAAA,EAAA;AAAAN,MAAAA,QAAA,EAAMA,QAAAA;AAAQ,KAAM,CACtB,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX;;;;"}

package/build/main.css

@@ -216,6 +216,9 @@ div.critical-comms .critical-comms-body {
 .np-action-btn:not(:disabled):focus {
   box-shadow: none;
 }
+.wds-alert__liveRegion {
+  display: contents;
+}
 .tw-avatar {
   position: relative;
   -webkit-user-select: none;

package/build/statusIcon/StatusIcon.js

@@ -2,42 +2,76 @@
 
 var icons = require('@transferwise/icons');
 var clsx = require('clsx');
+var reactIntl = require('react-intl');
 var Circle = require('../common/circle/Circle.js');
 var useMedia = require('../common/hooks/useMedia.js');
+var StatusIcon_messages = require('./StatusIcon.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
+var sentiment = require('../common/propsValues/sentiment.js');
 var breakpoint = require('../common/propsValues/breakpoint.js');
 var size = require('../common/propsValues/size.js');
 
-const iconTypeMap = {
-  positive: icons.Check,
-  neutral: icons.Info,
-  warning: icons.Alert,
-  negative: icons.Cross,
-  pending: icons.ClockBorderless,
-  info: icons.Info,
-  error: icons.Cross,
-  success: icons.Check
-};
 const mapLegacySize = {
   [String(size.Size.SMALL)]: 16,
   [String(size.Size.MEDIUM)]: 40,
   [String(size.Size.LARGE)]: 48
 };
 const StatusIcon = ({
-  sentiment = 'neutral',
-  size: sizeProp = 'md'
+  sentiment: sentiment$1 = 'neutral',
+  size: sizeProp = 'md',
+  iconLabel
 }) => {
-  const Icon = iconTypeMap[sentiment];
-  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
+  const intl = reactIntl.useIntl();
+  const iconMetaBySentiment = {
+    [sentiment.Sentiment.NEGATIVE]: {
+      Icon: icons.Cross,
+      defaultIconLabel: intl.formatMessage(StatusIcon_messages.errorLabel)
+    },
+    [sentiment.Sentiment.POSITIVE]: {
+      Icon: icons.Check,
+      defaultIconLabel: intl.formatMessage(StatusIcon_messages.successLabel)
+    },
+    [sentiment.Sentiment.WARNING]: {
+      Icon: icons.Alert,
+      defaultIconLabel: intl.formatMessage(StatusIcon_messages.warningLabel)
+    },
+    [sentiment.Sentiment.PENDING]: {
+      Icon: icons.ClockBorderless,
+      defaultIconLabel: intl.formatMessage(StatusIcon_messages.pendingLabel)
+    },
+    [sentiment.Sentiment.NEUTRAL]: {
+      Icon: icons.Info,
+      defaultIconLabel: intl.formatMessage(StatusIcon_messages.informationLabel)
+    },
+    // deprecated
+    [sentiment.Sentiment.ERROR]: {
+      Icon: icons.Cross,
+      defaultIconLabel: intl.formatMessage(StatusIcon_messages.errorLabel)
+    },
+    [sentiment.Sentiment.INFO]: {
+      Icon: icons.Info,
+      defaultIconLabel: intl.formatMessage(StatusIcon_messages.informationLabel)
+    },
+    [sentiment.Sentiment.SUCCESS]: {
+      Icon: icons.Check,
+      defaultIconLabel: intl.formatMessage(StatusIcon_messages.successLabel)
+    }
+  };
+  const {
+    Icon,
+    defaultIconLabel
+  } = iconMetaBySentiment[sentiment$1];
+  const iconColor = sentiment$1 === 'warning' || sentiment$1 === 'pending' ? 'dark' : 'light';
   const isTinyViewport = useMedia.useMedia(`(max-width: ${breakpoint.Breakpoint.ZOOM_400}px)`);
   const size$1 = sizeProp === size.Size.SMALL && isTinyViewport ? 32 : mapLegacySize[sizeProp];
   return /*#__PURE__*/jsxRuntime.jsx(Circle, {
     as: "span",
     size: size$1,
     "data-testid": "status-icon",
-    className: clsx.clsx('status-circle', `status-circle-${sizeProp}`, sentiment),
+    className: clsx.clsx('status-circle', `status-circle-${sizeProp}`, sentiment$1),
     children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
-      className: clsx.clsx('status-icon', iconColor)
+      className: clsx.clsx('status-icon', iconColor),
+      title: iconLabel === null ? undefined : iconLabel || defaultIconLabel
     })
   });
 };

package/build/statusIcon/StatusIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIcon.js","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nexport type StatusIconProps = {\n  sentiment: `${Sentiment}`;\n  size: SizeSmall | SizeMedium | SizeLarge;\n};\n\nconst iconTypeMap = {\n  positive: Check,\n  neutral: Info,\n  warning: Alert,\n  negative: Cross,\n  pending: ClockBorderless,\n  info: Info,\n  error: Cross,\n  success: Check,\n} satisfies Record<`${Sentiment}`, React.ElementType>;\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  [String(Size.MEDIUM)]: 40,\n  [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 'md' }: StatusIconProps) => {\n  const Icon = iconTypeMap[sentiment];\n  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  const size = sizeProp === Size.SMALL && isTinyViewport ? 32 : mapLegacySize[sizeProp];\n  return (\n    <Circle\n      as=\"span\"\n      size={size}\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', `status-circle-${sizeProp}`, sentiment)}\n    >\n      <Icon className={clsx('status-icon', iconColor)} />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["iconTypeMap","positive","Check","neutral","Info","warning","Alert","negative","Cross","pending","ClockBorderless","info","error","success","mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","sentiment","size","sizeProp","Icon","iconColor","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","Circle","as","className","clsx","children"],"mappings":";;;;;;;;;;AAYA,MAAMA,WAAW,GAAG;AAClBC,EAAAA,QAAQ,EAAEC,WAAK;AACfC,EAAAA,OAAO,EAAEC,UAAI;AACbC,EAAAA,OAAO,EAAEC,WAAK;AACdC,EAAAA,QAAQ,EAAEC,WAAK;AACfC,EAAAA,OAAO,EAAEC,qBAAe;AACxBC,EAAAA,IAAI,EAAEP,UAAI;AACVQ,EAAAA,KAAK,EAAEJ,WAAK;AACZK,EAAAA,OAAO,EAAEX,WAAAA;CAC0C,CAAA;AAErD,MAAMY,aAAa,GAAG;AACpB,EAAA,CAACC,MAAM,CAACC,SAAI,CAACC,KAAK,CAAC,GAAG,EAAE;AACxB,EAAA,CAACF,MAAM,CAACC,SAAI,CAACE,MAAM,CAAC,GAAG,EAAE;AACzB,EAAA,CAACH,MAAM,CAACC,SAAI,CAACG,KAAK,CAAC,GAAG,EAAA;CACuB,CAAA;AAEzCC,MAAAA,UAAU,GAAGA,CAAC;AAAEC,EAAAA,SAAS,GAAG,SAAS;EAAEC,IAAI,EAAEC,QAAQ,GAAG,IAAA;AAAI,CAAmB,KAAI;AACvF,EAAA,MAAMC,IAAI,GAAGxB,WAAW,CAACqB,SAAS,CAAC,CAAA;AACnC,EAAA,MAAMI,SAAS,GAAGJ,SAAS,KAAK,SAAS,IAAIA,SAAS,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,CAAA;EACvF,MAAMK,cAAc,GAAGC,iBAAQ,CAAC,eAAeC,qBAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;AACxE,EAAA,MAAMP,MAAI,GAAGC,QAAQ,KAAKP,SAAI,CAACC,KAAK,IAAIS,cAAc,GAAG,EAAE,GAAGZ,aAAa,CAACS,QAAQ,CAAC,CAAA;EACrF,oBACEO,cAAA,CAACC,MAAM,EAAA;AACLC,IAAAA,EAAE,EAAC,MAAM;AACTV,IAAAA,IAAI,EAAEA,MAAK;AACX,IAAA,aAAA,EAAY,aAAa;IACzBW,SAAS,EAAEC,SAAI,CAAC,eAAe,EAAE,iBAAiBX,QAAQ,CAAA,CAAE,EAAEF,SAAS,CAAE;IAAAc,QAAA,eAEzEL,cAAA,CAACN,IAAI,EAAA;AAACS,MAAAA,SAAS,EAAEC,SAAI,CAAC,aAAa,EAAET,SAAS,CAAA;KAChD,CAAA;AAAA,GAAQ,CAAC,CAAA;AAEb;;;;"}
+{"version":3,"file":"StatusIcon.js","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nimport messages from './StatusIcon.messages';\n\nexport type StatusIconProps = {\n  sentiment: `${Sentiment}`;\n  size: SizeSmall | SizeMedium | SizeLarge;\n  /**\n   * Override for the sentiment's-derived, default, accessible\n   * name announced by the screen readers. <br />\n   * Using `null` will render the icon purely presentational.\n   * */\n  iconLabel?: string | null;\n};\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  [String(Size.MEDIUM)]: 40,\n  [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({\n  sentiment = 'neutral',\n  size: sizeProp = 'md',\n  iconLabel,\n}: StatusIconProps) => {\n  const intl = useIntl();\n\n  const iconMetaBySentiment: Record<\n    `${Sentiment}`,\n    {\n      Icon: React.ElementType;\n      defaultIconLabel: string;\n    }\n  > = {\n    [Sentiment.NEGATIVE]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.POSITIVE]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n    [Sentiment.WARNING]: {\n      Icon: Alert,\n      defaultIconLabel: intl.formatMessage(messages.warningLabel),\n    },\n    [Sentiment.PENDING]: {\n      Icon: ClockBorderless,\n      defaultIconLabel: intl.formatMessage(messages.pendingLabel),\n    },\n    [Sentiment.NEUTRAL]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    // deprecated\n    [Sentiment.ERROR]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.INFO]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    [Sentiment.SUCCESS]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n  };\n  const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];\n\n  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  const size = sizeProp === Size.SMALL && isTinyViewport ? 32 : mapLegacySize[sizeProp];\n  return (\n    <Circle\n      as=\"span\"\n      size={size}\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', `status-circle-${sizeProp}`, sentiment)}\n    >\n      <Icon\n        className={clsx('status-icon', iconColor)}\n        title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}\n      />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","sentiment","size","sizeProp","iconLabel","intl","useIntl","iconMetaBySentiment","Sentiment","NEGATIVE","Icon","Cross","defaultIconLabel","formatMessage","messages","errorLabel","POSITIVE","Check","successLabel","WARNING","Alert","warningLabel","PENDING","ClockBorderless","pendingLabel","NEUTRAL","Info","informationLabel","ERROR","INFO","SUCCESS","iconColor","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","Circle","as","className","clsx","children","title","undefined"],"mappings":"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"}