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

package/lib/new-components/modal/modal.d.ts

@@ -0,0 +1,151 @@
+import * as React from 'react';
+import { ButtonProps } from '../button';
+declare type ModalWidth = 'small' | 'medium' | 'large';
+declare type ModalHeightMode = 'expand' | 'fitContent';
+declare type DivProps = Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'className' | 'children'>;
+export declare type ModalProps = DivProps & {
+    /**
+     * The content of the modal.
+     */
+    children: React.ReactNode;
+    /**
+     * Whether the modal is open and visible or not.
+     */
+    isOpen: boolean;
+    /**
+     * Called when the user triggers closing the modal.
+     */
+    onDismiss?(): void;
+    /**
+     * A descriptive setting for how wide the modal should aim to be, depending on how much space
+     * it has on screen.
+     * @default 'medium'
+     */
+    width?: ModalWidth;
+    /**
+     * A descriptive setting for how tall the modal should aim to be.
+     *
+     * - 'expand': the modal aims to fill most of the available screen height, leaving only a small
+     *   padding above and below.
+     * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.
+     *
+     * In either case, if content does not fit, the content of the main body is set to scroll
+     * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the
+     * viewport boundaries.
+     *
+     * If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of
+     * the inner layout to ensure scroll, or whatever other strategy you may want.
+     */
+    height?: ModalHeightMode;
+    /**
+     * Whether to set or not the focus initially to the first focusable element inside the modal.
+     */
+    autoFocus?: boolean;
+    /**
+     * A escape hatch in case you need to provide a custom class name to the container element.
+     */
+    exceptionallySetClassName?: string;
+};
+/**
+ * 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
+ */
+export declare function Modal({ isOpen, onDismiss, height, width, exceptionallySetClassName, autoFocus, children, ...props }: ModalProps): JSX.Element;
+export declare type ModalCloseButtonProps = Omit<ButtonProps, 'type' | 'children' | 'variant' | 'icon' | 'startIcon' | 'endIcon' | 'disabled' | 'loading'> & {
+    /**
+     * The descriptive label of the button.
+     */
+    'aria-label': string;
+};
+/**
+ * The close button rendered by ModalHeader. Provided independently so that consumers can customize
+ * the button's label.
+ *
+ * @see ModalHeader
+ */
+export declare function ModalCloseButton(props: ModalCloseButtonProps): JSX.Element;
+export declare type ModalHeaderProps = DivProps & {
+    /**
+     * The content of the header.
+     */
+    children: React.ReactNode;
+    /**
+     * Allows to provide a custom button element, or to omit the close button if set to false.
+     * @see ModalCloseButton
+     */
+    button?: React.ReactNode | boolean;
+    /**
+     * Whether to render a divider line below the header.
+     * @default false
+     */
+    withDivider?: boolean;
+    /**
+     * A escape hatch in case you need to provide a custom class name to the container element.
+     */
+    exceptionallySetClassName?: string;
+};
+/**
+ * Renders a standard modal header area with an optional close button.
+ *
+ * @see Modal
+ * @see ModalFooter
+ * @see ModalBody
+ */
+export declare function ModalHeader({ children, button, withDivider, exceptionallySetClassName, ...props }: ModalHeaderProps): JSX.Element;
+export declare type ModalBodyProps = DivProps & {
+    /**
+     * The content of the modal body.
+     */
+    children: React.ReactNode;
+    /**
+     * A escape hatch in case you need to provide a custom class name to the container element.
+     */
+    exceptionallySetClassName?: string;
+};
+/**
+ * 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
+ */
+export declare function ModalBody({ exceptionallySetClassName, children, ...props }: ModalBodyProps): JSX.Element;
+export declare type ModalFooterProps = DivProps & {
+    /**
+     * The contant of the modal footer.
+     */
+    children: React.ReactNode;
+    /**
+     * Whether to render a divider line below the footer.
+     * @default false
+     */
+    withDivider?: boolean;
+    /**
+     * A escape hatch in case you need to provide a custom class name to the container element.
+     */
+    exceptionallySetClassName?: string;
+};
+/**
+ * Renders a standard modal footer area.
+ *
+ * @see Modal
+ * @see ModalHeader
+ * @see ModalBody
+ */
+export declare function ModalFooter({ exceptionallySetClassName, withDivider, ...props }: ModalFooterProps): JSX.Element;
+/**
+ * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).
+ * @see ModalFooter
+ */
+export declare function ModalActions({ children, ...props }: ModalFooterProps): JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../_virtual/_rollupPluginBabelHelpers.js"),o=require("react"),n=(e(o),e(require("classnames"))),a=require("../box/box.js"),l=require("../columns/columns.js"),i=require("../divider/divider.js"),r=require("../inline/inline.js"),s=require("../icons/close-icon.js"),c=require("../button/button.js"),u=require("@reach/dialog"),d=e(require("react-focus-lock")),m=require("./modal.module.css.js"),p=o.createContext({onDismiss:void 0,height:"fitContent"});function h(e){return!(e.ownerDocument===document&&"iframe"===e.tagName.toLowerCase())}function g(e){var t=o.useContext(p);return o.createElement(c.Button,Object.assign({},e,{variant:"quaternary",onClick:t.onDismiss,icon:o.createElement(s.CloseIcon,null)}))}function f(e){var n=e.exceptionallySetClassName,l=e.withDivider,r=void 0!==l&&l,s=t.objectWithoutPropertiesLoose(e,["exceptionallySetClassName","withDivider"]);return o.createElement(o.Fragment,null,r?o.createElement(i.Divider,null):null,o.createElement(a.Box,Object.assign({as:"footer"},s,{className:n,padding:"large"})))}exports.Modal=function(e){var l=e.isOpen,i=e.onDismiss,r=e.height,s=void 0===r?"fitContent":r,c=e.width,g=void 0===c?"medium":c,f=e.exceptionallySetClassName,x=e.autoFocus,v=void 0===x||x,b=e.children,C=t.objectWithoutPropertiesLoose(e,["isOpen","onDismiss","height","width","exceptionallySetClassName","autoFocus","children"]),j=o.useMemo((function(){return{onDismiss:i,height:s}}),[i,s]);return o.createElement(u.DialogOverlay,{isOpen:l,onDismiss:i,dangerouslyBypassFocusLock:!0,className:n(m.default.overlay,m.default[s],m.default[g]),"data-testid":"modal-overlay"},o.createElement(d,{autoFocus:v,whiteList:h},o.createElement(u.DialogContent,Object.assign({},C,{as:a.Box,borderRadius:"full",background:"default",display:"flex",flexDirection:"column",overflow:"hidden",height:"expand"===s?"full":void 0,flexGrow:"expand"===s?1:0,className:[f,m.default.container]}),o.createElement(p.Provider,{value:j},b))))},exports.ModalActions=function(e){var n=e.children,a=t.objectWithoutPropertiesLoose(e,["children"]);return o.createElement(f,Object.assign({},a),o.createElement(r.Inline,{align:"right",space:"large"},o.Children.map(n,(function(e){return o.createElement("div",null,e)}))))},exports.ModalBody=function(e){var n=e.exceptionallySetClassName,l=e.children,i=t.objectWithoutPropertiesLoose(e,["exceptionallySetClassName","children"]),r=o.useContext(p).height;return o.createElement(a.Box,Object.assign({},i,{className:n,flexGrow:"expand"===r?1:0,height:"expand"===r?"full":void 0,overflow:"auto"}),o.createElement(a.Box,{padding:"large",paddingBottom:"xxlarge"},l))},exports.ModalCloseButton=g,exports.ModalFooter=f,exports.ModalHeader=function(e){var n=e.children,r=e.button,s=void 0===r||r,c=e.withDivider,u=void 0!==c&&c,d=e.exceptionallySetClassName,p=t.objectWithoutPropertiesLoose(e,["children","button","withDivider","exceptionallySetClassName"]);return o.createElement(o.Fragment,null,o.createElement(a.Box,Object.assign({},p,{as:"header",paddingLeft:"large",paddingRight:"small",paddingY:"small",className:d}),o.createElement(l.Columns,{space:"large",alignY:"center"},o.createElement(l.Column,{width:"auto"},n),o.createElement(l.Column,{width:"content",exceptionallySetClassName:m.default.buttonContainer},"boolean"!=typeof s?s:!0===s?o.createElement(g,{"aria-label":"Close modal"}):null))),u?o.createElement(i.Divider,null):null)};
+//# sourceMappingURL=modal.js.map

package/lib/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","ModalCloseButton","props","Button","variant","onClick","icon","CloseIcon","ModalFooter","exceptionallySetClassName","withDivider","Divider","Box","as","className","padding","isOpen","width","autoFocus","children","contextValue","DialogOverlay","dangerouslyBypassFocusLock","classNames","styles","overlay","FocusLock","whiteList","DialogContent","borderRadius","background","display","flexDirection","overflow","flexGrow","container","Provider","value","Inline","align","space","map","child","paddingBottom","button","paddingLeft","paddingRight","paddingY","Columns","alignY","Column","buttonContainer"],"mappings":"kiBA0BMA,EAAeC,gBAAuC,CACxDC,eAAWC,EACXC,OAAQ,eAwDZ,SAASC,EAAmBC,WACfA,EAAQC,gBAAkBC,UAA8C,WAAlCF,EAAQG,QAAQC,wBA2EnDC,EAAiBC,SACPX,aAAiBD,UAChCC,gBAACY,0BAAWD,GAAOE,QAAQ,aAAaC,UADvCb,UAC2Dc,KAAMf,gBAACgB,8BA2I9DC,SACZC,IAAAA,8BACAC,YAAAA,gBACGR,uFAGCX,gCACKmB,EAAcnB,gBAACoB,gBAAa,KAC7BpB,gBAACqB,qBAAIC,GAAG,UAAaX,GAAOY,UAAWL,EAA2BM,QAAQ,0CAnNlFC,IAAAA,OACAxB,IAAAA,cACAE,OAAAA,aAAS,mBACTuB,MAAAA,aAAQ,WACRR,IAAAA,8BACAS,UAAAA,gBACAC,IAAAA,SACGjB,+HAEGkB,EAAkC7B,WAAc,iBAAO,CAAEC,UAAAA,EAAWE,OAAAA,KAAW,CACjFF,EACAE,WAIAH,gBAAC8B,iBACGL,OAAQA,EACRxB,UAAWA,EACX8B,8BACAR,UAAWS,EAAWC,UAAOC,QAASD,UAAO9B,GAAS8B,UAAOP,kBACjD,iBAEZ1B,gBAACmC,GAAUR,UAAWA,EAAWS,UAAWhC,GACxCJ,gBAACqC,iCACO1B,GACJW,GAAID,MACJiB,aAAa,OACbC,WAAW,UACXC,QAAQ,OACRC,cAAc,SACdC,SAAS,SACTvC,OAAmB,WAAXA,EAAsB,YAASD,EACvCyC,SAAqB,WAAXxC,EAAsB,EAAI,EACpCoB,UAAW,CAACL,EAA2Be,UAAOW,aAE9C5C,gBAACD,EAAa8C,UAASC,MAAOjB,GAAeD,4CA6LlCA,IAAAA,SAAajB,wDAEpCX,gBAACiB,mBAAgBN,GACbX,gBAAC+C,UAAOC,MAAM,QAAQC,MAAM,SACvBjD,WAAekD,IAAItB,GAAU,SAACuB,UAC3BnD,2BAAMmD,2CAtEEjC,IAAAA,0BAA2BU,IAAAA,SAAajB,6EACxDR,EAAWH,aAAiBD,GAA5BI,cAEJH,gBAACqB,uBACOV,GACJY,UAAWL,EACXyB,SAAqB,WAAXxC,EAAsB,EAAI,EACpCA,OAAmB,WAAXA,EAAsB,YAASD,EACvCwC,SAAS,SAET1C,gBAACqB,OAAIG,QAAQ,QAAQ4B,cAAc,WAC9BxB,0FAtEbA,IAAAA,aACAyB,OAAAA,oBACAlC,YAAAA,gBACAD,IAAAA,0BACGP,2GAGCX,gCACIA,gBAACqB,uBACOV,GACJW,GAAG,SACHgC,YAAY,QACZC,aAAa,QACbC,SAAS,QACTjC,UAAWL,IAEXlB,gBAACyD,WAAQR,MAAM,QAAQS,OAAO,UAC1B1D,gBAAC2D,UAAOjC,MAAM,QAAQE,GACtB5B,gBAAC2D,UAAOjC,MAAM,UAAUR,0BAA2Be,UAAO2B,iBACnC,kBAAXP,EACJA,GACW,IAAXA,EACArD,gBAACU,gBAA4B,gBAC7B,QAIfS,EAAcnB,gBAACoB,gBAAa"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={"reach-portal":"_72b0d072",fadein:"_3ef30abf",fitContent:"_99107d2f",container:"badff007",medium:"_3b39110c",small:"fc325d7b",large:"_5751d6d0",overlay:"_0091d9c5",expand:"_52207af6",buttonContainer:"b97b958d"};
+//# sourceMappingURL=modal.module.css.js.map

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

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

package/lib/new-components/modal/modal.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),i=require("../box/box.js"),t=require("reakit-utils"),a=require("../../components/tooltip/tooltip.js"),s=require("../common-helpers.js"),l=require("../base-field/base-field.js"),o=require("../icons/password-visible-icon.js"),d=require("../icons/password-hidden-icon.js"),n=require("./password-field.module.css.js"),u=require("../text-field/text-field.module.css.js");exports.PasswordField=r.forwardRef((function(c,b){var p=c.label,f=c.secondaryLabel,m=c.auxiliaryLabel,x=c.hint,y=c.maxWidth,h=c.togglePasswordLabel,j=void 0===h?"Toggle password visibility":h,q=c.hidden,w=c["aria-describedby"],g=e.objectWithoutPropertiesLoose(c,["label","secondaryLabel","auxiliaryLabel","hint","maxWidth","togglePasswordLabel","hidden","aria-describedby"]),v=s.useId(g.id),L=r.useRef(null),P=t.useForkRef(L,b),E=r.useState(!1),W=E[0],I=E[1];function _(){var e;I((function(e){return!e})),null===(e=L.current)||void 0===e||e.focus()}return r.createElement(l.BaseField,{id:v,label:p,secondaryLabel:f,auxiliaryLabel:m,hint:x,maxWidth:y,hidden:q,"aria-describedby":w},(function(e){return r.createElement(i.Box,{display:"flex",alignItems:"center",className:[n.default.inputWrapper,u.default.inputWrapper]},r.createElement("input",Object.assign({},g,e,{ref:P,type:W?"text":"password"})),r.createElement(a.Tooltip,{content:j},r.createElement("button",{type:"button",onClick:_,"aria-label":j,tabIndex:-1},r.createElement(W?o.PasswordVisibleIcon:d.PasswordHiddenIcon,{"aria-hidden":!0}))))}))}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),i=require("../box/box.js"),t=require("../../components/tooltip/tooltip.js"),a=require("reakit-utils"),s=require("../common-helpers.js"),l=require("../base-field/base-field.js"),o=require("../icons/password-visible-icon.js"),d=require("../icons/password-hidden-icon.js"),n=require("./password-field.module.css.js"),u=require("../text-field/text-field.module.css.js");exports.PasswordField=r.forwardRef((function(c,b){var p=c.label,f=c.secondaryLabel,m=c.auxiliaryLabel,x=c.hint,y=c.maxWidth,h=c.togglePasswordLabel,j=void 0===h?"Toggle password visibility":h,q=c.hidden,w=c["aria-describedby"],g=e.objectWithoutPropertiesLoose(c,["label","secondaryLabel","auxiliaryLabel","hint","maxWidth","togglePasswordLabel","hidden","aria-describedby"]),v=s.useId(g.id),L=r.useRef(null),P=a.useForkRef(L,b),E=r.useState(!1),W=E[0],I=E[1];function _(){var e;I((function(e){return!e})),null===(e=L.current)||void 0===e||e.focus()}return r.createElement(l.BaseField,{id:v,label:p,secondaryLabel:f,auxiliaryLabel:m,hint:x,maxWidth:y,hidden:q,"aria-describedby":w},(function(e){return r.createElement(i.Box,{display:"flex",alignItems:"center",className:[n.default.inputWrapper,u.default.inputWrapper]},r.createElement("input",Object.assign({},g,e,{ref:P,type:W?"text":"password"})),r.createElement(t.Tooltip,{content:j},r.createElement("button",{type:"button",onClick:_,"aria-label":j,tabIndex:-1},r.createElement(W?o.PasswordVisibleIcon:d.PasswordHiddenIcon,{"aria-hidden":!0}))))}))}));
 //# sourceMappingURL=password-field.js.map

package/lib/new-components/responsive-props.d.ts

@@ -8,7 +8,7 @@ declare type Atom = string | number | boolean;
  *
  * - `align={{ mobile: 'left', tablet: 'center', desktop: 'right' }}`
  */
-declare type ResponsiveProp<AtomType extends Atom> = AtomType | Readonly<[AtomType, AtomType]> | Readonly<[AtomType, AtomType, AtomType]> | Readonly<{
+declare type ResponsiveProp<AtomType extends Atom> = AtomType | Readonly<{
     [key in ResponsiveBreakpoints]?: AtomType;
 }>;
 /**

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

@@ -1,2 +1,2 @@
-"use strict";function e(e){return Array.isArray(e)}Object.defineProperty(exports,"__esModule",{value:!0}),exports.getClassNames=function(t,o,s){if(!s)return null;var p=[];return e(s)&&(s={mobile:s[0],tablet:s[1],desktop:s[2]}),"string"==typeof s?p.push(t[o+"-"+s]):(s.mobile&&p.push(t[o+"-"+s.mobile]),s.tablet&&p.push(t["tablet-"+o+"-"+s.tablet]),s.desktop&&p.push(t["desktop-"+o+"-"+s.desktop])),p},exports.mapResponsiveProp=function(t,o){if(t)return"object"!=typeof t?o(t):(e(t)&&(t={mobile:t[0],tablet:t[1],desktop:t[2]}),{mobile:t.mobile?o(t.mobile):void 0,tablet:t.tablet?o(t.tablet):void 0,desktop:t.desktop?o(t.desktop):void 0})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.getClassNames=function(e,t,o){if(!o)return null;var s=[];return"string"==typeof o?s.push(e[t+"-"+o]):(o.mobile&&s.push(e[t+"-"+o.mobile]),o.tablet&&s.push(e["tablet-"+t+"-"+o.tablet]),o.desktop&&s.push(e["desktop-"+t+"-"+o.desktop])),s},exports.mapResponsiveProp=function(e,t){if(e)return"object"!=typeof e?t(e):{mobile:e.mobile?t(e.mobile):void 0,tablet:e.tablet?t(e.tablet):void 0,desktop:e.desktop?t(e.desktop):void 0}};
 //# sourceMappingURL=responsive-props.js.map

package/lib/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":["isResponsivePropArray","responsiveProp","Array","isArray","styles","property","value","classList","mobile","tablet","desktop","push","fromValue","mapper","undefined"],"mappings":"aAoBA,SAASA,EACLC,UAEOC,MAAMC,QAAQF,gFAoBzB,SACIG,EACAC,EACAC,OAEKA,SACM,SAGLC,EAAsB,UAExBP,EAAsBM,KACtBA,EAAQ,CACJE,OAAQF,EAAM,GACdG,OAAQH,EAAM,GACdI,QAASJ,EAAM,KAIF,iBAAVA,EACPC,EAAUI,KAAKP,EAAUC,MAAYC,KAEjCA,EAAME,QAAQD,EAAUI,KAAKP,EAAUC,MAAYC,EAAME,SACzDF,EAAMG,QAAQF,EAAUI,KAAKP,YAAiBC,MAAYC,EAAMG,SAChEH,EAAMI,SAASH,EAAUI,KAAKP,aAAkBC,MAAYC,EAAMI,WAQnEH,6BAaX,SACIK,EACAC,MAEKD,QAIoB,iBAAdA,EACAC,EAAOD,IAGdZ,EAAsBY,KACtBA,EAAY,CACRJ,OAAQI,EAAU,GAClBH,OAAQG,EAAU,GAClBF,QAASE,EAAU,KAIpB,CACHJ,OAAQI,EAAUJ,OAASK,EAAOD,EAAUJ,aAAUM,EACtDL,OAAQG,EAAUH,OAASI,EAAOD,EAAUH,aAAUK,EACtDJ,QAASE,EAAUF,QAAUG,EAAOD,EAAUF,cAAWI"}
+{"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":["styles","property","value","classList","push","mobile","tablet","desktop","fromValue","mapper","undefined"],"mappings":"0FAmCA,SACIA,EACAC,EACAC,OAEKA,SACM,SAGLC,EAAsB,SAEP,iBAAVD,EACPC,EAAUC,KAAKJ,EAAUC,MAAYC,KAEjCA,EAAMG,QAAQF,EAAUC,KAAKJ,EAAUC,MAAYC,EAAMG,SACzDH,EAAMI,QAAQH,EAAUC,KAAKJ,YAAiBC,MAAYC,EAAMI,SAChEJ,EAAMK,SAASJ,EAAUC,KAAKJ,aAAkBC,MAAYC,EAAMK,WAQnEJ,6BAaX,SACIK,EACAC,MAEKD,QAIoB,iBAAdA,EACAC,EAAOD,GAGX,CACHH,OAAQG,EAAUH,OAASI,EAAOD,EAAUH,aAAUK,EACtDJ,OAAQE,EAAUF,OAASG,EAAOD,EAAUF,aAAUI,EACtDH,QAASC,EAAUD,QAAUE,EAAOD,EAAUD,cAAWG"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={selectWrapper:"d259b5cb"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={selectWrapper:"_828e09c5"};
 //# sourceMappingURL=select-field.module.css.js.map

package/lib/new-components/spinner/index.d.ts

@@ -0,0 +1 @@
+export * from './spinner';

package/lib/new-components/spinner/spinner.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare function Spinner({ size }: {
+    size?: number;
+}): JSX.Element;
+export { Spinner };

package/lib/new-components/spinner/spinner.js

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

package/lib/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":["size","React","width","height","viewBox","className","styles","svg","fill","fillRule","tint","d"],"mappings":"gJAGA,oBAAmBA,KAAAA,aAAO,YAElBC,wCAAiBC,MAAOF,EAAMG,OAAQH,EAAMI,QAAQ,YAAYC,UAAWC,UAAOC,KAC9EN,qBAAGO,KAAK,OAAOC,SAAS,WACpBR,wBACII,UAAWC,UAAOI,KAClBC,EAAE,iJAENV,wBACII,UAAWC,UAAOE,KAClBG,EAAE"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={svg:"_51539197",spinner:"_54fbe2b3",tint:"a0c466ed",fill:"_745b73d3"};
+//# sourceMappingURL=spinner.module.css.js.map

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

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

package/lib/new-components/stack/stack.d.ts

@@ -1,14 +1,14 @@
 import type { ResponsiveProp } from '../responsive-props';
-import type { Space } from '../common-types';
+import type { DividerWeight, Space } from '../common-types';
 import type { ReusableBoxProps } from '../box';
-import type { DividerWeight } from '../divider';
+declare type Align = 'start' | 'center' | 'end';
 interface StackProps extends ReusableBoxProps {
     /** Space between items */
     space?: ResponsiveProp<Space>;
     /** Align items horizontally */
-    align?: ResponsiveProp<'left' | 'center' | 'right'>;
-    /** Add dividers if `true`, or specify the weight of the dividers to add */
-    dividers?: boolean | DividerWeight;
+    align?: ResponsiveProp<Align>;
+    /** The weight of the dividers to add. Defaults to 'none', which means no dividers are added */
+    dividers?: DividerWeight;
 }
 declare const Stack: import("../../utils/polymorphism").PolymorphicComponent<"div", StackProps, "obfuscateClassName">;
 export type { StackProps };

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

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),i=(e(t),require("../../utils/polymorphism.js")),l=require("../responsive-props.js"),s=require("../box/box.js"),a=require("../divider/divider.js"),n=e(require("react-keyed-flatten-children")),o=require("./stack.module.css.js");exports.Stack=i.polymorphicComponent((function(e,i){var u=e.as,c=e.space,d=e.align,p=void 0===d?"left":d,f=e.dividers,m=void 0!==f&&f,v=e.children,x=e.exceptionallySetClassName,g=r.objectWithoutPropertiesLoose(e,["as","space","align","dividers","children","exceptionallySetClassName"]),h="left"===p?void 0:{width:"full",flexDirection:"column",display:"flex",alignItems:l.mapResponsiveProp(p,(function(e){return"left"===e?"flexStart":"right"===e?"flexEnd":"center"}))};return t.createElement(s.Box,Object.assign({},g,h,{as:u,className:[x,l.getClassNames(o.default,"space",c)],ref:i}),m?t.Children.map(n(v),(function(e,r){return r>0?t.createElement(t.Fragment,null,t.createElement(a.Divider,{weight:"string"==typeof m?m:void 0}),e):e})):v)}));
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),i=(e(t),require("../../utils/polymorphism.js")),s=require("../responsive-props.js"),a=require("../box/box.js"),l=require("../divider/divider.js"),n=e(require("react-keyed-flatten-children")),o=require("./stack.module.css.js");exports.Stack=i.polymorphicComponent((function(e,i){var u=e.as,c=e.space,d=e.align,p=void 0===d?"start":d,m=e.dividers,f=void 0===m?"none":m,v=e.children,x=e.exceptionallySetClassName,j=r.objectWithoutPropertiesLoose(e,["as","space","align","dividers","children","exceptionallySetClassName"]),h="start"===p?void 0:{width:"full",flexDirection:"column",display:"flex",alignItems:s.mapResponsiveProp(p,(function(e){return"start"===e?"flexStart":"end"===e?"flexEnd":"center"}))};return t.createElement(a.Box,Object.assign({},j,h,{as:u,className:[x,s.getClassNames(o.default,"space",c)],ref:i}),"none"!==f?t.Children.map(n(v),(function(e,r){return r>0?t.createElement(t.Fragment,null,t.createElement(l.Divider,{weight:f}),e):e})):v)}));
 //# sourceMappingURL=stack.js.map

package/lib/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":["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":"0cAuBcA,wBAAwC,WAElDC,OADEC,IAAAA,GAAIC,IAAAA,UAAOC,MAAAA,aAAQ,aAAQC,SAAAA,gBAAkBC,IAAAA,SAAUC,IAAAA,0BAA8BC,6GAGjFC,EACQ,SAAVL,OACMM,EACA,CACIC,MAAO,OACPC,cAAe,SACfC,QAAS,OACTC,WAAYC,oBAAkBX,GAAO,SAACA,SACxB,SAAVA,EAAmB,YAAwB,UAAVA,EAAoB,UAAY,oBAK/EY,gBAACC,uBACOT,EACAC,GACJP,GAAIA,EACJgB,UAAW,CAACX,EAA2BY,gBAAcC,UAAQ,QAASjB,IACtEF,IAAKA,IAEJI,EACKW,WAAeK,IAAIC,EAAgBhB,IAAW,SAACiB,EAAOC,UAClDA,EAAQ,EACJR,gCACIA,gBAACS,WACGC,OAA4B,iBAAbrB,EAAwBA,OAAWK,IAErDa,GAGLA,KAGRjB"}
+{"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":["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":"0cAwBcA,wBAAwC,WAUlDC,OARIC,IAAAA,GACAC,IAAAA,UACAC,MAAAA,aAAQ,cACRC,SAAAA,aAAW,SACXC,IAAAA,SACAC,IAAAA,0BACGC,6GAIDC,EACQ,UAAVL,OACMM,EACA,CACIC,MAAO,OACPC,cAAe,SACfC,QAAS,OACTC,WAAYC,oBAAkBX,GAAO,SAACA,SACxB,UAAVA,EAAoB,YAAwB,QAAVA,EAAkB,UAAY,oBAK9EY,gBAACC,uBACOT,EACAC,GACJP,GAAIA,EACJgB,UAAW,CAACX,EAA2BY,gBAAcC,UAAQ,QAASjB,IACtEF,IAAKA,IAES,SAAbI,EACKW,WAAeK,IAAIC,EAAgBhB,IAAW,SAACiB,EAAOC,UAClDA,EAAQ,EACJR,gCACIA,gBAACS,WAAQC,OAAQrB,IAChBkB,GAGLA,KAGRjB"}

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

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

package/lib/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":["React","ref","label","hint","disabled","hidden","defaultChecked","originalId","id","originalAriaDescribedBy","onChange","props","useId","hintId","ariaDescribedBy","undefined","checked","setChecked","isChecked","Stack","space","Box","className","styles","container","as","display","alignItems","position","overflow","marginRight","flexShrink","toggle","HiddenVisually","type","event","defaultPrevented","currentTarget","handle","FieldHint"],"mappings":"0YAaoBA,cAAqD,WAYrEC,aAVIC,IAAAA,MACAC,IAAAA,SACAC,SAAAA,gBACAC,IAAAA,OACAC,IAAAA,eACIC,IAAJC,GACoBC,IAApB,oBACAC,IAAAA,SACGC,6HAIDH,EAAKI,QAAML,GACXM,EAASD,UACTE,EAAkBL,MAAAA,EAAAA,EAA4BN,EAAOU,OAASE,IACjCf,+BAAeW,EAAMK,uBAAWV,mBAA9CW,OACfC,YAAYP,EAAMK,mCAEpBhB,gBAACmB,SAAMC,MAAM,QAAQf,OAAQA,GACzBL,gBAACqB,OACGC,UAAW,CACPC,UAAOC,UACPpB,EAAWmB,UAAOnB,SAAW,KAC7Bc,EAAYK,UAAOP,QAAU,MAEjCS,GAAG,QACHC,QAAQ,OACRC,WAAW,UAEX3B,gBAACqB,OACGO,SAAS,WACTF,QAAQ,cACRG,SAAS,UACTC,YAAY,QACZC,WAAY,EACZT,UAAWC,UAAOS,QAElBhC,gBAACiC,sBACGjC,yCACQW,GACJH,GAAIA,EACJ0B,KAAK,WACL9B,SAAUA,qBACQU,EAClBb,IAAKA,EACLe,QAASE,EACTR,SAAU,SAACyB,GACPzB,MAAAA,GAAAA,EAAWyB,GACNA,EAAMC,kBACPnB,EAAWkB,EAAME,cAAcrB,cAK/ChB,wBAAMsB,UAAWC,UAAOe,UAE5BtC,wBAAMsB,UAAWC,UAAOrB,OAAQA,IAEnCC,EAAOH,gBAACuC,aAAU/B,GAAIK,GAASV,GAAoB"}
+{"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":["React","ref","label","hint","disabled","hidden","defaultChecked","originalId","id","originalAriaDescribedBy","onChange","props","useId","hintId","ariaDescribedBy","undefined","checked","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":"uaAcoBA,cAAqD,WAYrEC,aAVIC,IAAAA,MACAC,IAAAA,SACAC,SAAAA,gBACAC,IAAAA,OACAC,IAAAA,eACIC,IAAJC,GACoBC,IAApB,oBACAC,IAAAA,SACGC,6HAIDH,EAAKI,QAAML,GACXM,EAASD,UACTE,EAAkBL,MAAAA,EAAAA,EAA4BN,EAAOU,OAASE,IACjCf,+BAAeW,EAAMK,uBAAWV,mBAA9CW,OACfC,YAAYP,EAAMK,mCAEpBhB,gBAACmB,SAAMC,MAAM,QAAQf,OAAQA,GACzBL,gBAACqB,OACGC,UAAW,CACPC,UAAOC,UACPpB,EAAWmB,UAAOnB,SAAW,KAC7Bc,EAAYK,UAAOP,QAAU,MAEjCS,GAAG,QACHC,QAAQ,OACRC,WAAW,UAEX3B,gBAACqB,OACGO,SAAS,WACTF,QAAQ,cACRG,SAAS,UACTC,YAAY,QACZC,WAAY,EACZT,UAAWC,UAAOS,QAElBhC,gBAACiC,sBACGjC,yCACQW,GACJH,GAAIA,EACJ0B,KAAK,WACL9B,SAAUA,qBACQU,EAClBb,IAAKA,EACLe,QAASE,EACTR,SAAU,SAACyB,GACPzB,MAAAA,GAAAA,EAAWyB,GACNA,EAAMC,kBACPnB,EAAWkB,EAAME,cAAcrB,cAK/ChB,wBAAMsB,UAAWC,UAAOe,UAE5BtC,gBAACuC,QAAKC,0BAA2BjB,UAAOrB,OAAQA,IAEnDC,EAAOH,gBAACyC,aAAUjC,GAAIK,GAASV,GAAoB"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={container:"eed01ee8",disabled:"f1bb9c43",checked:"_93104a64",toggle:"_8fcd019a",label:"_975b23a7",handle:"a4cc2623"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={container:"_99a80509",disabled:"b5cf26ef",checked:"a63c43a2",toggle:"f318ae83",label:"_427926b9",handle:"_9fcd994c"};
 //# sourceMappingURL=switch-field.module.css.js.map

package/lib/new-components/tabs/tabs.d.ts

@@ -20,7 +20,7 @@ declare type TabsProps = {
 /**
  * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.
  */
-declare function Tabs({ children, selectedId, color, variant, }: TabsProps): React.ReactElement;
+export declare function Tabs({ children, selectedId, color, variant, }: TabsProps): React.ReactElement;
 declare type TabProps = {
     /** The content to render inside of the tab button */
     children: React.ReactNode;
@@ -30,7 +30,7 @@ declare type TabProps = {
 /**
  * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.
  */
-declare function Tab({ children, id }: TabProps): React.ReactElement | null;
+export declare function Tab({ children, id }: TabProps): React.ReactElement | null;
 declare type TabListProps = ({
     /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */
     'aria-label': string;
@@ -58,7 +58,7 @@ declare type TabListProps = ({
 /**
  * A component used to group `<Tab>` elements together.
  */
-declare function TabList({ children, space, ...props }: TabListProps): React.ReactElement | null;
+export declare function TabList({ children, space, ...props }: TabListProps): React.ReactElement | null;
 declare type TabPanelProps = {
     /** The content to be rendered inside the tab */
     children: React.ReactNode;
@@ -74,7 +74,7 @@ declare type TabPanelProps = {
 /**
  * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.
  */
-declare function TabPanel({ children, id, render }: TabPanelProps): React.ReactElement | null;
+export declare const TabPanel: import("../../utils/polymorphism").PolymorphicComponent<"div", TabPanelProps, "omitClassName">;
 declare type TabAwareSlotProps = {
     /**
      * Render prop used to provide the content to be rendered inside the slot. The render prop will be
@@ -88,5 +88,5 @@ declare type TabAwareSlotProps = {
  * 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.
  */
-declare function TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null;
-export { Tabs, TabList, Tab, TabPanel, TabAwareSlot };
+export declare function TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null;
+export {};

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

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),a=(e(r),e(require("classnames"))),n=require("../inline/inline.js"),o=require("reakit/Tab"),l=require("../../hooks/use-previous/use-previous.js"),i=require("./tabs.module.css.js"),u=r.createContext(null);exports.Tab=function(e){var n=e.children,l=e.id,s=r.useContext(u);if(!s)return null;var c=s.color,d=s.variant,v=t.objectWithoutPropertiesLoose(s,["color","variant"]);return r.createElement(o.Tab,Object.assign({className:a(i.default.tab,i.default["tab-"+(null!=d?d:"")],i.default["tab-"+(null!=c?c:"")]),id:l},v),n)},exports.TabAwareSlot=function(e){var t=e.children,a=r.useContext(u);return a?t({selectedId:a.selectedId}):null},exports.TabList=function(e){var a=e.children,l=e.space,i=void 0===l?"medium":l,s=t.objectWithoutPropertiesLoose(e,["children","space"]),c=r.useContext(u);if(!c)return null;var d=t.objectWithoutPropertiesLoose(c,["color","variant"]);return r.createElement(o.TabList,Object.assign({},s,d),r.createElement(n.Inline,{space:i},a))},exports.TabPanel=function(e){var a=e.children,n=e.id,l=e.render,i=void 0===l?"always":l,s=r.useContext(u),c=r.useState(!1),d=c[0],v=c[1],b=(null==s?void 0:s.selectedId)===n;if(r.useEffect((function(){!d&&b&&v(!0)}),[d,b]),!s)return null;var f=t.objectWithoutPropertiesLoose(s,["color","variant"]);return r.createElement(o.TabPanel,Object.assign({tabId:n},f),"always"===i?a:null,"active"===i&&b?a:null,"lazy"===i&&(b||d)?a:null)},exports.Tabs=function(e){var a=e.children,n=e.selectedId,i=e.color,s=void 0===i?"primary":i,c=e.variant,d=void 0===c?"normal":c,v=o.useTabState({selectedId:n}),b=l.usePrevious(n),f=v.selectedId,p=v.select;r.useEffect((function(){b!==n&&n!==f&&void 0!==n&&p(n)}),[n,f,p,b]);var j=r.useMemo((function(){return t.objectSpread2(t.objectSpread2({},v),{},{color:s,variant:d})}),[s,d].concat(Object.values(v)));return r.createElement(u.Provider,{value:j},a)};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),o=(e(r),e(require("classnames"))),a=require("../../utils/polymorphism.js"),n=require("../inline/inline.js"),i=require("reakit/Tab"),l=require("../../hooks/use-previous/use-previous.js"),s=require("./tabs.module.css.js"),u=r.createContext(null),c=a.polymorphicComponent((function(e,o){var a=e.children,n=e.id,l=e.as,s=e.render,c=void 0===s?"always":s,d=t.objectWithoutPropertiesLoose(e,["children","id","as","render"]),v=r.useContext(u),b=r.useState(!1),p=b[0],f=b[1],j=(null==v?void 0:v.selectedId)===n;if(r.useEffect((function(){!p&&j&&f(!0)}),[p,j]),!v)return null;var m=t.objectWithoutPropertiesLoose(v,["color","variant"]);return r.createElement(i.TabPanel,Object.assign({tabId:n},m,d,{as:l,ref:o}),"always"===c?a:null,"active"===c&&j?a:null,"lazy"===c&&(j||p)?a:null)}));exports.Tab=function(e){var a=e.children,n=e.id,l=r.useContext(u);if(!l)return null;var c=l.color,d=l.variant,v=t.objectWithoutPropertiesLoose(l,["color","variant"]);return r.createElement(i.Tab,Object.assign({className:o(s.default.tab,s.default["tab-"+(null!=d?d:"")],s.default["tab-"+(null!=c?c:"")]),id:n},v),a)},exports.TabAwareSlot=function(e){var t=e.children,o=r.useContext(u);return o?t({selectedId:o.selectedId}):null},exports.TabList=function(e){var o=e.children,a=e.space,l=void 0===a?"medium":a,s=t.objectWithoutPropertiesLoose(e,["children","space"]),c=r.useContext(u);if(!c)return null;var d=t.objectWithoutPropertiesLoose(c,["color","variant"]);return r.createElement(i.TabList,Object.assign({},s,d),r.createElement(n.Inline,{space:l},o))},exports.TabPanel=c,exports.Tabs=function(e){var o=e.children,a=e.selectedId,n=e.color,s=void 0===n?"primary":n,c=e.variant,d=void 0===c?"normal":c,v=i.useTabState({selectedId:a}),b=l.usePrevious(a),p=v.selectedId,f=v.select;r.useEffect((function(){b!==a&&a!==p&&void 0!==a&&f(a)}),[a,p,f,b]);var j=r.useMemo((function(){return t.objectSpread2(t.objectSpread2({},v),{},{color:s,variant:d})}),[s,d].concat(Object.values(v)));return r.createElement(u.Provider,{value:j},o)};
 //# sourceMappingURL=tabs.js.map

package/lib/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","children","id","tabContextValue","color","variant","tabState","BaseTab","className","classNames","styles","tab","selectedId","space","props","BaseTabList","Inline","render","tabRendered","setTabRendered","tabIsActive","BaseTabPanel","tabId","useTabState","previousSelectedId","usePrevious","actualSelectedId","select","undefined","memoizedTabState","Object","values","Provider","value"],"mappings":"6YAgBMA,EAAcC,gBAElB,kBAyEF,gBAAeC,IAAAA,SAAUC,IAAAA,GACfC,EAAkBH,aAAiBD,OAEpCI,SACM,SAGHC,EAAgCD,EAAhCC,MAAOC,EAAyBF,EAAzBE,QAAYC,iCAAaH,8BAGpCH,gBAACO,qBACGC,UAAWC,EACPC,UAAOC,IACPD,kBAAcL,MAAAA,EAAAA,EAAW,KACzBK,kBAAcN,MAAAA,EAAAA,EAAS,MAE3BF,GAAIA,GACAI,GAEHL,yBAqHb,gBAAwBA,IAAAA,SACdE,EAAkBH,aAAiBD,UAElCI,EAAkBF,EAAS,CAAEW,WAAYT,EAAgBS,aAAgB,sBAlFpF,gBACIX,IAAAA,aACAY,MAAAA,aAAQ,WACLC,yDAEGX,EAAkBH,aAAiBD,OAEpCI,SACM,SAGgBG,iCAAaH,8BAGpCH,gBAACe,2BAAgBD,EAAWR,GACxBN,gBAACgB,UAAOH,MAAOA,GAAQZ,sBAuBnC,gBAAoBA,IAAAA,SAAUC,IAAAA,OAAIe,OAAAA,aAAS,WACjCd,EAAkBH,aAAiBD,KACHC,YAAe,GAA9CkB,OAAaC,OACdC,GAAcjB,MAAAA,SAAAA,EAAiBS,cAAeV,KAEpDF,aACI,YACSkB,GAAeE,GAChBD,GAAe,KAGvB,CAACD,EAAaE,KAGbjB,SACM,SAGgBG,iCAAaH,8BAGpCH,gBAACqB,0BAAaC,MAAOpB,GAAQI,GACb,WAAXW,EAAsBhB,EAAW,KACtB,WAAXgB,GAAuBG,EAAcnB,EAAW,KACrC,SAAXgB,IAAsBG,GAAeF,GAAejB,EAAW,oBA1K5E,gBACIA,IAAAA,SACAW,IAAAA,eACAR,MAAAA,aAAQ,gBACRC,QAAAA,aAAU,WAEJC,EAAWiB,cAAY,CAAEX,WAAAA,IACzBY,EAAqBC,cAAYb,GACnBc,EAA6BpB,EAAzCM,WAA8Be,EAAWrB,EAAXqB,OAEtC3B,aACI,WAEQwB,IAAuBZ,GACvBA,IAAec,QACAE,IAAfhB,GAEAe,EAAOf,KAGf,CAACA,EAAYc,EAAkBC,EAAQH,QAGrCK,EAAmB7B,WACrB,qDAEWM,OACHF,MAAAA,EACAC,QAAAA,OAMPD,EAAOC,UAAYyB,OAAOC,OAAOzB,YAG/BN,gBAACD,EAAYiC,UAASC,MAAOJ,GAAmB5B"}
+{"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","TabPanel","polymorphicComponent","ref","children","id","as","render","props","tabContextValue","tabRendered","setTabRendered","tabIsActive","selectedId","tabState","BaseTabPanel","tabId","color","variant","BaseTab","className","classNames","styles","tab","space","BaseTabList","Inline","useTabState","previousSelectedId","usePrevious","actualSelectedId","select","undefined","memoizedTabState","Object","values","Provider","value"],"mappings":"sbAiBMA,EAAcC,gBAElB,MAwKWC,EAAWC,wBACpB,WAEIC,OADEC,IAAAA,SAAUC,IAAAA,GAAIC,IAAAA,OAAIC,OAAAA,aAAS,WAAaC,oEAGpCC,EAAkBT,aAAiBD,KACHC,YAAe,GAA9CU,OAAaC,OACdC,GAAcH,MAAAA,SAAAA,EAAiBI,cAAeR,KAEpDL,aACI,YACSU,GAAeE,GAChBD,GAAe,KAGvB,CAACD,EAAaE,KAGbH,SACM,SAGgBK,iCAAaL,8BAGpCT,gBAACe,0BAAaC,MAAOX,GAAQS,EAAcN,GAAOF,GAAIA,EAAIH,IAAKA,IAC/C,WAAXI,EAAsBH,EAAW,KACtB,WAAXG,GAAuBK,EAAcR,EAAW,KACrC,SAAXG,IAAsBK,GAAeF,GAAeN,EAAW,qCA3H1DA,IAAAA,SAAUC,IAAAA,GACtBI,EAAkBT,aAAiBD,OAEpCU,SACM,SAGHQ,EAAgCR,EAAhCQ,MAAOC,EAAyBT,EAAzBS,QAAYJ,iCAAaL,8BAGpCT,gBAACmB,qBACGC,UAAWC,EACPC,UAAOC,IACPD,kBAAcJ,MAAAA,EAAAA,EAAW,KACzBI,kBAAcL,MAAAA,EAAAA,EAAS,MAE3BZ,GAAIA,GACAS,GAEHV,yCA0HkBA,IAAAA,SACrBK,EAAkBT,aAAiBD,UAElCU,EAAkBL,EAAS,CAAES,WAAYJ,EAAgBI,aAAgB,sCAtFhFT,IAAAA,aACAoB,MAAAA,aAAQ,WACLhB,yDAEGC,EAAkBT,aAAiBD,OAEpCU,SACM,SAGgBK,iCAAaL,8BAGpCT,gBAACyB,2BAAgBjB,EAAWM,GACxBd,gBAAC0B,UAAOF,MAAOA,GAAQpB,qDA1H/BA,IAAAA,SACAS,IAAAA,eACAI,MAAAA,aAAQ,gBACRC,QAAAA,aAAU,WAEJJ,EAAWa,cAAY,CAAEd,WAAAA,IACzBe,EAAqBC,cAAYhB,GACnBiB,EAA6BhB,EAAzCD,WAA8BkB,EAAWjB,EAAXiB,OAEtC/B,aACI,WAEQ4B,IAAuBf,GACvBA,IAAeiB,QACAE,IAAfnB,GAEAkB,EAAOlB,KAGf,CAACA,EAAYiB,EAAkBC,EAAQH,QAGrCK,EAAmBjC,WACrB,qDAEWc,OACHG,MAAAA,EACAC,QAAAA,OAMPD,EAAOC,UAAYgB,OAAOC,OAAOrB,YAG/Bd,gBAACD,EAAYqC,UAASC,MAAOJ,GAAmB7B"}

package/lib/new-components/tabs/tabs.module.css.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={tab:"ce7a2c92","tab-normal":"_90aaabf7","tab-primary":"_6e0665d3","tab-secondary":"_9135146c","tab-tertiary":"e96fb06e","tab-plain":"f81d8e09"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={tab:"_7cdcd0b6","tab-normal":"af6705d0","tab-primary":"ad705020","tab-secondary":"_69a2043b","tab-tertiary":"_5b695667","tab-plain":"_88d3dc5e"};
 //# sourceMappingURL=tabs.module.css.js.map

package/lib/new-components/text/text.d.ts

@@ -1,12 +1,47 @@
 import * as React from 'react';
 import type { Tone } from '../common-types';
+import type { BoxProps } from '../box';
 declare type TextProps = {
     children: React.ReactNode;
+    /**
+     * The size of the text.
+     *
+     * The supported values, from smaller size to larger size, are:
+     * 'caption', 'copy', 'body', and 'subtitle'
+     *
+     * @default 'body'
+     */
     size?: 'caption' | 'copy' | 'body' | 'subtitle';
+    /**
+     * The weight of the text font.
+     *
+     * @default 'regular'
+     */
     weight?: 'regular' | 'semibold' | 'bold';
+    /**
+     * The tone (semantic color) of the text.
+     *
+     * @default 'normal'
+     */
     tone?: Tone;
+    /**
+     * Used to truncate the text to a given number of lines.
+     *
+     * It will add an ellipsis (`…`) to the text at the end of the last line, only if the text was
+     * truncated. If the text fits without it being truncated, no ellipsis is added.
+     *
+     * By default, the text is not truncated at all, no matter how many lines it takes to render it.
+     *
+     * @default undefined
+     */
     lineClamp?: 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5';
+    /**
+     * How to align the text horizontally.
+     *
+     * @default 'start'
+     */
+    align?: BoxProps['textAlign'];
 };
-declare const Text: import("../../utils/polymorphism").PolymorphicComponent<"span", TextProps, "obfuscateClassName">;
+declare const Text: import("../../utils/polymorphism").PolymorphicComponent<"div", TextProps, "obfuscateClassName">;
 export type { TextProps };
 export { Text };

package/lib/new-components/text/text.js

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