@doist/reactist 23.0.1-beta → 24.0.0-beta

package/es/box/box.module.css.js

@@ -1,4 +1,4 @@
-var modules_54d944f2 = {"box":"_2a3b75a1","position-absolute":"_2286072d","position-fixed":"_0847ebf3","position-relative":"_9015266f","position-sticky":"_572136cd","tablet-position-absolute":"dec0da3c","tablet-position-fixed":"eb3f61a4","tablet-position-relative":"_6a9d01dd","tablet-position-sticky":"cf9268ba","desktop-position-absolute":"_6579cc9c","desktop-position-fixed":"_3a6a421f","desktop-position-relative":"_3a6950ac","desktop-position-sticky":"_142cd372","display-block":"_9a084bff","display-flex":"_509a57b4","display-inline":"_4a786bb9","display-inlineBlock":"_5d644b40","display-inlineFlex":"_973d00d0","display-none":"_3e4f26a6","tablet-display-block":"d525fe3a","tablet-display-flex":"_316c9f4b","tablet-display-inline":"_5e788d98","tablet-display-inlineBlock":"_851fc6b8","tablet-display-inlineFlex":"c16ba46a","tablet-display-none":"_759c0c1a","desktop-display-block":"c374b455","desktop-display-flex":"_8a854d8f","desktop-display-inline":"_805fa8dc","desktop-display-inlineBlock":"ab26af05","desktop-display-inlineFlex":"_9bd12ba4","desktop-display-none":"_581476ce","flexDirection-column":"_1fb9d90e","flexDirection-row":"e5a9206f","tablet-flexDirection-column":"_3e6a0be1","tablet-flexDirection-row":"e9e2e53a","desktop-flexDirection-column":"c7d6b073","desktop-flexDirection-row":"_935269b4","flexWrap-wrap":"_3692f9c2","flexWrap-nowrap":"_55f6f487","flexShrink-0":"d5d0d34a","flexGrow-0":"d8ff7933","flexGrow-1":"_4a93668a","alignItems-flexStart":"_5a8c5a77","alignItems-center":"_50ba6b6b","alignItems-flexEnd":"_3963f790","alignItems-baseline":"_55ef2d4e","tablet-alignItems-flexStart":"_3e2bfb5d","tablet-alignItems-center":"a99be1ab","tablet-alignItems-flexEnd":"fa8221fe","tablet-alignItems-baseline":"e83669a0","desktop-alignItems-flexStart":"_65e6b537","desktop-alignItems-center":"db356482","desktop-alignItems-flexEnd":"acc08587","desktop-alignItems-baseline":"ad033867","justifyContent-flexStart":"_985b733f","justifyContent-center":"_95a98d2a","justifyContent-flexEnd":"be9bf31a","justifyContent-spaceAround":"a89d8798","justifyContent-spaceBetween":"_904ef8fe","justifyContent-spaceEvenly":"_489975d5","tablet-justifyContent-flexStart":"a7175ae7","tablet-justifyContent-center":"_7334dead","tablet-justifyContent-flexEnd":"_746de733","tablet-justifyContent-spaceAround":"_6d09398a","tablet-justifyContent-spaceBetween":"c2324c1d","tablet-justifyContent-spaceEvenly":"_04bd6e07","desktop-justifyContent-flexStart":"_39b310de","desktop-justifyContent-center":"_0dc77292","desktop-justifyContent-flexEnd":"_96c15bd8","desktop-justifyContent-spaceBetween":"_096111a6","alignSelf-stretch":"_35d69587","alignSelf-flexStart":"f46f3a67","alignSelf-center":"fb6a8035","alignSelf-flexEnd":"d3193acd","alignSelf-baseline":"_1154f656","tablet-alignSelf-stretch":"_298e04af","tablet-alignSelf-flexStart":"_2c729d24","tablet-alignSelf-center":"_9ea5e943","tablet-alignSelf-flexEnd":"_02266425","tablet-alignSelf-baseline":"c16a5800","desktop-alignSelf-stretch":"_2ec9eb74","desktop-alignSelf-flexStart":"_34f1fb03","desktop-alignSelf-center":"_77c58550","desktop-alignSelf-flexEnd":"_9ffa429f","desktop-alignSelf-baseline":"_6cc14c5d","overflow-hidden":"f6342c26","overflow-auto":"_10a2f952","overflow-visible":"f20b8b87","overflow-scroll":"_4954f87c","height-full":"a83fb2f5","bg-default":"d85cf739","bg-aside":"_4eb1d749","bg-highlight":"da1ccaa5","bg-selected":"_82dc28e7","bg-toast":"_63ba3dfa","borderRadius-standard":"_34cd2b5e","borderRadius-full":"_5fe4d5e3","border-primary":"_1b34ffd9","border-secondary":"_705519b0","border-tertiary":"_67adc238","textAlign-start":"fff8bff0","textAlign-center":"f973eed0","textAlign-end":"_225acbd7","textAlign-justify":"dea1e8ba","tablet-textAlign-start":"_919d6c8f","tablet-textAlign-center":"ab9d970e","tablet-textAlign-end":"b5b45e0e","tablet-textAlign-justify":"bd6e42e0","desktop-textAlign-start":"_15120506","desktop-textAlign-center":"_337333b5","desktop-textAlign-end":"_221db0fb","desktop-textAlign-justify":"_29ea9711"};
+var modules_54d944f2 = {"box":"fb8d74bb","position-absolute":"_18f74af9","position-fixed":"b292fef1","position-relative":"e4e217d4","position-sticky":"_66895b64","tablet-position-absolute":"_00e8a0ce","tablet-position-fixed":"efaf64be","tablet-position-relative":"_76e540fd","tablet-position-sticky":"bd286900","desktop-position-absolute":"_09e9f472","desktop-position-fixed":"_893383f1","desktop-position-relative":"dea3890d","desktop-position-sticky":"_6a61c94d","display-block":"_64dcc902","display-flex":"_14423c92","display-inline":"_6a38242d","display-inlineBlock":"_348efc1f","display-inlineFlex":"_150907c8","display-none":"_3da48ad6","tablet-display-block":"_0daac9f2","tablet-display-flex":"f62c43b1","tablet-display-inline":"_5839a4e4","tablet-display-inlineBlock":"_8068aaf2","tablet-display-inlineFlex":"_76562ea5","tablet-display-none":"_4f7a886f","desktop-display-block":"_4fd4b789","desktop-display-flex":"_4d08e78f","desktop-display-inline":"_0da15585","desktop-display-inlineBlock":"d0fcc019","desktop-display-inlineFlex":"_79f967d4","desktop-display-none":"_2ffa0d03","flexDirection-column":"_2d7320f2","flexDirection-row":"_5f8879d9","tablet-flexDirection-column":"_2c919a43","tablet-flexDirection-row":"_4da1f194","desktop-flexDirection-column":"_66fd35ea","desktop-flexDirection-row":"_4b79448d","flexWrap-wrap":"_202b0c8c","flexWrap-nowrap":"_45a8f27f","flexShrink-0":"_7d9ec5b0","flexGrow-0":"_9ce442fb","flexGrow-1":"c3b69d70","alignItems-flexStart":"_7cc6458c","alignItems-center":"b76144ce","alignItems-flexEnd":"e42ffab4","alignItems-baseline":"_3975b234","tablet-alignItems-flexStart":"b670f77e","tablet-alignItems-center":"_976e7156","tablet-alignItems-flexEnd":"_385c60b1","tablet-alignItems-baseline":"_52b577fc","desktop-alignItems-flexStart":"_2e1cc27f","desktop-alignItems-center":"_3a9e51e9","desktop-alignItems-flexEnd":"dfc189b2","desktop-alignItems-baseline":"_5fabaec4","justifyContent-flexStart":"a65d9c55","justifyContent-center":"b4e05554","justifyContent-flexEnd":"f76804e6","justifyContent-spaceAround":"_0095203e","justifyContent-spaceBetween":"_6eb365d1","justifyContent-spaceEvenly":"_4111e641","tablet-justifyContent-flexStart":"_6fda855d","tablet-justifyContent-center":"c2d359f8","tablet-justifyContent-flexEnd":"e271941d","tablet-justifyContent-spaceAround":"_2321488d","tablet-justifyContent-spaceBetween":"e4a9b2e3","tablet-justifyContent-spaceEvenly":"bdc232f2","desktop-justifyContent-flexStart":"_0d16bb5c","desktop-justifyContent-center":"eca8082a","desktop-justifyContent-flexEnd":"_97ea6bb7","desktop-justifyContent-spaceBetween":"_58e61602","alignSelf-stretch":"_794c8ab8","alignSelf-flexStart":"c510efd5","alignSelf-center":"b3f71626","alignSelf-flexEnd":"_13771d73","alignSelf-baseline":"_64318454","tablet-alignSelf-stretch":"_309c6ba7","tablet-alignSelf-flexStart":"_92dfd036","tablet-alignSelf-center":"_811f9906","tablet-alignSelf-flexEnd":"_2cd2336e","tablet-alignSelf-baseline":"bd2c9dad","desktop-alignSelf-stretch":"d8215926","desktop-alignSelf-flexStart":"b78f5c06","desktop-alignSelf-center":"_683e0cdb","desktop-alignSelf-flexEnd":"_489f1dc8","desktop-alignSelf-baseline":"_4aca1032","overflow-hidden":"_68aab614","overflow-auto":"ac28a3b1","overflow-visible":"_50b88b52","overflow-scroll":"c2fdd1c1","height-full":"_75ca308a","bg-default":"a9ca9830","bg-aside":"b9ff0c93","bg-highlight":"efc303e5","bg-selected":"ec657626","bg-toast":"_00d3482f","borderRadius-standard":"_958da546","borderRadius-full":"_79077c62","border-primary":"_68981e89","border-secondary":"_2bda8f7a","border-tertiary":"_7152c573","textAlign-start":"_1f362dec","textAlign-center":"_1c09cd18","textAlign-end":"b9663f5e","textAlign-justify":"a0eba489","tablet-textAlign-start":"_60b9abf8","tablet-textAlign-center":"_2c70943c","tablet-textAlign-end":"a512d4e1","tablet-textAlign-justify":"_5d02c334","desktop-textAlign-start":"ad2496a1","desktop-textAlign-center":"ee87b016","desktop-textAlign-end":"_6dd48127","desktop-textAlign-justify":"_1e70d216"};
 
 export default modules_54d944f2;
 //# sourceMappingURL=box.module.css.js.map

package/es/modal/modal.js

@@ -12,7 +12,7 @@ import FocusLock from 'react-focus-lock';
 import { hideOthers } from 'aria-hidden';
 import styles from './modal.module.css.js';
 
-const _excluded = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "exceptionallySetOverlayClassName", "autoFocus", "hideOnEscape", "hideOnInteractOutside", "children", "portalElement"],
+const _excluded = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "exceptionallySetOverlayClassName", "autoFocus", "hideOnEscape", "hideOnInteractOutside", "children", "portalElement", "onKeyDown"],
       _excluded2 = ["children", "button", "withDivider", "exceptionallySetClassName"],
       _excluded3 = ["exceptionallySetClassName", "children"],
       _excluded4 = ["exceptionallySetClassName", "withDivider"],
@@ -48,7 +48,8 @@ function Modal(_ref) {
     hideOnEscape = true,
     hideOnInteractOutside = true,
     children,
-    portalElement
+    portalElement,
+    onKeyDown
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
@@ -86,6 +87,14 @@ function Modal(_ref) {
 
     return hideOthers(portalRef.current);
   }, [isOpen]);
+  const handleKeyDown = useCallback(function handleKeyDown(event) {
+    if (hideOnEscape && onDismiss != null && event.key === 'Escape' && !event.defaultPrevented) {
+      event.stopPropagation();
+      onDismiss();
+    }
+
+    onKeyDown == null ? void 0 : onKeyDown(event);
+  }, [onDismiss, hideOnEscape, onKeyDown]);
 
   if (!isOpen) {
     return null;
@@ -114,7 +123,6 @@ function Modal(_ref) {
     ref: dialogRef,
     as: Box,
     store: store,
-    hideOnEscape: hideOnEscape,
     preventBodyScroll: true,
     borderRadius: "full",
     background: "default",
@@ -132,7 +140,9 @@ function Modal(_ref) {
     // Disable portal and backdrop as we control their markup
     portal: false,
     backdrop: false,
-    hideOnInteractOutside: false
+    hideOnInteractOutside: false,
+    hideOnEscape: false,
+    onKeyDown: handleKeyDown
   }), /*#__PURE__*/createElement(ModalContext.Provider, {
     value: contextValue
   }, children)))));

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 { Button, ButtonProps } from '../button'\n\nimport styles from './modal.module.css'\n\ntype ModalWidth = '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 type ModalProps = DivProps & {\n    /**\n     * The content of the modal.\n     */\n    children: React.ReactNode\n    /**\n     * Whether the modal is open and visible or not.\n     */\n    isOpen: boolean\n    /**\n     * Called when the user triggers closing the modal.\n     */\n    onDismiss?(): void\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     * 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     * Whether to set or not the focus initially to the first focusable element inside the modal.\n     */\n    autoFocus?: boolean\n    /**\n     * Controls if the modal is dismissed when pressing \"Escape\".\n     */\n    hideOnEscape?: DialogOptions['hideOnEscape']\n    /**\n     * Controls if the modal is dismissed when clicking outside the modal body, on the overlay.\n     */\n    hideOnInteractOutside?: DialogOptions['hideOnInteractOutside']\n    /**\n     * An escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n    /**\n     * An escape hatch in case you need to provide a custom class name to the overlay element.\n     */\n    exceptionallySetOverlayClassName?: string\n    /** Defines a string value that labels the current modal for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current modal for assistive technologies. */\n    'aria-labelledby'?: string\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    ...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    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\n                 * the modal from closing when the click starts inside the modal\n                 * and ends on the backdrop.\n                 */\n                onPointerDown={hideOnInteractOutside ? handleBackdropClick : undefined}\n                ref={backdropRef}\n            >\n                <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n                    <Dialog\n                        {...props}\n                        ref={dialogRef}\n                        as={Box}\n                        store={store}\n                        hideOnEscape={hideOnEscape}\n                        preventBodyScroll\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                        className={[exceptionallySetClassName, styles.container]}\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                    >\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 type ModalCloseButtonProps = Omit<\n    ButtonProps,\n    | 'type'\n    | 'children'\n    | 'variant'\n    | 'icon'\n    | 'startIcon'\n    | 'endIcon'\n    | 'disabled'\n    | 'loading'\n    | 'tabIndex'\n    | 'width'\n    | 'align'\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        <Button\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 type ModalHeaderProps = DivProps & {\n    /**\n     * The content of the header.\n     */\n    children: React.ReactNode\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     * Whether to render a divider line below the header.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\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 type ModalBodyProps = DivProps & {\n    /**\n     * The content of the modal body.\n     */\n    children: React.ReactNode\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\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 type ModalFooterProps = DivProps & {\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     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\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","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","Modal","isOpen","width","exceptionallySetClassName","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement","props","setOpen","visible","store","useDialogStore","open","contextValue","portalRef","dialogRef","backdropRef","handleBackdropClick","event","current","contains","target","stopPropagation","disableAccessibilityTreeOutside","hideOthers","Portal","Box","className","classNames","styles","overlay","onPointerDown","ref","FocusLock","whiteList","returnFocus","Dialog","as","preventBodyScroll","borderRadius","background","display","flexDirection","overflow","flexGrow","container","modal","autoFocusOnShow","autoFocusOnHide","portal","backdrop","Provider","value","ModalCloseButton","includeInTabOrder","setIncludeInTabOrder","isMounted","setIsMounted","skipAutoFocus","Button","variant","onClick","icon","CloseIcon","tabIndex","ModalHeader","button","withDivider","paddingLeft","paddingRight","paddingY","Columns","space","alignY","Column","headerContent","buttonContainer","Divider","ModalBody","padding","paddingBottom","ModalFooter","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 { Button, ButtonProps } from '../button'\n\nimport styles from './modal.module.css'\n\ntype ModalWidth = '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 type ModalProps = DivProps & {\n    /**\n     * The content of the modal.\n     */\n    children: React.ReactNode\n    /**\n     * Whether the modal is open and visible or not.\n     */\n    isOpen: boolean\n    /**\n     * Called when the user triggers closing the modal.\n     */\n    onDismiss?(): void\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     * 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     * Whether to set or not the focus initially to the first focusable element inside the modal.\n     */\n    autoFocus?: boolean\n    /**\n     * Controls if the modal is dismissed when pressing \"Escape\".\n     */\n    hideOnEscape?: DialogOptions['hideOnEscape']\n    /**\n     * Controls if the modal is dismissed when clicking outside the modal body, on the overlay.\n     */\n    hideOnInteractOutside?: DialogOptions['hideOnInteractOutside']\n    /**\n     * An escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n    /**\n     * An escape hatch in case you need to provide a custom class name to the overlay element.\n     */\n    exceptionallySetOverlayClassName?: string\n    /** Defines a string value that labels the current modal for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current modal for assistive technologies. */\n    'aria-labelledby'?: string\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    ...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\n                 * the modal from closing when the click starts inside the modal\n                 * and ends on the backdrop.\n                 */\n                onPointerDown={hideOnInteractOutside ? handleBackdropClick : undefined}\n                ref={backdropRef}\n            >\n                <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n                    <Dialog\n                        {...props}\n                        ref={dialogRef}\n                        as={Box}\n                        store={store}\n                        preventBodyScroll\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                        className={[exceptionallySetClassName, styles.container]}\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 type ModalCloseButtonProps = Omit<\n    ButtonProps,\n    | 'type'\n    | 'children'\n    | 'variant'\n    | 'icon'\n    | 'startIcon'\n    | 'endIcon'\n    | 'disabled'\n    | 'loading'\n    | 'tabIndex'\n    | 'width'\n    | 'align'\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        <Button\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 type ModalHeaderProps = DivProps & {\n    /**\n     * The content of the header.\n     */\n    children: React.ReactNode\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     * Whether to render a divider line below the header.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\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 type ModalBodyProps = DivProps & {\n    /**\n     * The content of the modal body.\n     */\n    children: React.ReactNode\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\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 type ModalFooterProps = DivProps & {\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     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\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","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","Modal","isOpen","width","exceptionallySetClassName","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement","onKeyDown","props","setOpen","visible","store","useDialogStore","open","contextValue","portalRef","dialogRef","backdropRef","handleBackdropClick","event","current","contains","target","stopPropagation","disableAccessibilityTreeOutside","hideOthers","handleKeyDown","key","defaultPrevented","Portal","Box","className","classNames","styles","overlay","onPointerDown","ref","FocusLock","whiteList","returnFocus","Dialog","as","preventBodyScroll","borderRadius","background","display","flexDirection","overflow","flexGrow","container","modal","autoFocusOnShow","autoFocusOnHide","portal","backdrop","Provider","value","ModalCloseButton","includeInTabOrder","setIncludeInTabOrder","isMounted","setIsMounted","skipAutoFocus","Button","variant","onClick","icon","CloseIcon","tabIndex","ModalHeader","button","withDivider","paddingLeft","paddingRight","paddingY","Columns","space","alignY","Column","headerContent","buttonContainer","Divider","ModalBody","padding","paddingBottom","ModalFooter","ModalActions","Inline","align"],"mappings":"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"}

package/es/prose/prose.module.css.js

@@ -1,4 +1,4 @@
-var modules_8ebe6db0 = {"prose":"_31409006","darkModeTypography":"_500989c8"};
+var modules_8ebe6db0 = {"prose":"_560c1e08","darkModeTypography":"_8b53b13e"};
 
 export default modules_8ebe6db0;
 //# sourceMappingURL=prose.module.css.js.map

package/lib/box/box.module.css.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={box:"_2a3b75a1","position-absolute":"_2286072d","position-fixed":"_0847ebf3","position-relative":"_9015266f","position-sticky":"_572136cd","tablet-position-absolute":"dec0da3c","tablet-position-fixed":"eb3f61a4","tablet-position-relative":"_6a9d01dd","tablet-position-sticky":"cf9268ba","desktop-position-absolute":"_6579cc9c","desktop-position-fixed":"_3a6a421f","desktop-position-relative":"_3a6950ac","desktop-position-sticky":"_142cd372","display-block":"_9a084bff","display-flex":"_509a57b4","display-inline":"_4a786bb9","display-inlineBlock":"_5d644b40","display-inlineFlex":"_973d00d0","display-none":"_3e4f26a6","tablet-display-block":"d525fe3a","tablet-display-flex":"_316c9f4b","tablet-display-inline":"_5e788d98","tablet-display-inlineBlock":"_851fc6b8","tablet-display-inlineFlex":"c16ba46a","tablet-display-none":"_759c0c1a","desktop-display-block":"c374b455","desktop-display-flex":"_8a854d8f","desktop-display-inline":"_805fa8dc","desktop-display-inlineBlock":"ab26af05","desktop-display-inlineFlex":"_9bd12ba4","desktop-display-none":"_581476ce","flexDirection-column":"_1fb9d90e","flexDirection-row":"e5a9206f","tablet-flexDirection-column":"_3e6a0be1","tablet-flexDirection-row":"e9e2e53a","desktop-flexDirection-column":"c7d6b073","desktop-flexDirection-row":"_935269b4","flexWrap-wrap":"_3692f9c2","flexWrap-nowrap":"_55f6f487","flexShrink-0":"d5d0d34a","flexGrow-0":"d8ff7933","flexGrow-1":"_4a93668a","alignItems-flexStart":"_5a8c5a77","alignItems-center":"_50ba6b6b","alignItems-flexEnd":"_3963f790","alignItems-baseline":"_55ef2d4e","tablet-alignItems-flexStart":"_3e2bfb5d","tablet-alignItems-center":"a99be1ab","tablet-alignItems-flexEnd":"fa8221fe","tablet-alignItems-baseline":"e83669a0","desktop-alignItems-flexStart":"_65e6b537","desktop-alignItems-center":"db356482","desktop-alignItems-flexEnd":"acc08587","desktop-alignItems-baseline":"ad033867","justifyContent-flexStart":"_985b733f","justifyContent-center":"_95a98d2a","justifyContent-flexEnd":"be9bf31a","justifyContent-spaceAround":"a89d8798","justifyContent-spaceBetween":"_904ef8fe","justifyContent-spaceEvenly":"_489975d5","tablet-justifyContent-flexStart":"a7175ae7","tablet-justifyContent-center":"_7334dead","tablet-justifyContent-flexEnd":"_746de733","tablet-justifyContent-spaceAround":"_6d09398a","tablet-justifyContent-spaceBetween":"c2324c1d","tablet-justifyContent-spaceEvenly":"_04bd6e07","desktop-justifyContent-flexStart":"_39b310de","desktop-justifyContent-center":"_0dc77292","desktop-justifyContent-flexEnd":"_96c15bd8","desktop-justifyContent-spaceBetween":"_096111a6","alignSelf-stretch":"_35d69587","alignSelf-flexStart":"f46f3a67","alignSelf-center":"fb6a8035","alignSelf-flexEnd":"d3193acd","alignSelf-baseline":"_1154f656","tablet-alignSelf-stretch":"_298e04af","tablet-alignSelf-flexStart":"_2c729d24","tablet-alignSelf-center":"_9ea5e943","tablet-alignSelf-flexEnd":"_02266425","tablet-alignSelf-baseline":"c16a5800","desktop-alignSelf-stretch":"_2ec9eb74","desktop-alignSelf-flexStart":"_34f1fb03","desktop-alignSelf-center":"_77c58550","desktop-alignSelf-flexEnd":"_9ffa429f","desktop-alignSelf-baseline":"_6cc14c5d","overflow-hidden":"f6342c26","overflow-auto":"_10a2f952","overflow-visible":"f20b8b87","overflow-scroll":"_4954f87c","height-full":"a83fb2f5","bg-default":"d85cf739","bg-aside":"_4eb1d749","bg-highlight":"da1ccaa5","bg-selected":"_82dc28e7","bg-toast":"_63ba3dfa","borderRadius-standard":"_34cd2b5e","borderRadius-full":"_5fe4d5e3","border-primary":"_1b34ffd9","border-secondary":"_705519b0","border-tertiary":"_67adc238","textAlign-start":"fff8bff0","textAlign-center":"f973eed0","textAlign-end":"_225acbd7","textAlign-justify":"dea1e8ba","tablet-textAlign-start":"_919d6c8f","tablet-textAlign-center":"ab9d970e","tablet-textAlign-end":"b5b45e0e","tablet-textAlign-justify":"bd6e42e0","desktop-textAlign-start":"_15120506","desktop-textAlign-center":"_337333b5","desktop-textAlign-end":"_221db0fb","desktop-textAlign-justify":"_29ea9711"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={box:"fb8d74bb","position-absolute":"_18f74af9","position-fixed":"b292fef1","position-relative":"e4e217d4","position-sticky":"_66895b64","tablet-position-absolute":"_00e8a0ce","tablet-position-fixed":"efaf64be","tablet-position-relative":"_76e540fd","tablet-position-sticky":"bd286900","desktop-position-absolute":"_09e9f472","desktop-position-fixed":"_893383f1","desktop-position-relative":"dea3890d","desktop-position-sticky":"_6a61c94d","display-block":"_64dcc902","display-flex":"_14423c92","display-inline":"_6a38242d","display-inlineBlock":"_348efc1f","display-inlineFlex":"_150907c8","display-none":"_3da48ad6","tablet-display-block":"_0daac9f2","tablet-display-flex":"f62c43b1","tablet-display-inline":"_5839a4e4","tablet-display-inlineBlock":"_8068aaf2","tablet-display-inlineFlex":"_76562ea5","tablet-display-none":"_4f7a886f","desktop-display-block":"_4fd4b789","desktop-display-flex":"_4d08e78f","desktop-display-inline":"_0da15585","desktop-display-inlineBlock":"d0fcc019","desktop-display-inlineFlex":"_79f967d4","desktop-display-none":"_2ffa0d03","flexDirection-column":"_2d7320f2","flexDirection-row":"_5f8879d9","tablet-flexDirection-column":"_2c919a43","tablet-flexDirection-row":"_4da1f194","desktop-flexDirection-column":"_66fd35ea","desktop-flexDirection-row":"_4b79448d","flexWrap-wrap":"_202b0c8c","flexWrap-nowrap":"_45a8f27f","flexShrink-0":"_7d9ec5b0","flexGrow-0":"_9ce442fb","flexGrow-1":"c3b69d70","alignItems-flexStart":"_7cc6458c","alignItems-center":"b76144ce","alignItems-flexEnd":"e42ffab4","alignItems-baseline":"_3975b234","tablet-alignItems-flexStart":"b670f77e","tablet-alignItems-center":"_976e7156","tablet-alignItems-flexEnd":"_385c60b1","tablet-alignItems-baseline":"_52b577fc","desktop-alignItems-flexStart":"_2e1cc27f","desktop-alignItems-center":"_3a9e51e9","desktop-alignItems-flexEnd":"dfc189b2","desktop-alignItems-baseline":"_5fabaec4","justifyContent-flexStart":"a65d9c55","justifyContent-center":"b4e05554","justifyContent-flexEnd":"f76804e6","justifyContent-spaceAround":"_0095203e","justifyContent-spaceBetween":"_6eb365d1","justifyContent-spaceEvenly":"_4111e641","tablet-justifyContent-flexStart":"_6fda855d","tablet-justifyContent-center":"c2d359f8","tablet-justifyContent-flexEnd":"e271941d","tablet-justifyContent-spaceAround":"_2321488d","tablet-justifyContent-spaceBetween":"e4a9b2e3","tablet-justifyContent-spaceEvenly":"bdc232f2","desktop-justifyContent-flexStart":"_0d16bb5c","desktop-justifyContent-center":"eca8082a","desktop-justifyContent-flexEnd":"_97ea6bb7","desktop-justifyContent-spaceBetween":"_58e61602","alignSelf-stretch":"_794c8ab8","alignSelf-flexStart":"c510efd5","alignSelf-center":"b3f71626","alignSelf-flexEnd":"_13771d73","alignSelf-baseline":"_64318454","tablet-alignSelf-stretch":"_309c6ba7","tablet-alignSelf-flexStart":"_92dfd036","tablet-alignSelf-center":"_811f9906","tablet-alignSelf-flexEnd":"_2cd2336e","tablet-alignSelf-baseline":"bd2c9dad","desktop-alignSelf-stretch":"d8215926","desktop-alignSelf-flexStart":"b78f5c06","desktop-alignSelf-center":"_683e0cdb","desktop-alignSelf-flexEnd":"_489f1dc8","desktop-alignSelf-baseline":"_4aca1032","overflow-hidden":"_68aab614","overflow-auto":"ac28a3b1","overflow-visible":"_50b88b52","overflow-scroll":"c2fdd1c1","height-full":"_75ca308a","bg-default":"a9ca9830","bg-aside":"b9ff0c93","bg-highlight":"efc303e5","bg-selected":"ec657626","bg-toast":"_00d3482f","borderRadius-standard":"_958da546","borderRadius-full":"_79077c62","border-primary":"_68981e89","border-secondary":"_2bda8f7a","border-tertiary":"_7152c573","textAlign-start":"_1f362dec","textAlign-center":"_1c09cd18","textAlign-end":"b9663f5e","textAlign-justify":"a0eba489","tablet-textAlign-start":"_60b9abf8","tablet-textAlign-center":"_2c70943c","tablet-textAlign-end":"a512d4e1","tablet-textAlign-justify":"_5d02c334","desktop-textAlign-start":"ad2496a1","desktop-textAlign-center":"ee87b016","desktop-textAlign-end":"_6dd48127","desktop-textAlign-justify":"_1e70d216"};
 //# sourceMappingURL=box.module.css.js.map

package/lib/modal/modal.d.ts

@@ -94,7 +94,7 @@ export declare type ModalProps = DivProps & {
  * @see ModalFooter
  * @see ModalBody
  */
-export declare function Modal({ isOpen, onDismiss, height, width, exceptionallySetClassName, exceptionallySetOverlayClassName, autoFocus, hideOnEscape, hideOnInteractOutside, children, portalElement, ...props }: ModalProps): JSX.Element | null;
+export declare function Modal({ isOpen, onDismiss, height, width, exceptionallySetClassName, exceptionallySetOverlayClassName, autoFocus, hideOnEscape, hideOnInteractOutside, children, portalElement, onKeyDown, ...props }: ModalProps): JSX.Element | null;
 export declare type ModalCloseButtonProps = Omit<ButtonProps, 'type' | 'children' | 'variant' | 'icon' | 'startIcon' | 'endIcon' | 'disabled' | 'loading' | 'tabIndex' | 'width' | 'align'> & {
     /**
      * The descriptive label of the button.

package/lib/modal/modal.js

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),l=(e(a),e(require("classnames"))),n=require("../box/box.js"),o=require("../columns/columns.js"),r=require("../divider/divider.js"),i=require("../inline/inline.js"),s=require("@ariakit/react"),c=require("../button/button.js"),u=require("../icons/close-icon.js"),d=e(require("react-focus-lock")),m=require("aria-hidden"),p=require("./modal.module.css.js");const h=["isOpen","onDismiss","height","width","exceptionallySetClassName","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement"],f=["children","button","withDivider","exceptionallySetClassName"],x=["exceptionallySetClassName","children"],b=["exceptionallySetClassName","withDivider"],g=["children"],E=a.createContext({onDismiss:void 0,height:"fitContent"});function v(e){return!(e.ownerDocument===document&&"iframe"===e.tagName.toLowerCase())}function C(e){const{onDismiss:l}=a.useContext(E),[n,o]=a.useState(!1),[r,i]=a.useState(!1);return a.useEffect((function(){r?o(!0):i(!0)}),[r]),a.createElement(c.Button,t.objectSpread2(t.objectSpread2({},e),{},{variant:"quaternary",onClick:l,icon:a.createElement(u.CloseIcon,null),tabIndex:n?0:-1}))}function S(e){let{exceptionallySetClassName:l,withDivider:o=!1}=e,i=t.objectWithoutProperties(e,b);return a.createElement(a.Fragment,null,o?a.createElement(r.Divider,null):null,a.createElement(n.Box,t.objectSpread2(t.objectSpread2({as:"footer"},i),{},{className:l,padding:"large"})))}exports.Modal=function(e){let{isOpen:o,onDismiss:r,height:i="fitContent",width:c="medium",exceptionallySetClassName:u,exceptionallySetOverlayClassName:f,autoFocus:x=!0,hideOnEscape:b=!0,hideOnInteractOutside:g=!0,children:C,portalElement:S}=e,j=t.objectWithoutProperties(e,h);const y=a.useCallback(e=>{e||null==r||r()},[r]),N=s.useDialogStore({open:o,setOpen:y}),O=a.useMemo(()=>({onDismiss:r,height:i}),[r,i]),w=a.useRef(null),D=a.useRef(null),q=a.useRef(null),B=a.useCallback(e=>{var t,a;null!=(t=D.current)&&t.contains(e.target)||null==(a=q.current)||!a.contains(e.target)||(e.stopPropagation(),null==r||r())},[r]);return a.useLayoutEffect((function(){if(o&&w.current)return m.hideOthers(w.current)}),[o]),o?a.createElement(s.Portal,{portalRef:w,portalElement:S},a.createElement(n.Box,{"data-testid":"modal-overlay","data-overlay":!0,className:l(p.default.overlay,p.default[i],p.default[c],f),onPointerDown:g?B:void 0,ref:q},a.createElement(d,{autoFocus:x,whiteList:v,returnFocus:!0},a.createElement(s.Dialog,t.objectSpread2(t.objectSpread2({},j),{},{ref:D,as:n.Box,store:N,hideOnEscape:b,preventBodyScroll:!0,borderRadius:"full",background:"default",display:"flex",flexDirection:"column",overflow:"hidden",height:"expand"===i?"full":void 0,flexGrow:"expand"===i?1:0,className:[u,p.default.container],modal:!1,autoFocus:!1,autoFocusOnShow:!1,autoFocusOnHide:!1,portal:!1,backdrop:!1,hideOnInteractOutside:!1}),a.createElement(E.Provider,{value:O},C))))):null},exports.ModalActions=function(e){let{children:l}=e,n=t.objectWithoutProperties(e,g);return a.createElement(S,t.objectSpread2({},n),a.createElement(i.Inline,{align:"right",space:"large"},l))},exports.ModalBody=function(e){let{exceptionallySetClassName:l,children:o}=e,r=t.objectWithoutProperties(e,x);const{height:i}=a.useContext(E);return a.createElement(n.Box,t.objectSpread2(t.objectSpread2({},r),{},{className:l,flexGrow:"expand"===i?1:0,height:"expand"===i?"full":void 0,overflow:"auto"}),a.createElement(n.Box,{padding:"large",paddingBottom:"xxlarge"},o))},exports.ModalCloseButton=C,exports.ModalFooter=S,exports.ModalHeader=function(e){let{children:l,button:i=!0,withDivider:s=!1,exceptionallySetClassName:c}=e,u=t.objectWithoutProperties(e,f);return a.createElement(a.Fragment,null,a.createElement(n.Box,t.objectSpread2(t.objectSpread2({},u),{},{as:"header",paddingLeft:"large",paddingRight:!1===i||null===i?"large":"small",paddingY:"small",className:c}),a.createElement(o.Columns,{space:"large",alignY:"center"},a.createElement(o.Column,{width:"auto"},l),!1===i||null===i?a.createElement("div",{className:p.default.headerContent}):a.createElement(o.Column,{width:"content",exceptionallySetClassName:p.default.buttonContainer,"data-testid":"button-container"},"boolean"==typeof i?a.createElement(C,{"aria-label":"Close modal",autoFocus:!1}):i))),s?a.createElement(r.Divider,null):null)};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),n=(e(a),e(require("classnames"))),l=require("../box/box.js"),o=require("../columns/columns.js"),r=require("../divider/divider.js"),i=require("../inline/inline.js"),s=require("@ariakit/react"),u=require("../button/button.js"),c=require("../icons/close-icon.js"),d=e(require("react-focus-lock")),m=require("aria-hidden"),p=require("./modal.module.css.js");const h=["isOpen","onDismiss","height","width","exceptionallySetClassName","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement","onKeyDown"],f=["children","button","withDivider","exceptionallySetClassName"],x=["exceptionallySetClassName","children"],b=["exceptionallySetClassName","withDivider"],g=["children"],E=a.createContext({onDismiss:void 0,height:"fitContent"});function v(e){return!(e.ownerDocument===document&&"iframe"===e.tagName.toLowerCase())}function C(e){const{onDismiss:n}=a.useContext(E),[l,o]=a.useState(!1),[r,i]=a.useState(!1);return a.useEffect((function(){r?o(!0):i(!0)}),[r]),a.createElement(u.Button,t.objectSpread2(t.objectSpread2({},e),{},{variant:"quaternary",onClick:n,icon:a.createElement(c.CloseIcon,null),tabIndex:l?0:-1}))}function y(e){let{exceptionallySetClassName:n,withDivider:o=!1}=e,i=t.objectWithoutProperties(e,b);return a.createElement(a.Fragment,null,o?a.createElement(r.Divider,null):null,a.createElement(l.Box,t.objectSpread2(t.objectSpread2({as:"footer"},i),{},{className:n,padding:"large"})))}exports.Modal=function(e){let{isOpen:o,onDismiss:r,height:i="fitContent",width:u="medium",exceptionallySetClassName:c,exceptionallySetOverlayClassName:f,autoFocus:x=!0,hideOnEscape:b=!0,hideOnInteractOutside:g=!0,children:C,portalElement:y,onKeyDown:S}=e,j=t.objectWithoutProperties(e,h);const w=a.useCallback(e=>{e||null==r||r()},[r]),D=s.useDialogStore({open:o,setOpen:w}),N=a.useMemo(()=>({onDismiss:r,height:i}),[r,i]),O=a.useRef(null),q=a.useRef(null),P=a.useRef(null),B=a.useCallback(e=>{var t,a;null!=(t=q.current)&&t.contains(e.target)||null==(a=P.current)||!a.contains(e.target)||(e.stopPropagation(),null==r||r())},[r]);a.useLayoutEffect((function(){if(o&&O.current)return m.hideOthers(O.current)}),[o]);const F=a.useCallback((function(e){b&&null!=r&&"Escape"===e.key&&!e.defaultPrevented&&(e.stopPropagation(),r()),null==S||S(e)}),[r,b,S]);return o?a.createElement(s.Portal,{portalRef:O,portalElement:y},a.createElement(l.Box,{"data-testid":"modal-overlay","data-overlay":!0,className:n(p.default.overlay,p.default[i],p.default[u],f),onPointerDown:g?B:void 0,ref:P},a.createElement(d,{autoFocus:x,whiteList:v,returnFocus:!0},a.createElement(s.Dialog,t.objectSpread2(t.objectSpread2({},j),{},{ref:q,as:l.Box,store:D,preventBodyScroll:!0,borderRadius:"full",background:"default",display:"flex",flexDirection:"column",overflow:"hidden",height:"expand"===i?"full":void 0,flexGrow:"expand"===i?1:0,className:[c,p.default.container],modal:!1,autoFocus:!1,autoFocusOnShow:!1,autoFocusOnHide:!1,portal:!1,backdrop:!1,hideOnInteractOutside:!1,hideOnEscape:!1,onKeyDown:F}),a.createElement(E.Provider,{value:N},C))))):null},exports.ModalActions=function(e){let{children:n}=e,l=t.objectWithoutProperties(e,g);return a.createElement(y,t.objectSpread2({},l),a.createElement(i.Inline,{align:"right",space:"large"},n))},exports.ModalBody=function(e){let{exceptionallySetClassName:n,children:o}=e,r=t.objectWithoutProperties(e,x);const{height:i}=a.useContext(E);return a.createElement(l.Box,t.objectSpread2(t.objectSpread2({},r),{},{className:n,flexGrow:"expand"===i?1:0,height:"expand"===i?"full":void 0,overflow:"auto"}),a.createElement(l.Box,{padding:"large",paddingBottom:"xxlarge"},o))},exports.ModalCloseButton=C,exports.ModalFooter=y,exports.ModalHeader=function(e){let{children:n,button:i=!0,withDivider:s=!1,exceptionallySetClassName:u}=e,c=t.objectWithoutProperties(e,f);return a.createElement(a.Fragment,null,a.createElement(l.Box,t.objectSpread2(t.objectSpread2({},c),{},{as:"header",paddingLeft:"large",paddingRight:!1===i||null===i?"large":"small",paddingY:"small",className:u}),a.createElement(o.Columns,{space:"large",alignY:"center"},a.createElement(o.Column,{width:"auto"},n),!1===i||null===i?a.createElement("div",{className:p.default.headerContent}):a.createElement(o.Column,{width:"content",exceptionallySetClassName:p.default.buttonContainer,"data-testid":"button-container"},"boolean"==typeof i?a.createElement(C,{"aria-label":"Close modal",autoFocus:!1}):i))),s?a.createElement(r.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 { Button, ButtonProps } from '../button'\n\nimport styles from './modal.module.css'\n\ntype ModalWidth = '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 type ModalProps = DivProps & {\n    /**\n     * The content of the modal.\n     */\n    children: React.ReactNode\n    /**\n     * Whether the modal is open and visible or not.\n     */\n    isOpen: boolean\n    /**\n     * Called when the user triggers closing the modal.\n     */\n    onDismiss?(): void\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     * 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     * Whether to set or not the focus initially to the first focusable element inside the modal.\n     */\n    autoFocus?: boolean\n    /**\n     * Controls if the modal is dismissed when pressing \"Escape\".\n     */\n    hideOnEscape?: DialogOptions['hideOnEscape']\n    /**\n     * Controls if the modal is dismissed when clicking outside the modal body, on the overlay.\n     */\n    hideOnInteractOutside?: DialogOptions['hideOnInteractOutside']\n    /**\n     * An escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n    /**\n     * An escape hatch in case you need to provide a custom class name to the overlay element.\n     */\n    exceptionallySetOverlayClassName?: string\n    /** Defines a string value that labels the current modal for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current modal for assistive technologies. */\n    'aria-labelledby'?: string\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    ...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    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\n                 * the modal from closing when the click starts inside the modal\n                 * and ends on the backdrop.\n                 */\n                onPointerDown={hideOnInteractOutside ? handleBackdropClick : undefined}\n                ref={backdropRef}\n            >\n                <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n                    <Dialog\n                        {...props}\n                        ref={dialogRef}\n                        as={Box}\n                        store={store}\n                        hideOnEscape={hideOnEscape}\n                        preventBodyScroll\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                        className={[exceptionallySetClassName, styles.container]}\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                    >\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 type ModalCloseButtonProps = Omit<\n    ButtonProps,\n    | 'type'\n    | 'children'\n    | 'variant'\n    | 'icon'\n    | 'startIcon'\n    | 'endIcon'\n    | 'disabled'\n    | 'loading'\n    | 'tabIndex'\n    | 'width'\n    | 'align'\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        <Button\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 type ModalHeaderProps = DivProps & {\n    /**\n     * The content of the header.\n     */\n    children: React.ReactNode\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     * Whether to render a divider line below the header.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\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 type ModalBodyProps = DivProps & {\n    /**\n     * The content of the modal body.\n     */\n    children: React.ReactNode\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\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 type ModalFooterProps = DivProps & {\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     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\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","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","ModalCloseButton","props","includeInTabOrder","setIncludeInTabOrder","isMounted","setIsMounted","Button","variant","onClick","icon","CloseIcon","tabIndex","ModalFooter","exceptionallySetClassName","withDivider","Divider","Box","as","className","padding","isOpen","width","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement","setOpen","visible","store","useDialogStore","open","contextValue","portalRef","dialogRef","backdropRef","handleBackdropClick","event","current","_dialogRef$current","contains","target","_backdropRef$current","stopPropagation","hideOthers","Portal","classNames","styles","overlay","onPointerDown","ref","FocusLock","whiteList","returnFocus","Dialog","preventBodyScroll","borderRadius","background","display","flexDirection","overflow","flexGrow","container","modal","autoFocusOnShow","autoFocusOnHide","portal","backdrop","Provider","value","Inline","align","space","paddingBottom","button","paddingLeft","paddingRight","paddingY","Columns","alignY","Column","headerContent","buttonContainer"],"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 { Button, ButtonProps } from '../button'\n\nimport styles from './modal.module.css'\n\ntype ModalWidth = '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 type ModalProps = DivProps & {\n    /**\n     * The content of the modal.\n     */\n    children: React.ReactNode\n    /**\n     * Whether the modal is open and visible or not.\n     */\n    isOpen: boolean\n    /**\n     * Called when the user triggers closing the modal.\n     */\n    onDismiss?(): void\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     * 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     * Whether to set or not the focus initially to the first focusable element inside the modal.\n     */\n    autoFocus?: boolean\n    /**\n     * Controls if the modal is dismissed when pressing \"Escape\".\n     */\n    hideOnEscape?: DialogOptions['hideOnEscape']\n    /**\n     * Controls if the modal is dismissed when clicking outside the modal body, on the overlay.\n     */\n    hideOnInteractOutside?: DialogOptions['hideOnInteractOutside']\n    /**\n     * An escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n    /**\n     * An escape hatch in case you need to provide a custom class name to the overlay element.\n     */\n    exceptionallySetOverlayClassName?: string\n    /** Defines a string value that labels the current modal for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current modal for assistive technologies. */\n    'aria-labelledby'?: string\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    ...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\n                 * the modal from closing when the click starts inside the modal\n                 * and ends on the backdrop.\n                 */\n                onPointerDown={hideOnInteractOutside ? handleBackdropClick : undefined}\n                ref={backdropRef}\n            >\n                <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n                    <Dialog\n                        {...props}\n                        ref={dialogRef}\n                        as={Box}\n                        store={store}\n                        preventBodyScroll\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                        className={[exceptionallySetClassName, styles.container]}\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 type ModalCloseButtonProps = Omit<\n    ButtonProps,\n    | 'type'\n    | 'children'\n    | 'variant'\n    | 'icon'\n    | 'startIcon'\n    | 'endIcon'\n    | 'disabled'\n    | 'loading'\n    | 'tabIndex'\n    | 'width'\n    | 'align'\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        <Button\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 type ModalHeaderProps = DivProps & {\n    /**\n     * The content of the header.\n     */\n    children: React.ReactNode\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     * Whether to render a divider line below the header.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\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 type ModalBodyProps = DivProps & {\n    /**\n     * The content of the modal body.\n     */\n    children: React.ReactNode\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\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 type ModalFooterProps = DivProps & {\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     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\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","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","ModalCloseButton","props","includeInTabOrder","setIncludeInTabOrder","isMounted","setIsMounted","Button","variant","onClick","icon","CloseIcon","tabIndex","ModalFooter","exceptionallySetClassName","withDivider","Divider","Box","as","className","padding","isOpen","width","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement","onKeyDown","setOpen","visible","store","useDialogStore","open","contextValue","portalRef","dialogRef","backdropRef","handleBackdropClick","event","current","_dialogRef$current","contains","target","_backdropRef$current","stopPropagation","hideOthers","handleKeyDown","key","defaultPrevented","Portal","classNames","styles","overlay","onPointerDown","ref","FocusLock","whiteList","returnFocus","Dialog","preventBodyScroll","borderRadius","background","display","flexDirection","overflow","flexGrow","container","modal","autoFocusOnShow","autoFocusOnHide","portal","backdrop","Provider","value","Inline","align","space","paddingBottom","button","paddingLeft","paddingRight","paddingY","Columns","alignY","Column","headerContent","buttonContainer"],"mappings":"46BA4BMA,EAAeC,gBAAuC,CACxDC,eAAWC,EACXC,OAAQ,eA8FZ,SAASC,EAAmBC,GACxB,QAASA,EAAQC,gBAAkBC,UAA8C,WAAlCF,EAAQG,QAAQC,wBAkLnDC,EAAiBC,GAC7B,MAAMV,UAAEA,GAAcD,aAAiBD,IAChCa,EAAmBC,GAAwBb,YAAe,IAC1Dc,EAAWC,GAAgBf,YAAe,GAajD,OAXAA,aACI,WACQc,EACAD,GAAqB,GAErBE,GAAa,KAGrB,CAACD,IAIDd,gBAACgB,4CACOL,OACJM,QAAQ,aACRC,QAASjB,EACTkB,KAAMnB,gBAACoB,kBACPC,SAAUT,EAAoB,GAAK,cAqJ/BU,SAAYC,0BACxBA,EADwBC,YAExBA,GAAc,KACXb,iCAEH,OACIX,gCACKwB,EAAcxB,gBAACyB,gBAAa,KAC7BzB,gBAAC0B,uCAAIC,GAAG,UAAahB,OAAOiB,UAAWL,EAA2BM,QAAQ,0CAzVhEC,OAClBA,EADkB7B,UAElBA,EAFkBE,OAGlBA,EAAS,aAHS4B,MAIlBA,EAAQ,SAJUR,0BAKlBA,EALkBS,iCAMlBA,EANkBC,UAOlBA,GAAY,EAPMC,aAQlBA,GAAe,EARGC,sBASlBA,GAAwB,EATNC,SAUlBA,EAVkBC,cAWlBA,EAXkBC,UAYlBA,KACG3B,iCAEH,MAAM4B,EAAUvC,cACXwC,IACQA,SACDvC,GAAAA,KAGR,CAACA,IAECwC,EAAQC,iBAAe,CAAEC,KAAMb,EAAQS,QAAAA,IAEvCK,EAAkC5C,UAAc,MAASC,UAAAA,EAAWE,OAAAA,IAAW,CACjFF,EACAE,IAGE0C,EAAY7C,SAAiC,MAC7C8C,EAAY9C,SAAoC,MAChD+C,EAAc/C,SAAoC,MAClDgD,EAAsBhD,cACvBiD,qBAIQH,EAAUI,UAAVC,EAAmBC,SAASH,EAAMI,kBAEnCN,EAAYG,WAAZI,EAAqBF,SAASH,EAAMI,UAEpCJ,EAAMM,wBACNtD,GAAAA,MAGR,CAACA,IAGLD,mBACI,WACI,GAAK8B,GAAWe,EAAUK,QAI1B,OAAOM,aAAWX,EAAUK,WAEhC,CAACpB,IAGL,MAAM2B,EAAgBzD,eAClB,SAAuBiD,GAEff,GACa,MAAbjC,GACc,WAAdgD,EAAMS,MACLT,EAAMU,mBAEPV,EAAMM,kBACNtD,WAEJqC,GAAAA,EAAYW,KAEhB,CAAChD,EAAWiC,EAAcI,IAG9B,OAAKR,EAKD9B,gBAAC4D,UAAOf,UAAWA,EAAWR,cAAeA,GACzCrC,gBAAC0B,qBACe,kCAEZE,UAAWiC,EACPC,UAAOC,QACPD,UAAO3D,GACP2D,UAAO/B,GACPC,GAOJgC,cAAe7B,EAAwBa,OAAsB9C,EAC7D+D,IAAKlB,GAEL/C,gBAACkE,GAAUjC,UAAWA,EAAWkC,UAAW/D,EAAoBgE,aAAa,GACzEpE,gBAACqE,4CACO1D,OACJsD,IAAKnB,EACLnB,GAAID,MACJe,MAAOA,EACP6B,qBACAC,aAAa,OACbC,WAAW,UACXC,QAAQ,OACRC,cAAc,SACdC,SAAS,SACTxE,OAAmB,WAAXA,EAAsB,YAASD,EACvC0E,SAAqB,WAAXzE,EAAsB,EAAI,EACpCyB,UAAW,CAACL,EAA2BuC,UAAOe,WAE9CC,OAAO,EACP7C,WAAW,EACX8C,iBAAiB,EACjBC,iBAAiB,EAEjBC,QAAQ,EACRC,UAAU,EACV/C,uBAAuB,EACvBD,cAAc,EACdI,UAAWmB,IAEXzD,gBAACD,EAAaoF,UAASC,MAAOxC,GACzBR,OAlDd,2CA2RcA,SAAEA,KAAazB,iCACxC,OACIX,gBAACsB,qBAAgBX,GACbX,gBAACqF,UAAOC,MAAM,QAAQC,MAAM,SACvBnD,uCAvESb,0BAAEA,EAAFa,SAA6BA,KAAazB,iCAChE,MAAMR,OAAEA,GAAWH,aAAiBD,GACpC,OACIC,gBAAC0B,yCACOf,OACJiB,UAAWL,EACXqD,SAAqB,WAAXzE,EAAsB,EAAI,EACpCA,OAAmB,WAAXA,EAAsB,YAASD,EACvCyE,SAAS,SAET3E,gBAAC0B,OAAIG,QAAQ,QAAQ2D,cAAc,WAC9BpD,0FA/EWA,SACxBA,EADwBqD,OAExBA,GAAS,EAFejE,YAGxBA,GAAc,EAHUD,0BAIxBA,KACGZ,iCAEH,OACIX,gCACIA,gBAAC0B,yCACOf,OACJgB,GAAG,SACH+D,YAAY,QACZC,cAAyB,IAAXF,GAA+B,OAAXA,EAAkB,QAAU,QAC9DG,SAAS,QACThE,UAAWL,IAEXvB,gBAAC6F,WAAQN,MAAM,QAAQO,OAAO,UAC1B9F,gBAAC+F,UAAOhE,MAAM,QAAQK,IACV,IAAXqD,GAA+B,OAAXA,EACjBzF,uBAAK4B,UAAWkC,UAAOkC,gBAEvBhG,gBAAC+F,UACGhE,MAAM,UACNR,0BAA2BuC,UAAOmC,8BACtB,oBAEO,kBAAXR,EACJzF,gBAACU,gBAA4B,cAAcuB,WAAW,IAEtDwD,KAMnBjE,EAAcxB,gBAACyB,gBAAa"}

package/lib/prose/prose.module.css.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={prose:"_31409006",darkModeTypography:"_500989c8"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={prose:"_560c1e08",darkModeTypography:"_8b53b13e"};
 //# sourceMappingURL=prose.module.css.js.map

package/package.json

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

package/styles/alert.css

@@ -1,4 +1,4 @@
-._2a3b75a1{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._2a3b75a1{font-family:monospace}._2a3b75a1[hidden]{display:none!important}._2286072d{position:absolute}._0847ebf3{position:fixed}._9015266f{position:relative}._572136cd{position:-webkit-sticky;position:sticky}@media (min-width:768px){.dec0da3c{position:absolute}.eb3f61a4{position:fixed}._6a9d01dd{position:relative}.cf9268ba{position:-webkit-sticky;position:sticky}}@media (min-width:992px){._6579cc9c{position:absolute}._3a6a421f{position:fixed}._3a6950ac{position:relative}._142cd372{position:-webkit-sticky;position:sticky}}._9a084bff{display:block}._509a57b4{display:flex}._4a786bb9{display:inline}._5d644b40{display:inline-block}._973d00d0{display:inline-flex}._3e4f26a6{display:none}@media (min-width:768px){.d525fe3a{display:block}._316c9f4b{display:flex}._5e788d98{display:inline}._851fc6b8{display:inline-block}.c16ba46a{display:inline-flex}._759c0c1a{display:none}}@media (min-width:992px){.c374b455{display:block}._8a854d8f{display:flex}._805fa8dc{display:inline}.ab26af05{display:inline-block}._9bd12ba4{display:inline-flex}._581476ce{display:none}}._1fb9d90e{flex-direction:column}.e5a9206f{flex-direction:row}@media (min-width:768px){._3e6a0be1{flex-direction:column}.e9e2e53a{flex-direction:row}}@media (min-width:992px){.c7d6b073{flex-direction:column}._935269b4{flex-direction:row}}._3692f9c2{flex-wrap:wrap}._55f6f487{flex-wrap:nowrap}.d5d0d34a{flex-shrink:0}.d8ff7933{flex-grow:0}._4a93668a{flex-grow:1}._5a8c5a77{align-items:flex-start}._50ba6b6b{align-items:center}._3963f790{align-items:flex-end}._55ef2d4e{align-items:baseline}@media (min-width:768px){._3e2bfb5d{align-items:flex-start}.a99be1ab{align-items:center}.fa8221fe{align-items:flex-end}.e83669a0{align-items:baseline}}@media (min-width:992px){._65e6b537{align-items:flex-start}.db356482{align-items:center}.acc08587{align-items:flex-end}.ad033867{align-items:baseline}}._985b733f{justify-content:flex-start}._95a98d2a{justify-content:center}.be9bf31a{justify-content:flex-end}.a89d8798{justify-content:space-around}._904ef8fe{justify-content:space-between}._489975d5{justify-content:space-evenly}@media (min-width:768px){.a7175ae7{justify-content:flex-start}._7334dead{justify-content:center}._746de733{justify-content:flex-end}._6d09398a{justify-content:space-around}.c2324c1d{justify-content:space-between}._04bd6e07{justify-content:space-evenly}}@media (min-width:992px){._39b310de{justify-content:flex-start}._0dc77292{justify-content:center}._96c15bd8{justify-content:flex-end}._6d09398a{justify-content:space-around}._096111a6{justify-content:space-between}._04bd6e07{justify-content:space-evenly}}._35d69587{align-self:stretch}.f46f3a67{align-self:flex-start}.fb6a8035{align-self:center}.d3193acd{align-self:flex-end}._1154f656{align-self:baseline}@media (min-width:768px){._298e04af{align-self:stretch}._2c729d24{align-self:flex-start}._9ea5e943{align-self:center}._02266425{align-self:flex-end}.c16a5800{align-self:baseline}}@media (min-width:992px){._2ec9eb74{align-self:stretch}._34f1fb03{align-self:flex-start}._77c58550{align-self:center}._9ffa429f{align-self:flex-end}._6cc14c5d{align-self:baseline}}.f6342c26{overflow:hidden}._10a2f952{overflow:auto}.f20b8b87{overflow:visible}._4954f87c{overflow:scroll}.a83fb2f5{height:100%}.d85cf739{background-color:var(--reactist-bg-default)}._4eb1d749{background-color:var(--reactist-bg-aside)}.da1ccaa5{background-color:var(--reactist-bg-highlight)}._82dc28e7{background-color:var(--reactist-bg-selected)}._63ba3dfa{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)}._34cd2b5e{border-radius:var(--reactist-border-radius-small)}._5fe4d5e3{border-radius:var(--reactist-border-radius-large)}._1b34ffd9{border:1px solid var(--reactist-divider-primary)}._705519b0{border:1px solid var(--reactist-divider-secondary)}._67adc238{border:1px solid var(--reactist-divider-tertiary)}.fff8bff0{text-align:start}.f973eed0{text-align:center}._225acbd7{text-align:end}.dea1e8ba{text-align:justify}@media (min-width:768px){._919d6c8f{text-align:start}.ab9d970e{text-align:center}.b5b45e0e{text-align:end}.bd6e42e0{text-align:justify}}@media (min-width:992px){._15120506{text-align:start}._337333b5{text-align:center}._221db0fb{text-align:end}._29ea9711{text-align:justify}}
+.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)}

package/styles/avatar.css

@@ -1,5 +1,5 @@
 :root{--reactist-avatar-size-xxsmall:16px;--reactist-avatar-size-xsmall:20px;--reactist-avatar-size-small:30px;--reactist-avatar-size-medium:32px;--reactist-avatar-size-large:34px;--reactist-avatar-size-xlarge:48px;--reactist-avatar-size-xxlarge:70px;--reactist-avatar-size-xxxlarge:100px;--reactist-avatar-size:var(--reactist-avatar-size-large)}._38a1be89{flex-shrink:0;background-position:50%;color:#fff;text-align:center;border-radius:50%;width:var(--reactist-avatar-size);height:var(--reactist-avatar-size);line-height:var(--reactist-avatar-size);background-size:var(--reactist-avatar-size);font-size:calc(var(--reactist-avatar-size)/2)}.d32e92ae{--reactist-avatar-size:var(--reactist-avatar-size-xxsmall)}._0667d719{--reactist-avatar-size:var(--reactist-avatar-size-xsmall)}.cf529fcf{--reactist-avatar-size:var(--reactist-avatar-size-small)}._6e268eab{--reactist-avatar-size:var(--reactist-avatar-size-medium)}.d64c62cf{--reactist-avatar-size:var(--reactist-avatar-size-large)}._44fb77de{--reactist-avatar-size:var(--reactist-avatar-size-xlarge)}._01f85e0e{--reactist-avatar-size:var(--reactist-avatar-size-xxlarge)}._41a5fe19{--reactist-avatar-size:var(--reactist-avatar-size-xxxlarge)}@media (min-width:768px){._6ab1577d{--reactist-avatar-size:var(--reactist-avatar-size-xxsmall)}.b52a4963{--reactist-avatar-size:var(--reactist-avatar-size-xsmall)}._714a8419{--reactist-avatar-size:var(--reactist-avatar-size-small)}._81cd4d51{--reactist-avatar-size:var(--reactist-avatar-size-medium)}.bf0a4edb{--reactist-avatar-size:var(--reactist-avatar-size-large)}.e4f0dabd{--reactist-avatar-size:var(--reactist-avatar-size-xlarge)}._67ea065d{--reactist-avatar-size:var(--reactist-avatar-size-xxlarge)}._2af7f76f{--reactist-avatar-size:var(--reactist-avatar-size-xxxlarge)}}@media (min-width:992px){._759081dc{--reactist-avatar-size:var(--reactist-avatar-size-xxsmall)}._8290d1c1{--reactist-avatar-size:var(--reactist-avatar-size-xsmall)}._48ea172d{--reactist-avatar-size:var(--reactist-avatar-size-small)}._758f6641{--reactist-avatar-size:var(--reactist-avatar-size-medium)}.f9ada088{--reactist-avatar-size:var(--reactist-avatar-size-large)}.d3bb7470{--reactist-avatar-size:var(--reactist-avatar-size-xlarge)}._9a312ee3{--reactist-avatar-size:var(--reactist-avatar-size-xxlarge)}.a1d30c23{--reactist-avatar-size:var(--reactist-avatar-size-xxxlarge)}}
-._2a3b75a1{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._2a3b75a1{font-family:monospace}._2a3b75a1[hidden]{display:none!important}._2286072d{position:absolute}._0847ebf3{position:fixed}._9015266f{position:relative}._572136cd{position:-webkit-sticky;position:sticky}@media (min-width:768px){.dec0da3c{position:absolute}.eb3f61a4{position:fixed}._6a9d01dd{position:relative}.cf9268ba{position:-webkit-sticky;position:sticky}}@media (min-width:992px){._6579cc9c{position:absolute}._3a6a421f{position:fixed}._3a6950ac{position:relative}._142cd372{position:-webkit-sticky;position:sticky}}._9a084bff{display:block}._509a57b4{display:flex}._4a786bb9{display:inline}._5d644b40{display:inline-block}._973d00d0{display:inline-flex}._3e4f26a6{display:none}@media (min-width:768px){.d525fe3a{display:block}._316c9f4b{display:flex}._5e788d98{display:inline}._851fc6b8{display:inline-block}.c16ba46a{display:inline-flex}._759c0c1a{display:none}}@media (min-width:992px){.c374b455{display:block}._8a854d8f{display:flex}._805fa8dc{display:inline}.ab26af05{display:inline-block}._9bd12ba4{display:inline-flex}._581476ce{display:none}}._1fb9d90e{flex-direction:column}.e5a9206f{flex-direction:row}@media (min-width:768px){._3e6a0be1{flex-direction:column}.e9e2e53a{flex-direction:row}}@media (min-width:992px){.c7d6b073{flex-direction:column}._935269b4{flex-direction:row}}._3692f9c2{flex-wrap:wrap}._55f6f487{flex-wrap:nowrap}.d5d0d34a{flex-shrink:0}.d8ff7933{flex-grow:0}._4a93668a{flex-grow:1}._5a8c5a77{align-items:flex-start}._50ba6b6b{align-items:center}._3963f790{align-items:flex-end}._55ef2d4e{align-items:baseline}@media (min-width:768px){._3e2bfb5d{align-items:flex-start}.a99be1ab{align-items:center}.fa8221fe{align-items:flex-end}.e83669a0{align-items:baseline}}@media (min-width:992px){._65e6b537{align-items:flex-start}.db356482{align-items:center}.acc08587{align-items:flex-end}.ad033867{align-items:baseline}}._985b733f{justify-content:flex-start}._95a98d2a{justify-content:center}.be9bf31a{justify-content:flex-end}.a89d8798{justify-content:space-around}._904ef8fe{justify-content:space-between}._489975d5{justify-content:space-evenly}@media (min-width:768px){.a7175ae7{justify-content:flex-start}._7334dead{justify-content:center}._746de733{justify-content:flex-end}._6d09398a{justify-content:space-around}.c2324c1d{justify-content:space-between}._04bd6e07{justify-content:space-evenly}}@media (min-width:992px){._39b310de{justify-content:flex-start}._0dc77292{justify-content:center}._96c15bd8{justify-content:flex-end}._6d09398a{justify-content:space-around}._096111a6{justify-content:space-between}._04bd6e07{justify-content:space-evenly}}._35d69587{align-self:stretch}.f46f3a67{align-self:flex-start}.fb6a8035{align-self:center}.d3193acd{align-self:flex-end}._1154f656{align-self:baseline}@media (min-width:768px){._298e04af{align-self:stretch}._2c729d24{align-self:flex-start}._9ea5e943{align-self:center}._02266425{align-self:flex-end}.c16a5800{align-self:baseline}}@media (min-width:992px){._2ec9eb74{align-self:stretch}._34f1fb03{align-self:flex-start}._77c58550{align-self:center}._9ffa429f{align-self:flex-end}._6cc14c5d{align-self:baseline}}.f6342c26{overflow:hidden}._10a2f952{overflow:auto}.f20b8b87{overflow:visible}._4954f87c{overflow:scroll}.a83fb2f5{height:100%}.d85cf739{background-color:var(--reactist-bg-default)}._4eb1d749{background-color:var(--reactist-bg-aside)}.da1ccaa5{background-color:var(--reactist-bg-highlight)}._82dc28e7{background-color:var(--reactist-bg-selected)}._63ba3dfa{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)}._34cd2b5e{border-radius:var(--reactist-border-radius-small)}._5fe4d5e3{border-radius:var(--reactist-border-radius-large)}._1b34ffd9{border:1px solid var(--reactist-divider-primary)}._705519b0{border:1px solid var(--reactist-divider-secondary)}._67adc238{border:1px solid var(--reactist-divider-tertiary)}.fff8bff0{text-align:start}.f973eed0{text-align:center}._225acbd7{text-align:end}.dea1e8ba{text-align:justify}@media (min-width:768px){._919d6c8f{text-align:start}.ab9d970e{text-align:center}.b5b45e0e{text-align:end}.bd6e42e0{text-align:justify}}@media (min-width:992px){._15120506{text-align:start}._337333b5{text-align:center}._221db0fb{text-align:end}._29ea9711{text-align:justify}}
+.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)}