@doist/reactist 10.0.0-beta.1 → 10.0.0-beta.10

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

@@ -0,0 +1,201 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { useMemo, createElement, useContext, Fragment, Children, createContext } from 'react';
+import classNames from 'classnames';
+import { Box } from '../box/box.js';
+import { Columns, Column } from '../columns/columns.js';
+import { Divider } from '../divider/divider.js';
+import { Inline } from '../inline/inline.js';
+import { CloseIcon } from '../icons/close-icon.js';
+import { Button } from '../button/button.js';
+import { DialogOverlay, DialogContent } from '@reach/dialog';
+import FocusLock from 'react-focus-lock';
+import styles from './modal.module.css.js';
+
+var ModalContext = /*#__PURE__*/createContext({
+  onDismiss: undefined,
+  height: 'fitContent'
+});
+
+function isNotInternalFrame(element) {
+  return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe');
+}
+/**
+ * Renders a modal that sits on top of the rest of the content in the entire page.
+ *
+ * Follows the WAI-ARIA Dialog (Modal) Pattern.
+ *
+ * @see ModalHeader
+ * @see ModalFooter
+ * @see ModalBody
+ */
+
+
+function Modal(_ref) {
+  var isOpen = _ref.isOpen,
+      onDismiss = _ref.onDismiss,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? 'fitContent' : _ref$height,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 'medium' : _ref$width,
+      exceptionallySetClassName = _ref.exceptionallySetClassName,
+      _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"]);
+
+  var contextValue = useMemo(function () {
+    return {
+      onDismiss: onDismiss,
+      height: height
+    };
+  }, [onDismiss, height]);
+  return /*#__PURE__*/createElement(DialogOverlay, {
+    isOpen: isOpen,
+    onDismiss: onDismiss,
+    dangerouslyBypassFocusLock // We're setting up our own focus lock below
+    : true,
+    className: classNames(styles.overlay, styles[height], styles[width]),
+    "data-testid": "modal-overlay"
+  }, /*#__PURE__*/createElement(FocusLock, {
+    autoFocus: autoFocus,
+    whiteList: isNotInternalFrame
+  }, /*#__PURE__*/createElement(DialogContent, Object.assign({}, props, {
+    as: Box,
+    borderRadius: "full",
+    background: "default",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    height: height === 'expand' ? 'full' : undefined,
+    flexGrow: height === 'expand' ? 1 : 0,
+    className: [exceptionallySetClassName, styles.container]
+  }), /*#__PURE__*/createElement(ModalContext.Provider, {
+    value: contextValue
+  }, children))));
+}
+/**
+ * The close button rendered by ModalHeader. Provided independently so that consumers can customize
+ * the button's label.
+ *
+ * @see ModalHeader
+ */
+
+function ModalCloseButton(props) {
+  var _React$useContext = useContext(ModalContext),
+      onDismiss = _React$useContext.onDismiss;
+
+  return /*#__PURE__*/createElement(Button, Object.assign({}, props, {
+    variant: "quaternary",
+    onClick: onDismiss,
+    icon: /*#__PURE__*/createElement(CloseIcon, null)
+  }));
+}
+/**
+ * Renders a standard modal header area with an optional close button.
+ *
+ * @see Modal
+ * @see ModalFooter
+ * @see ModalBody
+ */
+
+function ModalHeader(_ref2) {
+  var children = _ref2.children,
+      _ref2$button = _ref2.button,
+      button = _ref2$button === void 0 ? true : _ref2$button,
+      _ref2$withDivider = _ref2.withDivider,
+      withDivider = _ref2$withDivider === void 0 ? false : _ref2$withDivider,
+      exceptionallySetClassName = _ref2.exceptionallySetClassName,
+      props = _objectWithoutPropertiesLoose(_ref2, ["children", "button", "withDivider", "exceptionallySetClassName"]);
+
+  return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Box, Object.assign({}, props, {
+    as: "header",
+    paddingLeft: "large",
+    paddingRight: "small",
+    paddingY: "small",
+    className: exceptionallySetClassName
+  }), /*#__PURE__*/createElement(Columns, {
+    space: "large",
+    alignY: "center"
+  }, /*#__PURE__*/createElement(Column, {
+    width: "auto"
+  }, children), /*#__PURE__*/createElement(Column, {
+    width: "content",
+    exceptionallySetClassName: styles.buttonContainer
+  }, typeof button !== 'boolean' ? button : button === true ? /*#__PURE__*/createElement(ModalCloseButton, {
+    "aria-label": "Close modal"
+  }) : null))), withDivider ? /*#__PURE__*/createElement(Divider, null) : null);
+}
+/**
+ * Renders the body of a modal.
+ *
+ * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other
+ * things, that the contet of the modal body expands or contracts depending on the modal height
+ * setting or the size of the content. The body content also automatically scrolls when it's too
+ * large to fit the available space.
+ *
+ * @see Modal
+ * @see ModalHeader
+ * @see ModalFooter
+ */
+
+function ModalBody(_ref3) {
+  var exceptionallySetClassName = _ref3.exceptionallySetClassName,
+      children = _ref3.children,
+      props = _objectWithoutPropertiesLoose(_ref3, ["exceptionallySetClassName", "children"]);
+
+  var _React$useContext2 = useContext(ModalContext),
+      height = _React$useContext2.height;
+
+  return /*#__PURE__*/createElement(Box, Object.assign({}, props, {
+    className: exceptionallySetClassName,
+    flexGrow: height === 'expand' ? 1 : 0,
+    height: height === 'expand' ? 'full' : undefined,
+    overflow: "auto"
+  }), /*#__PURE__*/createElement(Box, {
+    padding: "large",
+    paddingBottom: "xxlarge"
+  }, children));
+}
+/**
+ * Renders a standard modal footer area.
+ *
+ * @see Modal
+ * @see ModalHeader
+ * @see ModalBody
+ */
+
+function ModalFooter(_ref4) {
+  var exceptionallySetClassName = _ref4.exceptionallySetClassName,
+      _ref4$withDivider = _ref4.withDivider,
+      withDivider = _ref4$withDivider === void 0 ? false : _ref4$withDivider,
+      props = _objectWithoutPropertiesLoose(_ref4, ["exceptionallySetClassName", "withDivider"]);
+
+  return /*#__PURE__*/createElement(Fragment, null, withDivider ? /*#__PURE__*/createElement(Divider, null) : null, /*#__PURE__*/createElement(Box, Object.assign({
+    as: "footer"
+  }, props, {
+    className: exceptionallySetClassName,
+    padding: "large"
+  })));
+} //
+// ModalActions
+//
+
+/**
+ * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).
+ * @see ModalFooter
+ */
+
+function ModalActions(_ref5) {
+  var children = _ref5.children,
+      props = _objectWithoutPropertiesLoose(_ref5, ["children"]);
+
+  return /*#__PURE__*/createElement(ModalFooter, Object.assign({}, props), /*#__PURE__*/createElement(Inline, {
+    align: "right",
+    space: "large"
+  }, Children.map(children, function (child) {
+    return /*#__PURE__*/createElement("div", null, child);
+  })));
+}
+
+export { Modal, ModalActions, ModalBody, ModalCloseButton, ModalFooter, ModalHeader };
+//# sourceMappingURL=modal.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,4 @@
+var modules_8f59d13b = {"reach-portal":"_72b0d072","fadein":"_3ef30abf","fitContent":"_99107d2f","container":"badff007","medium":"_3b39110c","small":"fc325d7b","large":"_5751d6d0","overlay":"_0091d9c5","expand":"_52207af6","buttonContainer":"b97b958d"};
+
+export default modules_8f59d13b;
+//# sourceMappingURL=modal.module.css.js.map

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

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

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

@@ -1,8 +1,8 @@
 import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, useRef, useState, createElement } from 'react';
 import { Box } from '../box/box.js';
-import { useForkRef } from 'reakit-utils';
 import { Tooltip } from '../../components/tooltip/tooltip.js';
+import { useForkRef } from 'reakit-utils';
 import { useId } from '../common-helpers.js';
 import { BaseField } from '../base-field/base-field.js';
 import { PasswordVisibleIcon } from '../icons/password-visible-icon.js';

package/es/new-components/responsive-props.js

@@ -1,8 +1,4 @@
 var DEBUG = process.env.NODE_ENV === 'development';
-
-function isResponsivePropArray(responsiveProp) {
-  return Array.isArray(responsiveProp);
-}
 /**
  * Builds a css module class name for a given prop + prop-value combination.
  *
@@ -21,7 +17,6 @@ function isResponsivePropArray(responsiveProp) {
  * @param value the given prop's value
  */
 
-
 function getClassNames(styles, property, value) {
   if (!value) {
     return null;
@@ -29,14 +24,6 @@ function getClassNames(styles, property, value) {
 
   var classList = [];
 
-  if (isResponsivePropArray(value)) {
-    value = {
-      mobile: value[0],
-      tablet: value[1],
-      desktop: value[2]
-    };
-  }
-
   if (typeof value === 'string') {
     classList.push(styles[property + "-" + value]);
   } else {
@@ -77,14 +64,6 @@ function mapResponsiveProp(fromValue, mapper) {
     return mapper(fromValue);
   }
 
-  if (isResponsivePropArray(fromValue)) {
-    fromValue = {
-      mobile: fromValue[0],
-      tablet: fromValue[1],
-      desktop: fromValue[2]
-    };
-  }
-
   return {
     mobile: fromValue.mobile ? mapper(fromValue.mobile) : undefined,
     tablet: fromValue.tablet ? mapper(fromValue.tablet) : undefined,

package/es/new-components/responsive-props.js.map

@@ -1 +1 @@
-{"version":3,"file":"responsive-props.js","sources":["../../src/new-components/responsive-props.ts"],"sourcesContent":["type ResponsiveBreakpoints = 'mobile' | 'tablet' | 'desktop'\n\ntype Atom = string | number | boolean\n\n/**\n * A responsive prop supports receiving values of its given base type, or an object mapping a\n * responsive breakpoint name to a value from the prop's base type.\n *\n * Some examples:\n *\n * - `align={{ mobile: 'left', tablet: 'center', desktop: 'right' }}`\n */\ntype ResponsiveProp<AtomType extends Atom> =\n    | AtomType\n    | Readonly<[AtomType, AtomType]>\n    | Readonly<[AtomType, AtomType, AtomType]>\n    | Readonly<{ [key in ResponsiveBreakpoints]?: AtomType }>\n\nconst DEBUG = process.env.NODE_ENV === 'development'\n\nfunction isResponsivePropArray<AtomType extends Atom>(\n    responsiveProp: ResponsiveProp<AtomType>,\n): responsiveProp is Readonly<[AtomType, AtomType]> | Readonly<[AtomType, AtomType, AtomType]> {\n    return Array.isArray(responsiveProp)\n}\n\n/**\n * Builds a css module class name for a given prop + prop-value combination.\n *\n * We have a convention of building the internal utility-based class names system in a way that\n * resembles the prop for which it is used and the value of the prop. For instance, in a component\n * with a prop `width` with possible values `narrow` and `wide`, we encode the styles for each of\n * these alternatives in the class-names `.width-narrow` and `.width-wide`.\n *\n * Furthermore, this helper is aware of responsive prop values. For instance, if you provide the\n * `width` prop above with the value `['narrow', 'wide']` this returns `['narrow', 'tablet-wide']`.\n * That is, it returns an array of class names, following the same convention above, but also\n * prefixing by the viewport width variant (`tablet-` or `desktop-`).\n *\n * @param styles the class names mapping imported from a css module\n * @param property the prop name\n * @param value the given prop's value\n */\nfunction getClassNames(\n    styles: Record<string, string>,\n    property: string,\n    value: ResponsiveProp<string> | null | undefined,\n): string[] | null {\n    if (!value) {\n        return null\n    }\n\n    const classList: string[] = []\n\n    if (isResponsivePropArray(value)) {\n        value = {\n            mobile: value[0],\n            tablet: value[1],\n            desktop: value[2],\n        }\n    }\n\n    if (typeof value === 'string') {\n        classList.push(styles[`${property}-${value}`])\n    } else {\n        if (value.mobile) classList.push(styles[`${property}-${value.mobile}`])\n        if (value.tablet) classList.push(styles[`tablet-${property}-${value.tablet}`])\n        if (value.desktop) classList.push(styles[`desktop-${property}-${value.desktop}`])\n    }\n\n    if (DEBUG && !classList.every(Boolean)) {\n        // eslint-disable-next-line no-console\n        console.warn('Not all generated class names were found', { property, value, classList })\n    }\n\n    return classList\n}\n\n/**\n * A mapping over a responsive prop value.\n *\n * Since response values can be an object but also a scalar value, this helper makes it easier to\n * to map the values when it's an object but keeps it consistent for the case when it is a scalar\n * value as well.\n *\n * @param fromValue the responsive prop value\n * @param mapper the mapping function\n */\nfunction mapResponsiveProp<From extends Atom, To extends Atom>(\n    fromValue: ResponsiveProp<From> | undefined,\n    mapper: (from: From) => To,\n): ResponsiveProp<To> | undefined {\n    if (!fromValue) {\n        return undefined\n    }\n\n    if (typeof fromValue !== 'object') {\n        return mapper(fromValue)\n    }\n\n    if (isResponsivePropArray(fromValue)) {\n        fromValue = {\n            mobile: fromValue[0],\n            tablet: fromValue[1],\n            desktop: fromValue[2],\n        }\n    }\n\n    return {\n        mobile: fromValue.mobile ? mapper(fromValue.mobile) : undefined,\n        tablet: fromValue.tablet ? mapper(fromValue.tablet) : undefined,\n        desktop: fromValue.desktop ? mapper(fromValue.desktop) : undefined,\n    }\n}\n\nexport type { ResponsiveProp, ResponsiveBreakpoints }\nexport { getClassNames, mapResponsiveProp }\n"],"names":["DEBUG","process","env","NODE_ENV","isResponsivePropArray","responsiveProp","Array","isArray","getClassNames","styles","property","value","classList","mobile","tablet","desktop","push","every","Boolean","console","warn","mapResponsiveProp","fromValue","mapper","undefined"],"mappings":"AAkBA,IAAMA,KAAK,GAAGC,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAAvC;;AAEA,SAASC,qBAAT,CACIC,cADJ;AAGI,SAAOC,KAAK,CAACC,OAAN,CAAcF,cAAd,CAAP;AACH;AAED;;;;;;;;;;;;;;;;;;;AAiBA,SAASG,aAAT,CACIC,MADJ,EAEIC,QAFJ,EAGIC,KAHJ;AAKI,MAAI,CAACA,KAAL,EAAY;AACR,WAAO,IAAP;AACH;;AAED,MAAMC,SAAS,GAAa,EAA5B;;AAEA,MAAIR,qBAAqB,CAACO,KAAD,CAAzB,EAAkC;AAC9BA,IAAAA,KAAK,GAAG;AACJE,MAAAA,MAAM,EAAEF,KAAK,CAAC,CAAD,CADT;AAEJG,MAAAA,MAAM,EAAEH,KAAK,CAAC,CAAD,CAFT;AAGJI,MAAAA,OAAO,EAAEJ,KAAK,CAAC,CAAD;AAHV,KAAR;AAKH;;AAED,MAAI,OAAOA,KAAP,KAAiB,QAArB,EAA+B;AAC3BC,IAAAA,SAAS,CAACI,IAAV,CAAeP,MAAM,CAAIC,QAAJ,SAAgBC,KAAhB,CAArB;AACH,GAFD,MAEO;AACH,QAAIA,KAAK,CAACE,MAAV,EAAkBD,SAAS,CAACI,IAAV,CAAeP,MAAM,CAAIC,QAAJ,SAAgBC,KAAK,CAACE,MAAtB,CAArB;AAClB,QAAIF,KAAK,CAACG,MAAV,EAAkBF,SAAS,CAACI,IAAV,CAAeP,MAAM,aAAWC,QAAX,SAAuBC,KAAK,CAACG,MAA7B,CAArB;AAClB,QAAIH,KAAK,CAACI,OAAV,EAAmBH,SAAS,CAACI,IAAV,CAAeP,MAAM,cAAYC,QAAZ,SAAwBC,KAAK,CAACI,OAA9B,CAArB;AACtB;;AAED,MAAIf,KAAK,IAAI,CAACY,SAAS,CAACK,KAAV,CAAgBC,OAAhB,CAAd,EAAwC;AACpC;AACAC,IAAAA,OAAO,CAACC,IAAR,CAAa,0CAAb,EAAyD;AAAEV,MAAAA,QAAQ,EAARA,QAAF;AAAYC,MAAAA,KAAK,EAALA,KAAZ;AAAmBC,MAAAA,SAAS,EAATA;AAAnB,KAAzD;AACH;;AAED,SAAOA,SAAP;AACH;AAED;;;;;;;;;;;;AAUA,SAASS,iBAAT,CACIC,SADJ,EAEIC,MAFJ;AAII,MAAI,CAACD,SAAL,EAAgB;AACZ,WAAOE,SAAP;AACH;;AAED,MAAI,OAAOF,SAAP,KAAqB,QAAzB,EAAmC;AAC/B,WAAOC,MAAM,CAACD,SAAD,CAAb;AACH;;AAED,MAAIlB,qBAAqB,CAACkB,SAAD,CAAzB,EAAsC;AAClCA,IAAAA,SAAS,GAAG;AACRT,MAAAA,MAAM,EAAES,SAAS,CAAC,CAAD,CADT;AAERR,MAAAA,MAAM,EAAEQ,SAAS,CAAC,CAAD,CAFT;AAGRP,MAAAA,OAAO,EAAEO,SAAS,CAAC,CAAD;AAHV,KAAZ;AAKH;;AAED,SAAO;AACHT,IAAAA,MAAM,EAAES,SAAS,CAACT,MAAV,GAAmBU,MAAM,CAACD,SAAS,CAACT,MAAX,CAAzB,GAA8CW,SADnD;AAEHV,IAAAA,MAAM,EAAEQ,SAAS,CAACR,MAAV,GAAmBS,MAAM,CAACD,SAAS,CAACR,MAAX,CAAzB,GAA8CU,SAFnD;AAGHT,IAAAA,OAAO,EAAEO,SAAS,CAACP,OAAV,GAAoBQ,MAAM,CAACD,SAAS,CAACP,OAAX,CAA1B,GAAgDS;AAHtD,GAAP;AAKH;;;;"}
+{"version":3,"file":"responsive-props.js","sources":["../../src/new-components/responsive-props.ts"],"sourcesContent":["type ResponsiveBreakpoints = 'mobile' | 'tablet' | 'desktop'\n\ntype Atom = string | number | boolean\n\n/**\n * A responsive prop supports receiving values of its given base type, or an object mapping a\n * responsive breakpoint name to a value from the prop's base type.\n *\n * Some examples:\n *\n * - `align={{ mobile: 'left', tablet: 'center', desktop: 'right' }}`\n */\ntype ResponsiveProp<AtomType extends Atom> =\n    | AtomType\n    | Readonly<{ [key in ResponsiveBreakpoints]?: AtomType }>\n\nconst DEBUG = process.env.NODE_ENV === 'development'\n\n/**\n * Builds a css module class name for a given prop + prop-value combination.\n *\n * We have a convention of building the internal utility-based class names system in a way that\n * resembles the prop for which it is used and the value of the prop. For instance, in a component\n * with a prop `width` with possible values `narrow` and `wide`, we encode the styles for each of\n * these alternatives in the class-names `.width-narrow` and `.width-wide`.\n *\n * Furthermore, this helper is aware of responsive prop values. For instance, if you provide the\n * `width` prop above with the value `['narrow', 'wide']` this returns `['narrow', 'tablet-wide']`.\n * That is, it returns an array of class names, following the same convention above, but also\n * prefixing by the viewport width variant (`tablet-` or `desktop-`).\n *\n * @param styles the class names mapping imported from a css module\n * @param property the prop name\n * @param value the given prop's value\n */\nfunction getClassNames(\n    styles: Record<string, string>,\n    property: string,\n    value: ResponsiveProp<string> | null | undefined,\n): string[] | null {\n    if (!value) {\n        return null\n    }\n\n    const classList: string[] = []\n\n    if (typeof value === 'string') {\n        classList.push(styles[`${property}-${value}`])\n    } else {\n        if (value.mobile) classList.push(styles[`${property}-${value.mobile}`])\n        if (value.tablet) classList.push(styles[`tablet-${property}-${value.tablet}`])\n        if (value.desktop) classList.push(styles[`desktop-${property}-${value.desktop}`])\n    }\n\n    if (DEBUG && !classList.every(Boolean)) {\n        // eslint-disable-next-line no-console\n        console.warn('Not all generated class names were found', { property, value, classList })\n    }\n\n    return classList\n}\n\n/**\n * A mapping over a responsive prop value.\n *\n * Since response values can be an object but also a scalar value, this helper makes it easier to\n * to map the values when it's an object but keeps it consistent for the case when it is a scalar\n * value as well.\n *\n * @param fromValue the responsive prop value\n * @param mapper the mapping function\n */\nfunction mapResponsiveProp<From extends Atom, To extends Atom>(\n    fromValue: ResponsiveProp<From> | undefined,\n    mapper: (from: From) => To,\n): ResponsiveProp<To> | undefined {\n    if (!fromValue) {\n        return undefined\n    }\n\n    if (typeof fromValue !== 'object') {\n        return mapper(fromValue)\n    }\n\n    return {\n        mobile: fromValue.mobile ? mapper(fromValue.mobile) : undefined,\n        tablet: fromValue.tablet ? mapper(fromValue.tablet) : undefined,\n        desktop: fromValue.desktop ? mapper(fromValue.desktop) : undefined,\n    }\n}\n\nexport type { ResponsiveProp, ResponsiveBreakpoints }\nexport { getClassNames, mapResponsiveProp }\n"],"names":["DEBUG","process","env","NODE_ENV","getClassNames","styles","property","value","classList","push","mobile","tablet","desktop","every","Boolean","console","warn","mapResponsiveProp","fromValue","mapper","undefined"],"mappings":"AAgBA,IAAMA,KAAK,GAAGC,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAAvC;AAEA;;;;;;;;;;;;;;;;;;AAiBA,SAASC,aAAT,CACIC,MADJ,EAEIC,QAFJ,EAGIC,KAHJ;AAKI,MAAI,CAACA,KAAL,EAAY;AACR,WAAO,IAAP;AACH;;AAED,MAAMC,SAAS,GAAa,EAA5B;;AAEA,MAAI,OAAOD,KAAP,KAAiB,QAArB,EAA+B;AAC3BC,IAAAA,SAAS,CAACC,IAAV,CAAeJ,MAAM,CAAIC,QAAJ,SAAgBC,KAAhB,CAArB;AACH,GAFD,MAEO;AACH,QAAIA,KAAK,CAACG,MAAV,EAAkBF,SAAS,CAACC,IAAV,CAAeJ,MAAM,CAAIC,QAAJ,SAAgBC,KAAK,CAACG,MAAtB,CAArB;AAClB,QAAIH,KAAK,CAACI,MAAV,EAAkBH,SAAS,CAACC,IAAV,CAAeJ,MAAM,aAAWC,QAAX,SAAuBC,KAAK,CAACI,MAA7B,CAArB;AAClB,QAAIJ,KAAK,CAACK,OAAV,EAAmBJ,SAAS,CAACC,IAAV,CAAeJ,MAAM,cAAYC,QAAZ,SAAwBC,KAAK,CAACK,OAA9B,CAArB;AACtB;;AAED,MAAIZ,KAAK,IAAI,CAACQ,SAAS,CAACK,KAAV,CAAgBC,OAAhB,CAAd,EAAwC;AACpC;AACAC,IAAAA,OAAO,CAACC,IAAR,CAAa,0CAAb,EAAyD;AAAEV,MAAAA,QAAQ,EAARA,QAAF;AAAYC,MAAAA,KAAK,EAALA,KAAZ;AAAmBC,MAAAA,SAAS,EAATA;AAAnB,KAAzD;AACH;;AAED,SAAOA,SAAP;AACH;AAED;;;;;;;;;;;;AAUA,SAASS,iBAAT,CACIC,SADJ,EAEIC,MAFJ;AAII,MAAI,CAACD,SAAL,EAAgB;AACZ,WAAOE,SAAP;AACH;;AAED,MAAI,OAAOF,SAAP,KAAqB,QAAzB,EAAmC;AAC/B,WAAOC,MAAM,CAACD,SAAD,CAAb;AACH;;AAED,SAAO;AACHR,IAAAA,MAAM,EAAEQ,SAAS,CAACR,MAAV,GAAmBS,MAAM,CAACD,SAAS,CAACR,MAAX,CAAzB,GAA8CU,SADnD;AAEHT,IAAAA,MAAM,EAAEO,SAAS,CAACP,MAAV,GAAmBQ,MAAM,CAACD,SAAS,CAACP,MAAX,CAAzB,GAA8CS,SAFnD;AAGHR,IAAAA,OAAO,EAAEM,SAAS,CAACN,OAAV,GAAoBO,MAAM,CAACD,SAAS,CAACN,OAAX,CAA1B,GAAgDQ;AAHtD,GAAP;AAKH;;;;"}

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/spinner/spinner.js

@@ -0,0 +1,26 @@
+import { createElement } from 'react';
+import styles from './spinner.module.css.js';
+
+function Spinner(_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size;
+  return /*#__PURE__*/createElement("svg", {
+    "aria-hidden": true,
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    className: styles.svg
+  }, /*#__PURE__*/createElement("g", {
+    fill: "none",
+    fillRule: "nonzero"
+  }, /*#__PURE__*/createElement("path", {
+    className: styles.tint,
+    d: "M17.945 3.958A9.955 9.955 0 0 0 12 2c-2.19 0-4.217.705-5.865 1.9L5.131 2.16A11.945 11.945 0 0 1 12 0c2.59 0 4.99.82 6.95 2.217l-1.005 1.741z"
+  }), /*#__PURE__*/createElement("path", {
+    className: styles.fill,
+    d: "M5.13 2.16L6.136 3.9A9.987 9.987 0 0 0 2 12c0 5.523 4.477 10 10 10s10-4.477 10-10a9.986 9.986 0 0 0-4.055-8.042l1.006-1.741A11.985 11.985 0 0 1 24 12c0 6.627-5.373 12-12 12S0 18.627 0 12c0-4.073 2.029-7.671 5.13-9.84z"
+  })));
+}
+
+export { Spinner };
+//# sourceMappingURL=spinner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","sources":["../../../src/new-components/spinner/spinner.tsx"],"sourcesContent":["import * as React from 'react'\nimport styles from './spinner.module.css'\n\nfunction Spinner({ size = 24 }: { size?: number }) {\n    return (\n        <svg aria-hidden width={size} height={size} viewBox=\"0 0 24 24\" className={styles.svg}>\n            <g fill=\"none\" fillRule=\"nonzero\">\n                <path\n                    className={styles.tint}\n                    d=\"M17.945 3.958A9.955 9.955 0 0 0 12 2c-2.19 0-4.217.705-5.865 1.9L5.131 2.16A11.945 11.945 0 0 1 12 0c2.59 0 4.99.82 6.95 2.217l-1.005 1.741z\"\n                />\n                <path\n                    className={styles.fill}\n                    d=\"M5.13 2.16L6.136 3.9A9.987 9.987 0 0 0 2 12c0 5.523 4.477 10 10 10s10-4.477 10-10a9.986 9.986 0 0 0-4.055-8.042l1.006-1.741A11.985 11.985 0 0 1 24 12c0 6.627-5.373 12-12 12S0 18.627 0 12c0-4.073 2.029-7.671 5.13-9.84z\"\n                />\n            </g>\n        </svg>\n    )\n}\n\nexport { Spinner }\n"],"names":["Spinner","size","React","width","height","viewBox","className","styles","svg","fill","fillRule","tint","d"],"mappings":";;;AAGA,SAASA,OAAT;uBAAmBC;MAAAA,8BAAO;AACtB,sBACIC,aAAA,MAAA;;AAAiBC,IAAAA,KAAK,EAAEF;AAAMG,IAAAA,MAAM,EAAEH;AAAMI,IAAAA,OAAO,EAAC;AAAYC,IAAAA,SAAS,EAAEC,MAAM,CAACC;GAAlF,eACIN,aAAA,IAAA;AAAGO,IAAAA,IAAI,EAAC;AAAOC,IAAAA,QAAQ,EAAC;GAAxB,eACIR,aAAA,OAAA;AACII,IAAAA,SAAS,EAAEC,MAAM,CAACI;AAClBC,IAAAA,CAAC,EAAC;GAFN,CADJ,eAKIV,aAAA,OAAA;AACII,IAAAA,SAAS,EAAEC,MAAM,CAACE;AAClBG,IAAAA,CAAC,EAAC;GAFN,CALJ,CADJ,CADJ;AAcH;;;;"}

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

@@ -0,0 +1,4 @@
+var modules_c7f5018f = {"svg":"_51539197","spinner":"_54fbe2b3","tint":"a0c466ed","fill":"_745b73d3"};
+
+export default modules_c7f5018f;
+//# sourceMappingURL=spinner.module.css.js.map

package/es/new-components/spinner/spinner.module.css.js.map

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

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

@@ -11,28 +11,28 @@ var Stack = /*#__PURE__*/polymorphicComponent(function Stack(_ref, ref) {
   var as = _ref.as,
       space = _ref.space,
       _ref$align = _ref.align,
-      align = _ref$align === void 0 ? 'left' : _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"]);
 
-  var alignProps = align === 'left' ? undefined : {
+  var alignProps = align === 'start' ? undefined : {
     width: 'full',
     flexDirection: 'column',
     display: 'flex',
     alignItems: mapResponsiveProp(align, function (align) {
-      return align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : 'center';
+      return align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center';
     })
   };
   return /*#__PURE__*/createElement(Box, Object.assign({}, props, alignProps, {
     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\ninterface StackProps extends ReusableBoxProps {\n    /** Space between items */\n    space?: ResponsiveProp<Space>\n    /** Align items horizontally */\n    align?: ResponsiveProp<'left' | 'center' | 'right'>\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 = 'left', dividers = false, children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    const alignProps: BoxProps | undefined =\n        align === 'left'\n            ? undefined\n            : {\n                  width: 'full',\n                  flexDirection: 'column',\n                  display: 'flex',\n                  alignItems: mapResponsiveProp(align, (align) =>\n                      align === 'left' ? 'flexStart' : align === 'right' ? '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":";;;;;;;;;IAuBMA,KAAK,gBAAGC,oBAAoB,CAAoB,SAASD,KAAT,OAElDE,GAFkD;MAChDC,UAAAA;MAAIC,aAAAA;wBAAOC;MAAAA,gCAAQ;2BAAQC;MAAAA,sCAAW;MAAOC,gBAAAA;MAAUC,iCAAAA;MAA8BC;;AAGvF,MAAMC,UAAU,GACZL,KAAK,KAAK,MAAV,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,MAAV,GAAmB,WAAnB,GAAiCA,KAAK,KAAK,OAAV,GAAoB,SAApB,GAAgC,QADhC;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

@@ -3,6 +3,7 @@ import { forwardRef, useState, createElement } from 'react';
 import { Box } from '../box/box.js';
 import { Stack } from '../stack/stack.js';
 import { HiddenVisually } from '../hidden-visually/hidden-visually.js';
+import { Text } from '../text/text.js';
 import { useId } from '../common-helpers.js';
 import { FieldHint } from '../base-field/base-field.js';
 import styles from './switch-field.module.css.js';
@@ -61,8 +62,8 @@ var SwitchField = /*#__PURE__*/forwardRef(function SwitchField(_ref, ref) {
     }
   }))), /*#__PURE__*/createElement("span", {
     className: styles.handle
-  })), /*#__PURE__*/createElement("span", {
-    className: styles.label
+  })), /*#__PURE__*/createElement(Text, {
+    exceptionallySetClassName: styles.label
   }, label)), hint ? /*#__PURE__*/createElement(FieldHint, {
     id: hintId
   }, hint) : null);

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 { 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                <span className={styles.label}>{label}</span>\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","FieldHint"],"mappings":";;;;;;;;;IAaMA,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,OAAA;AAAMuB,IAAAA,SAAS,EAAEC,MAAM,CAACtB;GAAxB,EAAgCA,KAAhC,CArCJ,CADJ,EAwCKC,IAAI,gBAAGH,aAAA,CAACwC,SAAD;AAAWhC,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' | '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;;;;"}

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

@@ -1,4 +1,4 @@
-var modules_8e05f7c9 = {"container":"eed01ee8","disabled":"f1bb9c43","checked":"_93104a64","toggle":"_8fcd019a","label":"_975b23a7","handle":"a4cc2623"};
+var modules_8e05f7c9 = {"container":"_99a80509","disabled":"b5cf26ef","checked":"a63c43a2","toggle":"f318ae83","label":"_427926b9","handle":"_9fcd994c"};
 
 export default modules_8e05f7c9;
 //# sourceMappingURL=switch-field.module.css.js.map

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

@@ -1,6 +1,7 @@
 import { objectSpread2 as _objectSpread2, objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { useEffect, useMemo, createElement, useContext, useState, createContext } from 'react';
 import classNames from 'classnames';
+import { polymorphicComponent } from '../../utils/polymorphism.js';
 import { Inline } from '../inline/inline.js';
 import { useTabState, Tab as Tab$1, TabList as TabList$1, TabPanel as TabPanel$1 } from 'reakit/Tab';
 import { usePrevious } from '../../hooks/use-previous/use-previous.js';
@@ -46,7 +47,6 @@ function Tabs(_ref) {
  * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.
  */
 
-
 function Tab(_ref2) {
   var children = _ref2.children,
       id = _ref2.id;
@@ -69,7 +69,6 @@ function Tab(_ref2) {
  * A component used to group `<Tab>` elements together.
  */
 
-
 function TabList(_ref3) {
   var children = _ref3.children,
       _ref3$space = _ref3.space,
@@ -92,12 +91,14 @@ function TabList(_ref3) {
  * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.
  */
 
-
-function TabPanel(_ref4) {
+var TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref4, ref) {
   var children = _ref4.children,
       id = _ref4.id,
+      as = _ref4.as,
       _ref4$render = _ref4.render,
-      render = _ref4$render === void 0 ? 'always' : _ref4$render;
+      render = _ref4$render === void 0 ? 'always' : _ref4$render,
+      props = _objectWithoutPropertiesLoose(_ref4, ["children", "id", "as", "render"]);
+
   var tabContextValue = useContext(TabsContext);
 
   var _React$useState = useState(false),
@@ -119,14 +120,16 @@ function TabPanel(_ref4) {
 
   return /*#__PURE__*/createElement(TabPanel$1, Object.assign({
     tabId: id
-  }, tabState), render === 'always' ? children : null, render === 'active' && tabIsActive ? children : null, render === 'lazy' && (tabIsActive || tabRendered) ? children : null);
-}
+  }, tabState, props, {
+    as: as,
+    ref: ref
+  }), render === 'always' ? children : null, render === 'active' && tabIsActive ? children : null, render === 'lazy' && (tabIsActive || tabRendered) ? children : null);
+});
 /**
  * Allows content to be rendered based on the current tab being selected while outside of the TabPanel
  * component. Can be placed freely within the main `<Tabs>` component.
  */
 
-
 function TabAwareSlot(_ref5) {
   var children = _ref5.children;
   var tabContextValue = useContext(TabsContext);

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../../src/new-components/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport {\n    useTabState,\n    Tab as BaseTab,\n    TabList as BaseTabList,\n    TabPanel as BaseTabPanel,\n    TabStateReturn,\n} from 'reakit/Tab'\nimport { Inline } from '../inline'\nimport { usePrevious } from '../../hooks/use-previous'\nimport type { ResponsiveProp } from '../responsive-props'\nimport type { Space } from '../common-types'\n\nimport styles from './tabs.module.css'\n\nconst TabsContext = React.createContext<\n    (TabStateReturn & Omit<TabsProps, 'children' | 'selectedId'>) | null\n>(null)\n\ntype TabsProps = {\n    /** The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>` components */\n    children: React.ReactNode\n    /**\n     * Determines the primary colour of the tabs\n     */\n    color?: 'primary' | 'secondary' | 'tertiary'\n    /**\n     * Determines the style of the tabs\n     */\n    variant?: 'normal' | 'plain'\n    /**\n     * The id of the selected tab\n     */\n    selectedId?: string | null\n}\n\n/**\n * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.\n */\nfunction Tabs({\n    children,\n    selectedId,\n    color = 'primary',\n    variant = 'normal',\n}: TabsProps): React.ReactElement {\n    const tabState = useTabState({ selectedId })\n    const previousSelectedId = usePrevious(selectedId)\n    const { selectedId: actualSelectedId, select } = tabState\n\n    React.useEffect(\n        function selectTab() {\n            if (\n                previousSelectedId !== selectedId &&\n                selectedId !== actualSelectedId &&\n                selectedId !== undefined\n            ) {\n                select(selectedId)\n            }\n        },\n        [selectedId, actualSelectedId, select, previousSelectedId],\n    )\n\n    const memoizedTabState = React.useMemo(\n        function memoizeTabState() {\n            return {\n                ...tabState,\n                color,\n                variant,\n            }\n        },\n        // There is no guarantee that useTabState returns a stable object when there are no changes, so\n        // following reakit/Tab's example we only return a new objet when any of its values have changed\n        // eslint-disable-next-line\n        [color, variant, ...Object.values(tabState)],\n    )\n\n    return <TabsContext.Provider value={memoizedTabState}>{children}</TabsContext.Provider>\n}\n\ntype TabProps = {\n    /** The content to render inside of the tab button */\n    children: React.ReactNode\n\n    /** The tab's identifier. This must match its corresponding `<TabPanel>`'s id */\n    id: string\n}\n\n/**\n * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.\n */\nfunction Tab({ children, id }: TabProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { color, variant, ...tabState } = tabContextValue\n\n    return (\n        <BaseTab\n            className={classNames(\n                styles.tab,\n                styles[`tab-${variant ?? ''}`],\n                styles[`tab-${color ?? ''}`],\n            )}\n            id={id}\n            {...tabState}\n        >\n            {children}\n        </BaseTab>\n    )\n}\n\ntype TabListProps = (\n    | {\n          /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */\n          'aria-label': string\n      }\n    | {\n          /**\n           * One or more element IDs used to label the tab list for assistive technologies. Required if\n           * `aria-label` is omitted.\n           */\n          'aria-labelledby': string\n      }\n    | {\n          /**\n           * For cases where multiple instances of the tab list exists, the duplicates may be marked as aria-hidden\n           */\n          'aria-hidden': boolean\n      }\n) & {\n    /**\n     * A list of `<Tab>` elements\n     */\n    children: React.ReactNode\n\n    /**\n     * Controls the spacing between tabs\n     */\n    space?: ResponsiveProp<Space>\n}\n\n/**\n * A component used to group `<Tab>` elements together.\n */\nfunction TabList({\n    children,\n    space = 'medium',\n    ...props\n}: TabListProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { color, variant, ...tabState } = tabContextValue\n\n    return (\n        <BaseTabList {...props} {...tabState}>\n            <Inline space={space}>{children}</Inline>\n        </BaseTabList>\n    )\n}\n\ntype TabPanelProps = {\n    /** The content to be rendered inside the tab */\n    children: React.ReactNode\n\n    /** The tabPanel's identifier. This must match its corresponding `<Tab>`'s id */\n    id: string\n\n    /**\n     * By default, the tab panel's content is always rendered even when they are not active. This behaviour can be changed to\n     * 'active', which renders only when the tab is active, and 'lazy', meaning while inactive tab panels will not be rendered\n     * initially, they will remain mounted once they are active until the entire Tabs tree is unmounted.\n     */\n    render?: 'always' | 'active' | 'lazy'\n}\n\n/**\n * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.\n */\nfunction TabPanel({ children, id, render = 'always' }: TabPanelProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    const [tabRendered, setTabRendered] = React.useState(false)\n    const tabIsActive = tabContextValue?.selectedId === id\n\n    React.useEffect(\n        function trackTabRenderedState() {\n            if (!tabRendered && tabIsActive) {\n                setTabRendered(true)\n            }\n        },\n        [tabRendered, tabIsActive],\n    )\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { color, variant, ...tabState } = tabContextValue\n\n    return (\n        <BaseTabPanel tabId={id} {...tabState}>\n            {render === 'always' ? children : null}\n            {render === 'active' && tabIsActive ? children : null}\n            {render === 'lazy' && (tabIsActive || tabRendered) ? children : null}\n        </BaseTabPanel>\n    )\n}\n\ntype TabAwareSlotProps = {\n    /**\n     * Render prop used to provide the content to be rendered inside the slot. The render prop will be\n     * called with the current `selectedId`\n     */\n    children: (provided: { selectedId?: string | null }) => React.ReactElement | null\n}\n\n/**\n * Allows content to be rendered based on the current tab being selected while outside of the TabPanel\n * component. Can be placed freely within the main `<Tabs>` component.\n */\nfunction TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    return tabContextValue ? children({ selectedId: tabContextValue.selectedId }) : null\n}\n\nexport { Tabs, TabList, Tab, TabPanel, TabAwareSlot }\n"],"names":["TabsContext","React","Tabs","children","selectedId","color","variant","tabState","useTabState","previousSelectedId","usePrevious","actualSelectedId","select","selectTab","undefined","memoizedTabState","memoizeTabState","Object","values","Provider","value","Tab","id","tabContextValue","BaseTab","className","classNames","styles","tab","TabList","space","props","BaseTabList","Inline","TabPanel","render","tabRendered","setTabRendered","tabIsActive","trackTabRenderedState","BaseTabPanel","tabId","TabAwareSlot"],"mappings":";;;;;;;;AAgBA,IAAMA,WAAW,gBAAGC,aAAA,CAElB,IAFkB,CAApB;AAqBA;;;;AAGA,SAASC,IAAT;MACIC,gBAAAA;MACAC,kBAAAA;wBACAC;MAAAA,gCAAQ;0BACRC;MAAAA,oCAAU;AAEV,MAAMC,QAAQ,GAAGC,WAAW,CAAC;AAAEJ,IAAAA,UAAU,EAAVA;AAAF,GAAD,CAA5B;AACA,MAAMK,kBAAkB,GAAGC,WAAW,CAACN,UAAD,CAAtC;MACoBO,mBAA6BJ,SAAzCH;MAA8BQ,SAAWL,SAAXK;AAEtCX,EAAAA,SAAA,CACI,SAASY,SAAT;AACI,QACIJ,kBAAkB,KAAKL,UAAvB,IACAA,UAAU,KAAKO,gBADf,IAEAP,UAAU,KAAKU,SAHnB,EAIE;AACEF,MAAAA,MAAM,CAACR,UAAD,CAAN;AACH;AACJ,GATL,EAUI,CAACA,UAAD,EAAaO,gBAAb,EAA+BC,MAA/B,EAAuCH,kBAAvC,CAVJ;AAaA,MAAMM,gBAAgB,GAAGd,OAAA,CACrB,SAASe,eAAT;AACI,6CACOT,QADP;AAEIF,MAAAA,KAAK,EAALA,KAFJ;AAGIC,MAAAA,OAAO,EAAPA;AAHJ;AAKH,GAPoB;AASrB;AACA;AAVqB,GAWpBD,KAXoB,EAWbC,OAXa,SAWDW,MAAM,CAACC,MAAP,CAAcX,QAAd,CAXC,EAAzB;AAcA,sBAAON,aAAA,CAACD,WAAW,CAACmB,QAAb;AAAsBC,IAAAA,KAAK,EAAEL;GAA7B,EAAgDZ,QAAhD,CAAP;AACH;AAUD;;;;;AAGA,SAASkB,GAAT;MAAelB,iBAAAA;MAAUmB,WAAAA;AACrB,MAAMC,eAAe,GAAGtB,UAAA,CAAiBD,WAAjB,CAAxB;;AAEA,MAAI,CAACuB,eAAL,EAAsB;AAClB,WAAO,IAAP;AACH;;MAEOlB,QAAgCkB,gBAAhClB;MAAOC,UAAyBiB,gBAAzBjB;MAAYC,yCAAagB;;AAExC,sBACItB,aAAA,CAACuB,KAAD;AACIC,IAAAA,SAAS,EAAEC,UAAU,CACjBC,MAAM,CAACC,GADU,EAEjBD,MAAM,WAAQrB,OAAR,aAAQA,OAAR,cAAQA,OAAR,GAAmB,EAAnB,EAFW,EAGjBqB,MAAM,WAAQtB,KAAR,aAAQA,KAAR,cAAQA,KAAR,GAAiB,EAAjB,EAHW;AAKrBiB,IAAAA,EAAE,EAAEA;KACAf,SAPR,EASKJ,QATL,CADJ;AAaH;AAgCD;;;;;AAGA,SAAS0B,OAAT;MACI1B,iBAAAA;0BACA2B;MAAAA,iCAAQ;MACLC;;AAEH,MAAMR,eAAe,GAAGtB,UAAA,CAAiBD,WAAjB,CAAxB;;AAEA,MAAI,CAACuB,eAAL,EAAsB;AAClB,WAAO,IAAP;AACH;;MAE0BhB,yCAAagB;;AAExC,sBACItB,aAAA,CAAC+B,SAAD,oBAAiBD,OAAWxB,SAA5B,eACIN,aAAA,CAACgC,MAAD;AAAQH,IAAAA,KAAK,EAAEA;GAAf,EAAuB3B,QAAvB,CADJ,CADJ;AAKH;AAiBD;;;;;AAGA,SAAS+B,QAAT;MAAoB/B,iBAAAA;MAAUmB,WAAAA;2BAAIa;MAAAA,mCAAS;AACvC,MAAMZ,eAAe,GAAGtB,UAAA,CAAiBD,WAAjB,CAAxB;;wBACsCC,QAAA,CAAe,KAAf;MAA/BmC;MAAaC;;AACpB,MAAMC,WAAW,GAAG,CAAAf,eAAe,SAAf,IAAAA,eAAe,WAAf,YAAAA,eAAe,CAAEnB,UAAjB,MAAgCkB,EAApD;AAEArB,EAAAA,SAAA,CACI,SAASsC,qBAAT;AACI,QAAI,CAACH,WAAD,IAAgBE,WAApB,EAAiC;AAC7BD,MAAAA,cAAc,CAAC,IAAD,CAAd;AACH;AACJ,GALL,EAMI,CAACD,WAAD,EAAcE,WAAd,CANJ;;AASA,MAAI,CAACf,eAAL,EAAsB;AAClB,WAAO,IAAP;AACH;;MAE0BhB,yCAAagB;;AAExC,sBACItB,aAAA,CAACuC,UAAD;AAAcC,IAAAA,KAAK,EAAEnB;KAAQf,SAA7B,EACK4B,MAAM,KAAK,QAAX,GAAsBhC,QAAtB,GAAiC,IADtC,EAEKgC,MAAM,KAAK,QAAX,IAAuBG,WAAvB,GAAqCnC,QAArC,GAAgD,IAFrD,EAGKgC,MAAM,KAAK,MAAX,KAAsBG,WAAW,IAAIF,WAArC,IAAoDjC,QAApD,GAA+D,IAHpE,CADJ;AAOH;AAUD;;;;;;AAIA,SAASuC,YAAT;MAAwBvC,iBAAAA;AACpB,MAAMoB,eAAe,GAAGtB,UAAA,CAAiBD,WAAjB,CAAxB;AAEA,SAAOuB,eAAe,GAAGpB,QAAQ,CAAC;AAAEC,IAAAA,UAAU,EAAEmB,eAAe,CAACnB;AAA9B,GAAD,CAAX,GAA0D,IAAhF;AACH;;;;"}
+{"version":3,"file":"tabs.js","sources":["../../../src/new-components/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport {\n    useTabState,\n    Tab as BaseTab,\n    TabList as BaseTabList,\n    TabPanel as BaseTabPanel,\n    TabStateReturn,\n} from 'reakit/Tab'\nimport { Inline } from '../inline'\nimport { usePrevious } from '../../hooks/use-previous'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport type { ResponsiveProp } from '../responsive-props'\nimport type { Space } from '../common-types'\n\nimport styles from './tabs.module.css'\n\nconst TabsContext = React.createContext<\n    (TabStateReturn & Omit<TabsProps, 'children' | 'selectedId'>) | null\n>(null)\n\ntype TabsProps = {\n    /** The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>` components */\n    children: React.ReactNode\n    /**\n     * Determines the primary colour of the tabs\n     */\n    color?: 'primary' | 'secondary' | 'tertiary'\n    /**\n     * Determines the style of the tabs\n     */\n    variant?: 'normal' | 'plain'\n    /**\n     * The id of the selected tab\n     */\n    selectedId?: string | null\n}\n\n/**\n * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.\n */\nexport function Tabs({\n    children,\n    selectedId,\n    color = 'primary',\n    variant = 'normal',\n}: TabsProps): React.ReactElement {\n    const tabState = useTabState({ selectedId })\n    const previousSelectedId = usePrevious(selectedId)\n    const { selectedId: actualSelectedId, select } = tabState\n\n    React.useEffect(\n        function selectTab() {\n            if (\n                previousSelectedId !== selectedId &&\n                selectedId !== actualSelectedId &&\n                selectedId !== undefined\n            ) {\n                select(selectedId)\n            }\n        },\n        [selectedId, actualSelectedId, select, previousSelectedId],\n    )\n\n    const memoizedTabState = React.useMemo(\n        function memoizeTabState() {\n            return {\n                ...tabState,\n                color,\n                variant,\n            }\n        },\n        // There is no guarantee that useTabState returns a stable object when there are no changes, so\n        // following reakit/Tab's example we only return a new objet when any of its values have changed\n        // eslint-disable-next-line\n        [color, variant, ...Object.values(tabState)],\n    )\n\n    return <TabsContext.Provider value={memoizedTabState}>{children}</TabsContext.Provider>\n}\n\ntype TabProps = {\n    /** The content to render inside of the tab button */\n    children: React.ReactNode\n\n    /** The tab's identifier. This must match its corresponding `<TabPanel>`'s id */\n    id: string\n}\n\n/**\n * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.\n */\nexport function Tab({ children, id }: TabProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { color, variant, ...tabState } = tabContextValue\n\n    return (\n        <BaseTab\n            className={classNames(\n                styles.tab,\n                styles[`tab-${variant ?? ''}`],\n                styles[`tab-${color ?? ''}`],\n            )}\n            id={id}\n            {...tabState}\n        >\n            {children}\n        </BaseTab>\n    )\n}\n\ntype TabListProps = (\n    | {\n          /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */\n          'aria-label': string\n      }\n    | {\n          /**\n           * One or more element IDs used to label the tab list for assistive technologies. Required if\n           * `aria-label` is omitted.\n           */\n          'aria-labelledby': string\n      }\n    | {\n          /**\n           * For cases where multiple instances of the tab list exists, the duplicates may be marked as aria-hidden\n           */\n          'aria-hidden': boolean\n      }\n) & {\n    /**\n     * A list of `<Tab>` elements\n     */\n    children: React.ReactNode\n\n    /**\n     * Controls the spacing between tabs\n     */\n    space?: ResponsiveProp<Space>\n}\n\n/**\n * A component used to group `<Tab>` elements together.\n */\nexport function TabList({\n    children,\n    space = 'medium',\n    ...props\n}: TabListProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { color, variant, ...tabState } = tabContextValue\n\n    return (\n        <BaseTabList {...props} {...tabState}>\n            <Inline space={space}>{children}</Inline>\n        </BaseTabList>\n    )\n}\n\ntype TabPanelProps = {\n    /** The content to be rendered inside the tab */\n    children: React.ReactNode\n\n    /** The tabPanel's identifier. This must match its corresponding `<Tab>`'s id */\n    id: string\n\n    /**\n     * By default, the tab panel's content is always rendered even when they are not active. This behaviour can be changed to\n     * 'active', which renders only when the tab is active, and 'lazy', meaning while inactive tab panels will not be rendered\n     * initially, they will remain mounted once they are active until the entire Tabs tree is unmounted.\n     */\n    render?: 'always' | 'active' | 'lazy'\n}\n\n/**\n * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.\n */\nexport const TabPanel = polymorphicComponent<'div', TabPanelProps, 'omitClassName'>(\n    function TabPanel(\n        { children, id, as, render = 'always', ...props },\n        ref,\n    ): React.ReactElement | null {\n        const tabContextValue = React.useContext(TabsContext)\n        const [tabRendered, setTabRendered] = React.useState(false)\n        const tabIsActive = tabContextValue?.selectedId === id\n\n        React.useEffect(\n            function trackTabRenderedState() {\n                if (!tabRendered && tabIsActive) {\n                    setTabRendered(true)\n                }\n            },\n            [tabRendered, tabIsActive],\n        )\n\n        if (!tabContextValue) {\n            return null\n        }\n\n        const { color, variant, ...tabState } = tabContextValue\n\n        return (\n            <BaseTabPanel tabId={id} {...tabState} {...props} as={as} ref={ref}>\n                {render === 'always' ? children : null}\n                {render === 'active' && tabIsActive ? children : null}\n                {render === 'lazy' && (tabIsActive || tabRendered) ? children : null}\n            </BaseTabPanel>\n        )\n    },\n)\n\ntype TabAwareSlotProps = {\n    /**\n     * Render prop used to provide the content to be rendered inside the slot. The render prop will be\n     * called with the current `selectedId`\n     */\n    children: (provided: { selectedId?: string | null }) => React.ReactElement | null\n}\n\n/**\n * Allows content to be rendered based on the current tab being selected while outside of the TabPanel\n * component. Can be placed freely within the main `<Tabs>` component.\n */\nexport function TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    return tabContextValue ? children({ selectedId: tabContextValue.selectedId }) : null\n}\n"],"names":["TabsContext","React","Tabs","children","selectedId","color","variant","tabState","useTabState","previousSelectedId","usePrevious","actualSelectedId","select","selectTab","undefined","memoizedTabState","memoizeTabState","Object","values","Provider","value","Tab","id","tabContextValue","BaseTab","className","classNames","styles","tab","TabList","space","props","BaseTabList","Inline","TabPanel","polymorphicComponent","ref","as","render","tabRendered","setTabRendered","tabIsActive","trackTabRenderedState","BaseTabPanel","tabId","TabAwareSlot"],"mappings":"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"}