@doist/reactist 25.0.0-beta.2 → 25.0.0-beta.3

package/lib/modal/modal.js.map

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

package/lib/notice/notice.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { AlertTone } from '../utils/common-types';
-declare type NoticeProps = {
+type NoticeProps = {
     id?: string;
     children: React.ReactNode;
     tone: AlertTone;

package/lib/notice/notice.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../utils/responsive-props.js"),r=require("../box/box.js"),l=require("../columns/columns.js"),n=require("../icons/alert-icon.js"),o=require("./notice.module.css.js");exports.Notice=function({id:s,children:a,tone:i}){return e.createElement(r.Box,{id:s,role:"alert","aria-live":"polite",className:[o.default.container,t.getClassNames(o.default,"tone",i)]},e.createElement(l.Columns,{space:"small",alignY:"top"},e.createElement(l.Column,{width:"content"},e.createElement(n.AlertIcon,{tone:i})),e.createElement(l.Column,null,e.createElement(r.Box,{paddingY:"xsmall"},a))))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../utils/responsive-props.js"),r=require("../box/box.js"),n=require("../columns/columns.js"),l=require("../icons/alert-icon.js"),o=require("./notice.module.css.js");function a(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,t}var c=a(e);exports.Notice=function({id:e,children:a,tone:i}){return c.createElement(r.Box,{id:e,role:"alert","aria-live":"polite",className:[o.default.container,t.getClassNames(o.default,"tone",i)]},c.createElement(n.Columns,{space:"small",alignY:"top"},c.createElement(n.Column,{width:"content"},c.createElement(l.AlertIcon,{tone:i})),c.createElement(n.Column,null,c.createElement(r.Box,{paddingY:"xsmall"},a))))};
 //# sourceMappingURL=notice.js.map

package/lib/notice/notice.js.map

@@ -1 +1 @@
-{"version":3,"file":"notice.js","sources":["../../src/notice/notice.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport { Columns, Column } from '../columns'\nimport { AlertIcon } from '../icons/alert-icon'\n\nimport type { AlertTone } from '../utils/common-types'\n\nimport styles from './notice.module.css'\n\ntype NoticeProps = {\n    id?: string\n    children: React.ReactNode\n    tone: AlertTone\n}\n\nfunction Notice({ id, children, tone }: NoticeProps) {\n    return (\n        <Box\n            id={id}\n            role=\"alert\"\n            aria-live=\"polite\"\n            className={[styles.container, getClassNames(styles, 'tone', tone)]}\n        >\n            <Columns space=\"small\" alignY=\"top\">\n                <Column width=\"content\">\n                    <AlertIcon tone={tone} />\n                </Column>\n                <Column>\n                    <Box paddingY=\"xsmall\">{children}</Box>\n                </Column>\n            </Columns>\n        </Box>\n    )\n}\n\nexport { Notice }\nexport type { NoticeProps }\n"],"names":["id","children","tone","React","Box","role","className","styles","container","getClassNames","Columns","space","alignY","Column","width","AlertIcon","paddingY"],"mappings":"0RAgBA,UAAgBA,GAAEA,EAAFC,SAAMA,EAANC,KAAgBA,IAC5B,OACIC,gBAACC,OACGJ,GAAIA,EACJK,KAAK,oBACK,SACVC,UAAW,CAACC,UAAOC,UAAWC,gBAAcF,UAAQ,OAAQL,KAE5DC,gBAACO,WAAQC,MAAM,QAAQC,OAAO,OAC1BT,gBAACU,UAAOC,MAAM,WACVX,gBAACY,aAAUb,KAAMA,KAErBC,gBAACU,cACGV,gBAACC,OAAIY,SAAS,UAAUf"}
+{"version":3,"file":"notice.js","sources":["../../src/notice/notice.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport { Columns, Column } from '../columns'\nimport { AlertIcon } from '../icons/alert-icon'\n\nimport type { AlertTone } from '../utils/common-types'\n\nimport styles from './notice.module.css'\n\ntype NoticeProps = {\n    id?: string\n    children: React.ReactNode\n    tone: AlertTone\n}\n\nfunction Notice({ id, children, tone }: NoticeProps) {\n    return (\n        <Box\n            id={id}\n            role=\"alert\"\n            aria-live=\"polite\"\n            className={[styles.container, getClassNames(styles, 'tone', tone)]}\n        >\n            <Columns space=\"small\" alignY=\"top\">\n                <Column width=\"content\">\n                    <AlertIcon tone={tone} />\n                </Column>\n                <Column>\n                    <Box paddingY=\"xsmall\">{children}</Box>\n                </Column>\n            </Columns>\n        </Box>\n    )\n}\n\nexport { Notice }\nexport type { NoticeProps }\n"],"names":["id","children","tone","React","createElement","Box","role","aria-live","className","styles","container","getClassNames","Columns","space","alignY","Column","width","AlertIcon","paddingY"],"mappings":"qjBAgBA,UAAgBA,GAAEA,EAAFC,SAAMA,EAANC,KAAgBA,IAC5B,OACIC,EAAAC,cAACC,MAAG,CACAL,GAAIA,EACJM,KAAK,QAAOC,YACF,SACVC,UAAW,CAACC,EAAAA,QAAOC,UAAWC,EAAaA,cAACF,UAAQ,OAAQP,KAE5DC,EAACC,cAAAQ,WAAQC,MAAM,QAAQC,OAAO,OAC1BX,EAAAC,cAACW,SAAM,CAACC,MAAM,WACVb,EAAAC,cAACa,YAAU,CAAAf,KAAMA,KAErBC,EAAAC,cAACW,EAAAA,OAAM,KACHZ,EAAAC,cAACC,MAAG,CAACa,SAAS,UAAUjB"}

package/lib/password-field/password-field.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),t=require("../button/button.js"),o=require("../icons/password-visible-icon.js"),s=require("../icons/password-hidden-icon.js"),i=require("../text-field/text-field.js");const a=["togglePasswordLabel"];exports.PasswordField=r.forwardRef((function(l,n){let{togglePasswordLabel:d="Toggle password visibility"}=l,c=e.objectWithoutProperties(l,a);const[u,b]=r.useState(!1),p=u?o.PasswordVisibleIcon:s.PasswordHiddenIcon;return r.createElement(i.TextField,e.objectSpread2(e.objectSpread2({},c),{},{ref:n,type:u?"text":"password",endSlot:r.createElement(t.IconButton,{variant:"quaternary",icon:r.createElement(p,{"aria-hidden":!0}),"aria-label":d,onClick:()=>b(e=>!e)})}))}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),t=require("../icons/password-visible-icon.js"),o=require("../icons/password-hidden-icon.js"),i=require("../text-field/text-field.js"),n=require("../button/button.js");function s(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,r}var a=s(r);const l=["togglePasswordLabel"];exports.PasswordField=a.forwardRef((function(r,s){let{togglePasswordLabel:c="Toggle password visibility"}=r,u=e.objectWithoutProperties(r,l);const[d,b]=a.useState(!1),f=d?t.PasswordVisibleIcon:o.PasswordHiddenIcon;return a.createElement(i.TextField,e.objectSpread2(e.objectSpread2({},u),{},{ref:s,type:d?"text":"password",endSlot:a.createElement(n.IconButton,{variant:"quaternary",icon:a.createElement(f,{"aria-hidden":!0}),"aria-label":c,onClick:()=>b(e=>!e)})}))}));
 //# sourceMappingURL=password-field.js.map

package/lib/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 { IconButton } from '../button'\n\nimport type { BaseFieldVariantProps } from '../base-field'\n\ninterface PasswordFieldProps\n    extends Omit<TextFieldProps, 'type' | 'startSlot' | 'endSlot'>,\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":["React","ref","togglePasswordLabel","props","isPasswordVisible","setPasswordVisible","Icon","PasswordVisibleIcon","PasswordHiddenIcon","TextField","type","endSlot","IconButton","variant","icon","onClick","v"],"mappings":"8WAgBsBA,cAAuD,WAEzEC,OADAC,oBAAEA,EAAsB,gCAAiCC,iCAGzD,MAAOC,EAAmBC,GAAsBL,YAAe,GACzDM,EAAOF,EAAoBG,sBAAsBC,qBACvD,OACIR,gBAACS,+CACON,OACJF,IAAKA,EAELS,KAAMN,EAAoB,OAAS,WACnCO,QACIX,gBAACY,cACGC,QAAQ,aACRC,KAAMd,gBAACM,mCACKJ,EACZa,QAAS,IAAMV,EAAoBW,IAAOA"}
+{"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\ninterface PasswordFieldProps\n    extends Omit<TextFieldProps, 'type' | 'startSlot' | 'endSlot'>,\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":["React","forwardRef","ref","togglePasswordLabel","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","isPasswordVisible","setPasswordVisible","useState","Icon","PasswordVisibleIcon","PasswordHiddenIcon","TextField","type","endSlot","IconButton","variant","icon","createElement","aria-hidden","aria-label","onClick","v"],"mappings":"yoBAgBsBA,EAAMC,YAAiD,SAEzEC,EAAAA,GAAG,IADHC,oBAAEA,EAAsB,8BACrBC,EADsDC,EACtDC,EAAAC,wBAAAH,EAAAI,GAEH,MAAOC,EAAmBC,GAAsBV,EAAMW,UAAS,GACzDC,EAAOH,EAAoBI,EAAHA,oBAAyBC,qBACvD,OACId,gBAACe,+CACOV,GADR,GAAA,CAEIH,IAAKA,EAELc,KAAMP,EAAoB,OAAS,WACnCQ,QACIjB,gBAACkB,aAAU,CACPC,QAAQ,aACRC,KAAMpB,EAAAqB,cAACT,EAAmB,CAAAU,eAAA,IAAAC,aACdpB,EACZqB,QAAS,IAAMd,EAAoBe,IAAOA"}

package/lib/prose/prose.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),o=require("../box/box.js"),t=require("./prose.module.css.js");const a=["darkModeTypography","exceptionallySetClassName"];exports.Prose=function(l){let{darkModeTypography:s,exceptionallySetClassName:p}=l,u=e.objectWithoutProperties(l,a);return r.createElement(o.Box,e.objectSpread2(e.objectSpread2({},u),{},{className:[t.default.prose,s?t.default.darkModeTypography:null,p]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),t=require("../box/box.js"),o=require("./prose.module.css.js");function a(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,r}var l=a(r);const u=["darkModeTypography","exceptionallySetClassName"];exports.Prose=function(r){let{darkModeTypography:a,exceptionallySetClassName:s}=r,c=e.objectWithoutProperties(r,u);return l.createElement(t.Box,e.objectSpread2(e.objectSpread2({},c),{},{className:[o.default.prose,a?o.default.darkModeTypography:null,s]}))};
 //# sourceMappingURL=prose.js.map

package/lib/prose/prose.js.map

@@ -1 +1 @@
-{"version":3,"file":"prose.js","sources":["../../src/prose/prose.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport styles from './prose.module.css'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\ninterface ProseProps extends ObfuscatedClassName {\n    /**\n     * The prose content.\n     *\n     * This must consist of React nodes and elements. It is the consumer’s responsibility to\n     * generate this from other sources, such as converting raw markdown content to React elements,\n     * etc.\n     *\n     * Alternatively, you can use `<Prose dangerouslySetInnerHTML={{ __html: htmlString }}` />`\n     * instead.\n     */\n    children?: React.ReactNode\n\n    /**\n     * Sets the prose content to be raw HTML stored in a string value.\n     *\n     * Warning: be advised that setting HTML content in this way is risky, because you can\n     * inadvertently be vulnerable to a cross-site scripting (XSS) attack. Make sure you only use\n     * this option with HTML content that has been sanitized (especially if it comes from user\n     * provided content) or content that you fully control how it's generated, that cannot possibly\n     * have any XSS content in it.\n     *\n     * @see https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml\n     */\n    dangerouslySetInnerHTML?: { __html: string } | undefined\n\n    /**\n     * Whether to customize the typography styles for dark mode.\n     *\n     * Applies finessed optimizations since our eyes perceive space differently when looking at dark\n     * text on a light background and light text on a dark background.\n     *\n     * This does not apply a dark theme on the text. That's still the consumer apps’ responsibility.\n     */\n    darkModeTypography: boolean\n}\n\n/**\n * Used to style HTML you don’t control, like HTML content generated from Markdown.\n */\nfunction Prose({ darkModeTypography, exceptionallySetClassName, ...props }: ProseProps) {\n    return (\n        <Box\n            {...props}\n            className={[\n                styles.prose,\n                darkModeTypography ? styles.darkModeTypography : null,\n                exceptionallySetClassName,\n            ]}\n        />\n    )\n}\n\nexport { Prose }\nexport type { ProseProps }\n"],"names":["darkModeTypography","exceptionallySetClassName","props","React","Box","className","styles","prose"],"mappings":"wRA6CA,gBAAeA,mBAAEA,EAAFC,0BAAsBA,KAA8BC,iCAC/D,OACIC,gBAACC,yCACOF,OACJG,UAAW,CACPC,UAAOC,MACPP,EAAqBM,UAAON,mBAAqB,KACjDC"}
+{"version":3,"file":"prose.js","sources":["../../src/prose/prose.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport styles from './prose.module.css'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\ninterface ProseProps extends ObfuscatedClassName {\n    /**\n     * The prose content.\n     *\n     * This must consist of React nodes and elements. It is the consumer’s responsibility to\n     * generate this from other sources, such as converting raw markdown content to React elements,\n     * etc.\n     *\n     * Alternatively, you can use `<Prose dangerouslySetInnerHTML={{ __html: htmlString }}` />`\n     * instead.\n     */\n    children?: React.ReactNode\n\n    /**\n     * Sets the prose content to be raw HTML stored in a string value.\n     *\n     * Warning: be advised that setting HTML content in this way is risky, because you can\n     * inadvertently be vulnerable to a cross-site scripting (XSS) attack. Make sure you only use\n     * this option with HTML content that has been sanitized (especially if it comes from user\n     * provided content) or content that you fully control how it's generated, that cannot possibly\n     * have any XSS content in it.\n     *\n     * @see https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml\n     */\n    dangerouslySetInnerHTML?: { __html: string } | undefined\n\n    /**\n     * Whether to customize the typography styles for dark mode.\n     *\n     * Applies finessed optimizations since our eyes perceive space differently when looking at dark\n     * text on a light background and light text on a dark background.\n     *\n     * This does not apply a dark theme on the text. That's still the consumer apps’ responsibility.\n     */\n    darkModeTypography: boolean\n}\n\n/**\n * Used to style HTML you don’t control, like HTML content generated from Markdown.\n */\nfunction Prose({ darkModeTypography, exceptionallySetClassName, ...props }: ProseProps) {\n    return (\n        <Box\n            {...props}\n            className={[\n                styles.prose,\n                darkModeTypography ? styles.darkModeTypography : null,\n                exceptionallySetClassName,\n            ]}\n        />\n    )\n}\n\nexport { Prose }\nexport type { ProseProps }\n"],"names":["_ref","darkModeTypography","exceptionallySetClassName","props","_objectWithoutProperties","objectWithoutProperties","_excluded","React","createElement","Box","className","styles","prose"],"mappings":"mjBA6CA,SAAsFA,GAAA,IAAvEC,mBAAEA,EAAFC,0BAAsBA,GAAiDF,EAAnBG,EAAmBC,EAAAC,wBAAAL,EAAAM,GAClF,OACIC,EAACC,cAAAC,yCACON,GADR,GAAA,CAEIO,UAAW,CACPC,EAAM,QAACC,MACPX,EAAqBU,EAAAA,QAAOV,mBAAqB,KACjDC"}

package/lib/select-field/select-field.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),a=require("../box/box.js"),t=require("../base-field/base-field.js"),l=require("./select-field.module.css.js");const i=["variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","children","hidden","aria-describedby"];function d(a){return r.createElement("svg",e.objectSpread2({width:"16",height:"16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a),r.createElement("path",{d:"M11.646 5.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.647z",fill:"currentColor"}))}exports.SelectField=r.forwardRef((function(n,s){let{variant:o="default",id:c,label:b,secondaryLabel:u,auxiliaryLabel:h,hint:p,message:f,tone:m,maxWidth:x,children:j,hidden:y,"aria-describedby":g}=n,v=e.objectWithoutProperties(n,i);return r.createElement(t.BaseField,{variant:o,id:c,label:b,secondaryLabel:u,auxiliaryLabel:h,hint:p,message:f,tone:m,maxWidth:x,hidden:y,"aria-describedby":g},t=>r.createElement(a.Box,{"data-testid":"select-wrapper",className:[l.default.selectWrapper,"error"===m?l.default.error:null,"bordered"===o?l.default.bordered:null]},r.createElement("select",e.objectSpread2(e.objectSpread2(e.objectSpread2({},v),t),{},{ref:s}),j),r.createElement(d,{"aria-hidden":!0})))}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),t=require("../base-field/base-field.js"),a=require("../box/box.js"),l=require("./select-field.module.css.js");function i(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,r}var d=i(r);const n=["variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","children","hidden","aria-describedby"];function c(r){return d.createElement("svg",e.objectSpread2({width:"16",height:"16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},r),d.createElement("path",{d:"M11.646 5.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.647z",fill:"currentColor"}))}exports.SelectField=d.forwardRef((function(r,i){let{variant:o="default",id:s,label:u,secondaryLabel:b,auxiliaryLabel:f,hint:h,message:p,tone:m,maxWidth:j,children:y,hidden:x,"aria-describedby":g}=r,v=e.objectWithoutProperties(r,n);return d.createElement(t.BaseField,{variant:o,id:s,label:u,secondaryLabel:b,auxiliaryLabel:f,hint:h,message:p,tone:m,maxWidth:j,hidden:x,"aria-describedby":g},r=>d.createElement(a.Box,{"data-testid":"select-wrapper",className:[l.default.selectWrapper,"error"===m?l.default.error:null,"bordered"===o?l.default.bordered:null]},d.createElement("select",e.objectSpread2(e.objectSpread2(e.objectSpread2({},v),r),{},{ref:i}),y),d.createElement(c,{"aria-hidden":!0})))}));
 //# sourceMappingURL=select-field.js.map

package/lib/select-field/select-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-field.js","sources":["../../src/select-field/select-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './select-field.module.css'\n\ninterface SelectFieldProps extends FieldComponentProps<HTMLSelectElement>, BaseFieldVariantProps {}\n\nconst SelectField = React.forwardRef<HTMLSelectElement, SelectFieldProps>(function SelectField(\n    {\n        variant = 'default',\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        maxWidth,\n        children,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            message={message}\n            tone={tone}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box\n                    data-testid=\"select-wrapper\"\n                    className={[\n                        styles.selectWrapper,\n                        tone === 'error' ? styles.error : null,\n                        variant === 'bordered' ? styles.bordered : null,\n                    ]}\n                >\n                    <select {...props} {...extraProps} ref={ref}>\n                        {children}\n                    </select>\n                    <SelectChevron aria-hidden />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nfunction SelectChevron(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n            <path\n                d=\"M11.646 5.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.647z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\nexport { SelectField }\nexport type { SelectFieldProps }\n"],"names":["SelectChevron","props","React","width","height","fill","xmlns","d","ref","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","children","hidden","aria-describedby","ariaDescribedBy","BaseField","extraProps","Box","className","styles","selectWrapper","error","bordered"],"mappings":"4YA0DA,SAASA,EAAcC,GACnB,OACIC,uCAAKC,MAAM,KAAKC,OAAO,KAAKC,KAAK,OAAOC,MAAM,8BAAiCL,GAC3EC,wBACIK,EAAE,0GACFF,KAAK,sCAxDDH,cAAsD,WAgBtEM,OAfAC,QACIA,EAAU,UADdC,GAEIA,EAFJC,MAGIA,EAHJC,eAIIA,EAJJC,eAKIA,EALJC,KAMIA,EANJC,QAOIA,EAPJC,KAQIA,EARJC,SASIA,EATJC,SAUIA,EAVJC,OAWIA,EACAC,mBAAoBC,KACjBpB,iCAIP,OACIC,gBAACoB,aACGb,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNC,QAASA,EACTC,KAAMA,EACNC,SAAUA,EACVE,OAAQA,qBACUE,GAEhBE,GACErB,gBAACsB,qBACe,iBACZC,UAAW,CACPC,UAAOC,cACE,UAATX,EAAmBU,UAAOE,MAAQ,KACtB,aAAZnB,EAAyBiB,UAAOG,SAAW,OAG/C3B,4EAAYD,GAAWsB,OAAYf,IAAKA,IACnCU,GAELhB,gBAACF"}
+{"version":3,"file":"select-field.js","sources":["../../src/select-field/select-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './select-field.module.css'\n\ninterface SelectFieldProps extends FieldComponentProps<HTMLSelectElement>, BaseFieldVariantProps {}\n\nconst SelectField = React.forwardRef<HTMLSelectElement, SelectFieldProps>(function SelectField(\n    {\n        variant = 'default',\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        maxWidth,\n        children,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            message={message}\n            tone={tone}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box\n                    data-testid=\"select-wrapper\"\n                    className={[\n                        styles.selectWrapper,\n                        tone === 'error' ? styles.error : null,\n                        variant === 'bordered' ? styles.bordered : null,\n                    ]}\n                >\n                    <select {...props} {...extraProps} ref={ref}>\n                        {children}\n                    </select>\n                    <SelectChevron aria-hidden />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nfunction SelectChevron(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n            <path\n                d=\"M11.646 5.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.647z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\nexport { SelectField }\nexport type { SelectFieldProps }\n"],"names":["SelectChevron","props","React","createElement","_objectSpread","width","height","fill","xmlns","d","forwardRef","ref","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","children","hidden","aria-describedby","ariaDescribedBy","_ref","_objectWithoutProperties","objectWithoutProperties","_excluded","BaseField","extraProps","Box","data-testid","className","styles","selectWrapper","error","bordered","objectSpread2","aria-hidden"],"mappings":"uqBA0DA,SAASA,EAAcC,GACnB,OACIC,EAAKC,cAAA,MAALC,gBAAA,CAAKC,MAAM,KAAKC,OAAO,KAAKC,KAAK,OAAOC,MAAM,8BAAiCP,GAC3EC,EACIC,cAAA,OAAA,CAAAM,EAAE,0GACFF,KAAK,sCAxDDL,EAAMQ,YAAgD,SAgBtEC,EAAAA,GAAG,IAfHC,QACIA,EAAU,UADdC,GAEIA,EAFJC,MAGIA,EAHJC,eAIIA,EAJJC,eAKIA,EALJC,KAMIA,EANJC,QAOIA,EAPJC,KAQIA,EARJC,SASIA,EATJC,SAUIA,EAVJC,OAWIA,EACAC,mBAAoBC,GAGrBC,EAFIxB,EAEJyB,EAAAC,wBAAAF,EAAAG,GAEH,OACI1B,EAACC,cAAA0B,YACG,CAAAjB,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNC,QAASA,EACTC,KAAMA,EACNC,SAAUA,EACVE,OAAQA,EAAMC,mBACIC,GAEhBM,GACE5B,EAACC,cAAA4B,MACe,CAAAC,cAAA,iBACZC,UAAW,CACPC,EAAM,QAACC,cACE,UAAThB,EAAmBe,EAAM,QAACE,MAAQ,KACtB,aAAZxB,EAAyBsB,EAAAA,QAAOG,SAAW,OAG/CnC,EAAYC,cAAA,SAAZC,EAAAkC,cAAAlC,EAAAkC,cAAAlC,gBAAA,GAAYH,GAAW6B,GAAvB,GAAA,CAAmCnB,IAAKA,IACnCU,GAELnB,EAAAC,cAACH,EAA4B,CAAAuC,eAAA"}

package/lib/spinner/spinner.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("./spinner.module.css.js");exports.Spinner=function({size:a=24}){return e.createElement("svg",{"aria-hidden":!0,width:a,height:a,viewBox:"0 0 24 24",className:t.default.svg,"data-chromatic":"ignore"},e.createElement("g",{fill:"none",fillRule:"nonzero"},e.createElement("path",{className:t.default.tint,d:"M17.945 3.958A9.955 9.955 0 0 0 12 2c-2.19 0-4.217.705-5.865 1.9L5.131 2.16A11.945 11.945 0 0 1 12 0c2.59 0 4.99.82 6.95 2.217l-1.005 1.741z"}),e.createElement("path",{className:t.default.fill,d:"M5.13 2.16L6.136 3.9A9.987 9.987 0 0 0 2 12c0 5.523 4.477 10 10 10s10-4.477 10-10a9.986 9.986 0 0 0-4.055-8.042l1.006-1.741A11.985 11.985 0 0 1 24 12c0 6.627-5.373 12-12 12S0 18.627 0 12c0-4.073 2.029-7.671 5.13-9.84z"})))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("./spinner.module.css.js");function r(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,t}var a=r(e);exports.Spinner=function({size:e=24}){return a.createElement("svg",{"aria-hidden":!0,width:e,height:e,viewBox:"0 0 24 24",className:t.default.svg,"data-chromatic":"ignore"},a.createElement("g",{fill:"none",fillRule:"nonzero"},a.createElement("path",{className:t.default.tint,d:"M17.945 3.958A9.955 9.955 0 0 0 12 2c-2.19 0-4.217.705-5.865 1.9L5.131 2.16A11.945 11.945 0 0 1 12 0c2.59 0 4.99.82 6.95 2.217l-1.005 1.741z"}),a.createElement("path",{className:t.default.fill,d:"M5.13 2.16L6.136 3.9A9.987 9.987 0 0 0 2 12c0 5.523 4.477 10 10 10s10-4.477 10-10a9.986 9.986 0 0 0-4.055-8.042l1.006-1.741A11.985 11.985 0 0 1 24 12c0 6.627-5.373 12-12 12S0 18.627 0 12c0-4.073 2.029-7.671 5.13-9.84z"})))};
 //# sourceMappingURL=spinner.js.map

package/lib/spinner/spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.js","sources":["../../src/spinner/spinner.tsx"],"sourcesContent":["import * as React from 'react'\nimport styles from './spinner.module.css'\n\nfunction Spinner({ size = 24 }: { size?: number }) {\n    return (\n        <svg\n            aria-hidden\n            width={size}\n            height={size}\n            viewBox=\"0 0 24 24\"\n            className={styles.svg}\n            data-chromatic=\"ignore\"\n        >\n            <g fill=\"none\" fillRule=\"nonzero\">\n                <path\n                    className={styles.tint}\n                    d=\"M17.945 3.958A9.955 9.955 0 0 0 12 2c-2.19 0-4.217.705-5.865 1.9L5.131 2.16A11.945 11.945 0 0 1 12 0c2.59 0 4.99.82 6.95 2.217l-1.005 1.741z\"\n                />\n                <path\n                    className={styles.fill}\n                    d=\"M5.13 2.16L6.136 3.9A9.987 9.987 0 0 0 2 12c0 5.523 4.477 10 10 10s10-4.477 10-10a9.986 9.986 0 0 0-4.055-8.042l1.006-1.741A11.985 11.985 0 0 1 24 12c0 6.627-5.373 12-12 12S0 18.627 0 12c0-4.073 2.029-7.671 5.13-9.84z\"\n                />\n            </g>\n        </svg>\n    )\n}\n\nexport { Spinner }\n"],"names":["size","React","width","height","viewBox","className","styles","svg","fill","fillRule","tint","d"],"mappings":"gJAGA,UAAiBA,KAAEA,EAAO,KACtB,OACIC,wCAEIC,MAAOF,EACPG,OAAQH,EACRI,QAAQ,YACRC,UAAWC,UAAOC,qBACH,UAEfN,qBAAGO,KAAK,OAAOC,SAAS,WACpBR,wBACII,UAAWC,UAAOI,KAClBC,EAAE,iJAENV,wBACII,UAAWC,UAAOE,KAClBG,EAAE"}
+{"version":3,"file":"spinner.js","sources":["../../src/spinner/spinner.tsx"],"sourcesContent":["import * as React from 'react'\nimport styles from './spinner.module.css'\n\nfunction Spinner({ size = 24 }: { size?: number }) {\n    return (\n        <svg\n            aria-hidden\n            width={size}\n            height={size}\n            viewBox=\"0 0 24 24\"\n            className={styles.svg}\n            data-chromatic=\"ignore\"\n        >\n            <g fill=\"none\" fillRule=\"nonzero\">\n                <path\n                    className={styles.tint}\n                    d=\"M17.945 3.958A9.955 9.955 0 0 0 12 2c-2.19 0-4.217.705-5.865 1.9L5.131 2.16A11.945 11.945 0 0 1 12 0c2.59 0 4.99.82 6.95 2.217l-1.005 1.741z\"\n                />\n                <path\n                    className={styles.fill}\n                    d=\"M5.13 2.16L6.136 3.9A9.987 9.987 0 0 0 2 12c0 5.523 4.477 10 10 10s10-4.477 10-10a9.986 9.986 0 0 0-4.055-8.042l1.006-1.741A11.985 11.985 0 0 1 24 12c0 6.627-5.373 12-12 12S0 18.627 0 12c0-4.073 2.029-7.671 5.13-9.84z\"\n                />\n            </g>\n        </svg>\n    )\n}\n\nexport { Spinner }\n"],"names":["size","React","width","height","viewBox","className","styles","svg","createElement","fill","fillRule","tint","d"],"mappings":"2aAGA,UAAiBA,KAAEA,EAAO,KACtB,OACIC,wCAEIC,MAAOF,EACPG,OAAQH,EACRI,QAAQ,YACRC,UAAWC,EAAM,QAACC,qBACH,UAEfN,EAAAO,cAAA,IAAA,CAAGC,KAAK,OAAOC,SAAS,WACpBT,EACIO,cAAA,OAAA,CAAAH,UAAWC,EAAM,QAACK,KAClBC,EAAE,iJAENX,EAAAO,cAAA,OAAA,CACIH,UAAWC,EAAM,QAACG,KAClBG,EAAE"}

package/lib/stack/stack.d.ts

@@ -1,7 +1,7 @@
 import type { ResponsiveProp } from '../utils/responsive-props';
 import type { DividerWeight, Space } from '../utils/common-types';
 import type { ReusableBoxProps } from '../box';
-declare type Align = 'start' | 'center' | 'end';
+type Align = 'start' | 'center' | 'end';
 interface StackProps extends ReusableBoxProps {
     /** Space between items */
     space?: ResponsiveProp<Space>;

package/lib/stack/stack.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 r=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),i=(e(t),require("../utils/polymorphism.js")),l=require("../utils/responsive-props.js"),n=require("../box/box.js"),a=require("../divider/divider.js"),s=e(require("react-keyed-flatten-children"));const o=["as","space","align","dividers","width","children","exceptionallySetClassName"];exports.Stack=i.polymorphicComponent((function(e,i){let{as:c,space:d,align:p,dividers:u="none",width:m="full",children:f,exceptionallySetClassName:v}=e,h=r.objectWithoutProperties(e,o);const x=void 0===p?void 0:l.mapResponsiveProp(p,e=>"start"===e?"flexStart":"end"===e?"flexEnd":"center");return t.createElement(n.Box,r.objectSpread2(r.objectSpread2({},h),{},{display:"flex",flexDirection:"column",width:m,alignItems:x,gap:d,as:c,className:v,ref:i}),"none"!==u?t.Children.map(s(f),(e,r)=>r>0?t.createElement(t.Fragment,null,t.createElement(a.Divider,{weight:u}),e):e):f)}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),t=require("react-keyed-flatten-children"),i=require("../utils/polymorphism.js"),n=require("../utils/responsive-props.js"),l=require("../box/box.js"),a=require("../divider/divider.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var i=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,i.get?i:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,r}var c=s(r),u=o(t);const d=["as","space","align","dividers","width","children","exceptionallySetClassName"];exports.Stack=i.polymorphicComponent((function(r,t){let{as:i,space:o,align:s,dividers:p="none",width:f="full",children:m,exceptionallySetClassName:v}=r,j=e.objectWithoutProperties(r,d);const b=void 0===s?void 0:n.mapResponsiveProp(s,e=>"start"===e?"flexStart":"end"===e?"flexEnd":"center");return c.createElement(l.Box,e.objectSpread2(e.objectSpread2({},j),{},{display:"flex",flexDirection:"column",width:f,alignItems:b,gap:o,as:i,className:v,ref:t}),"none"!==p?c.Children.map(u.default(m),(e,r)=>r>0?c.createElement(c.Fragment,null,c.createElement(a.Divider,{weight:p}),e):e):m)}));
 //# sourceMappingURL=stack.js.map

package/lib/stack/stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"stack.js","sources":["../../src/stack/stack.tsx"],"sourcesContent":["import * as React from 'react'\nimport flattenChildren from 'react-keyed-flatten-children'\nimport { polymorphicComponent } from '../utils/polymorphism'\nimport { mapResponsiveProp } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport { Divider } from '../divider'\n\nimport type { ResponsiveProp } from '../utils/responsive-props'\nimport type { DividerWeight, Space } from '../utils/common-types'\nimport type { BoxProps, ReusableBoxProps } from '../box'\n\ntype Align = 'start' | 'center' | 'end'\n\ninterface StackProps extends ReusableBoxProps {\n    /** Space between items */\n    space?: ResponsiveProp<Space>\n    /** Align items horizontally */\n    align?: ResponsiveProp<Align>\n    /** The weight of the dividers to add. Defaults to 'none', which means no dividers are added */\n    dividers?: DividerWeight\n}\n\nconst Stack = polymorphicComponent<'div', StackProps>(function Stack(\n    {\n        as,\n        space,\n        align,\n        dividers = 'none',\n        width = 'full',\n        children,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    const alignItems: BoxProps['alignItems'] =\n        align === undefined\n            ? undefined\n            : mapResponsiveProp(align, (align) =>\n                  align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center',\n              )\n\n    return (\n        <Box\n            {...props}\n            display=\"flex\"\n            flexDirection=\"column\"\n            width={width}\n            alignItems={alignItems}\n            gap={space}\n            as={as}\n            className={exceptionallySetClassName}\n            ref={ref}\n        >\n            {dividers !== 'none'\n                ? React.Children.map(flattenChildren(children), (child, index) =>\n                      index > 0 ? (\n                          <>\n                              <Divider weight={dividers} />\n                              {child}\n                          </>\n                      ) : (\n                          child\n                      ),\n                  )\n                : children}\n        </Box>\n    )\n})\n\nexport type { StackProps }\nexport { Stack }\n"],"names":["polymorphicComponent","ref","as","space","align","dividers","width","children","exceptionallySetClassName","props","alignItems","undefined","mapResponsiveProp","React","Box","display","flexDirection","gap","className","map","flattenChildren","child","index","Divider","weight"],"mappings":"ggBAsBcA,wBAAwC,WAWlDC,OAVAC,GACIA,EADJC,MAEIA,EAFJC,MAGIA,EAHJC,SAIIA,EAAW,OAJfC,MAKIA,EAAQ,OALZC,SAMIA,EANJC,0BAOIA,KACGC,iCAIP,MAAMC,OACQC,IAAVP,OACMO,EACAC,oBAAkBR,EAAQA,GACZ,UAAVA,EAAoB,YAAwB,QAAVA,EAAkB,UAAY,UAG9E,OACIS,gBAACC,yCACOL,OACJM,QAAQ,OACRC,cAAc,SACdV,MAAOA,EACPI,WAAYA,EACZO,IAAKd,EACLD,GAAIA,EACJgB,UAAWV,EACXP,IAAKA,IAES,SAAbI,EACKQ,WAAeM,IAAIC,EAAgBb,GAAW,CAACc,EAAOC,IAClDA,EAAQ,EACJT,gCACIA,gBAACU,WAAQC,OAAQnB,IAChBgB,GAGLA,GAGRd"}
+{"version":3,"file":"stack.js","sources":["../../src/stack/stack.tsx"],"sourcesContent":["import * as React from 'react'\nimport flattenChildren from 'react-keyed-flatten-children'\nimport { polymorphicComponent } from '../utils/polymorphism'\nimport { mapResponsiveProp } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport { Divider } from '../divider'\n\nimport type { ResponsiveProp } from '../utils/responsive-props'\nimport type { DividerWeight, Space } from '../utils/common-types'\nimport type { BoxProps, ReusableBoxProps } from '../box'\n\ntype Align = 'start' | 'center' | 'end'\n\ninterface StackProps extends ReusableBoxProps {\n    /** Space between items */\n    space?: ResponsiveProp<Space>\n    /** Align items horizontally */\n    align?: ResponsiveProp<Align>\n    /** The weight of the dividers to add. Defaults to 'none', which means no dividers are added */\n    dividers?: DividerWeight\n}\n\nconst Stack = polymorphicComponent<'div', StackProps>(function Stack(\n    {\n        as,\n        space,\n        align,\n        dividers = 'none',\n        width = 'full',\n        children,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    const alignItems: BoxProps['alignItems'] =\n        align === undefined\n            ? undefined\n            : mapResponsiveProp(align, (align) =>\n                  align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center',\n              )\n\n    return (\n        <Box\n            {...props}\n            display=\"flex\"\n            flexDirection=\"column\"\n            width={width}\n            alignItems={alignItems}\n            gap={space}\n            as={as}\n            className={exceptionallySetClassName}\n            ref={ref}\n        >\n            {dividers !== 'none'\n                ? React.Children.map(flattenChildren(children), (child, index) =>\n                      index > 0 ? (\n                          <>\n                              <Divider weight={dividers} />\n                              {child}\n                          </>\n                      ) : (\n                          child\n                      ),\n                  )\n                : children}\n        </Box>\n    )\n})\n\nexport type { StackProps }\nexport { Stack }\n"],"names":["polymorphicComponent","_ref","ref","as","space","align","dividers","width","children","exceptionallySetClassName","props","_objectWithoutProperties","objectWithoutProperties","_excluded","alignItems","undefined","mapResponsiveProp","React","createElement","Box","display","flexDirection","gap","className","Children","map","flattenChildren","child","index","Fragment","Divider","weight"],"mappings":"0xBAsBcA,EAAAA,sBAAwC,SAAAC,EAWlDC,GAAG,IAVHC,GACIA,EADJC,MAEIA,EAFJC,MAGIA,EAHJC,SAIIA,EAAW,OAJfC,MAKIA,EAAQ,OALZC,SAMIA,EANJC,0BAOIA,GAGDR,EAFIS,EAEJC,EAAAC,wBAAAX,EAAAY,GAEH,MAAMC,OACQC,IAAVV,OACMU,EACAC,EAAAA,kBAAkBX,EAAQA,GACZ,UAAVA,EAAoB,YAAwB,QAAVA,EAAkB,UAAY,UAG9E,OACIY,EAACC,cAAAC,yCACOT,GADR,GAAA,CAEIU,QAAQ,OACRC,cAAc,SACdd,MAAOA,EACPO,WAAYA,EACZQ,IAAKlB,EACLD,GAAIA,EACJoB,UAAWd,EACXP,IAAKA,IAES,SAAbI,EACKW,EAAMO,SAASC,IAAIC,EAAe,QAAClB,GAAW,CAACmB,EAAOC,IAClDA,EAAQ,EACJX,EAAAC,cAAAD,EAAAY,SAAA,KACIZ,EAAAC,cAACY,UAAO,CAACC,OAAQzB,IAChBqB,GAGLA,GAGRnB"}

package/lib/switch-field/switch-field.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),a=require("../box/box.js"),t=require("../stack/stack.js"),i=require("../hidden-visually/hidden-visually.js"),r=require("../utils/common-helpers.js"),d=require("../text/text.js"),n=require("../base-field/base-field.js"),s=require("./switch-field.module.css.js");const u=["label","hint","disabled","hidden","defaultChecked","id","aria-describedby","aria-label","aria-labelledby","onChange"];exports.SwitchField=l.forwardRef((function(c,o){var b,h,f;let{label:p,hint:m,disabled:y=!1,hidden:k,defaultChecked:v,id:x,"aria-describedby":j,"aria-label":g,"aria-labelledby":q,onChange:E}=c,S=e.objectWithoutProperties(c,u);const B=r.useId(x),C=r.useId(),w=null!=j?j:m?C:void 0,N=null!=g?g:void 0,P=null!=q?q:void 0,[_,F]=l.useState(!1),[H,I]=l.useState(null!=(b=null!=(h=S.checked)?h:v)&&b),K=null!=(f=S.checked)?f:H;return l.createElement(t.Stack,{space:"small",hidden:k},l.createElement(a.Box,{className:[s.default.container,y?s.default.disabled:null,K?s.default.checked:null,_?s.default.keyFocused:null],as:"label",display:"flex",alignItems:"center"},l.createElement(a.Box,{position:"relative",display:"inlineBlock",overflow:"visible",marginRight:"small",flexShrink:0,className:s.default.toggle},l.createElement(i.HiddenVisually,null,l.createElement("input",e.objectSpread2(e.objectSpread2({},S),{},{id:B,type:"checkbox",disabled:y,"aria-describedby":w,"aria-label":N,"aria-labelledby":P,ref:o,checked:K,onChange:e=>{null==E||E(e),e.defaultPrevented||I(e.currentTarget.checked)},onBlur:e=>{F(!1),null==S||null==S.onBlur||S.onBlur(e)},onKeyUp:e=>{F(!0),null==S||null==S.onKeyUp||S.onKeyUp(e)}}))),l.createElement("span",{className:s.default.handle})),l.createElement(d.Text,{exceptionallySetClassName:s.default.label},p)),m?l.createElement(n.FieldHint,{id:C},m):null)}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),a=require("../box/box.js"),t=require("../stack/stack.js"),r=require("../text/text.js"),i=require("../hidden-visually/hidden-visually.js"),n=require("../base-field/base-field.js"),d=require("../utils/common-helpers.js"),u=require("./switch-field.module.css.js");function s(e){if(e&&e.__esModule)return e;var l=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var t=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(l,a,t.get?t:{enumerable:!0,get:function(){return e[a]}})}})),l.default=e,l}var c=s(l);const o=["label","hint","disabled","hidden","defaultChecked","id","aria-describedby","aria-label","aria-labelledby","onChange"];exports.SwitchField=c.forwardRef((function(l,s){var b,f,h;let{label:p,hint:y,disabled:m=!1,hidden:j,defaultChecked:v,id:k,"aria-describedby":g,"aria-label":x,"aria-labelledby":q,onChange:E}=l,S=e.objectWithoutProperties(l,o);const B=d.useId(k),C=d.useId(),O=null!=g?g:y?C:void 0,P=null!=x?x:void 0,_=null!=q?q:void 0,[w,N]=c.useState(!1),[F,H]=c.useState(null!=(b=null!=(f=S.checked)?f:v)&&b),I=null!=(h=S.checked)?h:F;return c.createElement(t.Stack,{space:"small",hidden:j},c.createElement(a.Box,{className:[u.default.container,m?u.default.disabled:null,I?u.default.checked:null,w?u.default.keyFocused:null],as:"label",display:"flex",alignItems:"center"},c.createElement(a.Box,{position:"relative",display:"inlineBlock",overflow:"visible",marginRight:"small",flexShrink:0,className:u.default.toggle},c.createElement(i.HiddenVisually,null,c.createElement("input",e.objectSpread2(e.objectSpread2({},S),{},{id:B,type:"checkbox",disabled:m,"aria-describedby":O,"aria-label":P,"aria-labelledby":_,ref:s,checked:I,onChange:e=>{null==E||E(e),e.defaultPrevented||H(e.currentTarget.checked)},onBlur:e=>{N(!1),null==S||null==S.onBlur||S.onBlur(e)},onKeyUp:e=>{N(!0),null==S||null==S.onKeyUp||S.onKeyUp(e)}}))),c.createElement("span",{className:u.default.handle})),c.createElement(r.Text,{exceptionallySetClassName:u.default.label},p)),y?c.createElement(n.FieldHint,{id:C},y):null)}));
 //# sourceMappingURL=switch-field.js.map

package/lib/switch-field/switch-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch-field.js","sources":["../../src/switch-field/switch-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Stack } from '../stack'\nimport { Text } from '../text'\nimport { HiddenVisually } from '../hidden-visually'\nimport { FieldComponentProps, FieldHint } from '../base-field'\nimport { useId } from '../utils/common-helpers'\nimport styles from './switch-field.module.css'\n\ninterface SwitchFieldProps\n    extends Omit<\n        FieldComponentProps<HTMLInputElement>,\n        | 'type'\n        | 'secondaryLabel'\n        | 'auxiliaryLabel'\n        | 'maxWidth'\n        | 'aria-describedby'\n        | 'aria-label'\n        | 'aria-labelledby'\n    > {\n    /**\n     * Identifies the element (or elements) that describes the switch for assistive technologies.\n     */\n    'aria-describedby'?: string\n\n    /**\n     * Defines a string value that labels the current switch for assistive technologies.\n     */\n    'aria-label'?: string\n\n    /**\n     * Identifies the element (or elements) that labels the current switch for assistive technologies.\n     */\n    'aria-labelledby'?: string\n}\n\nconst SwitchField = React.forwardRef<HTMLInputElement, SwitchFieldProps>(function SwitchField(\n    {\n        label,\n        hint,\n        disabled = false,\n        hidden,\n        defaultChecked,\n        id: originalId,\n        'aria-describedby': originalAriaDescribedBy,\n        'aria-label': originalAriaLabel,\n        'aria-labelledby': originalAriaLabelledby,\n        onChange,\n        ...props\n    },\n    ref,\n) {\n    const id = useId(originalId)\n    const hintId = useId()\n\n    const ariaDescribedBy = originalAriaDescribedBy ?? (hint ? hintId : undefined)\n    const ariaLabel = originalAriaLabel ?? undefined\n    const ariaLabelledBy = originalAriaLabelledby ?? undefined\n\n    const [keyFocused, setKeyFocused] = React.useState(false)\n    const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n    const isChecked = props.checked ?? checkedState\n\n    return (\n        <Stack space=\"small\" hidden={hidden}>\n            <Box\n                className={[\n                    styles.container,\n                    disabled ? styles.disabled : null,\n                    isChecked ? styles.checked : null,\n                    keyFocused ? styles.keyFocused : null,\n                ]}\n                as=\"label\"\n                display=\"flex\"\n                alignItems=\"center\"\n            >\n                <Box\n                    position=\"relative\"\n                    display=\"inlineBlock\"\n                    overflow=\"visible\"\n                    marginRight=\"small\"\n                    flexShrink={0}\n                    className={styles.toggle}\n                >\n                    <HiddenVisually>\n                        <input\n                            {...props}\n                            id={id}\n                            type=\"checkbox\"\n                            disabled={disabled}\n                            aria-describedby={ariaDescribedBy}\n                            aria-label={ariaLabel}\n                            aria-labelledby={ariaLabelledBy}\n                            ref={ref}\n                            checked={isChecked}\n                            onChange={(event) => {\n                                onChange?.(event)\n                                if (!event.defaultPrevented) {\n                                    setChecked(event.currentTarget.checked)\n                                }\n                            }}\n                            onBlur={(event) => {\n                                setKeyFocused(false)\n                                props?.onBlur?.(event)\n                            }}\n                            onKeyUp={(event) => {\n                                setKeyFocused(true)\n                                props?.onKeyUp?.(event)\n                            }}\n                        />\n                    </HiddenVisually>\n                    <span className={styles.handle} />\n                </Box>\n                <Text exceptionallySetClassName={styles.label}>{label}</Text>\n            </Box>\n            {hint ? <FieldHint id={hintId}>{hint}</FieldHint> : null}\n        </Stack>\n    )\n})\n\nexport { SwitchField }\nexport type { SwitchFieldProps }\n"],"names":["React","ref","label","hint","disabled","hidden","defaultChecked","id","originalId","aria-describedby","originalAriaDescribedBy","aria-label","originalAriaLabel","aria-labelledby","originalAriaLabelledby","onChange","props","useId","hintId","ariaDescribedBy","undefined","ariaLabel","ariaLabelledBy","keyFocused","setKeyFocused","checkedState","setChecked","checked","isChecked","Stack","space","Box","className","styles","container","as","display","alignItems","position","overflow","marginRight","flexShrink","toggle","HiddenVisually","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","handle","Text","exceptionallySetClassName","FieldHint"],"mappings":"0iBAoCoBA,cAAqD,WAcrEC,iBAbAC,MACIA,EADJC,KAEIA,EAFJC,SAGIA,GAAW,EAHfC,OAIIA,EAJJC,eAKIA,EACAC,GAAIC,EACJC,mBAAoBC,EACpBC,aAAcC,EACdC,kBAAmBC,EATvBC,SAUIA,KACGC,iCAIP,MAAMT,EAAKU,QAAMT,GACXU,EAASD,UAETE,QAAkBT,EAAAA,EAA4BP,EAAOe,OAASE,EAC9DC,QAAYT,EAAAA,OAAqBQ,EACjCE,QAAiBR,EAAAA,OAA0BM,GAE1CG,EAAYC,GAAiBxB,YAAe,IAC5CyB,EAAcC,GAAc1B,6BAAegB,EAAMW,WAAWrB,OAC7DsB,WAAYZ,EAAMW,WAAWF,EAEnC,OACIzB,gBAAC6B,SAAMC,MAAM,QAAQzB,OAAQA,GACzBL,gBAAC+B,OACGC,UAAW,CACPC,UAAOC,UACP9B,EAAW6B,UAAO7B,SAAW,KAC7BwB,EAAYK,UAAON,QAAU,KAC7BJ,EAAaU,UAAOV,WAAa,MAErCY,GAAG,QACHC,QAAQ,OACRC,WAAW,UAEXrC,gBAAC+B,OACGO,SAAS,WACTF,QAAQ,cACRG,SAAS,UACTC,YAAY,QACZC,WAAY,EACZT,UAAWC,UAAOS,QAElB1C,gBAAC2C,sBACG3C,2DACQgB,OACJT,GAAIA,EACJqC,KAAK,WACLxC,SAAUA,qBACQe,eACNE,oBACKC,EACjBrB,IAAKA,EACL0B,QAASC,EACTb,SAAW8B,UACP9B,GAAAA,EAAW8B,GACNA,EAAMC,kBACPpB,EAAWmB,EAAME,cAAcpB,UAGvCqB,OAASH,IACLrB,GAAc,SACdR,SAAAA,EAAOgC,QAAPhC,EAAOgC,OAASH,IAEpBI,QAAUJ,IACNrB,GAAc,SACdR,SAAAA,EAAOiC,SAAPjC,EAAOiC,QAAUJ,QAI7B7C,wBAAMgC,UAAWC,UAAOiB,UAE5BlD,gBAACmD,QAAKC,0BAA2BnB,UAAO/B,OAAQA,IAEnDC,EAAOH,gBAACqD,aAAU9C,GAAIW,GAASf,GAAoB"}
+{"version":3,"file":"switch-field.js","sources":["../../src/switch-field/switch-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Stack } from '../stack'\nimport { Text } from '../text'\nimport { HiddenVisually } from '../hidden-visually'\nimport { FieldComponentProps, FieldHint } from '../base-field'\nimport { useId } from '../utils/common-helpers'\nimport styles from './switch-field.module.css'\n\ninterface SwitchFieldProps\n    extends Omit<\n        FieldComponentProps<HTMLInputElement>,\n        | 'type'\n        | 'secondaryLabel'\n        | 'auxiliaryLabel'\n        | 'maxWidth'\n        | 'aria-describedby'\n        | 'aria-label'\n        | 'aria-labelledby'\n    > {\n    /**\n     * Identifies the element (or elements) that describes the switch for assistive technologies.\n     */\n    'aria-describedby'?: string\n\n    /**\n     * Defines a string value that labels the current switch for assistive technologies.\n     */\n    'aria-label'?: string\n\n    /**\n     * Identifies the element (or elements) that labels the current switch for assistive technologies.\n     */\n    'aria-labelledby'?: string\n}\n\nconst SwitchField = React.forwardRef<HTMLInputElement, SwitchFieldProps>(function SwitchField(\n    {\n        label,\n        hint,\n        disabled = false,\n        hidden,\n        defaultChecked,\n        id: originalId,\n        'aria-describedby': originalAriaDescribedBy,\n        'aria-label': originalAriaLabel,\n        'aria-labelledby': originalAriaLabelledby,\n        onChange,\n        ...props\n    },\n    ref,\n) {\n    const id = useId(originalId)\n    const hintId = useId()\n\n    const ariaDescribedBy = originalAriaDescribedBy ?? (hint ? hintId : undefined)\n    const ariaLabel = originalAriaLabel ?? undefined\n    const ariaLabelledBy = originalAriaLabelledby ?? undefined\n\n    const [keyFocused, setKeyFocused] = React.useState(false)\n    const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n    const isChecked = props.checked ?? checkedState\n\n    return (\n        <Stack space=\"small\" hidden={hidden}>\n            <Box\n                className={[\n                    styles.container,\n                    disabled ? styles.disabled : null,\n                    isChecked ? styles.checked : null,\n                    keyFocused ? styles.keyFocused : null,\n                ]}\n                as=\"label\"\n                display=\"flex\"\n                alignItems=\"center\"\n            >\n                <Box\n                    position=\"relative\"\n                    display=\"inlineBlock\"\n                    overflow=\"visible\"\n                    marginRight=\"small\"\n                    flexShrink={0}\n                    className={styles.toggle}\n                >\n                    <HiddenVisually>\n                        <input\n                            {...props}\n                            id={id}\n                            type=\"checkbox\"\n                            disabled={disabled}\n                            aria-describedby={ariaDescribedBy}\n                            aria-label={ariaLabel}\n                            aria-labelledby={ariaLabelledBy}\n                            ref={ref}\n                            checked={isChecked}\n                            onChange={(event) => {\n                                onChange?.(event)\n                                if (!event.defaultPrevented) {\n                                    setChecked(event.currentTarget.checked)\n                                }\n                            }}\n                            onBlur={(event) => {\n                                setKeyFocused(false)\n                                props?.onBlur?.(event)\n                            }}\n                            onKeyUp={(event) => {\n                                setKeyFocused(true)\n                                props?.onKeyUp?.(event)\n                            }}\n                        />\n                    </HiddenVisually>\n                    <span className={styles.handle} />\n                </Box>\n                <Text exceptionallySetClassName={styles.label}>{label}</Text>\n            </Box>\n            {hint ? <FieldHint id={hintId}>{hint}</FieldHint> : null}\n        </Stack>\n    )\n})\n\nexport { SwitchField }\nexport type { SwitchFieldProps }\n"],"names":["React","forwardRef","ref","_ref2","_props$checked","_props$checked2","label","hint","disabled","hidden","defaultChecked","id","originalId","aria-describedby","originalAriaDescribedBy","aria-label","originalAriaLabel","aria-labelledby","originalAriaLabelledby","onChange","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","useId","hintId","ariaDescribedBy","undefined","ariaLabel","ariaLabelledBy","keyFocused","setKeyFocused","useState","checkedState","setChecked","checked","isChecked","createElement","Stack","space","Box","className","styles","container","as","display","alignItems","position","overflow","marginRight","flexShrink","toggle","HiddenVisually","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","handle","Text","exceptionallySetClassName","FieldHint"],"mappings":"q0BAoCoBA,EAAMC,YAA+C,SAcrEC,EAAAA,GAAG,IAAAC,EAAAC,EAAAC,EAAA,IAbHC,MACIA,EADJC,KAEIA,EAFJC,SAGIA,GAAW,EAHfC,OAIIA,EAJJC,eAKIA,EACAC,GAAIC,EACJC,mBAAoBC,EACpBC,aAAcC,EACdC,kBAAmBC,EATvBC,SAUIA,GAGDC,EAFIC,EAEJC,EAAAC,wBAAAH,EAAAI,GAEH,MAAMb,EAAKc,QAAMb,GACXc,EAASD,EAAAA,QAETE,EAAkBb,MAAAA,EAAAA,EAA4BP,EAAOmB,OAASE,EAC9DC,EAAYb,MAAAA,EAAAA,OAAqBY,EACjCE,EAAiBZ,MAAAA,EAAAA,OAA0BU,GAE1CG,EAAYC,GAAiBhC,EAAMiC,UAAS,IAC5CC,EAAcC,GAAcnC,EAAMiC,SAAN,OAAeZ,EAAf,OAAeA,EAAAA,EAAMe,SAArBhC,EAAgCM,IAAhCP,GAC7BkC,SAAYhB,EAAAA,EAAMe,WAAWF,EAEnC,OACIlC,EAACsC,cAAAC,QAAM,CAAAC,MAAM,QAAQ/B,OAAQA,GACzBT,EAACsC,cAAAG,MACG,CAAAC,UAAW,CACPC,EAAAA,QAAOC,UACPpC,EAAWmC,EAAAA,QAAOnC,SAAW,KAC7B6B,EAAYM,EAAM,QAACP,QAAU,KAC7BL,EAAaY,EAAM,QAACZ,WAAa,MAErCc,GAAG,QACHC,QAAQ,OACRC,WAAW,UAEX/C,EAACsC,cAAAG,MACG,CAAAO,SAAS,WACTF,QAAQ,cACRG,SAAS,UACTC,YAAY,QACZC,WAAY,EACZT,UAAWC,EAAM,QAACS,QAElBpD,EAAAsC,cAACe,iBAAc,KACXrD,EAAAsC,cAAA,2CACQjB,GADR,GAAA,CAEIV,GAAIA,EACJ2C,KAAK,WACL9C,SAAUA,qBACQmB,EAAeZ,aACrBc,EAASZ,kBACJa,EACjB5B,IAAKA,EACLkC,QAASC,EACTlB,SAAWoC,IACP,MAAApC,GAAAA,EAAWoC,GACNA,EAAMC,kBACPrB,EAAWoB,EAAME,cAAcrB,UAGvCsB,OAASH,IACLvB,GAAc,GACT,MAALX,SAAAA,EAAOqC,QAAPrC,EAAOqC,OAASH,IAEpBI,QAAUJ,IACNvB,GAAc,GACT,MAALX,SAAAA,EAAOsC,SAAPtC,EAAOsC,QAAUJ,QAI7BvD,EAAAsC,cAAA,OAAA,CAAMI,UAAWC,EAAM,QAACiB,UAE5B5D,EAACsC,cAAAuB,OAAK,CAAAC,0BAA2BnB,EAAM,QAACrC,OAAQA,IAEnDC,EAAOP,gBAAC+D,EAAAA,UAAS,CAACpD,GAAIe,GAASnB,GAAoB"}

package/lib/tabs/tabs.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TabPanelProps as BaseTabPanelProps, RoleProps } from '@ariakit/react';
+import { TabProps as BaseTabProps, TabPanelProps as BaseTabPanelProps } from '@ariakit/react';
 import type { ObfuscatedClassName, Space } from '../utils/common-types';
 interface TabsProps {
     /**
@@ -29,7 +29,7 @@ interface TabsProps {
  * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.
  */
 declare function Tabs({ children, selectedId, defaultSelectedId, variant, onSelectedIdChange, }: TabsProps): React.ReactElement;
-interface TabProps extends ObfuscatedClassName, Pick<RoleProps, 'render'> {
+interface TabProps extends ObfuscatedClassName, Omit<BaseTabProps, 'store' | 'className' | 'children' | 'id'> {
     /**
      * The content to render inside of the tab button
      */
@@ -38,13 +38,12 @@ interface TabProps extends ObfuscatedClassName, Pick<RoleProps, 'render'> {
      * The tab's identifier. This must match its corresponding `<TabPanel>`'s id
      */
     id: string;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 /**
  * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.
  */
-declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLButtonElement>>;
-declare type TabListProps = ({
+declare const Tab: React.ForwardRefExoticComponent<Omit<TabProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+type TabListProps = ({
     /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */
     'aria-label': string;
 } | {
@@ -90,7 +89,7 @@ interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement>, Pick<BaseT
  * corresponding `<Tab>` component.
  */
 declare const TabPanel: React.ForwardRefExoticComponent<TabPanelProps & React.RefAttributes<HTMLDivElement>>;
-declare type TabAwareSlotProps = {
+type TabAwareSlotProps = {
     /**
      * Render prop used to provide the content to be rendered inside the slot. The render prop will
      * be called with the current `selectedId`

package/lib/tabs/tabs.js

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),n=(e(r),e(require("classnames"))),a=require("../box/box.js"),l=require("../inline/inline.js"),o=require("@ariakit/react"),s=require("./tabs.module.css.js");const c=["children","space"],u=["children","id","renderMode"],d=r.createContext(null),i=r.forwardRef((function({children:e,id:t,exceptionallySetClassName:a,render:l,onClick:c},u){const i=r.useContext(d);if(!i)return null;const{variant:b,tabStore:f}=i,p=n(a,s.default.tab,s.default["tab-"+b]);return r.createElement(o.Tab,{id:t,ref:u,store:f,render:l,className:p,onClick:c},e)})),b=r.forwardRef((function(e,n){let{children:a,id:l,renderMode:s="always"}=e,c=t.objectWithoutProperties(e,u);const i=r.useContext(d),[b,f]=r.useState(!1),p=(null==i?void 0:i.tabStore.useState("selectedId"))===l;if(r.useEffect((function(){!b&&p&&f(!0)}),[b,p]),!i)return null;const{tabStore:S}=i;return"always"===s||"active"===s&&p||"lazy"===s&&(p||b)?r.createElement(o.TabPanel,t.objectSpread2(t.objectSpread2({},c),{},{tabId:l,store:S,ref:n}),a):null}));exports.Tab=i,exports.TabAwareSlot=function({children:e}){const t=r.useContext(d),n=null==t?void 0:t.tabStore.useState("selectedId");return t?e({selectedId:n}):null},exports.TabList=function(e){let{children:n,space:u}=e,i=t.objectWithoutProperties(e,c);const b=r.useContext(d);if(!b)return null;const{tabStore:f,variant:p}=b;return r.createElement("div",null,r.createElement(o.TabList,t.objectSpread2({store:f,render:r.createElement(a.Box,{position:"relative",width:"maxContent"})},i),r.createElement(a.Box,{className:[s.default.track,s.default["track-"+p]]}),r.createElement(l.Inline,{space:u},n)))},exports.TabPanel=b,exports.Tabs=function({children:e,selectedId:t,defaultSelectedId:n,variant:a="neutral",onSelectedIdChange:l}){const s=o.useTabStore({defaultSelectedId:n,selectedId:t,setSelectedId:l}),c=s.useState("selectedId"),u=r.useMemo(()=>{var e;return{tabStore:s,variant:a,selectedId:null!=(e=null!=t?t:c)?e:null}},[a,s,t,c]);return r.createElement(d.Provider,{value:u},e)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),r=require("classnames"),n=require("@ariakit/react"),a=require("../inline/inline.js"),l=require("./tabs.module.css.js"),o=require("../box/box.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,t}var s=c(t),i=u(r);const d=["children","space"],f=["children","id","renderMode"],b=s.createContext(null),p=s.forwardRef((function({children:e,id:t,exceptionallySetClassName:r,render:a,onClick:o},u){const c=s.useContext(b);if(!c)return null;const{variant:d,tabStore:f}=c,p=i.default(r,l.default.tab,l.default["tab-"+d]);return s.createElement(n.Tab,{id:t,ref:u,store:f,render:a,className:p,onClick:o},e)})),S=s.forwardRef((function(t,r){let{children:a,id:l,renderMode:o="always"}=t,u=e.objectWithoutProperties(t,f);const c=s.useContext(b),[i,d]=s.useState(!1),p=(null==c?void 0:c.tabStore.useState("selectedId"))===l;if(s.useEffect((function(){!i&&p&&d(!0)}),[i,p]),!c)return null;const{tabStore:S}=c;return"always"===o||"active"===o&&p||"lazy"===o&&(p||i)?s.createElement(n.TabPanel,e.objectSpread2(e.objectSpread2({},u),{},{tabId:l,store:S,ref:r}),a):null}));exports.Tab=p,exports.TabAwareSlot=function({children:e}){const t=s.useContext(b),r=null==t?void 0:t.tabStore.useState("selectedId");return t?e({selectedId:r}):null},exports.TabList=function(t){let{children:r,space:u}=t,c=e.objectWithoutProperties(t,d);const i=s.useContext(b);if(!i)return null;const{tabStore:f,variant:p}=i;return s.createElement("div",null,s.createElement(n.TabList,e.objectSpread2({store:f,render:s.createElement(o.Box,{position:"relative",width:"maxContent"})},c),s.createElement(o.Box,{className:[l.default.track,l.default["track-"+p]]}),s.createElement(a.Inline,{space:u},r)))},exports.TabPanel=S,exports.Tabs=function({children:e,selectedId:t,defaultSelectedId:r,variant:a="neutral",onSelectedIdChange:l}){const o=n.useTabStore({defaultSelectedId:r,selectedId:t,setSelectedId:l}),u=o.useState("selectedId"),c=s.useMemo(()=>{var e;return{tabStore:o,variant:a,selectedId:null!=(e=null!=t?t:u)?e:null}},[a,o,t,u]);return s.createElement(b.Provider,{value:c},e)};
 //# sourceMappingURL=tabs.js.map

package/lib/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport {\n    useTabStore,\n    Tab as BaseTab,\n    TabList as BaseTabList,\n    TabPanel as BaseTabPanel,\n    TabPanelProps as BaseTabPanelProps,\n    TabStore,\n    RoleProps,\n} from '@ariakit/react'\nimport { Inline } from '../inline'\nimport type { ObfuscatedClassName, Space } from '../utils/common-types'\n\nimport styles from './tabs.module.css'\nimport { Box } from '../box'\n\ntype TabsContextValue = Required<Pick<TabsProps, 'variant'>> & {\n    tabStore: TabStore\n}\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null)\n\ninterface TabsProps {\n    /**\n     * The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>`\n     * components\n     */\n    children: React.ReactNode\n\n    /**\n     * Determines the look and feel of the tabs\n     */\n    variant?: 'themed' | 'neutral'\n\n    /**\n     * The id of the selected tab. Assigning a value makes this a controlled component\n     */\n    selectedId?: string | null\n\n    /**\n     * The tab to initially select. This can be used if the component should not\n     * be a controlled component but needs to have a tab selected\n     */\n    defaultSelectedId?: string | null\n\n    /**\n     * Called with the tab id when a tab is selected\n     */\n    onSelectedIdChange?: (selectedId: string | null | undefined) => void\n}\n\n/**\n * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.\n */\nfunction Tabs({\n    children,\n    selectedId,\n    defaultSelectedId,\n    variant = 'neutral',\n    onSelectedIdChange,\n}: TabsProps): React.ReactElement {\n    const tabStore = useTabStore({\n        defaultSelectedId,\n        selectedId,\n        setSelectedId: onSelectedIdChange,\n    })\n    const actualSelectedId = tabStore.useState('selectedId')\n\n    const memoizedTabState = React.useMemo(\n        () => ({ tabStore, variant, selectedId: selectedId ?? actualSelectedId ?? null }),\n        [variant, tabStore, selectedId, actualSelectedId],\n    )\n    return <TabsContext.Provider value={memoizedTabState}>{children}</TabsContext.Provider>\n}\n\ninterface TabProps extends ObfuscatedClassName, Pick<RoleProps, 'render'> {\n    /**\n     * The content to render inside of the tab button\n     */\n    children: React.ReactNode\n\n    /**\n     * The tab's identifier. This must match its corresponding `<TabPanel>`'s id\n     */\n    id: string\n\n    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void\n}\n\n/**\n * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.\n */\nconst Tab = React.forwardRef<HTMLButtonElement, TabProps>(function Tab(\n    { children, id, exceptionallySetClassName, render, onClick },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    if (!tabContextValue) return null\n\n    const { variant, tabStore } = tabContextValue\n    const className = classNames(exceptionallySetClassName, styles.tab, styles[`tab-${variant}`])\n\n    return (\n        <BaseTab\n            id={id}\n            ref={ref}\n            store={tabStore}\n            render={render}\n            className={className}\n            onClick={onClick}\n        >\n            {children}\n        </BaseTab>\n    )\n})\n\ntype TabListProps = (\n    | {\n          /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */\n          'aria-label': string\n      }\n    | {\n          /**\n           * One or more element IDs used to label the tab list for assistive technologies. Required if\n           * `aria-label` is omitted.\n           */\n          'aria-labelledby': string\n      }\n    | {\n          /**\n           * For cases where multiple instances of the tab list exists, the duplicates may be marked as aria-hidden\n           */\n          'aria-hidden': boolean\n      }\n) & {\n    /**\n     * A list of `<Tab>` elements\n     */\n    children: React.ReactNode\n\n    /**\n     * Controls the spacing between tabs\n     */\n    space?: Space\n}\n\n/**\n * A component used to group `<Tab>` elements together.\n */\nfunction TabList({ children, space, ...props }: TabListProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabStore, variant } = tabContextValue\n\n    return (\n        // The extra <div> prevents <Inline>'s negative margins from collapsing when used in a flex container\n        // which will render the track with the wrong height\n        <div>\n            <BaseTabList\n                store={tabStore}\n                render={<Box position=\"relative\" width=\"maxContent\" />}\n                {...props}\n            >\n                <Box className={[styles.track, styles[`track-${variant}`]]} />\n                <Inline space={space}>{children}</Inline>\n            </BaseTabList>\n        </div>\n    )\n}\n\ninterface TabPanelProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        Pick<BaseTabPanelProps, 'render'> {\n    /** The content to be rendered inside the tab */\n    children?: React.ReactNode\n\n    /** The tabPanel's identifier. This must match its corresponding `<Tab>`'s id */\n    id: string\n\n    /**\n     * By default, the tab panel's content is always rendered even when they are not active. This\n     * behaviour can be changed to 'active', which renders only when the tab is active, and 'lazy',\n     * meaning while inactive tab panels will not be rendered initially, they will remain mounted\n     * once they are active until the entire Tabs tree is unmounted.\n     */\n    renderMode?: 'always' | 'active' | 'lazy'\n}\n\n/**\n * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a\n * corresponding `<Tab>` component.\n */\nconst TabPanel = React.forwardRef<HTMLDivElement, TabPanelProps>(function TabPanel(\n    { children, id, renderMode = 'always', ...props },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    const [tabRendered, setTabRendered] = React.useState(false)\n    const selectedId = tabContextValue?.tabStore.useState('selectedId')\n    const tabIsActive = selectedId === id\n\n    React.useEffect(\n        function trackTabRenderedState() {\n            if (!tabRendered && tabIsActive) {\n                setTabRendered(true)\n            }\n        },\n        [tabRendered, tabIsActive],\n    )\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabStore } = tabContextValue\n    const shouldRender =\n        renderMode === 'always' ||\n        (renderMode === 'active' && tabIsActive) ||\n        (renderMode === 'lazy' && (tabIsActive || tabRendered))\n\n    return shouldRender ? (\n        <BaseTabPanel {...props} tabId={id} store={tabStore} ref={ref}>\n            {children}\n        </BaseTabPanel>\n    ) : null\n})\n\ntype TabAwareSlotProps = {\n    /**\n     * Render prop used to provide the content to be rendered inside the slot. The render prop will\n     * be called with the current `selectedId`\n     */\n    children: (provided: { selectedId?: string | null }) => React.ReactElement | null\n}\n\n/**\n * Allows content to be rendered based on the current tab being selected while outside of the\n * TabPanel component. Can be placed freely within the main `<Tabs>` component.\n */\nfunction TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    const selectedId = tabContextValue?.tabStore.useState('selectedId')\n    return tabContextValue ? children({ selectedId }) : null\n}\n\nexport { Tab, Tabs, TabList, TabPanel, TabAwareSlot }\n"],"names":["TabsContext","React","Tab","children","id","exceptionallySetClassName","render","onClick","ref","tabContextValue","variant","tabStore","className","classNames","styles","tab","BaseTab","store","TabPanel","renderMode","props","tabRendered","setTabRendered","tabIsActive","useState","BaseTabPanel","tabId","selectedId","space","BaseTabList","Box","position","width","track","Inline","defaultSelectedId","onSelectedIdChange","useTabStore","setSelectedId","actualSelectedId","memoizedTabState","Provider","value"],"mappings":"ibAqBMA,EAAcC,gBAA6C,MAwE3DC,EAAMD,cAA8C,UACtDE,SAAEA,EAAFC,GAAYA,EAAZC,0BAAgBA,EAAhBC,OAA2CA,EAA3CC,QAAmDA,GACnDC,GAEA,MAAMC,EAAkBR,aAAiBD,GACzC,IAAKS,EAAiB,OAAO,KAE7B,MAAMC,QAAEA,EAAFC,SAAWA,GAAaF,EACxBG,EAAYC,EAAWR,EAA2BS,UAAOC,IAAKD,iBAAcJ,IAElF,OACIT,gBAACe,OACGZ,GAAIA,EACJI,IAAKA,EACLS,MAAON,EACPL,OAAQA,EACRM,UAAWA,EACXL,QAASA,GAERJ,MAqFPe,EAAWjB,cAAgD,WAE7DO,OADAL,SAAEA,EAAFC,GAAYA,EAAZe,WAAgBA,EAAa,YAAaC,iCAG1C,MAAMX,EAAkBR,aAAiBD,IAClCqB,EAAaC,GAAkBrB,YAAe,GAE/CsB,SADad,SAAAA,EAAiBE,SAASa,SAAS,iBACnBpB,EAWnC,GATAH,aACI,YACSoB,GAAeE,GAChBD,GAAe,KAGvB,CAACD,EAAaE,KAGbd,EACD,OAAO,KAGX,MAAME,SAAEA,GAAaF,EAMrB,MAJmB,WAAfU,GACgB,WAAfA,GAA2BI,GACZ,SAAfJ,IAA0BI,GAAeF,GAG1CpB,gBAACwB,8CAAiBL,OAAOM,MAAOtB,EAAIa,MAAON,EAAUH,IAAKA,IACrDL,GAEL,2CAeR,UAAsBA,SAAEA,IACpB,MAAMM,EAAkBR,aAAiBD,GACnC2B,QAAalB,SAAAA,EAAiBE,SAASa,SAAS,cACtD,OAAOf,EAAkBN,EAAS,CAAEwB,WAAAA,IAAgB,sBAjGxD,gBAAiBxB,SAAEA,EAAFyB,MAAYA,KAAUR,iCACnC,MAAMX,EAAkBR,aAAiBD,GAEzC,IAAKS,EACD,OAAO,KAGX,MAAME,SAAEA,EAAFD,QAAYA,GAAYD,EAE9B,OAGIR,2BACIA,gBAAC4B,2BACGZ,MAAON,EACPL,OAAQL,gBAAC6B,OAAIC,SAAS,WAAWC,MAAM,gBACnCZ,GAEJnB,gBAAC6B,OAAIlB,UAAW,CAACE,UAAOmB,MAAOnB,mBAAgBJ,MAC/CT,gBAACiC,UAAON,MAAOA,GAAQzB,sCAlHvC,UAAcA,SACVA,EADUwB,WAEVA,EAFUQ,kBAGVA,EAHUzB,QAIVA,EAAU,UAJA0B,mBAKVA,IAEA,MAAMzB,EAAW0B,cAAY,CACzBF,kBAAAA,EACAR,WAAAA,EACAW,cAAeF,IAEbG,EAAmB5B,EAASa,SAAS,cAErCgB,EAAmBvC,UACrB,KAAA,MAAA,MAAO,CAAEU,SAAAA,EAAUD,QAAAA,EAASiB,0BAAYA,EAAAA,EAAcY,KAAoB,OAC1E,CAAC7B,EAASC,EAAUgB,EAAYY,IAEpC,OAAOtC,gBAACD,EAAYyC,UAASC,MAAOF,GAAmBrC"}
+{"version":3,"file":"tabs.js","sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport {\n    useTabStore,\n    Tab as BaseTab,\n    TabProps as BaseTabProps,\n    TabList as BaseTabList,\n    TabPanel as BaseTabPanel,\n    TabPanelProps as BaseTabPanelProps,\n    TabStore,\n} from '@ariakit/react'\nimport { Inline } from '../inline'\nimport type { ObfuscatedClassName, Space } from '../utils/common-types'\n\nimport styles from './tabs.module.css'\nimport { Box } from '../box'\n\ntype TabsContextValue = Required<Pick<TabsProps, 'variant'>> & {\n    tabStore: TabStore\n}\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null)\n\ninterface TabsProps {\n    /**\n     * The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>`\n     * components\n     */\n    children: React.ReactNode\n\n    /**\n     * Determines the look and feel of the tabs\n     */\n    variant?: 'themed' | 'neutral'\n\n    /**\n     * The id of the selected tab. Assigning a value makes this a controlled component\n     */\n    selectedId?: string | null\n\n    /**\n     * The tab to initially select. This can be used if the component should not\n     * be a controlled component but needs to have a tab selected\n     */\n    defaultSelectedId?: string | null\n\n    /**\n     * Called with the tab id when a tab is selected\n     */\n    onSelectedIdChange?: (selectedId: string | null | undefined) => void\n}\n\n/**\n * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.\n */\nfunction Tabs({\n    children,\n    selectedId,\n    defaultSelectedId,\n    variant = 'neutral',\n    onSelectedIdChange,\n}: TabsProps): React.ReactElement {\n    const tabStore = useTabStore({\n        defaultSelectedId,\n        selectedId,\n        setSelectedId: onSelectedIdChange,\n    })\n    const actualSelectedId = tabStore.useState('selectedId')\n\n    const memoizedTabState = React.useMemo(\n        () => ({ tabStore, variant, selectedId: selectedId ?? actualSelectedId ?? null }),\n        [variant, tabStore, selectedId, actualSelectedId],\n    )\n    return <TabsContext.Provider value={memoizedTabState}>{children}</TabsContext.Provider>\n}\n\ninterface TabProps\n    extends ObfuscatedClassName,\n        Omit<BaseTabProps, 'store' | 'className' | 'children' | 'id'> {\n    /**\n     * The content to render inside of the tab button\n     */\n    children: React.ReactNode\n\n    /**\n     * The tab's identifier. This must match its corresponding `<TabPanel>`'s id\n     */\n    id: string\n}\n\n/**\n * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.\n */\nconst Tab = React.forwardRef<HTMLButtonElement, TabProps>(function Tab(\n    { children, id, exceptionallySetClassName, render, onClick },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    if (!tabContextValue) return null\n\n    const { variant, tabStore } = tabContextValue\n    const className = classNames(exceptionallySetClassName, styles.tab, styles[`tab-${variant}`])\n\n    return (\n        <BaseTab\n            id={id}\n            ref={ref}\n            store={tabStore}\n            render={render}\n            className={className}\n            onClick={onClick}\n        >\n            {children}\n        </BaseTab>\n    )\n})\n\ntype TabListProps = (\n    | {\n          /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */\n          'aria-label': string\n      }\n    | {\n          /**\n           * One or more element IDs used to label the tab list for assistive technologies. Required if\n           * `aria-label` is omitted.\n           */\n          'aria-labelledby': string\n      }\n    | {\n          /**\n           * For cases where multiple instances of the tab list exists, the duplicates may be marked as aria-hidden\n           */\n          'aria-hidden': boolean\n      }\n) & {\n    /**\n     * A list of `<Tab>` elements\n     */\n    children: React.ReactNode\n\n    /**\n     * Controls the spacing between tabs\n     */\n    space?: Space\n}\n\n/**\n * A component used to group `<Tab>` elements together.\n */\nfunction TabList({ children, space, ...props }: TabListProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabStore, variant } = tabContextValue\n\n    return (\n        // The extra <div> prevents <Inline>'s negative margins from collapsing when used in a flex container\n        // which will render the track with the wrong height\n        <div>\n            <BaseTabList\n                store={tabStore}\n                render={<Box position=\"relative\" width=\"maxContent\" />}\n                {...props}\n            >\n                <Box className={[styles.track, styles[`track-${variant}`]]} />\n                <Inline space={space}>{children}</Inline>\n            </BaseTabList>\n        </div>\n    )\n}\n\ninterface TabPanelProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        Pick<BaseTabPanelProps, 'render'> {\n    /** The content to be rendered inside the tab */\n    children?: React.ReactNode\n\n    /** The tabPanel's identifier. This must match its corresponding `<Tab>`'s id */\n    id: string\n\n    /**\n     * By default, the tab panel's content is always rendered even when they are not active. This\n     * behaviour can be changed to 'active', which renders only when the tab is active, and 'lazy',\n     * meaning while inactive tab panels will not be rendered initially, they will remain mounted\n     * once they are active until the entire Tabs tree is unmounted.\n     */\n    renderMode?: 'always' | 'active' | 'lazy'\n}\n\n/**\n * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a\n * corresponding `<Tab>` component.\n */\nconst TabPanel = React.forwardRef<HTMLDivElement, TabPanelProps>(function TabPanel(\n    { children, id, renderMode = 'always', ...props },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    const [tabRendered, setTabRendered] = React.useState(false)\n    const selectedId = tabContextValue?.tabStore.useState('selectedId')\n    const tabIsActive = selectedId === id\n\n    React.useEffect(\n        function trackTabRenderedState() {\n            if (!tabRendered && tabIsActive) {\n                setTabRendered(true)\n            }\n        },\n        [tabRendered, tabIsActive],\n    )\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabStore } = tabContextValue\n    const shouldRender =\n        renderMode === 'always' ||\n        (renderMode === 'active' && tabIsActive) ||\n        (renderMode === 'lazy' && (tabIsActive || tabRendered))\n\n    return shouldRender ? (\n        <BaseTabPanel {...props} tabId={id} store={tabStore} ref={ref}>\n            {children}\n        </BaseTabPanel>\n    ) : null\n})\n\ntype TabAwareSlotProps = {\n    /**\n     * Render prop used to provide the content to be rendered inside the slot. The render prop will\n     * be called with the current `selectedId`\n     */\n    children: (provided: { selectedId?: string | null }) => React.ReactElement | null\n}\n\n/**\n * Allows content to be rendered based on the current tab being selected while outside of the\n * TabPanel component. Can be placed freely within the main `<Tabs>` component.\n */\nfunction TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    const selectedId = tabContextValue?.tabStore.useState('selectedId')\n    return tabContextValue ? children({ selectedId }) : null\n}\n\nexport { Tab, Tabs, TabList, TabPanel, TabAwareSlot }\n"],"names":["TabsContext","React","createContext","Tab","forwardRef","children","id","exceptionallySetClassName","render","onClick","ref","tabContextValue","useContext","variant","tabStore","className","classNames","styles","tab","createElement","BaseTab","store","TabPanel","renderMode","_ref3","props","_objectWithoutProperties","objectWithoutProperties","_excluded2","tabRendered","setTabRendered","useState","tabIsActive","useEffect","BaseTabPanel","tabId","selectedId","_ref2","space","_excluded","BaseTabList","TabList","_objectSpread","Box","position","width","track","Inline","defaultSelectedId","onSelectedIdChange","useTabStore","setSelectedId","actualSelectedId","memoizedTabState","useMemo","_ref","Provider","value"],"mappings":"2sBAqBMA,EAAcC,EAAMC,cAAuC,MAwE3DC,EAAMF,EAAMG,YAAwC,UACtDC,SAAEA,EAAFC,GAAYA,EAAZC,0BAAgBA,EAAhBC,OAA2CA,EAA3CC,QAAmDA,GACnDC,GAEA,MAAMC,EAAkBV,EAAMW,WAAWZ,GACzC,IAAKW,EAAiB,OAAO,KAE7B,MAAME,QAAEA,EAAFC,SAAWA,GAAaH,EACxBI,EAAYC,UAAWT,EAA2BU,EAAM,QAACC,IAAKD,UAAcJ,OAAAA,IAElF,OACIZ,EAAAkB,cAACC,MAAO,CACJd,GAAIA,EACJI,IAAKA,EACLW,MAAOP,EACPN,OAAQA,EACRO,UAAWA,EACXN,QAASA,GAERJ,MAqFPiB,EAAWrB,EAAMG,YAA0C,SAE7DM,EAAAA,GAAG,IADHL,SAAEA,EAAFC,GAAYA,EAAZiB,WAAgBA,EAAa,UAC1BC,EADuCC,EACvCC,EAAAC,wBAAAH,EAAAI,GAEH,MAAMjB,EAAkBV,EAAMW,WAAWZ,IAClC6B,EAAaC,GAAkB7B,EAAM8B,UAAS,GAE/CC,GADarB,MAAAA,OAAAA,EAAAA,EAAiBG,SAASiB,SAAS,iBACnBzB,EAWnC,GATAL,EAAMgC,WACF,YACSJ,GAAeG,GAChBF,GAAe,KAGvB,CAACD,EAAaG,KAGbrB,EACD,OAAO,KAGX,MAAMG,SAAEA,GAAaH,EAMrB,MAJmB,WAAfY,GACgB,WAAfA,GAA2BS,GACZ,SAAfT,IAA0BS,GAAeH,GAG1C5B,EAAAkB,cAACe,EAADZ,4CAAkBG,GAAlB,GAAA,CAAyBU,MAAO7B,EAAIe,MAAOP,EAAUJ,IAAKA,IACrDL,GAEL,2CAeR,UAAsBA,SAAEA,IACpB,MAAMM,EAAkBV,EAAMW,WAAWZ,GACnCoC,EAAazB,MAAAA,OAAAA,EAAAA,EAAiBG,SAASiB,SAAS,cACtD,OAAOpB,EAAkBN,EAAS,CAAE+B,WAAAA,IAAgB,sBAjGxD,SAA4DC,GAAA,IAA3ChC,SAAEA,EAAFiC,MAAYA,GAA+BD,EAArBZ,EAAqBC,EAAAC,wBAAAU,EAAAE,GACxD,MAAM5B,EAAkBV,EAAMW,WAAWZ,GAEzC,IAAKW,EACD,OAAO,KAGX,MAAMG,SAAEA,EAAFD,QAAYA,GAAYF,EAE9B,OAGIV,EAAAkB,cAAA,MAAA,KACIlB,EAACkB,cAAAqB,EAADC,QAAAC,gBAAA,CACIrB,MAAOP,EACPN,OAAQP,EAACkB,cAAAwB,OAAIC,SAAS,WAAWC,MAAM,gBACnCpB,GAEJxB,EAAAkB,cAACwB,EAAAA,IAAI,CAAA5B,UAAW,CAACE,EAAAA,QAAO6B,MAAO7B,EAAAA,QAAgBJ,SAAAA,MAC/CZ,EAACkB,cAAA4B,SAAO,CAAAT,MAAOA,GAAQjC,sCAlHvC,UAAcA,SACVA,EADU+B,WAEVA,EAFUY,kBAGVA,EAHUnC,QAIVA,EAAU,UAJAoC,mBAKVA,IAEA,MAAMnC,EAAWoC,EAAAA,YAAY,CACzBF,kBAAAA,EACAZ,WAAAA,EACAe,cAAeF,IAEbG,EAAmBtC,EAASiB,SAAS,cAErCsB,EAAmBpD,EAAMqD,QAC3B,KAAA,IAAAC,EAAA,MAAO,CAAEzC,SAAAA,EAAUD,QAAAA,EAASuB,WAA8C,SAApC,MAAEA,EAAAA,EAAcgB,GAAoBG,EAAA,OAC1E,CAAC1C,EAASC,EAAUsB,EAAYgB,IAEpC,OAAOnD,EAAAkB,cAACnB,EAAYwD,SAAQ,CAACC,MAAOJ,GAAmBhD"}

package/lib/text/text.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { Tone } from '../utils/common-types';
 import type { BoxProps } from '../box';
-declare type TextProps = {
+type TextProps = {
     children: React.ReactNode;
     /**
      * The size of the text.

package/lib/text/text.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),t=require("../utils/polymorphism.js"),s=require("../utils/responsive-props.js"),a=require("../box/box.js"),r=require("./text.module.css.js");const i=["as","size","weight","tone","align","children","lineClamp","exceptionallySetClassName"];exports.Text=t.polymorphicComponent((function(t,n){let{as:o,size:u="body",weight:p="regular",tone:m="normal",align:d,children:c,lineClamp:g,exceptionallySetClassName:x}=t,C=e.objectWithoutProperties(t,i);const b="string"==typeof g?Number(g)>1:(null!=g?g:1)>1;return l.createElement(a.Box,e.objectSpread2(e.objectSpread2({},C),{},{as:o,className:[x,r.default.text,"body"!==u?s.getClassNames(r.default,"size",u):null,"regular"!==p?s.getClassNames(r.default,"weight",p):null,"normal"!==m?s.getClassNames(r.default,"tone",m):null,b?r.default.lineClampMultipleLines:null,g?s.getClassNames(r.default,"lineClamp",g.toString()):null],textAlign:d,paddingRight:g?"xsmall":void 0,ref:n}),c)}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),l=require("../utils/responsive-props.js"),r=require("../box/box.js"),a=require("../utils/polymorphism.js"),s=require("./text.module.css.js");function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(l){if("default"!==l){var r=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(t,l,r.get?r:{enumerable:!0,get:function(){return e[l]}})}})),t.default=e,t}var i=n(t);const o=["as","size","weight","tone","align","children","lineClamp","exceptionallySetClassName"];exports.Text=a.polymorphicComponent((function(t,a){let{as:n,size:u="body",weight:p="regular",tone:c="normal",align:d,children:m,lineClamp:g,exceptionallySetClassName:f}=t,b=e.objectWithoutProperties(t,o);const j="string"==typeof g?Number(g)>1:(null!=g?g:1)>1;return i.createElement(r.Box,e.objectSpread2(e.objectSpread2({},b),{},{as:n,className:[f,s.default.text,"body"!==u?l.getClassNames(s.default,"size",u):null,"regular"!==p?l.getClassNames(s.default,"weight",p):null,"normal"!==c?l.getClassNames(s.default,"tone",c):null,j?s.default.lineClampMultipleLines:null,g?l.getClassNames(s.default,"lineClamp",g.toString()):null],textAlign:d,paddingRight:g?"xsmall":void 0,ref:a}),m)}));
 //# sourceMappingURL=text.js.map

package/lib/text/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","sources":["../../src/text/text.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport { polymorphicComponent } from '../utils/polymorphism'\n\nimport type { Tone } from '../utils/common-types'\nimport type { BoxProps } from '../box'\n\nimport styles from './text.module.css'\n\ntype TextProps = {\n    children: React.ReactNode\n    /**\n     * The size of the text.\n     *\n     * The supported values, from smaller size to larger size, are:\n     * 'caption', 'copy', 'body', and 'subtitle'\n     *\n     * @default 'body'\n     */\n    size?: 'caption' | 'copy' | 'body' | 'subtitle'\n    /**\n     * The weight of the text font.\n     *\n     * @default 'regular'\n     */\n    weight?: 'regular' | 'semibold' | 'bold'\n    /**\n     * The tone (semantic color) of the text.\n     *\n     * @default 'normal'\n     */\n    tone?: Tone\n    /**\n     * Used to truncate the text to a given number of lines.\n     *\n     * It will add an ellipsis (`…`) to the text at the end of the last line, only if the text was\n     * truncated. If the text fits without it being truncated, no ellipsis is added.\n     *\n     * By default, the text is not truncated at all, no matter how many lines it takes to render it.\n     *\n     * @default undefined\n     */\n    lineClamp?: 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5'\n    /**\n     * How to align the text horizontally.\n     *\n     * @default 'start'\n     */\n    align?: BoxProps['textAlign']\n}\n\nconst Text = polymorphicComponent<'div', TextProps>(function Text(\n    {\n        as,\n        size = 'body',\n        weight = 'regular',\n        tone = 'normal',\n        align,\n        children,\n        lineClamp,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    const lineClampMultipleLines =\n        typeof lineClamp === 'string' ? Number(lineClamp) > 1 : (lineClamp ?? 1) > 1\n\n    return (\n        <Box\n            {...props}\n            as={as}\n            className={[\n                exceptionallySetClassName,\n                styles.text,\n                size !== 'body' ? getClassNames(styles, 'size', size) : null,\n                weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null,\n                tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null,\n                lineClampMultipleLines ? styles.lineClampMultipleLines : null,\n                lineClamp ? getClassNames(styles, 'lineClamp', lineClamp.toString()) : null,\n            ]}\n            textAlign={align}\n            // Prevents emojis from being cut-off\n            // See https://github.com/Doist/reactist/pull/528\n            paddingRight={lineClamp ? 'xsmall' : undefined}\n            ref={ref}\n        >\n            {children}\n        </Box>\n    )\n})\n\nexport type { TextProps }\nexport { Text }\n"],"names":["polymorphicComponent","ref","as","size","weight","tone","align","children","lineClamp","exceptionallySetClassName","props","lineClampMultipleLines","Number","React","Box","className","styles","text","getClassNames","toString","textAlign","paddingRight","undefined"],"mappings":"4YAoDaA,wBAAuC,WAYhDC,OAXAC,GACIA,EADJC,KAEIA,EAAO,OAFXC,OAGIA,EAAS,UAHbC,KAIIA,EAAO,SAJXC,MAKIA,EALJC,SAMIA,EANJC,UAOIA,EAPJC,0BAQIA,KACGC,iCAIP,MAAMC,EACmB,iBAAdH,EAAyBI,OAAOJ,GAAa,SAAKA,EAAAA,EAAa,GAAK,EAE/E,OACIK,gBAACC,yCACOJ,OACJR,GAAIA,EACJa,UAAW,CACPN,EACAO,UAAOC,KACE,SAATd,EAAkBe,gBAAcF,UAAQ,OAAQb,GAAQ,KAC7C,YAAXC,EAAuBc,gBAAcF,UAAQ,SAAUZ,GAAU,KACxD,WAATC,EAAoBa,gBAAcF,UAAQ,OAAQX,GAAQ,KAC1DM,EAAyBK,UAAOL,uBAAyB,KACzDH,EAAYU,gBAAcF,UAAQ,YAAaR,EAAUW,YAAc,MAE3EC,UAAWd,EAGXe,aAAcb,EAAY,cAAWc,EACrCrB,IAAKA,IAEJM"}
+{"version":3,"file":"text.js","sources":["../../src/text/text.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport { polymorphicComponent } from '../utils/polymorphism'\n\nimport type { Tone } from '../utils/common-types'\nimport type { BoxProps } from '../box'\n\nimport styles from './text.module.css'\n\ntype TextProps = {\n    children: React.ReactNode\n    /**\n     * The size of the text.\n     *\n     * The supported values, from smaller size to larger size, are:\n     * 'caption', 'copy', 'body', and 'subtitle'\n     *\n     * @default 'body'\n     */\n    size?: 'caption' | 'copy' | 'body' | 'subtitle'\n    /**\n     * The weight of the text font.\n     *\n     * @default 'regular'\n     */\n    weight?: 'regular' | 'semibold' | 'bold'\n    /**\n     * The tone (semantic color) of the text.\n     *\n     * @default 'normal'\n     */\n    tone?: Tone\n    /**\n     * Used to truncate the text to a given number of lines.\n     *\n     * It will add an ellipsis (`…`) to the text at the end of the last line, only if the text was\n     * truncated. If the text fits without it being truncated, no ellipsis is added.\n     *\n     * By default, the text is not truncated at all, no matter how many lines it takes to render it.\n     *\n     * @default undefined\n     */\n    lineClamp?: 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5'\n    /**\n     * How to align the text horizontally.\n     *\n     * @default 'start'\n     */\n    align?: BoxProps['textAlign']\n}\n\nconst Text = polymorphicComponent<'div', TextProps>(function Text(\n    {\n        as,\n        size = 'body',\n        weight = 'regular',\n        tone = 'normal',\n        align,\n        children,\n        lineClamp,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    const lineClampMultipleLines =\n        typeof lineClamp === 'string' ? Number(lineClamp) > 1 : (lineClamp ?? 1) > 1\n\n    return (\n        <Box\n            {...props}\n            as={as}\n            className={[\n                exceptionallySetClassName,\n                styles.text,\n                size !== 'body' ? getClassNames(styles, 'size', size) : null,\n                weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null,\n                tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null,\n                lineClampMultipleLines ? styles.lineClampMultipleLines : null,\n                lineClamp ? getClassNames(styles, 'lineClamp', lineClamp.toString()) : null,\n            ]}\n            textAlign={align}\n            // Prevents emojis from being cut-off\n            // See https://github.com/Doist/reactist/pull/528\n            paddingRight={lineClamp ? 'xsmall' : undefined}\n            ref={ref}\n        >\n            {children}\n        </Box>\n    )\n})\n\nexport type { TextProps }\nexport { Text }\n"],"names":["polymorphicComponent","_ref","ref","as","size","weight","tone","align","children","lineClamp","exceptionallySetClassName","props","_objectWithoutProperties","objectWithoutProperties","_excluded","lineClampMultipleLines","Number","React","createElement","Box","className","styles","text","getClassNames","toString","textAlign","paddingRight","undefined"],"mappings":"uqBAoDaA,EAAAA,sBAAuC,SAAAC,EAYhDC,GAAG,IAXHC,GACIA,EADJC,KAEIA,EAAO,OAFXC,OAGIA,EAAS,UAHbC,KAIIA,EAAO,SAJXC,MAKIA,EALJC,SAMIA,EANJC,UAOIA,EAPJC,0BAQIA,GAGDT,EAFIU,EAEJC,EAAAC,wBAAAZ,EAAAa,GAEH,MAAMC,EACmB,iBAAdN,EAAyBO,OAAOP,GAAa,SAAKA,EAAAA,EAAa,GAAK,EAE/E,OACIQ,EAACC,cAAAC,yCACOR,GADR,GAAA,CAEIR,GAAIA,EACJiB,UAAW,CACPV,EACAW,UAAOC,KACE,SAATlB,EAAkBmB,EAAaA,cAACF,UAAQ,OAAQjB,GAAQ,KAC7C,YAAXC,EAAuBkB,EAAaA,cAACF,UAAQ,SAAUhB,GAAU,KACxD,WAATC,EAAoBiB,EAAaA,cAACF,UAAQ,OAAQf,GAAQ,KAC1DS,EAAyBM,EAAM,QAACN,uBAAyB,KACzDN,EAAYc,EAAAA,cAAcF,EAAD,QAAS,YAAaZ,EAAUe,YAAc,MAE3EC,UAAWlB,EAGXmB,aAAcjB,EAAY,cAAWkB,EACrCzB,IAAKA,IAEJM"}

package/lib/text-area/text-area.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),r=require("../box/box.js"),t=require("../base-field/base-field.js"),i=require("use-callback-ref"),l=require("./text-area.module.css.js");const n=["variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","hidden","aria-describedby","rows","autoExpand"];exports.TextArea=a.forwardRef((function(d,s){let{variant:u="default",id:o,label:c,secondaryLabel:b,auxiliaryLabel:f,hint:x,message:p,tone:m,maxWidth:v,hidden:h,"aria-describedby":y,rows:j,autoExpand:E=!1}=d,L=e.objectWithoutProperties(d,n);const g=a.useRef(null),q=a.useRef(null),w=i.useMergeRefs([s,q]);return a.useEffect((function(){const e=g.current;function a(a){e&&(e.dataset.replicatedValue=a)}function r(e){a(e.currentTarget.value)}const t=q.current;if(t&&E)return a(t.value),t.addEventListener("input",r),()=>t.removeEventListener("input",r)}),[E]),a.createElement(t.BaseField,{variant:u,id:o,label:c,secondaryLabel:b,auxiliaryLabel:f,hint:x,message:p,tone:m,hidden:h,"aria-describedby":y,className:[l.default.textAreaContainer,"error"===m?l.default.error:null,"bordered"===u?l.default.bordered:null],maxWidth:v},t=>a.createElement(r.Box,{width:"full",display:"flex",className:l.default.innerContainer,ref:g},a.createElement("textarea",e.objectSpread2(e.objectSpread2(e.objectSpread2({},L),t),{},{ref:w,rows:j,className:E?l.default.autoExpand:void 0}))))}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),a=require("use-callback-ref"),t=require("../base-field/base-field.js"),n=require("../box/box.js"),i=require("./text-area.module.css.js");function l(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var t=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(r,a,t.get?t:{enumerable:!0,get:function(){return e[a]}})}})),r.default=e,r}var u=l(r);const d=["variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","hidden","aria-describedby","rows","autoExpand"];exports.TextArea=u.forwardRef((function(r,l){let{variant:s="default",id:o,label:c,secondaryLabel:f,auxiliaryLabel:b,hint:p,message:x,tone:m,maxWidth:v,hidden:y,"aria-describedby":j,rows:h,autoExpand:E=!1}=r,g=e.objectWithoutProperties(r,d);const L=u.useRef(null),q=u.useRef(null),w=a.useMergeRefs([l,q]);return u.useEffect((function(){const e=L.current;function r(r){e&&(e.dataset.replicatedValue=r)}function a(e){r(e.currentTarget.value)}const t=q.current;if(t&&E)return r(t.value),t.addEventListener("input",a),()=>t.removeEventListener("input",a)}),[E]),u.createElement(t.BaseField,{variant:s,id:o,label:c,secondaryLabel:f,auxiliaryLabel:b,hint:p,message:x,tone:m,hidden:y,"aria-describedby":j,className:[i.default.textAreaContainer,"error"===m?i.default.error:null,"bordered"===s?i.default.bordered:null],maxWidth:v},r=>u.createElement(n.Box,{width:"full",display:"flex",className:i.default.innerContainer,ref:L},u.createElement("textarea",e.objectSpread2(e.objectSpread2(e.objectSpread2({},g),r),{},{ref:w,rows:h,className:E?i.default.autoExpand:void 0}))))}));
 //# sourceMappingURL=text-area.js.map