@doist/reactist 25.1.1 → 25.2.0

package/es/modal/modal.js

@@ -1,5 +1,6 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import * as React from 'react';
+import { forwardRef } from 'react';
 import classNames from 'classnames';
 import FocusLock from 'react-focus-lock';
 import { hideOthers } from 'aria-hidden';
@@ -220,7 +221,7 @@ function ModalHeader(_ref2) {
  * Renders the body of a modal.
  *
  * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other
- * things, that the contet of the modal body expands or contracts depending on the modal height
+ * things, that the content of the modal body expands or contracts depending on the modal height
  * setting or the size of the content. The body content also automatically scrolls when it's too
  * large to fit the available space.
  *
@@ -229,7 +230,7 @@ function ModalHeader(_ref2) {
  * @see ModalFooter
  */
 
-function ModalBody(_ref3) {
+const ModalBody = /*#__PURE__*/forwardRef(function ModalBody(_ref3, ref) {
   let {
     exceptionallySetClassName,
     children
@@ -240,6 +241,7 @@ function ModalBody(_ref3) {
     height
   } = React.useContext(ModalContext);
   return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
+    ref: ref,
     className: exceptionallySetClassName,
     flexGrow: height === 'expand' ? 1 : 0,
     height: height === 'expand' ? 'full' : undefined,
@@ -248,7 +250,7 @@ function ModalBody(_ref3) {
     padding: "large",
     paddingBottom: "xxlarge"
   }, children));
-}
+});
 /**
  * Renders a standard modal footer area.
  *

package/es/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../src/modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport FocusLock from 'react-focus-lock'\nimport { hideOthers } from 'aria-hidden'\n\nimport { Dialog, DialogOptions, useDialogStore, Portal, PortalOptions } from '@ariakit/react'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Column, Columns } from '../columns'\nimport { Inline } from '../inline'\nimport { Divider } from '../divider'\nimport { Box } from '../box'\nimport { IconButtonProps, IconButton } from '../button'\n\nimport styles from './modal.module.css'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\ntype ModalWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'full'\ntype ModalHeightMode = 'expand' | 'fitContent'\n\n//\n// ModalContext\n//\n\ntype ModalContextValue = {\n    onDismiss?(this: void): void\n    height: ModalHeightMode\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({\n    onDismiss: undefined,\n    height: 'fitContent',\n})\n\n//\n// Modal container\n//\n\ntype DivProps = Omit<\n    React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,\n    'className' | 'children' | `aria-label` | `aria-labelledby`\n>\n\nexport interface ModalProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The content of the modal.\n     */\n    children: React.ReactNode\n\n    /**\n     * Whether the modal is open and visible or not.\n     */\n    isOpen: boolean\n\n    /**\n     * Called when the user triggers closing the modal.\n     */\n    onDismiss?(): void\n\n    /**\n     * A descriptive setting for how wide the modal should aim to be, depending on how much space\n     * it has on screen.\n     * @default 'medium'\n     */\n    width?: ModalWidth\n\n    /**\n     * A descriptive setting for how tall the modal should aim to be.\n     *\n     * - 'expand': the modal aims to fill most of the available screen height, leaving only a small\n     *   padding above and below.\n     * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.\n     *\n     * In either case, if content does not fit, the content of the main body is set to scroll\n     * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the\n     * viewport boundaries.\n     *\n     * If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of\n     * the inner layout to ensure scroll, or whatever other strategy you may want.\n     */\n    height?: ModalHeightMode\n\n    /**\n     * Whether to set or not the focus initially to the first focusable element inside the modal.\n     */\n    autoFocus?: boolean\n\n    /**\n     * Controls if the modal is dismissed when pressing \"Escape\".\n     */\n    hideOnEscape?: DialogOptions['hideOnEscape']\n\n    /**\n     * Controls if the modal is dismissed when clicking outside the modal body, on the overlay.\n     */\n    hideOnInteractOutside?: DialogOptions['hideOnInteractOutside']\n\n    /**\n     * An escape hatch in case you need to provide a custom class name to the overlay element.\n     */\n    exceptionallySetOverlayClassName?: string\n\n    /**\n     * Defines a string value that labels the current modal for assistive technologies.\n     */\n    'aria-label'?: string\n\n    /**\n     * Identifies the element (or elements) that labels the current modal for assistive technologies.\n     */\n    'aria-labelledby'?: string\n\n    /**\n     * An HTML element or a memoized callback function that returns an HTML element to be used as\n     * the portal element. By default, the portal element will be a `div` element appended to the\n     * `document.body`.\n     *\n     * @default HTMLDivElement\n     *\n     * @example\n     * const [portal, setPortal] = useState(null);\n     * <Portal portalElement={portal} />;\n     * <div ref={setPortal} />;\n     *\n     * @example\n     * const getPortalElement = useCallback(() => {\n     *   const div = document.createElement(\"div\");\n     *   const portalRoot = document.getElementById(\"portal-root\");\n     *   portalRoot.appendChild(div);\n     *   return div;\n     * }, []);\n     * <Portal portalElement={getPortalElement} />;\n     */\n    portalElement?: PortalOptions['portalElement']\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n    return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/**\n * Renders a modal that sits on top of the rest of the content in the entire page.\n *\n * Follows the WAI-ARIA Dialog (Modal) Pattern.\n *\n * @see ModalHeader\n * @see ModalFooter\n * @see ModalBody\n */\nexport function Modal({\n    isOpen,\n    onDismiss,\n    height = 'fitContent',\n    width = 'medium',\n    exceptionallySetClassName,\n    exceptionallySetOverlayClassName,\n    autoFocus = true,\n    hideOnEscape = true,\n    hideOnInteractOutside = true,\n    children,\n    portalElement,\n    onKeyDown,\n    // @ts-expect-error we want to make sure to not pass it to the Dialog component\n    className,\n    ...props\n}: ModalProps) {\n    const setOpen = React.useCallback(\n        (visible: boolean) => {\n            if (!visible) {\n                onDismiss?.()\n            }\n        },\n        [onDismiss],\n    )\n    const store = useDialogStore({ open: isOpen, setOpen })\n\n    const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n        onDismiss,\n        height,\n    ])\n\n    const portalRef = React.useRef<HTMLElement | null>(null)\n    const dialogRef = React.useRef<HTMLDivElement | null>(null)\n    const backdropRef = React.useRef<HTMLDivElement | null>(null)\n    const handleBackdropClick = React.useCallback(\n        (event: React.MouseEvent) => {\n            if (\n                // The focus lock element takes up the same space as the backdrop and is where the event bubbles up from,\n                // so instead of checking the backdrop as the event target, we need to make sure it's just above the dialog\n                !dialogRef.current?.contains(event.target as Node) &&\n                // Events fired from other portals will bubble up to the backdrop, even if it isn't a child in the DOM\n                backdropRef.current?.contains(event.target as Node)\n            ) {\n                event.stopPropagation()\n                onDismiss?.()\n            }\n        },\n        [onDismiss],\n    )\n\n    React.useLayoutEffect(\n        function disableAccessibilityTreeOutside() {\n            if (!isOpen || !portalRef.current) {\n                return\n            }\n\n            return hideOthers(portalRef.current)\n        },\n        [isOpen],\n    )\n\n    const handleKeyDown = React.useCallback(\n        function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n            if (\n                hideOnEscape &&\n                onDismiss != null &&\n                event.key === 'Escape' &&\n                !event.defaultPrevented\n            ) {\n                event.stopPropagation()\n                onDismiss()\n            }\n            onKeyDown?.(event)\n        },\n        [onDismiss, hideOnEscape, onKeyDown],\n    )\n\n    if (!isOpen) {\n        return null\n    }\n\n    return (\n        <Portal portalRef={portalRef} portalElement={portalElement}>\n            <Box\n                data-testid=\"modal-overlay\"\n                data-overlay\n                className={classNames(\n                    styles.overlay,\n                    styles[height],\n                    styles[width],\n                    exceptionallySetOverlayClassName,\n                )}\n                /**\n                 * We're using `onPointerDown` instead of `onClick` to prevent the modal from\n                 * closing when the click starts inside the modal and ends on the backdrop.\n                 */\n                onPointerDown={hideOnInteractOutside ? handleBackdropClick : undefined}\n                ref={backdropRef}\n            >\n                <FocusLock\n                    autoFocus={autoFocus}\n                    whiteList={isNotInternalFrame}\n                    returnFocus={true}\n                    crossFrame={false}\n                >\n                    <Dialog\n                        {...props}\n                        ref={dialogRef}\n                        render={\n                            <Box\n                                borderRadius=\"full\"\n                                background=\"default\"\n                                display=\"flex\"\n                                flexDirection=\"column\"\n                                overflow=\"hidden\"\n                                height={height === 'expand' ? 'full' : undefined}\n                                flexGrow={height === 'expand' ? 1 : 0}\n                            />\n                        }\n                        className={classNames(exceptionallySetClassName, styles.container)}\n                        store={store}\n                        preventBodyScroll\n                        // Disable focus lock as we set up our own using ReactFocusLock\n                        modal={false}\n                        autoFocus={false}\n                        autoFocusOnShow={false}\n                        autoFocusOnHide={false}\n                        // Disable portal and backdrop as we control their markup\n                        portal={false}\n                        backdrop={false}\n                        hideOnInteractOutside={false}\n                        hideOnEscape={false}\n                        onKeyDown={handleKeyDown}\n                    >\n                        <ModalContext.Provider value={contextValue}>\n                            {children}\n                        </ModalContext.Provider>\n                    </Dialog>\n                </FocusLock>\n            </Box>\n        </Portal>\n    )\n}\n\n//\n// ModalCloseButton\n//\n\nexport interface ModalCloseButtonProps\n    extends Omit<\n        IconButtonProps,\n        'type' | 'variant' | 'icon' | 'disabled' | 'loading' | 'tabIndex' | 'ref'\n    > {\n    /**\n     * The descriptive label of the button.\n     */\n    'aria-label': string\n}\n\n/**\n * The close button rendered by ModalHeader. Provided independently so that consumers can customize\n * the button's label.\n *\n * @see ModalHeader\n */\nexport function ModalCloseButton(props: ModalCloseButtonProps) {\n    const { onDismiss } = React.useContext(ModalContext)\n    const [includeInTabOrder, setIncludeInTabOrder] = React.useState(false)\n    const [isMounted, setIsMounted] = React.useState(false)\n\n    React.useEffect(\n        function skipAutoFocus() {\n            if (isMounted) {\n                setIncludeInTabOrder(true)\n            } else {\n                setIsMounted(true)\n            }\n        },\n        [isMounted],\n    )\n\n    return (\n        <IconButton\n            {...props}\n            variant=\"quaternary\"\n            onClick={onDismiss}\n            icon={<CloseIcon />}\n            tabIndex={includeInTabOrder ? 0 : -1}\n        />\n    )\n}\n\n//\n// ModalHeader\n//\n\nexport interface ModalHeaderProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The content of the header.\n     */\n    children: React.ReactNode\n\n    /**\n     * Allows to provide a custom button element, or to omit the close button if set to false.\n     * @see ModalCloseButton\n     */\n    button?: React.ReactNode | boolean\n\n    /**\n     * Whether to render a divider line below the header.\n     * @default false\n     */\n    withDivider?: boolean\n}\n\n/**\n * Renders a standard modal header area with an optional close button.\n *\n * @see Modal\n * @see ModalFooter\n * @see ModalBody\n */\nexport function ModalHeader({\n    children,\n    button = true,\n    withDivider = false,\n    exceptionallySetClassName,\n    ...props\n}: ModalHeaderProps) {\n    return (\n        <>\n            <Box\n                {...props}\n                as=\"header\"\n                paddingLeft=\"large\"\n                paddingRight={button === false || button === null ? 'large' : 'small'}\n                paddingY=\"small\"\n                className={exceptionallySetClassName}\n            >\n                <Columns space=\"large\" alignY=\"center\">\n                    <Column width=\"auto\">{children}</Column>\n                    {button === false || button === null ? (\n                        <div className={styles.headerContent} />\n                    ) : (\n                        <Column\n                            width=\"content\"\n                            exceptionallySetClassName={styles.buttonContainer}\n                            data-testid=\"button-container\"\n                        >\n                            {typeof button === 'boolean' ? (\n                                <ModalCloseButton aria-label=\"Close modal\" autoFocus={false} />\n                            ) : (\n                                button\n                            )}\n                        </Column>\n                    )}\n                </Columns>\n            </Box>\n            {withDivider ? <Divider /> : null}\n        </>\n    )\n}\n\n//\n// ModalBody\n//\n\nexport interface ModalBodyProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The content of the modal body.\n     */\n    children: React.ReactNode\n}\n\n/**\n * Renders the body of a modal.\n *\n * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other\n * things, that the contet of the modal body expands or contracts depending on the modal height\n * setting or the size of the content. The body content also automatically scrolls when it's too\n * large to fit the available space.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalFooter\n */\nexport function ModalBody({ exceptionallySetClassName, children, ...props }: ModalBodyProps) {\n    const { height } = React.useContext(ModalContext)\n    return (\n        <Box\n            {...props}\n            className={exceptionallySetClassName}\n            flexGrow={height === 'expand' ? 1 : 0}\n            height={height === 'expand' ? 'full' : undefined}\n            overflow=\"auto\"\n        >\n            <Box padding=\"large\" paddingBottom=\"xxlarge\">\n                {children}\n            </Box>\n        </Box>\n    )\n}\n\n//\n// ModalFooter\n//\n\nexport interface ModalFooterProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The contant of the modal footer.\n     */\n    children: React.ReactNode\n    /**\n     * Whether to render a divider line below the footer.\n     * @default false\n     */\n    withDivider?: boolean\n}\n\n/**\n * Renders a standard modal footer area.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalBody\n */\nexport function ModalFooter({\n    exceptionallySetClassName,\n    withDivider = false,\n    ...props\n}: ModalFooterProps) {\n    return (\n        <>\n            {withDivider ? <Divider /> : null}\n            <Box as=\"footer\" {...props} className={exceptionallySetClassName} padding=\"large\" />\n        </>\n    )\n}\n\n//\n// ModalActions\n//\n\nexport type ModalActionsProps = ModalFooterProps\n\n/**\n * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).\n * @see ModalFooter\n */\nexport function ModalActions({ children, ...props }: ModalActionsProps) {\n    return (\n        <ModalFooter {...props}>\n            <Inline align=\"right\" space=\"large\">\n                {children}\n            </Inline>\n        </ModalFooter>\n    )\n}\n"],"names":["ModalContext","React","createContext","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","Modal","isOpen","width","exceptionallySetClassName","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement","onKeyDown","className","props","setOpen","useCallback","visible","store","useDialogStore","open","contextValue","useMemo","portalRef","useRef","dialogRef","backdropRef","handleBackdropClick","event","current","contains","target","stopPropagation","useLayoutEffect","disableAccessibilityTreeOutside","hideOthers","handleKeyDown","key","defaultPrevented","createElement","Portal","Box","classNames","styles","overlay","onPointerDown","ref","FocusLock","whiteList","returnFocus","crossFrame","Dialog","render","borderRadius","background","display","flexDirection","overflow","flexGrow","container","preventBodyScroll","modal","autoFocusOnShow","autoFocusOnHide","portal","backdrop","Provider","value","ModalCloseButton","useContext","includeInTabOrder","setIncludeInTabOrder","useState","isMounted","setIsMounted","useEffect","skipAutoFocus","IconButton","variant","onClick","icon","CloseIcon","tabIndex","ModalHeader","button","withDivider","Fragment","as","paddingLeft","paddingRight","paddingY","Columns","space","alignY","Column","headerContent","buttonContainer","Divider","ModalBody","padding","paddingBottom","ModalFooter","_objectSpread","ModalActions","Inline","align"],"mappings":"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"}
+{"version":3,"file":"modal.js","sources":["../../src/modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport FocusLock from 'react-focus-lock'\nimport { hideOthers } from 'aria-hidden'\n\nimport { Dialog, DialogOptions, useDialogStore, Portal, PortalOptions } from '@ariakit/react'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Column, Columns } from '../columns'\nimport { Inline } from '../inline'\nimport { Divider } from '../divider'\nimport { Box } from '../box'\nimport { IconButtonProps, IconButton } from '../button'\n\nimport styles from './modal.module.css'\nimport type { ObfuscatedClassName } from '../utils/common-types'\nimport { forwardRef } from 'react'\n\ntype ModalWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'full'\ntype ModalHeightMode = 'expand' | 'fitContent'\n\n//\n// ModalContext\n//\n\ntype ModalContextValue = {\n    onDismiss?(this: void): void\n    height: ModalHeightMode\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({\n    onDismiss: undefined,\n    height: 'fitContent',\n})\n\n//\n// Modal container\n//\n\ntype DivProps = Omit<\n    React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,\n    'className' | 'children' | `aria-label` | `aria-labelledby`\n>\n\nexport interface ModalProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The content of the modal.\n     */\n    children: React.ReactNode\n\n    /**\n     * Whether the modal is open and visible or not.\n     */\n    isOpen: boolean\n\n    /**\n     * Called when the user triggers closing the modal.\n     */\n    onDismiss?(): void\n\n    /**\n     * A descriptive setting for how wide the modal should aim to be, depending on how much space\n     * it has on screen.\n     * @default 'medium'\n     */\n    width?: ModalWidth\n\n    /**\n     * A descriptive setting for how tall the modal should aim to be.\n     *\n     * - 'expand': the modal aims to fill most of the available screen height, leaving only a small\n     *   padding above and below.\n     * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.\n     *\n     * In either case, if content does not fit, the content of the main body is set to scroll\n     * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the\n     * viewport boundaries.\n     *\n     * If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of\n     * the inner layout to ensure scroll, or whatever other strategy you may want.\n     */\n    height?: ModalHeightMode\n\n    /**\n     * Whether to set or not the focus initially to the first focusable element inside the modal.\n     */\n    autoFocus?: boolean\n\n    /**\n     * Controls if the modal is dismissed when pressing \"Escape\".\n     */\n    hideOnEscape?: DialogOptions['hideOnEscape']\n\n    /**\n     * Controls if the modal is dismissed when clicking outside the modal body, on the overlay.\n     */\n    hideOnInteractOutside?: DialogOptions['hideOnInteractOutside']\n\n    /**\n     * An escape hatch in case you need to provide a custom class name to the overlay element.\n     */\n    exceptionallySetOverlayClassName?: string\n\n    /**\n     * Defines a string value that labels the current modal for assistive technologies.\n     */\n    'aria-label'?: string\n\n    /**\n     * Identifies the element (or elements) that labels the current modal for assistive technologies.\n     */\n    'aria-labelledby'?: string\n\n    /**\n     * An HTML element or a memoized callback function that returns an HTML element to be used as\n     * the portal element. By default, the portal element will be a `div` element appended to the\n     * `document.body`.\n     *\n     * @default HTMLDivElement\n     *\n     * @example\n     * const [portal, setPortal] = useState(null);\n     * <Portal portalElement={portal} />;\n     * <div ref={setPortal} />;\n     *\n     * @example\n     * const getPortalElement = useCallback(() => {\n     *   const div = document.createElement(\"div\");\n     *   const portalRoot = document.getElementById(\"portal-root\");\n     *   portalRoot.appendChild(div);\n     *   return div;\n     * }, []);\n     * <Portal portalElement={getPortalElement} />;\n     */\n    portalElement?: PortalOptions['portalElement']\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n    return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/**\n * Renders a modal that sits on top of the rest of the content in the entire page.\n *\n * Follows the WAI-ARIA Dialog (Modal) Pattern.\n *\n * @see ModalHeader\n * @see ModalFooter\n * @see ModalBody\n */\nexport function Modal({\n    isOpen,\n    onDismiss,\n    height = 'fitContent',\n    width = 'medium',\n    exceptionallySetClassName,\n    exceptionallySetOverlayClassName,\n    autoFocus = true,\n    hideOnEscape = true,\n    hideOnInteractOutside = true,\n    children,\n    portalElement,\n    onKeyDown,\n    // @ts-expect-error we want to make sure to not pass it to the Dialog component\n    className,\n    ...props\n}: ModalProps) {\n    const setOpen = React.useCallback(\n        (visible: boolean) => {\n            if (!visible) {\n                onDismiss?.()\n            }\n        },\n        [onDismiss],\n    )\n    const store = useDialogStore({ open: isOpen, setOpen })\n\n    const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n        onDismiss,\n        height,\n    ])\n\n    const portalRef = React.useRef<HTMLElement | null>(null)\n    const dialogRef = React.useRef<HTMLDivElement | null>(null)\n    const backdropRef = React.useRef<HTMLDivElement | null>(null)\n    const handleBackdropClick = React.useCallback(\n        (event: React.MouseEvent) => {\n            if (\n                // The focus lock element takes up the same space as the backdrop and is where the event bubbles up from,\n                // so instead of checking the backdrop as the event target, we need to make sure it's just above the dialog\n                !dialogRef.current?.contains(event.target as Node) &&\n                // Events fired from other portals will bubble up to the backdrop, even if it isn't a child in the DOM\n                backdropRef.current?.contains(event.target as Node)\n            ) {\n                event.stopPropagation()\n                onDismiss?.()\n            }\n        },\n        [onDismiss],\n    )\n\n    React.useLayoutEffect(\n        function disableAccessibilityTreeOutside() {\n            if (!isOpen || !portalRef.current) {\n                return\n            }\n\n            return hideOthers(portalRef.current)\n        },\n        [isOpen],\n    )\n\n    const handleKeyDown = React.useCallback(\n        function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n            if (\n                hideOnEscape &&\n                onDismiss != null &&\n                event.key === 'Escape' &&\n                !event.defaultPrevented\n            ) {\n                event.stopPropagation()\n                onDismiss()\n            }\n            onKeyDown?.(event)\n        },\n        [onDismiss, hideOnEscape, onKeyDown],\n    )\n\n    if (!isOpen) {\n        return null\n    }\n\n    return (\n        <Portal portalRef={portalRef} portalElement={portalElement}>\n            <Box\n                data-testid=\"modal-overlay\"\n                data-overlay\n                className={classNames(\n                    styles.overlay,\n                    styles[height],\n                    styles[width],\n                    exceptionallySetOverlayClassName,\n                )}\n                /**\n                 * We're using `onPointerDown` instead of `onClick` to prevent the modal from\n                 * closing when the click starts inside the modal and ends on the backdrop.\n                 */\n                onPointerDown={hideOnInteractOutside ? handleBackdropClick : undefined}\n                ref={backdropRef}\n            >\n                <FocusLock\n                    autoFocus={autoFocus}\n                    whiteList={isNotInternalFrame}\n                    returnFocus={true}\n                    crossFrame={false}\n                >\n                    <Dialog\n                        {...props}\n                        ref={dialogRef}\n                        render={\n                            <Box\n                                borderRadius=\"full\"\n                                background=\"default\"\n                                display=\"flex\"\n                                flexDirection=\"column\"\n                                overflow=\"hidden\"\n                                height={height === 'expand' ? 'full' : undefined}\n                                flexGrow={height === 'expand' ? 1 : 0}\n                            />\n                        }\n                        className={classNames(exceptionallySetClassName, styles.container)}\n                        store={store}\n                        preventBodyScroll\n                        // Disable focus lock as we set up our own using ReactFocusLock\n                        modal={false}\n                        autoFocus={false}\n                        autoFocusOnShow={false}\n                        autoFocusOnHide={false}\n                        // Disable portal and backdrop as we control their markup\n                        portal={false}\n                        backdrop={false}\n                        hideOnInteractOutside={false}\n                        hideOnEscape={false}\n                        onKeyDown={handleKeyDown}\n                    >\n                        <ModalContext.Provider value={contextValue}>\n                            {children}\n                        </ModalContext.Provider>\n                    </Dialog>\n                </FocusLock>\n            </Box>\n        </Portal>\n    )\n}\n\n//\n// ModalCloseButton\n//\n\nexport interface ModalCloseButtonProps\n    extends Omit<\n        IconButtonProps,\n        'type' | 'variant' | 'icon' | 'disabled' | 'loading' | 'tabIndex' | 'ref'\n    > {\n    /**\n     * The descriptive label of the button.\n     */\n    'aria-label': string\n}\n\n/**\n * The close button rendered by ModalHeader. Provided independently so that consumers can customize\n * the button's label.\n *\n * @see ModalHeader\n */\nexport function ModalCloseButton(props: ModalCloseButtonProps) {\n    const { onDismiss } = React.useContext(ModalContext)\n    const [includeInTabOrder, setIncludeInTabOrder] = React.useState(false)\n    const [isMounted, setIsMounted] = React.useState(false)\n\n    React.useEffect(\n        function skipAutoFocus() {\n            if (isMounted) {\n                setIncludeInTabOrder(true)\n            } else {\n                setIsMounted(true)\n            }\n        },\n        [isMounted],\n    )\n\n    return (\n        <IconButton\n            {...props}\n            variant=\"quaternary\"\n            onClick={onDismiss}\n            icon={<CloseIcon />}\n            tabIndex={includeInTabOrder ? 0 : -1}\n        />\n    )\n}\n\n//\n// ModalHeader\n//\n\nexport interface ModalHeaderProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The content of the header.\n     */\n    children: React.ReactNode\n\n    /**\n     * Allows to provide a custom button element, or to omit the close button if set to false.\n     * @see ModalCloseButton\n     */\n    button?: React.ReactNode | boolean\n\n    /**\n     * Whether to render a divider line below the header.\n     * @default false\n     */\n    withDivider?: boolean\n}\n\n/**\n * Renders a standard modal header area with an optional close button.\n *\n * @see Modal\n * @see ModalFooter\n * @see ModalBody\n */\nexport function ModalHeader({\n    children,\n    button = true,\n    withDivider = false,\n    exceptionallySetClassName,\n    ...props\n}: ModalHeaderProps) {\n    return (\n        <>\n            <Box\n                {...props}\n                as=\"header\"\n                paddingLeft=\"large\"\n                paddingRight={button === false || button === null ? 'large' : 'small'}\n                paddingY=\"small\"\n                className={exceptionallySetClassName}\n            >\n                <Columns space=\"large\" alignY=\"center\">\n                    <Column width=\"auto\">{children}</Column>\n                    {button === false || button === null ? (\n                        <div className={styles.headerContent} />\n                    ) : (\n                        <Column\n                            width=\"content\"\n                            exceptionallySetClassName={styles.buttonContainer}\n                            data-testid=\"button-container\"\n                        >\n                            {typeof button === 'boolean' ? (\n                                <ModalCloseButton aria-label=\"Close modal\" autoFocus={false} />\n                            ) : (\n                                button\n                            )}\n                        </Column>\n                    )}\n                </Columns>\n            </Box>\n            {withDivider ? <Divider /> : null}\n        </>\n    )\n}\n\n//\n// ModalBody\n//\n\nexport interface ModalBodyProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The content of the modal body.\n     */\n    children: React.ReactNode\n}\n\n/**\n * Renders the body of a modal.\n *\n * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other\n * things, that the content of the modal body expands or contracts depending on the modal height\n * setting or the size of the content. The body content also automatically scrolls when it's too\n * large to fit the available space.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalFooter\n */\nexport const ModalBody = forwardRef<HTMLDivElement, ModalBodyProps>(function ModalBody(\n    { exceptionallySetClassName, children, ...props },\n    ref,\n) {\n    const { height } = React.useContext(ModalContext)\n    return (\n        <Box\n            {...props}\n            ref={ref}\n            className={exceptionallySetClassName}\n            flexGrow={height === 'expand' ? 1 : 0}\n            height={height === 'expand' ? 'full' : undefined}\n            overflow=\"auto\"\n        >\n            <Box padding=\"large\" paddingBottom=\"xxlarge\">\n                {children}\n            </Box>\n        </Box>\n    )\n})\n\n//\n// ModalFooter\n//\n\nexport interface ModalFooterProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The contant of the modal footer.\n     */\n    children: React.ReactNode\n    /**\n     * Whether to render a divider line below the footer.\n     * @default false\n     */\n    withDivider?: boolean\n}\n\n/**\n * Renders a standard modal footer area.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalBody\n */\nexport function ModalFooter({\n    exceptionallySetClassName,\n    withDivider = false,\n    ...props\n}: ModalFooterProps) {\n    return (\n        <>\n            {withDivider ? <Divider /> : null}\n            <Box as=\"footer\" {...props} className={exceptionallySetClassName} padding=\"large\" />\n        </>\n    )\n}\n\n//\n// ModalActions\n//\n\nexport type ModalActionsProps = ModalFooterProps\n\n/**\n * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).\n * @see ModalFooter\n */\nexport function ModalActions({ children, ...props }: ModalActionsProps) {\n    return (\n        <ModalFooter {...props}>\n            <Inline align=\"right\" space=\"large\">\n                {children}\n            </Inline>\n        </ModalFooter>\n    )\n}\n"],"names":["ModalContext","React","createContext","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","Modal","isOpen","width","exceptionallySetClassName","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement","onKeyDown","className","props","setOpen","useCallback","visible","store","useDialogStore","open","contextValue","useMemo","portalRef","useRef","dialogRef","backdropRef","handleBackdropClick","event","current","contains","target","stopPropagation","useLayoutEffect","disableAccessibilityTreeOutside","hideOthers","handleKeyDown","key","defaultPrevented","createElement","Portal","Box","classNames","styles","overlay","onPointerDown","ref","FocusLock","whiteList","returnFocus","crossFrame","Dialog","render","borderRadius","background","display","flexDirection","overflow","flexGrow","container","preventBodyScroll","modal","autoFocusOnShow","autoFocusOnHide","portal","backdrop","Provider","value","ModalCloseButton","useContext","includeInTabOrder","setIncludeInTabOrder","useState","isMounted","setIsMounted","useEffect","skipAutoFocus","IconButton","variant","onClick","icon","CloseIcon","tabIndex","ModalHeader","button","withDivider","Fragment","as","paddingLeft","paddingRight","paddingY","Columns","space","alignY","Column","headerContent","buttonContainer","Divider","ModalBody","forwardRef","padding","paddingBottom","ModalFooter","_objectSpread","ModalActions","Inline","align"],"mappings":"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"}

package/lib/modal/modal-stories-components.d.ts

@@ -30,7 +30,7 @@ declare namespace ModalButton {
 type WithOptionals<Props, Keys extends keyof Props> = Omit<Props, Keys> & Partial<Pick<Props, Keys>>;
 declare function Modal(props: WithOptionals<ModalProps, 'isOpen' | 'onDismiss' | 'width' | 'height'>): React.JSX.Element;
 declare function ModalHeader(props: WithOptionals<ModalHeaderProps, 'withDivider' | 'button'>): React.JSX.Element;
-declare const ModalBody: typeof ModalComponents.ModalBody;
+declare const ModalBody: React.ForwardRefExoticComponent<Omit<ModalComponents.ModalBodyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare function ModalFooter(props: WithOptionals<ModalFooterProps, 'withDivider'>): React.JSX.Element;
 declare function ModalActions(props: WithOptionals<ModalFooterProps, 'withDivider'>): React.JSX.Element;
 /**

package/lib/modal/modal.d.ts

@@ -143,7 +143,7 @@ export interface ModalBodyProps extends DivProps, ObfuscatedClassName {
  * Renders the body of a modal.
  *
  * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other
- * things, that the contet of the modal body expands or contracts depending on the modal height
+ * things, that the content of the modal body expands or contracts depending on the modal height
  * setting or the size of the content. The body content also automatically scrolls when it's too
  * large to fit the available space.
  *
@@ -151,7 +151,7 @@ export interface ModalBodyProps extends DivProps, ObfuscatedClassName {
  * @see ModalHeader
  * @see ModalFooter
  */
-export declare function ModalBody({ exceptionallySetClassName, children, ...props }: ModalBodyProps): React.JSX.Element;
+export declare const ModalBody: React.ForwardRefExoticComponent<Omit<ModalBodyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ModalFooterProps extends DivProps, ObfuscatedClassName {
     /**
      * The contant of the modal footer.

package/lib/modal/modal.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),a=require("classnames"),n=require("react-focus-lock"),l=require("aria-hidden"),r=require("@ariakit/react"),o=require("../icons/close-icon.js"),i=require("../columns/columns.js"),u=require("../inline/inline.js"),c=require("../divider/divider.js"),s=require("../box/box.js"),d=require("../button/button.js"),m=require("./modal.module.css.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function f(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var n=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,n.get?n:{enumerable:!0,get:function(){return e[a]}})}})),t.default=e,t}var h=f(t),b=p(a),x=p(n);const g=["isOpen","onDismiss","height","width","exceptionallySetClassName","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement","onKeyDown","className"],E=["children","button","withDivider","exceptionallySetClassName"],v=["exceptionallySetClassName","children"],y=["exceptionallySetClassName","withDivider"],j=["children"],C=h.createContext({onDismiss:void 0,height:"fitContent"});function S(e){return!(e.ownerDocument===document&&"iframe"===e.tagName.toLowerCase())}function O(t){const{onDismiss:a}=h.useContext(C),[n,l]=h.useState(!1),[r,i]=h.useState(!1);return h.useEffect((function(){r?l(!0):i(!0)}),[r]),h.createElement(d.IconButton,e.objectSpread2(e.objectSpread2({},t),{},{variant:"quaternary",onClick:a,icon:h.createElement(o.CloseIcon,null),tabIndex:n?0:-1}))}function w(t){let{exceptionallySetClassName:a,withDivider:n=!1}=t,l=e.objectWithoutProperties(t,y);return h.createElement(h.Fragment,null,n?h.createElement(c.Divider,null):null,h.createElement(s.Box,e.objectSpread2(e.objectSpread2({as:"footer"},l),{},{className:a,padding:"large"})))}exports.Modal=function(t){let{isOpen:a,onDismiss:n,height:o="fitContent",width:i="medium",exceptionallySetClassName:u,exceptionallySetOverlayClassName:c,autoFocus:d=!0,hideOnEscape:p=!0,hideOnInteractOutside:f=!0,children:E,portalElement:v,onKeyDown:y}=t,j=e.objectWithoutProperties(t,g);const O=h.useCallback(e=>{e||null==n||n()},[n]),w=r.useDialogStore({open:a,setOpen:O}),D=h.useMemo(()=>({onDismiss:n,height:o}),[n,o]),N=h.useRef(null),P=h.useRef(null),q=h.useRef(null),B=h.useCallback(e=>{var t,a;null!=(t=P.current)&&t.contains(e.target)||null==(a=q.current)||!a.contains(e.target)||(e.stopPropagation(),null==n||n())},[n]);h.useLayoutEffect((function(){if(a&&N.current)return l.hideOthers(N.current)}),[a]);const F=h.useCallback((function(e){p&&null!=n&&"Escape"===e.key&&!e.defaultPrevented&&(e.stopPropagation(),n()),null==y||y(e)}),[n,p,y]);return a?h.createElement(r.Portal,{portalRef:N,portalElement:v},h.createElement(s.Box,{"data-testid":"modal-overlay","data-overlay":!0,className:b.default(m.default.overlay,m.default[o],m.default[i],c),onPointerDown:f?B:void 0,ref:q},h.createElement(x.default,{autoFocus:d,whiteList:S,returnFocus:!0,crossFrame:!1},h.createElement(r.Dialog,e.objectSpread2(e.objectSpread2({},j),{},{ref:P,render:h.createElement(s.Box,{borderRadius:"full",background:"default",display:"flex",flexDirection:"column",overflow:"hidden",height:"expand"===o?"full":void 0,flexGrow:"expand"===o?1:0}),className:b.default(u,m.default.container),store:w,preventBodyScroll:!0,modal:!1,autoFocus:!1,autoFocusOnShow:!1,autoFocusOnHide:!1,portal:!1,backdrop:!1,hideOnInteractOutside:!1,hideOnEscape:!1,onKeyDown:F}),h.createElement(C.Provider,{value:D},E))))):null},exports.ModalActions=function(t){let{children:a}=t,n=e.objectWithoutProperties(t,j);return h.createElement(w,e.objectSpread2({},n),h.createElement(u.Inline,{align:"right",space:"large"},a))},exports.ModalBody=function(t){let{exceptionallySetClassName:a,children:n}=t,l=e.objectWithoutProperties(t,v);const{height:r}=h.useContext(C);return h.createElement(s.Box,e.objectSpread2(e.objectSpread2({},l),{},{className:a,flexGrow:"expand"===r?1:0,height:"expand"===r?"full":void 0,overflow:"auto"}),h.createElement(s.Box,{padding:"large",paddingBottom:"xxlarge"},n))},exports.ModalCloseButton=O,exports.ModalFooter=w,exports.ModalHeader=function(t){let{children:a,button:n=!0,withDivider:l=!1,exceptionallySetClassName:r}=t,o=e.objectWithoutProperties(t,E);return h.createElement(h.Fragment,null,h.createElement(s.Box,e.objectSpread2(e.objectSpread2({},o),{},{as:"header",paddingLeft:"large",paddingRight:!1===n||null===n?"large":"small",paddingY:"small",className:r}),h.createElement(i.Columns,{space:"large",alignY:"center"},h.createElement(i.Column,{width:"auto"},a),!1===n||null===n?h.createElement("div",{className:m.default.headerContent}):h.createElement(i.Column,{width:"content",exceptionallySetClassName:m.default.buttonContainer,"data-testid":"button-container"},"boolean"==typeof n?h.createElement(O,{"aria-label":"Close modal",autoFocus:!1}):n))),l?h.createElement(c.Divider,null):null)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),a=require("classnames"),n=require("react-focus-lock"),r=require("aria-hidden"),l=require("@ariakit/react"),o=require("../icons/close-icon.js"),i=require("../columns/columns.js"),c=require("../inline/inline.js"),u=require("../divider/divider.js"),s=require("../box/box.js"),d=require("../button/button.js"),m=require("./modal.module.css.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function f(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var n=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,n.get?n:{enumerable:!0,get:function(){return e[a]}})}})),t.default=e,t}var h=f(t),b=p(a),x=p(n);const g=["isOpen","onDismiss","height","width","exceptionallySetClassName","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement","onKeyDown","className"],E=["children","button","withDivider","exceptionallySetClassName"],v=["exceptionallySetClassName","children"],y=["exceptionallySetClassName","withDivider"],j=["children"],C=h.createContext({onDismiss:void 0,height:"fitContent"});function S(e){return!(e.ownerDocument===document&&"iframe"===e.tagName.toLowerCase())}function O(t){const{onDismiss:a}=h.useContext(C),[n,r]=h.useState(!1),[l,i]=h.useState(!1);return h.useEffect((function(){l?r(!0):i(!0)}),[l]),h.createElement(d.IconButton,e.objectSpread2(e.objectSpread2({},t),{},{variant:"quaternary",onClick:a,icon:h.createElement(o.CloseIcon,null),tabIndex:n?0:-1}))}const w=t.forwardRef((function(t,a){let{exceptionallySetClassName:n,children:r}=t,l=e.objectWithoutProperties(t,v);const{height:o}=h.useContext(C);return h.createElement(s.Box,e.objectSpread2(e.objectSpread2({},l),{},{ref:a,className:n,flexGrow:"expand"===o?1:0,height:"expand"===o?"full":void 0,overflow:"auto"}),h.createElement(s.Box,{padding:"large",paddingBottom:"xxlarge"},r))}));function D(t){let{exceptionallySetClassName:a,withDivider:n=!1}=t,r=e.objectWithoutProperties(t,y);return h.createElement(h.Fragment,null,n?h.createElement(u.Divider,null):null,h.createElement(s.Box,e.objectSpread2(e.objectSpread2({as:"footer"},r),{},{className:a,padding:"large"})))}exports.Modal=function(t){let{isOpen:a,onDismiss:n,height:o="fitContent",width:i="medium",exceptionallySetClassName:c,exceptionallySetOverlayClassName:u,autoFocus:d=!0,hideOnEscape:p=!0,hideOnInteractOutside:f=!0,children:E,portalElement:v,onKeyDown:y}=t,j=e.objectWithoutProperties(t,g);const O=h.useCallback(e=>{e||null==n||n()},[n]),w=l.useDialogStore({open:a,setOpen:O}),D=h.useMemo(()=>({onDismiss:n,height:o}),[n,o]),N=h.useRef(null),P=h.useRef(null),q=h.useRef(null),B=h.useCallback(e=>{var t,a;null!=(t=P.current)&&t.contains(e.target)||null==(a=q.current)||!a.contains(e.target)||(e.stopPropagation(),null==n||n())},[n]);h.useLayoutEffect((function(){if(a&&N.current)return r.hideOthers(N.current)}),[a]);const F=h.useCallback((function(e){p&&null!=n&&"Escape"===e.key&&!e.defaultPrevented&&(e.stopPropagation(),n()),null==y||y(e)}),[n,p,y]);return a?h.createElement(l.Portal,{portalRef:N,portalElement:v},h.createElement(s.Box,{"data-testid":"modal-overlay","data-overlay":!0,className:b.default(m.default.overlay,m.default[o],m.default[i],u),onPointerDown:f?B:void 0,ref:q},h.createElement(x.default,{autoFocus:d,whiteList:S,returnFocus:!0,crossFrame:!1},h.createElement(l.Dialog,e.objectSpread2(e.objectSpread2({},j),{},{ref:P,render:h.createElement(s.Box,{borderRadius:"full",background:"default",display:"flex",flexDirection:"column",overflow:"hidden",height:"expand"===o?"full":void 0,flexGrow:"expand"===o?1:0}),className:b.default(c,m.default.container),store:w,preventBodyScroll:!0,modal:!1,autoFocus:!1,autoFocusOnShow:!1,autoFocusOnHide:!1,portal:!1,backdrop:!1,hideOnInteractOutside:!1,hideOnEscape:!1,onKeyDown:F}),h.createElement(C.Provider,{value:D},E))))):null},exports.ModalActions=function(t){let{children:a}=t,n=e.objectWithoutProperties(t,j);return h.createElement(D,e.objectSpread2({},n),h.createElement(c.Inline,{align:"right",space:"large"},a))},exports.ModalBody=w,exports.ModalCloseButton=O,exports.ModalFooter=D,exports.ModalHeader=function(t){let{children:a,button:n=!0,withDivider:r=!1,exceptionallySetClassName:l}=t,o=e.objectWithoutProperties(t,E);return h.createElement(h.Fragment,null,h.createElement(s.Box,e.objectSpread2(e.objectSpread2({},o),{},{as:"header",paddingLeft:"large",paddingRight:!1===n||null===n?"large":"small",paddingY:"small",className:l}),h.createElement(i.Columns,{space:"large",alignY:"center"},h.createElement(i.Column,{width:"auto"},a),!1===n||null===n?h.createElement("div",{className:m.default.headerContent}):h.createElement(i.Column,{width:"content",exceptionallySetClassName:m.default.buttonContainer,"data-testid":"button-container"},"boolean"==typeof n?h.createElement(O,{"aria-label":"Close modal",autoFocus:!1}):n))),r?h.createElement(u.Divider,null):null)};
 //# sourceMappingURL=modal.js.map

package/lib/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../src/modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport FocusLock from 'react-focus-lock'\nimport { hideOthers } from 'aria-hidden'\n\nimport { Dialog, DialogOptions, useDialogStore, Portal, PortalOptions } from '@ariakit/react'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Column, Columns } from '../columns'\nimport { Inline } from '../inline'\nimport { Divider } from '../divider'\nimport { Box } from '../box'\nimport { IconButtonProps, IconButton } from '../button'\n\nimport styles from './modal.module.css'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\ntype ModalWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'full'\ntype ModalHeightMode = 'expand' | 'fitContent'\n\n//\n// ModalContext\n//\n\ntype ModalContextValue = {\n    onDismiss?(this: void): void\n    height: ModalHeightMode\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({\n    onDismiss: undefined,\n    height: 'fitContent',\n})\n\n//\n// Modal container\n//\n\ntype DivProps = Omit<\n    React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,\n    'className' | 'children' | `aria-label` | `aria-labelledby`\n>\n\nexport interface ModalProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The content of the modal.\n     */\n    children: React.ReactNode\n\n    /**\n     * Whether the modal is open and visible or not.\n     */\n    isOpen: boolean\n\n    /**\n     * Called when the user triggers closing the modal.\n     */\n    onDismiss?(): void\n\n    /**\n     * A descriptive setting for how wide the modal should aim to be, depending on how much space\n     * it has on screen.\n     * @default 'medium'\n     */\n    width?: ModalWidth\n\n    /**\n     * A descriptive setting for how tall the modal should aim to be.\n     *\n     * - 'expand': the modal aims to fill most of the available screen height, leaving only a small\n     *   padding above and below.\n     * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.\n     *\n     * In either case, if content does not fit, the content of the main body is set to scroll\n     * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the\n     * viewport boundaries.\n     *\n     * If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of\n     * the inner layout to ensure scroll, or whatever other strategy you may want.\n     */\n    height?: ModalHeightMode\n\n    /**\n     * Whether to set or not the focus initially to the first focusable element inside the modal.\n     */\n    autoFocus?: boolean\n\n    /**\n     * Controls if the modal is dismissed when pressing \"Escape\".\n     */\n    hideOnEscape?: DialogOptions['hideOnEscape']\n\n    /**\n     * Controls if the modal is dismissed when clicking outside the modal body, on the overlay.\n     */\n    hideOnInteractOutside?: DialogOptions['hideOnInteractOutside']\n\n    /**\n     * An escape hatch in case you need to provide a custom class name to the overlay element.\n     */\n    exceptionallySetOverlayClassName?: string\n\n    /**\n     * Defines a string value that labels the current modal for assistive technologies.\n     */\n    'aria-label'?: string\n\n    /**\n     * Identifies the element (or elements) that labels the current modal for assistive technologies.\n     */\n    'aria-labelledby'?: string\n\n    /**\n     * An HTML element or a memoized callback function that returns an HTML element to be used as\n     * the portal element. By default, the portal element will be a `div` element appended to the\n     * `document.body`.\n     *\n     * @default HTMLDivElement\n     *\n     * @example\n     * const [portal, setPortal] = useState(null);\n     * <Portal portalElement={portal} />;\n     * <div ref={setPortal} />;\n     *\n     * @example\n     * const getPortalElement = useCallback(() => {\n     *   const div = document.createElement(\"div\");\n     *   const portalRoot = document.getElementById(\"portal-root\");\n     *   portalRoot.appendChild(div);\n     *   return div;\n     * }, []);\n     * <Portal portalElement={getPortalElement} />;\n     */\n    portalElement?: PortalOptions['portalElement']\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n    return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/**\n * Renders a modal that sits on top of the rest of the content in the entire page.\n *\n * Follows the WAI-ARIA Dialog (Modal) Pattern.\n *\n * @see ModalHeader\n * @see ModalFooter\n * @see ModalBody\n */\nexport function Modal({\n    isOpen,\n    onDismiss,\n    height = 'fitContent',\n    width = 'medium',\n    exceptionallySetClassName,\n    exceptionallySetOverlayClassName,\n    autoFocus = true,\n    hideOnEscape = true,\n    hideOnInteractOutside = true,\n    children,\n    portalElement,\n    onKeyDown,\n    // @ts-expect-error we want to make sure to not pass it to the Dialog component\n    className,\n    ...props\n}: ModalProps) {\n    const setOpen = React.useCallback(\n        (visible: boolean) => {\n            if (!visible) {\n                onDismiss?.()\n            }\n        },\n        [onDismiss],\n    )\n    const store = useDialogStore({ open: isOpen, setOpen })\n\n    const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n        onDismiss,\n        height,\n    ])\n\n    const portalRef = React.useRef<HTMLElement | null>(null)\n    const dialogRef = React.useRef<HTMLDivElement | null>(null)\n    const backdropRef = React.useRef<HTMLDivElement | null>(null)\n    const handleBackdropClick = React.useCallback(\n        (event: React.MouseEvent) => {\n            if (\n                // The focus lock element takes up the same space as the backdrop and is where the event bubbles up from,\n                // so instead of checking the backdrop as the event target, we need to make sure it's just above the dialog\n                !dialogRef.current?.contains(event.target as Node) &&\n                // Events fired from other portals will bubble up to the backdrop, even if it isn't a child in the DOM\n                backdropRef.current?.contains(event.target as Node)\n            ) {\n                event.stopPropagation()\n                onDismiss?.()\n            }\n        },\n        [onDismiss],\n    )\n\n    React.useLayoutEffect(\n        function disableAccessibilityTreeOutside() {\n            if (!isOpen || !portalRef.current) {\n                return\n            }\n\n            return hideOthers(portalRef.current)\n        },\n        [isOpen],\n    )\n\n    const handleKeyDown = React.useCallback(\n        function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n            if (\n                hideOnEscape &&\n                onDismiss != null &&\n                event.key === 'Escape' &&\n                !event.defaultPrevented\n            ) {\n                event.stopPropagation()\n                onDismiss()\n            }\n            onKeyDown?.(event)\n        },\n        [onDismiss, hideOnEscape, onKeyDown],\n    )\n\n    if (!isOpen) {\n        return null\n    }\n\n    return (\n        <Portal portalRef={portalRef} portalElement={portalElement}>\n            <Box\n                data-testid=\"modal-overlay\"\n                data-overlay\n                className={classNames(\n                    styles.overlay,\n                    styles[height],\n                    styles[width],\n                    exceptionallySetOverlayClassName,\n                )}\n                /**\n                 * We're using `onPointerDown` instead of `onClick` to prevent the modal from\n                 * closing when the click starts inside the modal and ends on the backdrop.\n                 */\n                onPointerDown={hideOnInteractOutside ? handleBackdropClick : undefined}\n                ref={backdropRef}\n            >\n                <FocusLock\n                    autoFocus={autoFocus}\n                    whiteList={isNotInternalFrame}\n                    returnFocus={true}\n                    crossFrame={false}\n                >\n                    <Dialog\n                        {...props}\n                        ref={dialogRef}\n                        render={\n                            <Box\n                                borderRadius=\"full\"\n                                background=\"default\"\n                                display=\"flex\"\n                                flexDirection=\"column\"\n                                overflow=\"hidden\"\n                                height={height === 'expand' ? 'full' : undefined}\n                                flexGrow={height === 'expand' ? 1 : 0}\n                            />\n                        }\n                        className={classNames(exceptionallySetClassName, styles.container)}\n                        store={store}\n                        preventBodyScroll\n                        // Disable focus lock as we set up our own using ReactFocusLock\n                        modal={false}\n                        autoFocus={false}\n                        autoFocusOnShow={false}\n                        autoFocusOnHide={false}\n                        // Disable portal and backdrop as we control their markup\n                        portal={false}\n                        backdrop={false}\n                        hideOnInteractOutside={false}\n                        hideOnEscape={false}\n                        onKeyDown={handleKeyDown}\n                    >\n                        <ModalContext.Provider value={contextValue}>\n                            {children}\n                        </ModalContext.Provider>\n                    </Dialog>\n                </FocusLock>\n            </Box>\n        </Portal>\n    )\n}\n\n//\n// ModalCloseButton\n//\n\nexport interface ModalCloseButtonProps\n    extends Omit<\n        IconButtonProps,\n        'type' | 'variant' | 'icon' | 'disabled' | 'loading' | 'tabIndex' | 'ref'\n    > {\n    /**\n     * The descriptive label of the button.\n     */\n    'aria-label': string\n}\n\n/**\n * The close button rendered by ModalHeader. Provided independently so that consumers can customize\n * the button's label.\n *\n * @see ModalHeader\n */\nexport function ModalCloseButton(props: ModalCloseButtonProps) {\n    const { onDismiss } = React.useContext(ModalContext)\n    const [includeInTabOrder, setIncludeInTabOrder] = React.useState(false)\n    const [isMounted, setIsMounted] = React.useState(false)\n\n    React.useEffect(\n        function skipAutoFocus() {\n            if (isMounted) {\n                setIncludeInTabOrder(true)\n            } else {\n                setIsMounted(true)\n            }\n        },\n        [isMounted],\n    )\n\n    return (\n        <IconButton\n            {...props}\n            variant=\"quaternary\"\n            onClick={onDismiss}\n            icon={<CloseIcon />}\n            tabIndex={includeInTabOrder ? 0 : -1}\n        />\n    )\n}\n\n//\n// ModalHeader\n//\n\nexport interface ModalHeaderProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The content of the header.\n     */\n    children: React.ReactNode\n\n    /**\n     * Allows to provide a custom button element, or to omit the close button if set to false.\n     * @see ModalCloseButton\n     */\n    button?: React.ReactNode | boolean\n\n    /**\n     * Whether to render a divider line below the header.\n     * @default false\n     */\n    withDivider?: boolean\n}\n\n/**\n * Renders a standard modal header area with an optional close button.\n *\n * @see Modal\n * @see ModalFooter\n * @see ModalBody\n */\nexport function ModalHeader({\n    children,\n    button = true,\n    withDivider = false,\n    exceptionallySetClassName,\n    ...props\n}: ModalHeaderProps) {\n    return (\n        <>\n            <Box\n                {...props}\n                as=\"header\"\n                paddingLeft=\"large\"\n                paddingRight={button === false || button === null ? 'large' : 'small'}\n                paddingY=\"small\"\n                className={exceptionallySetClassName}\n            >\n                <Columns space=\"large\" alignY=\"center\">\n                    <Column width=\"auto\">{children}</Column>\n                    {button === false || button === null ? (\n                        <div className={styles.headerContent} />\n                    ) : (\n                        <Column\n                            width=\"content\"\n                            exceptionallySetClassName={styles.buttonContainer}\n                            data-testid=\"button-container\"\n                        >\n                            {typeof button === 'boolean' ? (\n                                <ModalCloseButton aria-label=\"Close modal\" autoFocus={false} />\n                            ) : (\n                                button\n                            )}\n                        </Column>\n                    )}\n                </Columns>\n            </Box>\n            {withDivider ? <Divider /> : null}\n        </>\n    )\n}\n\n//\n// ModalBody\n//\n\nexport interface ModalBodyProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The content of the modal body.\n     */\n    children: React.ReactNode\n}\n\n/**\n * Renders the body of a modal.\n *\n * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other\n * things, that the contet of the modal body expands or contracts depending on the modal height\n * setting or the size of the content. The body content also automatically scrolls when it's too\n * large to fit the available space.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalFooter\n */\nexport function ModalBody({ exceptionallySetClassName, children, ...props }: ModalBodyProps) {\n    const { height } = React.useContext(ModalContext)\n    return (\n        <Box\n            {...props}\n            className={exceptionallySetClassName}\n            flexGrow={height === 'expand' ? 1 : 0}\n            height={height === 'expand' ? 'full' : undefined}\n            overflow=\"auto\"\n        >\n            <Box padding=\"large\" paddingBottom=\"xxlarge\">\n                {children}\n            </Box>\n        </Box>\n    )\n}\n\n//\n// ModalFooter\n//\n\nexport interface ModalFooterProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The contant of the modal footer.\n     */\n    children: React.ReactNode\n    /**\n     * Whether to render a divider line below the footer.\n     * @default false\n     */\n    withDivider?: boolean\n}\n\n/**\n * Renders a standard modal footer area.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalBody\n */\nexport function ModalFooter({\n    exceptionallySetClassName,\n    withDivider = false,\n    ...props\n}: ModalFooterProps) {\n    return (\n        <>\n            {withDivider ? <Divider /> : null}\n            <Box as=\"footer\" {...props} className={exceptionallySetClassName} padding=\"large\" />\n        </>\n    )\n}\n\n//\n// ModalActions\n//\n\nexport type ModalActionsProps = ModalFooterProps\n\n/**\n * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).\n * @see ModalFooter\n */\nexport function ModalActions({ children, ...props }: ModalActionsProps) {\n    return (\n        <ModalFooter {...props}>\n            <Inline align=\"right\" space=\"large\">\n                {children}\n            </Inline>\n        </ModalFooter>\n    )\n}\n"],"names":["ModalContext","React","createContext","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","ModalCloseButton","props","useContext","includeInTabOrder","setIncludeInTabOrder","useState","isMounted","setIsMounted","useEffect","createElement","IconButton","variant","onClick","icon","CloseIcon","tabIndex","ModalFooter","_ref4","exceptionallySetClassName","withDivider","_objectWithoutProperties","objectWithoutProperties","_excluded4","Fragment","Divider","Box","_objectSpread","objectSpread2","as","className","padding","_ref","isOpen","width","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement","onKeyDown","_excluded","setOpen","useCallback","visible","store","useDialogStore","open","contextValue","useMemo","portalRef","useRef","dialogRef","backdropRef","handleBackdropClick","event","_dialogRef$current","_backdropRef$current","current","contains","target","stopPropagation","useLayoutEffect","hideOthers","handleKeyDown","key","defaultPrevented","Portal","data-overlay","classNames","styles","overlay","onPointerDown","ref","FocusLock","whiteList","returnFocus","crossFrame","Dialog","render","borderRadius","background","display","flexDirection","overflow","flexGrow","container","preventBodyScroll","modal","autoFocusOnShow","autoFocusOnHide","portal","backdrop","Provider","value","_ref5","_excluded5","Inline","align","space","_ref3","_excluded3","paddingBottom","_ref2","button","_excluded2","paddingLeft","paddingRight","paddingY","Columns","alignY","Column","headerContent","buttonContainer","data-testid","aria-label"],"mappings":"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"}
+{"version":3,"file":"modal.js","sources":["../../src/modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport FocusLock from 'react-focus-lock'\nimport { hideOthers } from 'aria-hidden'\n\nimport { Dialog, DialogOptions, useDialogStore, Portal, PortalOptions } from '@ariakit/react'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Column, Columns } from '../columns'\nimport { Inline } from '../inline'\nimport { Divider } from '../divider'\nimport { Box } from '../box'\nimport { IconButtonProps, IconButton } from '../button'\n\nimport styles from './modal.module.css'\nimport type { ObfuscatedClassName } from '../utils/common-types'\nimport { forwardRef } from 'react'\n\ntype ModalWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'full'\ntype ModalHeightMode = 'expand' | 'fitContent'\n\n//\n// ModalContext\n//\n\ntype ModalContextValue = {\n    onDismiss?(this: void): void\n    height: ModalHeightMode\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({\n    onDismiss: undefined,\n    height: 'fitContent',\n})\n\n//\n// Modal container\n//\n\ntype DivProps = Omit<\n    React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,\n    'className' | 'children' | `aria-label` | `aria-labelledby`\n>\n\nexport interface ModalProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The content of the modal.\n     */\n    children: React.ReactNode\n\n    /**\n     * Whether the modal is open and visible or not.\n     */\n    isOpen: boolean\n\n    /**\n     * Called when the user triggers closing the modal.\n     */\n    onDismiss?(): void\n\n    /**\n     * A descriptive setting for how wide the modal should aim to be, depending on how much space\n     * it has on screen.\n     * @default 'medium'\n     */\n    width?: ModalWidth\n\n    /**\n     * A descriptive setting for how tall the modal should aim to be.\n     *\n     * - 'expand': the modal aims to fill most of the available screen height, leaving only a small\n     *   padding above and below.\n     * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.\n     *\n     * In either case, if content does not fit, the content of the main body is set to scroll\n     * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the\n     * viewport boundaries.\n     *\n     * If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of\n     * the inner layout to ensure scroll, or whatever other strategy you may want.\n     */\n    height?: ModalHeightMode\n\n    /**\n     * Whether to set or not the focus initially to the first focusable element inside the modal.\n     */\n    autoFocus?: boolean\n\n    /**\n     * Controls if the modal is dismissed when pressing \"Escape\".\n     */\n    hideOnEscape?: DialogOptions['hideOnEscape']\n\n    /**\n     * Controls if the modal is dismissed when clicking outside the modal body, on the overlay.\n     */\n    hideOnInteractOutside?: DialogOptions['hideOnInteractOutside']\n\n    /**\n     * An escape hatch in case you need to provide a custom class name to the overlay element.\n     */\n    exceptionallySetOverlayClassName?: string\n\n    /**\n     * Defines a string value that labels the current modal for assistive technologies.\n     */\n    'aria-label'?: string\n\n    /**\n     * Identifies the element (or elements) that labels the current modal for assistive technologies.\n     */\n    'aria-labelledby'?: string\n\n    /**\n     * An HTML element or a memoized callback function that returns an HTML element to be used as\n     * the portal element. By default, the portal element will be a `div` element appended to the\n     * `document.body`.\n     *\n     * @default HTMLDivElement\n     *\n     * @example\n     * const [portal, setPortal] = useState(null);\n     * <Portal portalElement={portal} />;\n     * <div ref={setPortal} />;\n     *\n     * @example\n     * const getPortalElement = useCallback(() => {\n     *   const div = document.createElement(\"div\");\n     *   const portalRoot = document.getElementById(\"portal-root\");\n     *   portalRoot.appendChild(div);\n     *   return div;\n     * }, []);\n     * <Portal portalElement={getPortalElement} />;\n     */\n    portalElement?: PortalOptions['portalElement']\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n    return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/**\n * Renders a modal that sits on top of the rest of the content in the entire page.\n *\n * Follows the WAI-ARIA Dialog (Modal) Pattern.\n *\n * @see ModalHeader\n * @see ModalFooter\n * @see ModalBody\n */\nexport function Modal({\n    isOpen,\n    onDismiss,\n    height = 'fitContent',\n    width = 'medium',\n    exceptionallySetClassName,\n    exceptionallySetOverlayClassName,\n    autoFocus = true,\n    hideOnEscape = true,\n    hideOnInteractOutside = true,\n    children,\n    portalElement,\n    onKeyDown,\n    // @ts-expect-error we want to make sure to not pass it to the Dialog component\n    className,\n    ...props\n}: ModalProps) {\n    const setOpen = React.useCallback(\n        (visible: boolean) => {\n            if (!visible) {\n                onDismiss?.()\n            }\n        },\n        [onDismiss],\n    )\n    const store = useDialogStore({ open: isOpen, setOpen })\n\n    const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n        onDismiss,\n        height,\n    ])\n\n    const portalRef = React.useRef<HTMLElement | null>(null)\n    const dialogRef = React.useRef<HTMLDivElement | null>(null)\n    const backdropRef = React.useRef<HTMLDivElement | null>(null)\n    const handleBackdropClick = React.useCallback(\n        (event: React.MouseEvent) => {\n            if (\n                // The focus lock element takes up the same space as the backdrop and is where the event bubbles up from,\n                // so instead of checking the backdrop as the event target, we need to make sure it's just above the dialog\n                !dialogRef.current?.contains(event.target as Node) &&\n                // Events fired from other portals will bubble up to the backdrop, even if it isn't a child in the DOM\n                backdropRef.current?.contains(event.target as Node)\n            ) {\n                event.stopPropagation()\n                onDismiss?.()\n            }\n        },\n        [onDismiss],\n    )\n\n    React.useLayoutEffect(\n        function disableAccessibilityTreeOutside() {\n            if (!isOpen || !portalRef.current) {\n                return\n            }\n\n            return hideOthers(portalRef.current)\n        },\n        [isOpen],\n    )\n\n    const handleKeyDown = React.useCallback(\n        function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n            if (\n                hideOnEscape &&\n                onDismiss != null &&\n                event.key === 'Escape' &&\n                !event.defaultPrevented\n            ) {\n                event.stopPropagation()\n                onDismiss()\n            }\n            onKeyDown?.(event)\n        },\n        [onDismiss, hideOnEscape, onKeyDown],\n    )\n\n    if (!isOpen) {\n        return null\n    }\n\n    return (\n        <Portal portalRef={portalRef} portalElement={portalElement}>\n            <Box\n                data-testid=\"modal-overlay\"\n                data-overlay\n                className={classNames(\n                    styles.overlay,\n                    styles[height],\n                    styles[width],\n                    exceptionallySetOverlayClassName,\n                )}\n                /**\n                 * We're using `onPointerDown` instead of `onClick` to prevent the modal from\n                 * closing when the click starts inside the modal and ends on the backdrop.\n                 */\n                onPointerDown={hideOnInteractOutside ? handleBackdropClick : undefined}\n                ref={backdropRef}\n            >\n                <FocusLock\n                    autoFocus={autoFocus}\n                    whiteList={isNotInternalFrame}\n                    returnFocus={true}\n                    crossFrame={false}\n                >\n                    <Dialog\n                        {...props}\n                        ref={dialogRef}\n                        render={\n                            <Box\n                                borderRadius=\"full\"\n                                background=\"default\"\n                                display=\"flex\"\n                                flexDirection=\"column\"\n                                overflow=\"hidden\"\n                                height={height === 'expand' ? 'full' : undefined}\n                                flexGrow={height === 'expand' ? 1 : 0}\n                            />\n                        }\n                        className={classNames(exceptionallySetClassName, styles.container)}\n                        store={store}\n                        preventBodyScroll\n                        // Disable focus lock as we set up our own using ReactFocusLock\n                        modal={false}\n                        autoFocus={false}\n                        autoFocusOnShow={false}\n                        autoFocusOnHide={false}\n                        // Disable portal and backdrop as we control their markup\n                        portal={false}\n                        backdrop={false}\n                        hideOnInteractOutside={false}\n                        hideOnEscape={false}\n                        onKeyDown={handleKeyDown}\n                    >\n                        <ModalContext.Provider value={contextValue}>\n                            {children}\n                        </ModalContext.Provider>\n                    </Dialog>\n                </FocusLock>\n            </Box>\n        </Portal>\n    )\n}\n\n//\n// ModalCloseButton\n//\n\nexport interface ModalCloseButtonProps\n    extends Omit<\n        IconButtonProps,\n        'type' | 'variant' | 'icon' | 'disabled' | 'loading' | 'tabIndex' | 'ref'\n    > {\n    /**\n     * The descriptive label of the button.\n     */\n    'aria-label': string\n}\n\n/**\n * The close button rendered by ModalHeader. Provided independently so that consumers can customize\n * the button's label.\n *\n * @see ModalHeader\n */\nexport function ModalCloseButton(props: ModalCloseButtonProps) {\n    const { onDismiss } = React.useContext(ModalContext)\n    const [includeInTabOrder, setIncludeInTabOrder] = React.useState(false)\n    const [isMounted, setIsMounted] = React.useState(false)\n\n    React.useEffect(\n        function skipAutoFocus() {\n            if (isMounted) {\n                setIncludeInTabOrder(true)\n            } else {\n                setIsMounted(true)\n            }\n        },\n        [isMounted],\n    )\n\n    return (\n        <IconButton\n            {...props}\n            variant=\"quaternary\"\n            onClick={onDismiss}\n            icon={<CloseIcon />}\n            tabIndex={includeInTabOrder ? 0 : -1}\n        />\n    )\n}\n\n//\n// ModalHeader\n//\n\nexport interface ModalHeaderProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The content of the header.\n     */\n    children: React.ReactNode\n\n    /**\n     * Allows to provide a custom button element, or to omit the close button if set to false.\n     * @see ModalCloseButton\n     */\n    button?: React.ReactNode | boolean\n\n    /**\n     * Whether to render a divider line below the header.\n     * @default false\n     */\n    withDivider?: boolean\n}\n\n/**\n * Renders a standard modal header area with an optional close button.\n *\n * @see Modal\n * @see ModalFooter\n * @see ModalBody\n */\nexport function ModalHeader({\n    children,\n    button = true,\n    withDivider = false,\n    exceptionallySetClassName,\n    ...props\n}: ModalHeaderProps) {\n    return (\n        <>\n            <Box\n                {...props}\n                as=\"header\"\n                paddingLeft=\"large\"\n                paddingRight={button === false || button === null ? 'large' : 'small'}\n                paddingY=\"small\"\n                className={exceptionallySetClassName}\n            >\n                <Columns space=\"large\" alignY=\"center\">\n                    <Column width=\"auto\">{children}</Column>\n                    {button === false || button === null ? (\n                        <div className={styles.headerContent} />\n                    ) : (\n                        <Column\n                            width=\"content\"\n                            exceptionallySetClassName={styles.buttonContainer}\n                            data-testid=\"button-container\"\n                        >\n                            {typeof button === 'boolean' ? (\n                                <ModalCloseButton aria-label=\"Close modal\" autoFocus={false} />\n                            ) : (\n                                button\n                            )}\n                        </Column>\n                    )}\n                </Columns>\n            </Box>\n            {withDivider ? <Divider /> : null}\n        </>\n    )\n}\n\n//\n// ModalBody\n//\n\nexport interface ModalBodyProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The content of the modal body.\n     */\n    children: React.ReactNode\n}\n\n/**\n * Renders the body of a modal.\n *\n * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other\n * things, that the content of the modal body expands or contracts depending on the modal height\n * setting or the size of the content. The body content also automatically scrolls when it's too\n * large to fit the available space.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalFooter\n */\nexport const ModalBody = forwardRef<HTMLDivElement, ModalBodyProps>(function ModalBody(\n    { exceptionallySetClassName, children, ...props },\n    ref,\n) {\n    const { height } = React.useContext(ModalContext)\n    return (\n        <Box\n            {...props}\n            ref={ref}\n            className={exceptionallySetClassName}\n            flexGrow={height === 'expand' ? 1 : 0}\n            height={height === 'expand' ? 'full' : undefined}\n            overflow=\"auto\"\n        >\n            <Box padding=\"large\" paddingBottom=\"xxlarge\">\n                {children}\n            </Box>\n        </Box>\n    )\n})\n\n//\n// ModalFooter\n//\n\nexport interface ModalFooterProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The contant of the modal footer.\n     */\n    children: React.ReactNode\n    /**\n     * Whether to render a divider line below the footer.\n     * @default false\n     */\n    withDivider?: boolean\n}\n\n/**\n * Renders a standard modal footer area.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalBody\n */\nexport function ModalFooter({\n    exceptionallySetClassName,\n    withDivider = false,\n    ...props\n}: ModalFooterProps) {\n    return (\n        <>\n            {withDivider ? <Divider /> : null}\n            <Box as=\"footer\" {...props} className={exceptionallySetClassName} padding=\"large\" />\n        </>\n    )\n}\n\n//\n// ModalActions\n//\n\nexport type ModalActionsProps = ModalFooterProps\n\n/**\n * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).\n * @see ModalFooter\n */\nexport function ModalActions({ children, ...props }: ModalActionsProps) {\n    return (\n        <ModalFooter {...props}>\n            <Inline align=\"right\" space=\"large\">\n                {children}\n            </Inline>\n        </ModalFooter>\n    )\n}\n"],"names":["ModalContext","React","createContext","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","ModalCloseButton","props","useContext","includeInTabOrder","setIncludeInTabOrder","useState","isMounted","setIsMounted","useEffect","createElement","IconButton","variant","onClick","icon","CloseIcon","tabIndex","ModalBody","forwardRef","ref","exceptionallySetClassName","children","_ref3","_objectWithoutProperties","objectWithoutProperties","_excluded3","Box","className","flexGrow","overflow","padding","paddingBottom","ModalFooter","_ref4","withDivider","_excluded4","Fragment","Divider","_objectSpread","objectSpread2","as","_ref","isOpen","width","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","portalElement","onKeyDown","_excluded","setOpen","useCallback","visible","store","useDialogStore","open","contextValue","useMemo","portalRef","useRef","dialogRef","backdropRef","handleBackdropClick","event","_dialogRef$current","_backdropRef$current","current","contains","target","stopPropagation","useLayoutEffect","hideOthers","handleKeyDown","key","defaultPrevented","Portal","data-overlay","classNames","styles","overlay","onPointerDown","FocusLock","whiteList","returnFocus","crossFrame","Dialog","render","borderRadius","background","display","flexDirection","container","preventBodyScroll","modal","autoFocusOnShow","autoFocusOnHide","portal","backdrop","Provider","value","_ref5","_excluded5","Inline","align","space","_ref2","button","_excluded2","paddingLeft","paddingRight","paddingY","Columns","alignY","Column","headerContent","buttonContainer","data-testid","aria-label"],"mappings":"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"}

package/package.json

@@ -6,7 +6,7 @@
         "email": "henning@doist.com",
         "url": "http://doist.com"
     },
-    "version": "25.1.1",
+    "version": "25.2.0",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": {

package/styles/index.css

@@ -1 +1,8 @@
-.reactist_input{font-size:.875rem;color:#202020;font-weight:400;line-height:1.7;box-sizing:border-box;width:100%;display:block;outline:none;border:1px solid #dcdcdc;border-radius:3px;padding:5px 10px;margin:0}.reactist_input:focus{border-color:#3f82ef}.reactist_input:disabled{background-color:#fafafa}
+.fb8d74bb{box-sizing:border-box;border:0;margin:0;padding:0;font-size:var(--reactist-font-size-body);font-family:inherit;vertical-align:baseline;background-color:transparent;list-style:none}pre.fb8d74bb{font-family:var(--reactist-font-family-monospace)}.fb8d74bb[hidden]{display:none!important}._18f74af9{position:absolute}.b292fef1{position:fixed}.e4e217d4{position:relative}._66895b64{position:-webkit-sticky;position:sticky}@media (min-width:768px){._00e8a0ce{position:absolute}.efaf64be{position:fixed}._76e540fd{position:relative}.bd286900{position:-webkit-sticky;position:sticky}}@media (min-width:992px){._09e9f472{position:absolute}._893383f1{position:fixed}.dea3890d{position:relative}._6a61c94d{position:-webkit-sticky;position:sticky}}._64dcc902{display:block}._14423c92{display:flex}._6a38242d{display:inline}._348efc1f{display:inline-block}._150907c8{display:inline-flex}._3da48ad6{display:none}@media (min-width:768px){._0daac9f2{display:block}.f62c43b1{display:flex}._5839a4e4{display:inline}._8068aaf2{display:inline-block}._76562ea5{display:inline-flex}._4f7a886f{display:none}}@media (min-width:992px){._4fd4b789{display:block}._4d08e78f{display:flex}._0da15585{display:inline}.d0fcc019{display:inline-block}._79f967d4{display:inline-flex}._2ffa0d03{display:none}}._2d7320f2{flex-direction:column}._5f8879d9{flex-direction:row}@media (min-width:768px){._2c919a43{flex-direction:column}._4da1f194{flex-direction:row}}@media (min-width:992px){._66fd35ea{flex-direction:column}._4b79448d{flex-direction:row}}._202b0c8c{flex-wrap:wrap}._45a8f27f{flex-wrap:nowrap}._7d9ec5b0{flex-shrink:0}._9ce442fb{flex-grow:0}.c3b69d70{flex-grow:1}._7cc6458c{align-items:flex-start}.b76144ce{align-items:center}.e42ffab4{align-items:flex-end}._3975b234{align-items:baseline}@media (min-width:768px){.b670f77e{align-items:flex-start}._976e7156{align-items:center}._385c60b1{align-items:flex-end}._52b577fc{align-items:baseline}}@media (min-width:992px){._2e1cc27f{align-items:flex-start}._3a9e51e9{align-items:center}.dfc189b2{align-items:flex-end}._5fabaec4{align-items:baseline}}.a65d9c55{justify-content:flex-start}.b4e05554{justify-content:center}.f76804e6{justify-content:flex-end}._0095203e{justify-content:space-around}._6eb365d1{justify-content:space-between}._4111e641{justify-content:space-evenly}@media (min-width:768px){._6fda855d{justify-content:flex-start}.c2d359f8{justify-content:center}.e271941d{justify-content:flex-end}._2321488d{justify-content:space-around}.e4a9b2e3{justify-content:space-between}.bdc232f2{justify-content:space-evenly}}@media (min-width:992px){._0d16bb5c{justify-content:flex-start}.eca8082a{justify-content:center}._97ea6bb7{justify-content:flex-end}._2321488d{justify-content:space-around}._58e61602{justify-content:space-between}.bdc232f2{justify-content:space-evenly}}._794c8ab8{align-self:stretch}.c510efd5{align-self:flex-start}.b3f71626{align-self:center}._13771d73{align-self:flex-end}._64318454{align-self:baseline}@media (min-width:768px){._309c6ba7{align-self:stretch}._92dfd036{align-self:flex-start}._811f9906{align-self:center}._2cd2336e{align-self:flex-end}.bd2c9dad{align-self:baseline}}@media (min-width:992px){.d8215926{align-self:stretch}.b78f5c06{align-self:flex-start}._683e0cdb{align-self:center}._489f1dc8{align-self:flex-end}._4aca1032{align-self:baseline}}._68aab614{overflow:hidden}.ac28a3b1{overflow:auto}._50b88b52{overflow:visible}.c2fdd1c1{overflow:scroll}._75ca308a{height:100%}.a9ca9830{background-color:var(--reactist-bg-default)}.b9ff0c93{background-color:var(--reactist-bg-aside)}.efc303e5{background-color:var(--reactist-bg-highlight)}.ec657626{background-color:var(--reactist-bg-selected)}._00d3482f{background-color:var(--reactist-bg-toast);color:var(--reactist-content-primary);--reactist-content-primary:var(--reactist-toast-content-primary);--reactist-content-secondary:var(--reactist-toast-content-secondary);--reactist-text-link-idle-tint:var(--reactist-content-primary);--reactist-text-link-idle-decoration:var(--reactist-text-link-hover-decoration);--reactist-actionable-tertiary-idle-tint:var(--reactist-toast-actionable-primary-tint);--reactist-actionable-tertiary-hover-tint:var(--reactist-toast-actionable-primary-tint);--reactist-actionable-tertiary-hover-fill:var(--reactist-toast-actionable-hover-fill);--reactist-actionable-quaternary-idle-tint:var(--reactist-toast-actionable-secondary-tint);--reactist-actionable-quaternary-hover-tint:var(--reactist-toast-actionable-secondary-tint);--reactist-actionable-quaternary-hover-fill:var(--reactist-toast-actionable-hover-fill)}._958da546{border-radius:var(--reactist-border-radius-small)}._79077c62{border-radius:var(--reactist-border-radius-large)}._68981e89{border:1px solid var(--reactist-divider-primary)}._2bda8f7a{border:1px solid var(--reactist-divider-secondary)}._7152c573{border:1px solid var(--reactist-divider-tertiary)}._1f362dec{text-align:start}._1c09cd18{text-align:center}.b9663f5e{text-align:end}.a0eba489{text-align:justify}@media (min-width:768px){._60b9abf8{text-align:start}._2c70943c{text-align:center}.a512d4e1{text-align:end}._5d02c334{text-align:justify}}@media (min-width:992px){.ad2496a1{text-align:start}.ee87b016{text-align:center}._6dd48127{text-align:end}._1e70d216{text-align:justify}}
+.c4803194{padding-top:var(--reactist-spacing-xsmall)}._4e9ab24b{padding-top:var(--reactist-spacing-small)}._1d226e27{padding-top:var(--reactist-spacing-medium)}.eb6097f1{padding-top:var(--reactist-spacing-large)}.d3229ba4{padding-top:var(--reactist-spacing-xlarge)}._47978ba4{padding-top:var(--reactist-spacing-xxlarge)}@media (min-width:768px){.f987719c{padding-top:var(--reactist-spacing-xsmall)}._8dbc4b4d{padding-top:var(--reactist-spacing-small)}.ae44fe07{padding-top:var(--reactist-spacing-medium)}.ffe9548d{padding-top:var(--reactist-spacing-large)}.f2b76a44{padding-top:var(--reactist-spacing-xlarge)}.c6eb8f43{padding-top:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._8699b560{padding-top:var(--reactist-spacing-xsmall)}._02c374b7{padding-top:var(--reactist-spacing-small)}._0dd0332f{padding-top:var(--reactist-spacing-medium)}.da55f1f6{padding-top:var(--reactist-spacing-large)}._8ef2a278{padding-top:var(--reactist-spacing-xlarge)}._8b493b28{padding-top:var(--reactist-spacing-xxlarge)}}._211eebc7{padding-right:var(--reactist-spacing-xsmall)}.ad0ccf15{padding-right:var(--reactist-spacing-small)}.a03e39af{padding-right:var(--reactist-spacing-medium)}.f0941ead{padding-right:var(--reactist-spacing-large)}.e47c5a43{padding-right:var(--reactist-spacing-xlarge)}.e849a5cf{padding-right:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._85374228{padding-right:var(--reactist-spacing-xsmall)}._89df37b9{padding-right:var(--reactist-spacing-small)}._1cc50ebe{padding-right:var(--reactist-spacing-medium)}._1060982b{padding-right:var(--reactist-spacing-large)}.be58847d{padding-right:var(--reactist-spacing-xlarge)}._45093484{padding-right:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){.f8d99d6a{padding-right:var(--reactist-spacing-xsmall)}.efa076d9{padding-right:var(--reactist-spacing-small)}.e59caa64{padding-right:var(--reactist-spacing-medium)}.da42f46a{padding-right:var(--reactist-spacing-large)}.b3ee2580{padding-right:var(--reactist-spacing-xlarge)}._3ef94658{padding-right:var(--reactist-spacing-xxlarge)}}.b0e6eab4{padding-bottom:var(--reactist-spacing-xsmall)}._9510d053{padding-bottom:var(--reactist-spacing-small)}.d7af60c9{padding-bottom:var(--reactist-spacing-medium)}.b75f86cd{padding-bottom:var(--reactist-spacing-large)}.fbd4ce29{padding-bottom:var(--reactist-spacing-xlarge)}._33e3ad63{padding-bottom:var(--reactist-spacing-xxlarge)}@media (min-width:768px){.f0302da7{padding-bottom:var(--reactist-spacing-xsmall)}._4f9b8012{padding-bottom:var(--reactist-spacing-small)}._4333e20e{padding-bottom:var(--reactist-spacing-medium)}._30bbc76c{padding-bottom:var(--reactist-spacing-large)}.ba5a4008{padding-bottom:var(--reactist-spacing-xlarge)}._423a3b1a{padding-bottom:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){.b40139b7{padding-bottom:var(--reactist-spacing-xsmall)}.f96071fa{padding-bottom:var(--reactist-spacing-small)}.fe803c9a{padding-bottom:var(--reactist-spacing-medium)}._01686eb9{padding-bottom:var(--reactist-spacing-large)}.afa763d8{padding-bottom:var(--reactist-spacing-xlarge)}.a95785f1{padding-bottom:var(--reactist-spacing-xxlarge)}}.cad4e2ec{padding-left:var(--reactist-spacing-xsmall)}.d70b3c17{padding-left:var(--reactist-spacing-small)}._8c851bd6{padding-left:var(--reactist-spacing-medium)}._078feb3c{padding-left:var(--reactist-spacing-large)}._76ab968c{padding-left:var(--reactist-spacing-xlarge)}.aaca85d7{padding-left:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._5eb0e5aa{padding-left:var(--reactist-spacing-xsmall)}._0384fb4f{padding-left:var(--reactist-spacing-small)}.edffff6f{padding-left:var(--reactist-spacing-medium)}._873b9a46{padding-left:var(--reactist-spacing-large)}._89105db5{padding-left:var(--reactist-spacing-xlarge)}.db1966fe{padding-left:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){.b17f826b{padding-left:var(--reactist-spacing-xsmall)}._6dc83610{padding-left:var(--reactist-spacing-small)}._3421b8b2{padding-left:var(--reactist-spacing-medium)}._68cec7a6{padding-left:var(--reactist-spacing-large)}._94bde020{padding-left:var(--reactist-spacing-xlarge)}.b94ee579{padding-left:var(--reactist-spacing-xxlarge)}}
+.c7813d79{margin-top:var(--reactist-spacing-xsmall)}.d3449da6{margin-top:var(--reactist-spacing-small)}._4ea254c1{margin-top:var(--reactist-spacing-medium)}.c0844f64{margin-top:var(--reactist-spacing-large)}._213145b4{margin-top:var(--reactist-spacing-xlarge)}.df61c84c{margin-top:var(--reactist-spacing-xxlarge)}.efe72b13{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}._870c2768{margin-top:calc(var(--reactist-spacing-small)*-1)}._0b927c57{margin-top:calc(var(--reactist-spacing-medium)*-1)}._461db014{margin-top:calc(var(--reactist-spacing-large)*-1)}._2a3a8cb8{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}._9bcda921{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){._6add01e4{margin-top:var(--reactist-spacing-xsmall)}._735ef86b{margin-top:var(--reactist-spacing-small)}._0477d068{margin-top:var(--reactist-spacing-medium)}._2c90af97{margin-top:var(--reactist-spacing-large)}._63a82db6{margin-top:var(--reactist-spacing-xlarge)}._03cd7726{margin-top:var(--reactist-spacing-xxlarge)}.c986a62a{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}.be2bdcdd{margin-top:calc(var(--reactist-spacing-small)*-1)}._47d2686b{margin-top:calc(var(--reactist-spacing-medium)*-1)}._25e5af9d{margin-top:calc(var(--reactist-spacing-large)*-1)}.ee82f441{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}.a6f9d404{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){._4d8d9a36{margin-top:var(--reactist-spacing-xsmall)}.e813cee7{margin-top:var(--reactist-spacing-small)}._56975b7d{margin-top:var(--reactist-spacing-medium)}._53b367f6{margin-top:var(--reactist-spacing-large)}.d69e7311{margin-top:var(--reactist-spacing-xlarge)}._92f57c7e{margin-top:var(--reactist-spacing-xxlarge)}._96880d3e{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}.dc3f3555{margin-top:calc(var(--reactist-spacing-small)*-1)}._86dd06bb{margin-top:calc(var(--reactist-spacing-medium)*-1)}.c93ef12e{margin-top:calc(var(--reactist-spacing-large)*-1)}.bc8fd4a2{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}.b12a9124{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}}._6016f4fb{margin-right:var(--reactist-spacing-xsmall)}.b85e3dfa{margin-right:var(--reactist-spacing-small)}._297575f4{margin-right:var(--reactist-spacing-medium)}.b401ac6c{margin-right:var(--reactist-spacing-large)}.dc3ec387{margin-right:var(--reactist-spacing-xlarge)}._24694604{margin-right:var(--reactist-spacing-xxlarge)}._8e9bf2ee{margin-right:calc(var(--reactist-spacing-xsmall)*-1)}.ae9d1115{margin-right:calc(var(--reactist-spacing-small)*-1)}._14e46fc3{margin-right:calc(var(--reactist-spacing-medium)*-1)}._3370631b{margin-right:calc(var(--reactist-spacing-large)*-1)}._3f0e9b50{margin-right:calc(var(--reactist-spacing-xlarge)*-1)}.bc13e010{margin-right:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){._6fa1aae3{margin-right:var(--reactist-spacing-xsmall)}._2976c5cb{margin-right:var(--reactist-spacing-small)}._38d94802{margin-right:var(--reactist-spacing-medium)}.db9569b5{margin-right:var(--reactist-spacing-large)}._4a52f06d{margin-right:var(--reactist-spacing-xlarge)}._8a0f0410{margin-right:var(--reactist-spacing-xxlarge)}.e7d40e9d{margin-right:calc(var(--reactist-spacing-xsmall)*-1)}._680fde91{margin-right:calc(var(--reactist-spacing-small)*-1)}._021010ca{margin-right:calc(var(--reactist-spacing-medium)*-1)}._9e52c87c{margin-right:calc(var(--reactist-spacing-large)*-1)}._4d602613{margin-right:calc(var(--reactist-spacing-xlarge)*-1)}._21b1b65a{margin-right:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){._7321bc07{margin-right:var(--reactist-spacing-xsmall)}.fa1721f4{margin-right:var(--reactist-spacing-small)}._3fd7b4b8{margin-right:var(--reactist-spacing-medium)}._4fdc2f74{margin-right:var(--reactist-spacing-large)}.c0254761{margin-right:var(--reactist-spacing-xlarge)}._710a5f09{margin-right:var(--reactist-spacing-xxlarge)}.e08bee7f{margin-right:calc(var(--reactist-spacing-xsmall)*-1)}.e5ab73d2{margin-right:calc(var(--reactist-spacing-small)*-1)}._5e731477{margin-right:calc(var(--reactist-spacing-medium)*-1)}._0f57a22e{margin-right:calc(var(--reactist-spacing-large)*-1)}._25f26ed3{margin-right:calc(var(--reactist-spacing-xlarge)*-1)}._11a3b4e0{margin-right:calc(var(--reactist-spacing-xxlarge)*-1)}}._6a4f69f7{margin-bottom:var(--reactist-spacing-xsmall)}.db26b033{margin-bottom:var(--reactist-spacing-small)}.c7313022{margin-bottom:var(--reactist-spacing-medium)}.a5885889{margin-bottom:var(--reactist-spacing-large)}._33dfbd8e{margin-bottom:var(--reactist-spacing-xlarge)}._795ad2de{margin-bottom:var(--reactist-spacing-xxlarge)}.a329dbd3{margin-bottom:calc(var(--reactist-spacing-xsmall)*-1)}._85e739fb{margin-bottom:calc(var(--reactist-spacing-small)*-1)}._681f65ff{margin-bottom:calc(var(--reactist-spacing-medium)*-1)}.caf50d8f{margin-bottom:calc(var(--reactist-spacing-large)*-1)}._1e084cbf{margin-bottom:calc(var(--reactist-spacing-xlarge)*-1)}._3dfb1c7e{margin-bottom:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){.ef4735be{margin-bottom:var(--reactist-spacing-xsmall)}.de55afba{margin-bottom:var(--reactist-spacing-small)}._0e33ce88{margin-bottom:var(--reactist-spacing-medium)}._8ca391fc{margin-bottom:var(--reactist-spacing-large)}._3a609d23{margin-bottom:var(--reactist-spacing-xlarge)}._3e1177e4{margin-bottom:var(--reactist-spacing-xxlarge)}.d384884d{margin-bottom:calc(var(--reactist-spacing-xsmall)*-1)}._75254cec{margin-bottom:calc(var(--reactist-spacing-small)*-1)}._5d9f127d{margin-bottom:calc(var(--reactist-spacing-medium)*-1)}._835f1089{margin-bottom:calc(var(--reactist-spacing-large)*-1)}.dad52a72{margin-bottom:calc(var(--reactist-spacing-xlarge)*-1)}._8703a4bf{margin-bottom:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){._90fd20e9{margin-bottom:var(--reactist-spacing-xsmall)}.f3769191{margin-bottom:var(--reactist-spacing-small)}._156410f8{margin-bottom:var(--reactist-spacing-medium)}._7fed74d0{margin-bottom:var(--reactist-spacing-large)}._477dc10e{margin-bottom:var(--reactist-spacing-xlarge)}._85c82d89{margin-bottom:var(--reactist-spacing-xxlarge)}._4f09c1e0{margin-bottom:calc(var(--reactist-spacing-xsmall)*-1)}._9523e048{margin-bottom:calc(var(--reactist-spacing-small)*-1)}.efe10240{margin-bottom:calc(var(--reactist-spacing-medium)*-1)}.c43971e6{margin-bottom:calc(var(--reactist-spacing-large)*-1)}.f9b4da15{margin-bottom:calc(var(--reactist-spacing-xlarge)*-1)}.a10fdf70{margin-bottom:calc(var(--reactist-spacing-xxlarge)*-1)}}.f9be90b4{margin-left:var(--reactist-spacing-xsmall)}.f53218d5{margin-left:var(--reactist-spacing-small)}.c4a9b3ab{margin-left:var(--reactist-spacing-medium)}._5755e2c3{margin-left:var(--reactist-spacing-large)}._33fc9354{margin-left:var(--reactist-spacing-xlarge)}._4749a3bf{margin-left:var(--reactist-spacing-xxlarge)}.c76cb3c7{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}._96003c07{margin-left:calc(var(--reactist-spacing-small)*-1)}._09988d07{margin-left:calc(var(--reactist-spacing-medium)*-1)}.b4a486f6{margin-left:calc(var(--reactist-spacing-large)*-1)}.f396e75e{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}._81d1f26d{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){._0a46e8f1{margin-left:var(--reactist-spacing-xsmall)}._57c970af{margin-left:var(--reactist-spacing-small)}._4b6099d3{margin-left:var(--reactist-spacing-medium)}._378fcff5{margin-left:var(--reactist-spacing-large)}.f8785663{margin-left:var(--reactist-spacing-xlarge)}._72f957ee{margin-left:var(--reactist-spacing-xxlarge)}._2288c7e1{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}.b27c1c05{margin-left:calc(var(--reactist-spacing-small)*-1)}._702cbb13{margin-left:calc(var(--reactist-spacing-medium)*-1)}._1a2748b4{margin-left:calc(var(--reactist-spacing-large)*-1)}.b8c043a5{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}._8dc8ff63{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){.c2af646d{margin-left:var(--reactist-spacing-xsmall)}.c03d07be{margin-left:var(--reactist-spacing-small)}._915fb1d3{margin-left:var(--reactist-spacing-medium)}._64214ee1{margin-left:var(--reactist-spacing-large)}._7be4a22c{margin-left:var(--reactist-spacing-xlarge)}._5ec0a401{margin-left:var(--reactist-spacing-xxlarge)}.ea29f1ee{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}.c26652c7{margin-left:calc(var(--reactist-spacing-small)*-1)}.c24f6af9{margin-left:calc(var(--reactist-spacing-medium)*-1)}.c2671f27{margin-left:calc(var(--reactist-spacing-large)*-1)}.cc51a04e{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}.fd581f54{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}}
+._68ab48ca{min-width:0}._6fa2b565{min-width:var(--reactist-width-xsmall)}.dd50fabd{min-width:var(--reactist-width-small)}.e7e2c808{min-width:var(--reactist-width-medium)}._6abbe25e{min-width:var(--reactist-width-large)}._54f479ac{min-width:var(--reactist-width-xlarge)}._148492bc{max-width:var(--reactist-width-xsmall)}.bd023b96{max-width:var(--reactist-width-small)}.e102903f{max-width:var(--reactist-width-medium)}._0e8d76d7{max-width:var(--reactist-width-large)}._47a031d0{max-width:var(--reactist-width-xlarge)}.cd4c8183{max-width:100%}._5f5959e8{width:0}._8c75067a{width:100%}._56a651f6{width:auto}._26f87bb8{width:-moz-max-content;width:-webkit-max-content;width:max-content}._07a6ab44{width:-moz-min-content;width:-webkit-min-content;width:min-content}.a87016fa{width:-moz-fit-content;width:-webkit-fit-content;width:fit-content}._1a972e50{width:var(--reactist-width-xsmall)}.c96d8261{width:var(--reactist-width-small)}.f3829d42{width:var(--reactist-width-medium)}._2caef228{width:var(--reactist-width-large)}._069e1491{width:var(--reactist-width-xlarge)}
+._64ed24f4{gap:0}._2580a74b{gap:var(--reactist-spacing-xsmall)}.c68f8bf6{gap:var(--reactist-spacing-small)}._43e5f8e9{gap:var(--reactist-spacing-medium)}._966b120f{gap:var(--reactist-spacing-large)}.f957894c{gap:var(--reactist-spacing-xlarge)}._8cca104b{gap:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._5797cee2{gap:0}._9015672f{gap:var(--reactist-spacing-xsmall)}._7ec86eec{gap:var(--reactist-spacing-small)}._714d7179{gap:var(--reactist-spacing-medium)}.ae1deb59{gap:var(--reactist-spacing-large)}.e1cfce55{gap:var(--reactist-spacing-xlarge)}._168a8ff8{gap:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._43e2b619{gap:0}._0ea9bf88{gap:var(--reactist-spacing-xsmall)}.d451307a{gap:var(--reactist-spacing-small)}.bf93cf66{gap:var(--reactist-spacing-medium)}._1430cddf{gap:var(--reactist-spacing-large)}.fa00c93e{gap:var(--reactist-spacing-xlarge)}._6f3aee54{gap:var(--reactist-spacing-xxlarge)}}
+._487c82cd{text-overflow:ellipsis;max-width:300px;z-index:var(--reactist-stacking-order-tooltip)}
+.reactist_button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit;border:none;background-color:transparent;padding:0}.reactist_button[aria-disabled=true]{opacity:.4;cursor:not-allowed}.reactist_button--small{font-size:.81rem;color:#202020;font-weight:400;line-height:1.6}.reactist_button--danger,.reactist_button--primary,.reactist_button--secondary{font-size:.875rem;color:#202020;font-weight:400;line-height:1.7;box-sizing:border-box;padding:5px 15px;border:1px solid rgba(0,0,0,.1);border-radius:3px}.reactist_button--danger.reactist_button--small,.reactist_button--primary.reactist_button--small,.reactist_button--secondary.reactist_button--small{padding:5px 10px}.reactist_button--danger.reactist_button--large,.reactist_button--primary.reactist_button--large,.reactist_button--secondary.reactist_button--large{padding:10px 15px}.reactist_button--primary{background-color:#3f82ef;color:#fff}.reactist_button--primary:not([disabled]):hover{background-color:#3b7be2}.reactist_button--danger{background-color:#de4c4a;color:#fff}.reactist_button--danger:not([disabled]):hover{background-color:#cf2826}.reactist_button--secondary{background-color:#fff;color:#202020;border-color:#dcdcdc}.reactist_button--secondary:not([disabled]):hover{background-color:#f9f9f9}.reactist_button--link{color:#3f82ef;text-decoration:none}.reactist_button--link:disabled{color:grey}.reactist_button--link:not(:disabled):hover{text-decoration:underline}.reactist_button--link:not(.reactist_button--link--small):not(.reactist_button--link--large){font-size:inherit}.reactist_button--danger.reactist_button--loading,.reactist_button--primary.reactist_button--loading,.reactist_button--secondary.reactist_button--loading{cursor:progress!important}.reactist_button--danger.reactist_button--loading:after,.reactist_button--primary.reactist_button--loading:after,.reactist_button--secondary.reactist_button--loading:after{background-repeat:no-repeat;background-size:15px;content:"";display:inline-block;height:15px;margin-left:12px;vertical-align:middle;width:15px;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:reactistRotateRight;animation-name:reactistRotateRight;-webkit-animation-timing-function:linear;animation-timing-function:linear;color:#fff;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNi4yNTciIGhlaWdodD0iMTYuMjU3IiB2aWV3Qm94PSItMTQ3LjgxMyAyMDYuNzUgMTYuMjU3IDE2LjI1NyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtMTQ3LjgxMyAyMDYuNzUgMTYuMjU3IDE2LjI1NyI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMikiPjxkZWZzPjxmaWx0ZXIgaWQ9ImEiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iLTE0Ny42ODQiIHk9IjIxMC45MjkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxMy45NSI+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIxIDAgMCAwIDAgMCAxIDAgMCAwIDAgMCAxIDAgMCAwIDAgMCAxIDAiLz48L2ZpbHRlcj48L2RlZnM+PG1hc2sgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iLTE0Ny42ODQiIHk9IjIxMC45MjkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxMy45NSIgaWQ9ImIiPjxnIGZpbHRlcj0idXJsKCNhKSI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTS0xNDguNTg0IDIwNy45NzloMTh2MThoLTE4eiIvPjwvZz48L21hc2s+PHBhdGggbWFzaz0idXJsKCNiKSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTS0xNDQuNjM0IDIxMS45MjlhNi45OTkgNi45OTkgMCAwMDAgOS44OTloMGE2Ljk5OSA2Ljk5OSAwIDAwOS44OTkgMCA2Ljk5OSA2Ljk5OSAwIDAwMC05Ljg5OSIvPjwvZz48L3N2Zz4=")}.reactist_button--secondary.reactist_button--loading{border-color:#dcdcdc;background-color:#dcdcdc;color:grey}@-webkit-keyframes reactistRotateRight{0%{transform:rotate(0deg);transform-origin:center center}to{transform:rotate(1turn);transform-origin:center center}}@keyframes reactistRotateRight{0%{transform:rotate(0deg);transform-origin:center center}to{transform:rotate(1turn);transform-origin:center center}}
+.reactist_dropdown .trigger{cursor:pointer;display:block}.reactist_dropdown .body{border-radius:3px;border:1px solid #dcdcdc;overflow:hidden;box-shadow:0 1px 8px 0 rgba(0,0,0,.08);z-index:1;background-color:#fff}.reactist_dropdown hr{border:none;height:1px;background-color:#dcdcdc;margin:0 5px}.reactist_dropdown .with_arrow:after,.reactist_dropdown .with_arrow:before{z-index:1;content:"";display:block;position:absolute;width:0;height:0;border-style:solid;border-width:6px;right:14px}.reactist_dropdown .with_arrow:after{top:-11px;border-color:transparent transparent #fff}.reactist_dropdown .with_arrow:before{top:-12px;border-color:transparent transparent #dcdcdc}.reactist_dropdown .with_arrow.top:after{top:-1px;border-color:#fff transparent transparent}.reactist_dropdown .with_arrow.top:before{top:-1px;right:13px;border-width:7px;border-color:#dcdcdc transparent transparent}