@pega/cosmos-react-core 8.1.0 → 8.2.0

package/lib/components/Dialog/Dialog.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,kBAAkB,yGAAe,CAAC;AAE/C,eAAO,MAAM,kBAAkB,yGAAe,CAAC;AAE/C,eAAO,MAAM,mBAAmB,yGAkB9B,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAAe,CAAC;AAE/C,eAAO,MAAM,YAAY,oQAkBvB,CAAC"}
+{"version":3,"file":"Dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,kBAAkB,yGAAe,CAAC;AAE/C,eAAO,MAAM,kBAAkB,yGAAe,CAAC;AAE/C,eAAO,MAAM,mBAAmB,yGAkB9B,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAAe,CAAC;AAE/C,eAAO,MAAM,YAAY,oQAuBvB,CAAC"}

package/lib/components/Dialog/Dialog.styles.js

@@ -41,6 +41,11 @@ export const StyledDialog = styled(Popover)(({ theme }) => {
         overflow: hidden;
       }
     }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: ${theme.base.shadow.focus};
+    }
   `;
 });
 StyledDialog.defaultProps = defaultThemeProp;

package/lib/components/Dialog/Dialog.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.styles.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,OAAO,MAAM,YAAY,CAAC;AAEjC,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE/C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE/C,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1D,OAAO,GAAG,CAAA;;;;;;wBAMY,KAAK,CAAC,IAAI,CAAC,OAAO;;;MAGpC,kBAAkB;wCACgB,KAAK,CAAC,IAAI,CAAC,OAAO;;;;sCAIpB,KAAK,CAAC,IAAI,CAAC,OAAO;;GAErD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE/C,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACxD,OAAO,GAAG,CAAA;;;qBAGS,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;qBAC9B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;;;;;;;;QAQ3C,mBAAmB;;;;GAIxB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport Popover from '../Popover';\n\nexport const StyledChildrenWrap = styled.div``;\n\nexport const StyledDialogHeader = styled.div``;\n\nexport const StyledDialogContent = styled.div(({ theme }) => {\n  return css`\n    position: relative;\n    @media (height >= 31.25rem) {\n      overflow-y: auto;\n      min-height: 4rem;\n    }\n    padding: calc(2 * ${theme.base.spacing});\n\n    /* Small amount of block padding accounts for focus ring clipping within overflow auto. */\n    ${StyledDialogHeader} + & {\n      padding-block-start: calc(0.5 * ${theme.base.spacing});\n    }\n\n    &:not(:last-child) {\n      padding-block-end: calc(0.5 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledDialogContent.defaultProps = defaultThemeProp;\n\nexport const StyledDialogFooter = styled.div``;\n\nexport const StyledDialog = styled(Popover)(({ theme }) => {\n  return css`\n    display: flex;\n    flex-direction: column;\n    min-width: min(${theme.base['content-width'].sm}, calc(100vw - 2rem));\n    max-width: min(${theme.base['content-width'].lg}, calc(100vw - 2rem));\n    max-height: calc(100vh - 2rem);\n\n    @media (height < 31.25rem) {\n      overflow-y: auto;\n    }\n\n    &[aria-busy='true'] {\n      ${StyledDialogContent} {\n        overflow: hidden;\n      }\n    }\n  `;\n});\n\nStyledDialog.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Dialog.styles.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,OAAO,MAAM,YAAY,CAAC;AAEjC,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE/C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE/C,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1D,OAAO,GAAG,CAAA;;;;;;wBAMY,KAAK,CAAC,IAAI,CAAC,OAAO;;;MAGpC,kBAAkB;wCACgB,KAAK,CAAC,IAAI,CAAC,OAAO;;;;sCAIpB,KAAK,CAAC,IAAI,CAAC,OAAO;;GAErD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE/C,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACxD,OAAO,GAAG,CAAA;;;qBAGS,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;qBAC9B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;;;;;;;;QAQ3C,mBAAmB;;;;;;;oBAOP,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;GAExC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport Popover from '../Popover';\n\nexport const StyledChildrenWrap = styled.div``;\n\nexport const StyledDialogHeader = styled.div``;\n\nexport const StyledDialogContent = styled.div(({ theme }) => {\n  return css`\n    position: relative;\n    @media (height >= 31.25rem) {\n      overflow-y: auto;\n      min-height: 4rem;\n    }\n    padding: calc(2 * ${theme.base.spacing});\n\n    /* Small amount of block padding accounts for focus ring clipping within overflow auto. */\n    ${StyledDialogHeader} + & {\n      padding-block-start: calc(0.5 * ${theme.base.spacing});\n    }\n\n    &:not(:last-child) {\n      padding-block-end: calc(0.5 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledDialogContent.defaultProps = defaultThemeProp;\n\nexport const StyledDialogFooter = styled.div``;\n\nexport const StyledDialog = styled(Popover)(({ theme }) => {\n  return css`\n    display: flex;\n    flex-direction: column;\n    min-width: min(${theme.base['content-width'].sm}, calc(100vw - 2rem));\n    max-width: min(${theme.base['content-width'].lg}, calc(100vw - 2rem));\n    max-height: calc(100vh - 2rem);\n\n    @media (height < 31.25rem) {\n      overflow-y: auto;\n    }\n\n    &[aria-busy='true'] {\n      ${StyledDialogContent} {\n        overflow: hidden;\n      }\n    }\n\n    &:focus-visible {\n      outline: none;\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\n\nStyledDialog.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Dialog/FormDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/FormDialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAiB7C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,eAAO,MAAM,gBAAgB,gPAAmB,CAAC;AAEjD,QAAA,MAAM,UAAU,6HA+Jf,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"FormDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/FormDialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAiB7C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,eAAO,MAAM,gBAAgB,gPAAmB,CAAC;AAEjD,QAAA,MAAM,UAAU,6HAuJf,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/Dialog/FormDialog.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef, useEffect, useLayoutEffect } from 'react';
+import { forwardRef, useEffect, useLayoutEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { useConsolidatedRef, useEscape, useI18n, useOuterEvent, useUID } from '../../hooks';
-import { getActiveElement, getFocusables } from '../../utils';
+import { focusNonInteractiveElement, getActiveElement } from '../../utils';
 import Button from '../Button';
 import Text from '../Text';
 import Progress from '../Progress';
@@ -14,18 +14,16 @@ const FormDialog = forwardRef(function FormDialog({ arrow = true, target, headin
     const t = useI18n();
     const headingId = useUID();
     const dialogRef = useConsolidatedRef(ref);
-    const dialogContentRef = useRef(null);
-    const cancelButtonRef = useRef(null);
+    const headingRef = useRef(null);
     const setFocus = () => {
-        if (progress)
+        if (progress || !dialogRef.current)
             return;
-        const focusables = getFocusables(dialogRef);
-        const focusable = focusables.find(el => {
-            return dialogContentRef.current?.contains(el);
-        }) ??
-            cancelButtonRef.current ??
-            focusables[0];
-        focusable?.focus();
+        if (headingRef.current) {
+            focusNonInteractiveElement(headingRef.current, heading ?? ariaLabel);
+        }
+        else if (dialogRef.current) {
+            focusNonInteractiveElement(dialogRef.current, heading ?? ariaLabel);
+        }
     };
     const onCancelHandler = typeof onCancel === 'function' ? onCancel : onCancel.handler;
     useEscape(e => {
@@ -78,9 +76,9 @@ const FormDialog = forwardRef(function FormDialog({ arrow = true, target, headin
     }, []);
     return (_jsxs(StyledFormDialog, { ...restProps, ...(heading === undefined
             ? { 'aria-label': ariaLabel }
-            : { 'aria-labelledby': headingId }), arrow: arrow, target: target, progress: progress, ref: dialogRef, children: [heading !== undefined && (_jsx(Flex, { container: { alignItems: 'center', justify: 'between', pad: 2 }, item: { shrink: 0 }, as: StyledDialogHeader, children: _jsx(Text, { id: headingId, variant: 'h2', children: heading }) })), _jsxs(Flex, { item: { grow: 1 }, as: StyledDialogContent, ref: dialogContentRef, children: [children && (_jsx(StyledChildrenWrap, { inert: progress ? '' : undefined, children: children })), _jsx(Progress, { visible: !!progress, focusOnVisible: true, placement: 'local', message: typeof progress === 'string' ? progress : undefined })] }), _jsxs(Flex, { container: { alignItems: 'center', justify: 'between', pad: 2 }, item: { shrink: 0 }, as: StyledDialogFooter, children: [_jsx(Button, { onClick: () => {
+            : { 'aria-labelledby': headingId }), arrow: arrow, target: target, progress: progress, ref: dialogRef, children: [heading !== undefined && (_jsx(Flex, { container: { alignItems: 'center', justify: 'between', pad: 2 }, item: { shrink: 0 }, as: StyledDialogHeader, children: _jsx(Text, { ref: headingRef, id: headingId, variant: 'h2', children: heading }) })), _jsxs(Flex, { item: { grow: 1 }, as: StyledDialogContent, children: [children && (_jsx(StyledChildrenWrap, { inert: progress ? '' : undefined, children: children })), _jsx(Progress, { visible: !!progress, focusOnVisible: true, placement: 'local', message: typeof progress === 'string' ? progress : undefined })] }), _jsxs(Flex, { container: { alignItems: 'center', justify: 'between', pad: 2 }, item: { shrink: 0 }, as: StyledDialogFooter, children: [_jsx(Button, { onClick: () => {
                             onCancelHandler();
-                        }, disabled: typeof onCancel !== 'function' ? onCancel.disabled : undefined, ref: cancelButtonRef, children: typeof onCancel !== 'function' && onCancel.text ? onCancel.text : t('cancel') }), _jsx(Button, { variant: 'primary', onClick: () => {
+                        }, disabled: typeof onCancel !== 'function' ? onCancel.disabled : undefined, children: typeof onCancel !== 'function' && onCancel.text ? onCancel.text : t('cancel') }), _jsx(Button, { variant: 'primary', onClick: () => {
                             (typeof onSubmit !== 'function' ? onSubmit.handler : onSubmit)();
                         }, disabled: typeof onSubmit !== 'function' ? onSubmit.disabled : undefined, children: typeof onSubmit !== 'function' && onSubmit.text ? onSubmit.text : t('submit') })] })] }));
 });

package/lib/components/Dialog/FormDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/FormDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useEffect, useLayoutEffect } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport { useConsolidatedRef, useEscape, useI18n, useOuterEvent, useUID } from '../../hooks';\nimport { getActiveElement, getFocusables } from '../../utils';\nimport Button from '../Button';\nimport Text from '../Text';\nimport Progress from '../Progress';\nimport type { RefElement } from '../../types';\nimport Flex from '../Flex';\n\nimport {\n  StyledChildrenWrap,\n  StyledDialogContent,\n  StyledDialogFooter,\n  StyledDialogHeader\n} from './Dialog.styles';\nimport type { FormDialogProps } from './Dialog.types';\nimport Dialog from './Dialog';\n\nexport const StyledFormDialog = styled(Dialog)``;\n\nconst FormDialog = forwardRef<RefElement<FormDialogProps>, PropsWithoutRef<FormDialogProps>>(\n  function FormDialog(\n    {\n      arrow = true,\n      target,\n      heading,\n      'aria-label': ariaLabel,\n      children,\n      progress,\n      onDismiss,\n      onCancel,\n      onSubmit,\n      ...restProps\n    },\n    ref\n  ) {\n    const t = useI18n();\n    const headingId = useUID();\n    const dialogRef = useConsolidatedRef(ref);\n    const dialogContentRef = useRef<HTMLDivElement>(null);\n    const cancelButtonRef = useRef<HTMLButtonElement>(null);\n\n    const setFocus = () => {\n      if (progress) return;\n\n      const focusables = getFocusables(dialogRef);\n\n      const focusable =\n        focusables.find(el => {\n          return dialogContentRef.current?.contains(el);\n        }) ??\n        cancelButtonRef.current ??\n        focusables[0];\n\n      focusable?.focus();\n    };\n\n    const onCancelHandler = typeof onCancel === 'function' ? onCancel : onCancel.handler;\n\n    useEscape(\n      e => {\n        if (onDismiss) {\n          onDismiss();\n        } else {\n          onCancelHandler();\n        }\n        e.stopPropagation();\n      },\n      dialogRef,\n      [onDismiss, onCancelHandler]\n    );\n\n    useOuterEvent('mousedown', [target, dialogRef], () => {\n      if (onDismiss) {\n        onDismiss();\n      } else {\n        onCancelHandler();\n      }\n    });\n\n    // Using layout effect to capture the focused element prior to dialog elements taking focus.\n    useLayoutEffect(() => {\n      const initiatorElement = getActiveElement();\n\n      return () => {\n        if (initiatorElement instanceof HTMLElement && initiatorElement.isConnected) {\n          initiatorElement.focus();\n        }\n      };\n    }, []);\n\n    useEffect(() => {\n      if (!progress) {\n        setFocus();\n      }\n    }, [progress]);\n\n    useEffect(() => {\n      const closeDialog = () => {\n        setTimeout(() => {\n          if (onDismiss) {\n            onDismiss();\n          } else {\n            onCancelHandler();\n          }\n          // The 0 timeout ensures that the dialog will not re-open immediately after the close event is triggered.\n        }, 0);\n      };\n\n      target.addEventListener('click', closeDialog);\n\n      return () => {\n        target.removeEventListener('click', closeDialog);\n      };\n    }, []);\n\n    return (\n      <StyledFormDialog\n        {...restProps}\n        {...(heading === undefined\n          ? { 'aria-label': ariaLabel }\n          : { 'aria-labelledby': headingId })}\n        arrow={arrow}\n        target={target}\n        progress={progress}\n        ref={dialogRef}\n      >\n        {heading !== undefined && (\n          <Flex\n            container={{ alignItems: 'center', justify: 'between', pad: 2 }}\n            item={{ shrink: 0 }}\n            as={StyledDialogHeader}\n          >\n            <Text id={headingId} variant='h2'>\n              {heading}\n            </Text>\n          </Flex>\n        )}\n\n        <Flex item={{ grow: 1 }} as={StyledDialogContent} ref={dialogContentRef}>\n          {children && (\n            <StyledChildrenWrap inert={progress ? '' : undefined}>{children}</StyledChildrenWrap>\n          )}\n          <Progress\n            visible={!!progress}\n            focusOnVisible\n            placement='local'\n            message={typeof progress === 'string' ? progress : undefined}\n          />\n        </Flex>\n\n        <Flex\n          container={{ alignItems: 'center', justify: 'between', pad: 2 }}\n          item={{ shrink: 0 }}\n          as={StyledDialogFooter}\n        >\n          <Button\n            onClick={() => {\n              onCancelHandler();\n            }}\n            disabled={typeof onCancel !== 'function' ? onCancel.disabled : undefined}\n            ref={cancelButtonRef}\n          >\n            {typeof onCancel !== 'function' && onCancel.text ? onCancel.text : t('cancel')}\n          </Button>\n\n          <Button\n            variant='primary'\n            onClick={() => {\n              (typeof onSubmit !== 'function' ? onSubmit.handler : onSubmit)();\n            }}\n            disabled={typeof onSubmit !== 'function' ? onSubmit.disabled : undefined}\n          >\n            {typeof onSubmit !== 'function' && onSubmit.text ? onSubmit.text : t('submit')}\n          </Button>\n        </Flex>\n      </StyledFormDialog>\n    );\n  }\n);\n\nexport default FormDialog;\n"]}
+{"version":3,"file":"FormDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/FormDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useLayoutEffect, useRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport { useConsolidatedRef, useEscape, useI18n, useOuterEvent, useUID } from '../../hooks';\nimport { focusNonInteractiveElement, getActiveElement } from '../../utils';\nimport Button from '../Button';\nimport Text from '../Text';\nimport Progress from '../Progress';\nimport type { RefElement } from '../../types';\nimport Flex from '../Flex';\n\nimport {\n  StyledChildrenWrap,\n  StyledDialogContent,\n  StyledDialogFooter,\n  StyledDialogHeader\n} from './Dialog.styles';\nimport type { FormDialogProps } from './Dialog.types';\nimport Dialog from './Dialog';\n\nexport const StyledFormDialog = styled(Dialog)``;\n\nconst FormDialog = forwardRef<RefElement<FormDialogProps>, PropsWithoutRef<FormDialogProps>>(\n  function FormDialog(\n    {\n      arrow = true,\n      target,\n      heading,\n      'aria-label': ariaLabel,\n      children,\n      progress,\n      onDismiss,\n      onCancel,\n      onSubmit,\n      ...restProps\n    },\n    ref\n  ) {\n    const t = useI18n();\n    const headingId = useUID();\n    const dialogRef = useConsolidatedRef(ref);\n    const headingRef = useRef<HTMLHeadingElement>(null);\n\n    const setFocus = () => {\n      if (progress || !dialogRef.current) return;\n      if (headingRef.current) {\n        focusNonInteractiveElement(headingRef.current, heading ?? ariaLabel);\n      } else if (dialogRef.current) {\n        focusNonInteractiveElement(dialogRef.current, heading ?? ariaLabel);\n      }\n    };\n\n    const onCancelHandler = typeof onCancel === 'function' ? onCancel : onCancel.handler;\n\n    useEscape(\n      e => {\n        if (onDismiss) {\n          onDismiss();\n        } else {\n          onCancelHandler();\n        }\n        e.stopPropagation();\n      },\n      dialogRef,\n      [onDismiss, onCancelHandler]\n    );\n\n    useOuterEvent('mousedown', [target, dialogRef], () => {\n      if (onDismiss) {\n        onDismiss();\n      } else {\n        onCancelHandler();\n      }\n    });\n\n    // Using layout effect to capture the focused element prior to dialog elements taking focus.\n    useLayoutEffect(() => {\n      const initiatorElement = getActiveElement();\n\n      return () => {\n        if (initiatorElement instanceof HTMLElement && initiatorElement.isConnected) {\n          initiatorElement.focus();\n        }\n      };\n    }, []);\n\n    useEffect(() => {\n      if (!progress) {\n        setFocus();\n      }\n    }, [progress]);\n\n    useEffect(() => {\n      const closeDialog = () => {\n        setTimeout(() => {\n          if (onDismiss) {\n            onDismiss();\n          } else {\n            onCancelHandler();\n          }\n          // The 0 timeout ensures that the dialog will not re-open immediately after the close event is triggered.\n        }, 0);\n      };\n\n      target.addEventListener('click', closeDialog);\n\n      return () => {\n        target.removeEventListener('click', closeDialog);\n      };\n    }, []);\n\n    return (\n      <StyledFormDialog\n        {...restProps}\n        {...(heading === undefined\n          ? { 'aria-label': ariaLabel }\n          : { 'aria-labelledby': headingId })}\n        arrow={arrow}\n        target={target}\n        progress={progress}\n        ref={dialogRef}\n      >\n        {heading !== undefined && (\n          <Flex\n            container={{ alignItems: 'center', justify: 'between', pad: 2 }}\n            item={{ shrink: 0 }}\n            as={StyledDialogHeader}\n          >\n            <Text ref={headingRef} id={headingId} variant='h2'>\n              {heading}\n            </Text>\n          </Flex>\n        )}\n\n        <Flex item={{ grow: 1 }} as={StyledDialogContent}>\n          {children && (\n            <StyledChildrenWrap inert={progress ? '' : undefined}>{children}</StyledChildrenWrap>\n          )}\n          <Progress\n            visible={!!progress}\n            focusOnVisible\n            placement='local'\n            message={typeof progress === 'string' ? progress : undefined}\n          />\n        </Flex>\n\n        <Flex\n          container={{ alignItems: 'center', justify: 'between', pad: 2 }}\n          item={{ shrink: 0 }}\n          as={StyledDialogFooter}\n        >\n          <Button\n            onClick={() => {\n              onCancelHandler();\n            }}\n            disabled={typeof onCancel !== 'function' ? onCancel.disabled : undefined}\n          >\n            {typeof onCancel !== 'function' && onCancel.text ? onCancel.text : t('cancel')}\n          </Button>\n\n          <Button\n            variant='primary'\n            onClick={() => {\n              (typeof onSubmit !== 'function' ? onSubmit.handler : onSubmit)();\n            }}\n            disabled={typeof onSubmit !== 'function' ? onSubmit.disabled : undefined}\n          >\n            {typeof onSubmit !== 'function' && onSubmit.text ? onSubmit.text : t('submit')}\n          </Button>\n        </Flex>\n      </StyledFormDialog>\n    );\n  }\n);\n\nexport default FormDialog;\n"]}

package/lib/components/Dialog/InfoDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InfoDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/InfoDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,QAAA,MAAM,UAAU,yHAyJf,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"InfoDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/InfoDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,QAAA,MAAM,UAAU,yHA+If,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/Dialog/InfoDialog.js

@@ -1,30 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef, useEffect, useLayoutEffect } from 'react';
+import { forwardRef, useEffect, useLayoutEffect, useRef } from 'react';
 import { useConsolidatedRef, useEscape, useI18n, useOuterEvent, useUID } from '../../hooks';
 import Text from '../Text';
 import Icon from '../Icon';
 import Progress from '../Progress';
 import Flex from '../Flex';
 import SummaryItem from '../SummaryItem';
-import { getActiveElement, getFocusables } from '../../utils';
+import { focusNonInteractiveElement, getActiveElement } from '../../utils';
 import { StyledChildrenWrap, StyledDialogContent, StyledDialogHeader } from './Dialog.styles';
 import { StyledDismissButton, StyledInfoDialog } from './InfoDialog.styles';
 const InfoDialog = forwardRef(function InfoDialog({ target, heading: headingProp, children, progress: progressProp, onDismiss, ...restProps }, ref) {
     const t = useI18n();
     const headingId = useUID();
     const dialogRef = useConsolidatedRef(ref);
-    const dialogContentRef = useRef(null);
-    const closeButtonRef = useRef(null);
+    const headingRef = useRef(null);
+    const headingText = typeof headingProp === 'string' ? headingProp : headingProp?.primary;
     const setFocus = () => {
         if (progressProp)
             return;
-        const focusables = getFocusables(dialogRef);
-        const focusable = focusables.find(el => {
-            return dialogContentRef.current?.contains(el);
-        }) ??
-            closeButtonRef.current ??
-            focusables[0];
-        focusable?.focus();
+        if (headingRef.current) {
+            focusNonInteractiveElement(headingRef.current, headingText);
+        }
+        else if (dialogRef.current) {
+            focusNonInteractiveElement(dialogRef.current, headingText);
+        }
     };
     useEscape(e => {
         onDismiss?.();
@@ -59,14 +58,14 @@ const InfoDialog = forwardRef(function InfoDialog({ target, heading: headingProp
             target.removeEventListener('click', closeDialog);
         };
     }, []);
-    const heading = headingProp ? (_jsx(Text, { id: headingId, variant: 'h2', children: typeof headingProp === 'string' ? headingProp : headingProp.primary })) : null;
+    const heading = headingProp ? (_jsx(Text, { ref: headingRef, id: headingId, variant: 'h2', children: headingText })) : null;
     const progress = (_jsx(Progress, { visible: !!progressProp, focusOnVisible: true, placement: 'local', message: typeof progressProp === 'string' ? progressProp : undefined }));
     const dismissButton = (_jsx(StyledDismissButton, { icon: true, variant: 'simple', onClick: () => {
             onDismiss();
-        }, label: t('close'), ref: closeButtonRef, children: _jsx(Icon, { name: 'times' }) }));
+        }, label: t('close'), children: _jsx(Icon, { name: 'times' }) }));
     return (_jsxs(StyledInfoDialog, { ...restProps, ...(typeof headingProp === 'string'
             ? { 'aria-labelledby': headingId }
-            : { 'aria-label': headingProp?.primary }), arrow: true, target: target, progress: progressProp, ref: dialogRef, children: [headingProp && heading && (_jsxs(Flex, { container: { alignItems: 'center', justify: 'between', pad: 2, gap: 1 }, item: { shrink: 0 }, as: StyledDialogHeader, children: [typeof headingProp === 'string' ? (heading) : (_jsx(SummaryItem, { primary: heading, secondary: headingProp.secondary ? (_jsx(Text, { variant: 'secondary', children: headingProp.secondary })) : undefined, visual: headingProp.visual })), dismissButton] })), (!headingProp || children || progressProp) && (_jsxs(Flex, { container: { direction: 'column' }, item: { grow: 1 }, as: StyledDialogContent, ref: dialogContentRef, children: [!headingProp && dismissButton, children && (_jsx(StyledChildrenWrap, { inert: progressProp ? '' : undefined, children: children })), progress] }))] }));
+            : { 'aria-label': headingProp?.primary }), arrow: true, target: target, progress: progressProp, ref: dialogRef, children: [headingProp && heading && (_jsxs(Flex, { container: { alignItems: 'center', justify: 'between', pad: 2, gap: 1 }, item: { shrink: 0 }, as: StyledDialogHeader, children: [typeof headingProp === 'string' ? (heading) : (_jsx(SummaryItem, { ref: headingRef, primary: heading, secondary: headingProp.secondary ? (_jsx(Text, { variant: 'secondary', children: headingProp.secondary })) : undefined, visual: headingProp.visual })), dismissButton] })), (!headingProp || children || progressProp) && (_jsxs(Flex, { container: { direction: 'column' }, item: { grow: 1 }, as: StyledDialogContent, children: [!headingProp && dismissButton, children && (_jsx(StyledChildrenWrap, { inert: progressProp ? '' : undefined, children: children })), progress] }))] }));
 });
 export default InfoDialog;
 //# sourceMappingURL=InfoDialog.js.map

package/lib/components/Dialog/InfoDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/InfoDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useEffect, useLayoutEffect } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport { useConsolidatedRef, useEscape, useI18n, useOuterEvent, useUID } from '../../hooks';\nimport Text from '../Text';\nimport Icon from '../Icon';\nimport Progress from '../Progress';\nimport Flex from '../Flex';\nimport SummaryItem from '../SummaryItem';\nimport { getActiveElement, getFocusables } from '../../utils';\nimport type { RefElement } from '../../types';\n\nimport { StyledChildrenWrap, StyledDialogContent, StyledDialogHeader } from './Dialog.styles';\nimport type { InfoDialogProps } from './Dialog.types';\nimport { StyledDismissButton, StyledInfoDialog } from './InfoDialog.styles';\n\nconst InfoDialog = forwardRef<RefElement<InfoDialogProps>, PropsWithoutRef<InfoDialogProps>>(\n  function InfoDialog(\n    { target, heading: headingProp, children, progress: progressProp, onDismiss, ...restProps },\n    ref\n  ) {\n    const t = useI18n();\n    const headingId = useUID();\n    const dialogRef = useConsolidatedRef(ref);\n    const dialogContentRef = useRef<HTMLDivElement>(null);\n    const closeButtonRef = useRef<HTMLButtonElement>(null);\n\n    const setFocus = () => {\n      if (progressProp) return;\n\n      const focusables = getFocusables(dialogRef);\n\n      const focusable =\n        focusables.find(el => {\n          return dialogContentRef.current?.contains(el);\n        }) ??\n        closeButtonRef.current ??\n        focusables[0];\n\n      focusable?.focus();\n    };\n\n    useEscape(\n      e => {\n        onDismiss?.();\n        e.stopPropagation();\n      },\n      dialogRef,\n      [onDismiss]\n    );\n\n    useOuterEvent('mousedown', [target, dialogRef], () => {\n      onDismiss?.();\n    });\n\n    // Using layout effect to capture the focused element prior to dialog elements taking focus.\n    useLayoutEffect(() => {\n      const initiatorElement = getActiveElement();\n\n      return () => {\n        if (initiatorElement instanceof HTMLElement && initiatorElement.isConnected) {\n          initiatorElement.focus();\n        }\n      };\n    }, []);\n\n    useEffect(() => {\n      if (!progressProp) {\n        setFocus();\n      }\n    }, [progressProp]);\n\n    useEffect(() => {\n      const closeDialog = () => {\n        setTimeout(() => {\n          onDismiss?.();\n          // The 0 timeout ensures that the dialog will not re-open immediately after the close event is triggered.\n        }, 0);\n      };\n\n      target.addEventListener('click', closeDialog);\n\n      return () => {\n        target.removeEventListener('click', closeDialog);\n      };\n    }, []);\n\n    const heading = headingProp ? (\n      <Text id={headingId} variant='h2'>\n        {typeof headingProp === 'string' ? headingProp : headingProp.primary}\n      </Text>\n    ) : null;\n\n    const progress = (\n      <Progress\n        visible={!!progressProp}\n        focusOnVisible\n        placement='local'\n        message={typeof progressProp === 'string' ? progressProp : undefined}\n      />\n    );\n\n    const dismissButton = (\n      <StyledDismissButton\n        icon\n        variant='simple'\n        onClick={() => {\n          onDismiss();\n        }}\n        label={t('close')}\n        ref={closeButtonRef}\n      >\n        <Icon name='times' />\n      </StyledDismissButton>\n    );\n\n    return (\n      <StyledInfoDialog\n        {...restProps}\n        {...(typeof headingProp === 'string'\n          ? { 'aria-labelledby': headingId }\n          : { 'aria-label': headingProp?.primary })}\n        arrow\n        target={target}\n        progress={progressProp}\n        ref={dialogRef}\n      >\n        {headingProp && heading && (\n          <Flex\n            container={{ alignItems: 'center', justify: 'between', pad: 2, gap: 1 }}\n            item={{ shrink: 0 }}\n            as={StyledDialogHeader}\n          >\n            {typeof headingProp === 'string' ? (\n              heading\n            ) : (\n              <SummaryItem\n                primary={heading}\n                secondary={\n                  headingProp.secondary ? (\n                    <Text variant='secondary'>{headingProp.secondary}</Text>\n                  ) : undefined\n                }\n                visual={headingProp.visual}\n              />\n            )}\n            {dismissButton}\n          </Flex>\n        )}\n\n        {(!headingProp || children || progressProp) && (\n          <Flex\n            container={{ direction: 'column' }}\n            item={{ grow: 1 }}\n            as={StyledDialogContent}\n            ref={dialogContentRef}\n          >\n            {!headingProp && dismissButton}\n            {children && (\n              <StyledChildrenWrap inert={progressProp ? '' : undefined}>\n                {children}\n              </StyledChildrenWrap>\n            )}\n            {progress}\n          </Flex>\n        )}\n      </StyledInfoDialog>\n    );\n  }\n);\n\nexport default InfoDialog;\n"]}
+{"version":3,"file":"InfoDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/InfoDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useLayoutEffect, useRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport { useConsolidatedRef, useEscape, useI18n, useOuterEvent, useUID } from '../../hooks';\nimport Text from '../Text';\nimport Icon from '../Icon';\nimport Progress from '../Progress';\nimport Flex from '../Flex';\nimport SummaryItem from '../SummaryItem';\nimport { focusNonInteractiveElement, getActiveElement } from '../../utils';\nimport type { RefElement } from '../../types';\n\nimport { StyledChildrenWrap, StyledDialogContent, StyledDialogHeader } from './Dialog.styles';\nimport type { InfoDialogProps } from './Dialog.types';\nimport { StyledDismissButton, StyledInfoDialog } from './InfoDialog.styles';\n\nconst InfoDialog = forwardRef<RefElement<InfoDialogProps>, PropsWithoutRef<InfoDialogProps>>(\n  function InfoDialog(\n    { target, heading: headingProp, children, progress: progressProp, onDismiss, ...restProps },\n    ref\n  ) {\n    const t = useI18n();\n    const headingId = useUID();\n    const dialogRef = useConsolidatedRef(ref);\n    const headingRef = useRef<HTMLHeadingElement | HTMLDivElement>(null);\n\n    const headingText = typeof headingProp === 'string' ? headingProp : headingProp?.primary;\n\n    const setFocus = () => {\n      if (progressProp) return;\n      if (headingRef.current) {\n        focusNonInteractiveElement(headingRef.current, headingText);\n      } else if (dialogRef.current) {\n        focusNonInteractiveElement(dialogRef.current, headingText);\n      }\n    };\n\n    useEscape(\n      e => {\n        onDismiss?.();\n        e.stopPropagation();\n      },\n      dialogRef,\n      [onDismiss]\n    );\n\n    useOuterEvent('mousedown', [target, dialogRef], () => {\n      onDismiss?.();\n    });\n\n    // Using layout effect to capture the focused element prior to dialog elements taking focus.\n    useLayoutEffect(() => {\n      const initiatorElement = getActiveElement();\n\n      return () => {\n        if (initiatorElement instanceof HTMLElement && initiatorElement.isConnected) {\n          initiatorElement.focus();\n        }\n      };\n    }, []);\n\n    useEffect(() => {\n      if (!progressProp) {\n        setFocus();\n      }\n    }, [progressProp]);\n\n    useEffect(() => {\n      const closeDialog = () => {\n        setTimeout(() => {\n          onDismiss?.();\n          // The 0 timeout ensures that the dialog will not re-open immediately after the close event is triggered.\n        }, 0);\n      };\n\n      target.addEventListener('click', closeDialog);\n\n      return () => {\n        target.removeEventListener('click', closeDialog);\n      };\n    }, []);\n\n    const heading = headingProp ? (\n      <Text ref={headingRef} id={headingId} variant='h2'>\n        {headingText}\n      </Text>\n    ) : null;\n\n    const progress = (\n      <Progress\n        visible={!!progressProp}\n        focusOnVisible\n        placement='local'\n        message={typeof progressProp === 'string' ? progressProp : undefined}\n      />\n    );\n\n    const dismissButton = (\n      <StyledDismissButton\n        icon\n        variant='simple'\n        onClick={() => {\n          onDismiss();\n        }}\n        label={t('close')}\n      >\n        <Icon name='times' />\n      </StyledDismissButton>\n    );\n\n    return (\n      <StyledInfoDialog\n        {...restProps}\n        {...(typeof headingProp === 'string'\n          ? { 'aria-labelledby': headingId }\n          : { 'aria-label': headingProp?.primary })}\n        arrow\n        target={target}\n        progress={progressProp}\n        ref={dialogRef}\n      >\n        {headingProp && heading && (\n          <Flex\n            container={{ alignItems: 'center', justify: 'between', pad: 2, gap: 1 }}\n            item={{ shrink: 0 }}\n            as={StyledDialogHeader}\n          >\n            {typeof headingProp === 'string' ? (\n              heading\n            ) : (\n              <SummaryItem\n                ref={headingRef}\n                primary={heading}\n                secondary={\n                  headingProp.secondary ? (\n                    <Text variant='secondary'>{headingProp.secondary}</Text>\n                  ) : undefined\n                }\n                visual={headingProp.visual}\n              />\n            )}\n            {dismissButton}\n          </Flex>\n        )}\n\n        {(!headingProp || children || progressProp) && (\n          <Flex container={{ direction: 'column' }} item={{ grow: 1 }} as={StyledDialogContent}>\n            {!headingProp && dismissButton}\n            {children && (\n              <StyledChildrenWrap inert={progressProp ? '' : undefined}>\n                {children}\n              </StyledChildrenWrap>\n            )}\n            {progress}\n          </Flex>\n        )}\n      </StyledInfoDialog>\n    );\n  }\n);\n\nexport default InfoDialog;\n"]}

package/lib/components/Form/Form.d.ts

@@ -3,6 +3,8 @@ import type { BaseFormProps } from '../MultiStepForm/MultiStepForm.types';
 export interface FormProps extends OmitStrict<BaseFormProps, 'content'>, TestIdProp {
     /** The Form content. Recommended composing form elements within a layout template such as Grid or Flex as the only child. */
     children: BaseFormProps['content'];
+    /** Label for the form. */
+    label?: string;
 }
 declare const _default: ForwardRefForwardPropsComponent<FormProps> & {
     getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly []>;

package/lib/components/Form/Form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,+BAA+B,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG3F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAK1E,MAAM,WAAW,SAAU,SAAQ,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,EAAE,UAAU;IACjF,6HAA6H;IAC7H,QAAQ,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;CACpC;;;;AAyCD,wBAAiD"}
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,+BAA+B,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG3F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAK1E,MAAM,WAAW,SAAU,SAAQ,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,EAAE,UAAU;IACjF,6HAA6H;IAC7H,QAAQ,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;;;;AA0CD,wBAAiD"}

package/lib/components/Form/Form.js

@@ -4,13 +4,13 @@ import { useTestIds, useUID } from '../../hooks';
 import MultiStepForm from '../MultiStepForm';
 import { withTestIds } from '../../utils';
 import { getFormTestIds } from './Form.test-ids';
-const Form = forwardRef(function Form({ testId, children, actions, progress, heading, description, banners, ...restProps }, ref) {
+const Form = forwardRef(function Form({ testId, children, actions, progress, heading, label, description, banners, ...restProps }, ref) {
     const stepId = useUID();
     const testIds = useTestIds(testId, getFormTestIds);
     return (_jsx(MultiStepForm, { "data-testid": testIds.root, autoComplete: '_off', ...restProps, heading: heading, steps: [
             {
                 id: stepId,
-                name: '',
+                name: label ?? '',
                 actions,
                 content: children,
                 description,

package/lib/components/Form/Form.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAOjD,MAAM,IAAI,GAA+C,UAAU,CAAC,SAAS,IAAI,CAC/E,EACE,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,OAAO,EACP,WAAW,EACX,OAAO,EACP,GAAG,SAAS,EACe,EAC7B,GAAqB;IAErB,MAAM,MAAM,GAAG,MAAM,EAAE,CAAC;IACxB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAEnD,OAAO,CACL,KAAC,aAAa,mBACC,OAAO,CAAC,IAAI,EACzB,YAAY,EAAC,MAAM,KACf,SAAS,EACb,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,MAAM;gBACV,IAAI,EAAE,EAAE;gBACR,OAAO;gBACP,OAAO,EAAE,QAAQ;gBACjB,WAAW;gBACX,OAAO;aACR;SACF,EACD,aAAa,EAAE,MAAM,EACrB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,GACR,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport type { ForwardRefForwardPropsComponent, OmitStrict, TestIdProp } from '../../types';\nimport { useTestIds, useUID } from '../../hooks';\nimport MultiStepForm from '../MultiStepForm';\nimport type { BaseFormProps } from '../MultiStepForm/MultiStepForm.types';\nimport { withTestIds } from '../../utils';\n\nimport { getFormTestIds } from './Form.test-ids';\n\nexport interface FormProps extends OmitStrict<BaseFormProps, 'content'>, TestIdProp {\n  /** The Form content. Recommended composing form elements within a layout template such as Grid or Flex as the only child. */\n  children: BaseFormProps['content'];\n}\n\nconst Form: ForwardRefForwardPropsComponent<FormProps> = forwardRef(function Form(\n  {\n    testId,\n    children,\n    actions,\n    progress,\n    heading,\n    description,\n    banners,\n    ...restProps\n  }: PropsWithoutRef<FormProps>,\n  ref: FormProps['ref']\n) {\n  const stepId = useUID();\n  const testIds = useTestIds(testId, getFormTestIds);\n\n  return (\n    <MultiStepForm\n      data-testid={testIds.root}\n      autoComplete='_off'\n      {...restProps}\n      heading={heading}\n      steps={[\n        {\n          id: stepId,\n          name: '',\n          actions,\n          content: children,\n          description,\n          banners\n        }\n      ]}\n      currentStepId={stepId}\n      progress={progress}\n      ref={ref}\n    />\n  );\n});\n\nexport default withTestIds(Form, getFormTestIds);\n"]}
+{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AASjD,MAAM,IAAI,GAA+C,UAAU,CAAC,SAAS,IAAI,CAC/E,EACE,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,OAAO,EACP,KAAK,EACL,WAAW,EACX,OAAO,EACP,GAAG,SAAS,EACe,EAC7B,GAAqB;IAErB,MAAM,MAAM,GAAG,MAAM,EAAE,CAAC;IACxB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAEnD,OAAO,CACL,KAAC,aAAa,mBACC,OAAO,CAAC,IAAI,EACzB,YAAY,EAAC,MAAM,KACf,SAAS,EACb,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,MAAM;gBACV,IAAI,EAAE,KAAK,IAAI,EAAE;gBACjB,OAAO;gBACP,OAAO,EAAE,QAAQ;gBACjB,WAAW;gBACX,OAAO;aACR;SACF,EACD,aAAa,EAAE,MAAM,EACrB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,GACR,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport type { ForwardRefForwardPropsComponent, OmitStrict, TestIdProp } from '../../types';\nimport { useTestIds, useUID } from '../../hooks';\nimport MultiStepForm from '../MultiStepForm';\nimport type { BaseFormProps } from '../MultiStepForm/MultiStepForm.types';\nimport { withTestIds } from '../../utils';\n\nimport { getFormTestIds } from './Form.test-ids';\n\nexport interface FormProps extends OmitStrict<BaseFormProps, 'content'>, TestIdProp {\n  /** The Form content. Recommended composing form elements within a layout template such as Grid or Flex as the only child. */\n  children: BaseFormProps['content'];\n  /** Label for the form. */\n  label?: string;\n}\n\nconst Form: ForwardRefForwardPropsComponent<FormProps> = forwardRef(function Form(\n  {\n    testId,\n    children,\n    actions,\n    progress,\n    heading,\n    label,\n    description,\n    banners,\n    ...restProps\n  }: PropsWithoutRef<FormProps>,\n  ref: FormProps['ref']\n) {\n  const stepId = useUID();\n  const testIds = useTestIds(testId, getFormTestIds);\n\n  return (\n    <MultiStepForm\n      data-testid={testIds.root}\n      autoComplete='_off'\n      {...restProps}\n      heading={heading}\n      steps={[\n        {\n          id: stepId,\n          name: label ?? '',\n          actions,\n          content: children,\n          description,\n          banners\n        }\n      ]}\n      currentStepId={stepId}\n      progress={progress}\n      ref={ref}\n    />\n  );\n});\n\nexport default withTestIds(Form, getFormTestIds);\n"]}

package/lib/components/MetaList/MetaList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MetaList.d.ts","sourceRoot":"","sources":["../../../src/components/MetaList/MetaList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAmB,MAAM,OAAO,CAAC;AAK7D,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAC/B,cAAc,EACd,UAAU,EACX,MAAM,aAAa,CAAC;AAMrB,MAAM,WAAW,aAAc,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IAC1E,yDAAyD;IACzD,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc;eAA0B,OAAO;SAU1D,CAAC;AAEH,eAAO,MAAM,kBAAkB;eAA0B,OAAO;SAoB9D,CAAC;;;;AAgDH,wBAAyD"}
+{"version":3,"file":"MetaList.d.ts","sourceRoot":"","sources":["../../../src/components/MetaList/MetaList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAmB,MAAM,OAAO,CAAC;AAK7D,OAAO,KAAK,EACV,SAAS,EACT,+BAA+B,EAC/B,cAAc,EACd,UAAU,EACX,MAAM,aAAa,CAAC;AAMrB,MAAM,WAAW,aAAc,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IAC1E,yDAAyD;IACzD,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc;eAA0B,OAAO;SAc1D,CAAC;AAEH,eAAO,MAAM,kBAAkB;eAA0B,OAAO;SAoB9D,CAAC;;;;AAgDH,wBAAyD"}

package/lib/components/MetaList/MetaList.js

@@ -11,6 +11,10 @@ export const StyledMetaList = styled.ul(({ wrapItems }) => {
     list-style: none;
     overflow: hidden;
 
+    /* Negative margin to account for overflow clipping of focus indicator */
+    padding: 0.3rem;
+    margin: -0.3rem;
+
     ${!wrapItems &&
         css `
       white-space: nowrap;

package/lib/components/MetaList/MetaList.js.map

@@ -1 +1 @@
-{"version":3,"file":"MetaList.js","sourceRoot":"","sources":["../../../src/components/MetaList/MetaList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAO3B,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAczD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAAyB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IAChF,OAAO,GAAG,CAAA;;;;MAIN,CAAC,SAAS;QACZ,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,EAAE,CAAyB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IACpF,OAAO,GAAG,CAAA;;;;MAIN,SAAS;QACT,CAAC,CAAC,GAAG,CAAA;;SAEF;QACH,CAAC,CAAC,GAAG,CAAA;;;;SAIF;;;;;;GAMN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAmD,UAAU,CAAC,SAAS,QAAQ,CAC3F,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,SAAS,EAAkC,EACjF,GAAyB;IAEzB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAEvD,OAAO,CACL,KAAC,IAAI,mBACU,OAAO,CAAC,IAAI,KACrB,SAAS,EACb,EAAE,EAAE,cAAc,EAClB,SAAS,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EAAE,EACrF,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,YAEP,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,CAC9B,IAAI;YACF,CAAC,CAAC;gBACE,KAAC,IAAI,IACH,EAAE,EAAE,kBAAkB,EAEtB,OAAO,EAAC,WAAW,EACnB,SAAS,EAAE,SAAS,YAEnB,IAAI,IAJA,GAAG,CAAC,GAAG,CAAC,EAAE,CAKV;aACR,CAAC,MAAM,CACN,CAAC,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC;gBAClB,CAAC,CAAC;oBACE,KAAC,IAAI,IACH,EAAE,EAAE,kBAAkB,uBAGtB,OAAO,EAAC,WAAW,wBADd,GAAG,CAAC,GAAG,CAAC,MAAM,CAId;iBACR;gBACH,CAAC,CAAC,EAAE,CACP;YACH,CAAC,CAAC,EAAE,CACP,GACI,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { ReactNode, Ref, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Flex from '../Flex';\nimport type {\n  BaseProps,\n  ForwardRefForwardPropsComponent,\n  NoChildrenProp,\n  TestIdProp\n} from '../../types';\nimport { useTestIds } from '../../hooks';\nimport { withTestIds } from '../../utils';\n\nimport { getMetaListTestIds } from './MetaList.test-ids';\n\nexport interface MetaListProps extends BaseProps, NoChildrenProp, TestIdProp {\n  /** Array of nodes or text to be rendered in the list. */\n  items: ReactNode[];\n  /**\n   * If true, MetaList items that extend past the MetaList's container will wrap to a new line.\n   * @default true\n   */\n  wrapItems?: boolean;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLUListElement>;\n}\n\nexport const StyledMetaList = styled.ul<{ wrapItems: boolean }>(({ wrapItems }) => {\n  return css`\n    list-style: none;\n    overflow: hidden;\n\n    ${!wrapItems &&\n    css`\n      white-space: nowrap;\n    `}\n  `;\n});\n\nexport const StyledMetaListItem = styled.li<{ wrapItems: boolean }>(({ wrapItems }) => {\n  return css`\n    min-width: 0;\n    display: inline-block;\n\n    ${wrapItems\n      ? css`\n          overflow-wrap: break-word;\n        `\n      : css`\n          white-space: nowrap;\n          text-overflow: ellipsis;\n          overflow: hidden;\n        `}\n\n    &[role='separator'] {\n      -webkit-user-select: none;\n      user-select: none;\n    }\n  `;\n});\n\nconst MetaList: ForwardRefForwardPropsComponent<MetaListProps> = forwardRef(function MetaList(\n  { testId, items, wrapItems = true, ...restProps }: PropsWithoutRef<MetaListProps>,\n  ref: MetaListProps['ref']\n) {\n  const testIds = useTestIds(testId, getMetaListTestIds);\n\n  return (\n    <Flex\n      data-testid={testIds.root}\n      {...restProps}\n      as={StyledMetaList}\n      container={{ colGap: 0.5, alignItems: 'center', wrap: wrapItems ? 'wrap' : 'nowrap' }}\n      wrapItems={wrapItems}\n      ref={ref}\n    >\n      {items.flatMap((item, i, arr) =>\n        item\n          ? [\n              <Text\n                as={StyledMetaListItem}\n                key={`${i + 0}`}\n                variant='secondary'\n                wrapItems={wrapItems}\n              >\n                {item}\n              </Text>\n            ].concat(\n              i !== arr.length - 1\n                ? [\n                    <Text\n                      as={StyledMetaListItem}\n                      aria-hidden\n                      key={`${i + 0}-sep`}\n                      variant='secondary'\n                    >\n                      •\n                    </Text>\n                  ]\n                : []\n            )\n          : []\n      )}\n    </Flex>\n  );\n});\n\nexport default withTestIds(MetaList, getMetaListTestIds);\n"]}
+{"version":3,"file":"MetaList.js","sourceRoot":"","sources":["../../../src/components/MetaList/MetaList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAO3B,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAczD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAAyB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IAChF,OAAO,GAAG,CAAA;;;;;;;;MAQN,CAAC,SAAS;QACZ,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,EAAE,CAAyB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IACpF,OAAO,GAAG,CAAA;;;;MAIN,SAAS;QACT,CAAC,CAAC,GAAG,CAAA;;SAEF;QACH,CAAC,CAAC,GAAG,CAAA;;;;SAIF;;;;;;GAMN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAmD,UAAU,CAAC,SAAS,QAAQ,CAC3F,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,SAAS,EAAkC,EACjF,GAAyB;IAEzB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAEvD,OAAO,CACL,KAAC,IAAI,mBACU,OAAO,CAAC,IAAI,KACrB,SAAS,EACb,EAAE,EAAE,cAAc,EAClB,SAAS,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EAAE,EACrF,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,YAEP,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,CAC9B,IAAI;YACF,CAAC,CAAC;gBACE,KAAC,IAAI,IACH,EAAE,EAAE,kBAAkB,EAEtB,OAAO,EAAC,WAAW,EACnB,SAAS,EAAE,SAAS,YAEnB,IAAI,IAJA,GAAG,CAAC,GAAG,CAAC,EAAE,CAKV;aACR,CAAC,MAAM,CACN,CAAC,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC;gBAClB,CAAC,CAAC;oBACE,KAAC,IAAI,IACH,EAAE,EAAE,kBAAkB,uBAGtB,OAAO,EAAC,WAAW,wBADd,GAAG,CAAC,GAAG,CAAC,MAAM,CAId;iBACR;gBACH,CAAC,CAAC,EAAE,CACP;YACH,CAAC,CAAC,EAAE,CACP,GACI,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { ReactNode, Ref, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Text from '../Text';\nimport Flex from '../Flex';\nimport type {\n  BaseProps,\n  ForwardRefForwardPropsComponent,\n  NoChildrenProp,\n  TestIdProp\n} from '../../types';\nimport { useTestIds } from '../../hooks';\nimport { withTestIds } from '../../utils';\n\nimport { getMetaListTestIds } from './MetaList.test-ids';\n\nexport interface MetaListProps extends BaseProps, NoChildrenProp, TestIdProp {\n  /** Array of nodes or text to be rendered in the list. */\n  items: ReactNode[];\n  /**\n   * If true, MetaList items that extend past the MetaList's container will wrap to a new line.\n   * @default true\n   */\n  wrapItems?: boolean;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLUListElement>;\n}\n\nexport const StyledMetaList = styled.ul<{ wrapItems: boolean }>(({ wrapItems }) => {\n  return css`\n    list-style: none;\n    overflow: hidden;\n\n    /* Negative margin to account for overflow clipping of focus indicator */\n    padding: 0.3rem;\n    margin: -0.3rem;\n\n    ${!wrapItems &&\n    css`\n      white-space: nowrap;\n    `}\n  `;\n});\n\nexport const StyledMetaListItem = styled.li<{ wrapItems: boolean }>(({ wrapItems }) => {\n  return css`\n    min-width: 0;\n    display: inline-block;\n\n    ${wrapItems\n      ? css`\n          overflow-wrap: break-word;\n        `\n      : css`\n          white-space: nowrap;\n          text-overflow: ellipsis;\n          overflow: hidden;\n        `}\n\n    &[role='separator'] {\n      -webkit-user-select: none;\n      user-select: none;\n    }\n  `;\n});\n\nconst MetaList: ForwardRefForwardPropsComponent<MetaListProps> = forwardRef(function MetaList(\n  { testId, items, wrapItems = true, ...restProps }: PropsWithoutRef<MetaListProps>,\n  ref: MetaListProps['ref']\n) {\n  const testIds = useTestIds(testId, getMetaListTestIds);\n\n  return (\n    <Flex\n      data-testid={testIds.root}\n      {...restProps}\n      as={StyledMetaList}\n      container={{ colGap: 0.5, alignItems: 'center', wrap: wrapItems ? 'wrap' : 'nowrap' }}\n      wrapItems={wrapItems}\n      ref={ref}\n    >\n      {items.flatMap((item, i, arr) =>\n        item\n          ? [\n              <Text\n                as={StyledMetaListItem}\n                key={`${i + 0}`}\n                variant='secondary'\n                wrapItems={wrapItems}\n              >\n                {item}\n              </Text>\n            ].concat(\n              i !== arr.length - 1\n                ? [\n                    <Text\n                      as={StyledMetaListItem}\n                      aria-hidden\n                      key={`${i + 0}-sep`}\n                      variant='secondary'\n                    >\n                      •\n                    </Text>\n                  ]\n                : []\n            )\n          : []\n      )}\n    </Flex>\n  );\n});\n\nexport default withTestIds(MetaList, getMetaListTestIds);\n"]}

package/lib/components/Modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAuBhD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAUhD,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,GAAG,YAAY,CAsVtD,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAwBhD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAUhD,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,GAAG,YAAY,CAqVtD,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/lib/components/Modal/Modal.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useRef, useCallback, useState, useLayoutEffect } from 'react';
 import Progress, {} from '../Progress';
-import { getFocusables } from '../../utils';
 import Backdrop from '../Backdrop';
 import Flex from '../Flex';
 import Button from '../Button';
@@ -15,6 +14,7 @@ import Text from '../Text';
 import { Count } from '../Badges';
 import ResponsiveActions from '../ResponsiveActions';
 import { getCSSTimeInMilliseconds } from '../../styles';
+import { focusNonInteractiveElement } from '../../utils';
 import MinimizedModal from './MinimizedModal';
 import { StyledModal, StyledModalHeader, StyledModalContent, StyledModalChildrenWrap } from './Modal.styles';
 registerIcon(timesIcon, minusIcon, dockIcon, undockIcon);
@@ -22,10 +22,10 @@ const Modal = forwardRef(function Modal(props, ref) {
     const { as = 'div', progress = false, heading, headingTag = 'h2', count, children, actions, stretch = false, center = false, defaultFocus, onBeforeOpen, onAfterOpen, onBeforeClose, onAfterClose, onRequestDismiss, onRequestMinimize, onRequestMaximize, onRequestDock, onRequestActivate, ...restProps } = props;
     const { alert, dismissible, minimizable, maximizable, dockable, state, dismiss, minimize, maximize, dock, unmount, top } = useModalContext();
     const modalRef = useConsolidatedRef(ref);
+    const modalHeadingRef = useRef(null);
     const modalContentRef = useRef(null);
     const modalActionsRef = useRef(null);
     const backdropRef = useRef(null);
-    const closeButtonRef = useRef(null);
     const previousState = usePrevious(state);
     const id = useUID();
     const t = useI18n();
@@ -40,17 +40,14 @@ const Modal = forwardRef(function Modal(props, ref) {
     const setFocus = () => {
         if (progress)
             return;
-        const focusables = getFocusables(modalRef);
         if (defaultFocus?.current) {
             defaultFocus.current.focus();
         }
-        else {
-            const focusable = focusables.find(el => {
-                return modalContentRef.current?.contains(el);
-            }) ??
-                closeButtonRef.current ??
-                focusables[0];
-            focusable?.focus();
+        else if (modalHeadingRef.current) {
+            focusNonInteractiveElement(modalHeadingRef.current, typeof heading === 'string' ? heading : undefined);
+        }
+        else if (modalRef.current) {
+            focusNonInteractiveElement(modalRef.current, typeof heading === 'string' ? heading : undefined);
         }
     };
     useFocusTrap(modalRef, false);
@@ -137,7 +134,7 @@ const Modal = forwardRef(function Modal(props, ref) {
         });
     }, [state]);
     const maximized = stretch || state === 'maximized';
-    const modal = (_jsxs(Flex, { ...restProps, container: { direction: 'column' }, ref: modalRef, as: StyledModal, forwardedAs: as, onClick: (e) => e.stopPropagation(), onKeyDown: onModalKeyDown, alert: alert, role: alert ? 'alertdialog' : 'dialog', stretch: maximized, center: center, "aria-labelledby": `${id}-heading`, "aria-describedby": alert ? `${id}-content` : undefined, "aria-modal": state !== 'docked', state: state, "aria-busy": !!progress, children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'start', gap: 1 }, item: { shrink: 0 }, as: StyledModalHeader, role: 'none', hasAction: minimizable || dismissible, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, as: Text, variant: headingTag, id: `${id}-heading`, children: [_jsx("span", { children: heading }), typeof count === 'number' && _jsx(Count, { children: count })] }), _jsxs(Flex, { container: true, children: [maximizable && !alert && state !== 'maximized' && (_jsx(Button, { icon: true, variant: 'simple', label: t('maximize'), "aria-label": t('modal_maximize'), onKeyDown: onHeaderActionKeyDown, onClick: () => {
+    const modal = (_jsxs(Flex, { ...restProps, container: { direction: 'column' }, ref: modalRef, as: StyledModal, forwardedAs: as, onClick: (e) => e.stopPropagation(), onKeyDown: onModalKeyDown, alert: alert, role: alert ? 'alertdialog' : 'dialog', stretch: maximized, center: center, "aria-labelledby": `${id}-heading`, "aria-describedby": alert ? `${id}-content` : undefined, "aria-modal": state !== 'docked', state: state, "aria-busy": !!progress, children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'start', gap: 1 }, item: { shrink: 0 }, as: StyledModalHeader, role: 'none', hasAction: minimizable || dismissible, children: [_jsxs(Flex, { ref: modalHeadingRef, container: { alignItems: 'center', gap: 1 }, as: Text, variant: headingTag, id: `${id}-heading`, children: [_jsx("span", { children: heading }), typeof count === 'number' && _jsx(Count, { children: count })] }), _jsxs(Flex, { container: true, children: [maximizable && !alert && state !== 'maximized' && (_jsx(Button, { icon: true, variant: 'simple', label: t('maximize'), "aria-label": t('modal_maximize'), onKeyDown: onHeaderActionKeyDown, onClick: () => {
                                     if (onRequestMaximize?.() !== false) {
                                         maximize();
                                     }
@@ -153,7 +150,7 @@ const Modal = forwardRef(function Modal(props, ref) {
                                     if (!isCloseButtonDisabled) {
                                         tryDismiss();
                                     }
-                                }, ref: closeButtonRef, children: _jsx(Icon, { name: 'times' }) }))] })] }), _jsxs(Flex, { item: { grow: 1 }, as: StyledModalContent, ref: modalContentRef, style: modalContentRef.current
+                                }, children: _jsx(Icon, { name: 'times' }) }))] })] }), _jsxs(Flex, { item: { grow: 1 }, as: StyledModalContent, ref: modalContentRef, style: modalContentRef.current
                     ? { '--scroll-top': `${modalContentRef.current.scrollTop}px` }
                     : undefined, children: [children && (_jsx(StyledModalChildrenWrap, { id: `${id}-content`, inert: progress ? '' : undefined, children: children })), _jsx(Progress, { visible: !!progress, focusOnVisible: true, delay: true, placement: 'local', message: progressMessage, onTransitionEndOut: () => setProgressMessage(undefined) })] }), actions && (_jsx(ResponsiveActions, { as: 'footer', role: 'none', actionsRef: modalActionsRef, actionsEl: actions }))] }));
     const renderModal = state === 'docked' ? (modal) : (_jsx(Backdrop, { ref: backdropRef, container: {

package/lib/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useRef, useCallback, useState, useLayoutEffect } from 'react';\nimport type {\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  MouseEvent,\n  KeyboardEvent as ReactKeyboardEvent\n} from 'react';\n\nimport Progress, { type ProgressProps } from '../Progress';\nimport { getFocusables } from '../../utils';\nimport Backdrop from '../Backdrop';\nimport Flex from '../Flex';\nimport Button from '../Button';\nimport type { ForwardProps } from '../../types';\nimport {\n  useConsolidatedRef,\n  useI18n,\n  useOuterEvent,\n  useUID,\n  useFocusTrap,\n  usePrevious,\n  useModalContext,\n  useEvent,\n  useTheme\n} from '../../hooks';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport * as dockIcon from '../Icon/icons/dock.icon';\nimport * as undockIcon from '../Icon/icons/undock.icon';\nimport Text from '../Text';\nimport { Count } from '../Badges';\nimport ResponsiveActions from '../ResponsiveActions';\nimport { getCSSTimeInMilliseconds } from '../../styles';\n\nimport MinimizedModal from './MinimizedModal';\nimport type { ModalProps } from './Modal.types';\nimport {\n  StyledModal,\n  StyledModalHeader,\n  StyledModalContent,\n  StyledModalChildrenWrap\n} from './Modal.styles';\n\nregisterIcon(timesIcon, minusIcon, dockIcon, undockIcon);\n\nconst Modal: FunctionComponent<ModalProps & ForwardProps> = forwardRef(function Modal(\n  props: PropsWithoutRef<ModalProps>,\n  ref: Ref<HTMLElement>\n) {\n  const {\n    as = 'div',\n    progress = false,\n    heading,\n    headingTag = 'h2',\n    count,\n    children,\n    actions,\n    stretch = false,\n    center = false,\n    defaultFocus,\n    onBeforeOpen,\n    onAfterOpen,\n    onBeforeClose,\n    onAfterClose,\n    onRequestDismiss,\n    onRequestMinimize,\n    onRequestMaximize,\n    onRequestDock,\n    onRequestActivate,\n    ...restProps\n  } = props;\n\n  const {\n    alert,\n    dismissible,\n    minimizable,\n    maximizable,\n    dockable,\n    state,\n    dismiss,\n    minimize,\n    maximize,\n    dock,\n    unmount,\n    top\n  } = useModalContext();\n\n  const modalRef = useConsolidatedRef(ref);\n  const modalContentRef = useRef<HTMLDivElement>(null);\n  const modalActionsRef = useRef<HTMLDivElement>(null);\n  const backdropRef = useRef<HTMLDivElement>(null);\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\n  const previousState = usePrevious(state);\n  const id = useUID();\n  const t = useI18n();\n  const [progressMessage, setProgressMessage] = useState<ProgressProps['message']>(undefined);\n  const [isCloseButtonDisabled, setIsCloseButtonDisabled] = useState(true);\n  const theme = useTheme();\n\n  const tryDismiss = () => {\n    if (onRequestDismiss?.() !== false) {\n      dismiss();\n    }\n  };\n\n  const setFocus = () => {\n    if (progress) return;\n\n    const focusables = getFocusables(modalRef);\n\n    if (defaultFocus?.current) {\n      defaultFocus.current.focus();\n    } else {\n      const focusable =\n        focusables.find(el => {\n          return modalContentRef.current?.contains(el);\n        }) ??\n        closeButtonRef.current ??\n        focusables[0];\n\n      focusable?.focus();\n    }\n  };\n\n  useFocusTrap(modalRef, false);\n  useEvent('shortcut', e => e.stopPropagation(), { eventOptions: { capture: true } });\n\n  useOuterEvent('mousedown', [modalRef], e => {\n    if (['minimized', 'docked', 'closed'].includes(state)) return;\n\n    if (dismissible) {\n      if (e.target === backdropRef.current) {\n        tryDismiss();\n      }\n    } else {\n      modalRef.current?.focus();\n    }\n  });\n\n  useEffect(() => {\n    if (state === 'minimized') return;\n    if (state === 'open' || state === 'maximized' || state === 'docked') setFocus();\n    if (state === 'docked') setIsCloseButtonDisabled(false);\n\n    // This won't actually run until potential changes to docked modal handling.\n    if (state === 'closed' && previousState === 'docked') {\n      onBeforeClose?.();\n      unmount();\n      onAfterClose?.();\n    }\n  }, [state]);\n\n  useEffect(() => {\n    // If a modal is already in a closed state on initial mount, unmount it.\n    // This only happens when a docked modal closes since the ModalManager\n    // remounts it outside of the DockedModals container if state !== 'docked'.\n    if (state === 'closed') {\n      onBeforeClose?.();\n      unmount();\n      onAfterClose?.();\n    }\n  }, []);\n\n  // Dismiss on Escape needs to be handled using React event handling to be cancelable using SyntheticEvent.stopPropagation.\n  const onModalKeyDown = useCallback(\n    (e: ReactKeyboardEvent) => {\n      if (dismissible && (state === 'open' || state === 'maximized') && e.key === 'Escape' && top) {\n        tryDismiss();\n      }\n    },\n    [dismissible, state, top, tryDismiss]\n  );\n\n  const onHeaderActionKeyDown = useCallback((e: ReactKeyboardEvent<HTMLButtonElement>) => {\n    if (e.repeat && (e.key === 'Enter' || e.key === ' ')) e.preventDefault();\n  }, []);\n\n  useEffect(() => {\n    if (!progress) {\n      setFocus();\n    }\n\n    if (typeof progress === 'object' && progress.message !== progressMessage) {\n      setProgressMessage(progress.message);\n    } else if (progress === true) {\n      setProgressMessage(t('loading'));\n    }\n  }, [progress]);\n\n  // Animate enter and exit\n  useLayoutEffect(() => {\n    if (!modalRef.current) return;\n\n    const translate = ['0 -4rem', '0 0'];\n    const options: KeyframeAnimationOptions = {\n      // Multiplier needed to coordinate with Backdrop's transition speed multiplier\n      duration: getCSSTimeInMilliseconds(theme.base.animation.speed) * 2,\n      easing: theme.base.animation.timing.ease,\n      fill: 'forwards'\n    };\n\n    let animation: Animation | undefined;\n\n    if (state === 'open') {\n      animation = modalRef.current.animate({ translate }, options);\n    } else if (state === 'closed' && previousState === 'open') {\n      animation = modalRef.current.animate({ translate: translate.reverse() }, options);\n    }\n\n    // Handler will not leak since animation object is garbage collected\n    animation?.addEventListener('finish', () => {\n      // Removes the element from the compositor.\n      animation.cancel();\n    });\n  }, [state]);\n\n  const maximized = stretch || state === 'maximized';\n\n  const modal = (\n    <Flex\n      {...restProps}\n      container={{ direction: 'column' }}\n      ref={modalRef}\n      as={StyledModal}\n      forwardedAs={as}\n      onClick={(e: MouseEvent) => e.stopPropagation()}\n      onKeyDown={onModalKeyDown}\n      alert={alert}\n      role={alert ? 'alertdialog' : 'dialog'}\n      stretch={maximized}\n      center={center}\n      aria-labelledby={`${id}-heading`}\n      aria-describedby={alert ? `${id}-content` : undefined}\n      aria-modal={state !== 'docked'}\n      state={state}\n      aria-busy={!!progress}\n    >\n      <Flex\n        container={{ justify: 'between', alignItems: 'start', gap: 1 }}\n        item={{ shrink: 0 }}\n        as={StyledModalHeader}\n        role='none'\n        hasAction={minimizable || dismissible}\n      >\n        <Flex\n          container={{ alignItems: 'center', gap: 1 }}\n          as={Text}\n          variant={headingTag}\n          id={`${id}-heading`}\n        >\n          <span>{heading}</span>\n          {typeof count === 'number' && <Count>{count}</Count>}\n        </Flex>\n\n        <Flex container>\n          {maximizable && !alert && state !== 'maximized' && (\n            <Button\n              icon\n              variant='simple'\n              label={t('maximize')}\n              aria-label={t('modal_maximize')}\n              onKeyDown={onHeaderActionKeyDown}\n              onClick={() => {\n                if (onRequestMaximize?.() !== false) {\n                  maximize();\n                }\n              }}\n            >\n              <Icon name='undock' />\n            </Button>\n          )}\n          {dockable && !alert && state !== 'docked' && (\n            <Button\n              icon\n              variant='simple'\n              label={t('dock')}\n              aria-label={t('modal_dock')}\n              onKeyDown={onHeaderActionKeyDown}\n              onClick={() => {\n                if (onRequestDock?.() !== false) {\n                  dock();\n                }\n              }}\n            >\n              <Icon name='dock' />\n            </Button>\n          )}\n          {minimizable && !alert && (\n            <Button\n              icon\n              variant='simple'\n              label={t('minimize')}\n              aria-label={t('modal_minimize')}\n              onKeyDown={onHeaderActionKeyDown}\n              onClick={() => {\n                if (onRequestMinimize?.() !== false) {\n                  minimize();\n                }\n              }}\n            >\n              <Icon name='minus' />\n            </Button>\n          )}\n          {dismissible && !alert && (\n            <Button\n              icon\n              variant='simple'\n              label={t('close')}\n              aria-label={t('modal_close')}\n              onKeyDown={onHeaderActionKeyDown}\n              onClick={() => {\n                if (!isCloseButtonDisabled) {\n                  tryDismiss();\n                }\n              }}\n              ref={closeButtonRef}\n            >\n              <Icon name='times' />\n            </Button>\n          )}\n        </Flex>\n      </Flex>\n\n      <Flex\n        item={{ grow: 1 }}\n        as={StyledModalContent}\n        ref={modalContentRef}\n        style={\n          modalContentRef.current\n            ? { '--scroll-top': `${modalContentRef.current.scrollTop}px` }\n            : undefined\n        }\n      >\n        {children && (\n          <StyledModalChildrenWrap id={`${id}-content`} inert={progress ? '' : undefined}>\n            {children}\n          </StyledModalChildrenWrap>\n        )}\n\n        <Progress\n          visible={!!progress}\n          focusOnVisible\n          delay\n          placement='local'\n          message={progressMessage}\n          onTransitionEndOut={() => setProgressMessage(undefined)}\n        />\n      </Flex>\n\n      {actions && (\n        <ResponsiveActions\n          as='footer'\n          role='none'\n          actionsRef={modalActionsRef}\n          actionsEl={actions}\n        />\n      )}\n    </Flex>\n  );\n\n  const renderModal =\n    state === 'docked' ? (\n      modal\n    ) : (\n      <Backdrop\n        ref={backdropRef}\n        container={{\n          alignItems: center || maximized ? 'center' : 'start'\n        }}\n        transitionSpeed='slow'\n        open={state === 'open' || state === 'maximized'}\n        onBeforeTransitionIn={onBeforeOpen}\n        onAfterTransitionIn={() => {\n          setIsCloseButtonDisabled(false);\n          onAfterOpen?.();\n        }}\n        onBeforeTransitionOut={onBeforeClose}\n        onAfterTransitionOut={() => {\n          unmount();\n          onAfterClose?.();\n        }}\n      >\n        {modal}\n      </Backdrop>\n    );\n\n  return state === 'minimized' ? <MinimizedModal {...props} {...restProps} /> : renderModal;\n});\n\nexport default Modal;\n"]}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAS9F,OAAO,QAAQ,EAAE,EAAsB,MAAM,aAAa,CAAC;AAC3D,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,MAAM,MAAM,WAAW,CAAC;AAE/B,OAAO,EACL,kBAAkB,EAClB,OAAO,EACP,aAAa,EACb,MAAM,EACN,YAAY,EACZ,WAAW,EACX,eAAe,EACf,QAAQ,EACR,QAAQ,EACT,MAAM,aAAa,CAAC;AACrB,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,SAAS,MAAM,0BAA0B,CAAC;AACtD,OAAO,KAAK,SAAS,MAAM,0BAA0B,CAAC;AACtD,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,UAAU,MAAM,2BAA2B,CAAC;AACxD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAClC,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,EAAE,0BAA0B,EAAE,MAAM,aAAa,CAAC;AAEzD,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACxB,MAAM,gBAAgB,CAAC;AAExB,YAAY,CAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC;AAEzD,MAAM,KAAK,GAAiD,UAAU,CAAC,SAAS,KAAK,CACnF,KAAkC,EAClC,GAAqB;IAErB,MAAM,EACJ,EAAE,GAAG,KAAK,EACV,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,UAAU,GAAG,IAAI,EACjB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAO,GAAG,KAAK,EACf,MAAM,GAAG,KAAK,EACd,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,aAAa,EACb,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,aAAa,EACb,iBAAiB,EACjB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,EACJ,KAAK,EACL,WAAW,EACX,WAAW,EACX,WAAW,EACX,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,GAAG,EACJ,GAAG,eAAe,EAAE,CAAC;IAEtB,MAAM,QAAQ,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACzC,MAAM,eAAe,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IACzD,MAAM,eAAe,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACrD,MAAM,eAAe,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACrD,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,MAAM,aAAa,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;IACzC,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC;IACpB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAA2B,SAAS,CAAC,CAAC;IAC5F,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACzE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,gBAAgB,EAAE,EAAE,KAAK,KAAK,EAAE,CAAC;YACnC,OAAO,EAAE,CAAC;QACZ,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,IAAI,QAAQ;YAAE,OAAO;QAErB,IAAI,YAAY,EAAE,OAAO,EAAE,CAAC;YAC1B,YAAY,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QAC/B,CAAC;aAAM,IAAI,eAAe,CAAC,OAAO,EAAE,CAAC;YACnC,0BAA0B,CACxB,eAAe,CAAC,OAAO,EACvB,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAClD,CAAC;QACJ,CAAC;aAAM,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;YAC5B,0BAA0B,CACxB,QAAQ,CAAC,OAAO,EAChB,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAClD,CAAC;QACJ,CAAC;IACH,CAAC,CAAC;IAEF,YAAY,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IAC9B,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EAAE,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;IAEpF,aAAa,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE;QACzC,IAAI,CAAC,WAAW,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC;YAAE,OAAO;QAE9D,IAAI,WAAW,EAAE,CAAC;YAChB,IAAI,CAAC,CAAC,MAAM,KAAK,WAAW,CAAC,OAAO,EAAE,CAAC;gBACrC,UAAU,EAAE,CAAC;YACf,CAAC;QACH,CAAC;aAAM,CAAC;YACN,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,KAAK,WAAW;YAAE,OAAO;QAClC,IAAI,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,WAAW,IAAI,KAAK,KAAK,QAAQ;YAAE,QAAQ,EAAE,CAAC;QAChF,IAAI,KAAK,KAAK,QAAQ;YAAE,wBAAwB,CAAC,KAAK,CAAC,CAAC;QAExD,4EAA4E;QAC5E,IAAI,KAAK,KAAK,QAAQ,IAAI,aAAa,KAAK,QAAQ,EAAE,CAAC;YACrD,aAAa,EAAE,EAAE,CAAC;YAClB,OAAO,EAAE,CAAC;YACV,YAAY,EAAE,EAAE,CAAC;QACnB,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC,GAAG,EAAE;QACb,wEAAwE;QACxE,sEAAsE;QACtE,2EAA2E;QAC3E,IAAI,KAAK,KAAK,QAAQ,EAAE,CAAC;YACvB,aAAa,EAAE,EAAE,CAAC;YAClB,OAAO,EAAE,CAAC;YACV,YAAY,EAAE,EAAE,CAAC;QACnB,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,0HAA0H;IAC1H,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,CAAqB,EAAE,EAAE;QACxB,IAAI,WAAW,IAAI,CAAC,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,WAAW,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,GAAG,EAAE,CAAC;YAC5F,UAAU,EAAE,CAAC;QACf,CAAC;IACH,CAAC,EACD,CAAC,WAAW,EAAE,KAAK,EAAE,GAAG,EAAE,UAAU,CAAC,CACtC,CAAC;IAEF,MAAM,qBAAqB,GAAG,WAAW,CAAC,CAAC,CAAwC,EAAE,EAAE;QACrF,IAAI,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC;YAAE,CAAC,CAAC,cAAc,EAAE,CAAC;IAC3E,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,QAAQ,EAAE,CAAC;QACb,CAAC;QAED,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,QAAQ,CAAC,OAAO,KAAK,eAAe,EAAE,CAAC;YACzE,kBAAkB,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QACvC,CAAC;aAAM,IAAI,QAAQ,KAAK,IAAI,EAAE,CAAC;YAC7B,kBAAkB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;QACnC,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,yBAAyB;IACzB,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO;QAE9B,MAAM,SAAS,GAAG,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;QACrC,MAAM,OAAO,GAA6B;YACxC,8EAA8E;YAC9E,QAAQ,EAAE,wBAAwB,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC;YAClE,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;YACxC,IAAI,EAAE,UAAU;SACjB,CAAC;QAEF,IAAI,SAAgC,CAAC;QAErC,IAAI,KAAK,KAAK,MAAM,EAAE,CAAC;YACrB,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,EAAE,OAAO,CAAC,CAAC;QAC/D,CAAC;aAAM,IAAI,KAAK,KAAK,QAAQ,IAAI,aAAa,KAAK,MAAM,EAAE,CAAC;YAC1D,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,SAAS,CAAC,OAAO,EAAE,EAAE,EAAE,OAAO,CAAC,CAAC;QACpF,CAAC;QAED,oEAAoE;QACpE,SAAS,EAAE,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;YACzC,2CAA2C;YAC3C,SAAS,CAAC,MAAM,EAAE,CAAC;QACrB,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,SAAS,GAAG,OAAO,IAAI,KAAK,KAAK,WAAW,CAAC;IAEnD,MAAM,KAAK,GAAG,CACZ,MAAC,IAAI,OACC,SAAS,EACb,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,GAAG,EAAE,QAAQ,EACb,EAAE,EAAE,WAAW,EACf,WAAW,EAAE,EAAE,EACf,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EAC/C,SAAS,EAAE,cAAc,EACzB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,QAAQ,EACtC,OAAO,EAAE,SAAS,EAClB,MAAM,EAAE,MAAM,qBACG,GAAG,EAAE,UAAU,sBACd,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,gBACzC,KAAK,KAAK,QAAQ,EAC9B,KAAK,EAAE,KAAK,eACD,CAAC,CAAC,QAAQ,aAErB,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,EAC9D,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,EAAE,EAAE,iBAAiB,EACrB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,WAAW,IAAI,WAAW,aAErC,MAAC,IAAI,IACH,GAAG,EAAE,eAAe,EACpB,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAC3C,EAAE,EAAE,IAAI,EACR,OAAO,EAAE,UAAU,EACnB,EAAE,EAAE,GAAG,EAAE,UAAU,aAEnB,yBAAO,OAAO,GAAQ,EACrB,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAC,KAAK,cAAE,KAAK,GAAS,IAC/C,EAEP,MAAC,IAAI,IAAC,SAAS,mBACZ,WAAW,IAAI,CAAC,KAAK,IAAI,KAAK,KAAK,WAAW,IAAI,CACjD,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE,CAAC,CAAC,UAAU,CAAC,gBACR,CAAC,CAAC,gBAAgB,CAAC,EAC/B,SAAS,EAAE,qBAAqB,EAChC,OAAO,EAAE,GAAG,EAAE;oCACZ,IAAI,iBAAiB,EAAE,EAAE,KAAK,KAAK,EAAE,CAAC;wCACpC,QAAQ,EAAE,CAAC;oCACb,CAAC;gCACH,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,GAAG,GACf,CACV,EACA,QAAQ,IAAI,CAAC,KAAK,IAAI,KAAK,KAAK,QAAQ,IAAI,CAC3C,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,gBACJ,CAAC,CAAC,YAAY,CAAC,EAC3B,SAAS,EAAE,qBAAqB,EAChC,OAAO,EAAE,GAAG,EAAE;oCACZ,IAAI,aAAa,EAAE,EAAE,KAAK,KAAK,EAAE,CAAC;wCAChC,IAAI,EAAE,CAAC;oCACT,CAAC;gCACH,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACb,CACV,EACA,WAAW,IAAI,CAAC,KAAK,IAAI,CACxB,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE,CAAC,CAAC,UAAU,CAAC,gBACR,CAAC,CAAC,gBAAgB,CAAC,EAC/B,SAAS,EAAE,qBAAqB,EAChC,OAAO,EAAE,GAAG,EAAE;oCACZ,IAAI,iBAAiB,EAAE,EAAE,KAAK,KAAK,EAAE,CAAC;wCACpC,QAAQ,EAAE,CAAC;oCACb,CAAC;gCACH,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,CACV,EACA,WAAW,IAAI,CAAC,KAAK,IAAI,CACxB,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE,CAAC,CAAC,OAAO,CAAC,gBACL,CAAC,CAAC,aAAa,CAAC,EAC5B,SAAS,EAAE,qBAAqB,EAChC,OAAO,EAAE,GAAG,EAAE;oCACZ,IAAI,CAAC,qBAAqB,EAAE,CAAC;wCAC3B,UAAU,EAAE,CAAC;oCACf,CAAC;gCACH,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,CACV,IACI,IACF,EAEP,MAAC,IAAI,IACH,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,EAAE,EAAE,kBAAkB,EACtB,GAAG,EAAE,eAAe,EACpB,KAAK,EACH,eAAe,CAAC,OAAO;oBACrB,CAAC,CAAC,EAAE,cAAc,EAAE,GAAG,eAAe,CAAC,OAAO,CAAC,SAAS,IAAI,EAAE;oBAC9D,CAAC,CAAC,SAAS,aAGd,QAAQ,IAAI,CACX,KAAC,uBAAuB,IAAC,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,YAC3E,QAAQ,GACe,CAC3B,EAED,KAAC,QAAQ,IACP,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,cAAc,QACd,KAAK,QACL,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,eAAe,EACxB,kBAAkB,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,SAAS,CAAC,GACvD,IACG,EAEN,OAAO,IAAI,CACV,KAAC,iBAAiB,IAChB,EAAE,EAAC,QAAQ,EACX,IAAI,EAAC,MAAM,EACX,UAAU,EAAE,eAAe,EAC3B,SAAS,EAAE,OAAO,GAClB,CACH,IACI,CACR,CAAC;IAEF,MAAM,WAAW,GACf,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CACnB,KAAK,CACN,CAAC,CAAC,CAAC,CACF,KAAC,QAAQ,IACP,GAAG,EAAE,WAAW,EAChB,SAAS,EAAE;YACT,UAAU,EAAE,MAAM,IAAI,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;SACrD,EACD,eAAe,EAAC,MAAM,EACtB,IAAI,EAAE,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,WAAW,EAC/C,oBAAoB,EAAE,YAAY,EAClC,mBAAmB,EAAE,GAAG,EAAE;YACxB,wBAAwB,CAAC,KAAK,CAAC,CAAC;YAChC,WAAW,EAAE,EAAE,CAAC;QAClB,CAAC,EACD,qBAAqB,EAAE,aAAa,EACpC,oBAAoB,EAAE,GAAG,EAAE;YACzB,OAAO,EAAE,CAAC;YACV,YAAY,EAAE,EAAE,CAAC;QACnB,CAAC,YAEA,KAAK,GACG,CACZ,CAAC;IAEJ,OAAO,KAAK,KAAK,WAAW,CAAC,CAAC,CAAC,KAAC,cAAc,OAAK,KAAK,KAAM,SAAS,GAAI,CAAC,CAAC,CAAC,WAAW,CAAC;AAC5F,CAAC,CAAC,CAAC;AAEH,eAAe,KAAK,CAAC","sourcesContent":["import { forwardRef, useEffect, useRef, useCallback, useState, useLayoutEffect } from 'react';\nimport type {\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  MouseEvent,\n  KeyboardEvent as ReactKeyboardEvent\n} from 'react';\n\nimport Progress, { type ProgressProps } from '../Progress';\nimport Backdrop from '../Backdrop';\nimport Flex from '../Flex';\nimport Button from '../Button';\nimport type { ForwardProps } from '../../types';\nimport {\n  useConsolidatedRef,\n  useI18n,\n  useOuterEvent,\n  useUID,\n  useFocusTrap,\n  usePrevious,\n  useModalContext,\n  useEvent,\n  useTheme\n} from '../../hooks';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport * as dockIcon from '../Icon/icons/dock.icon';\nimport * as undockIcon from '../Icon/icons/undock.icon';\nimport Text from '../Text';\nimport { Count } from '../Badges';\nimport ResponsiveActions from '../ResponsiveActions';\nimport { getCSSTimeInMilliseconds } from '../../styles';\nimport { focusNonInteractiveElement } from '../../utils';\n\nimport MinimizedModal from './MinimizedModal';\nimport type { ModalProps } from './Modal.types';\nimport {\n  StyledModal,\n  StyledModalHeader,\n  StyledModalContent,\n  StyledModalChildrenWrap\n} from './Modal.styles';\n\nregisterIcon(timesIcon, minusIcon, dockIcon, undockIcon);\n\nconst Modal: FunctionComponent<ModalProps & ForwardProps> = forwardRef(function Modal(\n  props: PropsWithoutRef<ModalProps>,\n  ref: Ref<HTMLElement>\n) {\n  const {\n    as = 'div',\n    progress = false,\n    heading,\n    headingTag = 'h2',\n    count,\n    children,\n    actions,\n    stretch = false,\n    center = false,\n    defaultFocus,\n    onBeforeOpen,\n    onAfterOpen,\n    onBeforeClose,\n    onAfterClose,\n    onRequestDismiss,\n    onRequestMinimize,\n    onRequestMaximize,\n    onRequestDock,\n    onRequestActivate,\n    ...restProps\n  } = props;\n\n  const {\n    alert,\n    dismissible,\n    minimizable,\n    maximizable,\n    dockable,\n    state,\n    dismiss,\n    minimize,\n    maximize,\n    dock,\n    unmount,\n    top\n  } = useModalContext();\n\n  const modalRef = useConsolidatedRef(ref);\n  const modalHeadingRef = useRef<HTMLHeadingElement>(null);\n  const modalContentRef = useRef<HTMLDivElement>(null);\n  const modalActionsRef = useRef<HTMLDivElement>(null);\n  const backdropRef = useRef<HTMLDivElement>(null);\n  const previousState = usePrevious(state);\n  const id = useUID();\n  const t = useI18n();\n  const [progressMessage, setProgressMessage] = useState<ProgressProps['message']>(undefined);\n  const [isCloseButtonDisabled, setIsCloseButtonDisabled] = useState(true);\n  const theme = useTheme();\n\n  const tryDismiss = () => {\n    if (onRequestDismiss?.() !== false) {\n      dismiss();\n    }\n  };\n\n  const setFocus = () => {\n    if (progress) return;\n\n    if (defaultFocus?.current) {\n      defaultFocus.current.focus();\n    } else if (modalHeadingRef.current) {\n      focusNonInteractiveElement(\n        modalHeadingRef.current,\n        typeof heading === 'string' ? heading : undefined\n      );\n    } else if (modalRef.current) {\n      focusNonInteractiveElement(\n        modalRef.current,\n        typeof heading === 'string' ? heading : undefined\n      );\n    }\n  };\n\n  useFocusTrap(modalRef, false);\n  useEvent('shortcut', e => e.stopPropagation(), { eventOptions: { capture: true } });\n\n  useOuterEvent('mousedown', [modalRef], e => {\n    if (['minimized', 'docked', 'closed'].includes(state)) return;\n\n    if (dismissible) {\n      if (e.target === backdropRef.current) {\n        tryDismiss();\n      }\n    } else {\n      modalRef.current?.focus();\n    }\n  });\n\n  useEffect(() => {\n    if (state === 'minimized') return;\n    if (state === 'open' || state === 'maximized' || state === 'docked') setFocus();\n    if (state === 'docked') setIsCloseButtonDisabled(false);\n\n    // This won't actually run until potential changes to docked modal handling.\n    if (state === 'closed' && previousState === 'docked') {\n      onBeforeClose?.();\n      unmount();\n      onAfterClose?.();\n    }\n  }, [state]);\n\n  useEffect(() => {\n    // If a modal is already in a closed state on initial mount, unmount it.\n    // This only happens when a docked modal closes since the ModalManager\n    // remounts it outside of the DockedModals container if state !== 'docked'.\n    if (state === 'closed') {\n      onBeforeClose?.();\n      unmount();\n      onAfterClose?.();\n    }\n  }, []);\n\n  // Dismiss on Escape needs to be handled using React event handling to be cancelable using SyntheticEvent.stopPropagation.\n  const onModalKeyDown = useCallback(\n    (e: ReactKeyboardEvent) => {\n      if (dismissible && (state === 'open' || state === 'maximized') && e.key === 'Escape' && top) {\n        tryDismiss();\n      }\n    },\n    [dismissible, state, top, tryDismiss]\n  );\n\n  const onHeaderActionKeyDown = useCallback((e: ReactKeyboardEvent<HTMLButtonElement>) => {\n    if (e.repeat && (e.key === 'Enter' || e.key === ' ')) e.preventDefault();\n  }, []);\n\n  useEffect(() => {\n    if (!progress) {\n      setFocus();\n    }\n\n    if (typeof progress === 'object' && progress.message !== progressMessage) {\n      setProgressMessage(progress.message);\n    } else if (progress === true) {\n      setProgressMessage(t('loading'));\n    }\n  }, [progress]);\n\n  // Animate enter and exit\n  useLayoutEffect(() => {\n    if (!modalRef.current) return;\n\n    const translate = ['0 -4rem', '0 0'];\n    const options: KeyframeAnimationOptions = {\n      // Multiplier needed to coordinate with Backdrop's transition speed multiplier\n      duration: getCSSTimeInMilliseconds(theme.base.animation.speed) * 2,\n      easing: theme.base.animation.timing.ease,\n      fill: 'forwards'\n    };\n\n    let animation: Animation | undefined;\n\n    if (state === 'open') {\n      animation = modalRef.current.animate({ translate }, options);\n    } else if (state === 'closed' && previousState === 'open') {\n      animation = modalRef.current.animate({ translate: translate.reverse() }, options);\n    }\n\n    // Handler will not leak since animation object is garbage collected\n    animation?.addEventListener('finish', () => {\n      // Removes the element from the compositor.\n      animation.cancel();\n    });\n  }, [state]);\n\n  const maximized = stretch || state === 'maximized';\n\n  const modal = (\n    <Flex\n      {...restProps}\n      container={{ direction: 'column' }}\n      ref={modalRef}\n      as={StyledModal}\n      forwardedAs={as}\n      onClick={(e: MouseEvent) => e.stopPropagation()}\n      onKeyDown={onModalKeyDown}\n      alert={alert}\n      role={alert ? 'alertdialog' : 'dialog'}\n      stretch={maximized}\n      center={center}\n      aria-labelledby={`${id}-heading`}\n      aria-describedby={alert ? `${id}-content` : undefined}\n      aria-modal={state !== 'docked'}\n      state={state}\n      aria-busy={!!progress}\n    >\n      <Flex\n        container={{ justify: 'between', alignItems: 'start', gap: 1 }}\n        item={{ shrink: 0 }}\n        as={StyledModalHeader}\n        role='none'\n        hasAction={minimizable || dismissible}\n      >\n        <Flex\n          ref={modalHeadingRef}\n          container={{ alignItems: 'center', gap: 1 }}\n          as={Text}\n          variant={headingTag}\n          id={`${id}-heading`}\n        >\n          <span>{heading}</span>\n          {typeof count === 'number' && <Count>{count}</Count>}\n        </Flex>\n\n        <Flex container>\n          {maximizable && !alert && state !== 'maximized' && (\n            <Button\n              icon\n              variant='simple'\n              label={t('maximize')}\n              aria-label={t('modal_maximize')}\n              onKeyDown={onHeaderActionKeyDown}\n              onClick={() => {\n                if (onRequestMaximize?.() !== false) {\n                  maximize();\n                }\n              }}\n            >\n              <Icon name='undock' />\n            </Button>\n          )}\n          {dockable && !alert && state !== 'docked' && (\n            <Button\n              icon\n              variant='simple'\n              label={t('dock')}\n              aria-label={t('modal_dock')}\n              onKeyDown={onHeaderActionKeyDown}\n              onClick={() => {\n                if (onRequestDock?.() !== false) {\n                  dock();\n                }\n              }}\n            >\n              <Icon name='dock' />\n            </Button>\n          )}\n          {minimizable && !alert && (\n            <Button\n              icon\n              variant='simple'\n              label={t('minimize')}\n              aria-label={t('modal_minimize')}\n              onKeyDown={onHeaderActionKeyDown}\n              onClick={() => {\n                if (onRequestMinimize?.() !== false) {\n                  minimize();\n                }\n              }}\n            >\n              <Icon name='minus' />\n            </Button>\n          )}\n          {dismissible && !alert && (\n            <Button\n              icon\n              variant='simple'\n              label={t('close')}\n              aria-label={t('modal_close')}\n              onKeyDown={onHeaderActionKeyDown}\n              onClick={() => {\n                if (!isCloseButtonDisabled) {\n                  tryDismiss();\n                }\n              }}\n            >\n              <Icon name='times' />\n            </Button>\n          )}\n        </Flex>\n      </Flex>\n\n      <Flex\n        item={{ grow: 1 }}\n        as={StyledModalContent}\n        ref={modalContentRef}\n        style={\n          modalContentRef.current\n            ? { '--scroll-top': `${modalContentRef.current.scrollTop}px` }\n            : undefined\n        }\n      >\n        {children && (\n          <StyledModalChildrenWrap id={`${id}-content`} inert={progress ? '' : undefined}>\n            {children}\n          </StyledModalChildrenWrap>\n        )}\n\n        <Progress\n          visible={!!progress}\n          focusOnVisible\n          delay\n          placement='local'\n          message={progressMessage}\n          onTransitionEndOut={() => setProgressMessage(undefined)}\n        />\n      </Flex>\n\n      {actions && (\n        <ResponsiveActions\n          as='footer'\n          role='none'\n          actionsRef={modalActionsRef}\n          actionsEl={actions}\n        />\n      )}\n    </Flex>\n  );\n\n  const renderModal =\n    state === 'docked' ? (\n      modal\n    ) : (\n      <Backdrop\n        ref={backdropRef}\n        container={{\n          alignItems: center || maximized ? 'center' : 'start'\n        }}\n        transitionSpeed='slow'\n        open={state === 'open' || state === 'maximized'}\n        onBeforeTransitionIn={onBeforeOpen}\n        onAfterTransitionIn={() => {\n          setIsCloseButtonDisabled(false);\n          onAfterOpen?.();\n        }}\n        onBeforeTransitionOut={onBeforeClose}\n        onAfterTransitionOut={() => {\n          unmount();\n          onAfterClose?.();\n        }}\n      >\n        {modal}\n      </Backdrop>\n    );\n\n  return state === 'minimized' ? <MinimizedModal {...props} {...restProps} /> : renderModal;\n});\n\nexport default Modal;\n"]}

package/lib/components/Modal/Modal.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.styles.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAInE,eAAO,MAAM,uBAAuB,yGAAe,CAAC;AAEpD,eAAO,MAAM,iBAAiB;gBAA+B,OAAO;SAqBnE,CAAC;AAIF,eAAO,MAAM,kBAAkB,yGAiB7B,CAAC;AAIH,eAAO,MAAM,WAAW,6jBAuHtB,CAAC"}
+{"version":3,"file":"Modal.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.styles.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAInE,eAAO,MAAM,uBAAuB,yGAAe,CAAC;AAEpD,eAAO,MAAM,iBAAiB;gBAA+B,OAAO;SAqBnE,CAAC;AAIF,eAAO,MAAM,kBAAkB,yGAiB7B,CAAC;AAIH,eAAO,MAAM,WAAW,6jBA4HtB,CAAC"}

package/lib/components/Modal/Modal.styles.js

@@ -161,6 +161,11 @@ export const StyledModal = styled(StyledCard)(({ theme: { base }, alert, autoWid
         min-height: 8rem;
       }
     }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: ${base.shadow.focus};
+    }
   `;
 });
 StyledModal.defaultProps = defaultThemeProp;