@doist/reactist 19.1.1 → 20.0.1

package/lib/modal/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sources":["../../src/modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport FocusLock from 'react-focus-lock'\nimport { hideOthers } from 'aria-hidden'\n\nimport { Dialog, DialogOptions, useDialogState } from 'ariakit/dialog'\nimport { Portal, PortalOptions } from 'ariakit/portal'\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     * Controls if the modal is dismissed when pressing \"Escape\".\n     */\n    hideOnEscape?: DialogOptions['hideOnEscape']\n    /**\n     * Controls if the modal is dismissed when clicking outside the modal body, on the overlay.\n     */\n    hideOnInteractOutside?: DialogOptions['hideOnInteractOutside']\n    /**\n     * An escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n    /**\n     * An escape hatch in case you need to provide a custom class name to the overlay element.\n     */\n    exceptionallySetOverlayClassName?: 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     * An HTML element or a memoized callback function that returns an HTML element to be used as\n     * the portal element. By default, the portal element will be a `div` element appended to the\n     * `document.body`.\n     *\n     * @default HTMLDivElement\n     *\n     * @example\n     * const [portal, setPortal] = useState(null);\n     * <Portal portalElement={portal} />;\n     * <div ref={setPortal} />;\n     *\n     * @example\n     * const getPortalElement = useCallback(() => {\n     *   const div = document.createElement(\"div\");\n     *   const portalRoot = document.getElementById(\"portal-root\");\n     *   portalRoot.appendChild(div);\n     *   return div;\n     * }, []);\n     * <Portal portalElement={getPortalElement} />;\n     */\n    portalElement?: PortalOptions['portalElement']\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n    return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/**\n * Renders a modal that sits on top of the rest of the content in the entire page.\n *\n * Follows the WAI-ARIA Dialog (Modal) Pattern.\n *\n * @see ModalHeader\n * @see ModalFooter\n * @see ModalBody\n */\nexport function Modal({\n    isOpen,\n    onDismiss,\n    height = 'fitContent',\n    width = 'medium',\n    exceptionallySetClassName,\n    exceptionallySetOverlayClassName,\n    autoFocus = true,\n    hideOnEscape = true,\n    hideOnInteractOutside = true,\n    children,\n    portalElement,\n    ...props\n}: ModalProps) {\n    const setOpen = React.useCallback(\n        (visible: boolean) => {\n            if (!visible) {\n                onDismiss?.()\n            }\n        },\n        [onDismiss],\n    )\n    const state = useDialogState({ open: isOpen, setOpen })\n\n    const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n        onDismiss,\n        height,\n    ])\n\n    const portalRef = React.useRef<HTMLElement | null>(null)\n    const dialogRef = React.useRef<HTMLDivElement | null>(null)\n    const backdropRef = React.useRef<HTMLDivElement | null>(null)\n    const handleBackdropClick = React.useCallback(\n        (event: React.MouseEvent) => {\n            if (\n                // The focus lock element takes up the same space as the backdrop and is where the event bubbles up from,\n                // so instead of checking the backdrop as the event target, we need to make sure it's just above the dialog\n                !dialogRef.current?.contains(event.target as Node) &&\n                // Events fired from other portals will bubble up to the backdrop, even if it isn't a child in the DOM\n                backdropRef.current?.contains(event.target as Node)\n            ) {\n                event.stopPropagation()\n                onDismiss?.()\n            }\n        },\n        [onDismiss],\n    )\n\n    React.useLayoutEffect(\n        function disableAccessibilityTreeOutside() {\n            if (!isOpen || !portalRef.current) {\n                return\n            }\n\n            return hideOthers(portalRef.current)\n        },\n        [isOpen],\n    )\n\n    if (!isOpen) {\n        return null\n    }\n\n    return (\n        <Portal portalRef={portalRef} portalElement={portalElement}>\n            <Box\n                data-testid=\"modal-overlay\"\n                data-overlay\n                className={classNames(\n                    styles.overlay,\n                    styles[height],\n                    styles[width],\n                    exceptionallySetOverlayClassName,\n                )}\n                /**\n                 * We're using `onPointerDown` instead of `onClick` to prevent\n                 * the modal from closing when the click starts inside the modal\n                 * and ends on the backdrop.\n                 */\n                onPointerDown={hideOnInteractOutside ? handleBackdropClick : undefined}\n                ref={backdropRef}\n            >\n                <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n                    <Dialog\n                        {...props}\n                        ref={dialogRef}\n                        as={Box}\n                        state={state}\n                        hideOnEscape={hideOnEscape}\n                        preventBodyScroll\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                        // Disable focus lock as we set up our own using ReactFocusLock\n                        modal={false}\n                        autoFocus={false}\n                        autoFocusOnShow={false}\n                        autoFocusOnHide={false}\n                        // Disable portal and backdrop as we control their markup\n                        portal={false}\n                        backdrop={false}\n                        hideOnInteractOutside={false}\n                    >\n                        <ModalContext.Provider value={contextValue}>\n                            {children}\n                        </ModalContext.Provider>\n                    </Dialog>\n                </FocusLock>\n            </Box>\n        </Portal>\n    )\n}\n\n//\n// ModalCloseButton\n//\n\nexport type ModalCloseButtonProps = Omit<\n    ButtonProps,\n    | 'type'\n    | 'children'\n    | 'variant'\n    | 'icon'\n    | 'startIcon'\n    | 'endIcon'\n    | 'disabled'\n    | 'loading'\n    | 'tabIndex'\n    | 'width'\n    | 'align'\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={button === false || button === null ? 'large' : 'small'}\n                paddingY=\"small\"\n                className={exceptionallySetClassName}\n            >\n                <Columns space=\"large\" alignY=\"center\">\n                    <Column width=\"auto\">{children}</Column>\n                    {button === false || button === null ? (\n                        <div className={styles.headerContent} />\n                    ) : (\n                        <Column\n                            width=\"content\"\n                            exceptionallySetClassName={styles.buttonContainer}\n                            data-testid=\"button-container\"\n                        >\n                            {typeof button === 'boolean' ? (\n                                <ModalCloseButton aria-label=\"Close modal\" autoFocus={false} />\n                            ) : (\n                                button\n                            )}\n                        </Column>\n                    )}\n                </Columns>\n            </Box>\n            {withDivider ? <Divider /> : null}\n        </>\n    )\n}\n\n//\n// ModalBody\n//\n\nexport 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\nexport type ModalActionsProps = ModalFooterProps\n\n/**\n * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).\n * @see ModalFooter\n */\nexport function ModalActions({ children, ...props }: ModalActionsProps) {\n    return (\n        <ModalFooter {...props}>\n            <Inline align=\"right\" space=\"large\">\n                {children}\n            </Inline>\n        </ModalFooter>\n    )\n}\n"],"names":["ModalContext","React","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","ModalCloseButton","props","includeInTabOrder","setIncludeInTabOrder","isMounted","setIsMounted","Button","variant","onClick","icon","CloseIcon","tabIndex","ModalFooter","exceptionallySetClassName","withDivider","Divider","Box","as","className","padding","isOpen","width","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement","setOpen","visible","state","useDialogState","open","contextValue","portalRef","dialogRef","backdropRef","handleBackdropClick","event","current","_dialogRef$current","contains","target","_backdropRef$current","stopPropagation","hideOthers","Portal","classNames","styles","overlay","onPointerDown","ref","FocusLock","whiteList","returnFocus","Dialog","preventBodyScroll","borderRadius","background","display","flexDirection","overflow","flexGrow","container","modal","autoFocusOnShow","autoFocusOnHide","portal","backdrop","Provider","value","Inline","align","space","paddingBottom","button","paddingLeft","paddingRight","paddingY","Columns","alignY","Column","headerContent","buttonContainer"],"mappings":"47BA6BMA,EAAeC,gBAAuC,CACxDC,eAAWC,EACXC,OAAQ,eA8FZ,SAASC,EAAmBC,GACxB,QAASA,EAAQC,gBAAkBC,UAA8C,WAAlCF,EAAQG,QAAQC,wBAgKnDC,EAAiBC,GAC7B,MAAMV,UAAEA,GAAcD,aAAiBD,IAChCa,EAAmBC,GAAwBb,YAAe,IAC1Dc,EAAWC,GAAgBf,YAAe,GAajD,OAXAA,aACI,WACQc,EACAD,GAAqB,GAErBE,GAAa,KAGrB,CAACD,IAIDd,gBAACgB,4CACOL,OACJM,QAAQ,aACRC,QAASjB,EACTkB,KAAMnB,gBAACoB,kBACPC,SAAUT,EAAoB,GAAK,cAqJ/BU,SAAYC,0BACxBA,EADwBC,YAExBA,GAAc,KACXb,iCAEH,OACIX,gCACKwB,EAAcxB,gBAACyB,gBAAa,KAC7BzB,gBAAC0B,uCAAIC,GAAG,UAAahB,OAAOiB,UAAWL,EAA2BM,QAAQ,0CAvUhEC,OAClBA,EADkB7B,UAElBA,EAFkBE,OAGlBA,EAAS,aAHS4B,MAIlBA,EAAQ,SAJUR,0BAKlBA,EALkBS,iCAMlBA,EANkBC,UAOlBA,GAAY,EAPMC,aAQlBA,GAAe,EARGC,sBASlBA,GAAwB,EATNC,SAUlBA,EAVkBC,cAWlBA,KACG1B,iCAEH,MAAM2B,EAAUtC,cACXuC,IACQA,SACDtC,GAAAA,KAGR,CAACA,IAECuC,EAAQC,iBAAe,CAAEC,KAAMZ,EAAQQ,QAAAA,IAEvCK,EAAkC3C,UAAc,MAASC,UAAAA,EAAWE,OAAAA,IAAW,CACjFF,EACAE,IAGEyC,EAAY5C,SAAiC,MAC7C6C,EAAY7C,SAAoC,MAChD8C,EAAc9C,SAAoC,MAClD+C,EAAsB/C,cACvBgD,qBAIQH,EAAUI,UAAVC,EAAmBC,SAASH,EAAMI,kBAEnCN,EAAYG,WAAZI,EAAqBF,SAASH,EAAMI,UAEpCJ,EAAMM,wBACNrD,GAAAA,MAGR,CAACA,IAcL,OAXAD,mBACI,WACI,GAAK8B,GAAWc,EAAUK,QAI1B,OAAOM,aAAWX,EAAUK,WAEhC,CAACnB,IAGAA,EAKD9B,gBAACwD,UAAOZ,UAAWA,EAAWP,cAAeA,GACzCrC,gBAAC0B,qBACe,kCAEZE,UAAW6B,EACPC,UAAOC,QACPD,UAAOvD,GACPuD,UAAO3B,GACPC,GAOJ4B,cAAezB,EAAwBY,OAAsB7C,EAC7D2D,IAAKf,GAEL9C,gBAAC8D,GAAU7B,UAAWA,EAAW8B,UAAW3D,EAAoB4D,aAAa,GACzEhE,gBAACiE,4CACOtD,OACJkD,IAAKhB,EACLlB,GAAID,MACJc,MAAOA,EACPN,aAAcA,EACdgC,qBACAC,aAAa,OACbC,WAAW,UACXC,QAAQ,OACRC,cAAc,SACdC,SAAS,SACTpE,OAAmB,WAAXA,EAAsB,YAASD,EACvCsE,SAAqB,WAAXrE,EAAsB,EAAI,EACpCyB,UAAW,CAACL,EAA2BmC,UAAOe,WAE9CC,OAAO,EACPzC,WAAW,EACX0C,iBAAiB,EACjBC,iBAAiB,EAEjBC,QAAQ,EACRC,UAAU,EACV3C,uBAAuB,IAEvBnC,gBAACD,EAAagF,UAASC,MAAOrC,GACzBP,OAjDd,2CA0RcA,SAAEA,KAAazB,iCACxC,OACIX,gBAACsB,qBAAgBX,GACbX,gBAACiF,UAAOC,MAAM,QAAQC,MAAM,SACvB/C,uCAvESb,0BAAEA,EAAFa,SAA6BA,KAAazB,iCAChE,MAAMR,OAAEA,GAAWH,aAAiBD,GACpC,OACIC,gBAAC0B,yCACOf,OACJiB,UAAWL,EACXiD,SAAqB,WAAXrE,EAAsB,EAAI,EACpCA,OAAmB,WAAXA,EAAsB,YAASD,EACvCqE,SAAS,SAETvE,gBAAC0B,OAAIG,QAAQ,QAAQuD,cAAc,WAC9BhD,0FA/EWA,SACxBA,EADwBiD,OAExBA,GAAS,EAFe7D,YAGxBA,GAAc,EAHUD,0BAIxBA,KACGZ,iCAEH,OACIX,gCACIA,gBAAC0B,yCACOf,OACJgB,GAAG,SACH2D,YAAY,QACZC,cAAyB,IAAXF,GAA+B,OAAXA,EAAkB,QAAU,QAC9DG,SAAS,QACT5D,UAAWL,IAEXvB,gBAACyF,WAAQN,MAAM,QAAQO,OAAO,UAC1B1F,gBAAC2F,UAAO5D,MAAM,QAAQK,IACV,IAAXiD,GAA+B,OAAXA,EACjBrF,uBAAK4B,UAAW8B,UAAOkC,gBAEvB5F,gBAAC2F,UACG5D,MAAM,UACNR,0BAA2BmC,UAAOmC,8BACtB,oBAEO,kBAAXR,EACJrF,gBAACU,gBAA4B,cAAcuB,WAAW,IAEtDoD,KAMnB7D,EAAcxB,gBAACyB,gBAAa"}

package/lib/{new-components/notice → notice}/notice.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { AlertTone } from '../common-types';
+import type { AlertTone } from '../utils/common-types';
 declare type NoticeProps = {
     id?: string;
     children: React.ReactNode;

package/lib/notice/notice.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../utils/responsive-props.js"),r=require("../box/box.js"),l=require("../columns/columns.js"),n=require("../icons/alert-icon.js"),o=require("./notice.module.css.js");exports.Notice=function({id:s,children:a,tone:i}){return e.createElement(r.Box,{id:s,role:"alert","aria-live":"polite",className:[o.default.container,t.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,e.createElement(r.Box,{paddingY:"xsmall"},a))))};
+//# sourceMappingURL=notice.js.map

package/lib/notice/notice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notice.js","sources":["../../src/notice/notice.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport { Columns, Column } from '../columns'\nimport { AlertIcon } from '../icons/alert-icon'\n\nimport type { AlertTone } from '../utils/common-types'\n\nimport styles from './notice.module.css'\n\ntype NoticeProps = {\n    id?: string\n    children: React.ReactNode\n    tone: AlertTone\n}\n\nfunction Notice({ id, children, tone }: NoticeProps) {\n    return (\n        <Box\n            id={id}\n            role=\"alert\"\n            aria-live=\"polite\"\n            className={[styles.container, getClassNames(styles, 'tone', tone)]}\n        >\n            <Columns space=\"small\" alignY=\"top\">\n                <Column width=\"content\">\n                    <AlertIcon tone={tone} />\n                </Column>\n                <Column>\n                    <Box paddingY=\"xsmall\">{children}</Box>\n                </Column>\n            </Columns>\n        </Box>\n    )\n}\n\nexport { Notice }\nexport type { NoticeProps }\n"],"names":["id","children","tone","React","Box","role","className","styles","container","getClassNames","Columns","space","alignY","Column","width","AlertIcon","paddingY"],"mappings":"0RAgBA,UAAgBA,GAAEA,EAAFC,SAAMA,EAANC,KAAgBA,IAC5B,OACIC,gBAACC,OACGJ,GAAIA,EACJK,KAAK,oBACK,SACVC,UAAW,CAACC,UAAOC,UAAWC,gBAAcF,UAAQ,OAAQL,KAE5DC,gBAACO,WAAQC,MAAM,QAAQC,OAAO,OAC1BT,gBAACU,UAAOC,MAAM,WACVX,gBAACY,aAAUb,KAAMA,KAErBC,gBAACU,cACGV,gBAACC,OAAIY,SAAS,UAAUf"}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"password-field.js","sources":["../../src/password-field/password-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useForkRef } from 'ariakit-react-utils'\nimport { Tooltip } from '../tooltip'\nimport { BaseField, BaseFieldVariantProps } from '../base-field'\nimport { Box } from '../box'\nimport { useId } from '../utils/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    BaseFieldVariantProps & {\n        togglePasswordLabel?: string\n    }\n\nconst PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(function PasswordField(\n    {\n        variant = 'default',\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\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            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            message={message}\n            tone={tone}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box\n                    display=\"flex\"\n                    alignItems=\"center\"\n                    className={[\n                        styles.inputWrapper,\n                        textFieldStyles.inputWrapper,\n                        tone === 'error' ? textFieldStyles.error : null,\n                        variant === 'bordered' ? textFieldStyles.bordered : null,\n                    ]}\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","variant","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","togglePasswordLabel","hidden","aria-describedby","ariaDescribedBy","props","id","useId","internalRef","inputRef","useForkRef","isPasswordVisible","setPasswordVisible","togglePasswordVisibility","v","current","focus","BaseField","extraProps","Box","display","alignItems","className","styles","inputWrapper","textFieldStyles","error","bordered","type","Tooltip","content","onClick","tabIndex","PasswordVisibleIcon","PasswordHiddenIcon"],"mappings":"uqBAoBsBA,cAAuD,WAezEC,OAdAC,QACIA,EAAU,UADdC,MAEIA,EAFJC,eAGIA,EAHJC,eAIIA,EAJJC,KAKIA,EALJC,QAMIA,EANJC,KAOIA,EAPJC,SAQIA,EARJC,oBASIA,EAAsB,6BAT1BC,OAUIA,EACAC,mBAAoBC,KACjBC,iCAIP,MAAMC,EAAKC,QAAMF,EAAMC,IACjBE,EAAcjB,SAA+B,MAC7CkB,EAAWC,aAAWF,EAAahB,IAElCmB,EAAmBC,GAAsBrB,YAAe,GAE/D,SAASsB,UACLD,EAAoBE,IAAOA,YAC3BN,EAAYO,YAASC,QAGzB,OACIzB,gBAAC0B,aACGxB,QAASA,EACTa,GAAIA,EACJZ,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNC,QAASA,EACTC,KAAMA,EACNC,SAAUA,EACVE,OAAQA,qBACUE,GAEhBc,GACE3B,gBAAC4B,OACGC,QAAQ,OACRC,WAAW,SACXC,UAAW,CACPC,UAAOC,aACPC,UAAgBD,aACP,UAATzB,EAAmB0B,UAAgBC,MAAQ,KAC/B,aAAZjC,EAAyBgC,UAAgBE,SAAW,OAGxDpC,2EACQc,GACAa,OACJ1B,IAAKiB,EACLmB,KAAMjB,EAAoB,OAAS,cAEvCpB,gBAACsC,WAAQC,QAAS7B,GACdV,0BACIqC,KAAK,SACLG,QAASlB,eACGZ,EACZ+B,UAAW,GAGPzC,gBADHoB,EACIsB,sBAEAC"}

package/lib/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"),t=require("../base-field/base-field.js"),l=require("./select-field.module.css.js");const i=["variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","children","hidden","aria-describedby"];function d(a){return r.createElement("svg",e.objectSpread2({width:"16",height:"16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a),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){let{variant:o="default",id:c,label:b,secondaryLabel:u,auxiliaryLabel:h,hint:p,message:f,tone:m,maxWidth:x,children:j,hidden:y,"aria-describedby":g}=n,v=e.objectWithoutProperties(n,i);return r.createElement(t.BaseField,{variant:o,id:c,label:b,secondaryLabel:u,auxiliaryLabel:h,hint:p,message:f,tone:m,maxWidth:x,hidden:y,"aria-describedby":g},t=>r.createElement(a.Box,{"data-testid":"select-wrapper",className:[l.default.selectWrapper,"error"===m?l.default.error:null,"bordered"===o?l.default.bordered:null]},r.createElement("select",e.objectSpread2(e.objectSpread2(e.objectSpread2({},v),t),{},{ref:s}),j),r.createElement(d,{"aria-hidden":!0})))}));
+//# sourceMappingURL=select-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-field.js","sources":["../../src/select-field/select-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './select-field.module.css'\n\ntype SelectFieldProps = FieldComponentProps<HTMLSelectElement> & BaseFieldVariantProps\n\nconst SelectField = React.forwardRef<HTMLSelectElement, SelectFieldProps>(function SelectField(\n    {\n        variant = 'default',\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        maxWidth,\n        children,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            message={message}\n            tone={tone}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box\n                    data-testid=\"select-wrapper\"\n                    className={[\n                        styles.selectWrapper,\n                        tone === 'error' ? styles.error : null,\n                        variant === 'bordered' ? styles.bordered : null,\n                    ]}\n                >\n                    <select {...props} {...extraProps} ref={ref}>\n                        {children}\n                    </select>\n                    <SelectChevron aria-hidden />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nfunction SelectChevron(props: JSX.IntrinsicElements['svg']) {\n    return (\n        <svg width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n            <path\n                d=\"M11.646 5.646a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.647z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\nexport { SelectField }\nexport type { SelectFieldProps }\n"],"names":["SelectChevron","props","React","width","height","fill","xmlns","d","ref","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","children","hidden","aria-describedby","ariaDescribedBy","BaseField","extraProps","Box","className","styles","selectWrapper","error","bordered"],"mappings":"4YA0DA,SAASA,EAAcC,GACnB,OACIC,uCAAKC,MAAM,KAAKC,OAAO,KAAKC,KAAK,OAAOC,MAAM,8BAAiCL,GAC3EC,wBACIK,EAAE,0GACFF,KAAK,sCAxDDH,cAAsD,WAgBtEM,OAfAC,QACIA,EAAU,UADdC,GAEIA,EAFJC,MAGIA,EAHJC,eAIIA,EAJJC,eAKIA,EALJC,KAMIA,EANJC,QAOIA,EAPJC,KAQIA,EARJC,SASIA,EATJC,SAUIA,EAVJC,OAWIA,EACAC,mBAAoBC,KACjBpB,iCAIP,OACIC,gBAACoB,aACGb,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNC,QAASA,EACTC,KAAMA,EACNC,SAAUA,EACVE,OAAQA,qBACUE,GAEhBE,GACErB,gBAACsB,qBACe,iBACZC,UAAW,CACPC,UAAOC,cACE,UAATX,EAAmBU,UAAOE,MAAQ,KACtB,aAAZnB,EAAyBiB,UAAOG,SAAW,OAG/C3B,4EAAYD,GAAWsB,OAAYf,IAAKA,IACnCU,GAELhB,gBAACF"}

package/lib/spinner/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","sources":["../../src/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\n            aria-hidden\n            width={size}\n            height={size}\n            viewBox=\"0 0 24 24\"\n            className={styles.svg}\n            data-chromatic=\"ignore\"\n        >\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,UAAiBA,KAAEA,EAAO,KACtB,OACIC,wCAEIC,MAAOF,EACPG,OAAQH,EACRI,QAAQ,YACRC,UAAWC,UAAOC,qBACH,UAEfN,qBAAGO,KAAK,OAAOC,SAAS,WACpBR,wBACII,UAAWC,UAAOI,KAClBC,EAAE,iJAENV,wBACII,UAAWC,UAAOE,KAClBG,EAAE"}

package/lib/{new-components/stack → stack}/stack.d.ts

@@ -1,5 +1,5 @@
-import type { ResponsiveProp } from '../responsive-props';
-import type { DividerWeight, Space } from '../common-types';
+import type { ResponsiveProp } from '../utils/responsive-props';
+import type { DividerWeight, Space } from '../utils/common-types';
 import type { ReusableBoxProps } from '../box';
 declare type Align = 'start' | 'center' | 'end';
 interface StackProps extends ReusableBoxProps {
@@ -10,6 +10,6 @@ interface StackProps extends ReusableBoxProps {
     /** 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">;
+declare const Stack: import("../utils/polymorphism").PolymorphicComponent<"div", StackProps, "obfuscateClassName">;
 export type { StackProps };
 export { Stack };

package/lib/{new-components/stack → 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"),n=require("../box/box.js"),a=require("../divider/divider.js"),o=e(require("react-keyed-flatten-children"));const s=["as","space","align","dividers","width","children","exceptionallySetClassName"];exports.Stack=i.polymorphicComponent((function(e,i){let{as:c,space:d,align:p,dividers:u="none",width:m="full",children:f,exceptionallySetClassName:v}=e,h=r.objectWithoutProperties(e,s);const x=void 0===p?void 0:l.mapResponsiveProp(p,e=>"start"===e?"flexStart":"end"===e?"flexEnd":"center");return t.createElement(n.Box,r.objectSpread2(r.objectSpread2({},h),{},{display:"flex",flexDirection:"column",width:m,alignItems:x,gap:d,as:c,className:v,ref:i}),"none"!==u?t.Children.map(o(f),(e,r)=>r>0?t.createElement(t.Fragment,null,t.createElement(a.Divider,{weight:u}),e):e):f)}));
+"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("../utils/responsive-props.js"),n=require("../box/box.js"),a=require("../divider/divider.js"),s=e(require("react-keyed-flatten-children"));const o=["as","space","align","dividers","width","children","exceptionallySetClassName"];exports.Stack=i.polymorphicComponent((function(e,i){let{as:c,space:d,align:p,dividers:u="none",width:m="full",children:f,exceptionallySetClassName:v}=e,h=r.objectWithoutProperties(e,o);const x=void 0===p?void 0:l.mapResponsiveProp(p,e=>"start"===e?"flexStart":"end"===e?"flexEnd":"center");return t.createElement(n.Box,r.objectSpread2(r.objectSpread2({},h),{},{display:"flex",flexDirection:"column",width:m,alignItems:x,gap:d,as:c,className:v,ref:i}),"none"!==u?t.Children.map(s(f),(e,r)=>r>0?t.createElement(t.Fragment,null,t.createElement(a.Divider,{weight:u}),e):e):f)}));
 //# sourceMappingURL=stack.js.map

package/lib/stack/stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.js","sources":["../../src/stack/stack.tsx"],"sourcesContent":["import * as React from 'react'\nimport flattenChildren from 'react-keyed-flatten-children'\nimport { polymorphicComponent } from '../utils/polymorphism'\nimport { mapResponsiveProp } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport { Divider } from '../divider'\n\nimport type { ResponsiveProp } from '../utils/responsive-props'\nimport type { DividerWeight, Space } from '../utils/common-types'\nimport type { BoxProps, ReusableBoxProps } from '../box'\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,\n        dividers = 'none',\n        width = 'full',\n        children,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    const alignItems: BoxProps['alignItems'] =\n        align === undefined\n            ? undefined\n            : mapResponsiveProp(align, (align) =>\n                  align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center',\n              )\n\n    return (\n        <Box\n            {...props}\n            display=\"flex\"\n            flexDirection=\"column\"\n            width={width}\n            alignItems={alignItems}\n            gap={space}\n            as={as}\n            className={exceptionallySetClassName}\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","width","children","exceptionallySetClassName","props","alignItems","undefined","mapResponsiveProp","React","Box","display","flexDirection","gap","className","map","flattenChildren","child","index","Divider","weight"],"mappings":"ggBAsBcA,wBAAwC,WAWlDC,OAVAC,GACIA,EADJC,MAEIA,EAFJC,MAGIA,EAHJC,SAIIA,EAAW,OAJfC,MAKIA,EAAQ,OALZC,SAMIA,EANJC,0BAOIA,KACGC,iCAIP,MAAMC,OACQC,IAAVP,OACMO,EACAC,oBAAkBR,EAAQA,GACZ,UAAVA,EAAoB,YAAwB,QAAVA,EAAkB,UAAY,UAG9E,OACIS,gBAACC,yCACOL,OACJM,QAAQ,OACRC,cAAc,SACdV,MAAOA,EACPI,WAAYA,EACZO,IAAKd,EACLD,GAAIA,EACJgB,UAAWV,EACXP,IAAKA,IAES,SAAbI,EACKQ,WAAeM,IAAIC,EAAgBb,GAAW,CAACc,EAAOC,IAClDA,EAAQ,EACJT,gCACIA,gBAACU,WAAQC,OAAQnB,IAChBgB,GAGLA,GAGRd"}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch-field.js","sources":["../../src/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 '../utils/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","id","originalId","aria-describedby","originalAriaDescribedBy","aria-label","originalAriaLabel","aria-labelledby","originalAriaLabelledby","onChange","props","useId","hintId","ariaDescribedBy","undefined","ariaLabel","ariaLabelledBy","keyFocused","setKeyFocused","checkedState","setChecked","checked","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":"0iBA2BoBA,cAAqD,WAcrEC,iBAbAC,MACIA,EADJC,KAEIA,EAFJC,SAGIA,GAAW,EAHfC,OAIIA,EAJJC,eAKIA,EACAC,GAAIC,EACJC,mBAAoBC,EACpBC,aAAcC,EACdC,kBAAmBC,EATvBC,SAUIA,KACGC,iCAIP,MAAMT,EAAKU,QAAMT,GACXU,EAASD,UAETE,QAAkBT,EAAAA,EAA4BP,EAAOe,OAASE,EAC9DC,QAAYT,EAAAA,OAAqBQ,EACjCE,QAAiBR,EAAAA,OAA0BM,GAE1CG,EAAYC,GAAiBxB,YAAe,IAC5CyB,EAAcC,GAAc1B,6BAAegB,EAAMW,WAAWrB,OAC7DsB,WAAYZ,EAAMW,WAAWF,EAEnC,OACIzB,gBAAC6B,SAAMC,MAAM,QAAQzB,OAAQA,GACzBL,gBAAC+B,OACGC,UAAW,CACPC,UAAOC,UACP9B,EAAW6B,UAAO7B,SAAW,KAC7BwB,EAAYK,UAAON,QAAU,KAC7BJ,EAAaU,UAAOV,WAAa,MAErCY,GAAG,QACHC,QAAQ,OACRC,WAAW,UAEXrC,gBAAC+B,OACGO,SAAS,WACTF,QAAQ,cACRG,SAAS,UACTC,YAAY,QACZC,WAAY,EACZT,UAAWC,UAAOS,QAElB1C,gBAAC2C,sBACG3C,2DACQgB,OACJT,GAAIA,EACJqC,KAAK,WACLxC,SAAUA,qBACQe,eACNE,oBACKC,EACjBrB,IAAKA,EACL0B,QAASC,EACTb,SAAW8B,UACP9B,GAAAA,EAAW8B,GACNA,EAAMC,kBACPpB,EAAWmB,EAAME,cAAcpB,UAGvCqB,OAASH,IACLrB,GAAc,SACdR,SAAAA,EAAOgC,QAAPhC,EAAOgC,OAASH,IAEpBI,QAAUJ,IACNrB,GAAc,SACdR,SAAAA,EAAOiC,SAAPjC,EAAOiC,QAAUJ,QAI7B7C,wBAAMgC,UAAWC,UAAOiB,UAE5BlD,gBAACmD,QAAKC,0BAA2BnB,UAAO/B,OAAQA,IAEnDC,EAAOH,gBAACqD,aAAU9C,GAAIW,GAASf,GAAoB"}

package/lib/{new-components/tabs → tabs}/tabs.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Space } from '../common-types';
+import type { Space } from '../utils/common-types';
 declare type TabsProps = {
     /** The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>` components */
     children: React.ReactNode;
@@ -35,7 +35,7 @@ declare type TabProps = {
 /**
  * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.
  */
-declare const Tab: import("../../utils/polymorphism").PolymorphicComponent<"button", TabProps, "obfuscateClassName">;
+declare const Tab: import("../utils/polymorphism").PolymorphicComponent<"button", TabProps, "obfuscateClassName">;
 declare type TabListProps = ({
     /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */
     'aria-label': string;
@@ -79,7 +79,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 const TabPanel: import("../../utils/polymorphism").PolymorphicComponent<"div", TabPanelProps, "omitClassName">;
+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

package/lib/tabs/tabs.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"),a=require("react"),r=(e(a),e(require("classnames"))),n=require("../utils/polymorphism.js"),l=require("../box/box.js"),s=require("../inline/inline.js"),o=require("ariakit/tab"),i=require("../hooks/use-previous/use-previous.js"),c=require("./tabs.module.css.js");const u=["as","children","id","exceptionallySetClassName"],d=["children","space"],p=["children","id","as","render"],b=a.createContext(null),f=n.polymorphicComponent((function(e,n){let{as:l,children:s,id:i,exceptionallySetClassName:d}=e,p=t.objectWithoutProperties(e,u);const f=a.useContext(b);if(!f)return null;const{variant:m,tabState:x}=f;return a.createElement(o.Tab,t.objectSpread2(t.objectSpread2({},p),{},{as:l,className:r(d,c.default.tab,c.default["tab-"+m]),id:i,state:x,ref:n}),s)})),m=n.polymorphicComponent((function(e,r){let{children:n,id:l,as:s,render:i="always"}=e,c=t.objectWithoutProperties(e,p);const u=a.useContext(b),[d,f]=a.useState(!1),m=(null==u?void 0:u.tabState.selectedId)===l;if(a.useEffect((function(){!d&&m&&f(!0)}),[d,m]),!u)return null;const{tabState:x}=u;return"always"===i||"active"===i&&m||"lazy"===i&&(m||d)?a.createElement(o.TabPanel,t.objectSpread2(t.objectSpread2({tabId:l},c),{},{state:x,as:s,ref:r}),n):null}));exports.Tab=f,exports.TabAwareSlot=function({children:e}){const t=a.useContext(b);return t?e({selectedId:null==t?void 0:t.tabState.selectedId}):null},exports.TabList=function(e){let{children:r,space:n="xsmall"}=e,i=t.objectWithoutProperties(e,d);const u=a.useContext(b);if(!u)return null;const{tabState:p,variant:f}=u;return a.createElement(l.Box,null,a.createElement(o.TabList,t.objectSpread2({state:p,as:l.Box,position:"relative",width:"maxContent"},i),a.createElement(l.Box,{className:[c.default.track,c.default["track-"+f]]}),a.createElement(s.Inline,{space:n},r)))},exports.TabPanel=m,exports.Tabs=function({children:e,selectedId:t,defaultSelectedId:r,variant:n="neutral",onSelectedIdChange:l}){const s=o.useTabState({selectedId:t,setSelectedId:l}),c=i.usePrevious(r),{selectedId:u,select:d}=s;a.useEffect((function(){t||r===c||r===u||void 0===r||d(r)}),[t,r,u,d,c]);const p=a.useMemo((function(){return{tabState:s,variant:n}}),[n,s]);return a.createElement(b.Provider,{value:p},e)};
+//# sourceMappingURL=tabs.js.map

package/lib/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sources":["../../src/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    TabState,\n} from 'ariakit/tab'\nimport { Inline } from '../inline'\nimport { usePrevious } from '../hooks/use-previous'\nimport { polymorphicComponent } from '../utils/polymorphism'\nimport type { Space } from '../utils/common-types'\n\nimport styles from './tabs.module.css'\nimport { Box } from '../box'\n\ntype TabsContextValue = {\n    tabState: TabState\n} & Required<Pick<TabsProps, 'variant'>>\n\nconst TabsContext = React.createContext<TabsContextValue | null>(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 look and feel of the tabs.\n     */\n    variant?: 'themed' | 'neutral'\n    /**\n     * The id of the selected tab. Assigning a value makes this a\n     * controlled component\n     */\n    selectedId?: string | null\n    /**\n     * The tab to initially select. This can be used if the component should not\n     * be a controlled component but needs to have a tab selected\n     */\n    defaultSelectedId?: string | null\n    /**\n     * Called with the tab id when a tab is selected\n     */\n    onSelectedIdChange?: (selectedId: string | null | undefined) => void\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    defaultSelectedId,\n    variant = 'neutral',\n    onSelectedIdChange,\n}: TabsProps): React.ReactElement {\n    const tabState = useTabState({ selectedId, setSelectedId: onSelectedIdChange })\n    const previousDefaultSelectedId = usePrevious(defaultSelectedId)\n    const { selectedId: actualSelectedId, select } = tabState\n\n    React.useEffect(\n        function selectDefaultTab() {\n            if (\n                !selectedId &&\n                defaultSelectedId !== previousDefaultSelectedId &&\n                defaultSelectedId !== actualSelectedId &&\n                defaultSelectedId !== undefined\n            ) {\n                select(defaultSelectedId)\n            }\n        },\n        [selectedId, defaultSelectedId, actualSelectedId, select, previousDefaultSelectedId],\n    )\n\n    const memoizedTabState = React.useMemo(\n        function memoizeTabState() {\n            return {\n                tabState,\n                variant,\n            }\n        },\n        [variant, 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 */\nconst Tab = polymorphicComponent<'button', TabProps>(function Tab(\n    { as, children, id, exceptionallySetClassName, ...props },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { variant, tabState } = tabContextValue\n\n    return (\n        <BaseTab\n            {...props}\n            as={as}\n            className={classNames(exceptionallySetClassName, styles.tab, styles[`tab-${variant}`])}\n            id={id}\n            state={tabState}\n            ref={ref}\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?: Space\n}\n\n/**\n * A component used to group `<Tab>` elements together.\n */\nfunction TabList({\n    children,\n    space = 'xsmall',\n    ...props\n}: TabListProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabState, variant } = tabContextValue\n\n    return (\n        // The extra <Box> prevents <Inline>'s negative margins from collapsing when used in a flex container\n        // which will render the track with the wrong height\n        <Box>\n            <BaseTabList\n                state={tabState}\n                as={Box}\n                position=\"relative\"\n                width=\"maxContent\"\n                {...props}\n            >\n                <Box className={[styles.track, styles[`track-${variant}`]]} />\n                <Inline space={space}>{children}</Inline>\n            </BaseTabList>\n        </Box>\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 */\nconst TabPanel = polymorphicComponent<'div', TabPanelProps, 'omitClassName'>(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?.tabState.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 { tabState } = tabContextValue\n    const shouldRender =\n        render === 'always' ||\n        (render === 'active' && tabIsActive) ||\n        (render === 'lazy' && (tabIsActive || tabRendered))\n\n    return shouldRender ? (\n        <BaseTabPanel tabId={id} {...props} state={tabState} as={as} ref={ref}>\n            {children}\n        </BaseTabPanel>\n    ) : null\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    return tabContextValue ? children({ selectedId: tabContextValue?.tabState.selectedId }) : null\n}\n\nexport { Tab, Tabs, TabList, TabPanel, TabAwareSlot }\n"],"names":["TabsContext","React","Tab","polymorphicComponent","ref","as","children","id","exceptionallySetClassName","props","tabContextValue","variant","tabState","BaseTab","className","classNames","styles","tab","state","TabPanel","render","tabRendered","setTabRendered","tabIsActive","selectedId","BaseTabPanel","tabId","space","Box","BaseTabList","position","width","track","Inline","defaultSelectedId","onSelectedIdChange","useTabState","setSelectedId","previousDefaultSelectedId","usePrevious","actualSelectedId","select","undefined","memoizedTabState","Provider","value"],"mappings":"6jBAqBMA,EAAcC,gBAA6C,MA6E3DC,EAAMC,wBAAyC,WAEjDC,OADAC,GAAEA,EAAFC,SAAMA,EAANC,GAAgBA,EAAhBC,0BAAoBA,KAA8BC,iCAGlD,MAAMC,EAAkBT,aAAiBD,GAEzC,IAAKU,EACD,OAAO,KAGX,MAAMC,QAAEA,EAAFC,SAAWA,GAAaF,EAE9B,OACIT,gBAACY,yCACOJ,OACJJ,GAAIA,EACJS,UAAWC,EAAWP,EAA2BQ,UAAOC,IAAKD,iBAAcL,IAC3EJ,GAAIA,EACJW,MAAON,EACPR,IAAKA,IAEJE,MAuFPa,EAAWhB,wBAA4D,WAEzEC,OADAE,SAAEA,EAAFC,GAAYA,EAAZF,GAAgBA,EAAhBe,OAAoBA,EAAS,YAAaX,iCAG1C,MAAMC,EAAkBT,aAAiBD,IAClCqB,EAAaC,GAAkBrB,YAAe,GAC/CsB,SAAcb,SAAAA,EAAiBE,SAASY,cAAejB,EAW7D,GATAN,aACI,YACSoB,GAAeE,GAChBD,GAAe,KAGvB,CAACD,EAAaE,KAGbb,EACD,OAAO,KAGX,MAAME,SAAEA,GAAaF,EAMrB,MAJe,WAAXU,GACY,WAAXA,GAAuBG,GACZ,SAAXH,IAAsBG,GAAeF,GAGtCpB,gBAACwB,4CAAaC,MAAOnB,GAAQE,OAAOS,MAAON,EAAUP,GAAIA,EAAID,IAAKA,IAC7DE,GAEL,2CAeR,UAAsBA,SAAEA,IACpB,MAAMI,EAAkBT,aAAiBD,GACzC,OAAOU,EAAkBJ,EAAS,CAAEkB,iBAAYd,SAAAA,EAAiBE,SAASY,aAAgB,sBAjG9F,gBAAiBlB,SACbA,EADaqB,MAEbA,EAAQ,YACLlB,iCAEH,MAAMC,EAAkBT,aAAiBD,GAEzC,IAAKU,EACD,OAAO,KAGX,MAAME,SAAEA,EAAFD,QAAYA,GAAYD,EAE9B,OAGIT,gBAAC2B,WACG3B,gBAAC4B,2BACGX,MAAON,EACPP,GAAIuB,MACJE,SAAS,WACTC,MAAM,cACFtB,GAEJR,gBAAC2B,OAAId,UAAW,CAACE,UAAOgB,MAAOhB,mBAAgBL,MAC/CV,gBAACgC,UAAON,MAAOA,GAAQrB,sCArIvC,UAAcA,SACVA,EADUkB,WAEVA,EAFUU,kBAGVA,EAHUvB,QAIVA,EAAU,UAJAwB,mBAKVA,IAEA,MAAMvB,EAAWwB,cAAY,CAAEZ,WAAAA,EAAYa,cAAeF,IACpDG,EAA4BC,cAAYL,IACtCV,WAAYgB,EAAdC,OAAgCA,GAAW7B,EAEjDX,aACI,WAESuB,GACDU,IAAsBI,GACtBJ,IAAsBM,QACAE,IAAtBR,GAEAO,EAAOP,KAGf,CAACV,EAAYU,EAAmBM,EAAkBC,EAAQH,IAG9D,MAAMK,EAAmB1C,WACrB,WACI,MAAO,CACHW,SAAAA,EACAD,QAAAA,KAGR,CAACA,EAASC,IAGd,OAAOX,gBAACD,EAAY4C,UAASC,MAAOF,GAAmBrC"}

package/lib/{new-components/text → text}/text.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Tone } from '../common-types';
+import type { Tone } from '../utils/common-types';
 import type { BoxProps } from '../box';
 declare type TextProps = {
     children: React.ReactNode;
@@ -42,6 +42,6 @@ declare type TextProps = {
      */
     align?: BoxProps['textAlign'];
 };
-declare const Text: import("../../utils/polymorphism").PolymorphicComponent<"div", TextProps, "obfuscateClassName">;
+declare const Text: import("../utils/polymorphism").PolymorphicComponent<"div", TextProps, "obfuscateClassName">;
 export type { TextProps };
 export { Text };

package/lib/{new-components/text → text}/text.js

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

package/lib/text/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","sources":["../../src/text/text.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport { polymorphicComponent } from '../utils/polymorphism'\n\nimport type { Tone } from '../utils/common-types'\nimport type { BoxProps } from '../box'\n\nimport styles from './text.module.css'\n\ntype TextProps = {\n    children: React.ReactNode\n    /**\n     * The size of the text.\n     *\n     * The supported values, from smaller size to larger size, are:\n     * 'caption', 'copy', 'body', and 'subtitle'\n     *\n     * @default 'body'\n     */\n    size?: 'caption' | 'copy' | 'body' | 'subtitle'\n    /**\n     * The weight of the text font.\n     *\n     * @default 'regular'\n     */\n    weight?: 'regular' | 'semibold' | 'bold'\n    /**\n     * The tone (semantic color) of the text.\n     *\n     * @default 'normal'\n     */\n    tone?: Tone\n    /**\n     * Used to truncate the text to a given number of lines.\n     *\n     * It will add an ellipsis (`…`) to the text at the end of the last line, only if the text was\n     * truncated. If the text fits without it being truncated, no ellipsis is added.\n     *\n     * By default, the text is not truncated at all, no matter how many lines it takes to render it.\n     *\n     * @default undefined\n     */\n    lineClamp?: 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5'\n    /**\n     * How to align the text horizontally.\n     *\n     * @default 'start'\n     */\n    align?: BoxProps['textAlign']\n}\n\nconst Text = polymorphicComponent<'div', TextProps>(function Text(\n    {\n        as,\n        size = 'body',\n        weight = 'regular',\n        tone = 'normal',\n        align,\n        children,\n        lineClamp,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    const lineClampMultipleLines =\n        typeof lineClamp === 'string' ? Number(lineClamp) > 1 : (lineClamp ?? 1) > 1\n\n    return (\n        <Box\n            {...props}\n            as={as}\n            className={[\n                exceptionallySetClassName,\n                styles.text,\n                size !== 'body' ? getClassNames(styles, 'size', size) : null,\n                weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null,\n                tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null,\n                lineClampMultipleLines ? styles.lineClampMultipleLines : null,\n                lineClamp ? getClassNames(styles, 'lineClamp', lineClamp.toString()) : null,\n            ]}\n            textAlign={align}\n            // Prevents emojis from being cut-off\n            // See https://github.com/Doist/reactist/pull/528\n            paddingRight={lineClamp ? 'xsmall' : undefined}\n            ref={ref}\n        >\n            {children}\n        </Box>\n    )\n})\n\nexport type { TextProps }\nexport { Text }\n"],"names":["polymorphicComponent","ref","as","size","weight","tone","align","children","lineClamp","exceptionallySetClassName","props","lineClampMultipleLines","Number","React","Box","className","styles","text","getClassNames","toString","textAlign","paddingRight","undefined"],"mappings":"4YAoDaA,wBAAuC,WAYhDC,OAXAC,GACIA,EADJC,KAEIA,EAAO,OAFXC,OAGIA,EAAS,UAHbC,KAIIA,EAAO,SAJXC,MAKIA,EALJC,SAMIA,EANJC,UAOIA,EAPJC,0BAQIA,KACGC,iCAIP,MAAMC,EACmB,iBAAdH,EAAyBI,OAAOJ,GAAa,SAAKA,EAAAA,EAAa,GAAK,EAE/E,OACIK,gBAACC,yCACOJ,OACJR,GAAIA,EACJa,UAAW,CACPN,EACAO,UAAOC,KACE,SAATd,EAAkBe,gBAAcF,UAAQ,OAAQb,GAAQ,KAC7C,YAAXC,EAAuBc,gBAAcF,UAAQ,SAAUZ,GAAU,KACxD,WAATC,EAAoBa,gBAAcF,UAAQ,OAAQX,GAAQ,KAC1DM,EAAyBK,UAAOL,uBAAyB,KACzDH,EAAYU,gBAAcF,UAAQ,YAAaR,EAAUW,YAAc,MAE3EC,UAAWd,EAGXe,aAAcb,EAAY,cAAWc,EACrCrB,IAAKA,IAEJM"}

package/lib/text-area/text-area.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),r=require("../box/box.js"),t=require("../base-field/base-field.js"),i=require("use-callback-ref"),l=require("./text-area.module.css.js");const n=["variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","hidden","aria-describedby","rows","autoExpand"];exports.TextArea=a.forwardRef((function(d,s){let{variant:u="default",id:o,label:c,secondaryLabel:b,auxiliaryLabel:f,hint:x,message:p,tone:m,maxWidth:h,hidden:v,"aria-describedby":y,rows:j,autoExpand:E=!1}=d,L=e.objectWithoutProperties(d,n);const g=a.useRef(null),q=a.useRef(null),w=i.useMergeRefs([s,q]);return a.useEffect((function(){const e=g.current;function a(a){e&&(e.dataset.replicatedValue=a.currentTarget.value)}const r=q.current;if(r&&E)return r.addEventListener("input",a),()=>r.removeEventListener("input",a)}),[E]),a.createElement(t.BaseField,{variant:u,id:o,label:c,secondaryLabel:b,auxiliaryLabel:f,hint:x,message:p,tone:m,hidden:v,"aria-describedby":y,className:[l.default.textAreaContainer,"error"===m?l.default.error:null,"bordered"===u?l.default.bordered:null],maxWidth:h},t=>a.createElement(r.Box,{width:"full",display:"flex",className:l.default.innerContainer,ref:g},a.createElement("textarea",e.objectSpread2(e.objectSpread2(e.objectSpread2({},L),t),{},{ref:w,rows:j,className:E?l.default.autoExpand:void 0}))))}));
+//# sourceMappingURL=text-area.js.map

package/lib/text-area/text-area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-area.js","sources":["../../src/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useMergeRefs } from 'use-callback-ref'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ntype TextAreaProps = FieldComponentProps<HTMLTextAreaElement> &\n    BaseFieldVariantProps & {\n        /**\n         * The number of visible text lines for the text area.\n         *\n         * If it is specified, it must be a positive integer. If it is not specified, the default\n         * value is 2 (set by the browser).\n         *\n         * When `autoExpand` is true, this value serves the purpose of specifying the minimum number\n         * of rows that the textarea will shrink to when the content is not large enough to make it\n         * expand.\n         *\n         * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows\n         */\n        rows?: number\n        /**\n         * If `true`, the textarea will auto-expand or shrink vertically to fit the content.\n         */\n        autoExpand?: boolean\n    }\n\nconst TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(\n    {\n        variant = 'default',\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        maxWidth,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        rows,\n        autoExpand = false,\n        ...props\n    },\n    ref,\n) {\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const internalRef = React.useRef<HTMLTextAreaElement>(null)\n    const combinedRef = useMergeRefs([ref, internalRef])\n\n    React.useEffect(\n        function setupAutoExpand() {\n            const containerElement = containerRef.current\n            function handleInput(event: Event) {\n                if (containerElement) {\n                    containerElement.dataset.replicatedValue = (event.currentTarget as HTMLTextAreaElement).value\n                }\n            }\n\n            const textAreaElement = internalRef.current\n            if (!textAreaElement || !autoExpand) return undefined\n            textAreaElement.addEventListener('input', handleInput)\n            return () => textAreaElement.removeEventListener('input', handleInput)\n        },\n        [autoExpand],\n    )\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            message={message}\n            tone={tone}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n            className={[\n                styles.textAreaContainer,\n                tone === 'error' ? styles.error : null,\n                variant === 'bordered' ? styles.bordered : null,\n            ]}\n            maxWidth={maxWidth}\n        >\n            {(extraProps) => (\n                <Box\n                    width=\"full\"\n                    display=\"flex\"\n                    className={styles.innerContainer}\n                    ref={containerRef}\n                >\n                    <textarea\n                        {...props}\n                        {...extraProps}\n                        ref={combinedRef}\n                        rows={rows}\n                        className={autoExpand ? styles.autoExpand : undefined}\n                    />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["React","ref","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","hidden","aria-describedby","ariaDescribedBy","rows","autoExpand","props","containerRef","internalRef","combinedRef","useMergeRefs","containerElement","current","handleInput","event","dataset","replicatedValue","currentTarget","value","textAreaElement","addEventListener","removeEventListener","BaseField","className","styles","textAreaContainer","error","bordered","extraProps","Box","width","display","innerContainer","undefined"],"mappings":"icA2BiBA,cAAqD,WAiBlEC,OAhBAC,QACIA,EAAU,UADdC,GAEIA,EAFJC,MAGIA,EAHJC,eAIIA,EAJJC,eAKIA,EALJC,KAMIA,EANJC,QAOIA,EAPJC,KAQIA,EARJC,SASIA,EATJC,OAUIA,EACAC,mBAAoBC,EAXxBC,KAYIA,EAZJC,WAaIA,GAAa,KACVC,iCAIP,MAAMC,EAAejB,SAA6B,MAC5CkB,EAAclB,SAAkC,MAChDmB,EAAcC,eAAa,CAACnB,EAAKiB,IAmBvC,OAjBAlB,aACI,WACI,MAAMqB,EAAmBJ,EAAaK,QACtC,SAASC,EAAYC,GACbH,IACAA,EAAiBI,QAAQC,gBAAmBF,EAAMG,cAAsCC,OAIhG,MAAMC,EAAkBX,EAAYI,QACpC,GAAKO,GAAoBd,EAEzB,OADAc,EAAgBC,iBAAiB,QAASP,GACnC,IAAMM,EAAgBE,oBAAoB,QAASR,KAE9D,CAACR,IAIDf,gBAACgC,aACG9B,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNC,QAASA,EACTC,KAAMA,EACNE,OAAQA,qBACUE,EAClBoB,UAAW,CACPC,UAAOC,kBACE,UAAT1B,EAAmByB,UAAOE,MAAQ,KACtB,aAAZlC,EAAyBgC,UAAOG,SAAW,MAE/C3B,SAAUA,GAER4B,GACEtC,gBAACuC,OACGC,MAAM,OACNC,QAAQ,OACRR,UAAWC,UAAOQ,eAClBzC,IAAKgB,GAELjB,8EACQgB,GACAsB,OACJrC,IAAKkB,EACLL,KAAMA,EACNmB,UAAWlB,EAAamB,UAAOnB,gBAAa4B"}

package/lib/text-field/text-field.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),r=require("../box/box.js"),t=require("../base-field/base-field.js"),l=require("./text-field.module.css.js"),i=require("use-callback-ref");const s=["variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","type","maxWidth","hidden","aria-describedby","startIcon"];exports.TextField=a.forwardRef((function(d,n){let{variant:u="default",id:o,label:c,secondaryLabel:b,auxiliaryLabel:f,hint:m,message:p,tone:x,type:y="text",maxWidth:h,hidden:g,"aria-describedby":j,startIcon:v}=d,L=e.objectWithoutProperties(d,s);const q=a.useRef(null),W=i.useMergeRefs([n,q]);function B(){var e;null==(e=q.current)||e.focus()}return a.createElement(t.BaseField,{variant:u,id:o,label:c,secondaryLabel:b,auxiliaryLabel:f,hint:m,message:p,tone:x,maxWidth:h,hidden:g,"aria-describedby":j},t=>a.createElement(r.Box,{display:"flex",alignItems:"center",className:[l.default.inputWrapper,"error"===x?l.default.error:null,"bordered"===u?l.default.bordered:null]},v?a.createElement(r.Box,{display:"flex",className:l.default.startIcon,onClick:B,marginRight:"-xsmall",marginLeft:"small","aria-hidden":!0},v):null,a.createElement("input",e.objectSpread2(e.objectSpread2(e.objectSpread2({},L),t),{},{type:y,ref:W}))))}));
+//# sourceMappingURL=text-field.js.map

package/lib/text-field/text-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.js","sources":["../../src/text-field/text-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-field.module.css'\nimport type { FieldComponentProps } from '../base-field'\nimport { useMergeRefs } from 'use-callback-ref'\n\ntype TextFieldType = 'email' | 'search' | 'tel' | 'text' | 'url'\n\ntype TextFieldProps = Omit<FieldComponentProps<HTMLInputElement>, 'type'> &\n    BaseFieldVariantProps & {\n        type?: TextFieldType\n        startIcon?: React.ReactChild\n    }\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(function TextField(\n    {\n        variant = 'default',\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        type = 'text',\n        maxWidth,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        startIcon,\n        ...props\n    },\n    ref,\n) {\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const combinedRef = useMergeRefs([ref, internalRef])\n\n    function focusOnIconClick() {\n        internalRef.current?.focus()\n    }\n\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            message={message}\n            tone={tone}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box\n                    display=\"flex\"\n                    alignItems=\"center\"\n                    className={[\n                        styles.inputWrapper,\n                        tone === 'error' ? styles.error : null,\n                        variant === 'bordered' ? styles.bordered : null,\n                    ]}\n                >\n                    {startIcon ? (\n                        <Box\n                            display=\"flex\"\n                            className={styles.startIcon}\n                            onClick={focusOnIconClick}\n                            marginRight=\"-xsmall\"\n                            marginLeft=\"small\"\n                            aria-hidden\n                        >\n                            {startIcon}\n                        </Box>\n                    ) : null}\n                    <input {...props} {...extraProps} type={type} ref={combinedRef} />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextField }\nexport type { TextFieldProps, TextFieldType }\n"],"names":["React","ref","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","type","maxWidth","hidden","aria-describedby","ariaDescribedBy","startIcon","props","internalRef","combinedRef","useMergeRefs","focusOnIconClick","current","focus","BaseField","extraProps","Box","display","alignItems","className","styles","inputWrapper","error","bordered","onClick","marginRight","marginLeft"],"mappings":"kcAekBA,cAAmD,WAiBjEC,OAhBAC,QACIA,EAAU,UADdC,GAEIA,EAFJC,MAGIA,EAHJC,eAIIA,EAJJC,eAKIA,EALJC,KAMIA,EANJC,QAOIA,EAPJC,KAQIA,EARJC,KASIA,EAAO,OATXC,SAUIA,EAVJC,OAWIA,EACAC,mBAAoBC,EAZxBC,UAaIA,KACGC,iCAIP,MAAMC,EAAcjB,SAA+B,MAC7CkB,EAAcC,eAAa,CAAClB,EAAKgB,IAEvC,SAASG,mBACLH,EAAYI,YAASC,QAGzB,OACItB,gBAACuB,aACGrB,QAASA,EACTC,GAAIA,EACJC,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNC,QAASA,EACTC,KAAMA,EACNE,SAAUA,EACVC,OAAQA,qBACUE,GAEhBU,GACExB,gBAACyB,OACGC,QAAQ,OACRC,WAAW,SACXC,UAAW,CACPC,UAAOC,aACE,UAATrB,EAAmBoB,UAAOE,MAAQ,KACtB,aAAZ7B,EAAyB2B,UAAOG,SAAW,OAG9CjB,EACGf,gBAACyB,OACGC,QAAQ,OACRE,UAAWC,UAAOd,UAClBkB,QAASb,EACTc,YAAY,UACZC,WAAW,0BAGVpB,GAEL,KACJf,2EAAWgB,GAAWQ,OAAYd,KAAMA,EAAMT,IAAKiB"}

package/lib/text-link/text-link.d.ts

@@ -0,0 +1,5 @@
+import type { OpenInNewTab } from '../utils/common-types';
+declare type TextLinkProps = OpenInNewTab;
+declare const TextLink: import("../utils/polymorphism").PolymorphicComponent<"a", OpenInNewTab, "obfuscateClassName">;
+export { TextLink };
+export type { TextLinkProps };

package/lib/text-link/text-link.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),t=require("../utils/polymorphism.js"),o=require("../box/box.js"),a=require("./text-link.module.css.js");const l=["as","openInNewTab","exceptionallySetClassName"];exports.TextLink=t.polymorphicComponent((function(t,s){let{as:i="a",openInNewTab:n=!1,exceptionallySetClassName:p}=t,u=e.objectWithoutProperties(t,l);return r.createElement(o.Box,e.objectSpread2(e.objectSpread2({},u),{},{as:i,display:"inline",className:[p,a.default.container],ref:s,target:n?"_blank":void 0,rel:n?"noopener noreferrer":void 0}))}));
+//# sourceMappingURL=text-link.js.map

package/lib/text-link/text-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-link.js","sources":["../../src/text-link/text-link.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { polymorphicComponent } from '../utils/polymorphism'\nimport styles from './text-link.module.css'\nimport type { OpenInNewTab } from '../utils/common-types'\n\ntype TextLinkProps = OpenInNewTab\n\nconst TextLink = polymorphicComponent<'a', TextLinkProps>(function TextLink(\n    { as = 'a', openInNewTab = false, exceptionallySetClassName, ...props },\n    ref,\n) {\n    return (\n        <Box\n            {...props}\n            as={as}\n            display=\"inline\"\n            className={[exceptionallySetClassName, styles.container]}\n            ref={ref}\n            target={openInNewTab ? '_blank' : undefined}\n            rel={openInNewTab ? 'noopener noreferrer' : undefined}\n        />\n    )\n})\n\nexport { TextLink }\nexport type { TextLinkProps }\n"],"names":["polymorphicComponent","ref","as","openInNewTab","exceptionallySetClassName","props","React","Box","display","className","styles","container","target","undefined","rel"],"mappings":"oUAQiBA,wBAAyC,WAEtDC,OADAC,GAAEA,EAAK,IAAPC,aAAYA,GAAe,EAA3BC,0BAAkCA,KAA8BC,iCAGhE,OACIC,gBAACC,yCACOF,OACJH,GAAIA,EACJM,QAAQ,SACRC,UAAW,CAACL,EAA2BM,UAAOC,WAC9CV,IAAKA,EACLW,OAAQT,EAAe,cAAWU,EAClCC,IAAKX,EAAe,2BAAwBU"}

package/lib/toast/static-toast.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("../_virtual/_rollupPluginBabelHelpers.js"),l=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,n=require("../box/box.js"),a=require("../stack/stack.js"),r=require("../button/button.js"),i=require("../icons/close-icon.js"),o=require("../text/text.js"),s=require("./toast.module.css.js");const c=["message","description","icon","action","onDismiss","dismissLabel"];function u({children:e}){return l.createElement(n.Box,{display:"flex",alignItems:"center",justifyContent:"center",marginX:"-xsmall",marginY:"-medium",className:s.default.slot},e)}exports.StaticToast=l.forwardRef((function(e,m){let{message:d,description:f,icon:b,action:p,onDismiss:x,dismissLabel:j="Close"}=e,E=t.objectWithoutProperties(e,c);return l.createElement(n.Box,t.objectSpread2({ref:m,role:"alert","aria-live":"polite",borderRadius:"full",width:"fitContent",background:"toast",display:"flex",padding:"large",alignItems:"center",className:s.default.toastContainer},E),b?l.createElement(u,null,b):null,l.createElement(n.Box,{flexGrow:1,maxWidth:"small"},f?l.createElement(a.Stack,{space:"small"},l.createElement(o.Text,{weight:"bold"},d," "),l.createElement(o.Text,null,f)):l.createElement(o.Text,null,d)),p?l.createElement(u,null,function(e){return null!=e&&"object"==typeof e&&"label"in e&&"onClick"in e&&"string"==typeof e.label&&"function"==typeof e.onClick}(p)?l.createElement(r.Button,{variant:"tertiary",size:"small",onClick:p.onClick},p.label):p):null,x?l.createElement(u,null,l.createElement(r.Button,{variant:"quaternary",size:"small",onClick:x,"aria-label":j,icon:l.createElement(i.CloseIcon,null)})):null)}));
+//# sourceMappingURL=static-toast.js.map

package/lib/toast/static-toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static-toast.js","sources":["../../src/toast/static-toast.tsx"],"sourcesContent":["import React from 'react'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Box } from '../box'\nimport { Button } from '../button'\nimport { Stack } from '../stack'\nimport { Text } from '../text'\n\nimport styles from './toast.module.css'\n\ntype ToastActionObject = {\n    label: string\n    onClick: () => void\n}\n\ntype StaticToastProps = {\n    /**\n     * The message shown in the toast.\n     */\n    message: NonNullable<React.ReactNode>\n\n    /**\n     * An optional extra description that complements the main message shown in the toast.\n     */\n    description?: React.ReactNode\n\n    /**\n     * An icon to be shown in front of the message.\n     */\n    icon?: React.ReactNode\n\n    /**\n     * The action to call when the user clicks on the dismiss button. If omitted, the dismiss button\n     * does not appear.\n     */\n    onDismiss?: () => void\n\n    /**\n     * The label for the button that dismisses the toast.\n     */\n    dismissLabel?: string\n\n    /**\n     * What to render in the action slot. Usually a button or link.\n     *\n     * You can also pass an object that containst the action label, and a function that performs the\n     * action. This is used by the toast component to render a button for you.\n     *\n     * In general, you should prefer the action object most of the time. But it is possible to pass\n     * a React element instead, if you need more control over what to render. For instance, you may\n     * want to render a link instead of a button.\n     *\n     * Keep in mind, though, that the default button rendered uses `variant=\"tertiary\"` and\n     * `size=\"small\"`. In most cases you should stick to the variants `tertiary` or `primary`, which\n     * are the ones that look better in the toast's dark background. And in all cases you should use\n     * size `small`.\n     */\n    action?: React.ReactElement | ToastActionObject\n}\n\n/**\n * A toast that shows a message, and an optional action associated with it.\n *\n * This component is generally not meant to be used directly. Most of the time you'll want to use\n * toasts generated via `useToasts` instead. However, this component is available in case you need\n * to take control of rendering a toast under different circumstances than that of notification-like\n * floating toasts.\n *\n * This component makes no assumptions outwardly about how it is positioned on the screen. That is,\n * it will not be shown floating or fixed to the viewport edges, as toasts normally show up. It only\n * provides the toast look and feel, but you are responsible for positioning it as you want.\n *\n * @see useToasts\n */\nconst StaticToast = React.forwardRef<HTMLDivElement, StaticToastProps>(function Toast(\n    { message, description, icon, action, onDismiss, dismissLabel = 'Close', ...props },\n    ref,\n) {\n    return (\n        <Box\n            ref={ref}\n            role=\"alert\"\n            aria-live=\"polite\"\n            borderRadius=\"full\"\n            width=\"fitContent\"\n            background=\"toast\"\n            display=\"flex\"\n            padding=\"large\"\n            alignItems=\"center\"\n            className={styles.toastContainer}\n            {...props}\n        >\n            {icon ? <ToastContentSlot>{icon}</ToastContentSlot> : null}\n\n            <Box flexGrow={1} maxWidth=\"small\">\n                {description ? (\n                    <Stack space=\"small\">\n                        <Text weight=\"bold\">{message} </Text>\n                        <Text>{description}</Text>\n                    </Stack>\n                ) : (\n                    <Text>{message}</Text>\n                )}\n            </Box>\n\n            {action ? (\n                <ToastContentSlot>\n                    {isActionObject(action) ? (\n                        <Button variant=\"tertiary\" size=\"small\" onClick={action.onClick}>\n                            {action.label}\n                        </Button>\n                    ) : (\n                        action\n                    )}\n                </ToastContentSlot>\n            ) : null}\n\n            {onDismiss ? (\n                <ToastContentSlot>\n                    <Button\n                        variant=\"quaternary\"\n                        size=\"small\"\n                        onClick={onDismiss}\n                        aria-label={dismissLabel}\n                        icon={<CloseIcon />}\n                    />\n                </ToastContentSlot>\n            ) : null}\n        </Box>\n    )\n})\n\nfunction isActionObject(action: StaticToastProps['action']): action is ToastActionObject {\n    return (\n        action != null &&\n        typeof action === 'object' &&\n        'label' in action &&\n        'onClick' in action &&\n        typeof action.label === 'string' &&\n        typeof action.onClick === 'function'\n    )\n}\n\nfunction ToastContentSlot({ children }: { children: React.ReactNode }) {\n    return (\n        <Box\n            display=\"flex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            marginX=\"-xsmall\"\n            marginY=\"-medium\"\n            className={styles.slot}\n        >\n            {children}\n        </Box>\n    )\n}\n\nexport { StaticToast }\nexport type { StaticToastProps }\n"],"names":["ToastContentSlot","children","React","Box","display","alignItems","justifyContent","marginX","marginY","className","styles","slot","forwardRef","ref","message","description","icon","action","onDismiss","dismissLabel","props","role","borderRadius","width","background","padding","toastContainer","flexGrow","maxWidth","Stack","space","Text","weight","label","onClick","isActionObject","Button","variant","size","CloseIcon"],"mappings":"kdA+IA,SAASA,GAAiBC,SAAEA,IACxB,OACIC,gBAACC,OACGC,QAAQ,OACRC,WAAW,SACXC,eAAe,SACfC,QAAQ,UACRC,QAAQ,UACRC,UAAWC,UAAOC,MAEjBV,uBA/EOC,EAAMU,YAA6C,WAEnEC,OADAC,QAAEA,EAAFC,YAAWA,EAAXC,KAAwBA,EAAxBC,OAA8BA,EAA9BC,UAAsCA,EAAtCC,aAAiDA,EAAe,WAAYC,iCAG5E,OACIlB,gBAACC,uBACGU,IAAKA,EACLQ,KAAK,oBACK,SACVC,aAAa,OACbC,MAAM,aACNC,WAAW,QACXpB,QAAQ,OACRqB,QAAQ,QACRpB,WAAW,SACXI,UAAWC,UAAOgB,gBACdN,GAEHJ,EAAOd,gBAACF,OAAkBgB,GAA2B,KAEtDd,gBAACC,OAAIwB,SAAU,EAAGC,SAAS,SACtBb,EACGb,gBAAC2B,SAAMC,MAAM,SACT5B,gBAAC6B,QAAKC,OAAO,QAAQlB,OACrBZ,gBAAC6B,YAAMhB,IAGXb,gBAAC6B,YAAMjB,IAIdG,EACGf,gBAACF,OA0BjB,SAAwBiB,GACpB,OACc,MAAVA,GACkB,iBAAXA,GACP,UAAWA,GACX,YAAaA,GACW,iBAAjBA,EAAOgB,OACY,mBAAnBhB,EAAOiB,QAhCDC,CAAelB,GACZf,gBAACkC,UAAOC,QAAQ,WAAWC,KAAK,QAAQJ,QAASjB,EAAOiB,SACnDjB,EAAOgB,OAGZhB,GAGR,KAEHC,EACGhB,gBAACF,OACGE,gBAACkC,UACGC,QAAQ,aACRC,KAAK,QACLJ,QAAShB,eACGC,EACZH,KAAMd,gBAACqC,qBAGf"}

package/lib/toast/toast-animation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-animation.js","sources":["../../src/toast/toast-animation.ts"],"sourcesContent":["/**\n * Adapted with minor changes from https://github.com/seek-oss/braid-design-system/blob/7a5ebccb/packages/braid-design-system/lib/components/useToast/useFlipList.ts\n *\n * MIT License\n *\n * Copyright (c) 2018 SEEK\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport { useMemo, useCallback, useLayoutEffect } from 'react'\n\nconst ANIMATION_TIMEOUT = 400\nconst ENTRANCE_TRANSITION = 'transform 0.3s ease, opacity 0.3s ease'\nconst EXIT_TRANSITION = 'opacity 0.2s ease'\n\ntype Transform = {\n    property: 'opacity' | 'transform' | 'scale'\n    from?: string\n    to?: string\n}\n\n/**\n * Applies the \"from\" value of given CSS properties, and also sets a transition CSS property. Then\n * it waits an animation frame before setting the same CSS properties to the target \"to\" value. This\n * triggers the browser to perform the CSS transition on them.\n *\n * At the end of the animation, it cleans up, unsetting all the CSS properties (including the\n * transition), and calls the \"done\" callback, if given.\n */\nfunction animate({\n    element,\n    transforms,\n    transition,\n    done,\n}: {\n    element: HTMLElement\n    transforms: Transform[]\n    transition: string\n    done?: () => void\n}) {\n    const fallbackTimeout = setTimeout(() => {\n        done?.()\n    }, ANIMATION_TIMEOUT)\n\n    transforms.forEach(({ property, from = '' }) => {\n        element.style.setProperty(property, from)\n    })\n    element.style.setProperty('transition', '')\n\n    function transitionEndHandler(event: TransitionEvent) {\n        if (event.target !== element) {\n            return\n        }\n        element.style.setProperty('transition', '')\n        done?.()\n        element.removeEventListener('transitionend', transitionEndHandler)\n        clearTimeout(fallbackTimeout)\n    }\n\n    element.addEventListener('transitionend', transitionEndHandler)\n\n    // Call requestAnimationFrame twice to make sure we have a full animation frame at our disposal\n    window.requestAnimationFrame(() => {\n        window.requestAnimationFrame(() => {\n            element.style.setProperty('transition', transition)\n            transforms.forEach(({ property, to = '' }) => {\n                element.style.setProperty(property, to)\n            })\n        })\n    })\n}\n\ntype ToastsAnimationToolkit = {\n    /**\n     * Used for gathering all the active stacked toast elements. Should be used by passing\n     * `ref={mappedRef(toastId)}` to the stacked toasts.\n     */\n    mappedRef: (toastId: string) => (ref: HTMLElement | null) => void\n\n    /**\n     * The stacked toasts view should use this callback when it needs to remove a toast, instead of\n     * removing it right away. The actual removal from the state (and consequently, from the DOM)\n     * should happen in the `onAnimationDone` instead.\n     */\n    animateRemove: (toastId: string, onAnimationDone: () => void) => void\n}\n\n/**\n * Provides the functionality of animating the stacked toasts when they appear and before they\n * disappear.\n *\n * It works by keeping a mapping from toast IDs to the toast elements, and keeping a mapping from\n * toast IDs to their top position. Then, on every single re-render, it compares the new DOM\n * situation with the previously stored one in these mappings. With this information, it applies\n * animations that smoothly transitions between both states.\n */\nfunction useToastsAnimation(): ToastsAnimationToolkit {\n    const refs = useMemo(() => new Map<string, HTMLElement | null>(), [])\n    const positions = useMemo(() => new Map<string, number>(), [])\n\n    useLayoutEffect(() => {\n        const animations: Array<{\n            element: HTMLElement\n            transforms: Transform[]\n            transition: string\n        }> = []\n\n        Array.from(refs.entries()).forEach(([id, element]) => {\n            if (!element) {\n                refs.delete(id)\n                return\n            }\n\n            const prevTop = positions.get(id)\n            const { top, height } = element.getBoundingClientRect()\n\n            if (typeof prevTop === 'number' && prevTop !== top) {\n                // Move animation\n                animations.push({\n                    element,\n                    transition: ENTRANCE_TRANSITION,\n                    transforms: [{ property: 'transform', from: `translateY(${prevTop - top}px)` }],\n                })\n            } else if (typeof prevTop !== 'number') {\n                // Enter animation\n                animations.push({\n                    element,\n                    transition: ENTRANCE_TRANSITION,\n                    transforms: [\n                        { property: 'transform', from: `translateY(${height}px)` },\n                        { property: 'opacity', from: '0' },\n                    ],\n                })\n            }\n\n            positions.set(id, element.getBoundingClientRect().top)\n        })\n\n        animations.forEach(({ element, transforms, transition }) => {\n            animate({ element, transforms, transition })\n        })\n    })\n\n    const animateRemove = useCallback(\n        function animateRemove(id: string, onAnimationDone: () => void) {\n            const element = refs.get(id)\n            if (element) {\n                // Removal animation\n                animate({\n                    element,\n                    transforms: [{ property: 'opacity', to: '0' }],\n                    transition: EXIT_TRANSITION,\n                    done: onAnimationDone,\n                })\n            }\n        },\n        [refs],\n    )\n\n    const mappedRef = useCallback(\n        (id: string) => (ref: HTMLElement | null) => {\n            refs.set(id, ref)\n        },\n        [refs],\n    )\n\n    return { mappedRef, animateRemove }\n}\n\nexport { ANIMATION_TIMEOUT, useToastsAnimation }\n"],"names":["animate","element","transforms","transition","done","fallbackTimeout","setTimeout","forEach","property","from","style","setProperty","addEventListener","transitionEndHandler","event","target","removeEventListener","clearTimeout","window","requestAnimationFrame","to","refs","useMemo","Map","positions","useLayoutEffect","animations","Array","entries","id","delete","prevTop","get","top","height","getBoundingClientRect","push","set","animateRemove","useCallback","onAnimationDone","mappedRef","ref"],"mappings":"2FA8CA,SAASA,GAAQC,QACbA,EADaC,WAEbA,EAFaC,WAGbA,EAHaC,KAIbA,IAOA,MAAMC,EAAkBC,WAAW,WAC/BF,GAAAA,KA9BkB,KAiCtBF,EAAWK,QAAQ,EAAGC,SAAAA,EAAUC,KAAAA,EAAO,OACnCR,EAAQS,MAAMC,YAAYH,EAAUC,KAExCR,EAAQS,MAAMC,YAAY,aAAc,IAYxCV,EAAQW,iBAAiB,iBAVzB,SAASC,EAAqBC,GACtBA,EAAMC,SAAWd,IAGrBA,EAAQS,MAAMC,YAAY,aAAc,UACxCP,GAAAA,IACAH,EAAQe,oBAAoB,gBAAiBH,GAC7CI,aAAaZ,OAMjBa,OAAOC,sBAAsB,KACzBD,OAAOC,sBAAsB,KACzBlB,EAAQS,MAAMC,YAAY,aAAcR,GACxCD,EAAWK,QAAQ,EAAGC,SAAAA,EAAUY,GAAAA,EAAK,OACjCnB,EAAQS,MAAMC,YAAYH,EAAUY,mCAvD1B,+BAqF1B,WACI,MAAMC,EAAOC,UAAQ,IAAM,IAAIC,IAAmC,IAC5DC,EAAYF,UAAQ,IAAM,IAAIC,IAAuB,IAE3DE,kBAAgB,KACZ,MAAMC,EAID,GAELC,MAAMlB,KAAKY,EAAKO,WAAWrB,QAAQ,EAAEsB,EAAI5B,MACrC,IAAKA,EAED,YADAoB,EAAKS,OAAOD,GAIhB,MAAME,EAAUP,EAAUQ,IAAIH,IACxBI,IAAEA,EAAFC,OAAOA,GAAWjC,EAAQkC,wBAET,iBAAZJ,GAAwBA,IAAYE,EAE3CP,EAAWU,KAAK,CACZnC,QAAAA,EACAE,WA5GQ,yCA6GRD,WAAY,CAAC,CAAEM,SAAU,YAAaC,oBAAoBsB,EAAUE,aAE9C,iBAAZF,GAEdL,EAAWU,KAAK,CACZnC,QAAAA,EACAE,WAnHQ,yCAoHRD,WAAY,CACR,CAAEM,SAAU,YAAaC,mBAAoByB,SAC7C,CAAE1B,SAAU,UAAWC,KAAM,QAKzCe,EAAUa,IAAIR,EAAI5B,EAAQkC,wBAAwBF,OAGtDP,EAAWnB,QAAQ,EAAGN,QAAAA,EAASC,WAAAA,EAAYC,WAAAA,MACvCH,EAAQ,CAAEC,QAAAA,EAASC,WAAAA,EAAYC,WAAAA,QAIvC,MAAMmC,EAAgBC,eAClB,SAAuBV,EAAYW,GAC/B,MAAMvC,EAAUoB,EAAKW,IAAIH,GACrB5B,GAEAD,EAAQ,CACJC,QAAAA,EACAC,WAAY,CAAC,CAAEM,SAAU,UAAWY,GAAI,MACxCjB,WA1II,oBA2IJC,KAAMoC,MAIlB,CAACnB,IAUL,MAAO,CAAEoB,UAPSF,cACbV,GAAgBa,IACbrB,EAAKgB,IAAIR,EAAIa,IAEjB,CAACrB,IAGeiB,cAAAA"}

package/lib/{new-components/toast → toast}/use-toasts.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StaticToastProps } from './static-toast';
-import type { Space } from '../common-types';
+import type { Space } from '../utils/common-types';
 /**
  * The props needed to fire up a new notification toast.
  */