@doist/reactist 11.4.0 → 11.6.0

package/es/new-components/loading/loading.js

@@ -5,6 +5,7 @@ import { Spinner } from '../spinner/spinner.js';
 
 var _excluded = ["size", "exceptionallySetClassName"];
 var sizeMapping = {
+  xsmall: 16,
   small: 24,
   medium: 36,
   large: 48

package/es/new-components/loading/loading.js.map

@@ -1 +1 @@
-{"version":3,"file":"loading.js","sources":["../../../src/new-components/loading/loading.tsx"],"sourcesContent":["import React from 'react'\nimport { Box } from '../box'\nimport { Spinner } from '../spinner'\n\ntype Size = 'small' | 'medium' | 'large'\n\ntype NativeProps = Omit<\n    JSX.IntrinsicElements['div'],\n    'className' | 'aria-describedby' | 'aria-label' | 'aria-labelledby' | 'role' | 'size'\n>\n\ntype LoadingProps = NativeProps & {\n    /**\n     * The size of the loading spinner.\n     * @default 'small'\n     */\n    size?: Size\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n    /** Identifies the element (or elements) that describes the loading component for assistive technologies. */\n    'aria-describedby'?: string\n} & (\n        | {\n              /** Defines a string value that labels the current loading component for assistive technologies. */\n              'aria-label': string\n              'aria-labelledby'?: never\n          }\n        | {\n              /** Identifies the element (or elements) that labels the current loading component for assistive technologies. */\n              'aria-labelledby': string\n              'aria-label'?: never\n          }\n    )\n\nconst sizeMapping: Record<Size, number> = {\n    small: 24,\n    medium: 36,\n    large: 48,\n}\n\nfunction Loading({ size = 'small', exceptionallySetClassName, ...props }: LoadingProps) {\n    const numericSize = sizeMapping[size] ?? sizeMapping.small\n    const ariaLabel = props['aria-label']\n        ? props['aria-label']\n        : !props['aria-labelledby']\n        ? 'Loading…'\n        : undefined\n\n    return (\n        <Box\n            {...props}\n            aria-label={ariaLabel}\n            className={exceptionallySetClassName}\n            display=\"flex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            role=\"progressbar\"\n        >\n            <Spinner size={numericSize} aria-hidden />\n        </Box>\n    )\n}\n\nexport { Loading }\nexport type { LoadingProps }\n"],"names":["sizeMapping","small","medium","large","Loading","size","exceptionallySetClassName","props","numericSize","ariaLabel","undefined","React","Box","className","display","alignItems","justifyContent","role","Spinner"],"mappings":";;;;;;AAoCA,IAAMA,WAAW,GAAyB;AACtCC,EAAAA,KAAK,EAAE,EAD+B;AAEtCC,EAAAA,MAAM,EAAE,EAF8B;AAGtCC,EAAAA,KAAK,EAAE;AAH+B,CAA1C;;AAMA,SAASC,OAAT;;;uBAAmBC;MAAAA,8BAAO;MAASC,iCAAAA;MAA8BC;;AAC7D,MAAMC,WAAW,wBAAGR,WAAW,CAACK,IAAD,CAAd,iEAAwBL,WAAW,CAACC,KAArD;AACA,MAAMQ,SAAS,GAAGF,KAAK,CAAC,YAAD,CAAL,GACZA,KAAK,CAAC,YAAD,CADO,GAEZ,CAACA,KAAK,CAAC,iBAAD,CAAN,GACA,UADA,GAEAG,SAJN;AAMA,sBACIC,4BAAA,CAACC,GAAD,oBACQL;kBACQE;AACZI,IAAAA,SAAS,EAAEP;AACXQ,IAAAA,OAAO,EAAC;AACRC,IAAAA,UAAU,EAAC;AACXC,IAAAA,cAAc,EAAC;AACfC,IAAAA,IAAI,EAAC;IAPT,eASIN,4BAAA,CAACO,OAAD;AAASb,IAAAA,IAAI,EAAEG;;GAAf,CATJ,CADJ;AAaH;;;;"}
+{"version":3,"file":"loading.js","sources":["../../../src/new-components/loading/loading.tsx"],"sourcesContent":["import React from 'react'\nimport { Box } from '../box'\nimport { Spinner } from '../spinner'\n\ntype Size = 'xsmall' | 'small' | 'medium' | 'large'\n\ntype NativeProps = Omit<\n    JSX.IntrinsicElements['div'],\n    'className' | 'aria-describedby' | 'aria-label' | 'aria-labelledby' | 'role' | 'size'\n>\n\ntype LoadingProps = NativeProps & {\n    /**\n     * The size of the loading spinner.\n     * @default 'small'\n     */\n    size?: Size\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n    /** Identifies the element (or elements) that describes the loading component for assistive technologies. */\n    'aria-describedby'?: string\n} & (\n        | {\n              /** Defines a string value that labels the current loading component for assistive technologies. */\n              'aria-label': string\n              'aria-labelledby'?: never\n          }\n        | {\n              /** Identifies the element (or elements) that labels the current loading component for assistive technologies. */\n              'aria-labelledby': string\n              'aria-label'?: never\n          }\n    )\n\nconst sizeMapping: Record<Size, number> = {\n    xsmall: 16,\n    small: 24,\n    medium: 36,\n    large: 48,\n}\n\nfunction Loading({ size = 'small', exceptionallySetClassName, ...props }: LoadingProps) {\n    const numericSize = sizeMapping[size] ?? sizeMapping.small\n    const ariaLabel = props['aria-label']\n        ? props['aria-label']\n        : !props['aria-labelledby']\n        ? 'Loading…'\n        : undefined\n\n    return (\n        <Box\n            {...props}\n            aria-label={ariaLabel}\n            className={exceptionallySetClassName}\n            display=\"flex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            role=\"progressbar\"\n        >\n            <Spinner size={numericSize} aria-hidden />\n        </Box>\n    )\n}\n\nexport { Loading }\nexport type { LoadingProps }\n"],"names":["sizeMapping","xsmall","small","medium","large","Loading","size","exceptionallySetClassName","props","numericSize","ariaLabel","undefined","React","Box","className","display","alignItems","justifyContent","role","Spinner"],"mappings":";;;;;;AAoCA,IAAMA,WAAW,GAAyB;AACtCC,EAAAA,MAAM,EAAE,EAD8B;AAEtCC,EAAAA,KAAK,EAAE,EAF+B;AAGtCC,EAAAA,MAAM,EAAE,EAH8B;AAItCC,EAAAA,KAAK,EAAE;AAJ+B,CAA1C;;AAOA,SAASC,OAAT;;;uBAAmBC;MAAAA,8BAAO;MAASC,iCAAAA;MAA8BC;;AAC7D,MAAMC,WAAW,wBAAGT,WAAW,CAACM,IAAD,CAAd,iEAAwBN,WAAW,CAACE,KAArD;AACA,MAAMQ,SAAS,GAAGF,KAAK,CAAC,YAAD,CAAL,GACZA,KAAK,CAAC,YAAD,CADO,GAEZ,CAACA,KAAK,CAAC,iBAAD,CAAN,GACA,UADA,GAEAG,SAJN;AAMA,sBACIC,4BAAA,CAACC,GAAD,oBACQL;kBACQE;AACZI,IAAAA,SAAS,EAAEP;AACXQ,IAAAA,OAAO,EAAC;AACRC,IAAAA,UAAU,EAAC;AACXC,IAAAA,cAAc,EAAC;AACfC,IAAAA,IAAI,EAAC;IAPT,eASIN,4BAAA,CAACO,OAAD;AAASb,IAAAA,IAAI,EAAEG;;GAAf,CATJ,CADJ;AAaH;;;;"}

package/es/new-components/modal/modal.js

@@ -132,7 +132,7 @@ function ModalHeader(_ref2) {
   return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Box, Object.assign({}, props, {
     as: "header",
     paddingLeft: "large",
-    paddingRight: "small",
+    paddingRight: button === false || button === null ? 'large' : 'small',
     paddingY: "small",
     className: exceptionallySetClassName
   }), /*#__PURE__*/createElement(Columns, {
@@ -140,7 +140,9 @@ function ModalHeader(_ref2) {
     alignY: "center"
   }, /*#__PURE__*/createElement(Column, {
     width: "auto"
-  }, children), button === false || button === null ? null : /*#__PURE__*/createElement(Column, {
+  }, children), button === false || button === null ? /*#__PURE__*/createElement("div", {
+    className: styles.headerContent
+  }) : /*#__PURE__*/createElement(Column, {
     width: "content",
     exceptionallySetClassName: styles.buttonContainer,
     "data-testid": "button-container"

package/es/new-components/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../src/new-components/modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { DialogOverlay, DialogContent } from '@reach/dialog'\nimport FocusLock from 'react-focus-lock'\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     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: 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\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    autoFocus = true,\n    children,\n    ...props\n}: ModalProps) {\n    const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n        onDismiss,\n        height,\n    ])\n\n    return (\n        <DialogOverlay\n            isOpen={isOpen}\n            onDismiss={onDismiss}\n            dangerouslyBypassFocusLock // We're setting up our own focus lock below\n            className={classNames(styles.overlay, styles[height], styles[width])}\n            data-testid=\"modal-overlay\"\n        >\n            <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n                <DialogContent\n                    {...props}\n                    as={Box}\n                    borderRadius=\"full\"\n                    background=\"default\"\n                    display=\"flex\"\n                    flexDirection=\"column\"\n                    overflow=\"hidden\"\n                    height={height === 'expand' ? 'full' : undefined}\n                    flexGrow={height === 'expand' ? 1 : 0}\n                    className={[exceptionallySetClassName, styles.container]}\n                >\n                    <ModalContext.Provider value={contextValue}>{children}</ModalContext.Provider>\n                </DialogContent>\n            </FocusLock>\n        </DialogOverlay>\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=\"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 ? null : (\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","autoFocus","children","props","contextValue","DialogOverlay","dangerouslyBypassFocusLock","className","classNames","styles","overlay","FocusLock","whiteList","returnFocus","DialogContent","as","Box","borderRadius","background","display","flexDirection","overflow","flexGrow","container","Provider","value","ModalCloseButton","includeInTabOrder","setIncludeInTabOrder","isMounted","setIsMounted","skipAutoFocus","Button","variant","onClick","icon","CloseIcon","tabIndex","ModalHeader","button","withDivider","paddingLeft","paddingRight","paddingY","Columns","space","alignY","Column","buttonContainer","Divider","ModalBody","padding","paddingBottom","ModalFooter","ModalActions","Inline","align"],"mappings":"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"}
+{"version":3,"file":"modal.js","sources":["../../../src/new-components/modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { DialogOverlay, DialogContent } from '@reach/dialog'\nimport FocusLock from 'react-focus-lock'\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     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: 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\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    autoFocus = true,\n    children,\n    ...props\n}: ModalProps) {\n    const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n        onDismiss,\n        height,\n    ])\n\n    return (\n        <DialogOverlay\n            isOpen={isOpen}\n            onDismiss={onDismiss}\n            dangerouslyBypassFocusLock // We're setting up our own focus lock below\n            className={classNames(styles.overlay, styles[height], styles[width])}\n            data-testid=\"modal-overlay\"\n        >\n            <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n                <DialogContent\n                    {...props}\n                    as={Box}\n                    borderRadius=\"full\"\n                    background=\"default\"\n                    display=\"flex\"\n                    flexDirection=\"column\"\n                    overflow=\"hidden\"\n                    height={height === 'expand' ? 'full' : undefined}\n                    flexGrow={height === 'expand' ? 1 : 0}\n                    className={[exceptionallySetClassName, styles.container]}\n                >\n                    <ModalContext.Provider value={contextValue}>{children}</ModalContext.Provider>\n                </DialogContent>\n            </FocusLock>\n        </DialogOverlay>\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","autoFocus","children","props","contextValue","DialogOverlay","dangerouslyBypassFocusLock","className","classNames","styles","overlay","FocusLock","whiteList","returnFocus","DialogContent","as","Box","borderRadius","background","display","flexDirection","overflow","flexGrow","container","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":";;;;;;;;;;;;;;;;;;AA0BA,IAAMA,YAAY,gBAAGC,aAAA,CAAuC;AACxDC,EAAAA,SAAS,EAAEC,SAD6C;AAExDC,EAAAA,MAAM,EAAE;AAFgD,CAAvC,CAArB;;AA8DA,SAASC,kBAAT,CAA4BC,OAA5B;AACI,SAAO,EAAEA,OAAO,CAACC,aAAR,KAA0BC,QAA1B,IAAsCF,OAAO,CAACG,OAAR,CAAgBC,WAAhB,OAAkC,QAA1E,CAAP;AACH;AAED;;;;;;;;;;;SASgBC;MACZC,cAAAA;MACAV,iBAAAA;yBACAE;MAAAA,kCAAS;wBACTS;MAAAA,gCAAQ;MACRC,iCAAAA;4BACAC;MAAAA,wCAAY;MACZC,gBAAAA;MACGC;;AAEH,MAAMC,YAAY,GAAsBjB,OAAA,CAAc;AAAA,WAAO;AAAEC,MAAAA,SAAS,EAATA,SAAF;AAAaE,MAAAA,MAAM,EAANA;AAAb,KAAP;AAAA,GAAd,EAA6C,CACjFF,SADiF,EAEjFE,MAFiF,CAA7C,CAAxC;AAKA,sBACIH,aAAA,CAACkB,aAAD;AACIP,IAAAA,MAAM,EAAEA;AACRV,IAAAA,SAAS,EAAEA;AACXkB,IAAAA,0BAA0B;AAAA;AAC1BC,IAAAA,SAAS,EAAEC,UAAU,CAACC,MAAM,CAACC,OAAR,EAAiBD,MAAM,CAACnB,MAAD,CAAvB,EAAiCmB,MAAM,CAACV,KAAD,CAAvC;mBACT;GALhB,eAOIZ,aAAA,CAACwB,SAAD;AAAWV,IAAAA,SAAS,EAAEA;AAAWW,IAAAA,SAAS,EAAErB;AAAoBsB,IAAAA,WAAW,EAAE;GAA7E,eACI1B,aAAA,CAAC2B,aAAD,oBACQX;AACJY,IAAAA,EAAE,EAAEC;AACJC,IAAAA,YAAY,EAAC;AACbC,IAAAA,UAAU,EAAC;AACXC,IAAAA,OAAO,EAAC;AACRC,IAAAA,aAAa,EAAC;AACdC,IAAAA,QAAQ,EAAC;AACT/B,IAAAA,MAAM,EAAEA,MAAM,KAAK,QAAX,GAAsB,MAAtB,GAA+BD;AACvCiC,IAAAA,QAAQ,EAAEhC,MAAM,KAAK,QAAX,GAAsB,CAAtB,GAA0B;AACpCiB,IAAAA,SAAS,EAAE,CAACP,yBAAD,EAA4BS,MAAM,CAACc,SAAnC;IAVf,eAYIpC,aAAA,CAACD,YAAY,CAACsC,QAAd;AAAuBC,IAAAA,KAAK,EAAErB;GAA9B,EAA6CF,QAA7C,CAZJ,CADJ,CAPJ,CADJ;AA0BH;AA0BD;;;;;;;SAMgBwB,iBAAiBvB;AAC7B,0BAAsBhB,UAAA,CAAiBD,YAAjB,CAAtB;AAAA,MAAQE,SAAR,qBAAQA,SAAR;;AACA,wBAAkDD,QAAA,CAAe,KAAf,CAAlD;AAAA,MAAOwC,iBAAP;AAAA,MAA0BC,oBAA1B;;AACA,yBAAkCzC,QAAA,CAAe,KAAf,CAAlC;AAAA,MAAO0C,SAAP;AAAA,MAAkBC,YAAlB;;AAEA3C,EAAAA,SAAA,CACI,SAAS4C,aAAT;AACI,QAAIF,SAAJ,EAAe;AACXD,MAAAA,oBAAoB,CAAC,IAAD,CAApB;AACH,KAFD,MAEO;AACHE,MAAAA,YAAY,CAAC,IAAD,CAAZ;AACH;AACJ,GAPL,EAQI,CAACD,SAAD,CARJ;AAWA,sBACI1C,aAAA,CAAC6C,MAAD,oBACQ7B;AACJ8B,IAAAA,OAAO,EAAC;AACRC,IAAAA,OAAO,EAAE9C;AACT+C,IAAAA,IAAI,eAAEhD,aAAA,CAACiD,SAAD,MAAA;AACNC,IAAAA,QAAQ,EAAEV,iBAAiB,GAAG,CAAH,GAAO,CAAC;IALvC,CADJ;AASH;AA2BD;;;;;;;;SAOgBW;MACZpC,iBAAAA;2BACAqC;MAAAA,mCAAS;gCACTC;MAAAA,6CAAc;MACdxC,kCAAAA;MACGG;;AAEH,sBACIhB,aAAA,SAAA,MAAA,eACIA,aAAA,CAAC6B,GAAD,oBACQb;AACJY,IAAAA,EAAE,EAAC;AACH0B,IAAAA,WAAW,EAAC;AACZC,IAAAA,YAAY,EAAEH,MAAM,KAAK,KAAX,IAAoBA,MAAM,KAAK,IAA/B,GAAsC,OAAtC,GAAgD;AAC9DI,IAAAA,QAAQ,EAAC;AACTpC,IAAAA,SAAS,EAAEP;IANf,eAQIb,aAAA,CAACyD,OAAD;AAASC,IAAAA,KAAK,EAAC;AAAQC,IAAAA,MAAM,EAAC;GAA9B,eACI3D,aAAA,CAAC4D,MAAD;AAAQhD,IAAAA,KAAK,EAAC;GAAd,EAAsBG,QAAtB,CADJ,EAEKqC,MAAM,KAAK,KAAX,IAAoBA,MAAM,KAAK,IAA/B,gBACGpD,aAAA,MAAA;AAAKoB,IAAAA,SAAS,EAAEE,MAAM,CAACuC;GAAvB,CADH,gBAGG7D,aAAA,CAAC4D,MAAD;AACIhD,IAAAA,KAAK,EAAC;AACNC,IAAAA,yBAAyB,EAAES,MAAM,CAACwC;mBACtB;GAHhB,EAKK,OAAOV,MAAP,KAAkB,SAAlB,gBACGpD,aAAA,CAACuC,gBAAD;kBAA6B;AAAczB,IAAAA,SAAS,EAAE;GAAtD,CADH,GAGGsC,MARR,CALR,CARJ,CADJ,EA4BKC,WAAW,gBAAGrD,aAAA,CAAC+D,OAAD,MAAA,CAAH,GAAiB,IA5BjC,CADJ;AAgCH;AAiBD;;;;;;;;;;;;;SAYgBC;MAAYnD,kCAAAA;MAA2BE,iBAAAA;MAAaC;;AAChE,2BAAmBhB,UAAA,CAAiBD,YAAjB,CAAnB;AAAA,MAAQI,MAAR,sBAAQA,MAAR;;AACA,sBACIH,aAAA,CAAC6B,GAAD,oBACQb;AACJI,IAAAA,SAAS,EAAEP;AACXsB,IAAAA,QAAQ,EAAEhC,MAAM,KAAK,QAAX,GAAsB,CAAtB,GAA0B;AACpCA,IAAAA,MAAM,EAAEA,MAAM,KAAK,QAAX,GAAsB,MAAtB,GAA+BD;AACvCgC,IAAAA,QAAQ,EAAC;IALb,eAOIlC,aAAA,CAAC6B,GAAD;AAAKoC,IAAAA,OAAO,EAAC;AAAQC,IAAAA,aAAa,EAAC;GAAnC,EACKnD,QADL,CAPJ,CADJ;AAaH;AAsBD;;;;;;;;SAOgBoD;MACZtD,kCAAAA;gCACAwC;MAAAA,6CAAc;MACXrC;;AAEH,sBACIhB,aAAA,SAAA,MAAA,EACKqD,WAAW,gBAAGrD,aAAA,CAAC+D,OAAD,MAAA,CAAH,GAAiB,IADjC,eAEI/D,aAAA,CAAC6B,GAAD;AAAKD,IAAAA,EAAE,EAAC;KAAaZ;AAAOI,IAAAA,SAAS,EAAEP;AAA2BoD,IAAAA,OAAO,EAAC;IAA1E,CAFJ,CADJ;AAMH;AAQD;;;;;SAIgBG;MAAerD,iBAAAA;MAAaC;;AACxC,sBACIhB,aAAA,CAACmE,WAAD,oBAAiBnD,MAAjB,eACIhB,aAAA,CAACqE,MAAD;AAAQC,IAAAA,KAAK,EAAC;AAAQZ,IAAAA,KAAK,EAAC;GAA5B,EACK3C,QADL,CADJ,CADJ;AAOH;;;;"}

package/es/new-components/modal/modal.module.css.js

@@ -1,4 +1,4 @@
-var modules_8f59d13b = {"reach-portal":"dddb40c3","fadein":"_955f2d73","fitContent":"_95c7550e","container":"_88079712","full":"_4779d078","large":"_5fd86231","medium":"bdfb5931","small":"_4e848a11","xlarge":"d673fba2","overlay":"ea9ae0cc","expand":"a8bf8a4f","buttonContainer":"_44d6850e"};
+var modules_8f59d13b = {"reach-portal":"_37bef8d8","fadein":"_77f9687f","fitContent":"bcc4e0a5","container":"d4832c2d","full":"b0c3b021","large":"_573d6aa5","medium":"_8550d996","small":"_43bb18f5","xlarge":"_57b4159d","overlay":"cb63f300","expand":"e741893e","buttonContainer":"bb1ce281","headerContent":"c5ef989c"};
 
 export default modules_8f59d13b;
 //# sourceMappingURL=modal.module.css.js.map

package/es/new-components/text/text.module.css.js

@@ -1,4 +1,4 @@
-var modules_a9637dd3 = {"text":"c5028ea8","size-caption":"_05d3a546","size-copy":"_100565e3","size-subtitle":"b8f72625","weight-semibold":"_398ecda1","weight-bold":"_8054cd6b","tone-secondary":"_6abd56b1","tone-danger":"_274b4a47","lineClampMultipleLines":"_724b0054","lineClamp-1":"_51ac6ee4","lineClamp-2":"b0742803","lineClamp-3":"dd664c95","lineClamp-4":"b02775b5","lineClamp-5":"da91b300"};
+var modules_a9637dd3 = {"text":"_2282cb83","size-caption":"_087a8179","size-copy":"a4423c2a","size-subtitle":"_03365a63","weight-semibold":"_5213e4ab","weight-bold":"_3d58c8f2","tone-secondary":"_892a359a","tone-danger":"f9cb5d8a","tone-positive":"fcedb234","lineClampMultipleLines":"_765949c1","lineClamp-1":"c3e4800e","lineClamp-2":"b25b652b","lineClamp-3":"bb13d214","lineClamp-4":"_6db1928e","lineClamp-5":"e9944c1d"};
 
 export default modules_a9637dd3;
 //# sourceMappingURL=text.module.css.js.map

package/es/new-components/text-link/text-link.module.css.js

@@ -1,4 +1,4 @@
-var modules_3d05deee = {"container":"b55607a1"};
+var modules_3d05deee = {"container":"_232127ef"};
 
 export default modules_3d05deee;
 //# sourceMappingURL=text-link.module.css.js.map

package/lib/new-components/common-types.d.ts

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import type { HTMLAttributes } from 'react';
 export declare type Space = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
 export declare type SpaceWithNegatives = Space | '-xsmall' | '-small' | '-medium' | '-large' | '-xlarge' | '-xxlarge';
-export declare type Tone = 'normal' | 'secondary' | 'danger';
+export declare type Tone = 'normal' | 'secondary' | 'danger' | 'positive';
 export declare type AlertTone = 'info' | 'positive' | 'caution' | 'critical';
 export declare type DividerWeight = 'primary' | 'secondary' | 'tertiary' | 'none';
 declare type ClassValue = Parameters<typeof classNames>[number];

package/lib/new-components/heading/heading.d.ts

@@ -92,7 +92,7 @@ declare const Heading: React.ForwardRefExoticComponent<Pick<Pick<React.DetailedH
      *
      * @default 'normal'
      */
-    tone?: "normal" | "secondary" | "danger" | undefined;
+    tone?: "normal" | "secondary" | "danger" | "positive" | undefined;
     /**
      * Used to truncate the heading to a given number of lines.
      *

package/lib/new-components/loading/loading.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type Size = 'small' | 'medium' | 'large';
+declare type Size = 'xsmall' | 'small' | 'medium' | 'large';
 declare type NativeProps = Omit<JSX.IntrinsicElements['div'], 'className' | 'aria-describedby' | 'aria-label' | 'aria-labelledby' | 'role' | 'size'>;
 declare type LoadingProps = NativeProps & {
     /**

package/lib/new-components/loading/loading.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,a=require("../../_virtual/_rollupPluginBabelHelpers.js"),l=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,r=require("../box/box.js"),i=require("../spinner/spinner.js"),t=["size","exceptionallySetClassName"],s={small:24,medium:36,large:48};exports.Loading=function(e){var n,o=e.size,u=void 0===o?"small":o,c=e.exceptionallySetClassName,d=a.objectWithoutPropertiesLoose(e,t),p=null!==(n=s[u])&&void 0!==n?n:s.small;return l.createElement(r.Box,Object.assign({},d,{"aria-label":d["aria-label"]?d["aria-label"]:d["aria-labelledby"]?void 0:"Loading…",className:c,display:"flex",alignItems:"center",justifyContent:"center",role:"progressbar"}),l.createElement(i.Spinner,{size:p,"aria-hidden":!0}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,a=require("../../_virtual/_rollupPluginBabelHelpers.js"),l=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,r=require("../box/box.js"),i=require("../spinner/spinner.js"),s=["size","exceptionallySetClassName"],t={xsmall:16,small:24,medium:36,large:48};exports.Loading=function(e){var n,o=e.size,u=void 0===o?"small":o,c=e.exceptionallySetClassName,d=a.objectWithoutPropertiesLoose(e,s),p=null!==(n=t[u])&&void 0!==n?n:t.small;return l.createElement(r.Box,Object.assign({},d,{"aria-label":d["aria-label"]?d["aria-label"]:d["aria-labelledby"]?void 0:"Loading…",className:c,display:"flex",alignItems:"center",justifyContent:"center",role:"progressbar"}),l.createElement(i.Spinner,{size:p,"aria-hidden":!0}))};
 //# sourceMappingURL=loading.js.map

package/lib/new-components/loading/loading.js.map

@@ -1 +1 @@
-{"version":3,"file":"loading.js","sources":["../../../src/new-components/loading/loading.tsx"],"sourcesContent":["import React from 'react'\nimport { Box } from '../box'\nimport { Spinner } from '../spinner'\n\ntype Size = 'small' | 'medium' | 'large'\n\ntype NativeProps = Omit<\n    JSX.IntrinsicElements['div'],\n    'className' | 'aria-describedby' | 'aria-label' | 'aria-labelledby' | 'role' | 'size'\n>\n\ntype LoadingProps = NativeProps & {\n    /**\n     * The size of the loading spinner.\n     * @default 'small'\n     */\n    size?: Size\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n    /** Identifies the element (or elements) that describes the loading component for assistive technologies. */\n    'aria-describedby'?: string\n} & (\n        | {\n              /** Defines a string value that labels the current loading component for assistive technologies. */\n              'aria-label': string\n              'aria-labelledby'?: never\n          }\n        | {\n              /** Identifies the element (or elements) that labels the current loading component for assistive technologies. */\n              'aria-labelledby': string\n              'aria-label'?: never\n          }\n    )\n\nconst sizeMapping: Record<Size, number> = {\n    small: 24,\n    medium: 36,\n    large: 48,\n}\n\nfunction Loading({ size = 'small', exceptionallySetClassName, ...props }: LoadingProps) {\n    const numericSize = sizeMapping[size] ?? sizeMapping.small\n    const ariaLabel = props['aria-label']\n        ? props['aria-label']\n        : !props['aria-labelledby']\n        ? 'Loading…'\n        : undefined\n\n    return (\n        <Box\n            {...props}\n            aria-label={ariaLabel}\n            className={exceptionallySetClassName}\n            display=\"flex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            role=\"progressbar\"\n        >\n            <Spinner size={numericSize} aria-hidden />\n        </Box>\n    )\n}\n\nexport { Loading }\nexport type { LoadingProps }\n"],"names":["sizeMapping","small","medium","large","size","exceptionallySetClassName","props","numericSize","React","Box","undefined","className","display","alignItems","justifyContent","role","Spinner"],"mappings":"8SAoCMA,EAAoC,CACtCC,MAAO,GACPC,OAAQ,GACRC,MAAO,oBAGX,sBAAmBC,KAAAA,aAAO,UAASC,IAAAA,0BAA8BC,sCACvDC,YAAcP,EAAYI,kBAASJ,EAAYC,aAQjDO,gBAACC,uBACOH,gBARMA,EAAM,cAClBA,EAAM,cACLA,EAAM,wBAEPI,EADA,WAOEC,UAAWN,EACXO,QAAQ,OACRC,WAAW,SACXC,eAAe,SACfC,KAAK,gBAELP,gBAACQ,WAAQZ,KAAMG"}
+{"version":3,"file":"loading.js","sources":["../../../src/new-components/loading/loading.tsx"],"sourcesContent":["import React from 'react'\nimport { Box } from '../box'\nimport { Spinner } from '../spinner'\n\ntype Size = 'xsmall' | 'small' | 'medium' | 'large'\n\ntype NativeProps = Omit<\n    JSX.IntrinsicElements['div'],\n    'className' | 'aria-describedby' | 'aria-label' | 'aria-labelledby' | 'role' | 'size'\n>\n\ntype LoadingProps = NativeProps & {\n    /**\n     * The size of the loading spinner.\n     * @default 'small'\n     */\n    size?: Size\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n    /** Identifies the element (or elements) that describes the loading component for assistive technologies. */\n    'aria-describedby'?: string\n} & (\n        | {\n              /** Defines a string value that labels the current loading component for assistive technologies. */\n              'aria-label': string\n              'aria-labelledby'?: never\n          }\n        | {\n              /** Identifies the element (or elements) that labels the current loading component for assistive technologies. */\n              'aria-labelledby': string\n              'aria-label'?: never\n          }\n    )\n\nconst sizeMapping: Record<Size, number> = {\n    xsmall: 16,\n    small: 24,\n    medium: 36,\n    large: 48,\n}\n\nfunction Loading({ size = 'small', exceptionallySetClassName, ...props }: LoadingProps) {\n    const numericSize = sizeMapping[size] ?? sizeMapping.small\n    const ariaLabel = props['aria-label']\n        ? props['aria-label']\n        : !props['aria-labelledby']\n        ? 'Loading…'\n        : undefined\n\n    return (\n        <Box\n            {...props}\n            aria-label={ariaLabel}\n            className={exceptionallySetClassName}\n            display=\"flex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            role=\"progressbar\"\n        >\n            <Spinner size={numericSize} aria-hidden />\n        </Box>\n    )\n}\n\nexport { Loading }\nexport type { LoadingProps }\n"],"names":["sizeMapping","xsmall","small","medium","large","size","exceptionallySetClassName","props","numericSize","React","Box","undefined","className","display","alignItems","justifyContent","role","Spinner"],"mappings":"8SAoCMA,EAAoC,CACtCC,OAAQ,GACRC,MAAO,GACPC,OAAQ,GACRC,MAAO,oBAGX,sBAAmBC,KAAAA,aAAO,UAASC,IAAAA,0BAA8BC,sCACvDC,YAAcR,EAAYK,kBAASL,EAAYE,aAQjDO,gBAACC,uBACOH,gBARMA,EAAM,cAClBA,EAAM,cACLA,EAAM,wBAEPI,EADA,WAOEC,UAAWN,EACXO,QAAQ,OACRC,WAAW,SACXC,eAAe,SACfC,KAAK,gBAELP,gBAACQ,WAAQZ,KAAMG"}

package/lib/new-components/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"),o=require("react"),a=(e(o),e(require("classnames"))),n=require("../box/box.js"),i=require("../columns/columns.js"),l=require("../divider/divider.js"),r=require("../inline/inline.js"),s=require("../button/button.js"),u=require("../icons/close-icon.js"),c=require("@reach/dialog"),d=e(require("react-focus-lock")),m=require("./modal.module.css.js"),p=["isOpen","onDismiss","height","width","exceptionallySetClassName","autoFocus","children"],h=["children","button","withDivider","exceptionallySetClassName"],f=["exceptionallySetClassName","children"],g=["exceptionallySetClassName","withDivider"],x=["children"],v=o.createContext({onDismiss:void 0,height:"fitContent"});function b(e){return!(e.ownerDocument===document&&"iframe"===e.tagName.toLowerCase())}function C(e){var t=o.useContext(v).onDismiss,a=o.useState(!1),n=a[0],i=a[1],l=o.useState(!1),r=l[0],c=l[1];return o.useEffect((function(){r?i(!0):c(!0)}),[r]),o.createElement(s.Button,Object.assign({},e,{variant:"quaternary",onClick:t,icon:o.createElement(u.CloseIcon,null),tabIndex:n?0:-1}))}function j(e){var a=e.exceptionallySetClassName,i=e.withDivider,r=void 0!==i&&i,s=t.objectWithoutPropertiesLoose(e,g);return o.createElement(o.Fragment,null,r?o.createElement(l.Divider,null):null,o.createElement(n.Box,Object.assign({as:"footer"},s,{className:a,padding:"large"})))}exports.Modal=function(e){var i=e.isOpen,l=e.onDismiss,r=e.height,s=void 0===r?"fitContent":r,u=e.width,h=void 0===u?"medium":u,f=e.exceptionallySetClassName,g=e.autoFocus,x=void 0===g||g,C=e.children,j=t.objectWithoutPropertiesLoose(e,p),E=o.useMemo((function(){return{onDismiss:l,height:s}}),[l,s]);return o.createElement(c.DialogOverlay,{isOpen:i,onDismiss:l,dangerouslyBypassFocusLock:!0,className:a(m.default.overlay,m.default[s],m.default[h]),"data-testid":"modal-overlay"},o.createElement(d,{autoFocus:x,whiteList:b,returnFocus:!0},o.createElement(c.DialogContent,Object.assign({},j,{as:n.Box,borderRadius:"full",background:"default",display:"flex",flexDirection:"column",overflow:"hidden",height:"expand"===s?"full":void 0,flexGrow:"expand"===s?1:0,className:[f,m.default.container]}),o.createElement(v.Provider,{value:E},C))))},exports.ModalActions=function(e){var a=e.children,n=t.objectWithoutPropertiesLoose(e,x);return o.createElement(j,Object.assign({},n),o.createElement(r.Inline,{align:"right",space:"large"},a))},exports.ModalBody=function(e){var a=e.exceptionallySetClassName,i=e.children,l=t.objectWithoutPropertiesLoose(e,f),r=o.useContext(v).height;return o.createElement(n.Box,Object.assign({},l,{className:a,flexGrow:"expand"===r?1:0,height:"expand"===r?"full":void 0,overflow:"auto"}),o.createElement(n.Box,{padding:"large",paddingBottom:"xxlarge"},i))},exports.ModalCloseButton=C,exports.ModalFooter=j,exports.ModalHeader=function(e){var a=e.children,r=e.button,s=void 0===r||r,u=e.withDivider,c=void 0!==u&&u,d=e.exceptionallySetClassName,p=t.objectWithoutPropertiesLoose(e,h);return o.createElement(o.Fragment,null,o.createElement(n.Box,Object.assign({},p,{as:"header",paddingLeft:"large",paddingRight:"small",paddingY:"small",className:d}),o.createElement(i.Columns,{space:"large",alignY:"center"},o.createElement(i.Column,{width:"auto"},a),!1===s||null===s?null:o.createElement(i.Column,{width:"content",exceptionallySetClassName:m.default.buttonContainer,"data-testid":"button-container"},"boolean"==typeof s?o.createElement(C,{"aria-label":"Close modal",autoFocus:!1}):s))),c?o.createElement(l.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"),o=(e(a),e(require("classnames"))),n=require("../box/box.js"),l=require("../columns/columns.js"),i=require("../divider/divider.js"),r=require("../inline/inline.js"),s=require("../button/button.js"),u=require("../icons/close-icon.js"),c=require("@reach/dialog"),d=e(require("react-focus-lock")),m=require("./modal.module.css.js"),p=["isOpen","onDismiss","height","width","exceptionallySetClassName","autoFocus","children"],h=["children","button","withDivider","exceptionallySetClassName"],f=["exceptionallySetClassName","children"],g=["exceptionallySetClassName","withDivider"],x=["children"],v=a.createContext({onDismiss:void 0,height:"fitContent"});function b(e){return!(e.ownerDocument===document&&"iframe"===e.tagName.toLowerCase())}function C(e){var t=a.useContext(v).onDismiss,o=a.useState(!1),n=o[0],l=o[1],i=a.useState(!1),r=i[0],c=i[1];return a.useEffect((function(){r?l(!0):c(!0)}),[r]),a.createElement(s.Button,Object.assign({},e,{variant:"quaternary",onClick:t,icon:a.createElement(u.CloseIcon,null),tabIndex:n?0:-1}))}function E(e){var o=e.exceptionallySetClassName,l=e.withDivider,r=void 0!==l&&l,s=t.objectWithoutPropertiesLoose(e,g);return a.createElement(a.Fragment,null,r?a.createElement(i.Divider,null):null,a.createElement(n.Box,Object.assign({as:"footer"},s,{className:o,padding:"large"})))}exports.Modal=function(e){var l=e.isOpen,i=e.onDismiss,r=e.height,s=void 0===r?"fitContent":r,u=e.width,h=void 0===u?"medium":u,f=e.exceptionallySetClassName,g=e.autoFocus,x=void 0===g||g,C=e.children,E=t.objectWithoutPropertiesLoose(e,p),j=a.useMemo((function(){return{onDismiss:i,height:s}}),[i,s]);return a.createElement(c.DialogOverlay,{isOpen:l,onDismiss:i,dangerouslyBypassFocusLock:!0,className:o(m.default.overlay,m.default[s],m.default[h]),"data-testid":"modal-overlay"},a.createElement(d,{autoFocus:x,whiteList:b,returnFocus:!0},a.createElement(c.DialogContent,Object.assign({},E,{as:n.Box,borderRadius:"full",background:"default",display:"flex",flexDirection:"column",overflow:"hidden",height:"expand"===s?"full":void 0,flexGrow:"expand"===s?1:0,className:[f,m.default.container]}),a.createElement(v.Provider,{value:j},C))))},exports.ModalActions=function(e){var o=e.children,n=t.objectWithoutPropertiesLoose(e,x);return a.createElement(E,Object.assign({},n),a.createElement(r.Inline,{align:"right",space:"large"},o))},exports.ModalBody=function(e){var o=e.exceptionallySetClassName,l=e.children,i=t.objectWithoutPropertiesLoose(e,f),r=a.useContext(v).height;return a.createElement(n.Box,Object.assign({},i,{className:o,flexGrow:"expand"===r?1:0,height:"expand"===r?"full":void 0,overflow:"auto"}),a.createElement(n.Box,{padding:"large",paddingBottom:"xxlarge"},l))},exports.ModalCloseButton=C,exports.ModalFooter=E,exports.ModalHeader=function(e){var o=e.children,r=e.button,s=void 0===r||r,u=e.withDivider,c=void 0!==u&&u,d=e.exceptionallySetClassName,p=t.objectWithoutPropertiesLoose(e,h);return a.createElement(a.Fragment,null,a.createElement(n.Box,Object.assign({},p,{as:"header",paddingLeft:"large",paddingRight:!1===s||null===s?"large":"small",paddingY:"small",className:d}),a.createElement(l.Columns,{space:"large",alignY:"center"},a.createElement(l.Column,{width:"auto"},o),!1===s||null===s?a.createElement("div",{className:m.default.headerContent}):a.createElement(l.Column,{width:"content",exceptionallySetClassName:m.default.buttonContainer,"data-testid":"button-container"},"boolean"==typeof s?a.createElement(C,{"aria-label":"Close modal",autoFocus:!1}):s))),c?a.createElement(i.Divider,null):null)};
 //# sourceMappingURL=modal.js.map

package/lib/new-components/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../src/new-components/modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { DialogOverlay, DialogContent } from '@reach/dialog'\nimport FocusLock from 'react-focus-lock'\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     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: 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\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    autoFocus = true,\n    children,\n    ...props\n}: ModalProps) {\n    const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n        onDismiss,\n        height,\n    ])\n\n    return (\n        <DialogOverlay\n            isOpen={isOpen}\n            onDismiss={onDismiss}\n            dangerouslyBypassFocusLock // We're setting up our own focus lock below\n            className={classNames(styles.overlay, styles[height], styles[width])}\n            data-testid=\"modal-overlay\"\n        >\n            <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n                <DialogContent\n                    {...props}\n                    as={Box}\n                    borderRadius=\"full\"\n                    background=\"default\"\n                    display=\"flex\"\n                    flexDirection=\"column\"\n                    overflow=\"hidden\"\n                    height={height === 'expand' ? 'full' : undefined}\n                    flexGrow={height === 'expand' ? 1 : 0}\n                    className={[exceptionallySetClassName, styles.container]}\n                >\n                    <ModalContext.Provider value={contextValue}>{children}</ModalContext.Provider>\n                </DialogContent>\n            </FocusLock>\n        </DialogOverlay>\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=\"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 ? null : (\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","autoFocus","children","contextValue","DialogOverlay","dangerouslyBypassFocusLock","classNames","styles","overlay","FocusLock","whiteList","returnFocus","DialogContent","borderRadius","background","display","flexDirection","overflow","flexGrow","container","Provider","value","Inline","align","space","paddingBottom","button","paddingLeft","paddingRight","paddingY","Columns","alignY","Column","buttonContainer"],"mappings":"yyBA0BMA,EAAeC,gBAAuC,CACxDC,eAAWC,EACXC,OAAQ,eA4DZ,SAASC,EAAmBC,WACfA,EAAQC,gBAAkBC,UAA8C,WAAlCF,EAAQG,QAAQC,wBAqFnDC,EAAiBC,OACrBV,EAAcD,aAAiBD,GAA/BE,YAC0CD,YAAe,GAA1DY,OAAmBC,SACQb,YAAe,GAA1Cc,OAAWC,cAElBf,aACI,WACQc,EACAD,GAAqB,GAErBE,GAAa,KAGrB,CAACD,IAIDd,gBAACgB,0BACOL,GACJM,QAAQ,aACRC,QAASjB,EACTkB,KAAMnB,gBAACoB,kBACPC,SAAUT,EAAoB,GAAK,cAmJ/BU,SACZC,IAAAA,8BACAC,YAAAA,gBACGb,6CAGCX,gCACKwB,EAAcxB,gBAACyB,gBAAa,KAC7BzB,gBAAC0B,qBAAIC,GAAG,UAAahB,GAAOiB,UAAWL,EAA2BM,QAAQ,0CAzPlFC,IAAAA,OACA7B,IAAAA,cACAE,OAAAA,aAAS,mBACT4B,MAAAA,aAAQ,WACRR,IAAAA,8BACAS,UAAAA,gBACAC,IAAAA,SACGtB,sCAEGuB,EAAkClC,WAAc,iBAAO,CAAEC,UAAAA,EAAWE,OAAAA,KAAW,CACjFF,EACAE,WAIAH,gBAACmC,iBACGL,OAAQA,EACR7B,UAAWA,EACXmC,8BACAR,UAAWS,EAAWC,UAAOC,QAASD,UAAOnC,GAASmC,UAAOP,kBACjD,iBAEZ/B,gBAACwC,GAAUR,UAAWA,EAAWS,UAAWrC,EAAoBsC,aAAa,GACzE1C,gBAAC2C,iCACOhC,GACJgB,GAAID,MACJkB,aAAa,OACbC,WAAW,UACXC,QAAQ,OACRC,cAAc,SACdC,SAAS,SACT7C,OAAmB,WAAXA,EAAsB,YAASD,EACvC+C,SAAqB,WAAX9C,EAAsB,EAAI,EACpCyB,UAAW,CAACL,EAA2Be,UAAOY,aAE9ClD,gBAACD,EAAaoD,UAASC,MAAOlB,GAAeD,4CAqOlCA,IAAAA,SAAatB,6CAEpCX,gBAACsB,mBAAgBX,GACbX,gBAACqD,UAAOC,MAAM,QAAQC,MAAM,SACvBtB,uCAvEWV,IAAAA,0BAA2BU,IAAAA,SAAatB,sCACxDR,EAAWH,aAAiBD,GAA5BI,cAEJH,gBAAC0B,uBACOf,GACJiB,UAAWL,EACX0B,SAAqB,WAAX9C,EAAsB,EAAI,EACpCA,OAAmB,WAAXA,EAAsB,YAASD,EACvC8C,SAAS,SAEThD,gBAAC0B,OAAIG,QAAQ,QAAQ2B,cAAc,WAC9BvB,0FA5EbA,IAAAA,aACAwB,OAAAA,oBACAjC,YAAAA,gBACAD,IAAAA,0BACGZ,6CAGCX,gCACIA,gBAAC0B,uBACOf,GACJgB,GAAG,SACH+B,YAAY,QACZC,aAAa,QACbC,SAAS,QACThC,UAAWL,IAEXvB,gBAAC6D,WAAQN,MAAM,QAAQO,OAAO,UAC1B9D,gBAAC+D,UAAOhC,MAAM,QAAQE,IACV,IAAXwB,GAA+B,OAAXA,EAAkB,KACnCzD,gBAAC+D,UACGhC,MAAM,UACNR,0BAA2Be,UAAO0B,8BACtB,oBAEO,kBAAXP,EACJzD,gBAACU,gBAA4B,cAAcsB,WAAW,IAEtDyB,KAMnBjC,EAAcxB,gBAACyB,gBAAa"}
+{"version":3,"file":"modal.js","sources":["../../../src/new-components/modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { DialogOverlay, DialogContent } from '@reach/dialog'\nimport FocusLock from 'react-focus-lock'\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     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: 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\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    autoFocus = true,\n    children,\n    ...props\n}: ModalProps) {\n    const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n        onDismiss,\n        height,\n    ])\n\n    return (\n        <DialogOverlay\n            isOpen={isOpen}\n            onDismiss={onDismiss}\n            dangerouslyBypassFocusLock // We're setting up our own focus lock below\n            className={classNames(styles.overlay, styles[height], styles[width])}\n            data-testid=\"modal-overlay\"\n        >\n            <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n                <DialogContent\n                    {...props}\n                    as={Box}\n                    borderRadius=\"full\"\n                    background=\"default\"\n                    display=\"flex\"\n                    flexDirection=\"column\"\n                    overflow=\"hidden\"\n                    height={height === 'expand' ? 'full' : undefined}\n                    flexGrow={height === 'expand' ? 1 : 0}\n                    className={[exceptionallySetClassName, styles.container]}\n                >\n                    <ModalContext.Provider value={contextValue}>{children}</ModalContext.Provider>\n                </DialogContent>\n            </FocusLock>\n        </DialogOverlay>\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","autoFocus","children","contextValue","DialogOverlay","dangerouslyBypassFocusLock","classNames","styles","overlay","FocusLock","whiteList","returnFocus","DialogContent","borderRadius","background","display","flexDirection","overflow","flexGrow","container","Provider","value","Inline","align","space","paddingBottom","button","paddingLeft","paddingRight","paddingY","Columns","alignY","Column","headerContent","buttonContainer"],"mappings":"yyBA0BMA,EAAeC,gBAAuC,CACxDC,eAAWC,EACXC,OAAQ,eA4DZ,SAASC,EAAmBC,WACfA,EAAQC,gBAAkBC,UAA8C,WAAlCF,EAAQG,QAAQC,wBAqFnDC,EAAiBC,OACrBV,EAAcD,aAAiBD,GAA/BE,YAC0CD,YAAe,GAA1DY,OAAmBC,SACQb,YAAe,GAA1Cc,OAAWC,cAElBf,aACI,WACQc,EACAD,GAAqB,GAErBE,GAAa,KAGrB,CAACD,IAIDd,gBAACgB,0BACOL,GACJM,QAAQ,aACRC,QAASjB,EACTkB,KAAMnB,gBAACoB,kBACPC,SAAUT,EAAoB,GAAK,cAqJ/BU,SACZC,IAAAA,8BACAC,YAAAA,gBACGb,6CAGCX,gCACKwB,EAAcxB,gBAACyB,gBAAa,KAC7BzB,gBAAC0B,qBAAIC,GAAG,UAAahB,GAAOiB,UAAWL,EAA2BM,QAAQ,0CA3PlFC,IAAAA,OACA7B,IAAAA,cACAE,OAAAA,aAAS,mBACT4B,MAAAA,aAAQ,WACRR,IAAAA,8BACAS,UAAAA,gBACAC,IAAAA,SACGtB,sCAEGuB,EAAkClC,WAAc,iBAAO,CAAEC,UAAAA,EAAWE,OAAAA,KAAW,CACjFF,EACAE,WAIAH,gBAACmC,iBACGL,OAAQA,EACR7B,UAAWA,EACXmC,8BACAR,UAAWS,EAAWC,UAAOC,QAASD,UAAOnC,GAASmC,UAAOP,kBACjD,iBAEZ/B,gBAACwC,GAAUR,UAAWA,EAAWS,UAAWrC,EAAoBsC,aAAa,GACzE1C,gBAAC2C,iCACOhC,GACJgB,GAAID,MACJkB,aAAa,OACbC,WAAW,UACXC,QAAQ,OACRC,cAAc,SACdC,SAAS,SACT7C,OAAmB,WAAXA,EAAsB,YAASD,EACvC+C,SAAqB,WAAX9C,EAAsB,EAAI,EACpCyB,UAAW,CAACL,EAA2Be,UAAOY,aAE9ClD,gBAACD,EAAaoD,UAASC,MAAOlB,GAAeD,4CAuOlCA,IAAAA,SAAatB,6CAEpCX,gBAACsB,mBAAgBX,GACbX,gBAACqD,UAAOC,MAAM,QAAQC,MAAM,SACvBtB,uCAvEWV,IAAAA,0BAA2BU,IAAAA,SAAatB,sCACxDR,EAAWH,aAAiBD,GAA5BI,cAEJH,gBAAC0B,uBACOf,GACJiB,UAAWL,EACX0B,SAAqB,WAAX9C,EAAsB,EAAI,EACpCA,OAAmB,WAAXA,EAAsB,YAASD,EACvC8C,SAAS,SAEThD,gBAAC0B,OAAIG,QAAQ,QAAQ2B,cAAc,WAC9BvB,0FA9EbA,IAAAA,aACAwB,OAAAA,oBACAjC,YAAAA,gBACAD,IAAAA,0BACGZ,6CAGCX,gCACIA,gBAAC0B,uBACOf,GACJgB,GAAG,SACH+B,YAAY,QACZC,cAAyB,IAAXF,GAA+B,OAAXA,EAAkB,QAAU,QAC9DG,SAAS,QACThC,UAAWL,IAEXvB,gBAAC6D,WAAQN,MAAM,QAAQO,OAAO,UAC1B9D,gBAAC+D,UAAOhC,MAAM,QAAQE,IACV,IAAXwB,GAA+B,OAAXA,EACjBzD,uBAAK4B,UAAWU,UAAO0B,gBAEvBhE,gBAAC+D,UACGhC,MAAM,UACNR,0BAA2Be,UAAO2B,8BACtB,oBAEO,kBAAXR,EACJzD,gBAACU,gBAA4B,cAAcsB,WAAW,IAEtDyB,KAMnBjC,EAAcxB,gBAACyB,gBAAa"}

package/lib/new-components/modal/modal.module.css.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={"reach-portal":"dddb40c3",fadein:"_955f2d73",fitContent:"_95c7550e",container:"_88079712",full:"_4779d078",large:"_5fd86231",medium:"bdfb5931",small:"_4e848a11",xlarge:"d673fba2",overlay:"ea9ae0cc",expand:"a8bf8a4f",buttonContainer:"_44d6850e"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={"reach-portal":"_37bef8d8",fadein:"_77f9687f",fitContent:"bcc4e0a5",container:"d4832c2d",full:"b0c3b021",large:"_573d6aa5",medium:"_8550d996",small:"_43bb18f5",xlarge:"_57b4159d",overlay:"cb63f300",expand:"e741893e",buttonContainer:"bb1ce281",headerContent:"c5ef989c"};
 //# sourceMappingURL=modal.module.css.js.map

package/lib/new-components/text/text.module.css.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={text:"c5028ea8","size-caption":"_05d3a546","size-copy":"_100565e3","size-subtitle":"b8f72625","weight-semibold":"_398ecda1","weight-bold":"_8054cd6b","tone-secondary":"_6abd56b1","tone-danger":"_274b4a47",lineClampMultipleLines:"_724b0054","lineClamp-1":"_51ac6ee4","lineClamp-2":"b0742803","lineClamp-3":"dd664c95","lineClamp-4":"b02775b5","lineClamp-5":"da91b300"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={text:"_2282cb83","size-caption":"_087a8179","size-copy":"a4423c2a","size-subtitle":"_03365a63","weight-semibold":"_5213e4ab","weight-bold":"_3d58c8f2","tone-secondary":"_892a359a","tone-danger":"f9cb5d8a","tone-positive":"fcedb234",lineClampMultipleLines:"_765949c1","lineClamp-1":"c3e4800e","lineClamp-2":"b25b652b","lineClamp-3":"bb13d214","lineClamp-4":"_6db1928e","lineClamp-5":"e9944c1d"};
 //# sourceMappingURL=text.module.css.js.map

package/lib/new-components/text-link/text-link.module.css.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={container:"b55607a1"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={container:"_232127ef"};
 //# sourceMappingURL=text-link.module.css.js.map

package/package.json

@@ -2,7 +2,7 @@
     "name": "@doist/reactist",
     "description": "Open source React components by Doist",
     "author": "Henning Muszynski <henning@doist.com> (http://doist.com)",
-    "version": "11.4.0",
+    "version": "11.6.0",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": "git+https://github.com/Doist/reactist.git",
@@ -43,8 +43,8 @@
     },
     "peerDependencies": {
         "classnames": "^2.2.5",
-        "react": "^15.5.4 || ^16.2.0 || ^17.0.0",
-        "react-dom": "^15.5.4 || ^16.2.0 || ^17.0.0",
+        "react": "^15.5.4 || ^16.2.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.5.4 || ^16.2.0 || ^17.0.0 || ^18.0.0",
         "prop-types": "^15.6.2"
     },
     "devDependencies": {

package/styles/base-field.css

@@ -2,7 +2,7 @@
 .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)}
-.c5028ea8{font-family:var(--reactist-font-family);font-size:var(--reactist-font-size-body);font-weight:var(--reactist-font-weight-regular);color:var(--reactist-content-primary)}._05d3a546{font-size:var(--reactist-font-size-caption)}._100565e3{font-size:var(--reactist-font-size-copy)}.b8f72625{font-size:var(--reactist-font-size-subtitle)}._398ecda1{font-weight:var(--reactist-font-weight-medium)}._8054cd6b{font-weight:var(--reactist-font-weight-strong)}._6abd56b1{color:var(--reactist-content-secondary)}._274b4a47{color:#d1453b}._724b0054{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}._51ac6ee4{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.b0742803{-webkit-line-clamp:2}.dd664c95{-webkit-line-clamp:3}.b02775b5{-webkit-line-clamp:4}.da91b300{-webkit-line-clamp:5}
+._2282cb83{font-family:var(--reactist-font-family);font-size:var(--reactist-font-size-body);font-weight:var(--reactist-font-weight-regular);color:var(--reactist-content-primary)}._087a8179{font-size:var(--reactist-font-size-caption)}.a4423c2a{font-size:var(--reactist-font-size-copy)}._03365a63{font-size:var(--reactist-font-size-subtitle)}._5213e4ab{font-weight:var(--reactist-font-weight-medium)}._3d58c8f2{font-weight:var(--reactist-font-weight-strong)}._892a359a{color:var(--reactist-content-secondary)}.f9cb5d8a{color:#d1453b}.fcedb234{color:var(--reactist-content-positive)}._765949c1{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.c3e4800e{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.b25b652b{-webkit-line-clamp:2}.bb13d214{-webkit-line-clamp:3}._6db1928e{-webkit-line-clamp:4}.e9944c1d{-webkit-line-clamp:5}
 .ed7d894c{font-family:var(--reactist-font-family)}._22213081{font-weight:var(--reactist-font-weight-strong)}.be8637dd{color:var(--reactist-content-secondary)}._72b46ad5{text-align:right}
 ._3f3a401c{border-bottom:1px solid var(--reactist-divider-primary)}._03b05b70{border-bottom:1px solid var(--reactist-divider-secondary)}.b6f67ff8{border-bottom:1px solid var(--reactist-divider-tertiary)}
 ._7b475ead>:not(:first-child){margin-top:var(--reactist-spacing-xsmall)}._5641699f>:not(:first-child){margin-top:var(--reactist-spacing-small)}._1a1c63e4>:not(:first-child){margin-top:var(--reactist-spacing-medium)}._560f80a0>:not(:first-child){margin-top:var(--reactist-spacing-large)}._84ffebbc>:not(:first-child){margin-top:var(--reactist-spacing-xlarge)}.b60a65cb>:not(:first-child){margin-top:var(--reactist-spacing-xxlarge)}@media (min-width:768px){.d808f5c3>:not(:first-child){margin-top:var(--reactist-spacing-xsmall)}.a51c76b3>:not(:first-child){margin-top:var(--reactist-spacing-small)}._7185a7aa>:not(:first-child){margin-top:var(--reactist-spacing-medium)}.af82e610>:not(:first-child){margin-top:var(--reactist-spacing-large)}._88b4ff46>:not(:first-child){margin-top:var(--reactist-spacing-xlarge)}._9de15321>:not(:first-child){margin-top:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._6fb32d20>:not(:first-child){margin-top:var(--reactist-spacing-xsmall)}._07ee315a>:not(:first-child){margin-top:var(--reactist-spacing-small)}.a270d7ec>:not(:first-child){margin-top:var(--reactist-spacing-medium)}.ea6ebb29>:not(:first-child){margin-top:var(--reactist-spacing-large)}._35b36178>:not(:first-child){margin-top:var(--reactist-spacing-xlarge)}._56c7dc23>:not(:first-child){margin-top:var(--reactist-spacing-xxlarge)}}

package/styles/checkbox-field.css

@@ -2,5 +2,5 @@
 .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)}
-.c5028ea8{font-family:var(--reactist-font-family);font-size:var(--reactist-font-size-body);font-weight:var(--reactist-font-weight-regular);color:var(--reactist-content-primary)}._05d3a546{font-size:var(--reactist-font-size-caption)}._100565e3{font-size:var(--reactist-font-size-copy)}.b8f72625{font-size:var(--reactist-font-size-subtitle)}._398ecda1{font-weight:var(--reactist-font-weight-medium)}._8054cd6b{font-weight:var(--reactist-font-weight-strong)}._6abd56b1{color:var(--reactist-content-secondary)}._274b4a47{color:#d1453b}._724b0054{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}._51ac6ee4{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.b0742803{-webkit-line-clamp:2}.dd664c95{-webkit-line-clamp:3}.b02775b5{-webkit-line-clamp:4}.da91b300{-webkit-line-clamp:5}
+._2282cb83{font-family:var(--reactist-font-family);font-size:var(--reactist-font-size-body);font-weight:var(--reactist-font-weight-regular);color:var(--reactist-content-primary)}._087a8179{font-size:var(--reactist-font-size-caption)}.a4423c2a{font-size:var(--reactist-font-size-copy)}._03365a63{font-size:var(--reactist-font-size-subtitle)}._5213e4ab{font-weight:var(--reactist-font-weight-medium)}._3d58c8f2{font-weight:var(--reactist-font-weight-strong)}._892a359a{color:var(--reactist-content-secondary)}.f9cb5d8a{color:#d1453b}.fcedb234{color:var(--reactist-content-positive)}._765949c1{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.c3e4800e{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.b25b652b{-webkit-line-clamp:2}.bb13d214{-webkit-line-clamp:3}._6db1928e{-webkit-line-clamp:4}.e9944c1d{-webkit-line-clamp:5}
 ._96c4d12f{position:relative}._96c4d12f,._96c4d12f *{cursor:pointer;font-family:var(--reactist-font-family)}._96c4d12f._5048e2a5,._96c4d12f._5048e2a5 *{cursor:not-allowed}._96c4d12f._5048e2a5{opacity:.5}._96c4d12f svg{color:var(--reactist-content-secondary);border-radius:5px}._96c4d12f._42187b48 svg{color:var(--reactist-switch-checked)}._96c4d12f input[type=checkbox]{display:block;height:16px;left:0;margin:4px;opacity:0;position:absolute;top:0;width:16px}._96c4d12f._3510166f svg{border:2px solid var(--reactist-actionable-primary-idle-fill)}

package/styles/modal.css

@@ -8,4 +8,4 @@
 .reactist_tooltip{font-size:.81rem;color:#202020;font-weight:400;line-height:1.6;text-align:center;text-overflow:ellipsis;overflow:hidden;max-width:100%;padding:5px 10px;background-color:#333;color:#fff;border:none;border-radius:3px;z-index:1000}
 :root{--reactist-spinner-tint:var(--reactist-bg-brand);--reactist-spinner-fill:var(--reactist-framework-fill-crest)}@-webkit-keyframes _54fbe2b3{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes _54fbe2b3{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}._51539197{-webkit-animation-name:_54fbe2b3;animation-name:_54fbe2b3;-webkit-animation-duration:1.2s;animation-duration:1.2s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.a0c466ed{fill:var(--reactist-spinner-tint)}._745b73d3{fill:var(--reactist-spinner-fill)}
 :root{--reactist-button-small-font-size:var(--reactist-font-size-caption);--reactist-button-small-spacing:var(--reactist-spacing-small);--reactist-button-small-height:28px;--reactist-button-normal-font-size:var(--reactist-font-size-copy);--reactist-button-normal-spacing:var(--reactist-spacing-medium);--reactist-button-normal-height:32px;--reactist-button-large-font-size:var(--reactist-font-size-body);--reactist-button-large-spacing:var(--reactist-spacing-large);--reactist-button-large-height:36px;--reactist-actionable-primary-idle-tint:#fff;--reactist-actionable-primary-idle-fill:#008aa6;--reactist-actionable-primary-hover-tint:#fff;--reactist-actionable-primary-hover-fill:#007992;--reactist-actionable-primary-disabled-tint:#fff;--reactist-actionable-primary-disabled-fill:#99d0db;--reactist-actionable-secondary-idle-tint:#282f30;--reactist-actionable-secondary-idle-fill:#f2f6f7;--reactist-actionable-secondary-hover-tint:#282f30;--reactist-actionable-secondary-hover-fill:#e3e7e8;--reactist-actionable-secondary-disabled-tint:#a9acac;--reactist-actionable-secondary-disabled-fill:#f2f6f7;--reactist-actionable-tertiary-idle-tint:#006f85;--reactist-actionable-tertiary-hover-tint:#006f85;--reactist-actionable-tertiary-hover-fill:#f2f6f7;--reactist-actionable-tertiary-disabled-tint:#99c5ce;--reactist-actionable-quaternary-idle-tint:#6c777a;--reactist-actionable-quaternary-hover-tint:#282f30;--reactist-actionable-quaternary-hover-fill:#e0e7e8;--reactist-actionable-quaternary-disabled-tint:#c4c9ca;--reactist-actionable-primary-destructive-idle-tint:#fff;--reactist-actionable-primary-destructive-idle-fill:#dc4c3e;--reactist-actionable-primary-destructive-hover-tint:#fff;--reactist-actionable-primary-destructive-hover-fill:#b03d32;--reactist-actionable-primary-destructive-disabled-tint:#fff;--reactist-actionable-primary-destructive-disabled-fill:#f1b7b2;--reactist-actionable-secondary-destructive-idle-tint:#dc4c3e;--reactist-actionable-secondary-destructive-hover-tint:#b03d32;--reactist-actionable-secondary-destructive-hover-fill:transparent;--reactist-actionable-secondary-destructive-disabled-tint:#f1b7b2}._7a2031d6{max-width:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit;background-color:transparent;border-radius:5px;white-space:nowrap;font-family:var(--reactist-font-family);font-weight:var(--reactist-font-weight-medium);text-decoration:none;border:1px solid transparent;transition-duration:.3s;transition-property:color,background-color;transition-timing-function:cubic-bezier(.4,0,.2,1)}._09c23660{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%;text-align:center}.dd82f17a ._09c23660{text-align:start}._8a9315ae ._09c23660{text-align:center}._6acb4219 ._09c23660{text-align:end}._7a2031d6:active:not([aria-disabled=true]){transform:scale(.97);transition:transform .2s cubic-bezier(.02,1.505,.745,1.235)}._7a2031d6{padding:0 var(--reactist-btn-spacing);font-size:var(--reactist-btn-font-size);height:var(--reactist-btn-height);line-height:var(--reactist-btn-height);--reactist-spinner-tint:var(--reactist-btn-idle-tint);--reactist-spinner-fill:var(--reactist-btn-idle-fill)}._7a2031d6._1e48abcb{--reactist-btn-height:var(--reactist-button-small-height);--reactist-btn-spacing:var(--reactist-button-small-spacing);--reactist-btn-font-size:var(--reactist-button-small-font-size)}._7a2031d6._949f7858{--reactist-btn-height:var(--reactist-button-normal-height);--reactist-btn-spacing:var(--reactist-button-normal-spacing);--reactist-btn-font-size:var(--reactist-button-normal-font-size)}._7a2031d6._34ac3da9{--reactist-btn-height:var(--reactist-button-large-height);--reactist-btn-spacing:var(--reactist-button-large-spacing);--reactist-btn-font-size:var(--reactist-button-large-font-size)}._7a2031d6:not(._7e5800ce){color:var(--reactist-btn-idle-tint);background-color:var(--reactist-btn-idle-fill)}._7a2031d6:focus-visible:not([aria-disabled=true]),._7a2031d6:hover:not([aria-disabled=true]),._7a2031d6[aria-expanded=true]{color:var(--reactist-btn-hover-tint);background-color:var(--reactist-btn-hover-fill)}._7a2031d6._7e5800ce{cursor:not-allowed;color:var(--reactist-btn-disabled-tint);background-color:var(--reactist-btn-disabled-fill)}._7a2031d6:not(._1bdc5d38){min-width:68px}._7a2031d6._1bdc5d38{width:var(--reactist-btn-height);height:var(--reactist-btn-height);padding:0}._7a2031d6 ._270d7bdf{margin-right:calc(var(--reactist-btn-spacing) - 6px);margin-left:-6px}._7a2031d6 ._471c6e23{margin-left:calc(var(--reactist-btn-spacing) - 6px);margin-right:-6px}.a878a9a4{--reactist-btn-idle-tint:var(--reactist-actionable-primary-idle-tint);--reactist-btn-idle-fill:var(--reactist-actionable-primary-idle-fill);--reactist-btn-hover-tint:var(--reactist-actionable-primary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-primary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-primary-disabled-tint);--reactist-btn-disabled-fill:var(--reactist-actionable-primary-disabled-fill)}._81c213d2{--reactist-btn-idle-tint:var(--reactist-actionable-secondary-idle-tint);--reactist-btn-idle-fill:var(--reactist-actionable-secondary-idle-fill);--reactist-btn-hover-tint:var(--reactist-actionable-secondary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-secondary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-secondary-disabled-tint);--reactist-btn-disabled-fill:var(--reactist-actionable-secondary-disabled-fill)}._12f96f70{--reactist-btn-idle-tint:var(--reactist-actionable-tertiary-idle-tint);--reactist-btn-hover-tint:var(--reactist-actionable-tertiary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-tertiary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-tertiary-disabled-tint)}._8c546508,._12f96f70{--reactist-btn-idle-fill:transparent;--reactist-btn-disabled-fill:transparent}._8c546508{--reactist-btn-idle-tint:var(--reactist-actionable-quaternary-idle-tint);--reactist-btn-hover-tint:var(--reactist-actionable-quaternary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-quaternary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-quaternary-disabled-tint)}.a878a9a4._441a7e3a{--reactist-btn-idle-tint:var(--reactist-actionable-primary-destructive-idle-tint);--reactist-btn-idle-fill:var(--reactist-actionable-primary-destructive-idle-fill);--reactist-btn-hover-tint:var(--reactist-actionable-primary-destructive-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-primary-destructive-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-primary-destructive-disabled-tint);--reactist-btn-disabled-fill:var(--reactist-actionable-primary-destructive-disabled-fill)}._81c213d2._441a7e3a{--reactist-btn-idle-tint:var(--reactist-actionable-secondary-destructive-idle-tint);--reactist-btn-idle-fill:transparent;--reactist-btn-hover-tint:var(--reactist-actionable-secondary-destructive-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-secondary-destructive-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-secondary-destructive-disabled-tint);--reactist-btn-disabled-fill:transparent;border-color:var(--reactist-btn-idle-tint)}._81c213d2._441a7e3a:hover{border-color:var(--reactist-btn-hover-tint)}._81c213d2._441a7e3a._7e5800ce{border-color:var(--reactist-btn-disabled-tint)}._8c546508._441a7e3a,._12f96f70._441a7e3a{--reactist-btn-idle-tint:var(--reactist-actionable-secondary-destructive-idle-tint);--reactist-btn-hover-tint:var(--reactist-actionable-secondary-destructive-hover-tint);--reactist-btn-disabled-tint:var(--reactist-actionable-secondary-destructive-disabled-tint)}
-@-webkit-keyframes _955f2d73{0%{opacity:0}to{opacity:1}}@keyframes _955f2d73{0%{opacity:0}to{opacity:1}}:root{--reach-dialog:1;--reactist-modal-overlay-fill:rgba(0,0,0,0.5);--reactist-modal-padding-top:13vh}.dddb40c3{isolation:isolate}[data-reach-dialog-overlay]{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background-color:var(--reactist-modal-overlay-fill);-webkit-animation:_955f2d73 .2s;animation:_955f2d73 .2s;-webkit-animation-timing-function:cubic-bezier(.4,0,.2,1);animation-timing-function:cubic-bezier(.4,0,.2,1);transition:background-color .5s;display:flex;align-items:center;justify-content:center;z-index:var(--reactist-stacking-order-modal,1)}[data-reach-dialog-overlay]>[data-focus-lock-disabled]{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;box-sizing:border-box;padding:var(--reactist-spacing-xxlarge)}[data-reach-dialog-overlay]._95c7550e>[data-focus-lock-disabled]{padding-top:var(--reactist-modal-padding-top)}[data-reach-dialog-overlay]._95c7550e>[data-focus-lock-disabled] ._88079712{max-height:calc(100vh - 2*var(--reactist-modal-padding-top))}[data-reach-dialog-content]{background:var(--reactist-bg-default);padding:0;outline:none;transition:box-shadow .5s}._88079712{box-shadow:0 2px 8px 0 rgba(0,0,0,.16);transition:width .2s ease-in-out;max-width:100%}._4779d078 ._88079712{width:100%}._5fd86231 ._88079712{width:768px}.bdfb5931 ._88079712{width:580px}._4e848a11 ._88079712{width:450px}@media (min-width:992px){.d673fba2 ._88079712{width:960px}}@media (min-width:1200px){.d673fba2 ._88079712{width:1060px}}@media (max-width:1000px){.d673fba2 ._88079712{width:768px}}@media (max-width:580px){.ea9ae0cc:not(._4e848a11) ._88079712{width:100%!important;max-height:none}.ea9ae0cc.a8bf8a4f:not(._4e848a11)>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}.ea9ae0cc.a8bf8a4f:not(._4e848a11) ._88079712{border-bottom-left-radius:0;border-bottom-right-radius:0}}@media (max-width:400px){._88079712{width:100%!important;max-height:none}.ea9ae0cc.a8bf8a4f>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}.ea9ae0cc.a8bf8a4f ._88079712{border-bottom-left-radius:0;border-bottom-right-radius:0}}._44d6850e{display:flex;align-items:center;height:32px}
+@-webkit-keyframes _77f9687f{0%{opacity:0}to{opacity:1}}@keyframes _77f9687f{0%{opacity:0}to{opacity:1}}:root{--reach-dialog:1;--reactist-modal-overlay-fill:rgba(0,0,0,0.5);--reactist-modal-padding-top:13vh}._37bef8d8{isolation:isolate}[data-reach-dialog-overlay]{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background-color:var(--reactist-modal-overlay-fill);-webkit-animation:_77f9687f .2s;animation:_77f9687f .2s;-webkit-animation-timing-function:cubic-bezier(.4,0,.2,1);animation-timing-function:cubic-bezier(.4,0,.2,1);transition:background-color .5s;display:flex;align-items:center;justify-content:center;z-index:var(--reactist-stacking-order-modal,1)}[data-reach-dialog-overlay]>[data-focus-lock-disabled]{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;box-sizing:border-box;padding:var(--reactist-spacing-xxlarge)}[data-reach-dialog-overlay].bcc4e0a5>[data-focus-lock-disabled]{padding-top:var(--reactist-modal-padding-top)}[data-reach-dialog-overlay].bcc4e0a5>[data-focus-lock-disabled] .d4832c2d{max-height:calc(100vh - 2*var(--reactist-modal-padding-top))}[data-reach-dialog-content]{background:var(--reactist-bg-default);padding:0;outline:none;transition:box-shadow .5s}.d4832c2d{box-shadow:0 2px 8px 0 rgba(0,0,0,.16);transition:width .2s ease-in-out;max-width:100%}.b0c3b021 .d4832c2d{width:100%}._573d6aa5 .d4832c2d{width:768px}._8550d996 .d4832c2d{width:580px}._43bb18f5 .d4832c2d{width:450px}@media (min-width:992px){._57b4159d .d4832c2d{width:960px}}@media (min-width:1200px){._57b4159d .d4832c2d{width:1060px}}@media (max-width:1000px){._57b4159d .d4832c2d{width:768px}}@media (max-width:580px){.cb63f300:not(._43bb18f5) .d4832c2d{width:100%!important;max-height:none}.cb63f300.e741893e:not(._43bb18f5)>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}.cb63f300.e741893e:not(._43bb18f5) .d4832c2d{border-bottom-left-radius:0;border-bottom-right-radius:0}}@media (max-width:400px){.d4832c2d{width:100%!important;max-height:none}.cb63f300.e741893e>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}.cb63f300.e741893e .d4832c2d{border-bottom-left-radius:0;border-bottom-right-radius:0}}.bb1ce281{display:flex;align-items:center;height:32px}.c5ef989c{min-height:32px}

package/styles/modal.module.css.css

@@ -1 +1 @@
-@-webkit-keyframes _955f2d73{0%{opacity:0}to{opacity:1}}@keyframes _955f2d73{0%{opacity:0}to{opacity:1}}:root{--reach-dialog:1;--reactist-modal-overlay-fill:rgba(0,0,0,0.5);--reactist-modal-padding-top:13vh}.dddb40c3{isolation:isolate}[data-reach-dialog-overlay]{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background-color:var(--reactist-modal-overlay-fill);-webkit-animation:_955f2d73 .2s;animation:_955f2d73 .2s;-webkit-animation-timing-function:cubic-bezier(.4,0,.2,1);animation-timing-function:cubic-bezier(.4,0,.2,1);transition:background-color .5s;display:flex;align-items:center;justify-content:center;z-index:var(--reactist-stacking-order-modal,1)}[data-reach-dialog-overlay]>[data-focus-lock-disabled]{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;box-sizing:border-box;padding:var(--reactist-spacing-xxlarge)}[data-reach-dialog-overlay]._95c7550e>[data-focus-lock-disabled]{padding-top:var(--reactist-modal-padding-top)}[data-reach-dialog-overlay]._95c7550e>[data-focus-lock-disabled] ._88079712{max-height:calc(100vh - 2*var(--reactist-modal-padding-top))}[data-reach-dialog-content]{background:var(--reactist-bg-default);padding:0;outline:none;transition:box-shadow .5s}._88079712{box-shadow:0 2px 8px 0 rgba(0,0,0,.16);transition:width .2s ease-in-out;max-width:100%}._4779d078 ._88079712{width:100%}._5fd86231 ._88079712{width:768px}.bdfb5931 ._88079712{width:580px}._4e848a11 ._88079712{width:450px}@media (min-width:992px){.d673fba2 ._88079712{width:960px}}@media (min-width:1200px){.d673fba2 ._88079712{width:1060px}}@media (max-width:1000px){.d673fba2 ._88079712{width:768px}}@media (max-width:580px){.ea9ae0cc:not(._4e848a11) ._88079712{width:100%!important;max-height:none}.ea9ae0cc.a8bf8a4f:not(._4e848a11)>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}.ea9ae0cc.a8bf8a4f:not(._4e848a11) ._88079712{border-bottom-left-radius:0;border-bottom-right-radius:0}}@media (max-width:400px){._88079712{width:100%!important;max-height:none}.ea9ae0cc.a8bf8a4f>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}.ea9ae0cc.a8bf8a4f ._88079712{border-bottom-left-radius:0;border-bottom-right-radius:0}}._44d6850e{display:flex;align-items:center;height:32px}
+@-webkit-keyframes _77f9687f{0%{opacity:0}to{opacity:1}}@keyframes _77f9687f{0%{opacity:0}to{opacity:1}}:root{--reach-dialog:1;--reactist-modal-overlay-fill:rgba(0,0,0,0.5);--reactist-modal-padding-top:13vh}._37bef8d8{isolation:isolate}[data-reach-dialog-overlay]{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background-color:var(--reactist-modal-overlay-fill);-webkit-animation:_77f9687f .2s;animation:_77f9687f .2s;-webkit-animation-timing-function:cubic-bezier(.4,0,.2,1);animation-timing-function:cubic-bezier(.4,0,.2,1);transition:background-color .5s;display:flex;align-items:center;justify-content:center;z-index:var(--reactist-stacking-order-modal,1)}[data-reach-dialog-overlay]>[data-focus-lock-disabled]{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;box-sizing:border-box;padding:var(--reactist-spacing-xxlarge)}[data-reach-dialog-overlay].bcc4e0a5>[data-focus-lock-disabled]{padding-top:var(--reactist-modal-padding-top)}[data-reach-dialog-overlay].bcc4e0a5>[data-focus-lock-disabled] .d4832c2d{max-height:calc(100vh - 2*var(--reactist-modal-padding-top))}[data-reach-dialog-content]{background:var(--reactist-bg-default);padding:0;outline:none;transition:box-shadow .5s}.d4832c2d{box-shadow:0 2px 8px 0 rgba(0,0,0,.16);transition:width .2s ease-in-out;max-width:100%}.b0c3b021 .d4832c2d{width:100%}._573d6aa5 .d4832c2d{width:768px}._8550d996 .d4832c2d{width:580px}._43bb18f5 .d4832c2d{width:450px}@media (min-width:992px){._57b4159d .d4832c2d{width:960px}}@media (min-width:1200px){._57b4159d .d4832c2d{width:1060px}}@media (max-width:1000px){._57b4159d .d4832c2d{width:768px}}@media (max-width:580px){.cb63f300:not(._43bb18f5) .d4832c2d{width:100%!important;max-height:none}.cb63f300.e741893e:not(._43bb18f5)>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}.cb63f300.e741893e:not(._43bb18f5) .d4832c2d{border-bottom-left-radius:0;border-bottom-right-radius:0}}@media (max-width:400px){.d4832c2d{width:100%!important;max-height:none}.cb63f300.e741893e>[data-focus-lock-disabled]{padding-left:0;padding-right:0;padding-bottom:0}.cb63f300.e741893e .d4832c2d{border-bottom-left-radius:0;border-bottom-right-radius:0}}.bb1ce281{display:flex;align-items:center;height:32px}.c5ef989c{min-height:32px}

package/styles/password-field.css

@@ -1,5 +1,5 @@
 .reactist_tooltip{font-size:.81rem;color:#202020;font-weight:400;line-height:1.6;text-align:center;text-overflow:ellipsis;overflow:hidden;max-width:100%;padding:5px 10px;background-color:#333;color:#fff;border:none;border-radius:3px;z-index:1000}
-.c5028ea8{font-family:var(--reactist-font-family);font-size:var(--reactist-font-size-body);font-weight:var(--reactist-font-weight-regular);color:var(--reactist-content-primary)}._05d3a546{font-size:var(--reactist-font-size-caption)}._100565e3{font-size:var(--reactist-font-size-copy)}.b8f72625{font-size:var(--reactist-font-size-subtitle)}._398ecda1{font-weight:var(--reactist-font-weight-medium)}._8054cd6b{font-weight:var(--reactist-font-weight-strong)}._6abd56b1{color:var(--reactist-content-secondary)}._274b4a47{color:#d1453b}._724b0054{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}._51ac6ee4{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.b0742803{-webkit-line-clamp:2}.dd664c95{-webkit-line-clamp:3}.b02775b5{-webkit-line-clamp:4}.da91b300{-webkit-line-clamp:5}
+._2282cb83{font-family:var(--reactist-font-family);font-size:var(--reactist-font-size-body);font-weight:var(--reactist-font-weight-regular);color:var(--reactist-content-primary)}._087a8179{font-size:var(--reactist-font-size-caption)}.a4423c2a{font-size:var(--reactist-font-size-copy)}._03365a63{font-size:var(--reactist-font-size-subtitle)}._5213e4ab{font-weight:var(--reactist-font-weight-medium)}._3d58c8f2{font-weight:var(--reactist-font-weight-strong)}._892a359a{color:var(--reactist-content-secondary)}.f9cb5d8a{color:#d1453b}.fcedb234{color:var(--reactist-content-positive)}._765949c1{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.c3e4800e{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.b25b652b{-webkit-line-clamp:2}.bb13d214{-webkit-line-clamp:3}._6db1928e{-webkit-line-clamp:4}.e9944c1d{-webkit-line-clamp:5}
 .ed7d894c{font-family:var(--reactist-font-family)}._22213081{font-weight:var(--reactist-font-weight-strong)}.be8637dd{color:var(--reactist-content-secondary)}._72b46ad5{text-align:right}
 ._3f3a401c{border-bottom:1px solid var(--reactist-divider-primary)}._03b05b70{border-bottom:1px solid var(--reactist-divider-secondary)}.b6f67ff8{border-bottom:1px solid var(--reactist-divider-tertiary)}
 ._7b475ead>:not(:first-child){margin-top:var(--reactist-spacing-xsmall)}._5641699f>:not(:first-child){margin-top:var(--reactist-spacing-small)}._1a1c63e4>:not(:first-child){margin-top:var(--reactist-spacing-medium)}._560f80a0>:not(:first-child){margin-top:var(--reactist-spacing-large)}._84ffebbc>:not(:first-child){margin-top:var(--reactist-spacing-xlarge)}.b60a65cb>:not(:first-child){margin-top:var(--reactist-spacing-xxlarge)}@media (min-width:768px){.d808f5c3>:not(:first-child){margin-top:var(--reactist-spacing-xsmall)}.a51c76b3>:not(:first-child){margin-top:var(--reactist-spacing-small)}._7185a7aa>:not(:first-child){margin-top:var(--reactist-spacing-medium)}.af82e610>:not(:first-child){margin-top:var(--reactist-spacing-large)}._88b4ff46>:not(:first-child){margin-top:var(--reactist-spacing-xlarge)}._9de15321>:not(:first-child){margin-top:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._6fb32d20>:not(:first-child){margin-top:var(--reactist-spacing-xsmall)}._07ee315a>:not(:first-child){margin-top:var(--reactist-spacing-small)}.a270d7ec>:not(:first-child){margin-top:var(--reactist-spacing-medium)}.ea6ebb29>:not(:first-child){margin-top:var(--reactist-spacing-large)}._35b36178>:not(:first-child){margin-top:var(--reactist-spacing-xlarge)}._56c7dc23>:not(:first-child){margin-top:var(--reactist-spacing-xxlarge)}}