@transferwise/components 46.97.5 → 46.98.1

package/build/alert/Alert.js

@@ -103,6 +103,11 @@ function Alert({
     }, constants.WDS_LIVE_REGION_DELAY_MS);
   }, []);
   const closeButtonReference = React.useRef(null);
+  /**
+   * All focusable elements must be disabled until we announce the alert.
+   * @see https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI
+   */
+  const accessibleTabIndex = shouldAnnounce ? undefined : -1;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     role: resolvedType === sentiment.Sentiment.NEGATIVE ? 'alert' : 'status',
     className: "wds-alert__liveRegion",
@@ -154,6 +159,7 @@ function Alert({
             target: action.target,
             type: typography.Typography.LINK_LARGE,
             className: "alert__action",
+            tabIndex: accessibleTabIndex,
             onClick: action.onClick,
             children: action.text
           }) : /*#__PURE__*/jsxRuntime.jsx(Button_resolver.default, {
@@ -163,6 +169,7 @@ function Alert({
             "aria-label": action['aria-label'],
             priority: "secondary-neutral",
             className: "alert__action",
+            tabIndex: accessibleTabIndex,
             onClick: action.onClick,
             children: action.text
           }))]
@@ -172,6 +179,7 @@ function Alert({
         children: /*#__PURE__*/jsxRuntime.jsx(CloseButton.CloseButton, {
           ref: closeButtonReference,
           size: "xs",
+          tabIndex: accessibleTabIndex,
           onClick: onDismiss
         })
       })]

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  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                  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                  onClick={action.onClick}\n                >\n                  {action.text}\n                </Button>\n              ))}\n          </div>\n        </div>\n        {onDismiss && (\n          <div className=\"alert__close\">\n            <CloseButton ref={closeButtonReference} size=\"xs\" onClick={onDismiss} />\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","_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","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    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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"}

package/build/alert/Alert.mjs

@@ -99,6 +99,11 @@ function Alert({
     }, WDS_LIVE_REGION_DELAY_MS);
   }, []);
   const closeButtonReference = useRef(null);
+  /**
+   * All focusable elements must be disabled until we announce the alert.
+   * @see https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI
+   */
+  const accessibleTabIndex = shouldAnnounce ? undefined : -1;
   return /*#__PURE__*/jsx("div", {
     role: resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status',
     className: "wds-alert__liveRegion",
@@ -150,6 +155,7 @@ function Alert({
             target: action.target,
             type: Typography.LINK_LARGE,
             className: "alert__action",
+            tabIndex: accessibleTabIndex,
             onClick: action.onClick,
             children: action.text
           }) : /*#__PURE__*/jsx(Button, {
@@ -159,6 +165,7 @@ function Alert({
             "aria-label": action['aria-label'],
             priority: "secondary-neutral",
             className: "alert__action",
+            tabIndex: accessibleTabIndex,
             onClick: action.onClick,
             children: action.text
           }))]
@@ -168,6 +175,7 @@ function Alert({
         children: /*#__PURE__*/jsx(CloseButton, {
           ref: closeButtonReference,
           size: "xs",
+          tabIndex: accessibleTabIndex,
           onClick: onDismiss
         })
       })]

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  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                  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                  onClick={action.onClick}\n                >\n                  {action.text}\n                </Button>\n              ))}\n          </div>\n        </div>\n        {onDismiss && (\n          <div className=\"alert__close\">\n            <CloseButton ref={closeButtonReference} size=\"xs\" onClick={onDismiss} />\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","_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","onClick","text","Button","v2","priority","CloseButton","ref"],"mappings":"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"}
+{"version":3,"file":"Alert.mjs","sources":["../../src/alert/Alert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useState, useRef, useEffect } from 'react';\n\nimport Body from '../body/Body';\nimport {\n  CloseButton,\n  Sentiment,\n  Size,\n  Status,\n  Typography,\n  WDS_LIVE_REGION_DELAY_MS,\n} from '../common';\n\nimport StatusIcon from '../statusIcon';\nimport Title from '../title/Title';\nimport { logActionRequired } from '../utilities';\n\nimport InlineMarkdown from './inlineMarkdown';\nimport Button from '../button';\nimport Link from '../link';\n\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,GAO7B,EAAA,CAAA,CAAA;AA+BD,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;AAEwB,SAAAC,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;AACW,CAAA,EAAA;AACXC,EAAAA,SAAS,CAAC,MAAK;IACb,IAAIJ,KAAK,KAAKK,SAAS,EAAE;MACvBC,iBAAiB,CACf,6EAA6E,CAC9E;AACH;AACF,GAAC,EAAE,CAACN,KAAK,CAAC,CAAC;AAEXI,EAAAA,SAAS,CAAC,MAAK;IACb,IAAIH,QAAQ,KAAKI,SAAS,EAAE;MAC1BC,iBAAiB,CACf,4EAA4E,CAC7E;AACH;AACF,GAAC,EAAE,CAACL,QAAQ,CAAC,CAAC;AAEdG,EAAAA,SAAS,CAAC,MAAK;IACb,IAAID,WAAW,KAAKE,SAAS,EAAE;MAC7BC,iBAAiB,CACf,iFAAiF,CAClF;AACH;AACF,GAAC,EAAE,CAACH,WAAW,CAAC,CAAC;AAEjBC,EAAAA,SAAS,CAAC,MAAK;IACb,IAAIF,IAAI,KAAKG,SAAS,EAAE;MACtBC,iBAAiB,CAAC,0EAA0E,CAAC;AAC/F;AACF,GAAC,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,CAAmCf,gCAAAA,EAAAA,IAAI,CAA4CgB,yCAAAA,EAAAA,YAAY,YAAY,CAC5G;AACH;AACF,GAAC,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;KACxB,EAAEE,wBAAwB,CAAC;GAC7B,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,CAAE,CAAA,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,WAAC,MAAM;YACLK,MAAM,CAACC,GAAG,EAAEE,QAAQ,CAACC,MAAM,CAAC5C,MAAM,CAACmC,IAAI,CAAC;AAC1C;AACF;QACAnB,aAAa,CAAC,KAAK,CAAC;OACpB;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,EACGF,CAAAA,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,YAAYnC,EAAAA,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,YAAY/C,EAAAA,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;SAEb;AAAA,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;;;;"}

package/build/common/closeButton/CloseButton.js

@@ -15,7 +15,8 @@ const CloseButton = /*#__PURE__*/React.forwardRef(function CloseButton({
   className,
   onClick,
   isDisabled,
-  testId
+  testId,
+  tabIndex
 }, reference) {
   const intl = reactIntl.useIntl();
   ariaLabel ??= intl.formatMessage(CloseButton_messages.default.ariaLabel);
@@ -32,6 +33,7 @@ const CloseButton = /*#__PURE__*/React.forwardRef(function CloseButton({
     "aria-disabled": isDisabled,
     disabled: isDisabled,
     "data-testid": testId,
+    tabIndex: tabIndex,
     onClick: onClick,
     children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
       size: size$1 === size.Size.SMALL || size$1 === size.Size.EXTRA_SMALL ? 16 : 24

package/build/common/closeButton/CloseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CloseButton.js","sources":["../../../src/common/closeButton/CloseButton.tsx"],"sourcesContent":["import { Cross, CrossCircleFill } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall, SizeExtraSmall } from '../propsValues/size';\n\nimport messages from './CloseButton.messages';\n\nexport type CloseButtonProps = Pick<\n  React.ComponentPropsWithoutRef<'button'>,\n  'aria-label' | 'className' | 'onClick'\n> & {\n  size?: SizeExtraSmall | SizeSmall | SizeMedium | SizeLarge;\n  filled?: boolean;\n  isDisabled?: boolean;\n  testId?: string;\n};\n\n/**\n * @deprecated Use `<IconButton />` component instead\n */\nexport const CloseButton = forwardRef(function CloseButton(\n  {\n    'aria-label': ariaLabel,\n    size = Size.MEDIUM,\n    filled = false,\n    className,\n    onClick,\n    isDisabled,\n    testId,\n  }: CloseButtonProps,\n  reference: React.ForwardedRef<HTMLButtonElement | null>,\n) {\n  const intl = useIntl();\n  ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n  const Icon = filled ? CrossCircleFill : Cross;\n\n  return (\n    <button\n      ref={reference}\n      type=\"button\"\n      className={clsx(\n        'np-close-button',\n        'close btn-link',\n        'text-no-decoration',\n        {\n          'np-close-button--x-small': size === Size.EXTRA_SMALL,\n          'np-close-button--large': size === Size.MEDIUM,\n          'np-close-button--x-large': size === Size.LARGE,\n        },\n        className,\n      )}\n      aria-label={ariaLabel}\n      aria-disabled={isDisabled}\n      disabled={isDisabled}\n      data-testid={testId}\n      onClick={onClick}\n    >\n      <Icon size={size === Size.SMALL || size === Size.EXTRA_SMALL ? 16 : 24} />\n    </button>\n  );\n});\n"],"names":["CloseButton","forwardRef","ariaLabel","size","Size","MEDIUM","filled","className","onClick","isDisabled","testId","reference","intl","useIntl","formatMessage","messages","Icon","CrossCircleFill","Cross","_jsx","ref","type","clsx","EXTRA_SMALL","LARGE","disabled","children","SMALL"],"mappings":";;;;;;;;;;MAsBaA,WAAW,gBAAGC,gBAAU,CAAC,SAASD,WAAWA,CACxD;AACE,EAAA,YAAY,EAAEE,SAAS;QACvBC,MAAI,GAAGC,SAAI,CAACC,MAAM;AAClBC,EAAAA,MAAM,GAAG,KAAK;EACdC,SAAS;EACTC,OAAO;EACPC,UAAU;AACVC,EAAAA;AAAM,CACW,EACnBC,SAAuD,EAAA;AAEvD,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;EACtBX,SAAS,KAAKU,IAAI,CAACE,aAAa,CAACC,4BAAQ,CAACb,SAAS,CAAC;AACpD,EAAA,MAAMc,IAAI,GAAGV,MAAM,GAAGW,qBAAe,GAAGC,WAAK;AAE7C,EAAA,oBACEC,cAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,GAAG,EAAET,SAAU;AACfU,IAAAA,IAAI,EAAC,QAAQ;IACbd,SAAS,EAAEe,SAAI,CACb,iBAAiB,EACjB,gBAAgB,EAChB,oBAAoB,EACpB;AACE,MAAA,0BAA0B,EAAEnB,MAAI,KAAKC,SAAI,CAACmB,WAAW;AACrD,MAAA,wBAAwB,EAAEpB,MAAI,KAAKC,SAAI,CAACC,MAAM;AAC9C,MAAA,0BAA0B,EAAEF,MAAI,KAAKC,SAAI,CAACoB;KAC3C,EACDjB,SAAS,CACT;AACF,IAAA,YAAA,EAAYL,SAAU;AACtB,IAAA,eAAA,EAAeO,UAAW;AAC1BgB,IAAAA,QAAQ,EAAEhB,UAAW;AACrB,IAAA,aAAA,EAAaC,MAAO;AACpBF,IAAAA,OAAO,EAAEA,OAAQ;IAAAkB,QAAA,eAEjBP,cAAA,CAACH,IAAI,EAAA;AAACb,MAAAA,IAAI,EAAEA,MAAI,KAAKC,SAAI,CAACuB,KAAK,IAAIxB,MAAI,KAAKC,SAAI,CAACmB,WAAW,GAAG,EAAE,GAAG;KACtE;AAAA,GAAQ,CAAC;AAEb,CAAC;;;;"}
+{"version":3,"file":"CloseButton.js","sources":["../../../src/common/closeButton/CloseButton.tsx"],"sourcesContent":["import { Cross, CrossCircleFill } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall, SizeExtraSmall } from '../propsValues/size';\n\nimport messages from './CloseButton.messages';\n\nexport type CloseButtonProps = Pick<\n  React.ComponentPropsWithoutRef<'button'>,\n  'aria-label' | 'className' | 'onClick'\n> & {\n  size?: SizeExtraSmall | SizeSmall | SizeMedium | SizeLarge;\n  filled?: boolean;\n  isDisabled?: boolean;\n  testId?: string;\n  tabIndex?: number;\n};\n\n/**\n * @deprecated Use `<IconButton />` component instead\n */\nexport const CloseButton = forwardRef(function CloseButton(\n  {\n    'aria-label': ariaLabel,\n    size = Size.MEDIUM,\n    filled = false,\n    className,\n    onClick,\n    isDisabled,\n    testId,\n    tabIndex,\n  }: CloseButtonProps,\n  reference: React.ForwardedRef<HTMLButtonElement | null>,\n) {\n  const intl = useIntl();\n  ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n  const Icon = filled ? CrossCircleFill : Cross;\n\n  return (\n    <button\n      ref={reference}\n      type=\"button\"\n      className={clsx(\n        'np-close-button',\n        'close btn-link',\n        'text-no-decoration',\n        {\n          'np-close-button--x-small': size === Size.EXTRA_SMALL,\n          'np-close-button--large': size === Size.MEDIUM,\n          'np-close-button--x-large': size === Size.LARGE,\n        },\n        className,\n      )}\n      aria-label={ariaLabel}\n      aria-disabled={isDisabled}\n      disabled={isDisabled}\n      data-testid={testId}\n      tabIndex={tabIndex}\n      onClick={onClick}\n    >\n      <Icon size={size === Size.SMALL || size === Size.EXTRA_SMALL ? 16 : 24} />\n    </button>\n  );\n});\n"],"names":["CloseButton","forwardRef","ariaLabel","size","Size","MEDIUM","filled","className","onClick","isDisabled","testId","tabIndex","reference","intl","useIntl","formatMessage","messages","Icon","CrossCircleFill","Cross","_jsx","ref","type","clsx","EXTRA_SMALL","LARGE","disabled","children","SMALL"],"mappings":";;;;;;;;;;MAuBaA,WAAW,gBAAGC,gBAAU,CAAC,SAASD,WAAWA,CACxD;AACE,EAAA,YAAY,EAAEE,SAAS;QACvBC,MAAI,GAAGC,SAAI,CAACC,MAAM;AAClBC,EAAAA,MAAM,GAAG,KAAK;EACdC,SAAS;EACTC,OAAO;EACPC,UAAU;EACVC,MAAM;AACNC,EAAAA;AAAQ,CACS,EACnBC,SAAuD,EAAA;AAEvD,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;EACtBZ,SAAS,KAAKW,IAAI,CAACE,aAAa,CAACC,4BAAQ,CAACd,SAAS,CAAC;AACpD,EAAA,MAAMe,IAAI,GAAGX,MAAM,GAAGY,qBAAe,GAAGC,WAAK;AAE7C,EAAA,oBACEC,cAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,GAAG,EAAET,SAAU;AACfU,IAAAA,IAAI,EAAC,QAAQ;IACbf,SAAS,EAAEgB,SAAI,CACb,iBAAiB,EACjB,gBAAgB,EAChB,oBAAoB,EACpB;AACE,MAAA,0BAA0B,EAAEpB,MAAI,KAAKC,SAAI,CAACoB,WAAW;AACrD,MAAA,wBAAwB,EAAErB,MAAI,KAAKC,SAAI,CAACC,MAAM;AAC9C,MAAA,0BAA0B,EAAEF,MAAI,KAAKC,SAAI,CAACqB;KAC3C,EACDlB,SAAS,CACT;AACF,IAAA,YAAA,EAAYL,SAAU;AACtB,IAAA,eAAA,EAAeO,UAAW;AAC1BiB,IAAAA,QAAQ,EAAEjB,UAAW;AACrB,IAAA,aAAA,EAAaC,MAAO;AACpBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBH,IAAAA,OAAO,EAAEA,OAAQ;IAAAmB,QAAA,eAEjBP,cAAA,CAACH,IAAI,EAAA;AAACd,MAAAA,IAAI,EAAEA,MAAI,KAAKC,SAAI,CAACwB,KAAK,IAAIzB,MAAI,KAAKC,SAAI,CAACoB,WAAW,GAAG,EAAE,GAAG;KACtE;AAAA,GAAQ,CAAC;AAEb,CAAC;;;;"}

package/build/common/closeButton/CloseButton.mjs

@@ -13,7 +13,8 @@ const CloseButton = /*#__PURE__*/forwardRef(function CloseButton({
   className,
   onClick,
   isDisabled,
-  testId
+  testId,
+  tabIndex
 }, reference) {
   const intl = useIntl();
   ariaLabel ??= intl.formatMessage(messages.ariaLabel);
@@ -30,6 +31,7 @@ const CloseButton = /*#__PURE__*/forwardRef(function CloseButton({
     "aria-disabled": isDisabled,
     disabled: isDisabled,
     "data-testid": testId,
+    tabIndex: tabIndex,
     onClick: onClick,
     children: /*#__PURE__*/jsx(Icon, {
       size: size === Size.SMALL || size === Size.EXTRA_SMALL ? 16 : 24

package/build/common/closeButton/CloseButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CloseButton.mjs","sources":["../../../src/common/closeButton/CloseButton.tsx"],"sourcesContent":["import { Cross, CrossCircleFill } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall, SizeExtraSmall } from '../propsValues/size';\n\nimport messages from './CloseButton.messages';\n\nexport type CloseButtonProps = Pick<\n  React.ComponentPropsWithoutRef<'button'>,\n  'aria-label' | 'className' | 'onClick'\n> & {\n  size?: SizeExtraSmall | SizeSmall | SizeMedium | SizeLarge;\n  filled?: boolean;\n  isDisabled?: boolean;\n  testId?: string;\n};\n\n/**\n * @deprecated Use `<IconButton />` component instead\n */\nexport const CloseButton = forwardRef(function CloseButton(\n  {\n    'aria-label': ariaLabel,\n    size = Size.MEDIUM,\n    filled = false,\n    className,\n    onClick,\n    isDisabled,\n    testId,\n  }: CloseButtonProps,\n  reference: React.ForwardedRef<HTMLButtonElement | null>,\n) {\n  const intl = useIntl();\n  ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n  const Icon = filled ? CrossCircleFill : Cross;\n\n  return (\n    <button\n      ref={reference}\n      type=\"button\"\n      className={clsx(\n        'np-close-button',\n        'close btn-link',\n        'text-no-decoration',\n        {\n          'np-close-button--x-small': size === Size.EXTRA_SMALL,\n          'np-close-button--large': size === Size.MEDIUM,\n          'np-close-button--x-large': size === Size.LARGE,\n        },\n        className,\n      )}\n      aria-label={ariaLabel}\n      aria-disabled={isDisabled}\n      disabled={isDisabled}\n      data-testid={testId}\n      onClick={onClick}\n    >\n      <Icon size={size === Size.SMALL || size === Size.EXTRA_SMALL ? 16 : 24} />\n    </button>\n  );\n});\n"],"names":["CloseButton","forwardRef","ariaLabel","size","Size","MEDIUM","filled","className","onClick","isDisabled","testId","reference","intl","useIntl","formatMessage","messages","Icon","CrossCircleFill","Cross","_jsx","ref","type","clsx","EXTRA_SMALL","LARGE","disabled","children","SMALL"],"mappings":";;;;;;;;MAsBaA,WAAW,gBAAGC,UAAU,CAAC,SAASD,WAAWA,CACxD;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,IAAI,GAAGC,IAAI,CAACC,MAAM;AAClBC,EAAAA,MAAM,GAAG,KAAK;EACdC,SAAS;EACTC,OAAO;EACPC,UAAU;AACVC,EAAAA;AAAM,CACW,EACnBC,SAAuD,EAAA;AAEvD,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;EACtBX,SAAS,KAAKU,IAAI,CAACE,aAAa,CAACC,QAAQ,CAACb,SAAS,CAAC;AACpD,EAAA,MAAMc,IAAI,GAAGV,MAAM,GAAGW,eAAe,GAAGC,KAAK;AAE7C,EAAA,oBACEC,GAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,GAAG,EAAET,SAAU;AACfU,IAAAA,IAAI,EAAC,QAAQ;IACbd,SAAS,EAAEe,IAAI,CACb,iBAAiB,EACjB,gBAAgB,EAChB,oBAAoB,EACpB;AACE,MAAA,0BAA0B,EAAEnB,IAAI,KAAKC,IAAI,CAACmB,WAAW;AACrD,MAAA,wBAAwB,EAAEpB,IAAI,KAAKC,IAAI,CAACC,MAAM;AAC9C,MAAA,0BAA0B,EAAEF,IAAI,KAAKC,IAAI,CAACoB;KAC3C,EACDjB,SAAS,CACT;AACF,IAAA,YAAA,EAAYL,SAAU;AACtB,IAAA,eAAA,EAAeO,UAAW;AAC1BgB,IAAAA,QAAQ,EAAEhB,UAAW;AACrB,IAAA,aAAA,EAAaC,MAAO;AACpBF,IAAAA,OAAO,EAAEA,OAAQ;IAAAkB,QAAA,eAEjBP,GAAA,CAACH,IAAI,EAAA;AAACb,MAAAA,IAAI,EAAEA,IAAI,KAAKC,IAAI,CAACuB,KAAK,IAAIxB,IAAI,KAAKC,IAAI,CAACmB,WAAW,GAAG,EAAE,GAAG;KACtE;AAAA,GAAQ,CAAC;AAEb,CAAC;;;;"}
+{"version":3,"file":"CloseButton.mjs","sources":["../../../src/common/closeButton/CloseButton.tsx"],"sourcesContent":["import { Cross, CrossCircleFill } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall, SizeExtraSmall } from '../propsValues/size';\n\nimport messages from './CloseButton.messages';\n\nexport type CloseButtonProps = Pick<\n  React.ComponentPropsWithoutRef<'button'>,\n  'aria-label' | 'className' | 'onClick'\n> & {\n  size?: SizeExtraSmall | SizeSmall | SizeMedium | SizeLarge;\n  filled?: boolean;\n  isDisabled?: boolean;\n  testId?: string;\n  tabIndex?: number;\n};\n\n/**\n * @deprecated Use `<IconButton />` component instead\n */\nexport const CloseButton = forwardRef(function CloseButton(\n  {\n    'aria-label': ariaLabel,\n    size = Size.MEDIUM,\n    filled = false,\n    className,\n    onClick,\n    isDisabled,\n    testId,\n    tabIndex,\n  }: CloseButtonProps,\n  reference: React.ForwardedRef<HTMLButtonElement | null>,\n) {\n  const intl = useIntl();\n  ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n  const Icon = filled ? CrossCircleFill : Cross;\n\n  return (\n    <button\n      ref={reference}\n      type=\"button\"\n      className={clsx(\n        'np-close-button',\n        'close btn-link',\n        'text-no-decoration',\n        {\n          'np-close-button--x-small': size === Size.EXTRA_SMALL,\n          'np-close-button--large': size === Size.MEDIUM,\n          'np-close-button--x-large': size === Size.LARGE,\n        },\n        className,\n      )}\n      aria-label={ariaLabel}\n      aria-disabled={isDisabled}\n      disabled={isDisabled}\n      data-testid={testId}\n      tabIndex={tabIndex}\n      onClick={onClick}\n    >\n      <Icon size={size === Size.SMALL || size === Size.EXTRA_SMALL ? 16 : 24} />\n    </button>\n  );\n});\n"],"names":["CloseButton","forwardRef","ariaLabel","size","Size","MEDIUM","filled","className","onClick","isDisabled","testId","tabIndex","reference","intl","useIntl","formatMessage","messages","Icon","CrossCircleFill","Cross","_jsx","ref","type","clsx","EXTRA_SMALL","LARGE","disabled","children","SMALL"],"mappings":";;;;;;;;MAuBaA,WAAW,gBAAGC,UAAU,CAAC,SAASD,WAAWA,CACxD;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,IAAI,GAAGC,IAAI,CAACC,MAAM;AAClBC,EAAAA,MAAM,GAAG,KAAK;EACdC,SAAS;EACTC,OAAO;EACPC,UAAU;EACVC,MAAM;AACNC,EAAAA;AAAQ,CACS,EACnBC,SAAuD,EAAA;AAEvD,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;EACtBZ,SAAS,KAAKW,IAAI,CAACE,aAAa,CAACC,QAAQ,CAACd,SAAS,CAAC;AACpD,EAAA,MAAMe,IAAI,GAAGX,MAAM,GAAGY,eAAe,GAAGC,KAAK;AAE7C,EAAA,oBACEC,GAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,GAAG,EAAET,SAAU;AACfU,IAAAA,IAAI,EAAC,QAAQ;IACbf,SAAS,EAAEgB,IAAI,CACb,iBAAiB,EACjB,gBAAgB,EAChB,oBAAoB,EACpB;AACE,MAAA,0BAA0B,EAAEpB,IAAI,KAAKC,IAAI,CAACoB,WAAW;AACrD,MAAA,wBAAwB,EAAErB,IAAI,KAAKC,IAAI,CAACC,MAAM;AAC9C,MAAA,0BAA0B,EAAEF,IAAI,KAAKC,IAAI,CAACqB;KAC3C,EACDlB,SAAS,CACT;AACF,IAAA,YAAA,EAAYL,SAAU;AACtB,IAAA,eAAA,EAAeO,UAAW;AAC1BiB,IAAAA,QAAQ,EAAEjB,UAAW;AACrB,IAAA,aAAA,EAAaC,MAAO;AACpBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBH,IAAAA,OAAO,EAAEA,OAAQ;IAAAmB,QAAA,eAEjBP,GAAA,CAACH,IAAI,EAAA;AAACd,MAAAA,IAAI,EAAEA,IAAI,KAAKC,IAAI,CAACwB,KAAK,IAAIzB,IAAI,KAAKC,IAAI,CAACoB,WAAW,GAAG,EAAE,GAAG;KACtE;AAAA,GAAQ,CAAC;AAEb,CAAC;;;;"}

package/build/dateInput/DateInput.js

@@ -215,8 +215,8 @@ const DateInput = ({
   };
   const monthYearOnly = mode === dateMode.DateMode.MONTH_YEAR;
   const monthWidth = clsx.clsx({
-    'col-sm-8': monthYearOnly,
-    'col-sm-5': !monthYearOnly
+    'col-sm-8 tw-date--month': monthYearOnly,
+    'col-sm-5 tw-date--month': !monthYearOnly
   });
   const getMonth = () => {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -226,7 +226,7 @@ const DateInput = ({
   };
   const getDay = () => {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "col-sm-3",
+      className: "col-sm-3 tw-date--day",
       children: /*#__PURE__*/jsxRuntime.jsxs("label", {
         children: [/*#__PURE__*/jsxRuntime.jsx(Body.default, {
           type: typography.Typography.BODY_DEFAULT,
@@ -254,7 +254,7 @@ const DateInput = ({
   };
   const getYear = () => {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "col-sm-4",
+      className: "col-sm-4 tw-date--year",
       children: /*#__PURE__*/jsxRuntime.jsxs("label", {
         children: [/*#__PURE__*/jsxRuntime.jsx(Body.default, {
           type: typography.Typography.BODY_DEFAULT,

package/build/dateInput/DateInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.js","sources":["../../src/dateInput/DateInput.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport { Input } from '../inputs/Input';\nimport {\n  SelectInput,\n  SelectInputOptionContent,\n  type SelectInputProps,\n} from '../inputs/SelectInput';\nimport {\n  DateMode,\n  MonthFormat,\n  Size,\n  SizeLarge,\n  SizeMedium,\n  SizeSmall,\n  Typography,\n} from '../common';\nimport { MDY, YMD, getMonthNames, isDateValid, isMonthAndYearFormat } from '../common/dateUtils';\nimport { useInputAttributes } from '../inputs/contexts';\nimport messages from './DateInput.messages';\nimport { convertToLocalMidnight } from './utils';\n\nexport interface DateInputProps {\n  /** @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead. */\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  disabled?: boolean;\n  size?: SizeSmall | SizeMedium | SizeLarge;\n  value?: Date | string;\n  onChange: (value: string | null) => void;\n  onFocus?: React.FocusEventHandler<HTMLDivElement>;\n  onBlur?: React.FocusEventHandler<HTMLDivElement>;\n  dayLabel?: string;\n  dayAutoComplete?: string;\n  monthLabel?: string;\n  yearLabel?: string;\n  yearAutoComplete?: string;\n  monthFormat?: `${MonthFormat}`;\n  mode?: `${DateMode}`;\n  placeholders?: {\n    day?: string;\n    month?: string;\n    year?: string;\n  };\n  id?: string;\n  selectProps?: Partial<SelectInputProps<number | null>>;\n}\n\nconst DateInput = ({\n  'aria-labelledby': ariaLabelledByProp,\n  'aria-label': ariaLabel,\n  disabled = false,\n  size = Size.MEDIUM,\n  value,\n  dayLabel,\n  dayAutoComplete,\n  monthLabel,\n  yearLabel,\n  yearAutoComplete,\n  monthFormat = MonthFormat.LONG,\n  mode = DateMode.DAY_MONTH_YEAR,\n  onChange,\n  onFocus,\n  onBlur,\n  placeholders,\n  id: idProp,\n  selectProps = {},\n}: DateInputProps) => {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n  const id = idProp ?? inputAttributes.id;\n  const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];\n\n  const { locale, formatMessage } = useIntl();\n\n  const getDateObject = (): Date | undefined => {\n    if (value && isDateValid(value)) {\n      return typeof value === 'string' ? convertToLocalMidnight(value) : value;\n    }\n    return undefined;\n  };\n\n  const getInitialDate = (unit: 'year' | 'month' | 'day'): number | null => {\n    if (value && isDateValid(value)) {\n      const dateObject = getDateObject();\n\n      if (typeof value === 'string' && isMonthAndYearFormat(value) && unit === 'day') {\n        return null;\n      }\n\n      if (dateObject !== undefined) {\n        switch (unit) {\n          case 'year':\n            return dateObject.getFullYear();\n          case 'month':\n            return dateObject.getMonth();\n          case 'day':\n            return dateObject.getDate();\n          default:\n            return null;\n        }\n      }\n    }\n    return null;\n  };\n\n  const [day, setDay] = useState(() => getInitialDate('day'));\n  const [displayDay, setDisplayDay] = useState(day?.toString());\n  const [month, setMonth] = useState(() => getInitialDate('month'));\n  const [year, setYear] = useState(() => getInitialDate('year'));\n  const [displayYear, setDisplayYear] = useState(year?.toString());\n  const [lastBroadcastedValue, setLastBroadcastedValue] = useState<Date | null | undefined>(\n    getDateObject,\n  );\n  const monthNames = getMonthNames(locale, monthFormat);\n\n  dayLabel ||= formatMessage(messages.dayLabel);\n  monthLabel ||= formatMessage(messages.monthLabel);\n  yearLabel ||= formatMessage(messages.yearLabel);\n  placeholders = {\n    day: placeholders?.day || formatMessage(messages.dayPlaceholder),\n    month: placeholders?.month || formatMessage(messages.monthLabel),\n    year: placeholders?.year || formatMessage(messages.yearPlaceholder),\n  };\n\n  const getDateAsString = (date: Date) => {\n    if (!isDateValid(date)) {\n      return '';\n    }\n    switch (mode) {\n      case DateMode.MONTH_YEAR:\n        return [date.getFullYear(), `0${date.getMonth() + 1}`.slice(-2)].join('-');\n      case DateMode.DAY_MONTH_YEAR:\n      default:\n        return [\n          date.getFullYear(),\n          `0${date.getMonth() + 1}`.slice(-2),\n          `0${date.getDate()}`.slice(-2),\n        ].join('-');\n    }\n  };\n\n  const getSelectElement = () => {\n    return (\n      <label className=\"d-flex flex-column\">\n        <Body type={Typography.BODY_DEFAULT}>{monthLabel}</Body>\n        <SelectInput\n          id={`${id}:month`}\n          name=\"month\"\n          disabled={disabled}\n          placeholder={placeholders?.month}\n          items={Array.from({ length: 12 }, (_, index) => ({ type: 'option', value: index }))}\n          size={size}\n          value={month}\n          renderValue={(selectedValue) => (\n            <SelectInputOptionContent title={monthNames[selectedValue]} />\n          )}\n          onChange={(selectedValue) => handleMonthChange(selectedValue)}\n          {...selectProps}\n        />\n      </label>\n    );\n  };\n\n  const isDayValid = (newDay: number, newMonth: number, newYear: number) => {\n    const maxDay = new Date(newYear, newMonth + 1, 0).getDate();\n    return newDay <= maxDay;\n  };\n\n  const handleInternalValue = (newDay = day, newMonth = month, newYear = year) => {\n    if (newDay == null || newDay === 0 || newMonth == null || newYear == null || newYear === 0) {\n      broadcastNewValue(null);\n      return;\n    }\n    if (!isDayValid(newDay, newMonth, newYear)) {\n      broadcastNewValue(null);\n      return;\n    }\n\n    const dateValue = new Date(newYear, newMonth, newDay);\n    if (newYear < 100) {\n      dateValue.setFullYear(newYear);\n    }\n\n    if (!isDateValid(dateValue)) {\n      broadcastNewValue(null);\n      return;\n    }\n\n    if (mode === DateMode.MONTH_YEAR) {\n      if (newMonth !== month || newYear !== year) {\n        broadcastNewValue(dateValue);\n      }\n    } else if (newDay !== day || newMonth !== month || newYear !== year) {\n      broadcastNewValue(dateValue);\n    }\n  };\n\n  const handleDayChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const newDayString = event.target.value.replace(/\\D/g, '');\n    const newDayNumber = Number.parseInt(newDayString, 10);\n\n    setDay(newDayNumber);\n    setDisplayDay(newDayString);\n    handleInternalValue(newDayNumber, month, year);\n  };\n\n  const handleMonthChange = (selectedMonth: number | null) => {\n    if (selectedMonth === null) {\n      setMonth(null);\n      handleInternalValue(day, null, year);\n      return;\n    }\n    setMonth(selectedMonth);\n    handleInternalValue(day, selectedMonth, year);\n  };\n\n  const handleYearChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const newYearString = event.target.value.replace(/\\D/g, '');\n    const newYearNumber = Number.parseInt(newYearString, 10);\n\n    if (newYearString.length >= 4 && newYearString.length <= 6) {\n      setYear(newYearNumber);\n      setDisplayYear(newYearString);\n      handleInternalValue(day, month, newYearNumber);\n    } else {\n      setYear(null);\n      setDisplayYear(newYearString);\n      handleInternalValue(day, month, null);\n    }\n  };\n\n  const broadcastNewValue = (newValue: Date | null) => {\n    if (newValue !== lastBroadcastedValue) {\n      setLastBroadcastedValue(newValue);\n      onChange(newValue != null ? getDateAsString(newValue) : null);\n    }\n  };\n\n  const monthYearOnly = mode === DateMode.MONTH_YEAR;\n\n  const monthWidth = clsx({\n    'col-sm-8': monthYearOnly,\n    'col-sm-5': !monthYearOnly,\n  });\n\n  const getMonth = () => {\n    return <div className={monthWidth}>{getSelectElement()}</div>;\n  };\n\n  const getDay = () => {\n    return (\n      <div className=\"col-sm-3\">\n        <label>\n          <Body type={Typography.BODY_DEFAULT}>{dayLabel}</Body>\n          <div className={`input-group input-group-${size}`}>\n            <Input\n              id={`${id}:day`}\n              type=\"text\"\n              inputMode=\"numeric\"\n              pattern=\"[0-9]*\"\n              name=\"day\"\n              autoComplete={dayAutoComplete}\n              value={displayDay || ''}\n              placeholder={placeholders?.day}\n              disabled={disabled}\n              min={1}\n              max={31}\n              maxLength={2}\n              onChange={(event) => handleDayChange(event)}\n            />\n          </div>\n        </label>\n      </div>\n    );\n  };\n\n  const getYear = () => {\n    return (\n      <div className=\"col-sm-4\">\n        <label>\n          <Body type={Typography.BODY_DEFAULT}>{yearLabel}</Body>\n          <div className={`input-group input-group-${size}`}>\n            <Input\n              id={`${id}:year`}\n              type=\"text\"\n              inputMode=\"numeric\"\n              pattern=\"[0-9]*\"\n              name=\"year\"\n              autoComplete={yearAutoComplete}\n              placeholder={placeholders?.year}\n              value={displayYear || ''}\n              disabled={disabled}\n              min={0}\n              max={9999}\n              maxLength={6}\n              onChange={(event) => handleYearChange(event)}\n            />\n          </div>\n        </label>\n      </div>\n    );\n  };\n  const monthBeforeDay = MDY.has(locale);\n  const yearFirst = YMD.has(locale);\n\n  return (\n    <div\n      className=\"tw-date\"\n      {...inputAttributes}\n      id={id}\n      aria-labelledby={ariaLabelledBy}\n      aria-label={ariaLabel}\n      role=\"group\" // Add role attribute to indicate container for interactive elements\n      onFocus={(event) =>\n        shouldPropagateOnFocus(event) ? onFocus && onFocus(event) : event.stopPropagation()\n      }\n      onBlur={(event) =>\n        shouldPropagateOnBlur(event) ? onBlur && onBlur(event) : event.stopPropagation()\n      }\n    >\n      <div className=\"row\">\n        {(() => {\n          if (monthYearOnly) {\n            return (\n              <>\n                {!yearFirst && getMonth()}\n                {getYear()}\n                {yearFirst && getMonth()}\n              </>\n            );\n          }\n          if (monthBeforeDay) {\n            return (\n              <>\n                {getMonth()}\n                {getDay()}\n                {getYear()}\n              </>\n            );\n          }\n          if (yearFirst) {\n            return (\n              <>\n                {getYear()}\n                {getMonth()}\n                {getDay()}\n              </>\n            );\n          }\n          return (\n            <>\n              {getDay()}\n              {getMonth()}\n              {getYear()}\n            </>\n          );\n        })()}\n      </div>\n    </div>\n  );\n};\n\n// Should only propagate if the relatedTarget is not part of this DateInput component.\nfunction shouldPropagateOnFocus({\n  target,\n  relatedTarget,\n}: Pick<React.FocusEvent, 'target' | 'relatedTarget'>) {\n  const targetParent = target.closest('.tw-date');\n  const relatedParent = relatedTarget && relatedTarget.closest('.tw-date');\n  return targetParent !== relatedParent;\n}\n\n// Should only propagate if the relatedTarget or the activeElement is not part of this DateInput component.\nfunction shouldPropagateOnBlur({\n  target,\n  relatedTarget,\n}: Pick<React.FocusEvent, 'target' | 'relatedTarget'>) {\n  const blurElementParent = target.closest('.tw-date');\n  // Even though FocusEvent.relatedTarget is supported by IE\n  // (https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent/relatedTarget)\n  // \"IE11 sets document.activeElement to the next focused element before the blur event is called.\"\n  // (https://stackoverflow.com/a/49325196/986241)\n  // Therefore if the relatedTarget is null, we try the document.activeElement,\n  // which may contain the HTML element that is gaining focus\n  const focusElement =\n    relatedTarget || (document.activeElement !== target ? document.activeElement : null);\n  const focusElementParent = focusElement && focusElement.closest('.tw-date');\n  return blurElementParent !== focusElementParent;\n}\n\nexport default DateInput;\n"],"names":["DateInput","ariaLabelledByProp","ariaLabel","disabled","size","Size","MEDIUM","value","dayLabel","dayAutoComplete","monthLabel","yearLabel","yearAutoComplete","monthFormat","MonthFormat","LONG","mode","DateMode","DAY_MONTH_YEAR","onChange","onFocus","onBlur","placeholders","id","idProp","selectProps","inputAttributes","useInputAttributes","nonLabelable","ariaLabelledBy","locale","formatMessage","useIntl","getDateObject","isDateValid","convertToLocalMidnight","undefined","getInitialDate","unit","dateObject","isMonthAndYearFormat","getFullYear","getMonth","getDate","day","setDay","useState","displayDay","setDisplayDay","toString","month","setMonth","year","setYear","displayYear","setDisplayYear","lastBroadcastedValue","setLastBroadcastedValue","monthNames","getMonthNames","messages","dayPlaceholder","yearPlaceholder","getDateAsString","date","MONTH_YEAR","slice","join","getSelectElement","_jsxs","className","children","_jsx","Body","type","Typography","BODY_DEFAULT","SelectInput","name","placeholder","items","Array","from","length","_","index","renderValue","selectedValue","SelectInputOptionContent","title","handleMonthChange","isDayValid","newDay","newMonth","newYear","maxDay","Date","handleInternalValue","broadcastNewValue","dateValue","setFullYear","handleDayChange","event","newDayString","target","replace","newDayNumber","Number","parseInt","selectedMonth","handleYearChange","newYearString","newYearNumber","newValue","monthYearOnly","monthWidth","clsx","getDay","Input","inputMode","pattern","autoComplete","min","max","maxLength","getYear","monthBeforeDay","MDY","has","yearFirst","YMD","role","shouldPropagateOnFocus","stopPropagation","shouldPropagateOnBlur","_Fragment","relatedTarget","targetParent","closest","relatedParent","blurElementParent","focusElement","document","activeElement","focusElementParent"],"mappings":"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"}
+{"version":3,"file":"DateInput.js","sources":["../../src/dateInput/DateInput.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport { Input } from '../inputs/Input';\nimport {\n  SelectInput,\n  SelectInputOptionContent,\n  type SelectInputProps,\n} from '../inputs/SelectInput';\nimport {\n  DateMode,\n  MonthFormat,\n  Size,\n  SizeLarge,\n  SizeMedium,\n  SizeSmall,\n  Typography,\n} from '../common';\nimport { MDY, YMD, getMonthNames, isDateValid, isMonthAndYearFormat } from '../common/dateUtils';\nimport { useInputAttributes } from '../inputs/contexts';\nimport messages from './DateInput.messages';\nimport { convertToLocalMidnight } from './utils';\n\nexport interface DateInputProps {\n  /** @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead. */\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  disabled?: boolean;\n  size?: SizeSmall | SizeMedium | SizeLarge;\n  value?: Date | string;\n  onChange: (value: string | null) => void;\n  onFocus?: React.FocusEventHandler<HTMLDivElement>;\n  onBlur?: React.FocusEventHandler<HTMLDivElement>;\n  dayLabel?: string;\n  dayAutoComplete?: string;\n  monthLabel?: string;\n  yearLabel?: string;\n  yearAutoComplete?: string;\n  monthFormat?: `${MonthFormat}`;\n  mode?: `${DateMode}`;\n  placeholders?: {\n    day?: string;\n    month?: string;\n    year?: string;\n  };\n  id?: string;\n  selectProps?: Partial<SelectInputProps<number | null>>;\n}\n\nconst DateInput = ({\n  'aria-labelledby': ariaLabelledByProp,\n  'aria-label': ariaLabel,\n  disabled = false,\n  size = Size.MEDIUM,\n  value,\n  dayLabel,\n  dayAutoComplete,\n  monthLabel,\n  yearLabel,\n  yearAutoComplete,\n  monthFormat = MonthFormat.LONG,\n  mode = DateMode.DAY_MONTH_YEAR,\n  onChange,\n  onFocus,\n  onBlur,\n  placeholders,\n  id: idProp,\n  selectProps = {},\n}: DateInputProps) => {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n  const id = idProp ?? inputAttributes.id;\n  const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];\n\n  const { locale, formatMessage } = useIntl();\n\n  const getDateObject = (): Date | undefined => {\n    if (value && isDateValid(value)) {\n      return typeof value === 'string' ? convertToLocalMidnight(value) : value;\n    }\n    return undefined;\n  };\n\n  const getInitialDate = (unit: 'year' | 'month' | 'day'): number | null => {\n    if (value && isDateValid(value)) {\n      const dateObject = getDateObject();\n\n      if (typeof value === 'string' && isMonthAndYearFormat(value) && unit === 'day') {\n        return null;\n      }\n\n      if (dateObject !== undefined) {\n        switch (unit) {\n          case 'year':\n            return dateObject.getFullYear();\n          case 'month':\n            return dateObject.getMonth();\n          case 'day':\n            return dateObject.getDate();\n          default:\n            return null;\n        }\n      }\n    }\n    return null;\n  };\n\n  const [day, setDay] = useState(() => getInitialDate('day'));\n  const [displayDay, setDisplayDay] = useState(day?.toString());\n  const [month, setMonth] = useState(() => getInitialDate('month'));\n  const [year, setYear] = useState(() => getInitialDate('year'));\n  const [displayYear, setDisplayYear] = useState(year?.toString());\n  const [lastBroadcastedValue, setLastBroadcastedValue] = useState<Date | null | undefined>(\n    getDateObject,\n  );\n  const monthNames = getMonthNames(locale, monthFormat);\n\n  dayLabel ||= formatMessage(messages.dayLabel);\n  monthLabel ||= formatMessage(messages.monthLabel);\n  yearLabel ||= formatMessage(messages.yearLabel);\n  placeholders = {\n    day: placeholders?.day || formatMessage(messages.dayPlaceholder),\n    month: placeholders?.month || formatMessage(messages.monthLabel),\n    year: placeholders?.year || formatMessage(messages.yearPlaceholder),\n  };\n\n  const getDateAsString = (date: Date) => {\n    if (!isDateValid(date)) {\n      return '';\n    }\n    switch (mode) {\n      case DateMode.MONTH_YEAR:\n        return [date.getFullYear(), `0${date.getMonth() + 1}`.slice(-2)].join('-');\n      case DateMode.DAY_MONTH_YEAR:\n      default:\n        return [\n          date.getFullYear(),\n          `0${date.getMonth() + 1}`.slice(-2),\n          `0${date.getDate()}`.slice(-2),\n        ].join('-');\n    }\n  };\n\n  const getSelectElement = () => {\n    return (\n      <label className=\"d-flex flex-column\">\n        <Body type={Typography.BODY_DEFAULT}>{monthLabel}</Body>\n        <SelectInput\n          id={`${id}:month`}\n          name=\"month\"\n          disabled={disabled}\n          placeholder={placeholders?.month}\n          items={Array.from({ length: 12 }, (_, index) => ({ type: 'option', value: index }))}\n          size={size}\n          value={month}\n          renderValue={(selectedValue) => (\n            <SelectInputOptionContent title={monthNames[selectedValue]} />\n          )}\n          onChange={(selectedValue) => handleMonthChange(selectedValue)}\n          {...selectProps}\n        />\n      </label>\n    );\n  };\n\n  const isDayValid = (newDay: number, newMonth: number, newYear: number) => {\n    const maxDay = new Date(newYear, newMonth + 1, 0).getDate();\n    return newDay <= maxDay;\n  };\n\n  const handleInternalValue = (newDay = day, newMonth = month, newYear = year) => {\n    if (newDay == null || newDay === 0 || newMonth == null || newYear == null || newYear === 0) {\n      broadcastNewValue(null);\n      return;\n    }\n    if (!isDayValid(newDay, newMonth, newYear)) {\n      broadcastNewValue(null);\n      return;\n    }\n\n    const dateValue = new Date(newYear, newMonth, newDay);\n    if (newYear < 100) {\n      dateValue.setFullYear(newYear);\n    }\n\n    if (!isDateValid(dateValue)) {\n      broadcastNewValue(null);\n      return;\n    }\n\n    if (mode === DateMode.MONTH_YEAR) {\n      if (newMonth !== month || newYear !== year) {\n        broadcastNewValue(dateValue);\n      }\n    } else if (newDay !== day || newMonth !== month || newYear !== year) {\n      broadcastNewValue(dateValue);\n    }\n  };\n\n  const handleDayChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const newDayString = event.target.value.replace(/\\D/g, '');\n    const newDayNumber = Number.parseInt(newDayString, 10);\n\n    setDay(newDayNumber);\n    setDisplayDay(newDayString);\n    handleInternalValue(newDayNumber, month, year);\n  };\n\n  const handleMonthChange = (selectedMonth: number | null) => {\n    if (selectedMonth === null) {\n      setMonth(null);\n      handleInternalValue(day, null, year);\n      return;\n    }\n    setMonth(selectedMonth);\n    handleInternalValue(day, selectedMonth, year);\n  };\n\n  const handleYearChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const newYearString = event.target.value.replace(/\\D/g, '');\n    const newYearNumber = Number.parseInt(newYearString, 10);\n\n    if (newYearString.length >= 4 && newYearString.length <= 6) {\n      setYear(newYearNumber);\n      setDisplayYear(newYearString);\n      handleInternalValue(day, month, newYearNumber);\n    } else {\n      setYear(null);\n      setDisplayYear(newYearString);\n      handleInternalValue(day, month, null);\n    }\n  };\n\n  const broadcastNewValue = (newValue: Date | null) => {\n    if (newValue !== lastBroadcastedValue) {\n      setLastBroadcastedValue(newValue);\n      onChange(newValue != null ? getDateAsString(newValue) : null);\n    }\n  };\n\n  const monthYearOnly = mode === DateMode.MONTH_YEAR;\n\n  const monthWidth = clsx({\n    'col-sm-8 tw-date--month': monthYearOnly,\n    'col-sm-5 tw-date--month': !monthYearOnly,\n  });\n\n  const getMonth = () => {\n    return <div className={monthWidth}>{getSelectElement()}</div>;\n  };\n\n  const getDay = () => {\n    return (\n      <div className=\"col-sm-3 tw-date--day\">\n        <label>\n          <Body type={Typography.BODY_DEFAULT}>{dayLabel}</Body>\n          <div className={`input-group input-group-${size}`}>\n            <Input\n              id={`${id}:day`}\n              type=\"text\"\n              inputMode=\"numeric\"\n              pattern=\"[0-9]*\"\n              name=\"day\"\n              autoComplete={dayAutoComplete}\n              value={displayDay || ''}\n              placeholder={placeholders?.day}\n              disabled={disabled}\n              min={1}\n              max={31}\n              maxLength={2}\n              onChange={(event) => handleDayChange(event)}\n            />\n          </div>\n        </label>\n      </div>\n    );\n  };\n\n  const getYear = () => {\n    return (\n      <div className=\"col-sm-4 tw-date--year\">\n        <label>\n          <Body type={Typography.BODY_DEFAULT}>{yearLabel}</Body>\n          <div className={`input-group input-group-${size}`}>\n            <Input\n              id={`${id}:year`}\n              type=\"text\"\n              inputMode=\"numeric\"\n              pattern=\"[0-9]*\"\n              name=\"year\"\n              autoComplete={yearAutoComplete}\n              placeholder={placeholders?.year}\n              value={displayYear || ''}\n              disabled={disabled}\n              min={0}\n              max={9999}\n              maxLength={6}\n              onChange={(event) => handleYearChange(event)}\n            />\n          </div>\n        </label>\n      </div>\n    );\n  };\n  const monthBeforeDay = MDY.has(locale);\n  const yearFirst = YMD.has(locale);\n\n  return (\n    <div\n      className=\"tw-date\"\n      {...inputAttributes}\n      id={id}\n      aria-labelledby={ariaLabelledBy}\n      aria-label={ariaLabel}\n      role=\"group\" // Add role attribute to indicate container for interactive elements\n      onFocus={(event) =>\n        shouldPropagateOnFocus(event) ? onFocus && onFocus(event) : event.stopPropagation()\n      }\n      onBlur={(event) =>\n        shouldPropagateOnBlur(event) ? onBlur && onBlur(event) : event.stopPropagation()\n      }\n    >\n      <div className=\"row\">\n        {(() => {\n          if (monthYearOnly) {\n            return (\n              <>\n                {!yearFirst && getMonth()}\n                {getYear()}\n                {yearFirst && getMonth()}\n              </>\n            );\n          }\n          if (monthBeforeDay) {\n            return (\n              <>\n                {getMonth()}\n                {getDay()}\n                {getYear()}\n              </>\n            );\n          }\n          if (yearFirst) {\n            return (\n              <>\n                {getYear()}\n                {getMonth()}\n                {getDay()}\n              </>\n            );\n          }\n          return (\n            <>\n              {getDay()}\n              {getMonth()}\n              {getYear()}\n            </>\n          );\n        })()}\n      </div>\n    </div>\n  );\n};\n\n// Should only propagate if the relatedTarget is not part of this DateInput component.\nfunction shouldPropagateOnFocus({\n  target,\n  relatedTarget,\n}: Pick<React.FocusEvent, 'target' | 'relatedTarget'>) {\n  const targetParent = target.closest('.tw-date');\n  const relatedParent = relatedTarget && relatedTarget.closest('.tw-date');\n  return targetParent !== relatedParent;\n}\n\n// Should only propagate if the relatedTarget or the activeElement is not part of this DateInput component.\nfunction shouldPropagateOnBlur({\n  target,\n  relatedTarget,\n}: Pick<React.FocusEvent, 'target' | 'relatedTarget'>) {\n  const blurElementParent = target.closest('.tw-date');\n  // Even though FocusEvent.relatedTarget is supported by IE\n  // (https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent/relatedTarget)\n  // \"IE11 sets document.activeElement to the next focused element before the blur event is called.\"\n  // (https://stackoverflow.com/a/49325196/986241)\n  // Therefore if the relatedTarget is null, we try the document.activeElement,\n  // which may contain the HTML element that is gaining focus\n  const focusElement =\n    relatedTarget || (document.activeElement !== target ? document.activeElement : null);\n  const focusElementParent = focusElement && focusElement.closest('.tw-date');\n  return blurElementParent !== focusElementParent;\n}\n\nexport default DateInput;\n"],"names":["DateInput","ariaLabelledByProp","ariaLabel","disabled","size","Size","MEDIUM","value","dayLabel","dayAutoComplete","monthLabel","yearLabel","yearAutoComplete","monthFormat","MonthFormat","LONG","mode","DateMode","DAY_MONTH_YEAR","onChange","onFocus","onBlur","placeholders","id","idProp","selectProps","inputAttributes","useInputAttributes","nonLabelable","ariaLabelledBy","locale","formatMessage","useIntl","getDateObject","isDateValid","convertToLocalMidnight","undefined","getInitialDate","unit","dateObject","isMonthAndYearFormat","getFullYear","getMonth","getDate","day","setDay","useState","displayDay","setDisplayDay","toString","month","setMonth","year","setYear","displayYear","setDisplayYear","lastBroadcastedValue","setLastBroadcastedValue","monthNames","getMonthNames","messages","dayPlaceholder","yearPlaceholder","getDateAsString","date","MONTH_YEAR","slice","join","getSelectElement","_jsxs","className","children","_jsx","Body","type","Typography","BODY_DEFAULT","SelectInput","name","placeholder","items","Array","from","length","_","index","renderValue","selectedValue","SelectInputOptionContent","title","handleMonthChange","isDayValid","newDay","newMonth","newYear","maxDay","Date","handleInternalValue","broadcastNewValue","dateValue","setFullYear","handleDayChange","event","newDayString","target","replace","newDayNumber","Number","parseInt","selectedMonth","handleYearChange","newYearString","newYearNumber","newValue","monthYearOnly","monthWidth","clsx","getDay","Input","inputMode","pattern","autoComplete","min","max","maxLength","getYear","monthBeforeDay","MDY","has","yearFirst","YMD","role","shouldPropagateOnFocus","stopPropagation","shouldPropagateOnBlur","_Fragment","relatedTarget","targetParent","closest","relatedParent","blurElementParent","focusElement","document","activeElement","focusElementParent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDMA,MAAAA,SAAS,GAAGA,CAAC;AACjB,EAAA,iBAAiB,EAAEC,kBAAkB;AACrC,EAAA,YAAY,EAAEC,SAAS;AACvBC,EAAAA,QAAQ,GAAG,KAAK;QAChBC,MAAI,GAAGC,SAAI,CAACC,MAAM;EAClBC,KAAK;EACLC,QAAQ;EACRC,eAAe;EACfC,UAAU;EACVC,SAAS;EACTC,gBAAgB;eAChBC,aAAW,GAAGC,uBAAW,CAACC,IAAI;EAC9BC,IAAI,GAAGC,iBAAQ,CAACC,cAAc;EAC9BC,QAAQ;EACRC,OAAO;EACPC,MAAM;EACNC,YAAY;AACZC,EAAAA,EAAE,EAAEC,MAAM;AACVC,EAAAA,WAAW,GAAG;AAAE,CACD,KAAI;EACnB,MAAMC,eAAe,GAAGC,2BAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE;AAAM,GAAA,CAAC;AAClE,EAAA,MAAML,EAAE,GAAGC,MAAM,IAAIE,eAAe,CAACH,EAAE;AACvC,EAAA,MAAMM,cAAc,GAAG5B,kBAAkB,IAAIyB,eAAe,CAAC,iBAAiB,CAAC;EAE/E,MAAM;IAAEI,MAAM;AAAEC,IAAAA;GAAe,GAAGC,iBAAO,EAAE;EAE3C,MAAMC,aAAa,GAAGA,MAAuB;AAC3C,IAAA,IAAI1B,KAAK,IAAI2B,uBAAW,CAAC3B,KAAK,CAAC,EAAE;MAC/B,OAAO,OAAOA,KAAK,KAAK,QAAQ,GAAG4B,6CAAsB,CAAC5B,KAAK,CAAC,GAAGA,KAAK;AAC1E;AACA,IAAA,OAAO6B,SAAS;GACjB;EAED,MAAMC,cAAc,GAAIC,IAA8B,IAAmB;AACvE,IAAA,IAAI/B,KAAK,IAAI2B,uBAAW,CAAC3B,KAAK,CAAC,EAAE;AAC/B,MAAA,MAAMgC,UAAU,GAAGN,aAAa,EAAE;AAElC,MAAA,IAAI,OAAO1B,KAAK,KAAK,QAAQ,IAAIiC,yCAAoB,CAACjC,KAAK,CAAC,IAAI+B,IAAI,KAAK,KAAK,EAAE;AAC9E,QAAA,OAAO,IAAI;AACb;MAEA,IAAIC,UAAU,KAAKH,SAAS,EAAE;AAC5B,QAAA,QAAQE,IAAI;AACV,UAAA,KAAK,MAAM;AACT,YAAA,OAAOC,UAAU,CAACE,WAAW,EAAE;AACjC,UAAA,KAAK,OAAO;AACV,YAAA,OAAOF,UAAU,CAACG,QAAQ,EAAE;AAC9B,UAAA,KAAK,KAAK;AACR,YAAA,OAAOH,UAAU,CAACI,OAAO,EAAE;AAC7B,UAAA;AACE,YAAA,OAAO,IAAI;AACf;AACF;AACF;AACA,IAAA,OAAO,IAAI;GACZ;AAED,EAAA,MAAM,CAACC,GAAG,EAAEC,MAAM,CAAC,GAAGC,cAAQ,CAAC,MAAMT,cAAc,CAAC,KAAK,CAAC,CAAC;AAC3D,EAAA,MAAM,CAACU,UAAU,EAAEC,aAAa,CAAC,GAAGF,cAAQ,CAACF,GAAG,EAAEK,QAAQ,EAAE,CAAC;AAC7D,EAAA,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGL,cAAQ,CAAC,MAAMT,cAAc,CAAC,OAAO,CAAC,CAAC;AACjE,EAAA,MAAM,CAACe,IAAI,EAAEC,OAAO,CAAC,GAAGP,cAAQ,CAAC,MAAMT,cAAc,CAAC,MAAM,CAAC,CAAC;AAC9D,EAAA,MAAM,CAACiB,WAAW,EAAEC,cAAc,CAAC,GAAGT,cAAQ,CAACM,IAAI,EAAEH,QAAQ,EAAE,CAAC;EAChE,MAAM,CAACO,oBAAoB,EAAEC,uBAAuB,CAAC,GAAGX,cAAQ,CAC9Db,aAAa,CACd;AACD,EAAA,MAAMyB,UAAU,GAAGC,2BAAa,CAAC7B,MAAM,EAAEjB,aAAW,CAAC;AAErDL,EAAAA,QAAQ,KAAKuB,aAAa,CAAC6B,0BAAQ,CAACpD,QAAQ,CAAC;AAC7CE,EAAAA,UAAU,KAAKqB,aAAa,CAAC6B,0BAAQ,CAAClD,UAAU,CAAC;AACjDC,EAAAA,SAAS,KAAKoB,aAAa,CAAC6B,0BAAQ,CAACjD,SAAS,CAAC;AAC/CW,EAAAA,YAAY,GAAG;IACbsB,GAAG,EAAEtB,YAAY,EAAEsB,GAAG,IAAIb,aAAa,CAAC6B,0BAAQ,CAACC,cAAc,CAAC;IAChEX,KAAK,EAAE5B,YAAY,EAAE4B,KAAK,IAAInB,aAAa,CAAC6B,0BAAQ,CAAClD,UAAU,CAAC;IAChE0C,IAAI,EAAE9B,YAAY,EAAE8B,IAAI,IAAIrB,aAAa,CAAC6B,0BAAQ,CAACE,eAAe;GACnE;EAED,MAAMC,eAAe,GAAIC,IAAU,IAAI;AACrC,IAAA,IAAI,CAAC9B,uBAAW,CAAC8B,IAAI,CAAC,EAAE;AACtB,MAAA,OAAO,EAAE;AACX;AACA,IAAA,QAAQhD,IAAI;MACV,KAAKC,iBAAQ,CAACgD,UAAU;QACtB,OAAO,CAACD,IAAI,CAACvB,WAAW,EAAE,EAAE,CAAIuB,CAAAA,EAAAA,IAAI,CAACtB,QAAQ,EAAE,GAAG,CAAC,CAAE,CAAA,CAACwB,KAAK,CAAC,EAAE,CAAC,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC;MAC5E,KAAKlD,iBAAQ,CAACC,cAAc;AAC5B,MAAA;AACE,QAAA,OAAO,CACL8C,IAAI,CAACvB,WAAW,EAAE,EAClB,CAAIuB,CAAAA,EAAAA,IAAI,CAACtB,QAAQ,EAAE,GAAG,CAAC,CAAE,CAAA,CAACwB,KAAK,CAAC,EAAE,CAAC,EACnC,CAAIF,CAAAA,EAAAA,IAAI,CAACrB,OAAO,EAAE,CAAE,CAAA,CAACuB,KAAK,CAAC,EAAE,CAAC,CAC/B,CAACC,IAAI,CAAC,GAAG,CAAC;AACf;GACD;EAED,MAAMC,gBAAgB,GAAGA,MAAK;AAC5B,IAAA,oBACEC,eAAA,CAAA,OAAA,EAAA;AAAOC,MAAAA,SAAS,EAAC,oBAAoB;MAAAC,QAAA,EAAA,cACnCC,cAAA,CAACC,YAAI,EAAA;QAACC,IAAI,EAAEC,qBAAU,CAACC,YAAa;AAAAL,QAAAA,QAAA,EAAE7D;AAAU,OAAO,CACvD,eAAA8D,cAAA,CAACK,uBAAW,EAAA;QACVtD,EAAE,EAAE,CAAGA,EAAAA,EAAE,CAAS,MAAA,CAAA;AAClBuD,QAAAA,IAAI,EAAC,OAAO;AACZ3E,QAAAA,QAAQ,EAAEA,QAAS;QACnB4E,WAAW,EAAEzD,YAAY,EAAE4B,KAAM;AACjC8B,QAAAA,KAAK,EAAEC,KAAK,CAACC,IAAI,CAAC;AAAEC,UAAAA,MAAM,EAAE;AAAE,SAAE,EAAE,CAACC,CAAC,EAAEC,KAAK,MAAM;AAAEX,UAAAA,IAAI,EAAE,QAAQ;AAAEnE,UAAAA,KAAK,EAAE8E;SAAO,CAAC,CAAE;AACpFjF,QAAAA,IAAI,EAAEA,MAAK;AACXG,QAAAA,KAAK,EAAE2C,KAAM;AACboC,QAAAA,WAAW,EAAGC,aAAa,iBACzBf,cAAA,CAACgB,oCAAwB,EAAA;UAACC,KAAK,EAAE/B,UAAU,CAAC6B,aAAa;AAAE,SAAG,CAC9D;AACFpE,QAAAA,QAAQ,EAAGoE,aAAa,IAAKG,iBAAiB,CAACH,aAAa,CAAE;QAAA,GAC1D9D;AAAW,OAEnB,CAAA;AAAA,KAAO,CAAC;GAEX;EAED,MAAMkE,UAAU,GAAGA,CAACC,MAAc,EAAEC,QAAgB,EAAEC,OAAe,KAAI;AACvE,IAAA,MAAMC,MAAM,GAAG,IAAIC,IAAI,CAACF,OAAO,EAAED,QAAQ,GAAG,CAAC,EAAE,CAAC,CAAC,CAAClD,OAAO,EAAE;IAC3D,OAAOiD,MAAM,IAAIG,MAAM;GACxB;AAED,EAAA,MAAME,mBAAmB,GAAGA,CAACL,MAAM,GAAGhD,GAAG,EAAEiD,QAAQ,GAAG3C,KAAK,EAAE4C,OAAO,GAAG1C,IAAI,KAAI;AAC7E,IAAA,IAAIwC,MAAM,IAAI,IAAI,IAAIA,MAAM,KAAK,CAAC,IAAIC,QAAQ,IAAI,IAAI,IAAIC,OAAO,IAAI,IAAI,IAAIA,OAAO,KAAK,CAAC,EAAE;MAC1FI,iBAAiB,CAAC,IAAI,CAAC;AACvB,MAAA;AACF;IACA,IAAI,CAACP,UAAU,CAACC,MAAM,EAAEC,QAAQ,EAAEC,OAAO,CAAC,EAAE;MAC1CI,iBAAiB,CAAC,IAAI,CAAC;AACvB,MAAA;AACF;IAEA,MAAMC,SAAS,GAAG,IAAIH,IAAI,CAACF,OAAO,EAAED,QAAQ,EAAED,MAAM,CAAC;IACrD,IAAIE,OAAO,GAAG,GAAG,EAAE;AACjBK,MAAAA,SAAS,CAACC,WAAW,CAACN,OAAO,CAAC;AAChC;AAEA,IAAA,IAAI,CAAC5D,uBAAW,CAACiE,SAAS,CAAC,EAAE;MAC3BD,iBAAiB,CAAC,IAAI,CAAC;AACvB,MAAA;AACF;AAEA,IAAA,IAAIlF,IAAI,KAAKC,iBAAQ,CAACgD,UAAU,EAAE;AAChC,MAAA,IAAI4B,QAAQ,KAAK3C,KAAK,IAAI4C,OAAO,KAAK1C,IAAI,EAAE;QAC1C8C,iBAAiB,CAACC,SAAS,CAAC;AAC9B;AACF,KAAC,MAAM,IAAIP,MAAM,KAAKhD,GAAG,IAAIiD,QAAQ,KAAK3C,KAAK,IAAI4C,OAAO,KAAK1C,IAAI,EAAE;MACnE8C,iBAAiB,CAACC,SAAS,CAAC;AAC9B;GACD;EAED,MAAME,eAAe,GAAIC,KAA0C,IAAI;AACrE,IAAA,MAAMC,YAAY,GAAGD,KAAK,CAACE,MAAM,CAACjG,KAAK,CAACkG,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;IAC1D,MAAMC,YAAY,GAAGC,MAAM,CAACC,QAAQ,CAACL,YAAY,EAAE,EAAE,CAAC;IAEtD1D,MAAM,CAAC6D,YAAY,CAAC;IACpB1D,aAAa,CAACuD,YAAY,CAAC;AAC3BN,IAAAA,mBAAmB,CAACS,YAAY,EAAExD,KAAK,EAAEE,IAAI,CAAC;GAC/C;EAED,MAAMsC,iBAAiB,GAAImB,aAA4B,IAAI;IACzD,IAAIA,aAAa,KAAK,IAAI,EAAE;MAC1B1D,QAAQ,CAAC,IAAI,CAAC;AACd8C,MAAAA,mBAAmB,CAACrD,GAAG,EAAE,IAAI,EAAEQ,IAAI,CAAC;AACpC,MAAA;AACF;IACAD,QAAQ,CAAC0D,aAAa,CAAC;AACvBZ,IAAAA,mBAAmB,CAACrD,GAAG,EAAEiE,aAAa,EAAEzD,IAAI,CAAC;GAC9C;EAED,MAAM0D,gBAAgB,GAAIR,KAA0C,IAAI;AACtE,IAAA,MAAMS,aAAa,GAAGT,KAAK,CAACE,MAAM,CAACjG,KAAK,CAACkG,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;IAC3D,MAAMO,aAAa,GAAGL,MAAM,CAACC,QAAQ,CAACG,aAAa,EAAE,EAAE,CAAC;IAExD,IAAIA,aAAa,CAAC5B,MAAM,IAAI,CAAC,IAAI4B,aAAa,CAAC5B,MAAM,IAAI,CAAC,EAAE;MAC1D9B,OAAO,CAAC2D,aAAa,CAAC;MACtBzD,cAAc,CAACwD,aAAa,CAAC;AAC7Bd,MAAAA,mBAAmB,CAACrD,GAAG,EAAEM,KAAK,EAAE8D,aAAa,CAAC;AAChD,KAAC,MAAM;MACL3D,OAAO,CAAC,IAAI,CAAC;MACbE,cAAc,CAACwD,aAAa,CAAC;AAC7Bd,MAAAA,mBAAmB,CAACrD,GAAG,EAAEM,KAAK,EAAE,IAAI,CAAC;AACvC;GACD;EAED,MAAMgD,iBAAiB,GAAIe,QAAqB,IAAI;IAClD,IAAIA,QAAQ,KAAKzD,oBAAoB,EAAE;MACrCC,uBAAuB,CAACwD,QAAQ,CAAC;MACjC9F,QAAQ,CAAC8F,QAAQ,IAAI,IAAI,GAAGlD,eAAe,CAACkD,QAAQ,CAAC,GAAG,IAAI,CAAC;AAC/D;GACD;AAED,EAAA,MAAMC,aAAa,GAAGlG,IAAI,KAAKC,iBAAQ,CAACgD,UAAU;EAElD,MAAMkD,UAAU,GAAGC,SAAI,CAAC;AACtB,IAAA,yBAAyB,EAAEF,aAAa;AACxC,IAAA,yBAAyB,EAAE,CAACA;AAC7B,GAAA,CAAC;EAEF,MAAMxE,QAAQ,GAAGA,MAAK;AACpB,IAAA,oBAAO8B,cAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAE6C,UAAW;MAAA5C,QAAA,EAAEH,gBAAgB;AAAE,KAAM,CAAC;GAC9D;EAED,MAAMiD,MAAM,GAAGA,MAAK;AAClB,IAAA,oBACE7C,cAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,uBAAuB;AAAAC,MAAAA,QAAA,eACpCF,eAAA,CAAA,OAAA,EAAA;QAAAE,QAAA,EAAA,cACEC,cAAA,CAACC,YAAI,EAAA;UAACC,IAAI,EAAEC,qBAAU,CAACC,YAAa;AAAAL,UAAAA,QAAA,EAAE/D;SAAe,CACrD,eAAAgE,cAAA,CAAA,KAAA,EAAA;UAAKF,SAAS,EAAE,CAA2BlE,wBAAAA,EAAAA,MAAI,CAAG,CAAA;UAAAmE,QAAA,eAChDC,cAAA,CAAC8C,WAAK,EAAA;YACJ/F,EAAE,EAAE,CAAGA,EAAAA,EAAE,CAAO,IAAA,CAAA;AAChBmD,YAAAA,IAAI,EAAC,MAAM;AACX6C,YAAAA,SAAS,EAAC,SAAS;AACnBC,YAAAA,OAAO,EAAC,QAAQ;AAChB1C,YAAAA,IAAI,EAAC,KAAK;AACV2C,YAAAA,YAAY,EAAEhH,eAAgB;YAC9BF,KAAK,EAAEwC,UAAU,IAAI,EAAG;YACxBgC,WAAW,EAAEzD,YAAY,EAAEsB,GAAI;AAC/BzC,YAAAA,QAAQ,EAAEA,QAAS;AACnBuH,YAAAA,GAAG,EAAE,CAAE;AACPC,YAAAA,GAAG,EAAE,EAAG;AACRC,YAAAA,SAAS,EAAE,CAAE;AACbzG,YAAAA,QAAQ,EAAGmF,KAAK,IAAKD,eAAe,CAACC,KAAK;WAE9C;AAAA,SAAK,CACP;OAAO;AACT,KAAK,CAAC;GAET;EAED,MAAMuB,OAAO,GAAGA,MAAK;AACnB,IAAA,oBACErD,cAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,wBAAwB;AAAAC,MAAAA,QAAA,eACrCF,eAAA,CAAA,OAAA,EAAA;QAAAE,QAAA,EAAA,cACEC,cAAA,CAACC,YAAI,EAAA;UAACC,IAAI,EAAEC,qBAAU,CAACC,YAAa;AAAAL,UAAAA,QAAA,EAAE5D;SAAgB,CACtD,eAAA6D,cAAA,CAAA,KAAA,EAAA;UAAKF,SAAS,EAAE,CAA2BlE,wBAAAA,EAAAA,MAAI,CAAG,CAAA;UAAAmE,QAAA,eAChDC,cAAA,CAAC8C,WAAK,EAAA;YACJ/F,EAAE,EAAE,CAAGA,EAAAA,EAAE,CAAQ,KAAA,CAAA;AACjBmD,YAAAA,IAAI,EAAC,MAAM;AACX6C,YAAAA,SAAS,EAAC,SAAS;AACnBC,YAAAA,OAAO,EAAC,QAAQ;AAChB1C,YAAAA,IAAI,EAAC,MAAM;AACX2C,YAAAA,YAAY,EAAE7G,gBAAiB;YAC/BmE,WAAW,EAAEzD,YAAY,EAAE8B,IAAK;YAChC7C,KAAK,EAAE+C,WAAW,IAAI,EAAG;AACzBnD,YAAAA,QAAQ,EAAEA,QAAS;AACnBuH,YAAAA,GAAG,EAAE,CAAE;AACPC,YAAAA,GAAG,EAAE,IAAK;AACVC,YAAAA,SAAS,EAAE,CAAE;AACbzG,YAAAA,QAAQ,EAAGmF,KAAK,IAAKQ,gBAAgB,CAACR,KAAK;WAE/C;AAAA,SAAK,CACP;OAAO;AACT,KAAK,CAAC;GAET;AACD,EAAA,MAAMwB,cAAc,GAAGC,sBAAG,CAACC,GAAG,CAAClG,MAAM,CAAC;AACtC,EAAA,MAAMmG,SAAS,GAAGC,sBAAG,CAACF,GAAG,CAAClG,MAAM,CAAC;AAEjC,EAAA,oBACE0C,cAAA,CAAA,KAAA,EAAA;AACEF,IAAAA,SAAS,EAAC,SAAS;AAAA,IAAA,GACf5C,eAAe;AACnBH,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,iBAAA,EAAiBM,cAAe;AAChC,IAAA,YAAA,EAAY3B,SAAU;IACtBiI,IAAI,EAAC,OAAO;AAAC;AACb/G,IAAAA,OAAO,EAAGkF,KAAK,IACb8B,sBAAsB,CAAC9B,KAAK,CAAC,GAAGlF,OAAO,IAAIA,OAAO,CAACkF,KAAK,CAAC,GAAGA,KAAK,CAAC+B,eAAe,EAClF;AACDhH,IAAAA,MAAM,EAAGiF,KAAK,IACZgC,qBAAqB,CAAChC,KAAK,CAAC,GAAGjF,MAAM,IAAIA,MAAM,CAACiF,KAAK,CAAC,GAAGA,KAAK,CAAC+B,eAAe,EAC/E;AAAA9D,IAAAA,QAAA,eAEDC,cAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,KAAK;MAAAC,QAAA,EACjB,CAAC,MAAK;AACL,QAAA,IAAI2C,aAAa,EAAE;UACjB,oBACE7C,eAAA,CAAAkE,mBAAA,EAAA;AAAAhE,YAAAA,QAAA,GACG,CAAC0D,SAAS,IAAIvF,QAAQ,EAAE,EACxBmF,OAAO,EAAE,EACTI,SAAS,IAAIvF,QAAQ,EAAE;AAAA,WAC1B,CAAG;AAEP;AACA,QAAA,IAAIoF,cAAc,EAAE;UAClB,oBACEzD,eAAA,CAAAkE,mBAAA,EAAA;YAAAhE,QAAA,EAAA,CACG7B,QAAQ,EAAE,EACV2E,MAAM,EAAE,EACRQ,OAAO,EAAE;AAAA,WACZ,CAAG;AAEP;AACA,QAAA,IAAII,SAAS,EAAE;UACb,oBACE5D,eAAA,CAAAkE,mBAAA,EAAA;YAAAhE,QAAA,EAAA,CACGsD,OAAO,EAAE,EACTnF,QAAQ,EAAE,EACV2E,MAAM,EAAE;AAAA,WACX,CAAG;AAEP;QACA,oBACEhD,eAAA,CAAAkE,mBAAA,EAAA;UAAAhE,QAAA,EAAA,CACG8C,MAAM,EAAE,EACR3E,QAAQ,EAAE,EACVmF,OAAO,EAAE;AAAA,SACZ,CAAG;AAEP,OAAC;KACE;AACP,GAAK,CAAC;AAEV;AAEA;AACA,SAASO,sBAAsBA,CAAC;EAC9B5B,MAAM;AACNgC,EAAAA;AACmD,CAAA,EAAA;AACnD,EAAA,MAAMC,YAAY,GAAGjC,MAAM,CAACkC,OAAO,CAAC,UAAU,CAAC;EAC/C,MAAMC,aAAa,GAAGH,aAAa,IAAIA,aAAa,CAACE,OAAO,CAAC,UAAU,CAAC;EACxE,OAAOD,YAAY,KAAKE,aAAa;AACvC;AAEA;AACA,SAASL,qBAAqBA,CAAC;EAC7B9B,MAAM;AACNgC,EAAAA;AACmD,CAAA,EAAA;AACnD,EAAA,MAAMI,iBAAiB,GAAGpC,MAAM,CAACkC,OAAO,CAAC,UAAU,CAAC;AACpD;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,MAAMG,YAAY,GAChBL,aAAa,KAAKM,QAAQ,CAACC,aAAa,KAAKvC,MAAM,GAAGsC,QAAQ,CAACC,aAAa,GAAG,IAAI,CAAC;EACtF,MAAMC,kBAAkB,GAAGH,YAAY,IAAIA,YAAY,CAACH,OAAO,CAAC,UAAU,CAAC;EAC3E,OAAOE,iBAAiB,KAAKI,kBAAkB;AACjD;;;;"}

package/build/dateInput/DateInput.mjs

@@ -211,8 +211,8 @@ const DateInput = ({
   };
   const monthYearOnly = mode === DateMode.MONTH_YEAR;
   const monthWidth = clsx({
-    'col-sm-8': monthYearOnly,
-    'col-sm-5': !monthYearOnly
+    'col-sm-8 tw-date--month': monthYearOnly,
+    'col-sm-5 tw-date--month': !monthYearOnly
   });
   const getMonth = () => {
     return /*#__PURE__*/jsx("div", {
@@ -222,7 +222,7 @@ const DateInput = ({
   };
   const getDay = () => {
     return /*#__PURE__*/jsx("div", {
-      className: "col-sm-3",
+      className: "col-sm-3 tw-date--day",
       children: /*#__PURE__*/jsxs("label", {
         children: [/*#__PURE__*/jsx(Body, {
           type: Typography.BODY_DEFAULT,
@@ -250,7 +250,7 @@ const DateInput = ({
   };
   const getYear = () => {
     return /*#__PURE__*/jsx("div", {
-      className: "col-sm-4",
+      className: "col-sm-4 tw-date--year",
       children: /*#__PURE__*/jsxs("label", {
         children: [/*#__PURE__*/jsx(Body, {
           type: Typography.BODY_DEFAULT,