@doist/reactist 10.0.0-beta.7 → 11.0.0

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

@@ -5,6 +5,7 @@ import { getClassNames, mapResponsiveProp } from '../responsive-props.js';
 import { Box } from '../box/box.js';
 import styles from './inline.module.css.js';
 
+var _excluded = ["as", "space", "align", "alignY", "children", "exceptionallySetClassName"];
 var Inline = /*#__PURE__*/polymorphicComponent(function Inline(_ref, ref) {
   var as = _ref.as,
       space = _ref.space,
@@ -14,7 +15,7 @@ var Inline = /*#__PURE__*/polymorphicComponent(function Inline(_ref, ref) {
       alignY = _ref$alignY === void 0 ? 'center' : _ref$alignY,
       children = _ref.children,
       exceptionallySetClassName = _ref.exceptionallySetClassName,
-      props = _objectWithoutPropertiesLoose(_ref, ["as", "space", "align", "alignY", "children", "exceptionallySetClassName"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return /*#__PURE__*/createElement(Box, null, /*#__PURE__*/createElement(Box, Object.assign({}, props, {
     as: as,

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

@@ -1 +1 @@
-{"version":3,"file":"inline.js","sources":["../../../src/new-components/inline/inline.tsx"],"sourcesContent":["import * as React from 'react'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { getClassNames, mapResponsiveProp } from '../responsive-props'\nimport { Box } from '../box'\n\nimport type { ResponsiveProp } from '../responsive-props'\nimport type { Space } from '../common-types'\nimport type { ReusableBoxProps } from '../box'\n\nimport styles from './inline.module.css'\n\ntype InlineAlign = 'left' | 'center' | 'right'\n\ninterface InlineProps extends ReusableBoxProps {\n    space?: ResponsiveProp<Space>\n    align?: ResponsiveProp<InlineAlign>\n    alignY?: ResponsiveProp<'top' | 'center' | 'bottom'>\n}\n\nconst Inline = polymorphicComponent<'div', InlineProps>(function Inline(\n    { as, space, align = 'left', alignY = 'center', children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    return (\n        <Box>\n            <Box\n                {...props}\n                as={as}\n                display=\"flex\"\n                flexWrap=\"wrap\"\n                className={[exceptionallySetClassName, getClassNames(styles, 'space', space)]}\n                ref={ref}\n                alignItems={mapResponsiveProp(alignY, (alignY) =>\n                    alignY === 'top' ? 'flexStart' : alignY === 'bottom' ? 'flexEnd' : 'center',\n                )}\n                justifyContent={mapResponsiveProp(align, (align) =>\n                    align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : 'center',\n                )}\n            >\n                {children}\n            </Box>\n        </Box>\n    )\n})\n\nexport type { InlineProps, InlineAlign }\nexport { Inline }\n"],"names":["Inline","polymorphicComponent","ref","as","space","align","alignY","children","exceptionallySetClassName","props","React","Box","display","flexWrap","className","getClassNames","styles","alignItems","mapResponsiveProp","justifyContent"],"mappings":";;;;;;;IAmBMA,MAAM,gBAAGC,oBAAoB,CAAqB,SAASD,MAAT,OAEpDE,GAFoD;MAClDC,UAAAA;MAAIC,aAAAA;wBAAOC;MAAAA,gCAAQ;yBAAQC;MAAAA,kCAAS;MAAUC,gBAAAA;MAAUC,iCAAAA;MAA8BC;;AAGxF,sBACIC,aAAA,CAACC,GAAD,MAAA,eACID,aAAA,CAACC,GAAD,oBACQF;AACJN,IAAAA,EAAE,EAAEA;AACJS,IAAAA,OAAO,EAAC;AACRC,IAAAA,QAAQ,EAAC;AACTC,IAAAA,SAAS,EAAE,CAACN,yBAAD,EAA4BO,aAAa,CAACC,MAAD,EAAS,OAAT,EAAkBZ,KAAlB,CAAzC;AACXF,IAAAA,GAAG,EAAEA;AACLe,IAAAA,UAAU,EAAEC,iBAAiB,CAACZ,MAAD,EAAS,UAACA,MAAD;AAAA,aAClCA,MAAM,KAAK,KAAX,GAAmB,WAAnB,GAAiCA,MAAM,KAAK,QAAX,GAAsB,SAAtB,GAAkC,QADjC;AAAA,KAAT;AAG7Ba,IAAAA,cAAc,EAAED,iBAAiB,CAACb,KAAD,EAAQ,UAACA,KAAD;AAAA,aACrCA,KAAK,KAAK,MAAV,GAAmB,WAAnB,GAAiCA,KAAK,KAAK,OAAV,GAAoB,SAApB,GAAgC,QAD5B;AAAA,KAAR;IAVrC,EAcKE,QAdL,CADJ,CADJ;AAoBH,CAxBkC;;;;"}
+{"version":3,"file":"inline.js","sources":["../../../src/new-components/inline/inline.tsx"],"sourcesContent":["import * as React from 'react'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { getClassNames, mapResponsiveProp } from '../responsive-props'\nimport { Box } from '../box'\n\nimport type { ResponsiveProp } from '../responsive-props'\nimport type { Space } from '../common-types'\nimport type { ReusableBoxProps } from '../box'\n\nimport styles from './inline.module.css'\n\ntype InlineAlign = 'left' | 'center' | 'right'\n\ninterface InlineProps extends ReusableBoxProps {\n    space?: ResponsiveProp<Space>\n    align?: ResponsiveProp<InlineAlign>\n    alignY?: ResponsiveProp<'top' | 'center' | 'bottom'>\n}\n\nconst Inline = polymorphicComponent<'div', InlineProps>(function Inline(\n    { as, space, align = 'left', alignY = 'center', children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    return (\n        <Box>\n            <Box\n                {...props}\n                as={as}\n                display=\"flex\"\n                flexWrap=\"wrap\"\n                className={[exceptionallySetClassName, getClassNames(styles, 'space', space)]}\n                ref={ref}\n                alignItems={mapResponsiveProp(alignY, (alignY) =>\n                    alignY === 'top' ? 'flexStart' : alignY === 'bottom' ? 'flexEnd' : 'center',\n                )}\n                justifyContent={mapResponsiveProp(align, (align) =>\n                    align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : 'center',\n                )}\n            >\n                {children}\n            </Box>\n        </Box>\n    )\n})\n\nexport type { InlineProps, InlineAlign }\nexport { Inline }\n"],"names":["Inline","polymorphicComponent","ref","as","space","align","alignY","children","exceptionallySetClassName","props","React","Box","display","flexWrap","className","getClassNames","styles","alignItems","mapResponsiveProp","justifyContent"],"mappings":";;;;;;;;IAmBMA,MAAM,gBAAGC,oBAAoB,CAAqB,SAASD,MAAT,OAEpDE,GAFoD;MAClDC,UAAAA;MAAIC,aAAAA;wBAAOC;MAAAA,gCAAQ;yBAAQC;MAAAA,kCAAS;MAAUC,gBAAAA;MAAUC,iCAAAA;MAA8BC;;AAGxF,sBACIC,aAAA,CAACC,GAAD,MAAA,eACID,aAAA,CAACC,GAAD,oBACQF;AACJN,IAAAA,EAAE,EAAEA;AACJS,IAAAA,OAAO,EAAC;AACRC,IAAAA,QAAQ,EAAC;AACTC,IAAAA,SAAS,EAAE,CAACN,yBAAD,EAA4BO,aAAa,CAACC,MAAD,EAAS,OAAT,EAAkBZ,KAAlB,CAAzC;AACXF,IAAAA,GAAG,EAAEA;AACLe,IAAAA,UAAU,EAAEC,iBAAiB,CAACZ,MAAD,EAAS,UAACA,MAAD;AAAA,aAClCA,MAAM,KAAK,KAAX,GAAmB,WAAnB,GAAiCA,MAAM,KAAK,QAAX,GAAsB,SAAtB,GAAkC,QADjC;AAAA,KAAT;AAG7Ba,IAAAA,cAAc,EAAED,iBAAiB,CAACb,KAAD,EAAQ,UAACA,KAAD;AAAA,aACrCA,KAAK,KAAK,MAAV,GAAmB,WAAnB,GAAiCA,KAAK,KAAK,OAAV,GAAoB,SAApB,GAAgC,QAD5B;AAAA,KAAR;IAVrC,EAcKE,QAdL,CADJ,CADJ;AAoBH,CAxBkC;;;;"}

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

@@ -3,6 +3,7 @@ import React__default from 'react';
 import { Box } from '../box/box.js';
 import { Spinner } from '../spinner/spinner.js';
 
+var _excluded = ["size", "exceptionallySetClassName"];
 var sizeMapping = {
   small: 24,
   medium: 36,
@@ -15,17 +16,20 @@ function Loading(_ref) {
   var _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'small' : _ref$size,
       exceptionallySetClassName = _ref.exceptionallySetClassName,
-      props = _objectWithoutPropertiesLoose(_ref, ["size", "exceptionallySetClassName"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var numericSize = (_sizeMapping$size = sizeMapping[size]) !== null && _sizeMapping$size !== void 0 ? _sizeMapping$size : sizeMapping.small;
+  var ariaLabel = props['aria-label'] ? props['aria-label'] : !props['aria-labelledby'] ? 'Loading…' : undefined;
   return /*#__PURE__*/React__default.createElement(Box, Object.assign({}, props, {
+    "aria-label": ariaLabel,
     className: exceptionallySetClassName,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     role: "progressbar"
   }), /*#__PURE__*/React__default.createElement(Spinner, {
-    size: numericSize
+    size: numericSize,
+    "aria-hidden": true
   }));
 }
 

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

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

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

@@ -1,5 +1,5 @@
 import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { useMemo, createElement, useContext, Fragment, Children, createContext } from 'react';
+import { useMemo, createElement, useContext, useState, useEffect, Fragment, Children, createContext } from 'react';
 import classNames from 'classnames';
 import { Box } from '../box/box.js';
 import { Columns, Column } from '../columns/columns.js';
@@ -11,6 +11,11 @@ import { DialogOverlay, DialogContent } from '@reach/dialog';
 import FocusLock from 'react-focus-lock';
 import styles from './modal.module.css.js';
 
+var _excluded = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "autoFocus", "children"],
+    _excluded2 = ["children", "button", "withDivider", "exceptionallySetClassName"],
+    _excluded3 = ["exceptionallySetClassName", "children"],
+    _excluded4 = ["exceptionallySetClassName", "withDivider"],
+    _excluded5 = ["children"];
 var ModalContext = /*#__PURE__*/createContext({
   onDismiss: undefined,
   height: 'fitContent'
@@ -41,7 +46,7 @@ function Modal(_ref) {
       _ref$autoFocus = _ref.autoFocus,
       autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
       children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "autoFocus", "children"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var contextValue = useMemo(function () {
     return {
@@ -58,7 +63,8 @@ function Modal(_ref) {
     "data-testid": "modal-overlay"
   }, /*#__PURE__*/createElement(FocusLock, {
     autoFocus: autoFocus,
-    whiteList: isNotInternalFrame
+    whiteList: isNotInternalFrame,
+    returnFocus: true
   }, /*#__PURE__*/createElement(DialogContent, Object.assign({}, props, {
     as: Box,
     borderRadius: "full",
@@ -84,10 +90,26 @@ function ModalCloseButton(props) {
   var _React$useContext = useContext(ModalContext),
       onDismiss = _React$useContext.onDismiss;
 
+  var _React$useState = useState(false),
+      includeInTabOrder = _React$useState[0],
+      setincludeInTabOrder = _React$useState[1];
+
+  var _React$useState2 = useState(false),
+      isMounted = _React$useState2[0],
+      setIsMounted = _React$useState2[1];
+
+  useEffect(function skipAutoFocus() {
+    if (isMounted) {
+      setincludeInTabOrder(true);
+    } else {
+      setIsMounted(true);
+    }
+  }, [isMounted]);
   return /*#__PURE__*/createElement(Button, Object.assign({}, props, {
     variant: "quaternary",
     onClick: onDismiss,
-    icon: /*#__PURE__*/createElement(CloseIcon, null)
+    icon: /*#__PURE__*/createElement(CloseIcon, null),
+    tabIndex: includeInTabOrder ? 0 : -1
   }));
 }
 /**
@@ -105,7 +127,7 @@ function ModalHeader(_ref2) {
       _ref2$withDivider = _ref2.withDivider,
       withDivider = _ref2$withDivider === void 0 ? false : _ref2$withDivider,
       exceptionallySetClassName = _ref2.exceptionallySetClassName,
-      props = _objectWithoutPropertiesLoose(_ref2, ["children", "button", "withDivider", "exceptionallySetClassName"]);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
 
   return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Box, Object.assign({}, props, {
     as: "header",
@@ -122,7 +144,8 @@ function ModalHeader(_ref2) {
     width: "content",
     exceptionallySetClassName: styles.buttonContainer
   }, typeof button !== 'boolean' ? button : button === true ? /*#__PURE__*/createElement(ModalCloseButton, {
-    "aria-label": "Close modal"
+    "aria-label": "Close modal",
+    autoFocus: false
   }) : null))), withDivider ? /*#__PURE__*/createElement(Divider, null) : null);
 }
 /**
@@ -141,7 +164,7 @@ function ModalHeader(_ref2) {
 function ModalBody(_ref3) {
   var exceptionallySetClassName = _ref3.exceptionallySetClassName,
       children = _ref3.children,
-      props = _objectWithoutPropertiesLoose(_ref3, ["exceptionallySetClassName", "children"]);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
 
   var _React$useContext2 = useContext(ModalContext),
       height = _React$useContext2.height;
@@ -168,7 +191,7 @@ function ModalFooter(_ref4) {
   var exceptionallySetClassName = _ref4.exceptionallySetClassName,
       _ref4$withDivider = _ref4.withDivider,
       withDivider = _ref4$withDivider === void 0 ? false : _ref4$withDivider,
-      props = _objectWithoutPropertiesLoose(_ref4, ["exceptionallySetClassName", "withDivider"]);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
 
   return /*#__PURE__*/createElement(Fragment, null, withDivider ? /*#__PURE__*/createElement(Divider, null) : null, /*#__PURE__*/createElement(Box, Object.assign({
     as: "footer"
@@ -187,7 +210,7 @@ function ModalFooter(_ref4) {
 
 function ModalActions(_ref5) {
   var children = _ref5.children,
-      props = _objectWithoutPropertiesLoose(_ref5, ["children"]);
+      props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
 
   return /*#__PURE__*/createElement(ModalFooter, Object.assign({}, props), /*#__PURE__*/createElement(Inline, {
     align: "right",

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

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../src/new-components/modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { DialogOverlay, DialogContent } from '@reach/dialog'\nimport FocusLock from 'react-focus-lock'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Column, Columns } from '../columns'\nimport { Inline } from '../inline'\nimport { Divider } from '../divider'\nimport { Box } from '../box'\nimport { Button, ButtonProps } from '../button'\n\nimport styles from './modal.module.css'\n\ntype ModalWidth = 'small' | 'medium' | 'large'\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'\n>\n\nexport type ModalProps = DivProps & {\n    /**\n     * The content of the modal.\n     */\n    children: React.ReactNode\n    /**\n     * Whether the modal is open and visible or not.\n     */\n    isOpen: boolean\n    /**\n     * Called when the user triggers closing the modal.\n     */\n    onDismiss?(): void\n    /**\n     * A descriptive setting for how wide the modal should aim to be, depending on how much space\n     * it has on screen.\n     * @default 'medium'\n     */\n    width?: ModalWidth\n    /**\n     * A descriptive setting for how tall the modal should aim to be.\n     *\n     * - 'expand': the modal aims to fill most of the available screen height, leaving only a small\n     *   padding above and below.\n     * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.\n     *\n     * In either case, if content does not fit, the content of the main body is set to scroll\n     * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the\n     * viewport boundaries.\n     *\n     * If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of\n     * the inner layout to ensure scroll, or whatever other strategy you may want.\n     */\n    height?: ModalHeightMode\n    /**\n     * Whether to set or not the focus initially to the first focusable element inside the modal.\n     */\n    autoFocus?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n    return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/**\n * Renders a modal that sits on top of the rest of the content in the entire page.\n *\n * Follows the WAI-ARIA Dialog (Modal) Pattern.\n *\n * @see ModalHeader\n * @see ModalFooter\n * @see ModalBody\n */\nexport function Modal({\n    isOpen,\n    onDismiss,\n    height = 'fitContent',\n    width = 'medium',\n    exceptionallySetClassName,\n    autoFocus = true,\n    children,\n    ...props\n}: ModalProps) {\n    const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n        onDismiss,\n        height,\n    ])\n\n    return (\n        <DialogOverlay\n            isOpen={isOpen}\n            onDismiss={onDismiss}\n            dangerouslyBypassFocusLock // We're setting up our own focus lock below\n            className={classNames(styles.overlay, styles[height], styles[width])}\n            data-testid=\"modal-overlay\"\n        >\n            <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame}>\n                <DialogContent\n                    {...props}\n                    as={Box}\n                    borderRadius=\"full\"\n                    background=\"default\"\n                    display=\"flex\"\n                    flexDirection=\"column\"\n                    overflow=\"hidden\"\n                    height={height === 'expand' ? 'full' : undefined}\n                    flexGrow={height === 'expand' ? 1 : 0}\n                    className={[exceptionallySetClassName, styles.container]}\n                >\n                    <ModalContext.Provider value={contextValue}>{children}</ModalContext.Provider>\n                </DialogContent>\n            </FocusLock>\n        </DialogOverlay>\n    )\n}\n\n//\n// ModalCloseButton\n//\n\nexport type ModalCloseButtonProps = Omit<\n    ButtonProps,\n    'type' | 'children' | 'variant' | 'icon' | 'startIcon' | 'endIcon' | 'disabled' | 'loading'\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    return <Button {...props} variant=\"quaternary\" onClick={onDismiss} icon={<CloseIcon />} />\n}\n\n//\n// ModalHeader\n//\n\nexport type ModalHeaderProps = DivProps & {\n    /**\n     * The content of the header.\n     */\n    children: React.ReactNode\n    /**\n     * Allows to provide a custom button element, or to omit the close button if set to false.\n     * @see ModalCloseButton\n     */\n    button?: React.ReactNode | boolean\n    /**\n     * Whether to render a divider line below the header.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal header area with an optional close button.\n *\n * @see Modal\n * @see ModalFooter\n * @see ModalBody\n */\nexport function ModalHeader({\n    children,\n    button = true,\n    withDivider = false,\n    exceptionallySetClassName,\n    ...props\n}: ModalHeaderProps) {\n    return (\n        <>\n            <Box\n                {...props}\n                as=\"header\"\n                paddingLeft=\"large\"\n                paddingRight=\"small\"\n                paddingY=\"small\"\n                className={exceptionallySetClassName}\n            >\n                <Columns space=\"large\" alignY=\"center\">\n                    <Column width=\"auto\">{children}</Column>\n                    <Column width=\"content\" exceptionallySetClassName={styles.buttonContainer}>\n                        {typeof button !== 'boolean' ? (\n                            button\n                        ) : button === true ? (\n                            <ModalCloseButton aria-label=\"Close modal\" />\n                        ) : null}\n                    </Column>\n                </Columns>\n            </Box>\n            {withDivider ? <Divider /> : null}\n        </>\n    )\n}\n\n//\n// ModalBody\n//\n\nexport type ModalBodyProps = DivProps & {\n    /**\n     * The content of the modal body.\n     */\n    children: React.ReactNode\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders the body of a modal.\n *\n * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other\n * things, that the contet of the modal body expands or contracts depending on the modal height\n * setting or the size of the content. The body content also automatically scrolls when it's too\n * large to fit the available space.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalFooter\n */\nexport function ModalBody({ exceptionallySetClassName, children, ...props }: ModalBodyProps) {\n    const { height } = React.useContext(ModalContext)\n    return (\n        <Box\n            {...props}\n            className={exceptionallySetClassName}\n            flexGrow={height === 'expand' ? 1 : 0}\n            height={height === 'expand' ? 'full' : undefined}\n            overflow=\"auto\"\n        >\n            <Box padding=\"large\" paddingBottom=\"xxlarge\">\n                {children}\n            </Box>\n        </Box>\n    )\n}\n\n//\n// ModalFooter\n//\n\nexport type ModalFooterProps = DivProps & {\n    /**\n     * The contant of the modal footer.\n     */\n    children: React.ReactNode\n    /**\n     * Whether to render a divider line below the footer.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal footer area.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalBody\n */\nexport function ModalFooter({\n    exceptionallySetClassName,\n    withDivider = false,\n    ...props\n}: ModalFooterProps) {\n    return (\n        <>\n            {withDivider ? <Divider /> : null}\n            <Box as=\"footer\" {...props} className={exceptionallySetClassName} padding=\"large\" />\n        </>\n    )\n}\n\n//\n// ModalActions\n//\n\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 }: ModalFooterProps) {\n    return (\n        <ModalFooter {...props}>\n            <Inline align=\"right\" space=\"large\">\n                {React.Children.map(children, (child) => (\n                    <div>{child}</div>\n                ))}\n            </Inline>\n        </ModalFooter>\n    )\n}\n"],"names":["ModalContext","React","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","Modal","isOpen","width","exceptionallySetClassName","autoFocus","children","props","contextValue","DialogOverlay","dangerouslyBypassFocusLock","className","classNames","styles","overlay","FocusLock","whiteList","DialogContent","as","Box","borderRadius","background","display","flexDirection","overflow","flexGrow","container","Provider","value","ModalCloseButton","Button","variant","onClick","icon","CloseIcon","ModalHeader","button","withDivider","paddingLeft","paddingRight","paddingY","Columns","space","alignY","Column","buttonContainer","Divider","ModalBody","padding","paddingBottom","ModalFooter","ModalActions","Inline","align","map","child"],"mappings":"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"}
+{"version":3,"file":"modal.js","sources":["../../../src/new-components/modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { DialogOverlay, DialogContent } from '@reach/dialog'\nimport FocusLock from 'react-focus-lock'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Column, Columns } from '../columns'\nimport { Inline } from '../inline'\nimport { Divider } from '../divider'\nimport { Box } from '../box'\nimport { Button, ButtonProps } from '../button'\n\nimport styles from './modal.module.css'\n\ntype ModalWidth = 'small' | 'medium' | 'large' | 'xlarge' | 'full'\ntype ModalHeightMode = 'expand' | 'fitContent'\n\n//\n// ModalContext\n//\n\ntype ModalContextValue = {\n    onDismiss?(this: void): void\n    height: ModalHeightMode\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({\n    onDismiss: undefined,\n    height: 'fitContent',\n})\n\n//\n// Modal container\n//\n\ntype DivProps = Omit<\n    React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,\n    'className' | 'children' | `aria-label` | `aria-labelledby`\n>\n\nexport type ModalProps = DivProps & {\n    /**\n     * The content of the modal.\n     */\n    children: React.ReactNode\n    /**\n     * Whether the modal is open and visible or not.\n     */\n    isOpen: boolean\n    /**\n     * Called when the user triggers closing the modal.\n     */\n    onDismiss?(): void\n    /**\n     * A descriptive setting for how wide the modal should aim to be, depending on how much space\n     * it has on screen.\n     * @default 'medium'\n     */\n    width?: ModalWidth\n    /**\n     * A descriptive setting for how tall the modal should aim to be.\n     *\n     * - 'expand': the modal aims to fill most of the available screen height, leaving only a small\n     *   padding above and below.\n     * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.\n     *\n     * In either case, if content does not fit, the content of the main body is set to scroll\n     * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the\n     * viewport boundaries.\n     *\n     * If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of\n     * the inner layout to ensure scroll, or whatever other strategy you may want.\n     */\n    height?: ModalHeightMode\n    /**\n     * Whether to set or not the focus initially to the first focusable element inside the modal.\n     */\n    autoFocus?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n    /** Defines a string value that labels the current modal for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current modal for assistive technologies. */\n    'aria-labelledby'?: string\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n    return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/**\n * Renders a modal that sits on top of the rest of the content in the entire page.\n *\n * Follows the WAI-ARIA Dialog (Modal) Pattern.\n *\n * @see ModalHeader\n * @see ModalFooter\n * @see ModalBody\n */\nexport function Modal({\n    isOpen,\n    onDismiss,\n    height = 'fitContent',\n    width = 'medium',\n    exceptionallySetClassName,\n    autoFocus = true,\n    children,\n    ...props\n}: ModalProps) {\n    const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n        onDismiss,\n        height,\n    ])\n\n    return (\n        <DialogOverlay\n            isOpen={isOpen}\n            onDismiss={onDismiss}\n            dangerouslyBypassFocusLock // We're setting up our own focus lock below\n            className={classNames(styles.overlay, styles[height], styles[width])}\n            data-testid=\"modal-overlay\"\n        >\n            <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n                <DialogContent\n                    {...props}\n                    as={Box}\n                    borderRadius=\"full\"\n                    background=\"default\"\n                    display=\"flex\"\n                    flexDirection=\"column\"\n                    overflow=\"hidden\"\n                    height={height === 'expand' ? 'full' : undefined}\n                    flexGrow={height === 'expand' ? 1 : 0}\n                    className={[exceptionallySetClassName, styles.container]}\n                >\n                    <ModalContext.Provider value={contextValue}>{children}</ModalContext.Provider>\n                </DialogContent>\n            </FocusLock>\n        </DialogOverlay>\n    )\n}\n\n//\n// ModalCloseButton\n//\n\nexport type ModalCloseButtonProps = Omit<\n    ButtonProps,\n    | 'type'\n    | 'children'\n    | 'variant'\n    | 'icon'\n    | 'startIcon'\n    | 'endIcon'\n    | 'disabled'\n    | 'loading'\n    | 'tabIndex'\n> & {\n    /**\n     * The descriptive label of the button.\n     */\n    'aria-label': string\n}\n\n/**\n * The close button rendered by ModalHeader. Provided independently so that consumers can customize\n * the button's label.\n *\n * @see ModalHeader\n */\nexport function ModalCloseButton(props: ModalCloseButtonProps) {\n    const { onDismiss } = React.useContext(ModalContext)\n    const [includeInTabOrder, setincludeInTabOrder] = React.useState(false)\n    const [isMounted, setIsMounted] = React.useState(false)\n\n    React.useEffect(\n        function skipAutoFocus() {\n            if (isMounted) {\n                setincludeInTabOrder(true)\n            } else {\n                setIsMounted(true)\n            }\n        },\n        [isMounted],\n    )\n\n    return (\n        <Button\n            {...props}\n            variant=\"quaternary\"\n            onClick={onDismiss}\n            icon={<CloseIcon />}\n            tabIndex={includeInTabOrder ? 0 : -1}\n        />\n    )\n}\n\n//\n// ModalHeader\n//\n\nexport type ModalHeaderProps = DivProps & {\n    /**\n     * The content of the header.\n     */\n    children: React.ReactNode\n    /**\n     * Allows to provide a custom button element, or to omit the close button if set to false.\n     * @see ModalCloseButton\n     */\n    button?: React.ReactNode | boolean\n    /**\n     * Whether to render a divider line below the header.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal header area with an optional close button.\n *\n * @see Modal\n * @see ModalFooter\n * @see ModalBody\n */\nexport function ModalHeader({\n    children,\n    button = true,\n    withDivider = false,\n    exceptionallySetClassName,\n    ...props\n}: ModalHeaderProps) {\n    return (\n        <>\n            <Box\n                {...props}\n                as=\"header\"\n                paddingLeft=\"large\"\n                paddingRight=\"small\"\n                paddingY=\"small\"\n                className={exceptionallySetClassName}\n            >\n                <Columns space=\"large\" alignY=\"center\">\n                    <Column width=\"auto\">{children}</Column>\n                    <Column width=\"content\" exceptionallySetClassName={styles.buttonContainer}>\n                        {typeof button !== 'boolean' ? (\n                            button\n                        ) : button === true ? (\n                            <ModalCloseButton aria-label=\"Close modal\" autoFocus={false} />\n                        ) : null}\n                    </Column>\n                </Columns>\n            </Box>\n            {withDivider ? <Divider /> : null}\n        </>\n    )\n}\n\n//\n// ModalBody\n//\n\nexport type ModalBodyProps = DivProps & {\n    /**\n     * The content of the modal body.\n     */\n    children: React.ReactNode\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders the body of a modal.\n *\n * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other\n * things, that the contet of the modal body expands or contracts depending on the modal height\n * setting or the size of the content. The body content also automatically scrolls when it's too\n * large to fit the available space.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalFooter\n */\nexport function ModalBody({ exceptionallySetClassName, children, ...props }: ModalBodyProps) {\n    const { height } = React.useContext(ModalContext)\n    return (\n        <Box\n            {...props}\n            className={exceptionallySetClassName}\n            flexGrow={height === 'expand' ? 1 : 0}\n            height={height === 'expand' ? 'full' : undefined}\n            overflow=\"auto\"\n        >\n            <Box padding=\"large\" paddingBottom=\"xxlarge\">\n                {children}\n            </Box>\n        </Box>\n    )\n}\n\n//\n// ModalFooter\n//\n\nexport type ModalFooterProps = DivProps & {\n    /**\n     * The contant of the modal footer.\n     */\n    children: React.ReactNode\n    /**\n     * Whether to render a divider line below the footer.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal footer area.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalBody\n */\nexport function ModalFooter({\n    exceptionallySetClassName,\n    withDivider = false,\n    ...props\n}: ModalFooterProps) {\n    return (\n        <>\n            {withDivider ? <Divider /> : null}\n            <Box as=\"footer\" {...props} className={exceptionallySetClassName} padding=\"large\" />\n        </>\n    )\n}\n\n//\n// ModalActions\n//\n\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 }: ModalFooterProps) {\n    return (\n        <ModalFooter {...props}>\n            <Inline align=\"right\" space=\"large\">\n                {React.Children.map(children, (child) => (\n                    <div>{child}</div>\n                ))}\n            </Inline>\n        </ModalFooter>\n    )\n}\n"],"names":["ModalContext","React","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","Modal","isOpen","width","exceptionallySetClassName","autoFocus","children","props","contextValue","DialogOverlay","dangerouslyBypassFocusLock","className","classNames","styles","overlay","FocusLock","whiteList","returnFocus","DialogContent","as","Box","borderRadius","background","display","flexDirection","overflow","flexGrow","container","Provider","value","ModalCloseButton","includeInTabOrder","setincludeInTabOrder","isMounted","setIsMounted","skipAutoFocus","Button","variant","onClick","icon","CloseIcon","tabIndex","ModalHeader","button","withDivider","paddingLeft","paddingRight","paddingY","Columns","space","alignY","Column","buttonContainer","Divider","ModalBody","padding","paddingBottom","ModalFooter","ModalActions","Inline","align","map","child"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-var modules_8f59d13b = {"reach-portal":"_93b53b2b","fadein":"_0f743b56","fitContent":"_82046c6f","container":"_36546d47","medium":"_11db4229","small":"_1c6ba1b6","large":"b8e32cac","overlay":"_47aa5864","expand":"_898993b5","buttonContainer":"_7a6f51a1"};
+var modules_8f59d13b = {"reach-portal":"dddb40c3","fadein":"_955f2d73","fitContent":"_95c7550e","container":"_88079712","full":"_4779d078","large":"_5fd86231","medium":"bdfb5931","small":"_4e848a11","xlarge":"d673fba2","overlay":"ea9ae0cc","expand":"a8bf8a4f","buttonContainer":"_44d6850e"};
 
 export default modules_8f59d13b;
 //# sourceMappingURL=modal.module.css.js.map

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

@@ -10,6 +10,7 @@ import { PasswordHiddenIcon } from '../icons/password-hidden-icon.js';
 import styles from './password-field.module.css.js';
 import styles$1 from '../text-field/text-field.module.css.js';
 
+var _excluded = ["label", "secondaryLabel", "auxiliaryLabel", "hint", "maxWidth", "togglePasswordLabel", "hidden", "aria-describedby"];
 var PasswordField = /*#__PURE__*/forwardRef(function PasswordField(_ref, ref) {
   var label = _ref.label,
       secondaryLabel = _ref.secondaryLabel,
@@ -20,7 +21,7 @@ var PasswordField = /*#__PURE__*/forwardRef(function PasswordField(_ref, ref) {
       togglePasswordLabel = _ref$togglePasswordLa === void 0 ? 'Toggle password visibility' : _ref$togglePasswordLa,
       hidden = _ref.hidden,
       ariaDescribedBy = _ref['aria-describedby'],
-      props = _objectWithoutPropertiesLoose(_ref, ["label", "secondaryLabel", "auxiliaryLabel", "hint", "maxWidth", "togglePasswordLabel", "hidden", "aria-describedby"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var id = useId(props.id);
   var internalRef = useRef(null);

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

@@ -1 +1 @@
-{"version":3,"file":"password-field.js","sources":["../../../src/new-components/password-field/password-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useForkRef } from 'reakit-utils'\nimport { Tooltip } from '../../components/tooltip'\nimport { BaseField } from '../base-field'\nimport { Box } from '../box'\nimport { useId } from '../common-helpers'\n\nimport { PasswordVisibleIcon } from '../icons/password-visible-icon'\nimport { PasswordHiddenIcon } from '../icons/password-hidden-icon'\n\nimport styles from './password-field.module.css'\nimport textFieldStyles from '../text-field/text-field.module.css'\n\nimport type { TextFieldProps } from '../text-field'\n\ntype PasswordFieldProps = Omit<TextFieldProps, 'type'> & {\n    togglePasswordLabel?: string\n}\n\nconst PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(function PasswordField(\n    {\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        maxWidth,\n        togglePasswordLabel = 'Toggle password visibility',\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        ...props\n    },\n    ref,\n) {\n    const id = useId(props.id)\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const inputRef = useForkRef(internalRef, ref)\n\n    const [isPasswordVisible, setPasswordVisible] = React.useState(false)\n\n    function togglePasswordVisibility() {\n        setPasswordVisible((v) => !v)\n        internalRef.current?.focus()\n    }\n\n    return (\n        <BaseField\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box\n                    display=\"flex\"\n                    alignItems=\"center\"\n                    className={[styles.inputWrapper, textFieldStyles.inputWrapper]}\n                >\n                    <input\n                        {...props}\n                        {...extraProps}\n                        ref={inputRef}\n                        type={isPasswordVisible ? 'text' : 'password'}\n                    />\n                    <Tooltip content={togglePasswordLabel}>\n                        <button\n                            type=\"button\"\n                            onClick={togglePasswordVisibility}\n                            aria-label={togglePasswordLabel}\n                            tabIndex={-1}\n                        >\n                            {isPasswordVisible ? (\n                                <PasswordVisibleIcon aria-hidden />\n                            ) : (\n                                <PasswordHiddenIcon aria-hidden />\n                            )}\n                        </button>\n                    </Tooltip>\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { PasswordField }\nexport type { PasswordFieldProps }\n"],"names":["PasswordField","React","ref","label","secondaryLabel","auxiliaryLabel","hint","maxWidth","togglePasswordLabel","hidden","ariaDescribedBy","props","id","useId","internalRef","inputRef","useForkRef","isPasswordVisible","setPasswordVisible","togglePasswordVisibility","v","current","focus","BaseField","extraProps","Box","display","alignItems","className","styles","inputWrapper","textFieldStyles","type","Tooltip","content","onClick","tabIndex","PasswordVisibleIcon","PasswordHiddenIcon"],"mappings":";;;;;;;;;;;;IAmBMA,aAAa,gBAAGC,UAAA,CAAuD,SAASD,aAAT,OAYzEE,GAZyE;MAErEC,aAAAA;MACAC,sBAAAA;MACAC,sBAAAA;MACAC,YAAAA;MACAC,gBAAAA;mCACAC;MAAAA,yDAAsB;MACtBC,cAAAA;MACoBC,uBAApB;MACGC;;AAIP,MAAMC,EAAE,GAAGC,KAAK,CAACF,KAAK,CAACC,EAAP,CAAhB;AACA,MAAME,WAAW,GAAGb,MAAA,CAA+B,IAA/B,CAApB;AACA,MAAMc,QAAQ,GAAGC,UAAU,CAACF,WAAD,EAAcZ,GAAd,CAA3B;;wBAEgDD,QAAA,CAAe,KAAf;MAAzCgB;MAAmBC;;AAE1B,WAASC,wBAAT;;;AACID,IAAAA,kBAAkB,CAAC,UAACE,CAAD;AAAA,aAAO,CAACA,CAAR;AAAA,KAAD,CAAlB;AACA,4BAAAN,WAAW,CAACO,OAAZ,8EAAqBC,KAArB;AACH;;AAED,sBACIrB,aAAA,CAACsB,SAAD;AACIX,IAAAA,EAAE,EAAEA;AACJT,IAAAA,KAAK,EAAEA;AACPC,IAAAA,cAAc,EAAEA;AAChBC,IAAAA,cAAc,EAAEA;AAChBC,IAAAA,IAAI,EAAEA;AACNC,IAAAA,QAAQ,EAAEA;AACVE,IAAAA,MAAM,EAAEA;wBACUC;GARtB,EAUK,UAACc,UAAD;AAAA,wBACGvB,aAAA,CAACwB,GAAD;AACIC,MAAAA,OAAO,EAAC;AACRC,MAAAA,UAAU,EAAC;AACXC,MAAAA,SAAS,EAAE,CAACC,MAAM,CAACC,YAAR,EAAsBC,QAAe,CAACD,YAAtC;KAHf,eAKI7B,aAAA,QAAA,oBACQU,OACAa;AACJtB,MAAAA,GAAG,EAAEa;AACLiB,MAAAA,IAAI,EAAEf,iBAAiB,GAAG,MAAH,GAAY;MAJvC,CALJ,eAWIhB,aAAA,CAACgC,OAAD;AAASC,MAAAA,OAAO,EAAE1B;KAAlB,eACIP,aAAA,SAAA;AACI+B,MAAAA,IAAI,EAAC;AACLG,MAAAA,OAAO,EAAEhB;oBACGX;AACZ4B,MAAAA,QAAQ,EAAE,CAAC;KAJf,EAMKnB,iBAAiB,gBACdhB,aAAA,CAACoC,mBAAD;;KAAA,CADc,gBAGdpC,aAAA,CAACqC,kBAAD;;KAAA,CATR,CADJ,CAXJ,CADH;AAAA,GAVL,CADJ;AAyCH,CAlEqB;;;;"}
+{"version":3,"file":"password-field.js","sources":["../../../src/new-components/password-field/password-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useForkRef } from 'reakit-utils'\nimport { Tooltip } from '../../components/tooltip'\nimport { BaseField } from '../base-field'\nimport { Box } from '../box'\nimport { useId } from '../common-helpers'\n\nimport { PasswordVisibleIcon } from '../icons/password-visible-icon'\nimport { PasswordHiddenIcon } from '../icons/password-hidden-icon'\n\nimport styles from './password-field.module.css'\nimport textFieldStyles from '../text-field/text-field.module.css'\n\nimport type { TextFieldProps } from '../text-field'\n\ntype PasswordFieldProps = Omit<TextFieldProps, 'type'> & {\n    togglePasswordLabel?: string\n}\n\nconst PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(function PasswordField(\n    {\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        maxWidth,\n        togglePasswordLabel = 'Toggle password visibility',\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        ...props\n    },\n    ref,\n) {\n    const id = useId(props.id)\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const inputRef = useForkRef(internalRef, ref)\n\n    const [isPasswordVisible, setPasswordVisible] = React.useState(false)\n\n    function togglePasswordVisibility() {\n        setPasswordVisible((v) => !v)\n        internalRef.current?.focus()\n    }\n\n    return (\n        <BaseField\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box\n                    display=\"flex\"\n                    alignItems=\"center\"\n                    className={[styles.inputWrapper, textFieldStyles.inputWrapper]}\n                >\n                    <input\n                        {...props}\n                        {...extraProps}\n                        ref={inputRef}\n                        type={isPasswordVisible ? 'text' : 'password'}\n                    />\n                    <Tooltip content={togglePasswordLabel}>\n                        <button\n                            type=\"button\"\n                            onClick={togglePasswordVisibility}\n                            aria-label={togglePasswordLabel}\n                            tabIndex={-1}\n                        >\n                            {isPasswordVisible ? (\n                                <PasswordVisibleIcon aria-hidden />\n                            ) : (\n                                <PasswordHiddenIcon aria-hidden />\n                            )}\n                        </button>\n                    </Tooltip>\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { PasswordField }\nexport type { PasswordFieldProps }\n"],"names":["PasswordField","React","ref","label","secondaryLabel","auxiliaryLabel","hint","maxWidth","togglePasswordLabel","hidden","ariaDescribedBy","props","id","useId","internalRef","inputRef","useForkRef","isPasswordVisible","setPasswordVisible","togglePasswordVisibility","v","current","focus","BaseField","extraProps","Box","display","alignItems","className","styles","inputWrapper","textFieldStyles","type","Tooltip","content","onClick","tabIndex","PasswordVisibleIcon","PasswordHiddenIcon"],"mappings":";;;;;;;;;;;;;IAmBMA,aAAa,gBAAGC,UAAA,CAAuD,SAASD,aAAT,OAYzEE,GAZyE;MAErEC,aAAAA;MACAC,sBAAAA;MACAC,sBAAAA;MACAC,YAAAA;MACAC,gBAAAA;mCACAC;MAAAA,yDAAsB;MACtBC,cAAAA;MACoBC,uBAApB;MACGC;;AAIP,MAAMC,EAAE,GAAGC,KAAK,CAACF,KAAK,CAACC,EAAP,CAAhB;AACA,MAAME,WAAW,GAAGb,MAAA,CAA+B,IAA/B,CAApB;AACA,MAAMc,QAAQ,GAAGC,UAAU,CAACF,WAAD,EAAcZ,GAAd,CAA3B;;AAEA,wBAAgDD,QAAA,CAAe,KAAf,CAAhD;AAAA,MAAOgB,iBAAP;AAAA,MAA0BC,kBAA1B;;AAEA,WAASC,wBAAT;;;AACID,IAAAA,kBAAkB,CAAC,UAACE,CAAD;AAAA,aAAO,CAACA,CAAR;AAAA,KAAD,CAAlB;AACA,4BAAAN,WAAW,CAACO,OAAZ,8EAAqBC,KAArB;AACH;;AAED,sBACIrB,aAAA,CAACsB,SAAD;AACIX,IAAAA,EAAE,EAAEA;AACJT,IAAAA,KAAK,EAAEA;AACPC,IAAAA,cAAc,EAAEA;AAChBC,IAAAA,cAAc,EAAEA;AAChBC,IAAAA,IAAI,EAAEA;AACNC,IAAAA,QAAQ,EAAEA;AACVE,IAAAA,MAAM,EAAEA;wBACUC;GARtB,EAUK,UAACc,UAAD;AAAA,wBACGvB,aAAA,CAACwB,GAAD;AACIC,MAAAA,OAAO,EAAC;AACRC,MAAAA,UAAU,EAAC;AACXC,MAAAA,SAAS,EAAE,CAACC,MAAM,CAACC,YAAR,EAAsBC,QAAe,CAACD,YAAtC;KAHf,eAKI7B,aAAA,QAAA,oBACQU,OACAa;AACJtB,MAAAA,GAAG,EAAEa;AACLiB,MAAAA,IAAI,EAAEf,iBAAiB,GAAG,MAAH,GAAY;MAJvC,CALJ,eAWIhB,aAAA,CAACgC,OAAD;AAASC,MAAAA,OAAO,EAAE1B;KAAlB,eACIP,aAAA,SAAA;AACI+B,MAAAA,IAAI,EAAC;AACLG,MAAAA,OAAO,EAAEhB;oBACGX;AACZ4B,MAAAA,QAAQ,EAAE,CAAC;KAJf,EAMKnB,iBAAiB,gBACdhB,aAAA,CAACoC,mBAAD;;KAAA,CADc,gBAGdpC,aAAA,CAACqC,kBAAD;;KAAA,CATR,CADJ,CAXJ,CADH;AAAA,GAVL,CADJ;AAyCH,CAlEqB;;;;"}

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

@@ -4,6 +4,7 @@ import { Box } from '../box/box.js';
 import { BaseField } from '../base-field/base-field.js';
 import styles from './select-field.module.css.js';
 
+var _excluded = ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "maxWidth", "children", "hidden", "aria-describedby"];
 var SelectField = /*#__PURE__*/forwardRef(function SelectField(_ref, ref) {
   var id = _ref.id,
       label = _ref.label,
@@ -14,7 +15,7 @@ var SelectField = /*#__PURE__*/forwardRef(function SelectField(_ref, ref) {
       children = _ref.children,
       hidden = _ref.hidden,
       ariaDescribedBy = _ref['aria-describedby'],
-      props = _objectWithoutPropertiesLoose(_ref, ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "maxWidth", "children", "hidden", "aria-describedby"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return /*#__PURE__*/createElement(BaseField, {
     id: id,

package/es/new-components/select-field/select-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-field.js","sources":["../../../src/new-components/select-field/select-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './select-field.module.css'\n\ntype SelectFieldProps = FieldComponentProps<HTMLSelectElement>\n\nconst SelectField = React.forwardRef<HTMLSelectElement, SelectFieldProps>(function SelectField(\n    {\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        maxWidth,\n        children,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseField\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box className={styles.selectWrapper}>\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","id","label","secondaryLabel","auxiliaryLabel","hint","maxWidth","children","hidden","ariaDescribedBy","props","BaseField","extraProps","Box","className","styles","selectWrapper","SelectChevron","width","height","fill","xmlns","d"],"mappings":";;;;;;IAOMA,WAAW,gBAAGC,UAAA,CAAsD,SAASD,WAAT,OAatEE,GAbsE;MAElEC,UAAAA;MACAC,aAAAA;MACAC,sBAAAA;MACAC,sBAAAA;MACAC,YAAAA;MACAC,gBAAAA;MACAC,gBAAAA;MACAC,cAAAA;MACoBC,uBAApB;MACGC;;AAIP,sBACIX,aAAA,CAACY,SAAD;AACIV,IAAAA,EAAE,EAAEA;AACJC,IAAAA,KAAK,EAAEA;AACPC,IAAAA,cAAc,EAAEA;AAChBC,IAAAA,cAAc,EAAEA;AAChBC,IAAAA,IAAI,EAAEA;AACNC,IAAAA,QAAQ,EAAEA;AACVE,IAAAA,MAAM,EAAEA;wBACUC;GARtB,EAUK,UAACG,UAAD;AAAA,wBACGb,aAAA,CAACc,GAAD;AAAKC,MAAAA,SAAS,EAAEC,MAAM,CAACC;KAAvB,eACIjB,aAAA,SAAA,oBAAYW,OAAWE;AAAYZ,MAAAA,GAAG,EAAEA;MAAxC,EACKO,QADL,CADJ,eAIIR,aAAA,CAACkB,aAAD;;KAAA,CAJJ,CADH;AAAA,GAVL,CADJ;AAqBH,CApCmB;;AAsCpB,SAASA,aAAT,CAAuBP,KAAvB;AACI,sBACIX,aAAA,MAAA;AAAKmB,IAAAA,KAAK,EAAC;AAAKC,IAAAA,MAAM,EAAC;AAAKC,IAAAA,IAAI,EAAC;AAAOC,IAAAA,KAAK,EAAC;KAAiCX,MAA/E,eACIX,aAAA,OAAA;AACIuB,IAAAA,CAAC,EAAC;AACFF,IAAAA,IAAI,EAAC;GAFT,CADJ,CADJ;AAQH;;;;"}
+{"version":3,"file":"select-field.js","sources":["../../../src/new-components/select-field/select-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './select-field.module.css'\n\ntype SelectFieldProps = FieldComponentProps<HTMLSelectElement>\n\nconst SelectField = React.forwardRef<HTMLSelectElement, SelectFieldProps>(function SelectField(\n    {\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        maxWidth,\n        children,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseField\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box className={styles.selectWrapper}>\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","id","label","secondaryLabel","auxiliaryLabel","hint","maxWidth","children","hidden","ariaDescribedBy","props","BaseField","extraProps","Box","className","styles","selectWrapper","SelectChevron","width","height","fill","xmlns","d"],"mappings":";;;;;;;IAOMA,WAAW,gBAAGC,UAAA,CAAsD,SAASD,WAAT,OAatEE,GAbsE;MAElEC,UAAAA;MACAC,aAAAA;MACAC,sBAAAA;MACAC,sBAAAA;MACAC,YAAAA;MACAC,gBAAAA;MACAC,gBAAAA;MACAC,cAAAA;MACoBC,uBAApB;MACGC;;AAIP,sBACIX,aAAA,CAACY,SAAD;AACIV,IAAAA,EAAE,EAAEA;AACJC,IAAAA,KAAK,EAAEA;AACPC,IAAAA,cAAc,EAAEA;AAChBC,IAAAA,cAAc,EAAEA;AAChBC,IAAAA,IAAI,EAAEA;AACNC,IAAAA,QAAQ,EAAEA;AACVE,IAAAA,MAAM,EAAEA;wBACUC;GARtB,EAUK,UAACG,UAAD;AAAA,wBACGb,aAAA,CAACc,GAAD;AAAKC,MAAAA,SAAS,EAAEC,MAAM,CAACC;KAAvB,eACIjB,aAAA,SAAA,oBAAYW,OAAWE;AAAYZ,MAAAA,GAAG,EAAEA;MAAxC,EACKO,QADL,CADJ,eAIIR,aAAA,CAACkB,aAAD;;KAAA,CAJJ,CADH;AAAA,GAVL,CADJ;AAqBH,CApCmB;;AAsCpB,SAASA,aAAT,CAAuBP,KAAvB;AACI,sBACIX,aAAA,MAAA;AAAKmB,IAAAA,KAAK,EAAC;AAAKC,IAAAA,MAAM,EAAC;AAAKC,IAAAA,IAAI,EAAC;AAAOC,IAAAA,KAAK,EAAC;KAAiCX,MAA/E,eACIX,aAAA,OAAA;AACIuB,IAAAA,CAAC,EAAC;AACFF,IAAAA,IAAI,EAAC;GAFT,CADJ,CADJ;AAQH;;;;"}

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

@@ -1,4 +1,4 @@
-var modules_1fa9b208 = {"selectWrapper":"d259b5cb"};
+var modules_1fa9b208 = {"selectWrapper":"_828e09c5"};
 
 export default modules_1fa9b208;
 //# sourceMappingURL=select-field.module.css.js.map

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

@@ -7,16 +7,17 @@ import { Divider } from '../divider/divider.js';
 import flattenChildren from 'react-keyed-flatten-children';
 import styles from './stack.module.css.js';
 
+var _excluded = ["as", "space", "align", "dividers", "children", "exceptionallySetClassName"];
 var Stack = /*#__PURE__*/polymorphicComponent(function Stack(_ref, ref) {
   var as = _ref.as,
       space = _ref.space,
       _ref$align = _ref.align,
       align = _ref$align === void 0 ? 'start' : _ref$align,
       _ref$dividers = _ref.dividers,
-      dividers = _ref$dividers === void 0 ? false : _ref$dividers,
+      dividers = _ref$dividers === void 0 ? 'none' : _ref$dividers,
       children = _ref.children,
       exceptionallySetClassName = _ref.exceptionallySetClassName,
-      props = _objectWithoutPropertiesLoose(_ref, ["as", "space", "align", "dividers", "children", "exceptionallySetClassName"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var alignProps = align === 'start' ? undefined : {
     width: 'full',
@@ -30,9 +31,9 @@ var Stack = /*#__PURE__*/polymorphicComponent(function Stack(_ref, ref) {
     as: as,
     className: [exceptionallySetClassName, getClassNames(styles, 'space', space)],
     ref: ref
-  }), dividers ? Children.map(flattenChildren(children), function (child, index) {
+  }), dividers !== 'none' ? Children.map(flattenChildren(children), function (child, index) {
     return index > 0 ? /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Divider, {
-      weight: typeof dividers === 'string' ? dividers : undefined
+      weight: dividers
     }), child) : child;
   }) : children);
 });

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

@@ -1 +1 @@
-{"version":3,"file":"stack.js","sources":["../../../src/new-components/stack/stack.tsx"],"sourcesContent":["import * as React from 'react'\nimport flattenChildren from 'react-keyed-flatten-children'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { getClassNames, mapResponsiveProp } from '../responsive-props'\nimport { Box } from '../box'\nimport { Divider } from '../divider'\n\nimport type { ResponsiveProp } from '../responsive-props'\nimport type { Space } from '../common-types'\nimport type { BoxProps, ReusableBoxProps } from '../box'\nimport type { DividerWeight } from '../divider'\n\nimport styles from './stack.module.css'\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    /** Add dividers if `true`, or specify the weight of the dividers to add */\n    dividers?: boolean | DividerWeight\n}\n\nconst Stack = polymorphicComponent<'div', StackProps>(function Stack(\n    { as, space, align = 'start', dividers = false, children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    const alignProps: BoxProps | undefined =\n        align === 'start'\n            ? undefined\n            : {\n                  width: 'full',\n                  flexDirection: 'column',\n                  display: 'flex',\n                  alignItems: mapResponsiveProp(align, (align) =>\n                      align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center',\n                  ),\n              }\n\n    return (\n        <Box\n            {...props}\n            {...alignProps}\n            as={as}\n            className={[exceptionallySetClassName, getClassNames(styles, 'space', space)]}\n            ref={ref}\n        >\n            {dividers\n                ? React.Children.map(flattenChildren(children), (child, index) =>\n                      index > 0 ? (\n                          <>\n                              <Divider\n                                  weight={typeof dividers === 'string' ? dividers : undefined}\n                              />\n                              {child}\n                          </>\n                      ) : (\n                          child\n                      ),\n                  )\n                : children}\n        </Box>\n    )\n})\n\nexport type { StackProps }\nexport { Stack }\n"],"names":["Stack","polymorphicComponent","ref","as","space","align","dividers","children","exceptionallySetClassName","props","alignProps","undefined","width","flexDirection","display","alignItems","mapResponsiveProp","React","Box","className","getClassNames","styles","map","flattenChildren","child","index","Divider","weight"],"mappings":";;;;;;;;;IAyBMA,KAAK,gBAAGC,oBAAoB,CAAoB,SAASD,KAAT,OAElDE,GAFkD;MAChDC,UAAAA;MAAIC,aAAAA;wBAAOC;MAAAA,gCAAQ;2BAASC;MAAAA,sCAAW;MAAOC,gBAAAA;MAAUC,iCAAAA;MAA8BC;;AAGxF,MAAMC,UAAU,GACZL,KAAK,KAAK,OAAV,GACMM,SADN,GAEM;AACIC,IAAAA,KAAK,EAAE,MADX;AAEIC,IAAAA,aAAa,EAAE,QAFnB;AAGIC,IAAAA,OAAO,EAAE,MAHb;AAIIC,IAAAA,UAAU,EAAEC,iBAAiB,CAACX,KAAD,EAAQ,UAACA,KAAD;AAAA,aACjCA,KAAK,KAAK,OAAV,GAAoB,WAApB,GAAkCA,KAAK,KAAK,KAAV,GAAkB,SAAlB,GAA8B,QAD/B;AAAA,KAAR;AAJjC,GAHV;AAYA,sBACIY,aAAA,CAACC,GAAD,oBACQT,OACAC;AACJP,IAAAA,EAAE,EAAEA;AACJgB,IAAAA,SAAS,EAAE,CAACX,yBAAD,EAA4BY,aAAa,CAACC,MAAD,EAAS,OAAT,EAAkBjB,KAAlB,CAAzC;AACXF,IAAAA,GAAG,EAAEA;IALT,EAOKI,QAAQ,GACHW,QAAA,CAAeK,GAAf,CAAmBC,eAAe,CAAChB,QAAD,CAAlC,EAA8C,UAACiB,KAAD,EAAQC,KAAR;AAAA,WAC1CA,KAAK,GAAG,CAAR,gBACIR,aAAA,SAAA,MAAA,eACIA,aAAA,CAACS,OAAD;AACIC,MAAAA,MAAM,EAAE,OAAOrB,QAAP,KAAoB,QAApB,GAA+BA,QAA/B,GAA0CK;KADtD,CADJ,EAIKa,KAJL,CADJ,GAQIA,KATsC;AAAA,GAA9C,CADG,GAaHjB,QApBV,CADJ;AAwBH,CAxCiC;;;;"}
+{"version":3,"file":"stack.js","sources":["../../../src/new-components/stack/stack.tsx"],"sourcesContent":["import * as React from 'react'\nimport flattenChildren from 'react-keyed-flatten-children'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { getClassNames, mapResponsiveProp } from '../responsive-props'\nimport { Box } from '../box'\nimport { Divider } from '../divider'\n\nimport type { ResponsiveProp } from '../responsive-props'\nimport type { DividerWeight, Space } from '../common-types'\nimport type { BoxProps, ReusableBoxProps } from '../box'\n\nimport styles from './stack.module.css'\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 = 'start',\n        dividers = 'none',\n        children,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    const alignProps: BoxProps | undefined =\n        align === 'start'\n            ? undefined\n            : {\n                  width: 'full',\n                  flexDirection: 'column',\n                  display: 'flex',\n                  alignItems: mapResponsiveProp(align, (align) =>\n                      align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center',\n                  ),\n              }\n\n    return (\n        <Box\n            {...props}\n            {...alignProps}\n            as={as}\n            className={[exceptionallySetClassName, getClassNames(styles, 'space', space)]}\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":["Stack","polymorphicComponent","ref","as","space","align","dividers","children","exceptionallySetClassName","props","alignProps","undefined","width","flexDirection","display","alignItems","mapResponsiveProp","React","Box","className","getClassNames","styles","map","flattenChildren","child","index","Divider","weight"],"mappings":";;;;;;;;;;IAwBMA,KAAK,gBAAGC,oBAAoB,CAAoB,SAASD,KAAT,OAUlDE,GAVkD;MAE9CC,UAAAA;MACAC,aAAAA;wBACAC;MAAAA,gCAAQ;2BACRC;MAAAA,sCAAW;MACXC,gBAAAA;MACAC,iCAAAA;MACGC;;AAIP,MAAMC,UAAU,GACZL,KAAK,KAAK,OAAV,GACMM,SADN,GAEM;AACIC,IAAAA,KAAK,EAAE,MADX;AAEIC,IAAAA,aAAa,EAAE,QAFnB;AAGIC,IAAAA,OAAO,EAAE,MAHb;AAIIC,IAAAA,UAAU,EAAEC,iBAAiB,CAACX,KAAD,EAAQ,UAACA,KAAD;AAAA,aACjCA,KAAK,KAAK,OAAV,GAAoB,WAApB,GAAkCA,KAAK,KAAK,KAAV,GAAkB,SAAlB,GAA8B,QAD/B;AAAA,KAAR;AAJjC,GAHV;AAYA,sBACIY,aAAA,CAACC,GAAD,oBACQT,OACAC;AACJP,IAAAA,EAAE,EAAEA;AACJgB,IAAAA,SAAS,EAAE,CAACX,yBAAD,EAA4BY,aAAa,CAACC,MAAD,EAAS,OAAT,EAAkBjB,KAAlB,CAAzC;AACXF,IAAAA,GAAG,EAAEA;IALT,EAOKI,QAAQ,KAAK,MAAb,GACKW,QAAA,CAAeK,GAAf,CAAmBC,eAAe,CAAChB,QAAD,CAAlC,EAA8C,UAACiB,KAAD,EAAQC,KAAR;AAAA,WAC1CA,KAAK,GAAG,CAAR,gBACIR,aAAA,SAAA,MAAA,eACIA,aAAA,CAACS,OAAD;AAASC,MAAAA,MAAM,EAAErB;KAAjB,CADJ,EAEKkB,KAFL,CADJ,GAMIA,KAPsC;AAAA,GAA9C,CADL,GAWKjB,QAlBV,CADJ;AAsBH,CA9CiC;;;;"}

package/es/new-components/switch-field/switch-field.js

@@ -8,6 +8,7 @@ import { useId } from '../common-helpers.js';
 import { FieldHint } from '../base-field/base-field.js';
 import styles from './switch-field.module.css.js';
 
+var _excluded = ["label", "hint", "disabled", "hidden", "defaultChecked", "id", "aria-describedby", "aria-label", "aria-labelledby", "onChange"];
 var SwitchField = /*#__PURE__*/forwardRef(function SwitchField(_ref, ref) {
   var _ref2, _props$checked, _props$checked2;
 
@@ -19,23 +20,31 @@ var SwitchField = /*#__PURE__*/forwardRef(function SwitchField(_ref, ref) {
       defaultChecked = _ref.defaultChecked,
       originalId = _ref.id,
       originalAriaDescribedBy = _ref['aria-describedby'],
+      originalAriaLabel = _ref['aria-label'],
+      originalAriaLabelledby = _ref['aria-labelledby'],
       _onChange = _ref.onChange,
-      props = _objectWithoutPropertiesLoose(_ref, ["label", "hint", "disabled", "hidden", "defaultChecked", "id", "aria-describedby", "onChange"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var id = useId(originalId);
   var hintId = useId();
   var ariaDescribedBy = originalAriaDescribedBy !== null && originalAriaDescribedBy !== void 0 ? originalAriaDescribedBy : hint ? hintId : undefined;
+  var ariaLabel = originalAriaLabel !== null && originalAriaLabel !== void 0 ? originalAriaLabel : undefined;
+  var ariaLabelledBy = originalAriaLabelledby !== null && originalAriaLabelledby !== void 0 ? originalAriaLabelledby : undefined;
 
-  var _React$useState = useState((_ref2 = (_props$checked = props.checked) !== null && _props$checked !== void 0 ? _props$checked : defaultChecked) !== null && _ref2 !== void 0 ? _ref2 : false),
-      checkedState = _React$useState[0],
-      setChecked = _React$useState[1];
+  var _React$useState = useState(false),
+      keyFocused = _React$useState[0],
+      setKeyFocused = _React$useState[1];
+
+  var _React$useState2 = useState((_ref2 = (_props$checked = props.checked) !== null && _props$checked !== void 0 ? _props$checked : defaultChecked) !== null && _ref2 !== void 0 ? _ref2 : false),
+      checkedState = _React$useState2[0],
+      setChecked = _React$useState2[1];
 
   var isChecked = (_props$checked2 = props.checked) !== null && _props$checked2 !== void 0 ? _props$checked2 : checkedState;
   return /*#__PURE__*/createElement(Stack, {
     space: "small",
     hidden: hidden
   }, /*#__PURE__*/createElement(Box, {
-    className: [styles.container, disabled ? styles.disabled : null, isChecked ? styles.checked : null],
+    className: [styles.container, disabled ? styles.disabled : null, isChecked ? styles.checked : null, keyFocused ? styles.keyFocused : null],
     as: "label",
     display: "flex",
     alignItems: "center"
@@ -51,6 +60,8 @@ var SwitchField = /*#__PURE__*/forwardRef(function SwitchField(_ref, ref) {
     type: "checkbox",
     disabled: disabled,
     "aria-describedby": ariaDescribedBy,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
     ref: ref,
     checked: isChecked,
     onChange: function onChange(event) {
@@ -59,6 +70,18 @@ var SwitchField = /*#__PURE__*/forwardRef(function SwitchField(_ref, ref) {
       if (!event.defaultPrevented) {
         setChecked(event.currentTarget.checked);
       }
+    },
+    onBlur: function onBlur(event) {
+      var _props$onBlur;
+
+      setKeyFocused(false);
+      props === null || props === void 0 ? void 0 : (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 ? void 0 : _props$onBlur.call(props, event);
+    },
+    onKeyUp: function onKeyUp(event) {
+      var _props$onKeyUp;
+
+      setKeyFocused(true);
+      props === null || props === void 0 ? void 0 : (_props$onKeyUp = props.onKeyUp) === null || _props$onKeyUp === void 0 ? void 0 : _props$onKeyUp.call(props, event);
     }
   }))), /*#__PURE__*/createElement("span", {
     className: styles.handle

package/es/new-components/switch-field/switch-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch-field.js","sources":["../../../src/new-components/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 '../common-helpers'\nimport styles from './switch-field.module.css'\n\ntype SwitchFieldProps = Omit<\n    FieldComponentProps<HTMLInputElement>,\n    'type' | 'secondaryLabel' | 'auxiliaryLabel' | 'maxWidth'\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        onChange,\n        ...props\n    },\n    ref,\n) {\n    const id = useId(originalId)\n    const hintId = useId()\n    const ariaDescribedBy = originalAriaDescribedBy ?? (hint ? hintId : undefined)\n    const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n    const isChecked = props.checked ?? checkedState\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                ]}\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                            ref={ref}\n                            checked={isChecked}\n                            onChange={(event) => {\n                                onChange?.(event)\n                                if (!event.defaultPrevented) {\n                                    setChecked(event.currentTarget.checked)\n                                }\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":["SwitchField","React","ref","label","hint","disabled","hidden","defaultChecked","originalId","id","originalAriaDescribedBy","onChange","props","useId","hintId","ariaDescribedBy","undefined","checked","checkedState","setChecked","isChecked","Stack","space","Box","className","styles","container","as","display","alignItems","position","overflow","marginRight","flexShrink","toggle","HiddenVisually","type","event","defaultPrevented","currentTarget","handle","Text","exceptionallySetClassName","FieldHint"],"mappings":";;;;;;;;;;IAcMA,WAAW,gBAAGC,UAAA,CAAqD,SAASD,WAAT,OAYrEE,GAZqE;;;MAEjEC,aAAAA;MACAC,YAAAA;2BACAC;MAAAA,sCAAW;MACXC,cAAAA;MACAC,sBAAAA;MACIC,kBAAJC;MACoBC,+BAApB;MACAC,iBAAAA;MACGC;;AAIP,MAAMH,EAAE,GAAGI,KAAK,CAACL,UAAD,CAAhB;AACA,MAAMM,MAAM,GAAGD,KAAK,EAApB;AACA,MAAME,eAAe,GAAGL,uBAAH,aAAGA,uBAAH,cAAGA,uBAAH,GAA+BN,IAAI,GAAGU,MAAH,GAAYE,SAApE;;wBACmCf,QAAA,4BAAeW,KAAK,CAACK,OAArB,2DAAgCV,cAAhC,yCAAkD,KAAlD;MAA5BW;MAAcC;;AACrB,MAAMC,SAAS,sBAAGR,KAAK,CAACK,OAAT,6DAAoBC,YAAnC;AACA,sBACIjB,aAAA,CAACoB,KAAD;AAAOC,IAAAA,KAAK,EAAC;AAAQhB,IAAAA,MAAM,EAAEA;GAA7B,eACIL,aAAA,CAACsB,GAAD;AACIC,IAAAA,SAAS,EAAE,CACPC,MAAM,CAACC,SADA,EAEPrB,QAAQ,GAAGoB,MAAM,CAACpB,QAAV,GAAqB,IAFtB,EAGPe,SAAS,GAAGK,MAAM,CAACR,OAAV,GAAoB,IAHtB;AAKXU,IAAAA,EAAE,EAAC;AACHC,IAAAA,OAAO,EAAC;AACRC,IAAAA,UAAU,EAAC;GARf,eAUI5B,aAAA,CAACsB,GAAD;AACIO,IAAAA,QAAQ,EAAC;AACTF,IAAAA,OAAO,EAAC;AACRG,IAAAA,QAAQ,EAAC;AACTC,IAAAA,WAAW,EAAC;AACZC,IAAAA,UAAU,EAAE;AACZT,IAAAA,SAAS,EAAEC,MAAM,CAACS;GANtB,eAQIjC,aAAA,CAACkC,cAAD,MAAA,eACIlC,aAAA,QAAA,oBACQW;AACJH,IAAAA,EAAE,EAAEA;AACJ2B,IAAAA,IAAI,EAAC;AACL/B,IAAAA,QAAQ,EAAEA;wBACQU;AAClBb,IAAAA,GAAG,EAAEA;AACLe,IAAAA,OAAO,EAAEG;AACTT,IAAAA,QAAQ,EAAE,kBAAC0B,KAAD;AACN1B,MAAAA,SAAQ,SAAR,IAAAA,SAAQ,WAAR,YAAAA,SAAQ,CAAG0B,KAAH,CAAR;;AACA,UAAI,CAACA,KAAK,CAACC,gBAAX,EAA6B;AACzBnB,QAAAA,UAAU,CAACkB,KAAK,CAACE,aAAN,CAAoBtB,OAArB,CAAV;AACH;AACJ;IAbL,CADJ,CARJ,eAyBIhB,aAAA,OAAA;AAAMuB,IAAAA,SAAS,EAAEC,MAAM,CAACe;GAAxB,CAzBJ,CAVJ,eAqCIvC,aAAA,CAACwC,IAAD;AAAMC,IAAAA,yBAAyB,EAAEjB,MAAM,CAACtB;GAAxC,EAAgDA,KAAhD,CArCJ,CADJ,EAwCKC,IAAI,gBAAGH,aAAA,CAAC0C,SAAD;AAAWlC,IAAAA,EAAE,EAAEK;GAAf,EAAwBV,IAAxB,CAAH,GAA+C,IAxCxD,CADJ;AA4CH,CA/DmB;;;;"}
+{"version":3,"file":"switch-field.js","sources":["../../../src/new-components/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 '../common-helpers'\nimport styles from './switch-field.module.css'\n\ntype SwitchFieldProps = Omit<\n    FieldComponentProps<HTMLInputElement>,\n    | 'type'\n    | 'secondaryLabel'\n    | 'auxiliaryLabel'\n    | 'maxWidth'\n    | 'aria-describedby'\n    | 'aria-label'\n    | 'aria-labelledby'\n> & {\n    /** Identifies the element (or elements) that describes the switch for assistive technologies. */\n    'aria-describedby'?: string\n    /** Defines a string value that labels the current switch for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current switch for assistive technologies. */\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":["SwitchField","React","ref","label","hint","disabled","hidden","defaultChecked","originalId","id","originalAriaDescribedBy","originalAriaLabel","originalAriaLabelledby","onChange","props","useId","hintId","ariaDescribedBy","undefined","ariaLabel","ariaLabelledBy","keyFocused","setKeyFocused","checked","checkedState","setChecked","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":"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"}

package/es/new-components/switch-field/switch-field.module.css.js

@@ -1,4 +1,4 @@
-var modules_8e05f7c9 = {"container":"_99a80509","disabled":"b5cf26ef","checked":"a63c43a2","toggle":"f318ae83","label":"_427926b9","handle":"_9fcd994c"};
+var modules_8e05f7c9 = {"container":"ec63c3f1","disabled":"_7de9c06d","checked":"a37981fc","toggle":"_2a17ac45","label":"_68cc9707","handle":"_91409c7f","keyFocused":"a6490371"};
 
 export default modules_8e05f7c9;
 //# sourceMappingURL=switch-field.module.css.js.map

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

@@ -7,6 +7,11 @@ import { useTabState, Tab as Tab$1, TabList as TabList$1, TabPanel as TabPanel$1
 import { usePrevious } from '../../hooks/use-previous/use-previous.js';
 import styles from './tabs.module.css.js';
 
+var _excluded = ["color", "variant"],
+    _excluded2 = ["children", "space"],
+    _excluded3 = ["color", "variant"],
+    _excluded4 = ["children", "id", "as", "render"],
+    _excluded5 = ["color", "variant"];
 var TabsContext = /*#__PURE__*/createContext(null);
 /**
  * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.
@@ -58,7 +63,7 @@ function Tab(_ref2) {
 
   var color = tabContextValue.color,
       variant = tabContextValue.variant,
-      tabState = _objectWithoutPropertiesLoose(tabContextValue, ["color", "variant"]);
+      tabState = _objectWithoutPropertiesLoose(tabContextValue, _excluded);
 
   return /*#__PURE__*/createElement(Tab$1, Object.assign({
     className: classNames(styles.tab, styles["tab-" + (variant !== null && variant !== void 0 ? variant : '')], styles["tab-" + (color !== null && color !== void 0 ? color : '')]),
@@ -73,7 +78,7 @@ function TabList(_ref3) {
   var children = _ref3.children,
       _ref3$space = _ref3.space,
       space = _ref3$space === void 0 ? 'medium' : _ref3$space,
-      props = _objectWithoutPropertiesLoose(_ref3, ["children", "space"]);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded2);
 
   var tabContextValue = useContext(TabsContext);
 
@@ -81,7 +86,7 @@ function TabList(_ref3) {
     return null;
   }
 
-  var tabState = _objectWithoutPropertiesLoose(tabContextValue, ["color", "variant"]);
+  var tabState = _objectWithoutPropertiesLoose(tabContextValue, _excluded3);
 
   return /*#__PURE__*/createElement(TabList$1, Object.assign({}, props, tabState), /*#__PURE__*/createElement(Inline, {
     space: space
@@ -97,7 +102,7 @@ var TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref4, ref) {
       as = _ref4.as,
       _ref4$render = _ref4.render,
       render = _ref4$render === void 0 ? 'always' : _ref4$render,
-      props = _objectWithoutPropertiesLoose(_ref4, ["children", "id", "as", "render"]);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
 
   var tabContextValue = useContext(TabsContext);
 
@@ -116,7 +121,7 @@ var TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref4, ref) {
     return null;
   }
 
-  var tabState = _objectWithoutPropertiesLoose(tabContextValue, ["color", "variant"]);
+  var tabState = _objectWithoutPropertiesLoose(tabContextValue, _excluded5);
 
   return /*#__PURE__*/createElement(TabPanel$1, Object.assign({
     tabId: id