@doist/reactist 25.0.0-beta.2 → 25.0.0

package/es/modal/modal.js

@@ -1,23 +1,23 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { useCallback, useMemo, useRef, useLayoutEffect, createElement, useContext, useState, useEffect, Fragment, createContext } from 'react';
+import * as React from 'react';
 import classNames from 'classnames';
-import { Box } from '../box/box.js';
+import FocusLock from 'react-focus-lock';
+import { hideOthers } from 'aria-hidden';
+import { useDialogStore, Portal, Dialog } from '@ariakit/react';
+import { CloseIcon } from '../icons/close-icon.js';
 import { Columns, Column } from '../columns/columns.js';
-import { Divider } from '../divider/divider.js';
 import { Inline } from '../inline/inline.js';
-import { useDialogStore, Portal, Dialog } from '@ariakit/react';
+import { Divider } from '../divider/divider.js';
+import { Box } from '../box/box.js';
 import { IconButton } from '../button/button.js';
-import { CloseIcon } from '../icons/close-icon.js';
-import FocusLock from 'react-focus-lock';
-import { hideOthers } from 'aria-hidden';
-import styles from './modal.module.css.js';
+import modules_8f59d13b from './modal.module.css.js';
 
 const _excluded = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "exceptionallySetOverlayClassName", "autoFocus", "hideOnEscape", "hideOnInteractOutside", "children", "portalElement", "onKeyDown", "className"],
       _excluded2 = ["children", "button", "withDivider", "exceptionallySetClassName"],
       _excluded3 = ["exceptionallySetClassName", "children"],
       _excluded4 = ["exceptionallySetClassName", "withDivider"],
       _excluded5 = ["children"];
-const ModalContext = /*#__PURE__*/createContext({
+const ModalContext = /*#__PURE__*/React.createContext({
   onDismiss: undefined,
   height: 'fitContent'
 });
@@ -55,7 +55,7 @@ function Modal(_ref) {
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  const setOpen = useCallback(visible => {
+  const setOpen = React.useCallback(visible => {
     if (!visible) {
       onDismiss == null ? void 0 : onDismiss();
     }
@@ -64,14 +64,14 @@ function Modal(_ref) {
     open: isOpen,
     setOpen
   });
-  const contextValue = useMemo(() => ({
+  const contextValue = React.useMemo(() => ({
     onDismiss,
     height
   }), [onDismiss, height]);
-  const portalRef = useRef(null);
-  const dialogRef = useRef(null);
-  const backdropRef = useRef(null);
-  const handleBackdropClick = useCallback(event => {
+  const portalRef = React.useRef(null);
+  const dialogRef = React.useRef(null);
+  const backdropRef = React.useRef(null);
+  const handleBackdropClick = React.useCallback(event => {
     var _dialogRef$current, _backdropRef$current;
 
     if ( // The focus lock element takes up the same space as the backdrop and is where the event bubbles up from,
@@ -82,14 +82,14 @@ function Modal(_ref) {
       onDismiss == null ? void 0 : onDismiss();
     }
   }, [onDismiss]);
-  useLayoutEffect(function disableAccessibilityTreeOutside() {
+  React.useLayoutEffect(function disableAccessibilityTreeOutside() {
     if (!isOpen || !portalRef.current) {
       return;
     }
 
     return hideOthers(portalRef.current);
   }, [isOpen]);
-  const handleKeyDown = useCallback(function handleKeyDown(event) {
+  const handleKeyDown = React.useCallback(function handleKeyDown(event) {
     if (hideOnEscape && onDismiss != null && event.key === 'Escape' && !event.defaultPrevented) {
       event.stopPropagation();
       onDismiss();
@@ -102,13 +102,13 @@ function Modal(_ref) {
     return null;
   }
 
-  return /*#__PURE__*/createElement(Portal, {
+  return /*#__PURE__*/React.createElement(Portal, {
     portalRef: portalRef,
     portalElement: portalElement
-  }, /*#__PURE__*/createElement(Box, {
+  }, /*#__PURE__*/React.createElement(Box, {
     "data-testid": "modal-overlay",
     "data-overlay": true,
-    className: classNames(styles.overlay, styles[height], styles[width], exceptionallySetOverlayClassName),
+    className: classNames(modules_8f59d13b.overlay, modules_8f59d13b[height], modules_8f59d13b[width], exceptionallySetOverlayClassName),
 
     /**
      * We're using `onPointerDown` instead of `onClick` to prevent the modal from
@@ -116,13 +116,13 @@ function Modal(_ref) {
      */
     onPointerDown: hideOnInteractOutside ? handleBackdropClick : undefined,
     ref: backdropRef
-  }, /*#__PURE__*/createElement(FocusLock, {
+  }, /*#__PURE__*/React.createElement(FocusLock, {
     autoFocus: autoFocus,
     whiteList: isNotInternalFrame,
     returnFocus: true
-  }, /*#__PURE__*/createElement(Dialog, _objectSpread2(_objectSpread2({}, props), {}, {
+  }, /*#__PURE__*/React.createElement(Dialog, _objectSpread2(_objectSpread2({}, props), {}, {
     ref: dialogRef,
-    render: /*#__PURE__*/createElement(Box, {
+    render: /*#__PURE__*/React.createElement(Box, {
       borderRadius: "full",
       background: "default",
       display: "flex",
@@ -131,7 +131,7 @@ function Modal(_ref) {
       height: height === 'expand' ? 'full' : undefined,
       flexGrow: height === 'expand' ? 1 : 0
     }),
-    className: classNames(exceptionallySetClassName, styles.container),
+    className: classNames(exceptionallySetClassName, modules_8f59d13b.container),
     store: store,
     preventBodyScroll: true,
     // Disable focus lock as we set up our own using ReactFocusLock
@@ -145,7 +145,7 @@ function Modal(_ref) {
     hideOnInteractOutside: false,
     hideOnEscape: false,
     onKeyDown: handleKeyDown
-  }), /*#__PURE__*/createElement(ModalContext.Provider, {
+  }), /*#__PURE__*/React.createElement(ModalContext.Provider, {
     value: contextValue
   }, children)))));
 }
@@ -159,20 +159,20 @@ function Modal(_ref) {
 function ModalCloseButton(props) {
   const {
     onDismiss
-  } = useContext(ModalContext);
-  const [includeInTabOrder, setIncludeInTabOrder] = useState(false);
-  const [isMounted, setIsMounted] = useState(false);
-  useEffect(function skipAutoFocus() {
+  } = React.useContext(ModalContext);
+  const [includeInTabOrder, setIncludeInTabOrder] = React.useState(false);
+  const [isMounted, setIsMounted] = React.useState(false);
+  React.useEffect(function skipAutoFocus() {
     if (isMounted) {
       setIncludeInTabOrder(true);
     } else {
       setIsMounted(true);
     }
   }, [isMounted]);
-  return /*#__PURE__*/createElement(IconButton, _objectSpread2(_objectSpread2({}, props), {}, {
+  return /*#__PURE__*/React.createElement(IconButton, _objectSpread2(_objectSpread2({}, props), {}, {
     variant: "quaternary",
     onClick: onDismiss,
-    icon: /*#__PURE__*/createElement(CloseIcon, null),
+    icon: /*#__PURE__*/React.createElement(CloseIcon, null),
     tabIndex: includeInTabOrder ? 0 : -1
   }));
 }
@@ -193,27 +193,27 @@ function ModalHeader(_ref2) {
   } = _ref2,
       props = _objectWithoutProperties(_ref2, _excluded2);
 
-  return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
     as: "header",
     paddingLeft: "large",
     paddingRight: button === false || button === null ? 'large' : 'small',
     paddingY: "small",
     className: exceptionallySetClassName
-  }), /*#__PURE__*/createElement(Columns, {
+  }), /*#__PURE__*/React.createElement(Columns, {
     space: "large",
     alignY: "center"
-  }, /*#__PURE__*/createElement(Column, {
+  }, /*#__PURE__*/React.createElement(Column, {
     width: "auto"
-  }, children), button === false || button === null ? /*#__PURE__*/createElement("div", {
-    className: styles.headerContent
-  }) : /*#__PURE__*/createElement(Column, {
+  }, children), button === false || button === null ? /*#__PURE__*/React.createElement("div", {
+    className: modules_8f59d13b.headerContent
+  }) : /*#__PURE__*/React.createElement(Column, {
     width: "content",
-    exceptionallySetClassName: styles.buttonContainer,
+    exceptionallySetClassName: modules_8f59d13b.buttonContainer,
     "data-testid": "button-container"
-  }, typeof button === 'boolean' ? /*#__PURE__*/createElement(ModalCloseButton, {
+  }, typeof button === 'boolean' ? /*#__PURE__*/React.createElement(ModalCloseButton, {
     "aria-label": "Close modal",
     autoFocus: false
-  }) : button))), withDivider ? /*#__PURE__*/createElement(Divider, null) : null);
+  }) : button))), withDivider ? /*#__PURE__*/React.createElement(Divider, null) : null);
 }
 /**
  * Renders the body of a modal.
@@ -237,13 +237,13 @@ function ModalBody(_ref3) {
 
   const {
     height
-  } = useContext(ModalContext);
-  return /*#__PURE__*/createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
+  } = React.useContext(ModalContext);
+  return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
     className: exceptionallySetClassName,
     flexGrow: height === 'expand' ? 1 : 0,
     height: height === 'expand' ? 'full' : undefined,
     overflow: "auto"
-  }), /*#__PURE__*/createElement(Box, {
+  }), /*#__PURE__*/React.createElement(Box, {
     padding: "large",
     paddingBottom: "xxlarge"
   }, children));
@@ -263,7 +263,7 @@ function ModalFooter(_ref4) {
   } = _ref4,
       props = _objectWithoutProperties(_ref4, _excluded4);
 
-  return /*#__PURE__*/createElement(Fragment, null, withDivider ? /*#__PURE__*/createElement(Divider, null) : null, /*#__PURE__*/createElement(Box, _objectSpread2(_objectSpread2({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, withDivider ? /*#__PURE__*/React.createElement(Divider, null) : null, /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({
     as: "footer"
   }, props), {}, {
     className: exceptionallySetClassName,
@@ -281,7 +281,7 @@ function ModalActions(_ref5) {
   } = _ref5,
       props = _objectWithoutProperties(_ref5, _excluded5);
 
-  return /*#__PURE__*/createElement(ModalFooter, _objectSpread2({}, props), /*#__PURE__*/createElement(Inline, {
+  return /*#__PURE__*/React.createElement(ModalFooter, _objectSpread2({}, props), /*#__PURE__*/React.createElement(Inline, {
     align: "right",
     space: "large"
   }, children));

package/es/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../src/modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport FocusLock from 'react-focus-lock'\nimport { hideOthers } from 'aria-hidden'\n\nimport { Dialog, DialogOptions, useDialogStore, Portal, PortalOptions } from '@ariakit/react'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Column, Columns } from '../columns'\nimport { Inline } from '../inline'\nimport { Divider } from '../divider'\nimport { Box } from '../box'\nimport { 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","Modal","isOpen","width","exceptionallySetClassName","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement","onKeyDown","className","props","setOpen","visible","store","useDialogStore","open","contextValue","portalRef","dialogRef","backdropRef","handleBackdropClick","event","current","contains","target","stopPropagation","disableAccessibilityTreeOutside","hideOthers","handleKeyDown","key","defaultPrevented","Portal","Box","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","ModalCloseButton","includeInTabOrder","setIncludeInTabOrder","isMounted","setIsMounted","skipAutoFocus","IconButton","variant","onClick","icon","CloseIcon","tabIndex","ModalHeader","button","withDivider","as","paddingLeft","paddingRight","paddingY","Columns","space","alignY","Column","headerContent","buttonContainer","Divider","ModalBody","padding","paddingBottom","ModalFooter","ModalActions","Inline","align"],"mappings":"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"}
+{"version":3,"file":"modal.js","sources":["../../src/modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport FocusLock from 'react-focus-lock'\nimport { hideOthers } from 'aria-hidden'\n\nimport { Dialog, DialogOptions, useDialogStore, Portal, PortalOptions } from '@ariakit/react'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Column, Columns } from '../columns'\nimport { Inline } from '../inline'\nimport { Divider } from '../divider'\nimport { Box } from '../box'\nimport { IconButtonProps, IconButton } from '../button'\n\nimport styles from './modal.module.css'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\ntype ModalWidth = 'small' | 'medium' | 'large' | 'xlarge' | 'full'\ntype ModalHeightMode = 'expand' | 'fitContent'\n\n//\n// ModalContext\n//\n\ntype ModalContextValue = {\n    onDismiss?(this: void): void\n    height: ModalHeightMode\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({\n    onDismiss: undefined,\n    height: 'fitContent',\n})\n\n//\n// Modal container\n//\n\ntype DivProps = Omit<\n    React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,\n    'className' | 'children' | `aria-label` | `aria-labelledby`\n>\n\nexport interface ModalProps extends DivProps, ObfuscatedClassName {\n    /**\n     * The content of the modal.\n     */\n    children: React.ReactNode\n\n    /**\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","Modal","isOpen","width","exceptionallySetClassName","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement","onKeyDown","className","props","setOpen","useCallback","visible","store","useDialogStore","open","contextValue","useMemo","portalRef","useRef","dialogRef","backdropRef","handleBackdropClick","event","current","contains","target","stopPropagation","useLayoutEffect","disableAccessibilityTreeOutside","hideOthers","handleKeyDown","key","defaultPrevented","createElement","Portal","Box","classNames","styles","overlay","onPointerDown","ref","FocusLock","whiteList","returnFocus","Dialog","render","borderRadius","background","display","flexDirection","overflow","flexGrow","container","preventBodyScroll","modal","autoFocusOnShow","autoFocusOnHide","portal","backdrop","Provider","value","ModalCloseButton","useContext","includeInTabOrder","setIncludeInTabOrder","useState","isMounted","setIsMounted","useEffect","skipAutoFocus","IconButton","variant","onClick","icon","CloseIcon","tabIndex","ModalHeader","button","withDivider","Fragment","as","paddingLeft","paddingRight","paddingY","Columns","space","alignY","Column","headerContent","buttonContainer","Divider","ModalBody","padding","paddingBottom","ModalFooter","_objectSpread","ModalActions","Inline","align"],"mappings":"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"}

package/es/modal/modal.module.css.js

@@ -1,4 +1,4 @@
 var modules_8f59d13b = {"overlay":"_8aa86dd3","fadein":"_20c07ee6","fitContent":"_713bc08f","container":"_45139719","full":"ec8619a2","large":"_86a1d5a4","medium":"_11d61de3","small":"aee19643","xlarge":"fe449c81","expand":"_61ffb38f","buttonContainer":"_49ffdac0","headerContent":"ee92ccb3"};
 
-export default modules_8f59d13b;
+export { modules_8f59d13b as default };
 //# sourceMappingURL=modal.module.css.js.map

package/es/notice/notice.js

@@ -1,28 +1,28 @@
-import { createElement } from 'react';
+import * as React from 'react';
 import { getClassNames } from '../utils/responsive-props.js';
 import { Box } from '../box/box.js';
 import { Columns, Column } from '../columns/columns.js';
 import { AlertIcon } from '../icons/alert-icon.js';
-import styles from './notice.module.css.js';
+import modules_1b547e7e from './notice.module.css.js';
 
 function Notice({
   id,
   children,
   tone
 }) {
-  return /*#__PURE__*/createElement(Box, {
+  return /*#__PURE__*/React.createElement(Box, {
     id: id,
     role: "alert",
     "aria-live": "polite",
-    className: [styles.container, getClassNames(styles, 'tone', tone)]
-  }, /*#__PURE__*/createElement(Columns, {
+    className: [modules_1b547e7e.container, getClassNames(modules_1b547e7e, 'tone', tone)]
+  }, /*#__PURE__*/React.createElement(Columns, {
     space: "small",
     alignY: "top"
-  }, /*#__PURE__*/createElement(Column, {
+  }, /*#__PURE__*/React.createElement(Column, {
     width: "content"
-  }, /*#__PURE__*/createElement(AlertIcon, {
+  }, /*#__PURE__*/React.createElement(AlertIcon, {
     tone: tone
-  })), /*#__PURE__*/createElement(Column, null, /*#__PURE__*/createElement(Box, {
+  })), /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(Box, {
     paddingY: "xsmall"
   }, children))));
 }

package/es/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":["Notice","id","children","tone","React","Box","role","className","styles","container","getClassNames","Columns","space","alignY","Column","width","AlertIcon","paddingY"],"mappings":";;;;;;;AAgBA,SAASA,MAAT,CAAgB;EAAEC,EAAF;EAAMC,QAAN;EAAgBC;AAAhB,CAAhB;EACI,oBACIC,aAAA,CAACC,GAAD;IACIJ,EAAE,EAAEA;IACJK,IAAI,EAAC;iBACK;IACVC,SAAS,EAAE,CAACC,MAAM,CAACC,SAAR,EAAmBC,aAAa,CAACF,MAAD,EAAS,MAAT,EAAiBL,IAAjB,CAAhC;GAJf,eAMIC,aAAA,CAACO,OAAD;IAASC,KAAK,EAAC;IAAQC,MAAM,EAAC;GAA9B,eACIT,aAAA,CAACU,MAAD;IAAQC,KAAK,EAAC;GAAd,eACIX,aAAA,CAACY,SAAD;IAAWb,IAAI,EAAEA;GAAjB,CADJ,CADJ,eAIIC,aAAA,CAACU,MAAD,MAAA,eACIV,aAAA,CAACC,GAAD;IAAKY,QAAQ,EAAC;GAAd,EAAwBf,QAAxB,CADJ,CAJJ,CANJ,CADJ;AAiBH;;;;"}
+{"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":["Notice","id","children","tone","React","createElement","Box","role","className","styles","container","getClassNames","Columns","space","alignY","Column","width","AlertIcon","paddingY"],"mappings":";;;;;;;AAgBA,SAASA,MAAT,CAAgB;EAAEC,EAAF;EAAMC,QAAN;AAAgBC,EAAAA,IAAAA;AAAhB,CAAhB,EAAmD;AAC/C,EAAA,oBACIC,KAAA,CAAAC,aAAA,CAACC,GAAD,EAAI;AACAL,IAAAA,EAAE,EAAEA,EADJ;AAEAM,IAAAA,IAAI,EAAC,OAFL;AAEY,IAAA,WAAA,EACF,QAHV;AAIAC,IAAAA,SAAS,EAAE,CAACC,gBAAM,CAACC,SAAR,EAAmBC,aAAa,CAACF,gBAAD,EAAS,MAAT,EAAiBN,IAAjB,CAAhC,CAAA;AAJX,GAAJ,eAMIC,KAAC,CAAAC,aAAD,CAACO,OAAD;AAASC,IAAAA,KAAK,EAAC;AAAQC,IAAAA,MAAM,EAAC,KAAA;GAA9B,eACIV,KAAA,CAAAC,aAAA,CAACU,MAAD,EAAO;AAACC,IAAAA,KAAK,EAAC,SAAA;AAAP,GAAP,eACIZ,KAAA,CAAAC,aAAA,CAACY,SAAD,EAAW;AAAAd,IAAAA,IAAI,EAAEA,IAAAA;AAAN,GAAX,CADJ,CADJ,eAIIC,KAAA,CAAAC,aAAA,CAACU,MAAD,EAAO,IAAP,eACIX,KAAA,CAAAC,aAAA,CAACC,GAAD,EAAI;AAACY,IAAAA,QAAQ,EAAC,QAAA;AAAV,GAAJ,EAAwBhB,QAAxB,CADJ,CAJJ,CANJ,CADJ,CAAA;AAiBH;;;;"}

package/es/notice/notice.module.css.js

@@ -1,4 +1,4 @@
 var modules_1b547e7e = {"container":"_464500ae","tone-info":"_1abfe147","tone-positive":"_36ce9859","tone-caution":"f92214b7","tone-critical":"be6cf28e"};
 
-export default modules_1b547e7e;
+export { modules_1b547e7e as default };
 //# sourceMappingURL=notice.module.css.js.map

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

@@ -1,26 +1,26 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { forwardRef, useState, createElement } from 'react';
-import { IconButton } from '../button/button.js';
+import * as React from 'react';
 import { PasswordVisibleIcon } from '../icons/password-visible-icon.js';
 import { PasswordHiddenIcon } from '../icons/password-hidden-icon.js';
 import { TextField } from '../text-field/text-field.js';
+import { IconButton } from '../button/button.js';
 
 const _excluded = ["togglePasswordLabel"];
-const PasswordField = /*#__PURE__*/forwardRef(function PasswordField(_ref, ref) {
+const PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref, ref) {
   let {
     togglePasswordLabel = 'Toggle password visibility'
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  const [isPasswordVisible, setPasswordVisible] = useState(false);
+  const [isPasswordVisible, setPasswordVisible] = React.useState(false);
   const Icon = isPasswordVisible ? PasswordVisibleIcon : PasswordHiddenIcon;
-  return /*#__PURE__*/createElement(TextField, _objectSpread2(_objectSpread2({}, props), {}, {
+  return /*#__PURE__*/React.createElement(TextField, _objectSpread2(_objectSpread2({}, props), {}, {
     ref: ref,
     // @ts-expect-error TextField does not support type="password", so we override the type check here
     type: isPasswordVisible ? 'text' : 'password',
-    endSlot: /*#__PURE__*/createElement(IconButton, {
+    endSlot: /*#__PURE__*/React.createElement(IconButton, {
       variant: "quaternary",
-      icon: /*#__PURE__*/createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Icon, {
         "aria-hidden": true
       }),
       "aria-label": togglePasswordLabel,

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

@@ -1 +1 @@
-{"version":3,"file":"password-field.js","sources":["../../src/password-field/password-field.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { PasswordVisibleIcon } from '../icons/password-visible-icon'\nimport { PasswordHiddenIcon } from '../icons/password-hidden-icon'\n\nimport { TextField, TextFieldProps } from '../text-field'\nimport { 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":["PasswordField","React","ref","togglePasswordLabel","props","isPasswordVisible","setPasswordVisible","Icon","PasswordVisibleIcon","PasswordHiddenIcon","TextField","type","endSlot","IconButton","variant","icon","onClick","v"],"mappings":";;;;;;;;MAgBMA,aAAa,gBAAGC,UAAA,CAAuD,SAASD,aAAT,OAEzEE,GAFyE;MACzE;IAAEC,mBAAmB,GAAG;;MAAiCC;;EAGzD,MAAM,CAACC,iBAAD,EAAoBC,kBAApB,IAA0CL,QAAA,CAAe,KAAf,CAAhD;EACA,MAAMM,IAAI,GAAGF,iBAAiB,GAAGG,mBAAH,GAAyBC,kBAAvD;EACA,oBACIR,aAAA,CAACS,SAAD,oCACQN,KADR;IAEIF,GAAG,EAAEA,GAFT;;IAIIS,IAAI,EAAEN,iBAAiB,GAAG,MAAH,GAAY,UAJvC;IAKIO,OAAO,eACHX,aAAA,CAACY,UAAD;MACIC,OAAO,EAAC;MACRC,IAAI,eAAEd,aAAA,CAACM,IAAD;;OAAA;oBACMJ;MACZa,OAAO,EAAE,MAAMV,kBAAkB,CAAEW,CAAD,IAAO,CAACA,CAAT;KAJrC;KAPZ;AAgBH,CAtBqB;;;;"}
+{"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":["PasswordField","React","forwardRef","ref","togglePasswordLabel","props","isPasswordVisible","setPasswordVisible","useState","Icon","PasswordVisibleIcon","PasswordHiddenIcon","TextField","type","endSlot","IconButton","variant","icon","createElement","onClick","v"],"mappings":";;;;;;;;AAgBMA,MAAAA,aAAa,gBAAGC,KAAK,CAACC,UAAN,CAAuD,SAASF,aAAT,CAEzEG,IAAAA,EAAAA,GAFyE,EAEtE;EAAA,IADH;AAAEC,IAAAA,mBAAmB,GAAG,4BAAA;GACrB,GAAA,IAAA;AAAA,MADsDC,KACtD,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA,CAAA;;EAEH,MAAM,CAACC,iBAAD,EAAoBC,kBAApB,CAAA,GAA0CN,KAAK,CAACO,QAAN,CAAe,KAAf,CAAhD,CAAA;AACA,EAAA,MAAMC,IAAI,GAAGH,iBAAiB,GAAGI,mBAAH,GAAyBC,kBAAvD,CAAA;AACA,EAAA,oBACIV,mBAAA,CAACW,SAAD,oCACQP,KADR,CAAA,EAAA,EAAA,EAAA;AAEIF,IAAAA,GAAG,EAAEA,GAFT;AAGI;AACAU,IAAAA,IAAI,EAAEP,iBAAiB,GAAG,MAAH,GAAY,UAJvC;AAKIQ,IAAAA,OAAO,eACHb,mBAAA,CAACc,UAAD,EAAW;AACPC,MAAAA,OAAO,EAAC,YADD;AAEPC,MAAAA,IAAI,eAAEhB,KAAA,CAAAiB,aAAA,CAACT,IAAD,EAAoB;QAAA,aAAA,EAAA,IAAA;AAAA,OAApB,CAFC;AAEmB,MAAA,YAAA,EACdL,mBAHL;AAIPe,MAAAA,OAAO,EAAE,MAAMZ,kBAAkB,CAAEa,CAAD,IAAO,CAACA,CAAT,CAAA;KAJrC,CAAA;GAPZ,CAAA,CAAA,CAAA;AAgBH,CAtBqB;;;;"}

package/es/prose/prose.js

@@ -1,7 +1,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { createElement } from 'react';
+import * as React from 'react';
 import { Box } from '../box/box.js';
-import styles from './prose.module.css.js';
+import modules_8ebe6db0 from './prose.module.css.js';
 
 const _excluded = ["darkModeTypography", "exceptionallySetClassName"];
 /**
@@ -15,8 +15,8 @@ function Prose(_ref) {
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
-    className: [styles.prose, darkModeTypography ? styles.darkModeTypography : null, exceptionallySetClassName]
+  return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
+    className: [modules_8ebe6db0.prose, darkModeTypography ? modules_8ebe6db0.darkModeTypography : null, exceptionallySetClassName]
   }));
 }
 

package/es/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":["Prose","darkModeTypography","exceptionallySetClassName","props","React","Box","className","styles","prose"],"mappings":";;;;;;AA0CA;;;;AAGA,SAASA,KAAT;MAAe;IAAEC,kBAAF;IAAsBC;;MAA8BC;;EAC/D,oBACIC,aAAA,CAACC,GAAD,oCACQF,KADR;IAEIG,SAAS,EAAE,CACPC,MAAM,CAACC,KADA,EAEPP,kBAAkB,GAAGM,MAAM,CAACN,kBAAV,GAA+B,IAF1C,EAGPC,yBAHO;KAHnB;AAUH;;;;"}
+{"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":["Prose","darkModeTypography","exceptionallySetClassName","props","React","createElement","Box","className","styles","prose"],"mappings":";;;;;;AA0CA;;AAEG;;AACH,SAASA,KAAT,CAAsF,IAAA,EAAA;EAAA,IAAvE;IAAEC,kBAAF;AAAsBC,IAAAA,yBAAAA;GAAiD,GAAA,IAAA;AAAA,MAAnBC,KAAmB,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA,CAAA;;AAClF,EAAA,oBACIC,KAAC,CAAAC,aAAD,CAACC,GAAD,oCACQH,KADR,CAAA,EAAA,EAAA,EAAA;AAEII,IAAAA,SAAS,EAAE,CACPC,gBAAM,CAACC,KADA,EAEPR,kBAAkB,GAAGO,gBAAM,CAACP,kBAAV,GAA+B,IAF1C,EAGPC,yBAHO,CAAA;GAHnB,CAAA,CAAA,CAAA;AAUH;;;;"}

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

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

package/es/select-field/select-field.js

@@ -1,11 +1,11 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { forwardRef, createElement } from 'react';
-import { Box } from '../box/box.js';
+import * as React from 'react';
 import { BaseField } from '../base-field/base-field.js';
-import styles from './select-field.module.css.js';
+import { Box } from '../box/box.js';
+import modules_1fa9b208 from './select-field.module.css.js';
 
 const _excluded = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "children", "hidden", "aria-describedby"];
-const SelectField = /*#__PURE__*/forwardRef(function SelectField(_ref, ref) {
+const SelectField = /*#__PURE__*/React.forwardRef(function SelectField(_ref, ref) {
   let {
     variant = 'default',
     id,
@@ -22,7 +22,7 @@ const SelectField = /*#__PURE__*/forwardRef(function SelectField(_ref, ref) {
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/createElement(BaseField, {
+  return /*#__PURE__*/React.createElement(BaseField, {
     variant: variant,
     id: id,
     label: label,
@@ -34,23 +34,23 @@ const SelectField = /*#__PURE__*/forwardRef(function SelectField(_ref, ref) {
     maxWidth: maxWidth,
     hidden: hidden,
     "aria-describedby": ariaDescribedBy
-  }, extraProps => /*#__PURE__*/createElement(Box, {
+  }, extraProps => /*#__PURE__*/React.createElement(Box, {
     "data-testid": "select-wrapper",
-    className: [styles.selectWrapper, tone === 'error' ? styles.error : null, variant === 'bordered' ? styles.bordered : null]
-  }, /*#__PURE__*/createElement("select", _objectSpread2(_objectSpread2(_objectSpread2({}, props), extraProps), {}, {
+    className: [modules_1fa9b208.selectWrapper, tone === 'error' ? modules_1fa9b208.error : null, variant === 'bordered' ? modules_1fa9b208.bordered : null]
+  }, /*#__PURE__*/React.createElement("select", _objectSpread2(_objectSpread2(_objectSpread2({}, props), extraProps), {}, {
     ref: ref
-  }), children), /*#__PURE__*/createElement(SelectChevron, {
+  }), children), /*#__PURE__*/React.createElement(SelectChevron, {
     "aria-hidden": true
   })));
 });
 
 function SelectChevron(props) {
-  return /*#__PURE__*/createElement("svg", _objectSpread2({
+  return /*#__PURE__*/React.createElement("svg", _objectSpread2({
     width: "16",
     height: "16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), /*#__PURE__*/createElement("path", {
+  }, props), /*#__PURE__*/React.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"
   }));

package/es/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":["SelectField","React","ref","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","children","hidden","ariaDescribedBy","props","BaseField","extraProps","Box","className","styles","selectWrapper","error","bordered","SelectChevron","width","height","fill","xmlns","d"],"mappings":";;;;;;;MAOMA,WAAW,gBAAGC,UAAA,CAAsD,SAASD,WAAT,OAgBtEE,GAhBsE;MACtE;IACIC,OAAO,GAAG,SADd;IAEIC,EAFJ;IAGIC,KAHJ;IAIIC,cAJJ;IAKIC,cALJ;IAMIC,IANJ;IAOIC,OAPJ;IAQIC,IARJ;IASIC,QATJ;IAUIC,QAVJ;IAWIC,MAXJ;IAYI,oBAAoBC;;MACjBC;;EAIP,oBACId,aAAA,CAACe,SAAD;IACIb,OAAO,EAAEA;IACTC,EAAE,EAAEA;IACJC,KAAK,EAAEA;IACPC,cAAc,EAAEA;IAChBC,cAAc,EAAEA;IAChBC,IAAI,EAAEA;IACNC,OAAO,EAAEA;IACTC,IAAI,EAAEA;IACNC,QAAQ,EAAEA;IACVE,MAAM,EAAEA;wBACUC;GAXtB,EAaMG,UAAD,iBACGhB,aAAA,CAACiB,GAAD;mBACgB;IACZC,SAAS,EAAE,CACPC,MAAM,CAACC,aADA,EAEPX,IAAI,KAAK,OAAT,GAAmBU,MAAM,CAACE,KAA1B,GAAkC,IAF3B,EAGPnB,OAAO,KAAK,UAAZ,GAAyBiB,MAAM,CAACG,QAAhC,GAA2C,IAHpC;GAFf,eAQItB,aAAA,SAAA,mDAAYc,KAAZ,GAAuBE,UAAvB;IAAmCf,GAAG,EAAEA;MACnCU,QADL,CARJ,eAWIX,aAAA,CAACuB,aAAD;;GAAA,CAXJ,CAdR,CADJ;AA+BH,CAjDmB;;AAmDpB,SAASA,aAAT,CAAuBT,KAAvB;EACI,oBACId,aAAA,MAAA;IAAKwB,KAAK,EAAC,IAAX;IAAgBC,MAAM,EAAC,IAAvB;IAA4BC,IAAI,EAAC,MAAjC;IAAwCC,KAAK,EAAC;KAAiCb,KAA/E,gBACId,aAAA,OAAA;IACI4B,CAAC,EAAC;IACFF,IAAI,EAAC;GAFT,CADJ,CADJ;AAQH;;;;"}
+{"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":["SelectField","React","forwardRef","ref","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","children","hidden","ariaDescribedBy","props","createElement","BaseField","extraProps","Box","className","styles","selectWrapper","error","bordered","_objectSpread","SelectChevron","width","height","fill","xmlns","d"],"mappings":";;;;;;;AAOMA,MAAAA,WAAW,gBAAGC,KAAK,CAACC,UAAN,CAAsD,SAASF,WAAT,CAgBtEG,IAAAA,EAAAA,GAhBsE,EAgBnE;EAAA,IAfH;AACIC,IAAAA,OAAO,GAAG,SADd;IAEIC,EAFJ;IAGIC,KAHJ;IAIIC,cAJJ;IAKIC,cALJ;IAMIC,IANJ;IAOIC,OAPJ;IAQIC,IARJ;IASIC,QATJ;IAUIC,QAVJ;IAWIC,MAXJ;IAYI,kBAAoBC,EAAAA,eAAAA;GAGrB,GAAA,IAAA;AAAA,MAFIC,KAEJ,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA,CAAA;;AAEH,EAAA,oBACIf,KAAC,CAAAgB,aAAD,CAACC,SAAD,EACI;AAAAd,IAAAA,OAAO,EAAEA,OAAT;AACAC,IAAAA,EAAE,EAAEA,EADJ;AAEAC,IAAAA,KAAK,EAAEA,KAFP;AAGAC,IAAAA,cAAc,EAAEA,cAHhB;AAIAC,IAAAA,cAAc,EAAEA,cAJhB;AAKAC,IAAAA,IAAI,EAAEA,IALN;AAMAC,IAAAA,OAAO,EAAEA,OANT;AAOAC,IAAAA,IAAI,EAAEA,IAPN;AAQAC,IAAAA,QAAQ,EAAEA,QARV;AASAE,IAAAA,MAAM,EAAEA,MATR;IASc,kBACIC,EAAAA,eAAAA;GAXtB,EAaMI,UAAD,iBACGlB,KAAC,CAAAgB,aAAD,CAACG,GAAD,EACgB;AAAA,IAAA,aAAA,EAAA,gBAAA;IACZC,SAAS,EAAE,CACPC,gBAAM,CAACC,aADA,EAEPZ,IAAI,KAAK,OAAT,GAAmBW,gBAAM,CAACE,KAA1B,GAAkC,IAF3B,EAGPpB,OAAO,KAAK,UAAZ,GAAyBkB,gBAAM,CAACG,QAAhC,GAA2C,IAHpC,CAAA;GAFf,eAQIxB,KAAY,CAAAgB,aAAZ,CAAY,QAAZ,EAAAS,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAA,EAAA,EAAYV,KAAZ,CAAA,EAAuBG,UAAvB,CAAA,EAAA,EAAA,EAAA;AAAmChB,IAAAA,GAAG,EAAEA,GAAAA;GACnCU,CAAAA,EAAAA,QADL,CARJ,eAWIZ,KAAA,CAAAgB,aAAA,CAACU,aAAD,EAA6B;IAAA,aAAA,EAAA,IAAA;GAA7B,CAXJ,CAdR,CADJ,CAAA;AA+BH,CAjDmB,EAApB;;AAmDA,SAASA,aAAT,CAAuBX,KAAvB,EAA0D;AACtD,EAAA,oBACIf,KAAK,CAAAgB,aAAL,CAAK,KAAL,EAAAS,cAAA,CAAA;AAAKE,IAAAA,KAAK,EAAC,IAAX;AAAgBC,IAAAA,MAAM,EAAC,IAAvB;AAA4BC,IAAAA,IAAI,EAAC,MAAjC;AAAwCC,IAAAA,KAAK,EAAC,4BAAA;AAA9C,GAAA,EAA+Ef,KAA/E,CACIf,eAAAA,KACI,CAAAgB,aADJ,CACI,MADJ,EACI;AAAAe,IAAAA,CAAC,EAAC,yGAAF;AACAF,IAAAA,IAAI,EAAC,cAAA;AADL,GADJ,CADJ,CADJ,CAAA;AAQH;;;;"}

package/es/select-field/select-field.module.css.js

@@ -1,4 +1,4 @@
 var modules_1fa9b208 = {"selectWrapper":"b930bb07","bordered":"e1f620b6","error":"_7e87474e"};
 
-export default modules_1fa9b208;
+export { modules_1fa9b208 as default };
 //# sourceMappingURL=select-field.module.css.js.map