@doist/reactist 24.1.5-beta → 25.0.0-beta

package/es/modal/modal.js.map

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

package/es/password-field/password-field.js

@@ -1,6 +1,6 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, useState, createElement } from 'react';
-import { Button } from '../button/button.js';
+import { IconButton } from '../button/button.js';
 import { PasswordVisibleIcon } from '../icons/password-visible-icon.js';
 import { PasswordHiddenIcon } from '../icons/password-hidden-icon.js';
 import { TextField } from '../text-field/text-field.js';
@@ -18,7 +18,7 @@ const PasswordField = /*#__PURE__*/forwardRef(function PasswordField(_ref, ref)
     ref: ref,
     // @ts-expect-error TextField does not support type="password", so we override the type check here
     type: isPasswordVisible ? 'text' : 'password',
-    endSlot: /*#__PURE__*/createElement(Button, {
+    endSlot: /*#__PURE__*/createElement(IconButton, {
       variant: "quaternary",
       icon: /*#__PURE__*/createElement(Icon, {
         "aria-hidden": true

package/es/password-field/password-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"password-field.js","sources":["../../src/password-field/password-field.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { PasswordVisibleIcon } from '../icons/password-visible-icon'\nimport { PasswordHiddenIcon } from '../icons/password-hidden-icon'\n\nimport { TextField, TextFieldProps } from '../text-field'\nimport { Button } from '../button'\n\nimport type { BaseFieldVariantProps } from '../base-field'\n\n/**\n * FIXME: This is a workaround for consumers that are using newer versions of React types that no longer have these props.\n * Once we upgrade Reactist to the newest React types, we should be able to remove these.\n */\ntype DeprecatedProps = 'crossOrigin' | 'onPointerEnterCapture' | 'onPointerLeaveCapture'\n\ntype PasswordFieldProps = Omit<TextFieldProps, 'type' | 'startSlot' | 'endSlot' | DeprecatedProps> &\n    BaseFieldVariantProps & {\n        togglePasswordLabel?: string\n    }\n\nconst PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(function PasswordField(\n    { togglePasswordLabel = 'Toggle password visibility', ...props },\n    ref,\n) {\n    const [isPasswordVisible, setPasswordVisible] = React.useState(false)\n    const Icon = isPasswordVisible ? PasswordVisibleIcon : PasswordHiddenIcon\n    return (\n        <TextField\n            {...props}\n            ref={ref}\n            // @ts-expect-error TextField does not support type=\"password\", so we override the type check here\n            type={isPasswordVisible ? 'text' : 'password'}\n            endSlot={\n                <Button\n                    variant=\"quaternary\"\n                    icon={<Icon aria-hidden />}\n                    aria-label={togglePasswordLabel}\n                    onClick={() => setPasswordVisible((v) => !v)}\n                />\n            }\n        />\n    )\n})\n\nexport { PasswordField }\nexport type { PasswordFieldProps }\n"],"names":["PasswordField","React","ref","togglePasswordLabel","props","isPasswordVisible","setPasswordVisible","Icon","PasswordVisibleIcon","PasswordHiddenIcon","TextField","type","endSlot","Button","variant","icon","onClick","v"],"mappings":";;;;;;;;MAqBMA,aAAa,gBAAGC,UAAA,CAAuD,SAASD,aAAT,OAEzEE,GAFyE;MACzE;IAAEC,mBAAmB,GAAG;;MAAiCC;;EAGzD,MAAM,CAACC,iBAAD,EAAoBC,kBAApB,IAA0CL,QAAA,CAAe,KAAf,CAAhD;EACA,MAAMM,IAAI,GAAGF,iBAAiB,GAAGG,mBAAH,GAAyBC,kBAAvD;EACA,oBACIR,aAAA,CAACS,SAAD,oCACQN,KADR;IAEIF,GAAG,EAAEA,GAFT;;IAIIS,IAAI,EAAEN,iBAAiB,GAAG,MAAH,GAAY,UAJvC;IAKIO,OAAO,eACHX,aAAA,CAACY,MAAD;MACIC,OAAO,EAAC;MACRC,IAAI,eAAEd,aAAA,CAACM,IAAD;;OAAA;oBACMJ;MACZa,OAAO,EAAE,MAAMV,kBAAkB,CAAEW,CAAD,IAAO,CAACA,CAAT;KAJrC;KAPZ;AAgBH,CAtBqB;;;;"}
+{"version":3,"file":"password-field.js","sources":["../../src/password-field/password-field.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { PasswordVisibleIcon } from '../icons/password-visible-icon'\nimport { PasswordHiddenIcon } from '../icons/password-hidden-icon'\n\nimport { TextField, TextFieldProps } from '../text-field'\nimport { IconButton } from '../button'\n\nimport type { BaseFieldVariantProps } from '../base-field'\n\n/**\n * FIXME: This is a workaround for consumers that are using newer versions of React types that no longer have these props.\n * Once we upgrade Reactist to the newest React types, we should be able to remove these.\n */\ntype DeprecatedProps = 'crossOrigin' | 'onPointerEnterCapture' | 'onPointerLeaveCapture'\n\ntype PasswordFieldProps = Omit<TextFieldProps, 'type' | 'startSlot' | 'endSlot' | DeprecatedProps> &\n    BaseFieldVariantProps & {\n        togglePasswordLabel?: string\n    }\n\nconst PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(function PasswordField(\n    { togglePasswordLabel = 'Toggle password visibility', ...props },\n    ref,\n) {\n    const [isPasswordVisible, setPasswordVisible] = React.useState(false)\n    const Icon = isPasswordVisible ? PasswordVisibleIcon : PasswordHiddenIcon\n    return (\n        <TextField\n            {...props}\n            ref={ref}\n            // @ts-expect-error TextField does not support type=\"password\", so we override the type check here\n            type={isPasswordVisible ? 'text' : 'password'}\n            endSlot={\n                <IconButton\n                    variant=\"quaternary\"\n                    icon={<Icon aria-hidden />}\n                    aria-label={togglePasswordLabel}\n                    onClick={() => setPasswordVisible((v) => !v)}\n                />\n            }\n        />\n    )\n})\n\nexport { PasswordField }\nexport type { PasswordFieldProps }\n"],"names":["PasswordField","React","ref","togglePasswordLabel","props","isPasswordVisible","setPasswordVisible","Icon","PasswordVisibleIcon","PasswordHiddenIcon","TextField","type","endSlot","IconButton","variant","icon","onClick","v"],"mappings":";;;;;;;;MAqBMA,aAAa,gBAAGC,UAAA,CAAuD,SAASD,aAAT,OAEzEE,GAFyE;MACzE;IAAEC,mBAAmB,GAAG;;MAAiCC;;EAGzD,MAAM,CAACC,iBAAD,EAAoBC,kBAApB,IAA0CL,QAAA,CAAe,KAAf,CAAhD;EACA,MAAMM,IAAI,GAAGF,iBAAiB,GAAGG,mBAAH,GAAyBC,kBAAvD;EACA,oBACIR,aAAA,CAACS,SAAD,oCACQN,KADR;IAEIF,GAAG,EAAEA,GAFT;;IAIIS,IAAI,EAAEN,iBAAiB,GAAG,MAAH,GAAY,UAJvC;IAKIO,OAAO,eACHX,aAAA,CAACY,UAAD;MACIC,OAAO,EAAC;MACRC,IAAI,eAAEd,aAAA,CAACM,IAAD;;OAAA;oBACMJ;MACZa,OAAO,EAAE,MAAMV,kBAAkB,CAAEW,CAAD,IAAO,CAACA,CAAT;KAJrC;KAPZ;AAgBH,CAtBqB;;;;"}

package/es/toast/static-toast.js

@@ -2,7 +2,7 @@ import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _
 import React__default from 'react';
 import { Box } from '../box/box.js';
 import { Stack } from '../stack/stack.js';
-import { Button } from '../button/button.js';
+import { Button, IconButton } from '../button/button.js';
 import { CloseIcon } from '../icons/close-icon.js';
 import { Text } from '../text/text.js';
 import styles from './toast.module.css.js';
@@ -56,7 +56,7 @@ const StaticToast = /*#__PURE__*/React__default.forwardRef(function Toast(_ref,
     variant: "tertiary",
     size: "small",
     onClick: action.onClick
-  }, action.label) : action) : null, onDismiss ? /*#__PURE__*/React__default.createElement(ToastContentSlot, null, /*#__PURE__*/React__default.createElement(Button, {
+  }, action.label) : action) : null, onDismiss ? /*#__PURE__*/React__default.createElement(ToastContentSlot, null, /*#__PURE__*/React__default.createElement(IconButton, {
     variant: "quaternary",
     size: "small",
     onClick: onDismiss,

package/es/toast/static-toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"static-toast.js","sources":["../../src/toast/static-toast.tsx"],"sourcesContent":["import React from 'react'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Box } from '../box'\nimport { Button } from '../button'\nimport { Stack } from '../stack'\nimport { Text } from '../text'\n\nimport styles from './toast.module.css'\n\ntype ToastActionObject = {\n    label: string\n    onClick: () => void\n}\n\ntype StaticToastProps = {\n    /**\n     * The message shown in the toast.\n     */\n    message: NonNullable<React.ReactNode>\n\n    /**\n     * An optional extra description that complements the main message shown in the toast.\n     */\n    description?: React.ReactNode\n\n    /**\n     * An icon to be shown in front of the message.\n     */\n    icon?: React.ReactNode\n\n    /**\n     * The action to call when the user clicks on the dismiss button. If omitted, the dismiss button\n     * does not appear.\n     */\n    onDismiss?: () => void\n\n    /**\n     * The label for the button that dismisses the toast.\n     */\n    dismissLabel?: string\n\n    /**\n     * What to render in the action slot. Usually a button or link.\n     *\n     * You can also pass an object that containst the action label, and a function that performs the\n     * action. This is used by the toast component to render a button for you.\n     *\n     * In general, you should prefer the action object most of the time. But it is possible to pass\n     * a React element instead, if you need more control over what to render. For instance, you may\n     * want to render a link instead of a button.\n     *\n     * Keep in mind, though, that the default button rendered uses `variant=\"tertiary\"` and\n     * `size=\"small\"`. In most cases you should stick to the variants `tertiary` or `primary`, which\n     * are the ones that look better in the toast's dark background. And in all cases you should use\n     * size `small`.\n     */\n    action?: React.ReactElement | ToastActionObject\n}\n\n/**\n * A toast that shows a message, and an optional action associated with it.\n *\n * This component is generally not meant to be used directly. Most of the time you'll want to use\n * toasts generated via `useToasts` instead. However, this component is available in case you need\n * to take control of rendering a toast under different circumstances than that of notification-like\n * floating toasts.\n *\n * This component makes no assumptions outwardly about how it is positioned on the screen. That is,\n * it will not be shown floating or fixed to the viewport edges, as toasts normally show up. It only\n * provides the toast look and feel, but you are responsible for positioning it as you want.\n *\n * @see useToasts\n */\nconst StaticToast = React.forwardRef<HTMLDivElement, StaticToastProps>(function Toast(\n    { message, description, icon, action, onDismiss, dismissLabel = 'Close', ...props },\n    ref,\n) {\n    return (\n        <Box\n            ref={ref}\n            role=\"alert\"\n            aria-live=\"polite\"\n            borderRadius=\"full\"\n            width=\"fitContent\"\n            background=\"toast\"\n            display=\"flex\"\n            padding=\"large\"\n            alignItems=\"center\"\n            className={styles.toastContainer}\n            {...props}\n        >\n            {icon ? <ToastContentSlot>{icon}</ToastContentSlot> : null}\n\n            <Box flexGrow={1} maxWidth=\"small\">\n                {description ? (\n                    <Stack space=\"small\">\n                        <Text weight=\"bold\">{message} </Text>\n                        <Text>{description}</Text>\n                    </Stack>\n                ) : (\n                    <Text>{message}</Text>\n                )}\n            </Box>\n\n            {action ? (\n                <ToastContentSlot>\n                    {isActionObject(action) ? (\n                        <Button variant=\"tertiary\" size=\"small\" onClick={action.onClick}>\n                            {action.label}\n                        </Button>\n                    ) : (\n                        action\n                    )}\n                </ToastContentSlot>\n            ) : null}\n\n            {onDismiss ? (\n                <ToastContentSlot>\n                    <Button\n                        variant=\"quaternary\"\n                        size=\"small\"\n                        onClick={onDismiss}\n                        aria-label={dismissLabel}\n                        icon={<CloseIcon />}\n                    />\n                </ToastContentSlot>\n            ) : null}\n        </Box>\n    )\n})\n\nfunction isActionObject(action: StaticToastProps['action']): action is ToastActionObject {\n    return (\n        action != null &&\n        typeof action === 'object' &&\n        'label' in action &&\n        'onClick' in action &&\n        typeof action.label === 'string' &&\n        typeof action.onClick === 'function'\n    )\n}\n\nfunction ToastContentSlot({ children }: { children: React.ReactNode }) {\n    return (\n        <Box\n            display=\"flex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            marginX=\"-xsmall\"\n            marginY=\"-medium\"\n            className={styles.slot}\n        >\n            {children}\n        </Box>\n    )\n}\n\nexport { StaticToast, isActionObject }\nexport type { StaticToastProps }\n"],"names":["StaticToast","React","forwardRef","Toast","ref","message","description","icon","action","onDismiss","dismissLabel","props","Box","role","borderRadius","width","background","display","padding","alignItems","className","styles","toastContainer","ToastContentSlot","flexGrow","maxWidth","Stack","space","Text","weight","isActionObject","Button","variant","size","onClick","label","CloseIcon","children","justifyContent","marginX","marginY","slot"],"mappings":";;;;;;;;;;AA4DA;;;;;;;;;;;;;;;MAcMA,WAAW,gBAAGC,cAAK,CAACC,UAAN,CAAmD,SAASC,KAAT,OAEnEC,GAFmE;MACnE;IAAEC,OAAF;IAAWC,WAAX;IAAwBC,IAAxB;IAA8BC,MAA9B;IAAsCC,SAAtC;IAAiDC,YAAY,GAAG;;MAAYC;;EAG5E,oBACIV,4BAAA,CAACW,GAAD;IACIR,GAAG,EAAEA,GADT;IAEIS,IAAI,EAAC,OAFT;iBAGc,QAHd;IAIIC,YAAY,EAAC,MAJjB;IAKIC,KAAK,EAAC,YALV;IAMIC,UAAU,EAAC,OANf;IAOIC,OAAO,EAAC,MAPZ;IAQIC,OAAO,EAAC,OARZ;IASIC,UAAU,EAAC,QATf;IAUIC,SAAS,EAAEC,MAAM,CAACC;KACdX,KAXR,GAaKJ,IAAI,gBAAGN,4BAAA,CAACsB,gBAAD,MAAA,EAAmBhB,IAAnB,CAAH,GAAiD,IAb1D,eAeIN,4BAAA,CAACW,GAAD;IAAKY,QAAQ,EAAE;IAAGC,QAAQ,EAAC;GAA3B,EACKnB,WAAW,gBACRL,4BAAA,CAACyB,KAAD;IAAOC,KAAK,EAAC;GAAb,eACI1B,4BAAA,CAAC2B,IAAD;IAAMC,MAAM,EAAC;GAAb,EAAqBxB,OAArB,KAAA,CADJ,eAEIJ,4BAAA,CAAC2B,IAAD,MAAA,EAAOtB,WAAP,CAFJ,CADQ,gBAMRL,4BAAA,CAAC2B,IAAD,MAAA,EAAOvB,OAAP,CAPR,CAfJ,EA0BKG,MAAM,gBACHP,4BAAA,CAACsB,gBAAD,MAAA,EACKO,cAAc,CAACtB,MAAD,CAAd,gBACGP,4BAAA,CAAC8B,MAAD;IAAQC,OAAO,EAAC;IAAWC,IAAI,EAAC;IAAQC,OAAO,EAAE1B,MAAM,CAAC0B;GAAxD,EACK1B,MAAM,CAAC2B,KADZ,CADH,GAKG3B,MANR,CADG,GAUH,IApCR,EAsCKC,SAAS,gBACNR,4BAAA,CAACsB,gBAAD,MAAA,eACItB,4BAAA,CAAC8B,MAAD;IACIC,OAAO,EAAC;IACRC,IAAI,EAAC;IACLC,OAAO,EAAEzB;kBACGC;IACZH,IAAI,eAAEN,4BAAA,CAACmC,SAAD,MAAA;GALV,CADJ,CADM,GAUN,IAhDR,CADJ;AAoDH,CAxDmB;;AA0DpB,SAASN,cAAT,CAAwBtB,MAAxB;EACI,OACIA,MAAM,IAAI,IAAV,IACA,OAAOA,MAAP,KAAkB,QADlB,IAEA,WAAWA,MAFX,IAGA,aAAaA,MAHb,IAIA,OAAOA,MAAM,CAAC2B,KAAd,KAAwB,QAJxB,IAKA,OAAO3B,MAAM,CAAC0B,OAAd,KAA0B,UAN9B;AAQH;;AAED,SAASX,gBAAT,CAA0B;EAAEc;AAAF,CAA1B;EACI,oBACIpC,4BAAA,CAACW,GAAD;IACIK,OAAO,EAAC;IACRE,UAAU,EAAC;IACXmB,cAAc,EAAC;IACfC,OAAO,EAAC;IACRC,OAAO,EAAC;IACRpB,SAAS,EAAEC,MAAM,CAACoB;GANtB,EAQKJ,QARL,CADJ;AAYH;;;;"}
+{"version":3,"file":"static-toast.js","sources":["../../src/toast/static-toast.tsx"],"sourcesContent":["import React from 'react'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Box } from '../box'\nimport { IconButton, Button } from '../button'\nimport { Stack } from '../stack'\nimport { Text } from '../text'\n\nimport styles from './toast.module.css'\n\ntype ToastActionObject = {\n    label: string\n    onClick: () => void\n}\n\ntype StaticToastProps = {\n    /**\n     * The message shown in the toast.\n     */\n    message: NonNullable<React.ReactNode>\n\n    /**\n     * An optional extra description that complements the main message shown in the toast.\n     */\n    description?: React.ReactNode\n\n    /**\n     * An icon to be shown in front of the message.\n     */\n    icon?: React.ReactNode\n\n    /**\n     * The action to call when the user clicks on the dismiss button. If omitted, the dismiss button\n     * does not appear.\n     */\n    onDismiss?: () => void\n\n    /**\n     * The label for the button that dismisses the toast.\n     */\n    dismissLabel?: string\n\n    /**\n     * What to render in the action slot. Usually a button or link.\n     *\n     * You can also pass an object that containst the action label, and a function that performs the\n     * action. This is used by the toast component to render a button for you.\n     *\n     * In general, you should prefer the action object most of the time. But it is possible to pass\n     * a React element instead, if you need more control over what to render. For instance, you may\n     * want to render a link instead of a button.\n     *\n     * Keep in mind, though, that the default button rendered uses `variant=\"tertiary\"` and\n     * `size=\"small\"`. In most cases you should stick to the variants `tertiary` or `primary`, which\n     * are the ones that look better in the toast's dark background. And in all cases you should use\n     * size `small`.\n     */\n    action?: React.ReactElement | ToastActionObject\n}\n\n/**\n * A toast that shows a message, and an optional action associated with it.\n *\n * This component is generally not meant to be used directly. Most of the time you'll want to use\n * toasts generated via `useToasts` instead. However, this component is available in case you need\n * to take control of rendering a toast under different circumstances than that of notification-like\n * floating toasts.\n *\n * This component makes no assumptions outwardly about how it is positioned on the screen. That is,\n * it will not be shown floating or fixed to the viewport edges, as toasts normally show up. It only\n * provides the toast look and feel, but you are responsible for positioning it as you want.\n *\n * @see useToasts\n */\nconst StaticToast = React.forwardRef<HTMLDivElement, StaticToastProps>(function Toast(\n    { message, description, icon, action, onDismiss, dismissLabel = 'Close', ...props },\n    ref,\n) {\n    return (\n        <Box\n            ref={ref}\n            role=\"alert\"\n            aria-live=\"polite\"\n            borderRadius=\"full\"\n            width=\"fitContent\"\n            background=\"toast\"\n            display=\"flex\"\n            padding=\"large\"\n            alignItems=\"center\"\n            className={styles.toastContainer}\n            {...props}\n        >\n            {icon ? <ToastContentSlot>{icon}</ToastContentSlot> : null}\n\n            <Box flexGrow={1} maxWidth=\"small\">\n                {description ? (\n                    <Stack space=\"small\">\n                        <Text weight=\"bold\">{message} </Text>\n                        <Text>{description}</Text>\n                    </Stack>\n                ) : (\n                    <Text>{message}</Text>\n                )}\n            </Box>\n\n            {action ? (\n                <ToastContentSlot>\n                    {isActionObject(action) ? (\n                        <Button variant=\"tertiary\" size=\"small\" onClick={action.onClick}>\n                            {action.label}\n                        </Button>\n                    ) : (\n                        action\n                    )}\n                </ToastContentSlot>\n            ) : null}\n\n            {onDismiss ? (\n                <ToastContentSlot>\n                    <IconButton\n                        variant=\"quaternary\"\n                        size=\"small\"\n                        onClick={onDismiss}\n                        aria-label={dismissLabel}\n                        icon={<CloseIcon />}\n                    />\n                </ToastContentSlot>\n            ) : null}\n        </Box>\n    )\n})\n\nfunction isActionObject(action: StaticToastProps['action']): action is ToastActionObject {\n    return (\n        action != null &&\n        typeof action === 'object' &&\n        'label' in action &&\n        'onClick' in action &&\n        typeof action.label === 'string' &&\n        typeof action.onClick === 'function'\n    )\n}\n\nfunction ToastContentSlot({ children }: { children: React.ReactNode }) {\n    return (\n        <Box\n            display=\"flex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            marginX=\"-xsmall\"\n            marginY=\"-medium\"\n            className={styles.slot}\n        >\n            {children}\n        </Box>\n    )\n}\n\nexport { StaticToast, isActionObject }\nexport type { StaticToastProps }\n"],"names":["StaticToast","React","forwardRef","Toast","ref","message","description","icon","action","onDismiss","dismissLabel","props","Box","role","borderRadius","width","background","display","padding","alignItems","className","styles","toastContainer","ToastContentSlot","flexGrow","maxWidth","Stack","space","Text","weight","isActionObject","Button","variant","size","onClick","label","IconButton","CloseIcon","children","justifyContent","marginX","marginY","slot"],"mappings":";;;;;;;;;;AA4DA;;;;;;;;;;;;;;;MAcMA,WAAW,gBAAGC,cAAK,CAACC,UAAN,CAAmD,SAASC,KAAT,OAEnEC,GAFmE;MACnE;IAAEC,OAAF;IAAWC,WAAX;IAAwBC,IAAxB;IAA8BC,MAA9B;IAAsCC,SAAtC;IAAiDC,YAAY,GAAG;;MAAYC;;EAG5E,oBACIV,4BAAA,CAACW,GAAD;IACIR,GAAG,EAAEA,GADT;IAEIS,IAAI,EAAC,OAFT;iBAGc,QAHd;IAIIC,YAAY,EAAC,MAJjB;IAKIC,KAAK,EAAC,YALV;IAMIC,UAAU,EAAC,OANf;IAOIC,OAAO,EAAC,MAPZ;IAQIC,OAAO,EAAC,OARZ;IASIC,UAAU,EAAC,QATf;IAUIC,SAAS,EAAEC,MAAM,CAACC;KACdX,KAXR,GAaKJ,IAAI,gBAAGN,4BAAA,CAACsB,gBAAD,MAAA,EAAmBhB,IAAnB,CAAH,GAAiD,IAb1D,eAeIN,4BAAA,CAACW,GAAD;IAAKY,QAAQ,EAAE;IAAGC,QAAQ,EAAC;GAA3B,EACKnB,WAAW,gBACRL,4BAAA,CAACyB,KAAD;IAAOC,KAAK,EAAC;GAAb,eACI1B,4BAAA,CAAC2B,IAAD;IAAMC,MAAM,EAAC;GAAb,EAAqBxB,OAArB,KAAA,CADJ,eAEIJ,4BAAA,CAAC2B,IAAD,MAAA,EAAOtB,WAAP,CAFJ,CADQ,gBAMRL,4BAAA,CAAC2B,IAAD,MAAA,EAAOvB,OAAP,CAPR,CAfJ,EA0BKG,MAAM,gBACHP,4BAAA,CAACsB,gBAAD,MAAA,EACKO,cAAc,CAACtB,MAAD,CAAd,gBACGP,4BAAA,CAAC8B,MAAD;IAAQC,OAAO,EAAC;IAAWC,IAAI,EAAC;IAAQC,OAAO,EAAE1B,MAAM,CAAC0B;GAAxD,EACK1B,MAAM,CAAC2B,KADZ,CADH,GAKG3B,MANR,CADG,GAUH,IApCR,EAsCKC,SAAS,gBACNR,4BAAA,CAACsB,gBAAD,MAAA,eACItB,4BAAA,CAACmC,UAAD;IACIJ,OAAO,EAAC;IACRC,IAAI,EAAC;IACLC,OAAO,EAAEzB;kBACGC;IACZH,IAAI,eAAEN,4BAAA,CAACoC,SAAD,MAAA;GALV,CADJ,CADM,GAUN,IAhDR,CADJ;AAoDH,CAxDmB;;AA0DpB,SAASP,cAAT,CAAwBtB,MAAxB;EACI,OACIA,MAAM,IAAI,IAAV,IACA,OAAOA,MAAP,KAAkB,QADlB,IAEA,WAAWA,MAFX,IAGA,aAAaA,MAHb,IAIA,OAAOA,MAAM,CAAC2B,KAAd,KAAwB,QAJxB,IAKA,OAAO3B,MAAM,CAAC0B,OAAd,KAA0B,UAN9B;AAQH;;AAED,SAASX,gBAAT,CAA0B;EAAEe;AAAF,CAA1B;EACI,oBACIrC,4BAAA,CAACW,GAAD;IACIK,OAAO,EAAC;IACRE,UAAU,EAAC;IACXoB,cAAc,EAAC;IACfC,OAAO,EAAC;IACRC,OAAO,EAAC;IACRrB,SAAS,EAAEC,MAAM,CAACqB;GANtB,EAQKJ,QARL,CADJ;AAYH;;;;"}

package/es/utils/polymorphism.js.map

@@ -1 +1 @@
-{"version":3,"file":"polymorphism.js","sources":["../../src/utils/polymorphism.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport * as React from 'react'\n\ntype Merge<P1, P2> = Omit<P1, keyof P2> & P2\n\ntype EmptyObject = {\n    [K in any]: never\n}\n\ntype ObfuscateClassNameMode = 'keepClassName' | 'obfuscateClassName' | 'omitClassName'\n\ntype ObfuscatedClassName = {\n    /**\n     * Used internally to set the `className` prop of the main container element for this component.\n     *\n     * Aside from the different name, the prop behaves the same as the native `className`. The only\n     * reason for the name change is to discourage applying custom CSS to the design system\n     * components, which are supposed to _eventually_ provide all the styling features we may need.\n     *\n     * This prop is meant to be used only in certain circumstances, when you really need a escape\n     * hatch to apply custom styles to a component. Before reaching for this feature, try harder to\n     * see if you can solve your needs with what the design system provides.\n     *\n     * For instance, instead of applying layout-related styles to a non-layout component, consider\n     * wrapping it inside a layout component.\n     *\n     * @see PolymorphicComponent\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`\n * prop instead.\n *\n * This can be customized via the second generic parameter, as there are cases where it may be\n * needed to omit this behaviour and keep the `className`. You can also instruct it to remove the\n * `className` prop while not replacing it with the `exceptionallySetClassName` one.\n *\n * @see ObfuscatedClassName['exceptionallySetClassName'] for details about this prop\n * @see PolymorphicComponent for details about this feature\n */\ntype WithObfuscatedClassName<\n    Props,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode\n> = 'className' extends keyof Props\n    ? ShouldObfuscateClassName extends 'obfuscateClassName'\n        ? Omit<Props, 'className'> & ObfuscatedClassName\n        : ShouldObfuscateClassName extends 'omitClassName'\n        ? Omit<Props, 'className'>\n        : ShouldObfuscateClassName extends 'keepClassName'\n        ? Props\n        : never\n    : Props\n\ntype PolymorphicProp<ComponentType extends React.ElementType> = {\n    /**\n     * Used to instruct this component what React element to render as. It can be both a string\n     * representing a HTML tag name, or a React component.\n     *\n     * When using this prop, the component you apply it to will also recognize in its props types\n     * all the props from the component or HTML element you are rendering it as.\n     *\n     * Some uses for this feature:\n     *\n     * - Using some of our layout components, while at the same time being able to set them to use\n     *   semantic HTML elements needed for accessibility purposes (e.g. `nav`, `main`, etc).\n     * - Using a design system link component, but have it internally use a client-side router link\n     *   implemented via a React component (e.g. react-router's `Link`).\n     *\n     * Keep in mind that not all compositions of this kind may work well, especially when composing\n     * with another React component and not with a HTML tag name. In particular, if the components\n     * being composed have opposing concerns of clashing features (e.g. they have contradicting\n     * styles applied to them) things may not go well. In those cases prefer to nest them instead.\n     *\n     * @see PolymorphicComponent\n     */\n    as?: ComponentType\n}\n\n/**\n * Given a component or element type, and a set of additional props, this builds the entire set of\n * props for a polymorphic component.\n *\n * It does three things:\n *\n * 1. it merges the element type props with the `OwnProps`\n * 2. it adds the `as` prop to allow for polymorphism to happen\n * 3. it optionally obfuscates or omits the className prop if present\n *\n * @see PolymorphicProp\n * @see WithObfuscatedClassName\n */\ntype PolymorphicComponentProps<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode\n> = Merge<\n    WithObfuscatedClassName<React.ComponentProps<ComponentType>, ShouldObfuscateClassName>,\n    OwnProps & PolymorphicProp<ComponentType>\n>\n\ntype ElementTagNameMap = HTMLElementTagNameMap &\n    Pick<SVGElementTagNameMap, Exclude<keyof SVGElementTagNameMap, keyof HTMLElementTagNameMap>>\n\ntype ElementByTag<TagName extends keyof ElementTagNameMap> = ElementTagNameMap[TagName]\n\ntype ElementByTagOrAny<\n    ComponentType extends React.ElementType\n> = ComponentType extends keyof ElementTagNameMap ? ElementByTag<ComponentType> : any\n\n/**\n * The function passed to React.forwardRef, but typed in a way that's prepared for polymorphism via\n * the `as` prop. It also allows to specify if the `className` prop should be obfuscated or omitted.\n *\n * @see PolymorphicComponentProps\n * @see WithObfuscatedClassName\n */\ninterface ForwardRefFunction<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode\n> {\n    (\n        props: PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>,\n        ref:\n            | ((instance: ElementByTagOrAny<ComponentType> | null) => void)\n            | React.MutableRefObject<ElementByTagOrAny<ComponentType> | null>\n            | null,\n    ): React.ReactElement | null\n    displayName?: string\n}\n\n/**\n * A component that can customize the React element type that it renders (a.k.a. a polymorphic\n * component). This is achieved by passing a prop `as={ElementType}` or `as=\"html-tag-name\"`.\n *\n * It transparently takes care of forwarding refs, and properly sets the ref type depending on the\n * element type.\n *\n * ## Recognizing props based on the polymorphic type\n *\n * The `ComponentType` argument sets the default type for the `as` prop. Whatever the `as` prop\n * component or HTML element is, the type system will automatically allow you to pass props that are\n * not explicitly defined by you, but that are recognized as valid props to be passed to the\n * component you are rendering.\n *\n * For instance, see the following example:\n *\n * ```jsx\n * <Box as=\"label\" htmlFor=\"field-id\">Hello</Box>\n * ```\n *\n * The `htmlFor` prop is exclusive to label elements. If you omit the `as=\"label\"` prop, the type\n * system will consider the `htmlFor` prop to be an error. The same happens if you pass a value of\n * an incorrect type to such prop. For instance, the example below will issue a type error:\n *\n * ```jsx\n * <Box as=\"label\" htmlFor={123}>Hello</Box>\n * ```\n *\n * ## Omitting or obfuscating the `className` prop\n *\n * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`\n * prop instead.\n *\n * This is to discourage customizing design system components via custom styling, while still\n * leaving the door open to do it as an escape hatch when the design system still has shortcomings\n * with respect to the product designs we want to achieve.\n *\n * The cumbersome name also serves the purpose of aiding in easily searching for the places in the\n * code where this escape hatch was needed, in order to identify areas where the design system\n * components need to improve to better match our needs.\n *\n * This behaviour can be customized via an optional second generic argument that allows to disable\n * this feature, or to omit the `className` altogether without replacing it with the obfuscated prop\n * name.\n */\ninterface PolymorphicComponent<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName'\n> {\n    <TT extends React.ElementType = ComponentType>(\n        props: PolymorphicComponentProps<TT, OwnProps, ShouldObfuscateClassName>,\n    ): React.ReactElement | null\n    readonly $$typeof: symbol\n    defaultProps?: Partial<\n        PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>\n    >\n    propTypes?: React.WeakValidationMap<\n        PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>\n    >\n    displayName?: string\n}\n\n/**\n * A wrapper to use React.forwardRef with polymorphic components in a type-safe manner. This is a\n * convenience over merely using React.forwardRef directly, and then manually forcing the resulting\n * value to be typed using `as PolymorphicComponent<…>`.\n *\n * @see PolymorphicComponent for details about what this type does\n */\nfunction polymorphicComponent<\n    ComponentType extends React.ElementType = 'div',\n    OwnProps = EmptyObject,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName'\n>(render: ForwardRefFunction<ComponentType, OwnProps, ShouldObfuscateClassName>) {\n    return React.forwardRef(render) as PolymorphicComponent<\n        ComponentType,\n        OwnProps,\n        ShouldObfuscateClassName\n    >\n}\n\nexport type { PolymorphicComponent, ObfuscatedClassName }\nexport { polymorphicComponent }\n"],"names":["polymorphicComponent","render","React"],"mappings":";;AAAA;AAqMA;;;;;;;;AAOA,SAASA,oBAAT,CAIEC,MAJF;EAKI,oBAAOC,UAAA,CAAiBD,MAAjB,CAAP;AAKH;;;;"}
+{"version":3,"file":"polymorphism.js","sources":["../../src/utils/polymorphism.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport * as React from 'react'\nimport type { ObfuscatedClassName } from './common-types'\n\ntype Merge<P1, P2> = Omit<P1, keyof P2> & P2\n\ntype EmptyObject = {\n    [K in any]: never\n}\n\ntype ObfuscateClassNameMode = 'keepClassName' | 'obfuscateClassName' | 'omitClassName'\n\n/**\n * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`\n * prop instead.\n *\n * This can be customized via the second generic parameter, as there are cases where it may be\n * needed to omit this behaviour and keep the `className`. You can also instruct it to remove the\n * `className` prop while not replacing it with the `exceptionallySetClassName` one.\n *\n * @see ObfuscatedClassName['exceptionallySetClassName'] for details about this prop\n * @see PolymorphicComponent for details about this feature\n */\ntype WithObfuscatedClassName<\n    Props,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode\n> = 'className' extends keyof Props\n    ? ShouldObfuscateClassName extends 'obfuscateClassName'\n        ? Omit<Props, 'className'> & ObfuscatedClassName\n        : ShouldObfuscateClassName extends 'omitClassName'\n        ? Omit<Props, 'className'>\n        : ShouldObfuscateClassName extends 'keepClassName'\n        ? Props\n        : never\n    : Props\n\ntype PolymorphicProp<ComponentType extends React.ElementType> = {\n    /**\n     * Used to instruct this component what React element to render as. It can be both a string\n     * representing a HTML tag name, or a React component.\n     *\n     * When using this prop, the component you apply it to will also recognize in its props types\n     * all the props from the component or HTML element you are rendering it as.\n     *\n     * Some uses for this feature:\n     *\n     * - Using some of our layout components, while at the same time being able to set them to use\n     *   semantic HTML elements needed for accessibility purposes (e.g. `nav`, `main`, etc).\n     * - Using a design system link component, but have it internally use a client-side router link\n     *   implemented via a React component (e.g. react-router's `Link`).\n     *\n     * Keep in mind that not all compositions of this kind may work well, especially when composing\n     * with another React component and not with a HTML tag name. In particular, if the components\n     * being composed have opposing concerns of clashing features (e.g. they have contradicting\n     * styles applied to them) things may not go well. In those cases prefer to nest them instead.\n     *\n     * @see PolymorphicComponent\n     */\n    as?: ComponentType\n}\n\n/**\n * Given a component or element type, and a set of additional props, this builds the entire set of\n * props for a polymorphic component.\n *\n * It does three things:\n *\n * 1. it merges the element type props with the `OwnProps`\n * 2. it adds the `as` prop to allow for polymorphism to happen\n * 3. it optionally obfuscates or omits the className prop if present\n *\n * @see PolymorphicProp\n * @see WithObfuscatedClassName\n */\ntype PolymorphicComponentProps<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode\n> = Merge<\n    WithObfuscatedClassName<React.ComponentProps<ComponentType>, ShouldObfuscateClassName>,\n    OwnProps & PolymorphicProp<ComponentType>\n>\n\ntype ElementTagNameMap = HTMLElementTagNameMap &\n    Pick<SVGElementTagNameMap, Exclude<keyof SVGElementTagNameMap, keyof HTMLElementTagNameMap>>\n\ntype ElementByTag<TagName extends keyof ElementTagNameMap> = ElementTagNameMap[TagName]\n\ntype ElementByTagOrAny<\n    ComponentType extends React.ElementType\n> = ComponentType extends keyof ElementTagNameMap ? ElementByTag<ComponentType> : any\n\n/**\n * The function passed to React.forwardRef, but typed in a way that's prepared for polymorphism via\n * the `as` prop. It also allows to specify if the `className` prop should be obfuscated or omitted.\n *\n * @see PolymorphicComponentProps\n * @see WithObfuscatedClassName\n */\ninterface ForwardRefFunction<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode\n> {\n    (\n        props: PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>,\n        ref:\n            | ((instance: ElementByTagOrAny<ComponentType> | null) => void)\n            | React.MutableRefObject<ElementByTagOrAny<ComponentType> | null>\n            | null,\n    ): React.ReactElement | null\n    displayName?: string\n}\n\n/**\n * A component that can customize the React element type that it renders (a.k.a. a polymorphic\n * component). This is achieved by passing a prop `as={ElementType}` or `as=\"html-tag-name\"`.\n *\n * It transparently takes care of forwarding refs, and properly sets the ref type depending on the\n * element type.\n *\n * ## Recognizing props based on the polymorphic type\n *\n * The `ComponentType` argument sets the default type for the `as` prop. Whatever the `as` prop\n * component or HTML element is, the type system will automatically allow you to pass props that are\n * not explicitly defined by you, but that are recognized as valid props to be passed to the\n * component you are rendering.\n *\n * For instance, see the following example:\n *\n * ```jsx\n * <Box as=\"label\" htmlFor=\"field-id\">Hello</Box>\n * ```\n *\n * The `htmlFor` prop is exclusive to label elements. If you omit the `as=\"label\"` prop, the type\n * system will consider the `htmlFor` prop to be an error. The same happens if you pass a value of\n * an incorrect type to such prop. For instance, the example below will issue a type error:\n *\n * ```jsx\n * <Box as=\"label\" htmlFor={123}>Hello</Box>\n * ```\n *\n * ## Omitting or obfuscating the `className` prop\n *\n * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`\n * prop instead.\n *\n * This is to discourage customizing design system components via custom styling, while still\n * leaving the door open to do it as an escape hatch when the design system still has shortcomings\n * with respect to the product designs we want to achieve.\n *\n * The cumbersome name also serves the purpose of aiding in easily searching for the places in the\n * code where this escape hatch was needed, in order to identify areas where the design system\n * components need to improve to better match our needs.\n *\n * This behaviour can be customized via an optional second generic argument that allows to disable\n * this feature, or to omit the `className` altogether without replacing it with the obfuscated prop\n * name.\n */\ninterface PolymorphicComponent<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName'\n> {\n    <TT extends React.ElementType = ComponentType>(\n        props: PolymorphicComponentProps<TT, OwnProps, ShouldObfuscateClassName>,\n    ): React.ReactElement | null\n    readonly $$typeof: symbol\n    defaultProps?: Partial<\n        PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>\n    >\n    propTypes?: React.WeakValidationMap<\n        PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>\n    >\n    displayName?: string\n}\n\n/**\n * A wrapper to use React.forwardRef with polymorphic components in a type-safe manner. This is a\n * convenience over merely using React.forwardRef directly, and then manually forcing the resulting\n * value to be typed using `as PolymorphicComponent<…>`.\n *\n * @see PolymorphicComponent for details about what this type does\n */\nfunction polymorphicComponent<\n    ComponentType extends React.ElementType = 'div',\n    OwnProps = EmptyObject,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName'\n>(render: ForwardRefFunction<ComponentType, OwnProps, ShouldObfuscateClassName>) {\n    return React.forwardRef(render) as PolymorphicComponent<\n        ComponentType,\n        OwnProps,\n        ShouldObfuscateClassName\n    >\n}\n\nexport type { PolymorphicComponent, ObfuscatedClassName }\nexport { polymorphicComponent }\n"],"names":["polymorphicComponent","render","React"],"mappings":";;AAAA;AAkLA;;;;;;;;AAOA,SAASA,oBAAT,CAIEC,MAJF;EAKI,oBAAOC,UAAA,CAAiBD,MAAjB,CAAP;AAKH;;;;"}

package/lib/badge/badge.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type BadgeTone = 'info' | 'positive' | 'promote' | 'attention';
+declare type BadgeTone = 'info' | 'positive' | 'promote' | 'attention' | 'warning';
 declare type BadgeProps = {
     /**
      * The label to show inside the badge element.

package/lib/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sources":["../../src/badge/badge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Box } from '../box'\n\nimport styles from './badge.module.css'\n\ntype BadgeTone = 'info' | 'positive' | 'promote' | 'attention'\n\ntype BadgeProps = {\n    /**\n     * The label to show inside the badge element.\n     */\n    label: string\n    /**\n     * The tone of the badge.\n     */\n    tone: BadgeTone\n}\n\nfunction Badge({ tone, label, ...props }: BadgeProps) {\n    return (\n        <Box\n            {...props}\n            as=\"span\" // It enables putting the badge inside a button (https://stackoverflow.com/a/12982334)\n            display=\"inline\"\n            className={[styles.badge, styles[`badge-${tone}`]]}\n        >\n            {label}\n        </Box>\n    )\n}\n\nexport { Badge }\nexport type { BadgeProps }\n"],"names":["tone","label","props","React","Box","as","display","className","styles","badge"],"mappings":"sPAmBA,gBAAeA,KAAEA,EAAFC,MAAQA,KAAUC,iCAC7B,OACIC,gBAACC,yCACOF,OACJG,GAAG,OACHC,QAAQ,SACRC,UAAW,CAACC,UAAOC,MAAOD,mBAAgBR,MAEzCC"}
+{"version":3,"file":"badge.js","sources":["../../src/badge/badge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Box } from '../box'\n\nimport styles from './badge.module.css'\n\ntype BadgeTone = 'info' | 'positive' | 'promote' | 'attention' | 'warning'\n\ntype BadgeProps = {\n    /**\n     * The label to show inside the badge element.\n     */\n    label: string\n    /**\n     * The tone of the badge.\n     */\n    tone: BadgeTone\n}\n\nfunction Badge({ tone, label, ...props }: BadgeProps) {\n    return (\n        <Box\n            {...props}\n            as=\"span\" // It enables putting the badge inside a button (https://stackoverflow.com/a/12982334)\n            display=\"inline\"\n            className={[styles.badge, styles[`badge-${tone}`]]}\n        >\n            {label}\n        </Box>\n    )\n}\n\nexport { Badge }\nexport type { BadgeProps }\n"],"names":["tone","label","props","React","Box","as","display","className","styles","badge"],"mappings":"sPAmBA,gBAAeA,KAAEA,EAAFC,MAAQA,KAAUC,iCAC7B,OACIC,gBAACC,yCACOF,OACJG,GAAG,OACHC,QAAQ,SACRC,UAAW,CAACC,UAAOC,MAAOD,mBAAgBR,MAEzCC"}

package/lib/badge/badge.module.css.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={badge:"_0a7f0497","badge-info":"_0587142f","badge-positive":"_6f5c326e","badge-promote":"_949e0f54","badge-attention":"_36115518"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={badge:"c6ba5977","badge-info":"cf731337","badge-positive":"_7cfc5738","badge-promote":"_63691069","badge-attention":"_28ffb572","badge-warning":"_89e77f92"};
 //# sourceMappingURL=badge.module.css.js.map

package/lib/box/box.d.ts

@@ -58,6 +58,7 @@ interface BoxProps extends WithEnhancedClassName, ReusableBoxProps, BoxMarginPro
     height?: 'full';
     textAlign?: ResponsiveProp<BoxTextAlign>;
 }
+declare function getBoxClassNames({ position, display, flexDirection, flexWrap, flexGrow, flexShrink, gap, alignItems, justifyContent, alignSelf, overflow, width, height, background, border, borderRadius, minWidth, maxWidth, textAlign, padding, paddingY, paddingX, paddingTop, paddingRight, paddingBottom, paddingLeft, margin, marginY, marginX, marginTop, marginRight, marginBottom, marginLeft, className, }: BoxProps): string;
 declare const Box: import("../utils/polymorphism").PolymorphicComponent<"div", BoxProps, "keepClassName">;
 export type { BoxProps, BoxPaddingProps, BoxMarginProps, ReusableBoxProps, BoxMinWidth, BoxMaxWidth, BoxDisplay, BoxPosition, BoxFlexDirection, BoxFlexWrap, BoxAlignItems, BoxJustifyContent, BoxOverflow, BoxTextAlign, BoxBackground, BoxBorderRadius, };
-export { Box };
+export { Box, getBoxClassNames };

package/lib/box/box.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 l=require("../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),t=(e(a),e(require("classnames"))),s=require("../utils/polymorphism.js"),n=require("../utils/responsive-props.js"),i=require("./box.module.css.js"),d=require("./padding.module.css.js"),r=require("./margin.module.css.js"),u=require("./width.module.css.js"),g=require("./gap.module.css.js");const o=["as","position","display","flexDirection","flexWrap","flexGrow","flexShrink","gap","alignItems","justifyContent","alignSelf","overflow","width","height","background","border","borderRadius","minWidth","maxWidth","textAlign","padding","paddingY","paddingX","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginY","marginX","marginTop","marginRight","marginBottom","marginLeft","className","children"];exports.Box=s.polymorphicComponent((function(e,s){var m,f,p,c,C,h,N,x;let{as:b="div",position:j="static",display:S,flexDirection:w="row",flexWrap:y,flexGrow:q,flexShrink:v,gap:W,alignItems:R,justifyContent:B,alignSelf:L,overflow:T,width:k,height:X,background:Y,border:_,borderRadius:A,minWidth:D,maxWidth:G,textAlign:I,padding:P,paddingY:E,paddingX:F,paddingTop:H,paddingRight:M,paddingBottom:O,paddingLeft:z,margin:J,marginY:K,marginX:Q,marginTop:U,marginRight:V,marginBottom:Z,marginLeft:$,className:ee,children:le}=e,ae=l.objectWithoutProperties(e,o);const te=null!=(m=null!=H?H:E)?m:P,se=null!=(f=null!=M?M:F)?f:P,ne=null!=(p=null!=O?O:E)?p:P,ie=null!=(c=null!=z?z:F)?c:P,de=null!=(C=null!=U?U:K)?C:J,re=null!=(h=null!=V?V:Q)?h:J,ue=null!=(N=null!=Z?Z:K)?N:J,ge=null!=(x=null!=$?$:Q)?x:J,oe=!S||"string"==typeof S&&"flex"!==S&&"inlineFlex"!==S;return a.createElement(b,l.objectSpread2(l.objectSpread2({},ae),{},{className:t(ee,i.default.box,S?n.getClassNames(i.default,"display",S):null,"static"!==j?n.getClassNames(i.default,"position",j):null,null!=D?n.getClassNames(u.default,"minWidth",String(D)):null,n.getClassNames(u.default,"maxWidth",G),n.getClassNames(i.default,"textAlign",I),n.getClassNames(d.default,"paddingTop",te),n.getClassNames(d.default,"paddingRight",se),n.getClassNames(d.default,"paddingBottom",ne),n.getClassNames(d.default,"paddingLeft",ie),n.getClassNames(r.default,"marginTop",de),n.getClassNames(r.default,"marginRight",re),n.getClassNames(r.default,"marginBottom",ue),n.getClassNames(r.default,"marginLeft",ge),oe?null:n.getClassNames(i.default,"flexDirection",w),oe?null:n.getClassNames(i.default,"flexWrap",y),oe?null:n.getClassNames(i.default,"alignItems",R),oe?null:n.getClassNames(i.default,"justifyContent",B),null!=L?n.getClassNames(i.default,"alignSelf",L):null,null!=v?n.getClassNames(i.default,"flexShrink",String(v)):null,null!=q?n.getClassNames(i.default,"flexGrow",String(q)):null,W?n.getClassNames(g.default,"gap",W):null,n.getClassNames(i.default,"overflow",T),null!=k?n.getClassNames(u.default,"width",String(k)):null,n.getClassNames(i.default,"height",X),n.getClassNames(i.default,"bg",Y),"none"!==A?n.getClassNames(i.default,"borderRadius",A):null,"none"!==_?n.getClassNames(i.default,"border",_):null)||void 0,ref:s}),le)}));
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var a=require("../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),t=(e(l),e(require("classnames"))),i=require("../utils/polymorphism.js"),n=require("../utils/responsive-props.js"),s=require("./box.module.css.js"),d=require("./padding.module.css.js"),g=require("./margin.module.css.js"),r=require("./width.module.css.js"),o=require("./gap.module.css.js");const u=["as","position","display","flexDirection","flexWrap","flexGrow","flexShrink","gap","alignItems","justifyContent","alignSelf","overflow","width","height","background","border","borderRadius","minWidth","maxWidth","textAlign","padding","paddingY","paddingX","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginY","marginX","marginTop","marginRight","marginBottom","marginLeft","className","children"];function m({position:e="static",display:a,flexDirection:l="row",flexWrap:i,flexGrow:u,flexShrink:m,gap:f,alignItems:p,justifyContent:h,alignSelf:c,overflow:x,width:C,height:N,background:b,border:j,borderRadius:w,minWidth:S,maxWidth:W,textAlign:y,padding:R,paddingY:B,paddingX:v,paddingTop:q,paddingRight:L,paddingBottom:T,paddingLeft:k,margin:X,marginY:Y,marginX:A,marginTop:D,marginRight:G,marginBottom:I,marginLeft:_,className:P}){var E,F,H,M,O,z,J,K;const Q=null!=(E=null!=q?q:B)?E:R,U=null!=(F=null!=L?L:v)?F:R,V=null!=(H=null!=T?T:B)?H:R,Z=null!=(M=null!=k?k:v)?M:R,$=null!=(O=null!=D?D:Y)?O:X,ee=null!=(z=null!=G?G:A)?z:X,ae=null!=(J=null!=I?I:Y)?J:X,le=null!=(K=null!=_?_:A)?K:X,te=!a||"string"==typeof a&&"flex"!==a&&"inlineFlex"!==a;return t(P,s.default.box,a?n.getClassNames(s.default,"display",a):null,"static"!==e?n.getClassNames(s.default,"position",e):null,null!=S?n.getClassNames(r.default,"minWidth",String(S)):null,n.getClassNames(r.default,"maxWidth",W),n.getClassNames(s.default,"textAlign",y),n.getClassNames(d.default,"paddingTop",Q),n.getClassNames(d.default,"paddingRight",U),n.getClassNames(d.default,"paddingBottom",V),n.getClassNames(d.default,"paddingLeft",Z),n.getClassNames(g.default,"marginTop",$),n.getClassNames(g.default,"marginRight",ee),n.getClassNames(g.default,"marginBottom",ae),n.getClassNames(g.default,"marginLeft",le),te?null:n.getClassNames(s.default,"flexDirection",l),te?null:n.getClassNames(s.default,"flexWrap",i),te?null:n.getClassNames(s.default,"alignItems",p),te?null:n.getClassNames(s.default,"justifyContent",h),null!=c?n.getClassNames(s.default,"alignSelf",c):null,null!=m?n.getClassNames(s.default,"flexShrink",String(m)):null,null!=u?n.getClassNames(s.default,"flexGrow",String(u)):null,f?n.getClassNames(o.default,"gap",f):null,n.getClassNames(s.default,"overflow",x),null!=C?n.getClassNames(r.default,"width",String(C)):null,n.getClassNames(s.default,"height",N),n.getClassNames(s.default,"bg",b),"none"!==w?n.getClassNames(s.default,"borderRadius",w):null,"none"!==j?n.getClassNames(s.default,"border",j):null)}exports.Box=i.polymorphicComponent((function(e,t){let{as:i="div",position:n="static",display:s,flexDirection:d="row",flexWrap:g,flexGrow:r,flexShrink:o,gap:f,alignItems:p,justifyContent:h,alignSelf:c,overflow:x,width:C,height:N,background:b,border:j,borderRadius:w,minWidth:S,maxWidth:W,textAlign:y,padding:R,paddingY:B,paddingX:v,paddingTop:q,paddingRight:L,paddingBottom:T,paddingLeft:k,margin:X,marginY:Y,marginX:A,marginTop:D,marginRight:G,marginBottom:I,marginLeft:_,className:P,children:E}=e,F=a.objectWithoutProperties(e,u);return l.createElement(i,a.objectSpread2(a.objectSpread2({},F),{},{className:m({position:n,display:s,flexDirection:d,flexWrap:g,flexGrow:r,flexShrink:o,gap:f,alignItems:p,justifyContent:h,alignSelf:c,overflow:x,width:C,height:N,background:b,border:j,borderRadius:w,minWidth:S,maxWidth:W,textAlign:y,padding:R,paddingY:B,paddingX:v,paddingTop:q,paddingRight:L,paddingBottom:T,paddingLeft:k,margin:X,marginY:Y,marginX:A,marginTop:D,marginRight:G,marginBottom:I,marginLeft:_,className:P}),ref:t}),E)})),exports.getBoxClassNames=m;
 //# sourceMappingURL=box.js.map

package/lib/box/box.js.map

@@ -1 +1 @@
-{"version":3,"file":"box.js","sources":["../../src/box/box.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { polymorphicComponent } from '../utils/polymorphism'\nimport { getClassNames } from '../utils/responsive-props'\n\nimport type { ResponsiveProp } from '../utils/responsive-props'\nimport type {\n    DividerWeight,\n    Space,\n    SpaceWithNegatives,\n    WithEnhancedClassName,\n} from '../utils/common-types'\n\nimport styles from './box.module.css'\nimport paddingStyles from './padding.module.css'\nimport marginStyles from './margin.module.css'\nimport widthStyles from './width.module.css'\nimport gapStyles from './gap.module.css'\n\ninterface BoxPaddingProps {\n    padding?: ResponsiveProp<Space>\n    paddingX?: ResponsiveProp<Space>\n    paddingY?: ResponsiveProp<Space>\n    paddingTop?: ResponsiveProp<Space>\n    paddingRight?: ResponsiveProp<Space>\n    paddingBottom?: ResponsiveProp<Space>\n    paddingLeft?: ResponsiveProp<Space>\n}\n\ninterface BoxMarginProps {\n    margin?: ResponsiveProp<SpaceWithNegatives>\n    marginX?: ResponsiveProp<SpaceWithNegatives>\n    marginY?: ResponsiveProp<SpaceWithNegatives>\n    marginTop?: ResponsiveProp<SpaceWithNegatives>\n    marginRight?: ResponsiveProp<SpaceWithNegatives>\n    marginBottom?: ResponsiveProp<SpaceWithNegatives>\n    marginLeft?: ResponsiveProp<SpaceWithNegatives>\n}\n\ntype BoxDisplay = 'block' | 'flex' | 'inline' | 'inlineBlock' | 'inlineFlex' | 'none'\ntype BoxFlexDirection = 'column' | 'row'\ntype BoxFlexWrap = 'nowrap' | 'wrap'\ntype BoxAlignItems = 'center' | 'flexEnd' | 'flexStart' | 'baseline'\ntype BoxJustifyContent =\n    | 'center'\n    | 'flexEnd'\n    | 'flexStart'\n    | 'spaceAround'\n    | 'spaceBetween'\n    | 'spaceEvenly'\ntype BoxAlignSelf = 'flexStart' | 'flexEnd' | 'center' | 'baseline' | 'stretch'\ntype BoxOverflow = 'hidden' | 'auto' | 'visible' | 'scroll'\n\ntype BoxMaxMinWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'\ntype BoxMinWidth = 0 | BoxMaxMinWidth\ntype BoxMaxWidth = BoxMaxMinWidth | 'full'\ntype BoxWidth = 0 | BoxMaxMinWidth | 'full' | 'auto' | 'maxContent' | 'minContent' | 'fitContent'\ntype BoxBackground = 'default' | 'aside' | 'highlight' | 'selected' | 'toast'\ntype BoxBorderRadius = 'standard' | 'none' | 'full'\n\ninterface BorderProps {\n    borderRadius?: BoxBorderRadius\n    border?: DividerWeight\n}\n\ninterface ReusableBoxProps extends BorderProps, BoxPaddingProps {\n    minWidth?: BoxMinWidth\n    maxWidth?: BoxMaxWidth\n    width?: BoxWidth\n    background?: BoxBackground\n    flexGrow?: 0 | 1\n    flexShrink?: 0\n}\n\ntype BoxPosition = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky'\ntype BoxTextAlign = 'start' | 'center' | 'end' | 'justify'\n\ninterface BoxProps extends WithEnhancedClassName, ReusableBoxProps, BoxMarginProps {\n    position?: ResponsiveProp<BoxPosition>\n    display?: ResponsiveProp<BoxDisplay>\n    flexDirection?: ResponsiveProp<BoxFlexDirection>\n    flexWrap?: BoxFlexWrap\n    gap?: ResponsiveProp<Space | 'none'>\n    alignItems?: ResponsiveProp<BoxAlignItems>\n    alignSelf?: ResponsiveProp<BoxAlignSelf>\n    justifyContent?: ResponsiveProp<BoxJustifyContent>\n    overflow?: BoxOverflow\n    height?: 'full'\n    textAlign?: ResponsiveProp<BoxTextAlign>\n}\n\nconst Box = polymorphicComponent<'div', BoxProps, 'keepClassName'>(function Box(\n    {\n        as: component = 'div',\n        position = 'static',\n        display,\n        flexDirection = 'row',\n        flexWrap,\n        flexGrow,\n        flexShrink,\n        gap,\n        alignItems,\n        justifyContent,\n        alignSelf,\n        overflow,\n        width,\n        height,\n        background,\n        border,\n        borderRadius,\n        minWidth,\n        maxWidth,\n        textAlign,\n        padding,\n        paddingY,\n        paddingX,\n        paddingTop,\n        paddingRight,\n        paddingBottom,\n        paddingLeft,\n        margin,\n        marginY,\n        marginX,\n        marginTop,\n        marginRight,\n        marginBottom,\n        marginLeft,\n        className,\n        children,\n        ...props\n    },\n    ref,\n) {\n    const resolvedPaddingTop = paddingTop ?? paddingY ?? padding\n    const resolvedPaddingRight = paddingRight ?? paddingX ?? padding\n    const resolvedPaddingBottom = paddingBottom ?? paddingY ?? padding\n    const resolvedPaddingLeft = paddingLeft ?? paddingX ?? padding\n\n    const resolvedMarginTop = marginTop ?? marginY ?? margin\n    const resolvedMarginRight = marginRight ?? marginX ?? margin\n    const resolvedMarginBottom = marginBottom ?? marginY ?? margin\n    const resolvedMarginLeft = marginLeft ?? marginX ?? margin\n\n    const omitFlex =\n        !display || (typeof display === 'string' && display !== 'flex' && display !== 'inlineFlex')\n\n    return React.createElement(\n        component,\n        {\n            ...props,\n            className:\n                classNames(\n                    className,\n                    styles.box,\n                    display ? getClassNames(styles, 'display', display) : null,\n                    position !== 'static' ? getClassNames(styles, 'position', position) : null,\n                    minWidth != null\n                        ? getClassNames(widthStyles, 'minWidth', String(minWidth))\n                        : null,\n                    getClassNames(widthStyles, 'maxWidth', maxWidth),\n                    getClassNames(styles, 'textAlign', textAlign),\n                    // padding\n                    getClassNames(paddingStyles, 'paddingTop', resolvedPaddingTop),\n                    getClassNames(paddingStyles, 'paddingRight', resolvedPaddingRight),\n                    getClassNames(paddingStyles, 'paddingBottom', resolvedPaddingBottom),\n                    getClassNames(paddingStyles, 'paddingLeft', resolvedPaddingLeft),\n                    // margin\n                    getClassNames(marginStyles, 'marginTop', resolvedMarginTop),\n                    getClassNames(marginStyles, 'marginRight', resolvedMarginRight),\n                    getClassNames(marginStyles, 'marginBottom', resolvedMarginBottom),\n                    getClassNames(marginStyles, 'marginLeft', resolvedMarginLeft),\n                    // flex props\n                    omitFlex ? null : getClassNames(styles, 'flexDirection', flexDirection),\n                    omitFlex ? null : getClassNames(styles, 'flexWrap', flexWrap),\n                    omitFlex ? null : getClassNames(styles, 'alignItems', alignItems),\n                    omitFlex ? null : getClassNames(styles, 'justifyContent', justifyContent),\n                    alignSelf != null ? getClassNames(styles, 'alignSelf', alignSelf) : null,\n                    flexShrink != null\n                        ? getClassNames(styles, 'flexShrink', String(flexShrink))\n                        : null,\n                    flexGrow != null ? getClassNames(styles, 'flexGrow', String(flexGrow)) : null,\n                    gap ? getClassNames(gapStyles, 'gap', gap) : null,\n                    // other props\n                    getClassNames(styles, 'overflow', overflow),\n                    width != null ? getClassNames(widthStyles, 'width', String(width)) : null,\n                    getClassNames(styles, 'height', height),\n                    getClassNames(styles, 'bg', background),\n                    borderRadius !== 'none'\n                        ? getClassNames(styles, 'borderRadius', borderRadius)\n                        : null,\n                    border !== 'none' ? getClassNames(styles, 'border', border) : null,\n                ) || undefined,\n            ref,\n        },\n        children,\n    )\n})\n\nexport type {\n    BoxProps,\n    BoxPaddingProps,\n    BoxMarginProps,\n    ReusableBoxProps,\n    BoxMinWidth,\n    BoxMaxWidth,\n    BoxDisplay,\n    BoxPosition,\n    BoxFlexDirection,\n    BoxFlexWrap,\n    BoxAlignItems,\n    BoxJustifyContent,\n    BoxOverflow,\n    BoxTextAlign,\n    BoxBackground,\n    BoxBorderRadius,\n}\n\nexport { Box }\n"],"names":["polymorphicComponent","ref","as","component","position","display","flexDirection","flexWrap","flexGrow","flexShrink","gap","alignItems","justifyContent","alignSelf","overflow","width","height","background","border","borderRadius","minWidth","maxWidth","textAlign","padding","paddingY","paddingX","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginY","marginX","marginTop","marginRight","marginBottom","marginLeft","className","children","props","resolvedPaddingTop","resolvedPaddingRight","resolvedPaddingBottom","resolvedPaddingLeft","resolvedMarginTop","resolvedMarginRight","resolvedMarginBottom","resolvedMarginLeft","omitFlex","React","classNames","styles","box","getClassNames","widthStyles","String","paddingStyles","marginStyles","gapStyles","undefined"],"mappings":"i7BA2FYA,wBAAuD,WAwC/DC,2BAtCIC,GAAIC,EAAY,MADpBC,SAEIA,EAAW,SAFfC,QAGIA,EAHJC,cAIIA,EAAgB,MAJpBC,SAKIA,EALJC,SAMIA,EANJC,WAOIA,EAPJC,IAQIA,EARJC,WASIA,EATJC,eAUIA,EAVJC,UAWIA,EAXJC,SAYIA,EAZJC,MAaIA,EAbJC,OAcIA,EAdJC,WAeIA,EAfJC,OAgBIA,EAhBJC,aAiBIA,EAjBJC,SAkBIA,EAlBJC,SAmBIA,EAnBJC,UAoBIA,EApBJC,QAqBIA,EArBJC,SAsBIA,EAtBJC,SAuBIA,EAvBJC,WAwBIA,EAxBJC,aAyBIA,EAzBJC,cA0BIA,EA1BJC,YA2BIA,EA3BJC,OA4BIA,EA5BJC,QA6BIA,EA7BJC,QA8BIA,EA9BJC,UA+BIA,EA/BJC,YAgCIA,EAhCJC,aAiCIA,EAjCJC,WAkCIA,EAlCJC,UAmCIA,GAnCJC,SAoCIA,MACGC,kCAIP,MAAMC,kBAAqBd,EAAAA,EAAcF,KAAYD,EAC/CkB,kBAAuBd,EAAAA,EAAgBF,KAAYF,EACnDmB,kBAAwBd,EAAAA,EAAiBJ,KAAYD,EACrDoB,kBAAsBd,EAAAA,EAAeJ,KAAYF,EAEjDqB,kBAAoBX,EAAAA,EAAaF,KAAWD,EAC5Ce,kBAAsBX,EAAAA,EAAeF,KAAWF,EAChDgB,kBAAuBX,EAAAA,EAAgBJ,KAAWD,EAClDiB,kBAAqBX,EAAAA,EAAcJ,KAAWF,EAE9CkB,IACD3C,GAA+B,iBAAZA,GAAoC,SAAZA,GAAkC,eAAZA,EAEtE,OAAO4C,gBACH9C,qCAEOoC,QACHF,UACIa,EACIb,GACAc,UAAOC,IACP/C,EAAUgD,gBAAcF,UAAQ,UAAW9C,GAAW,KACzC,WAAbD,EAAwBiD,gBAAcF,UAAQ,WAAY/C,GAAY,KAC1D,MAAZgB,EACMiC,gBAAcC,UAAa,WAAYC,OAAOnC,IAC9C,KACNiC,gBAAcC,UAAa,WAAYjC,GACvCgC,gBAAcF,UAAQ,YAAa7B,GAEnC+B,gBAAcG,UAAe,aAAchB,IAC3Ca,gBAAcG,UAAe,eAAgBf,IAC7CY,gBAAcG,UAAe,gBAAiBd,IAC9CW,gBAAcG,UAAe,cAAeb,IAE5CU,gBAAcI,UAAc,YAAab,IACzCS,gBAAcI,UAAc,cAAeZ,IAC3CQ,gBAAcI,UAAc,eAAgBX,IAC5CO,gBAAcI,UAAc,aAAcV,IAE1CC,GAAW,KAAOK,gBAAcF,UAAQ,gBAAiB7C,GACzD0C,GAAW,KAAOK,gBAAcF,UAAQ,WAAY5C,GACpDyC,GAAW,KAAOK,gBAAcF,UAAQ,aAAcxC,GACtDqC,GAAW,KAAOK,gBAAcF,UAAQ,iBAAkBvC,GAC7C,MAAbC,EAAoBwC,gBAAcF,UAAQ,YAAatC,GAAa,KACtD,MAAdJ,EACM4C,gBAAcF,UAAQ,aAAcI,OAAO9C,IAC3C,KACM,MAAZD,EAAmB6C,gBAAcF,UAAQ,WAAYI,OAAO/C,IAAa,KACzEE,EAAM2C,gBAAcK,UAAW,MAAOhD,GAAO,KAE7C2C,gBAAcF,UAAQ,WAAYrC,GACzB,MAATC,EAAgBsC,gBAAcC,UAAa,QAASC,OAAOxC,IAAU,KACrEsC,gBAAcF,UAAQ,SAAUnC,GAChCqC,gBAAcF,UAAQ,KAAMlC,GACX,SAAjBE,EACMkC,gBAAcF,UAAQ,eAAgBhC,GACtC,KACK,SAAXD,EAAoBmC,gBAAcF,UAAQ,SAAUjC,GAAU,YAC7DyC,EACT1D,IAAAA,IAEJqC"}
+{"version":3,"file":"box.js","sources":["../../src/box/box.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { polymorphicComponent } from '../utils/polymorphism'\nimport { getClassNames } from '../utils/responsive-props'\n\nimport type { ResponsiveProp } from '../utils/responsive-props'\nimport type {\n    DividerWeight,\n    Space,\n    SpaceWithNegatives,\n    WithEnhancedClassName,\n} from '../utils/common-types'\n\nimport styles from './box.module.css'\nimport paddingStyles from './padding.module.css'\nimport marginStyles from './margin.module.css'\nimport widthStyles from './width.module.css'\nimport gapStyles from './gap.module.css'\n\ninterface BoxPaddingProps {\n    padding?: ResponsiveProp<Space>\n    paddingX?: ResponsiveProp<Space>\n    paddingY?: ResponsiveProp<Space>\n    paddingTop?: ResponsiveProp<Space>\n    paddingRight?: ResponsiveProp<Space>\n    paddingBottom?: ResponsiveProp<Space>\n    paddingLeft?: ResponsiveProp<Space>\n}\n\ninterface BoxMarginProps {\n    margin?: ResponsiveProp<SpaceWithNegatives>\n    marginX?: ResponsiveProp<SpaceWithNegatives>\n    marginY?: ResponsiveProp<SpaceWithNegatives>\n    marginTop?: ResponsiveProp<SpaceWithNegatives>\n    marginRight?: ResponsiveProp<SpaceWithNegatives>\n    marginBottom?: ResponsiveProp<SpaceWithNegatives>\n    marginLeft?: ResponsiveProp<SpaceWithNegatives>\n}\n\ntype BoxDisplay = 'block' | 'flex' | 'inline' | 'inlineBlock' | 'inlineFlex' | 'none'\ntype BoxFlexDirection = 'column' | 'row'\ntype BoxFlexWrap = 'nowrap' | 'wrap'\ntype BoxAlignItems = 'center' | 'flexEnd' | 'flexStart' | 'baseline'\ntype BoxJustifyContent =\n    | 'center'\n    | 'flexEnd'\n    | 'flexStart'\n    | 'spaceAround'\n    | 'spaceBetween'\n    | 'spaceEvenly'\ntype BoxAlignSelf = 'flexStart' | 'flexEnd' | 'center' | 'baseline' | 'stretch'\ntype BoxOverflow = 'hidden' | 'auto' | 'visible' | 'scroll'\n\ntype BoxMaxMinWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'\ntype BoxMinWidth = 0 | BoxMaxMinWidth\ntype BoxMaxWidth = BoxMaxMinWidth | 'full'\ntype BoxWidth = 0 | BoxMaxMinWidth | 'full' | 'auto' | 'maxContent' | 'minContent' | 'fitContent'\ntype BoxBackground = 'default' | 'aside' | 'highlight' | 'selected' | 'toast'\ntype BoxBorderRadius = 'standard' | 'none' | 'full'\n\ninterface BorderProps {\n    borderRadius?: BoxBorderRadius\n    border?: DividerWeight\n}\n\ninterface ReusableBoxProps extends BorderProps, BoxPaddingProps {\n    minWidth?: BoxMinWidth\n    maxWidth?: BoxMaxWidth\n    width?: BoxWidth\n    background?: BoxBackground\n    flexGrow?: 0 | 1\n    flexShrink?: 0\n}\n\ntype BoxPosition = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky'\ntype BoxTextAlign = 'start' | 'center' | 'end' | 'justify'\n\ninterface BoxProps extends WithEnhancedClassName, ReusableBoxProps, BoxMarginProps {\n    position?: ResponsiveProp<BoxPosition>\n    display?: ResponsiveProp<BoxDisplay>\n    flexDirection?: ResponsiveProp<BoxFlexDirection>\n    flexWrap?: BoxFlexWrap\n    gap?: ResponsiveProp<Space | 'none'>\n    alignItems?: ResponsiveProp<BoxAlignItems>\n    alignSelf?: ResponsiveProp<BoxAlignSelf>\n    justifyContent?: ResponsiveProp<BoxJustifyContent>\n    overflow?: BoxOverflow\n    height?: 'full'\n    textAlign?: ResponsiveProp<BoxTextAlign>\n}\n\nfunction getBoxClassNames({\n    position = 'static',\n    display,\n    flexDirection = 'row',\n    flexWrap,\n    flexGrow,\n    flexShrink,\n    gap,\n    alignItems,\n    justifyContent,\n    alignSelf,\n    overflow,\n    width,\n    height,\n    background,\n    border,\n    borderRadius,\n    minWidth,\n    maxWidth,\n    textAlign,\n    padding,\n    paddingY,\n    paddingX,\n    paddingTop,\n    paddingRight,\n    paddingBottom,\n    paddingLeft,\n    margin,\n    marginY,\n    marginX,\n    marginTop,\n    marginRight,\n    marginBottom,\n    marginLeft,\n    className,\n}: BoxProps) {\n    const resolvedPaddingTop = paddingTop ?? paddingY ?? padding\n    const resolvedPaddingRight = paddingRight ?? paddingX ?? padding\n    const resolvedPaddingBottom = paddingBottom ?? paddingY ?? padding\n    const resolvedPaddingLeft = paddingLeft ?? paddingX ?? padding\n\n    const resolvedMarginTop = marginTop ?? marginY ?? margin\n    const resolvedMarginRight = marginRight ?? marginX ?? margin\n    const resolvedMarginBottom = marginBottom ?? marginY ?? margin\n    const resolvedMarginLeft = marginLeft ?? marginX ?? margin\n\n    const omitFlex =\n        !display || (typeof display === 'string' && display !== 'flex' && display !== 'inlineFlex')\n\n    return classNames(\n        className,\n        styles.box,\n        display ? getClassNames(styles, 'display', display) : null,\n        position !== 'static' ? getClassNames(styles, 'position', position) : null,\n        minWidth != null ? getClassNames(widthStyles, 'minWidth', String(minWidth)) : null,\n        getClassNames(widthStyles, 'maxWidth', maxWidth),\n        getClassNames(styles, 'textAlign', textAlign),\n        // padding\n        getClassNames(paddingStyles, 'paddingTop', resolvedPaddingTop),\n        getClassNames(paddingStyles, 'paddingRight', resolvedPaddingRight),\n        getClassNames(paddingStyles, 'paddingBottom', resolvedPaddingBottom),\n        getClassNames(paddingStyles, 'paddingLeft', resolvedPaddingLeft),\n        // margin\n        getClassNames(marginStyles, 'marginTop', resolvedMarginTop),\n        getClassNames(marginStyles, 'marginRight', resolvedMarginRight),\n        getClassNames(marginStyles, 'marginBottom', resolvedMarginBottom),\n        getClassNames(marginStyles, 'marginLeft', resolvedMarginLeft),\n        // flex props\n        omitFlex ? null : getClassNames(styles, 'flexDirection', flexDirection),\n        omitFlex ? null : getClassNames(styles, 'flexWrap', flexWrap),\n        omitFlex ? null : getClassNames(styles, 'alignItems', alignItems),\n        omitFlex ? null : getClassNames(styles, 'justifyContent', justifyContent),\n        alignSelf != null ? getClassNames(styles, 'alignSelf', alignSelf) : null,\n        flexShrink != null ? getClassNames(styles, 'flexShrink', String(flexShrink)) : null,\n        flexGrow != null ? getClassNames(styles, 'flexGrow', String(flexGrow)) : null,\n        gap ? getClassNames(gapStyles, 'gap', gap) : null,\n        // other props\n        getClassNames(styles, 'overflow', overflow),\n        width != null ? getClassNames(widthStyles, 'width', String(width)) : null,\n        getClassNames(styles, 'height', height),\n        getClassNames(styles, 'bg', background),\n        borderRadius !== 'none' ? getClassNames(styles, 'borderRadius', borderRadius) : null,\n        border !== 'none' ? getClassNames(styles, 'border', border) : null,\n    )\n}\n\nconst Box = polymorphicComponent<'div', BoxProps, 'keepClassName'>(function Box(\n    {\n        as: component = 'div',\n        position = 'static',\n        display,\n        flexDirection = 'row',\n        flexWrap,\n        flexGrow,\n        flexShrink,\n        gap,\n        alignItems,\n        justifyContent,\n        alignSelf,\n        overflow,\n        width,\n        height,\n        background,\n        border,\n        borderRadius,\n        minWidth,\n        maxWidth,\n        textAlign,\n        padding,\n        paddingY,\n        paddingX,\n        paddingTop,\n        paddingRight,\n        paddingBottom,\n        paddingLeft,\n        margin,\n        marginY,\n        marginX,\n        marginTop,\n        marginRight,\n        marginBottom,\n        marginLeft,\n        className,\n        children,\n        ...props\n    },\n    ref,\n) {\n    return React.createElement(\n        component,\n        {\n            ...props,\n            className: getBoxClassNames({\n                position,\n                display,\n                flexDirection,\n                flexWrap,\n                flexGrow,\n                flexShrink,\n                gap,\n                alignItems,\n                justifyContent,\n                alignSelf,\n                overflow,\n                width,\n                height,\n                background,\n                border,\n                borderRadius,\n                minWidth,\n                maxWidth,\n                textAlign,\n                padding,\n                paddingY,\n                paddingX,\n                paddingTop,\n                paddingRight,\n                paddingBottom,\n                paddingLeft,\n                margin,\n                marginY,\n                marginX,\n                marginTop,\n                marginRight,\n                marginBottom,\n                marginLeft,\n                className,\n            }),\n            ref,\n        },\n        children,\n    )\n})\n\nexport type {\n    BoxProps,\n    BoxPaddingProps,\n    BoxMarginProps,\n    ReusableBoxProps,\n    BoxMinWidth,\n    BoxMaxWidth,\n    BoxDisplay,\n    BoxPosition,\n    BoxFlexDirection,\n    BoxFlexWrap,\n    BoxAlignItems,\n    BoxJustifyContent,\n    BoxOverflow,\n    BoxTextAlign,\n    BoxBackground,\n    BoxBorderRadius,\n}\n\nexport { Box, getBoxClassNames }\n"],"names":["getBoxClassNames","position","display","flexDirection","flexWrap","flexGrow","flexShrink","gap","alignItems","justifyContent","alignSelf","overflow","width","height","background","border","borderRadius","minWidth","maxWidth","textAlign","padding","paddingY","paddingX","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginY","marginX","marginTop","marginRight","marginBottom","marginLeft","className","resolvedPaddingTop","resolvedPaddingRight","resolvedPaddingBottom","resolvedPaddingLeft","resolvedMarginTop","resolvedMarginRight","resolvedMarginBottom","resolvedMarginLeft","omitFlex","classNames","styles","box","getClassNames","widthStyles","String","paddingStyles","marginStyles","gapStyles","polymorphicComponent","ref","as","component","children","props","React"],"mappings":"q6BA2FA,SAASA,GAAiBC,SACtBA,EAAW,SADWC,QAEtBA,EAFsBC,cAGtBA,EAAgB,MAHMC,SAItBA,EAJsBC,SAKtBA,EALsBC,WAMtBA,EANsBC,IAOtBA,EAPsBC,WAQtBA,EARsBC,eAStBA,EATsBC,UAUtBA,EAVsBC,SAWtBA,EAXsBC,MAYtBA,EAZsBC,OAatBA,EAbsBC,WActBA,EAdsBC,OAetBA,EAfsBC,aAgBtBA,EAhBsBC,SAiBtBA,EAjBsBC,SAkBtBA,EAlBsBC,UAmBtBA,EAnBsBC,QAoBtBA,EApBsBC,SAqBtBA,EArBsBC,SAsBtBA,EAtBsBC,WAuBtBA,EAvBsBC,aAwBtBA,EAxBsBC,cAyBtBA,EAzBsBC,YA0BtBA,EA1BsBC,OA2BtBA,EA3BsBC,QA4BtBA,EA5BsBC,QA6BtBA,EA7BsBC,UA8BtBA,EA9BsBC,YA+BtBA,EA/BsBC,aAgCtBA,EAhCsBC,WAiCtBA,EAjCsBC,UAkCtBA,wBAEA,MAAMC,iBAAqBZ,EAAAA,EAAcF,KAAYD,EAC/CgB,iBAAuBZ,EAAAA,EAAgBF,KAAYF,EACnDiB,iBAAwBZ,EAAAA,EAAiBJ,KAAYD,EACrDkB,iBAAsBZ,EAAAA,EAAeJ,KAAYF,EAEjDmB,iBAAoBT,EAAAA,EAAaF,KAAWD,EAC5Ca,kBAAsBT,EAAAA,EAAeF,KAAWF,EAChDc,kBAAuBT,EAAAA,EAAgBJ,KAAWD,EAClDe,kBAAqBT,EAAAA,EAAcJ,KAAWF,EAE9CgB,IACDzC,GAA+B,iBAAZA,GAAoC,SAAZA,GAAkC,eAAZA,EAEtE,OAAO0C,EACHV,EACAW,UAAOC,IACP5C,EAAU6C,gBAAcF,UAAQ,UAAW3C,GAAW,KACzC,WAAbD,EAAwB8C,gBAAcF,UAAQ,WAAY5C,GAAY,KAC1D,MAAZgB,EAAmB8B,gBAAcC,UAAa,WAAYC,OAAOhC,IAAa,KAC9E8B,gBAAcC,UAAa,WAAY9B,GACvC6B,gBAAcF,UAAQ,YAAa1B,GAEnC4B,gBAAcG,UAAe,aAAcf,GAC3CY,gBAAcG,UAAe,eAAgBd,GAC7CW,gBAAcG,UAAe,gBAAiBb,GAC9CU,gBAAcG,UAAe,cAAeZ,GAE5CS,gBAAcI,UAAc,YAAaZ,GACzCQ,gBAAcI,UAAc,cAAeX,IAC3CO,gBAAcI,UAAc,eAAgBV,IAC5CM,gBAAcI,UAAc,aAAcT,IAE1CC,GAAW,KAAOI,gBAAcF,UAAQ,gBAAiB1C,GACzDwC,GAAW,KAAOI,gBAAcF,UAAQ,WAAYzC,GACpDuC,GAAW,KAAOI,gBAAcF,UAAQ,aAAcrC,GACtDmC,GAAW,KAAOI,gBAAcF,UAAQ,iBAAkBpC,GAC7C,MAAbC,EAAoBqC,gBAAcF,UAAQ,YAAanC,GAAa,KACtD,MAAdJ,EAAqByC,gBAAcF,UAAQ,aAAcI,OAAO3C,IAAe,KACnE,MAAZD,EAAmB0C,gBAAcF,UAAQ,WAAYI,OAAO5C,IAAa,KACzEE,EAAMwC,gBAAcK,UAAW,MAAO7C,GAAO,KAE7CwC,gBAAcF,UAAQ,WAAYlC,GACzB,MAATC,EAAgBmC,gBAAcC,UAAa,QAASC,OAAOrC,IAAU,KACrEmC,gBAAcF,UAAQ,SAAUhC,GAChCkC,gBAAcF,UAAQ,KAAM/B,GACX,SAAjBE,EAA0B+B,gBAAcF,UAAQ,eAAgB7B,GAAgB,KACrE,SAAXD,EAAoBgC,gBAAcF,UAAQ,SAAU9B,GAAU,kBAI1DsC,wBAAuD,WAwC/DC,OAtCIC,GAAIC,EAAY,MADpBvD,SAEIA,EAAW,SAFfC,QAGIA,EAHJC,cAIIA,EAAgB,MAJpBC,SAKIA,EALJC,SAMIA,EANJC,WAOIA,EAPJC,IAQIA,EARJC,WASIA,EATJC,eAUIA,EAVJC,UAWIA,EAXJC,SAYIA,EAZJC,MAaIA,EAbJC,OAcIA,EAdJC,WAeIA,EAfJC,OAgBIA,EAhBJC,aAiBIA,EAjBJC,SAkBIA,EAlBJC,SAmBIA,EAnBJC,UAoBIA,EApBJC,QAqBIA,EArBJC,SAsBIA,EAtBJC,SAuBIA,EAvBJC,WAwBIA,EAxBJC,aAyBIA,EAzBJC,cA0BIA,EA1BJC,YA2BIA,EA3BJC,OA4BIA,EA5BJC,QA6BIA,EA7BJC,QA8BIA,EA9BJC,UA+BIA,EA/BJC,YAgCIA,EAhCJC,aAiCIA,EAjCJC,WAkCIA,EAlCJC,UAmCIA,EAnCJuB,SAoCIA,KACGC,iCAIP,OAAOC,gBACHH,qCAEOE,OACHxB,UAAWlC,EAAiB,CACxBC,SAAAA,EACAC,QAAAA,EACAC,cAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,WAAAA,EACAC,IAAAA,EACAC,WAAAA,EACAC,eAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,MAAAA,EACAC,OAAAA,EACAC,WAAAA,EACAC,OAAAA,EACAC,aAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,WAAAA,EACAC,aAAAA,EACAC,cAAAA,EACAC,YAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,UAAAA,EACAC,YAAAA,EACAC,aAAAA,EACAC,WAAAA,EACAC,UAAAA,IAEJoB,IAAAA,IAEJG"}

package/lib/button/button.d.ts

@@ -1,15 +1,127 @@
 import * as React from 'react';
-import type { BaseButtonProps } from '../base-button';
-declare type NativeButtonProps = Omit<React.AllHTMLAttributes<HTMLButtonElement>, 'aria-disabled' | 'className' | keyof BaseButtonProps>;
-export declare type ButtonProps = NativeButtonProps & BaseButtonProps & {
+import { RoleProps } from '@ariakit/react';
+import { TooltipProps } from '../tooltip';
+import type { ObfuscatedClassName } from '../utils/common-types';
+declare type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'quaternary';
+declare type ButtonTone = 'normal' | 'destructive';
+declare type ButtonSize = 'small' | 'normal' | 'large';
+declare type IconElement = React.ReactChild;
+interface CommonButtonProps extends ObfuscatedClassName, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className'>, Pick<RoleProps, 'render'> {
+    /**
+     * The button's variant.
+     */
+    variant: ButtonVariant;
+    /**
+     * The button's tone.
+     *
+     * @default 'normal'
+     */
+    tone?: ButtonTone;
+    /**
+     * The button's size.
+     *
+     * @default 'normal'
+     */
+    size?: ButtonSize;
+    /**
+     * Controls the shape of the button.
+     *
+     * Specifically, it allows to make it have slightly curved corners (the default) vs. having them
+     * fully curved to the point that they are as round as possible.
+     *
+     * In icon-only buttons this allows to have the button be circular.
+     *
+     * @default 'normal'
+     */
+    shape?: 'normal' | 'rounded';
+    /**
+     * Whether the button is disabled or not.
+     *
+     * Buttons are disabled using aria-disabled, rather than the HTML disabled attribute. This
+     * allows the buttons to be focusable, which can aid discoverability. This way, users can tab to
+     * the button and read its label, even if they can't activate it.
+     *
+     * It is also convenient when buttons are rendered as a link. Links cannot normally be disabled,
+     * but by using aria-disabled, we can make them behave as if they were.
+     *
+     * The `onClick` handler is automatically prevented when the button is disabled in this way, to
+     * mimic the behavior of a native disabled attribute.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the button is busy/loading.
+     *
+     * A button in this state is functionally and semantically disabled. Visually is does not look
+     * dimmed (as disabled buttons normally do), but it shows a loading spinner instead.
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * A tooltip linked to the button element.
+     */
+    tooltip?: TooltipProps['content'];
+    /**
+     * The type of the button.
+     *
+     * @default 'button'
+     */
     type?: 'button' | 'submit' | 'reset';
-    exceptionallySetClassName?: string;
-};
+}
+interface ButtonProps extends CommonButtonProps {
+    /**
+     * The button label content.
+     */
+    children: React.ReactNode;
+    /**
+     * The icon to display at the start of the button (before the label).
+     */
+    startIcon?: IconElement;
+    /**
+     * The icon to display at the end of the button (after the label).
+     */
+    endIcon?: IconElement;
+    /**
+     * The width of the button.
+     *
+     * - `'auto'`: The button will be as wide as its content.
+     * - `'full'`: The button will be as wide as its container.
+     *
+     * @default 'auto'
+     */
+    width?: 'auto' | 'full';
+    /**
+     * The alignment of the button label inside the button.
+     *
+     * @default 'center'
+     */
+    align?: 'start' | 'center' | 'end';
+}
 /**
- * A semantic button that also looks like a button, and provides all the necessary visual variants.
- * It follows the [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).
- *
- * @see ButtonLink
+ * A button element that displays a text label and optionally a start or end icon. It follows the
+ * [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).
  */
-export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export {};
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+interface IconButtonProps extends CommonButtonProps {
+    /**
+     * The icon to display inside the button.
+     */
+    icon: IconElement;
+    /**
+     * The button label.
+     *
+     * It is used for assistive technologies, and it is also shown as a tooltip (if not tooltip is
+     * provided explicitly).
+     */
+    'aria-label': string;
+}
+/**
+ * A button element that displays an icon only, visually, though it is semantically labelled. It
+ * also makes sure to always show a tooltip with its label. It follows the
+ * [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).
+ */
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export type { ButtonProps, IconButtonProps, ButtonVariant, ButtonTone };
+export { Button, IconButton };

package/lib/button/button.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),a=require("../base-button/base-button.js");const r=["variant","tone","size","type","disabled","exceptionallySetClassName"];exports.Button=t.forwardRef((function(o,s){let{variant:l,tone:n="normal",size:i="normal",type:u="button",disabled:b=!1,exceptionallySetClassName:p}=o,c=e.objectWithoutProperties(o,r);return t.createElement(a.BaseButton,e.objectSpread2(e.objectSpread2({},c),{},{as:"button",ref:s,variant:l,tone:n,size:i,type:u,disabled:b,exceptionallySetClassName:p}))}));
+"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"),l=require("react"),n=(e(l),e(require("classnames"))),a=require("../box/box.js"),o=require("@ariakit/react"),r=require("../spinner/spinner.js"),i=require("../tooltip/tooltip.js"),d=require("./button.module.css.js");const s=["variant","tone","size","shape","type","disabled","loading","tooltip","render","onClick","exceptionallySetClassName","children","startIcon","endIcon","width","align"],u=["variant","tone","size","shape","type","disabled","loading","tooltip","render","onClick","exceptionallySetClassName","children","icon"];function c(e){e.preventDefault()}const p=l.forwardRef((function(e,u){let{variant:p,tone:f="normal",size:m="normal",shape:b="normal",type:h="button",disabled:x=!1,loading:v=!1,tooltip:y,render:j,onClick:C,exceptionallySetClassName:E,children:S,startIcon:g,endIcon:B,width:N="auto",align:q="center"}=e,k=t.objectWithoutProperties(e,s);const w=v||x,I=l.createElement(o.Role.button,t.objectSpread2(t.objectSpread2({},k),{},{render:j,type:null!=j?void 0:h,ref:u,"aria-disabled":w,onClick:w?c:C,className:n([a.getBoxClassNames({width:N}),E,d.default.baseButton,d.default["variant-"+p],d.default["tone-"+f],d.default["size-"+m],"rounded"===b?d.default["shape-rounded"]:null,x?d.default.disabled:null])}),l.createElement(l.Fragment,null,g?l.createElement(a.Box,{display:"flex",className:d.default.startIcon,"aria-hidden":!0},v&&!B?l.createElement(r.Spinner,null):g):null,S?l.createElement(a.Box,{as:"span",className:d.default.label,overflow:"hidden",width:"full"===N?"full":void 0,textAlign:"auto"===N?"center":q},S):null,B||v&&!g?l.createElement(a.Box,{display:"flex",className:d.default.endIcon,"aria-hidden":!0},v?l.createElement(r.Spinner,null):B):null));return y?l.createElement(i.Tooltip,{content:y},I):I})),f=l.forwardRef((function(e,a){let{variant:s,tone:p="normal",size:f="normal",shape:m="normal",type:b="button",disabled:h=!1,loading:x=!1,tooltip:v,render:y,onClick:j,exceptionallySetClassName:C,icon:E}=e,S=t.objectWithoutProperties(e,u);const g=x||h,B=l.createElement(o.Role.button,t.objectSpread2(t.objectSpread2({},S),{},{render:y,type:null!=y?void 0:b,ref:a,"aria-disabled":g,onClick:g?c:j,className:n([C,d.default.baseButton,d.default["variant-"+s],d.default["tone-"+p],d.default["size-"+f],"rounded"===m?d.default["shape-rounded"]:null,d.default.iconButton,h?d.default.disabled:null])}),x&&l.createElement(r.Spinner,null)||E),N=void 0===v?S["aria-label"]:v;return N?l.createElement(i.Tooltip,{content:N},B):B}));exports.Button=p,exports.IconButton=f;
 //# sourceMappingURL=button.js.map

package/lib/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../src/button/button.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseButton } from '../base-button'\nimport type { BaseButtonProps } from '../base-button'\n\ntype NativeButtonProps = Omit<\n    React.AllHTMLAttributes<HTMLButtonElement>,\n    'aria-disabled' | 'className' | keyof BaseButtonProps\n>\n\nexport type ButtonProps = NativeButtonProps &\n    BaseButtonProps & {\n        type?: 'button' | 'submit' | 'reset'\n        exceptionallySetClassName?: string\n    }\n\n/**\n * A semantic button that also looks like a button, and provides all the necessary visual variants.\n * It follows the [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).\n *\n * @see ButtonLink\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n    {\n        variant,\n        tone = 'normal',\n        size = 'normal',\n        type = 'button',\n        disabled = false,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseButton\n            {...props}\n            as=\"button\"\n            ref={ref}\n            variant={variant}\n            tone={tone}\n            size={size}\n            type={type}\n            disabled={disabled}\n            exceptionallySetClassName={exceptionallySetClassName}\n        />\n    )\n})\n"],"names":["React","ref","variant","tone","size","type","disabled","exceptionallySetClassName","props","BaseButton","as"],"mappings":"2RAqBsBA,cAAiD,WAUnEC,OATAC,QACIA,EADJC,KAEIA,EAAO,SAFXC,KAGIA,EAAO,SAHXC,KAIIA,EAAO,SAJXC,SAKIA,GAAW,EALfC,0BAMIA,KACGC,iCAIP,OACIR,gBAACS,gDACOD,OACJE,GAAG,SACHT,IAAKA,EACLC,QAASA,EACTC,KAAMA,EACNC,KAAMA,EACNC,KAAMA,EACNC,SAAUA,EACVC,0BAA2BA"}
+{"version":3,"file":"button.js","sources":["../../src/button/button.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Role, RoleProps } from '@ariakit/react'\n\nimport { Box, getBoxClassNames } from '../box'\nimport { Spinner } from '../spinner'\nimport { Tooltip, TooltipProps } from '../tooltip'\n\nimport styles from './button.module.css'\n\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\nfunction preventDefault(event: React.SyntheticEvent) {\n    event.preventDefault()\n}\n\ntype ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'quaternary'\ntype ButtonTone = 'normal' | 'destructive'\ntype ButtonSize = 'small' | 'normal' | 'large'\ntype IconElement = React.ReactChild\n\ninterface CommonButtonProps\n    extends ObfuscatedClassName,\n        Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className'>,\n        Pick<RoleProps, 'render'> {\n    /**\n     * The button's variant.\n     */\n    variant: ButtonVariant\n\n    /**\n     * The button's tone.\n     *\n     * @default 'normal'\n     */\n    tone?: ButtonTone\n\n    /**\n     * The button's size.\n     *\n     * @default 'normal'\n     */\n    size?: ButtonSize\n\n    /**\n     * Controls the shape of the button.\n     *\n     * Specifically, it allows to make it have slightly curved corners (the default) vs. having them\n     * fully curved to the point that they are as round as possible.\n     *\n     * In icon-only buttons this allows to have the button be circular.\n     *\n     * @default 'normal'\n     */\n    shape?: 'normal' | 'rounded'\n\n    /**\n     * Whether the button is disabled or not.\n     *\n     * Buttons are disabled using aria-disabled, rather than the HTML disabled attribute. This\n     * allows the buttons to be focusable, which can aid discoverability. This way, users can tab to\n     * the button and read its label, even if they can't activate it.\n     *\n     * It is also convenient when buttons are rendered as a link. Links cannot normally be disabled,\n     * but by using aria-disabled, we can make them behave as if they were.\n     *\n     * The `onClick` handler is automatically prevented when the button is disabled in this way, to\n     * mimic the behavior of a native disabled attribute.\n     *\n     * @default false\n     */\n    disabled?: boolean\n\n    /**\n     * Whether the button is busy/loading.\n     *\n     * A button in this state is functionally and semantically disabled. Visually is does not look\n     * dimmed (as disabled buttons normally do), but it shows a loading spinner instead.\n     *\n     * @default false\n     */\n    loading?: boolean\n\n    /**\n     * A tooltip linked to the button element.\n     */\n    tooltip?: TooltipProps['content']\n\n    /**\n     * The type of the button.\n     *\n     * @default 'button'\n     */\n    type?: 'button' | 'submit' | 'reset'\n}\n\ninterface ButtonProps extends CommonButtonProps {\n    /**\n     * The button label content.\n     */\n    children: React.ReactNode\n\n    /**\n     * The icon to display at the start of the button (before the label).\n     */\n    startIcon?: IconElement\n\n    /**\n     * The icon to display at the end of the button (after the label).\n     */\n    endIcon?: IconElement\n\n    /**\n     * The width of the button.\n     *\n     * - `'auto'`: The button will be as wide as its content.\n     * - `'full'`: The button will be as wide as its container.\n     *\n     * @default 'auto'\n     */\n    width?: 'auto' | 'full'\n\n    /**\n     * The alignment of the button label inside the button.\n     *\n     * @default 'center'\n     */\n    align?: 'start' | 'center' | 'end'\n}\n\n/**\n * A button element that displays a text label and optionally a start or end icon. It follows the\n * [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n    {\n        variant,\n        tone = 'normal',\n        size = 'normal',\n        shape = 'normal',\n        type = 'button',\n        disabled = false,\n        loading = false,\n        tooltip,\n        render,\n        onClick,\n        exceptionallySetClassName,\n        children,\n        startIcon,\n        endIcon,\n        width = 'auto',\n        align = 'center',\n        ...props\n    },\n    ref,\n) {\n    const isDisabled = loading || disabled\n    const buttonElement = (\n        <Role.button\n            {...props}\n            render={render}\n            type={render != null ? undefined : type}\n            ref={ref}\n            aria-disabled={isDisabled}\n            onClick={isDisabled ? preventDefault : onClick}\n            className={classNames([\n                getBoxClassNames({ width }),\n                exceptionallySetClassName,\n                styles.baseButton,\n                styles[`variant-${variant}`],\n                styles[`tone-${tone}`],\n                styles[`size-${size}`],\n                shape === 'rounded' ? styles['shape-rounded'] : null,\n                disabled ? styles.disabled : null,\n            ])}\n        >\n            <>\n                {startIcon ? (\n                    <Box display=\"flex\" className={styles.startIcon} aria-hidden>\n                        {loading && !endIcon ? <Spinner /> : startIcon}\n                    </Box>\n                ) : null}\n\n                {children ? (\n                    <Box\n                        as=\"span\"\n                        className={styles.label}\n                        overflow=\"hidden\"\n                        width={width === 'full' ? 'full' : undefined}\n                        textAlign={width === 'auto' ? 'center' : align}\n                    >\n                        {children}\n                    </Box>\n                ) : null}\n\n                {endIcon || (loading && !startIcon) ? (\n                    <Box display=\"flex\" className={styles.endIcon} aria-hidden>\n                        {loading ? <Spinner /> : endIcon}\n                    </Box>\n                ) : null}\n            </>\n        </Role.button>\n    )\n\n    return tooltip ? <Tooltip content={tooltip}>{buttonElement}</Tooltip> : buttonElement\n})\n\ninterface IconButtonProps extends CommonButtonProps {\n    /**\n     * The icon to display inside the button.\n     */\n    icon: IconElement\n\n    /**\n     * The button label.\n     *\n     * It is used for assistive technologies, and it is also shown as a tooltip (if not tooltip is\n     * provided explicitly).\n     */\n    'aria-label': string\n}\n\n/**\n * A button element that displays an icon only, visually, though it is semantically labelled. It\n * also makes sure to always show a tooltip with its label. It follows the\n * [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).\n */\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(function Button(\n    {\n        variant,\n        tone = 'normal',\n        size = 'normal',\n        shape = 'normal',\n        type = 'button',\n        disabled = false,\n        loading = false,\n        tooltip,\n        render,\n        onClick,\n        exceptionallySetClassName,\n        children,\n        icon,\n        ...props\n    },\n    ref,\n) {\n    const isDisabled = loading || disabled\n    const buttonElement = (\n        <Role.button\n            {...props}\n            render={render}\n            type={render != null ? undefined : type}\n            ref={ref}\n            aria-disabled={isDisabled}\n            onClick={isDisabled ? preventDefault : onClick}\n            className={classNames([\n                exceptionallySetClassName,\n                styles.baseButton,\n                styles[`variant-${variant}`],\n                styles[`tone-${tone}`],\n                styles[`size-${size}`],\n                shape === 'rounded' ? styles['shape-rounded'] : null,\n                styles.iconButton,\n                disabled ? styles.disabled : null,\n            ])}\n        >\n            {(loading && <Spinner />) || icon}\n        </Role.button>\n    )\n\n    const tooltipContent = tooltip === undefined ? props['aria-label'] : tooltip\n    return tooltipContent ? (\n        <Tooltip content={tooltipContent}>{buttonElement}</Tooltip>\n    ) : (\n        buttonElement\n    )\n})\n\nexport type { ButtonProps, IconButtonProps, ButtonVariant, ButtonTone }\nexport { Button, IconButton }\n"],"names":["preventDefault","event","Button","React","ref","variant","tone","size","shape","type","disabled","loading","tooltip","render","onClick","exceptionallySetClassName","children","startIcon","endIcon","width","align","props","isDisabled","buttonElement","Role","button","undefined","className","classNames","getBoxClassNames","styles","baseButton","Box","display","Spinner","as","label","overflow","textAlign","Tooltip","content","IconButton","icon","iconButton","tooltipContent"],"mappings":"qtBAYA,SAASA,EAAeC,GACpBA,EAAMD,uBAyHJE,EAASC,cAAiD,WAoB5DC,OAnBAC,QACIA,EADJC,KAEIA,EAAO,SAFXC,KAGIA,EAAO,SAHXC,MAIIA,EAAQ,SAJZC,KAKIA,EAAO,SALXC,SAMIA,GAAW,EANfC,QAOIA,GAAU,UACVC,EARJC,OASIA,EATJC,QAUIA,EAVJC,0BAWIA,EAXJC,SAYIA,EAZJC,UAaIA,EAbJC,QAcIA,EAdJC,MAeIA,EAAQ,OAfZC,MAgBIA,EAAQ,YACLC,iCAIP,MAAMC,EAAaX,GAAWD,EACxBa,EACFpB,gBAACqB,OAAKC,0CACEJ,OACJR,OAAQA,EACRJ,KAAgB,MAAVI,OAAiBa,EAAYjB,EACnCL,IAAKA,kBACUkB,EACfR,QAASQ,EAAatB,EAAiBc,EACvCa,UAAWC,EAAW,CAClBC,mBAAiB,CAAEV,MAAAA,IACnBJ,EACAe,UAAOC,WACPD,qBAAkBzB,GAClByB,kBAAexB,GACfwB,kBAAevB,GACL,YAAVC,EAAsBsB,UAAO,iBAAmB,KAChDpB,EAAWoB,UAAOpB,SAAW,SAGjCP,gCACKc,EACGd,gBAAC6B,OAAIC,QAAQ,OAAON,UAAWG,UAAOb,4BACjCN,IAAYO,EAAUf,gBAAC+B,gBAAajB,GAEzC,KAEHD,EACGb,gBAAC6B,OACGG,GAAG,OACHR,UAAWG,UAAOM,MAClBC,SAAS,SACTlB,MAAiB,SAAVA,EAAmB,YAASO,EACnCY,UAAqB,SAAVnB,EAAmB,SAAWC,GAExCJ,GAEL,KAEHE,GAAYP,IAAYM,EACrBd,gBAAC6B,OAAIC,QAAQ,OAAON,UAAWG,UAAOZ,0BACjCP,EAAUR,gBAAC+B,gBAAahB,GAE7B,OAKhB,OAAON,EAAUT,gBAACoC,WAAQC,QAAS5B,GAAUW,GAA2BA,KAuBtEkB,EAAatC,cAAqD,WAiBpEC,OAhBAC,QACIA,EADJC,KAEIA,EAAO,SAFXC,KAGIA,EAAO,SAHXC,MAIIA,EAAQ,SAJZC,KAKIA,EAAO,SALXC,SAMIA,GAAW,EANfC,QAOIA,GAAU,UACVC,EARJC,OASIA,EATJC,QAUIA,EAVJC,0BAWIA,EAXJ2B,KAaIA,KACGrB,iCAIP,MAAMC,EAAaX,GAAWD,EACxBa,EACFpB,gBAACqB,OAAKC,0CACEJ,OACJR,OAAQA,EACRJ,KAAgB,MAAVI,OAAiBa,EAAYjB,EACnCL,IAAKA,kBACUkB,EACfR,QAASQ,EAAatB,EAAiBc,EACvCa,UAAWC,EAAW,CAClBb,EACAe,UAAOC,WACPD,qBAAkBzB,GAClByB,kBAAexB,GACfwB,kBAAevB,GACL,YAAVC,EAAsBsB,UAAO,iBAAmB,KAChDA,UAAOa,WACPjC,EAAWoB,UAAOpB,SAAW,SAG/BC,GAAWR,gBAAC+B,iBAAeQ,GAI/BE,OAA6BlB,IAAZd,EAAwBS,EAAM,cAAgBT,EACrE,OAAOgC,EACHzC,gBAACoC,WAAQC,QAASI,GAAiBrB,GAEnCA"}

package/lib/button/button.module.css.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={baseButton:"_3930afa0",label:"_90654824","shape-rounded":"c05d17c2","size-small":"_1e29d236","size-normal":"_7246d092","size-large":"_2d084671",disabled:"_2b0b9d95",iconButton:"abd5766f",startIcon:"_380e7c73",endIcon:"_20fe4105","variant-primary":"_7ea1378e","variant-secondary":"_64ee8afd","variant-tertiary":"_650176bf","variant-quaternary":"aa19cb97","tone-destructive":"_7a2d9a8c"};
+//# sourceMappingURL=button.module.css.js.map

package/lib/button/button.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}