@doist/reactist 10.0.0 → 11.0.0

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

@@ -0,0 +1,155 @@
+import * as React from 'react';
+import { ButtonProps } from '../button';
+declare type ModalWidth = 'small' | 'medium' | 'large' | 'xlarge' | 'full';
+declare type ModalHeightMode = 'expand' | 'fitContent';
+declare type DivProps = Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'className' | 'children' | `aria-label` | `aria-labelledby`>;
+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;
+    /** Defines a string value that labels the current modal for assistive technologies. */
+    'aria-label'?: string;
+    /** Identifies the element (or elements) that labels the current modal for assistive technologies. */
+    'aria-labelledby'?: 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' | 'tabIndex'> & {
+    /**
+     * 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"),i=require("../columns/columns.js"),l=require("../divider/divider.js"),r=require("../inline/inline.js"),s=require("../icons/close-icon.js"),u=require("../button/button.js"),c=require("@reach/dialog"),d=e(require("react-focus-lock")),m=require("./modal.module.css.js"),p=["isOpen","onDismiss","height","width","exceptionallySetClassName","autoFocus","children"],h=["children","button","withDivider","exceptionallySetClassName"],f=["exceptionallySetClassName","children"],g=["exceptionallySetClassName","withDivider"],x=["children"],v=o.createContext({onDismiss:void 0,height:"fitContent"});function b(e){return!(e.ownerDocument===document&&"iframe"===e.tagName.toLowerCase())}function C(e){var t=o.useContext(v).onDismiss,n=o.useState(!1),a=n[0],i=n[1],l=o.useState(!1),r=l[0],c=l[1];return o.useEffect((function(){r?i(!0):c(!0)}),[r]),o.createElement(u.Button,Object.assign({},e,{variant:"quaternary",onClick:t,icon:o.createElement(s.CloseIcon,null),tabIndex:a?0:-1}))}function E(e){var n=e.exceptionallySetClassName,i=e.withDivider,r=void 0!==i&&i,s=t.objectWithoutPropertiesLoose(e,g);return o.createElement(o.Fragment,null,r?o.createElement(l.Divider,null):null,o.createElement(a.Box,Object.assign({as:"footer"},s,{className:n,padding:"large"})))}exports.Modal=function(e){var i=e.isOpen,l=e.onDismiss,r=e.height,s=void 0===r?"fitContent":r,u=e.width,h=void 0===u?"medium":u,f=e.exceptionallySetClassName,g=e.autoFocus,x=void 0===g||g,C=e.children,E=t.objectWithoutPropertiesLoose(e,p),j=o.useMemo((function(){return{onDismiss:l,height:s}}),[l,s]);return o.createElement(c.DialogOverlay,{isOpen:i,onDismiss:l,dangerouslyBypassFocusLock:!0,className:n(m.default.overlay,m.default[s],m.default[h]),"data-testid":"modal-overlay"},o.createElement(d,{autoFocus:x,whiteList:b,returnFocus:!0},o.createElement(c.DialogContent,Object.assign({},E,{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(v.Provider,{value:j},C))))},exports.ModalActions=function(e){var n=e.children,a=t.objectWithoutPropertiesLoose(e,x);return o.createElement(E,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,i=e.children,l=t.objectWithoutPropertiesLoose(e,f),r=o.useContext(v).height;return o.createElement(a.Box,Object.assign({},l,{className:n,flexGrow:"expand"===r?1:0,height:"expand"===r?"full":void 0,overflow:"auto"}),o.createElement(a.Box,{padding:"large",paddingBottom:"xxlarge"},i))},exports.ModalCloseButton=C,exports.ModalFooter=E,exports.ModalHeader=function(e){var n=e.children,r=e.button,s=void 0===r||r,u=e.withDivider,c=void 0!==u&&u,d=e.exceptionallySetClassName,p=t.objectWithoutPropertiesLoose(e,h);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(i.Columns,{space:"large",alignY:"center"},o.createElement(i.Column,{width:"auto"},n),o.createElement(i.Column,{width:"content",exceptionallySetClassName:m.default.buttonContainer},"boolean"!=typeof s?s:!0===s?o.createElement(C,{"aria-label":"Close modal",autoFocus:!1}):null))),c?o.createElement(l.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' | 'xlarge' | 'full'\ntype ModalHeightMode = 'expand' | 'fitContent'\n\n//\n// ModalContext\n//\n\ntype ModalContextValue = {\n    onDismiss?(this: void): void\n    height: ModalHeightMode\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({\n    onDismiss: undefined,\n    height: 'fitContent',\n})\n\n//\n// Modal container\n//\n\ntype DivProps = Omit<\n    React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,\n    'className' | 'children' | `aria-label` | `aria-labelledby`\n>\n\nexport type ModalProps = DivProps & {\n    /**\n     * The content of the modal.\n     */\n    children: React.ReactNode\n    /**\n     * Whether the modal is open and visible or not.\n     */\n    isOpen: boolean\n    /**\n     * Called when the user triggers closing the modal.\n     */\n    onDismiss?(): void\n    /**\n     * A descriptive setting for how wide the modal should aim to be, depending on how much space\n     * it has on screen.\n     * @default 'medium'\n     */\n    width?: ModalWidth\n    /**\n     * A descriptive setting for how tall the modal should aim to be.\n     *\n     * - 'expand': the modal aims to fill most of the available screen height, leaving only a small\n     *   padding above and below.\n     * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.\n     *\n     * In either case, if content does not fit, the content of the main body is set to scroll\n     * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the\n     * viewport boundaries.\n     *\n     * If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of\n     * the inner layout to ensure scroll, or whatever other strategy you may want.\n     */\n    height?: ModalHeightMode\n    /**\n     * Whether to set or not the focus initially to the first focusable element inside the modal.\n     */\n    autoFocus?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n    /** Defines a string value that labels the current modal for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current modal for assistive technologies. */\n    'aria-labelledby'?: string\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n    return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/**\n * Renders a modal that sits on top of the rest of the content in the entire page.\n *\n * Follows the WAI-ARIA Dialog (Modal) Pattern.\n *\n * @see ModalHeader\n * @see ModalFooter\n * @see ModalBody\n */\nexport function Modal({\n    isOpen,\n    onDismiss,\n    height = 'fitContent',\n    width = 'medium',\n    exceptionallySetClassName,\n    autoFocus = true,\n    children,\n    ...props\n}: ModalProps) {\n    const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n        onDismiss,\n        height,\n    ])\n\n    return (\n        <DialogOverlay\n            isOpen={isOpen}\n            onDismiss={onDismiss}\n            dangerouslyBypassFocusLock // We're setting up our own focus lock below\n            className={classNames(styles.overlay, styles[height], styles[width])}\n            data-testid=\"modal-overlay\"\n        >\n            <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n                <DialogContent\n                    {...props}\n                    as={Box}\n                    borderRadius=\"full\"\n                    background=\"default\"\n                    display=\"flex\"\n                    flexDirection=\"column\"\n                    overflow=\"hidden\"\n                    height={height === 'expand' ? 'full' : undefined}\n                    flexGrow={height === 'expand' ? 1 : 0}\n                    className={[exceptionallySetClassName, styles.container]}\n                >\n                    <ModalContext.Provider value={contextValue}>{children}</ModalContext.Provider>\n                </DialogContent>\n            </FocusLock>\n        </DialogOverlay>\n    )\n}\n\n//\n// ModalCloseButton\n//\n\nexport type ModalCloseButtonProps = Omit<\n    ButtonProps,\n    | 'type'\n    | 'children'\n    | 'variant'\n    | 'icon'\n    | 'startIcon'\n    | 'endIcon'\n    | 'disabled'\n    | 'loading'\n    | 'tabIndex'\n> & {\n    /**\n     * The descriptive label of the button.\n     */\n    'aria-label': string\n}\n\n/**\n * The close button rendered by ModalHeader. Provided independently so that consumers can customize\n * the button's label.\n *\n * @see ModalHeader\n */\nexport function ModalCloseButton(props: ModalCloseButtonProps) {\n    const { onDismiss } = React.useContext(ModalContext)\n    const [includeInTabOrder, setincludeInTabOrder] = React.useState(false)\n    const [isMounted, setIsMounted] = React.useState(false)\n\n    React.useEffect(\n        function skipAutoFocus() {\n            if (isMounted) {\n                setincludeInTabOrder(true)\n            } else {\n                setIsMounted(true)\n            }\n        },\n        [isMounted],\n    )\n\n    return (\n        <Button\n            {...props}\n            variant=\"quaternary\"\n            onClick={onDismiss}\n            icon={<CloseIcon />}\n            tabIndex={includeInTabOrder ? 0 : -1}\n        />\n    )\n}\n\n//\n// ModalHeader\n//\n\nexport type ModalHeaderProps = DivProps & {\n    /**\n     * The content of the header.\n     */\n    children: React.ReactNode\n    /**\n     * Allows to provide a custom button element, or to omit the close button if set to false.\n     * @see ModalCloseButton\n     */\n    button?: React.ReactNode | boolean\n    /**\n     * Whether to render a divider line below the header.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal header area with an optional close button.\n *\n * @see Modal\n * @see ModalFooter\n * @see ModalBody\n */\nexport function ModalHeader({\n    children,\n    button = true,\n    withDivider = false,\n    exceptionallySetClassName,\n    ...props\n}: ModalHeaderProps) {\n    return (\n        <>\n            <Box\n                {...props}\n                as=\"header\"\n                paddingLeft=\"large\"\n                paddingRight=\"small\"\n                paddingY=\"small\"\n                className={exceptionallySetClassName}\n            >\n                <Columns space=\"large\" alignY=\"center\">\n                    <Column width=\"auto\">{children}</Column>\n                    <Column width=\"content\" exceptionallySetClassName={styles.buttonContainer}>\n                        {typeof button !== 'boolean' ? (\n                            button\n                        ) : button === true ? (\n                            <ModalCloseButton aria-label=\"Close modal\" autoFocus={false} />\n                        ) : null}\n                    </Column>\n                </Columns>\n            </Box>\n            {withDivider ? <Divider /> : null}\n        </>\n    )\n}\n\n//\n// ModalBody\n//\n\nexport type ModalBodyProps = DivProps & {\n    /**\n     * The content of the modal body.\n     */\n    children: React.ReactNode\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders the body of a modal.\n *\n * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other\n * things, that the contet of the modal body expands or contracts depending on the modal height\n * setting or the size of the content. The body content also automatically scrolls when it's too\n * large to fit the available space.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalFooter\n */\nexport function ModalBody({ exceptionallySetClassName, children, ...props }: ModalBodyProps) {\n    const { height } = React.useContext(ModalContext)\n    return (\n        <Box\n            {...props}\n            className={exceptionallySetClassName}\n            flexGrow={height === 'expand' ? 1 : 0}\n            height={height === 'expand' ? 'full' : undefined}\n            overflow=\"auto\"\n        >\n            <Box padding=\"large\" paddingBottom=\"xxlarge\">\n                {children}\n            </Box>\n        </Box>\n    )\n}\n\n//\n// ModalFooter\n//\n\nexport type ModalFooterProps = DivProps & {\n    /**\n     * The contant of the modal footer.\n     */\n    children: React.ReactNode\n    /**\n     * Whether to render a divider line below the footer.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal footer area.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalBody\n */\nexport function ModalFooter({\n    exceptionallySetClassName,\n    withDivider = false,\n    ...props\n}: ModalFooterProps) {\n    return (\n        <>\n            {withDivider ? <Divider /> : null}\n            <Box as=\"footer\" {...props} className={exceptionallySetClassName} padding=\"large\" />\n        </>\n    )\n}\n\n//\n// ModalActions\n//\n\n/**\n * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).\n * @see ModalFooter\n */\nexport function ModalActions({ children, ...props }: ModalFooterProps) {\n    return (\n        <ModalFooter {...props}>\n            <Inline align=\"right\" space=\"large\">\n                {React.Children.map(children, (child) => (\n                    <div>{child}</div>\n                ))}\n            </Inline>\n        </ModalFooter>\n    )\n}\n"],"names":["ModalContext","React","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","ModalCloseButton","props","includeInTabOrder","setincludeInTabOrder","isMounted","setIsMounted","Button","variant","onClick","icon","CloseIcon","tabIndex","ModalFooter","exceptionallySetClassName","withDivider","Divider","Box","as","className","padding","isOpen","width","autoFocus","children","contextValue","DialogOverlay","dangerouslyBypassFocusLock","classNames","styles","overlay","FocusLock","whiteList","returnFocus","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":"yyBA0BMA,EAAeC,gBAAuC,CACxDC,eAAWC,EACXC,OAAQ,eA4DZ,SAASC,EAAmBC,WACfA,EAAQC,gBAAkBC,UAA8C,WAAlCF,EAAQG,QAAQC,wBAmFnDC,EAAiBC,OACrBV,EAAcD,aAAiBD,GAA/BE,YAC0CD,YAAe,GAA1DY,OAAmBC,SACQb,YAAe,GAA1Cc,OAAWC,cAElBf,aACI,WACQc,EACAD,GAAqB,GAErBE,GAAa,KAGrB,CAACD,IAIDd,gBAACgB,0BACOL,GACJM,QAAQ,aACRC,QAASjB,EACTkB,KAAMnB,gBAACoB,kBACPC,SAAUT,EAAoB,GAAK,cA6I/BU,SACZC,IAAAA,8BACAC,YAAAA,gBACGb,6CAGCX,gCACKwB,EAAcxB,gBAACyB,gBAAa,KAC7BzB,gBAAC0B,qBAAIC,GAAG,UAAahB,GAAOiB,UAAWL,EAA2BM,QAAQ,0CAjPlFC,IAAAA,OACA7B,IAAAA,cACAE,OAAAA,aAAS,mBACT4B,MAAAA,aAAQ,WACRR,IAAAA,8BACAS,UAAAA,gBACAC,IAAAA,SACGtB,sCAEGuB,EAAkClC,WAAc,iBAAO,CAAEC,UAAAA,EAAWE,OAAAA,KAAW,CACjFF,EACAE,WAIAH,gBAACmC,iBACGL,OAAQA,EACR7B,UAAWA,EACXmC,8BACAR,UAAWS,EAAWC,UAAOC,QAASD,UAAOnC,GAASmC,UAAOP,kBACjD,iBAEZ/B,gBAACwC,GAAUR,UAAWA,EAAWS,UAAWrC,EAAoBsC,aAAa,GACzE1C,gBAAC2C,iCACOhC,GACJgB,GAAID,MACJkB,aAAa,OACbC,WAAW,UACXC,QAAQ,OACRC,cAAc,SACdC,SAAS,SACT7C,OAAmB,WAAXA,EAAsB,YAASD,EACvC+C,SAAqB,WAAX9C,EAAsB,EAAI,EACpCyB,UAAW,CAACL,EAA2Be,UAAOY,aAE9ClD,gBAACD,EAAaoD,UAASC,MAAOlB,GAAeD,4CA2NlCA,IAAAA,SAAatB,6CAEpCX,gBAACsB,mBAAgBX,GACbX,gBAACqD,UAAOC,MAAM,QAAQC,MAAM,SACvBvD,WAAewD,IAAIvB,GAAU,SAACwB,UAC3BzD,2BAAMyD,2CAtEElC,IAAAA,0BAA2BU,IAAAA,SAAatB,sCACxDR,EAAWH,aAAiBD,GAA5BI,cAEJH,gBAAC0B,uBACOf,GACJiB,UAAWL,EACX0B,SAAqB,WAAX9C,EAAsB,EAAI,EACpCA,OAAmB,WAAXA,EAAsB,YAASD,EACvC8C,SAAS,SAEThD,gBAAC0B,OAAIG,QAAQ,QAAQ6B,cAAc,WAC9BzB,0FAtEbA,IAAAA,aACA0B,OAAAA,oBACAnC,YAAAA,gBACAD,IAAAA,0BACGZ,6CAGCX,gCACIA,gBAAC0B,uBACOf,GACJgB,GAAG,SACHiC,YAAY,QACZC,aAAa,QACbC,SAAS,QACTlC,UAAWL,IAEXvB,gBAAC+D,WAAQR,MAAM,QAAQS,OAAO,UAC1BhE,gBAACiE,UAAOlC,MAAM,QAAQE,GACtBjC,gBAACiE,UAAOlC,MAAM,UAAUR,0BAA2Be,UAAO4B,iBACnC,kBAAXP,EACJA,GACW,IAAXA,EACA3D,gBAACU,gBAA4B,cAAcsB,WAAW,IACtD,QAIfR,EAAcxB,gBAACyB,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":"dddb40c3",fadein:"_955f2d73",fitContent:"_95c7550e",container:"_88079712",full:"_4779d078",large:"_5fd86231",medium:"bdfb5931",small:"_4e848a11",xlarge:"d673fba2",overlay:"ea9ae0cc",expand:"a8bf8a4f",buttonContainer:"_44d6850e"};
+//# 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/notice/index.d.ts

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

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { AlertTone } from '../common-types';
+declare type NoticeProps = {
+    id?: string;
+    children: React.ReactNode;
+    tone: AlertTone;
+};
+declare function Notice({ id, children, tone }: NoticeProps): JSX.Element;
+export { Notice };
+export type { NoticeProps };

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

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

package/lib/new-components/notice/notice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notice.js","sources":["../../../src/new-components/notice/notice.tsx"],"sourcesContent":["import * as React from 'react'\nimport { AlertTone } from '../common-types'\nimport { getClassNames } from '../responsive-props'\nimport { Box } from '../box'\nimport { Columns, Column } from '../columns'\nimport { AlertIcon } from '../icons/alert-icon'\nimport styles from './notice.module.css'\n\ntype NoticeProps = {\n    id?: string\n    children: React.ReactNode\n    tone: AlertTone\n}\n\nfunction Notice({ id, children, tone }: NoticeProps) {\n    return (\n        <Box\n            id={id}\n            role=\"alert\"\n            aria-live=\"polite\"\n            className={[styles.container, getClassNames(styles, 'tone', tone)]}\n        >\n            <Columns space=\"small\" alignY=\"top\">\n                <Column width=\"content\">\n                    <AlertIcon tone={tone} />\n                </Column>\n                <Column>{children}</Column>\n            </Columns>\n        </Box>\n    )\n}\n\nexport { Notice }\nexport type { NoticeProps }\n"],"names":["children","tone","React","Box","id","role","className","styles","container","getClassNames","Columns","space","alignY","Column","width","AlertIcon"],"mappings":"oRAcA,gBAAsBA,IAAAA,SAAUC,IAAAA,YAExBC,gBAACC,OACGC,KAHMA,GAINC,KAAK,oBACK,SACVC,UAAW,CAACC,UAAOC,UAAWC,gBAAcF,UAAQ,OAAQN,KAE5DC,gBAACQ,WAAQC,MAAM,QAAQC,OAAO,OAC1BV,gBAACW,UAAOC,MAAM,WACVZ,gBAACa,aAAUd,KAAMA,KAErBC,gBAACW,cAAQb"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={container:"_464500ae","tone-info":"_1abfe147","tone-positive":"_36ce9859","tone-caution":"f92214b7","tone-critical":"be6cf28e"};
+//# sourceMappingURL=notice.module.css.js.map

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

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

package/lib/new-components/password-field/index.d.ts

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

package/lib/new-components/password-field/password-field.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { TextFieldProps } from '../text-field';
+declare type PasswordFieldProps = Omit<TextFieldProps, 'type'> & {
+    togglePasswordLabel?: string;
+};
+declare const PasswordField: React.ForwardRefExoticComponent<Pick<PasswordFieldProps, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "label" | "secondaryLabel" | "auxiliaryLabel" | "hint" | "maxWidth" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "readOnly" | "required" | "size" | "src" | "step" | "value" | "width" | "togglePasswordLabel"> & React.RefAttributes<HTMLInputElement>>;
+export { PasswordField };
+export type { PasswordFieldProps };

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

@@ -0,0 +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("../../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"),c=["label","secondaryLabel","auxiliaryLabel","hint","maxWidth","togglePasswordLabel","hidden","aria-describedby"];exports.PasswordField=r.forwardRef((function(b,p){var f=b.label,m=b.secondaryLabel,x=b.auxiliaryLabel,y=b.hint,h=b.maxWidth,j=b.togglePasswordLabel,q=void 0===j?"Toggle password visibility":j,w=b.hidden,g=b["aria-describedby"],v=e.objectWithoutPropertiesLoose(b,c),L=s.useId(v.id),P=r.useRef(null),E=a.useForkRef(P,p),W=r.useState(!1),I=W[0],_=W[1];function k(){var e;_((function(e){return!e})),null===(e=P.current)||void 0===e||e.focus()}return r.createElement(l.BaseField,{id:L,label:f,secondaryLabel:m,auxiliaryLabel:x,hint:y,maxWidth:h,hidden:w,"aria-describedby":g},(function(e){return r.createElement(i.Box,{display:"flex",alignItems:"center",className:[n.default.inputWrapper,u.default.inputWrapper]},r.createElement("input",Object.assign({},v,e,{ref:E,type:I?"text":"password"})),r.createElement(t.Tooltip,{content:q},r.createElement("button",{type:"button",onClick:k,"aria-label":q,tabIndex:-1},r.createElement(I?o.PasswordVisibleIcon:d.PasswordHiddenIcon,{"aria-hidden":!0}))))}))}));
+//# sourceMappingURL=password-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"password-field.js","sources":["../../../src/new-components/password-field/password-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useForkRef } from 'reakit-utils'\nimport { Tooltip } from '../../components/tooltip'\nimport { BaseField } from '../base-field'\nimport { Box } from '../box'\nimport { useId } from '../common-helpers'\n\nimport { PasswordVisibleIcon } from '../icons/password-visible-icon'\nimport { PasswordHiddenIcon } from '../icons/password-hidden-icon'\n\nimport styles from './password-field.module.css'\nimport textFieldStyles from '../text-field/text-field.module.css'\n\nimport type { TextFieldProps } from '../text-field'\n\ntype PasswordFieldProps = Omit<TextFieldProps, 'type'> & {\n    togglePasswordLabel?: string\n}\n\nconst PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(function PasswordField(\n    {\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        maxWidth,\n        togglePasswordLabel = 'Toggle password visibility',\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        ...props\n    },\n    ref,\n) {\n    const id = useId(props.id)\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const inputRef = useForkRef(internalRef, ref)\n\n    const [isPasswordVisible, setPasswordVisible] = React.useState(false)\n\n    function togglePasswordVisibility() {\n        setPasswordVisible((v) => !v)\n        internalRef.current?.focus()\n    }\n\n    return (\n        <BaseField\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box\n                    display=\"flex\"\n                    alignItems=\"center\"\n                    className={[styles.inputWrapper, textFieldStyles.inputWrapper]}\n                >\n                    <input\n                        {...props}\n                        {...extraProps}\n                        ref={inputRef}\n                        type={isPasswordVisible ? 'text' : 'password'}\n                    />\n                    <Tooltip content={togglePasswordLabel}>\n                        <button\n                            type=\"button\"\n                            onClick={togglePasswordVisibility}\n                            aria-label={togglePasswordLabel}\n                            tabIndex={-1}\n                        >\n                            {isPasswordVisible ? (\n                                <PasswordVisibleIcon aria-hidden />\n                            ) : (\n                                <PasswordHiddenIcon aria-hidden />\n                            )}\n                        </button>\n                    </Tooltip>\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { PasswordField }\nexport type { PasswordFieldProps }\n"],"names":["React","ref","label","secondaryLabel","auxiliaryLabel","hint","maxWidth","togglePasswordLabel","hidden","ariaDescribedBy","props","id","useId","internalRef","inputRef","useForkRef","isPasswordVisible","setPasswordVisible","togglePasswordVisibility","v","current","focus","BaseField","extraProps","Box","display","alignItems","className","styles","inputWrapper","textFieldStyles","type","Tooltip","content","onClick","tabIndex","PasswordVisibleIcon","PasswordHiddenIcon"],"mappings":"0oBAmBsBA,cAAuD,WAYzEC,OAVIC,IAAAA,MACAC,IAAAA,eACAC,IAAAA,eACAC,IAAAA,KACAC,IAAAA,aACAC,oBAAAA,aAAsB,+BACtBC,IAAAA,OACoBC,IAApB,oBACGC,sCAIDC,EAAKC,QAAMF,EAAMC,IACjBE,EAAcb,SAA+B,MAC7Cc,EAAWC,aAAWF,EAAaZ,KAEOD,YAAe,GAAxDgB,OAAmBC,gBAEjBC,UACLD,GAAmB,SAACE,UAAOA,eAC3BN,EAAYO,wBAASC,eAIrBrB,gBAACsB,aACGX,GAAIA,EACJT,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNC,SAAUA,EACVE,OAAQA,qBACUC,IAEjB,SAACc,UACEvB,gBAACwB,OACGC,QAAQ,OACRC,WAAW,SACXC,UAAW,CAACC,UAAOC,aAAcC,UAAgBD,eAEjD7B,yCACQU,EACAa,GACJtB,IAAKa,EACLiB,KAAMf,EAAoB,OAAS,cAEvChB,gBAACgC,WAAQC,QAAS1B,GACdP,0BACI+B,KAAK,SACLG,QAAShB,eACGX,EACZ4B,UAAW,GAGPnC,gBADHgB,EACIoB,sBAEAC"}

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

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

package/lib/new-components/password-field/password-field.module.css.js.map

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

package/lib/new-components/password-field/password-field.test.d.ts

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

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

@@ -0,0 +1,44 @@
+declare type ResponsiveBreakpoints = 'mobile' | 'tablet' | 'desktop';
+declare type Atom = string | number | boolean;
+/**
+ * A responsive prop supports receiving values of its given base type, or an object mapping a
+ * responsive breakpoint name to a value from the prop's base type.
+ *
+ * Some examples:
+ *
+ * - `align={{ mobile: 'left', tablet: 'center', desktop: 'right' }}`
+ */
+declare type ResponsiveProp<AtomType extends Atom> = AtomType | Readonly<{
+    [key in ResponsiveBreakpoints]?: AtomType;
+}>;
+/**
+ * Builds a css module class name for a given prop + prop-value combination.
+ *
+ * We have a convention of building the internal utility-based class names system in a way that
+ * resembles the prop for which it is used and the value of the prop. For instance, in a component
+ * with a prop `width` with possible values `narrow` and `wide`, we encode the styles for each of
+ * these alternatives in the class-names `.width-narrow` and `.width-wide`.
+ *
+ * Furthermore, this helper is aware of responsive prop values. For instance, if you provide the
+ * `width` prop above with the value `['narrow', 'wide']` this returns `['narrow', 'tablet-wide']`.
+ * That is, it returns an array of class names, following the same convention above, but also
+ * prefixing by the viewport width variant (`tablet-` or `desktop-`).
+ *
+ * @param styles the class names mapping imported from a css module
+ * @param property the prop name
+ * @param value the given prop's value
+ */
+declare function getClassNames(styles: Record<string, string>, property: string, value: ResponsiveProp<string> | null | undefined): string[] | null;
+/**
+ * A mapping over a responsive prop value.
+ *
+ * Since response values can be an object but also a scalar value, this helper makes it easier to
+ * to map the values when it's an object but keeps it consistent for the case when it is a scalar
+ * value as well.
+ *
+ * @param fromValue the responsive prop value
+ * @param mapper the mapping function
+ */
+declare function mapResponsiveProp<From extends Atom, To extends Atom>(fromValue: ResponsiveProp<From> | undefined, mapper: (from: From) => To): ResponsiveProp<To> | undefined;
+export type { ResponsiveProp, ResponsiveBreakpoints };
+export { getClassNames, mapResponsiveProp };

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

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

@@ -0,0 +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<{ [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/index.d.ts

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

package/lib/new-components/select-field/select-field.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { FieldComponentProps } from '../base-field';
+declare type SelectFieldProps = FieldComponentProps<HTMLSelectElement>;
+declare const SelectField: React.ForwardRefExoticComponent<Pick<FieldComponentProps<HTMLSelectElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "label" | "secondaryLabel" | "auxiliaryLabel" | "hint" | "maxWidth" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "readOnly" | "required" | "size" | "src" | "step" | "type" | "value" | "width"> & React.RefAttributes<HTMLSelectElement>>;
+export { SelectField };
+export type { SelectFieldProps };

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),a=require("../box/box.js"),i=require("../base-field/base-field.js"),l=require("./select-field.module.css.js"),t=["id","label","secondaryLabel","auxiliaryLabel","hint","maxWidth","children","hidden","aria-describedby"];function d(e){return r.createElement("svg",Object.assign({width:"16",height:"16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),r.createElement("path",{d:"M11.646 5.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.647z",fill:"currentColor"}))}exports.SelectField=r.forwardRef((function(n,s){var c=n.id,o=n.label,b=n.secondaryLabel,u=n.auxiliaryLabel,h=n.hint,f=n.maxWidth,m=n.children,x=n.hidden,p=n["aria-describedby"],y=e.objectWithoutPropertiesLoose(n,t);return r.createElement(i.BaseField,{id:c,label:o,secondaryLabel:b,auxiliaryLabel:u,hint:h,maxWidth:f,hidden:x,"aria-describedby":p},(function(e){return r.createElement(a.Box,{className:l.default.selectWrapper},r.createElement("select",Object.assign({},y,e,{ref:s}),m),r.createElement(d,{"aria-hidden":!0}))}))}));
+//# sourceMappingURL=select-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-field.js","sources":["../../../src/new-components/select-field/select-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './select-field.module.css'\n\ntype SelectFieldProps = FieldComponentProps<HTMLSelectElement>\n\nconst SelectField = React.forwardRef<HTMLSelectElement, SelectFieldProps>(function SelectField(\n    {\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        maxWidth,\n        children,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseField\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box className={styles.selectWrapper}>\n                    <select {...props} {...extraProps} ref={ref}>\n                        {children}\n                    </select>\n                    <SelectChevron aria-hidden />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nfunction SelectChevron(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n            <path\n                d=\"M11.646 5.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.647z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\nexport { SelectField }\nexport type { SelectFieldProps }\n"],"names":["SelectChevron","props","React","width","height","fill","xmlns","d","ref","id","label","secondaryLabel","auxiliaryLabel","hint","maxWidth","children","hidden","ariaDescribedBy","BaseField","extraProps","Box","className","styles","selectWrapper"],"mappings":"8WA6CA,SAASA,EAAcC,UAEfC,qCAAKC,MAAM,KAAKC,OAAO,KAAKC,KAAK,OAAOC,MAAM,8BAAiCL,GAC3EC,wBACIK,EAAE,0GACFF,KAAK,sCA3CDH,cAAsD,WAatEM,OAXIC,IAAAA,GACAC,IAAAA,MACAC,IAAAA,eACAC,IAAAA,eACAC,IAAAA,KACAC,IAAAA,SACAC,IAAAA,SACAC,IAAAA,OACoBC,IAApB,oBACGhB,6CAKHC,gBAACgB,aACGT,GAAIA,EACJC,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNC,SAAUA,EACVE,OAAQA,qBACUC,IAEjB,SAACE,UACEjB,gBAACkB,OAAIC,UAAWC,UAAOC,eACnBrB,0CAAYD,EAAWkB,GAAYX,IAAKA,IACnCO,GAELb,gBAACF"}

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

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

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

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

package/lib/new-components/select-field/select-field.test.d.ts

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

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/index.d.ts

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

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

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

package/lib/new-components/stack/stack.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 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"),u=["as","space","align","dividers","children","exceptionallySetClassName"];exports.Stack=i.polymorphicComponent((function(e,i){var c=e.as,d=e.space,p=e.align,m=void 0===p?"start":p,f=e.dividers,v=void 0===f?"none":f,x=e.children,j=e.exceptionallySetClassName,h=r.objectWithoutPropertiesLoose(e,u),g="start"===m?void 0:{width:"full",flexDirection:"column",display:"flex",alignItems:s.mapResponsiveProp(m,(function(e){return"start"===e?"flexStart":"end"===e?"flexEnd":"center"}))};return t.createElement(a.Box,Object.assign({},h,g,{as:c,className:[j,s.getClassNames(o.default,"space",d)],ref:i}),"none"!==v?t.Children.map(n(x),(function(e,r){return r>0?t.createElement(t.Fragment,null,t.createElement(l.Divider,{weight:v}),e):e})):x)}));
+//# sourceMappingURL=stack.js.map

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

@@ -0,0 +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 { 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":"qhBAwBcA,wBAAwC,WAUlDC,OARIC,IAAAA,GACAC,IAAAA,UACAC,MAAAA,aAAQ,cACRC,SAAAA,aAAW,SACXC,IAAAA,SACAC,IAAAA,0BACGC,sCAIDC,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/stack/stack.module.css.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={"space-xsmall":"_7b475ead","space-small":"_5641699f","space-medium":"_1a1c63e4","space-large":"_560f80a0","space-xlarge":"_84ffebbc","space-xxlarge":"b60a65cb","tablet-space-xsmall":"d808f5c3","tablet-space-small":"a51c76b3","tablet-space-medium":"_7185a7aa","tablet-space-large":"af82e610","tablet-space-xlarge":"_88b4ff46","tablet-space-xxlarge":"_9de15321","desktop-space-xsmall":"_6fb32d20","desktop-space-small":"_07ee315a","desktop-space-medium":"a270d7ec","desktop-space-large":"ea6ebb29","desktop-space-xlarge":"_35b36178","desktop-space-xxlarge":"_56c7dc23"};
+//# sourceMappingURL=stack.module.css.js.map

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

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

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

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

package/lib/new-components/switch-field/index.d.ts

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

package/lib/new-components/switch-field/switch-field.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { FieldComponentProps } from '../base-field';
+declare type SwitchFieldProps = Omit<FieldComponentProps<HTMLInputElement>, 'type' | 'secondaryLabel' | 'auxiliaryLabel' | 'maxWidth' | 'aria-describedby' | 'aria-label' | 'aria-labelledby'> & {
+    /** Identifies the element (or elements) that describes the switch for assistive technologies. */
+    'aria-describedby'?: string;
+    /** Defines a string value that labels the current switch for assistive technologies. */
+    'aria-label'?: string;
+    /** Identifies the element (or elements) that labels the current switch for assistive technologies. */
+    'aria-labelledby'?: string;
+};
+declare const SwitchField: React.ForwardRefExoticComponent<Pick<SwitchFieldProps, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "label" | "hint" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "readOnly" | "required" | "size" | "src" | "step" | "value" | "width"> & React.RefAttributes<HTMLInputElement>>;
+export { SwitchField };
+export type { SwitchFieldProps };

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

@@ -0,0 +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("../text/text.js"),n=require("../common-helpers.js"),r=require("../base-field/base-field.js"),u=require("./switch-field.module.css.js"),s=["label","hint","disabled","hidden","defaultChecked","id","aria-describedby","aria-label","aria-labelledby","onChange"];exports.SwitchField=l.forwardRef((function(c,o){var b,h,f,v=c.label,m=c.hint,p=c.disabled,y=void 0!==p&&p,k=c.hidden,x=c.defaultChecked,g=c.id,j=c["aria-describedby"],q=c["aria-label"],E=c["aria-labelledby"],B=c.onChange,C=e.objectWithoutPropertiesLoose(c,s),S=n.useId(g),w=n.useId(),N=null!=j?j:m?w:void 0,P=null!=q?q:void 0,_=null!=E?E:void 0,F=l.useState(!1),H=F[0],I=F[1],K=l.useState(null!==(b=null!==(h=C.checked)&&void 0!==h?h:x)&&void 0!==b&&b),O=K[1],R=null!==(f=C.checked)&&void 0!==f?f:K[0];return l.createElement(i.Stack,{space:"small",hidden:k},l.createElement(a.Box,{className:[u.default.container,y?u.default.disabled:null,R?u.default.checked:null,H?u.default.keyFocused:null],as:"label",display:"flex",alignItems:"center"},l.createElement(a.Box,{position:"relative",display:"inlineBlock",overflow:"visible",marginRight:"small",flexShrink:0,className:u.default.toggle},l.createElement(d.HiddenVisually,null,l.createElement("input",Object.assign({},C,{id:S,type:"checkbox",disabled:y,"aria-describedby":N,"aria-label":P,"aria-labelledby":_,ref:o,checked:R,onChange:function(e){null==B||B(e),e.defaultPrevented||O(e.currentTarget.checked)},onBlur:function(e){var l;I(!1),null==C||null===(l=C.onBlur)||void 0===l||l.call(C,e)},onKeyUp:function(e){var l;I(!0),null==C||null===(l=C.onKeyUp)||void 0===l||l.call(C,e)}}))),l.createElement("span",{className:u.default.handle})),l.createElement(t.Text,{exceptionallySetClassName:u.default.label},v)),m?l.createElement(r.FieldHint,{id:w},m):null)}));
+//# sourceMappingURL=switch-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch-field.js","sources":["../../../src/new-components/switch-field/switch-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Stack } from '../stack'\nimport { Text } from '../text'\nimport { HiddenVisually } from '../hidden-visually'\nimport { FieldComponentProps, FieldHint } from '../base-field'\nimport { useId } from '../common-helpers'\nimport styles from './switch-field.module.css'\n\ntype SwitchFieldProps = Omit<\n    FieldComponentProps<HTMLInputElement>,\n    | 'type'\n    | 'secondaryLabel'\n    | 'auxiliaryLabel'\n    | 'maxWidth'\n    | 'aria-describedby'\n    | 'aria-label'\n    | 'aria-labelledby'\n> & {\n    /** Identifies the element (or elements) that describes the switch for assistive technologies. */\n    'aria-describedby'?: string\n    /** Defines a string value that labels the current switch for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current switch for assistive technologies. */\n    'aria-labelledby'?: string\n}\n\nconst SwitchField = React.forwardRef<HTMLInputElement, SwitchFieldProps>(function SwitchField(\n    {\n        label,\n        hint,\n        disabled = false,\n        hidden,\n        defaultChecked,\n        id: originalId,\n        'aria-describedby': originalAriaDescribedBy,\n        'aria-label': originalAriaLabel,\n        'aria-labelledby': originalAriaLabelledby,\n        onChange,\n        ...props\n    },\n    ref,\n) {\n    const id = useId(originalId)\n    const hintId = useId()\n\n    const ariaDescribedBy = originalAriaDescribedBy ?? (hint ? hintId : undefined)\n    const ariaLabel = originalAriaLabel ?? undefined\n    const ariaLabelledBy = originalAriaLabelledby ?? undefined\n\n    const [keyFocused, setKeyFocused] = React.useState(false)\n    const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n    const isChecked = props.checked ?? checkedState\n\n    return (\n        <Stack space=\"small\" hidden={hidden}>\n            <Box\n                className={[\n                    styles.container,\n                    disabled ? styles.disabled : null,\n                    isChecked ? styles.checked : null,\n                    keyFocused ? styles.keyFocused : null,\n                ]}\n                as=\"label\"\n                display=\"flex\"\n                alignItems=\"center\"\n            >\n                <Box\n                    position=\"relative\"\n                    display=\"inlineBlock\"\n                    overflow=\"visible\"\n                    marginRight=\"small\"\n                    flexShrink={0}\n                    className={styles.toggle}\n                >\n                    <HiddenVisually>\n                        <input\n                            {...props}\n                            id={id}\n                            type=\"checkbox\"\n                            disabled={disabled}\n                            aria-describedby={ariaDescribedBy}\n                            aria-label={ariaLabel}\n                            aria-labelledby={ariaLabelledBy}\n                            ref={ref}\n                            checked={isChecked}\n                            onChange={(event) => {\n                                onChange?.(event)\n                                if (!event.defaultPrevented) {\n                                    setChecked(event.currentTarget.checked)\n                                }\n                            }}\n                            onBlur={(event) => {\n                                setKeyFocused(false)\n                                props?.onBlur?.(event)\n                            }}\n                            onKeyUp={(event) => {\n                                setKeyFocused(true)\n                                props?.onKeyUp?.(event)\n                            }}\n                        />\n                    </HiddenVisually>\n                    <span className={styles.handle} />\n                </Box>\n                <Text exceptionallySetClassName={styles.label}>{label}</Text>\n            </Box>\n            {hint ? <FieldHint id={hintId}>{hint}</FieldHint> : null}\n        </Stack>\n    )\n})\n\nexport { SwitchField }\nexport type { SwitchFieldProps }\n"],"names":["React","ref","label","hint","disabled","hidden","defaultChecked","originalId","id","originalAriaDescribedBy","originalAriaLabel","originalAriaLabelledby","onChange","props","useId","hintId","ariaDescribedBy","undefined","ariaLabel","ariaLabelledBy","keyFocused","setKeyFocused","checked","setChecked","isChecked","Stack","space","Box","className","styles","container","as","display","alignItems","position","overflow","marginRight","flexShrink","toggle","HiddenVisually","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","handle","Text","exceptionallySetClassName","FieldHint"],"mappings":"iiBA2BoBA,cAAqD,WAcrEC,aAZIC,IAAAA,MACAC,IAAAA,SACAC,SAAAA,gBACAC,IAAAA,OACAC,IAAAA,eACIC,IAAJC,GACoBC,IAApB,oBACcC,IAAd,cACmBC,IAAnB,mBACAC,IAAAA,SACGC,sCAIDL,EAAKM,QAAMP,GACXQ,EAASD,UAETE,EAAkBP,MAAAA,EAAAA,EAA4BN,EAAOY,OAASE,EAC9DC,EAAYR,MAAAA,EAAAA,OAAqBO,EACjCE,EAAiBR,MAAAA,EAAAA,OAA0BM,IAEbjB,YAAe,GAA5CoB,OAAYC,SACgBrB,+BAAea,EAAMS,uBAAWhB,mBAA9CiB,OACfC,YAAYX,EAAMS,mCAGpBtB,gBAACyB,SAAMC,MAAM,QAAQrB,OAAQA,GACzBL,gBAAC2B,OACGC,UAAW,CACPC,UAAOC,UACP1B,EAAWyB,UAAOzB,SAAW,KAC7BoB,EAAYK,UAAOP,QAAU,KAC7BF,EAAaS,UAAOT,WAAa,MAErCW,GAAG,QACHC,QAAQ,OACRC,WAAW,UAEXjC,gBAAC2B,OACGO,SAAS,WACTF,QAAQ,cACRG,SAAS,UACTC,YAAY,QACZC,WAAY,EACZT,UAAWC,UAAOS,QAElBtC,gBAACuC,sBACGvC,yCACQa,GACJL,GAAIA,EACJgC,KAAK,WACLpC,SAAUA,qBACQY,eACNE,oBACKC,EACjBlB,IAAKA,EACLqB,QAASE,EACTZ,SAAU,SAAC6B,GACP7B,MAAAA,GAAAA,EAAW6B,GACNA,EAAMC,kBACPnB,EAAWkB,EAAME,cAAcrB,UAGvCsB,OAAQ,SAACH,SACLpB,GAAc,GACdR,MAAAA,aAAAA,EAAO+B,4BAAP/B,EAAgB4B,IAEpBI,QAAS,SAACJ,SACNpB,GAAc,GACdR,MAAAA,aAAAA,EAAOgC,6BAAPhC,EAAiB4B,QAI7BzC,wBAAM4B,UAAWC,UAAOiB,UAE5B9C,gBAAC+C,QAAKC,0BAA2BnB,UAAO3B,OAAQA,IAEnDC,EAAOH,gBAACiD,aAAUzC,GAAIO,GAASZ,GAAoB"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={container:"ec63c3f1",disabled:"_7de9c06d",checked:"a37981fc",toggle:"_2a17ac45",label:"_68cc9707",handle:"_91409c7f",keyFocused:"a6490371"};
+//# sourceMappingURL=switch-field.module.css.js.map

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

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

package/lib/new-components/switch-field/switch-field.test.d.ts

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

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

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