@doist/reactist 11.0.0 → 11.3.0

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

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

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

@@ -1,12 +1,12 @@
 import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { useMemo, createElement, useContext, useState, useEffect, Fragment, Children, createContext } from 'react';
+import { useMemo, createElement, useContext, useState, useEffect, Fragment, createContext } from 'react';
 import classNames from 'classnames';
 import { Box } from '../box/box.js';
 import { Columns, Column } from '../columns/columns.js';
 import { Divider } from '../divider/divider.js';
 import { Inline } from '../inline/inline.js';
-import { CloseIcon } from '../icons/close-icon.js';
 import { Button } from '../button/button.js';
+import { CloseIcon } from '../icons/close-icon.js';
 import { DialogOverlay, DialogContent } from '@reach/dialog';
 import FocusLock from 'react-focus-lock';
 import styles from './modal.module.css.js';
@@ -92,7 +92,7 @@ function ModalCloseButton(props) {
 
   var _React$useState = useState(false),
       includeInTabOrder = _React$useState[0],
-      setincludeInTabOrder = _React$useState[1];
+      setIncludeInTabOrder = _React$useState[1];
 
   var _React$useState2 = useState(false),
       isMounted = _React$useState2[0],
@@ -100,7 +100,7 @@ function ModalCloseButton(props) {
 
   useEffect(function skipAutoFocus() {
     if (isMounted) {
-      setincludeInTabOrder(true);
+      setIncludeInTabOrder(true);
     } else {
       setIsMounted(true);
     }
@@ -140,13 +140,14 @@ function ModalHeader(_ref2) {
     alignY: "center"
   }, /*#__PURE__*/createElement(Column, {
     width: "auto"
-  }, children), /*#__PURE__*/createElement(Column, {
+  }, children), button === false || button === null ? null : /*#__PURE__*/createElement(Column, {
     width: "content",
-    exceptionallySetClassName: styles.buttonContainer
-  }, typeof button !== 'boolean' ? button : button === true ? /*#__PURE__*/createElement(ModalCloseButton, {
+    exceptionallySetClassName: styles.buttonContainer,
+    "data-testid": "button-container"
+  }, typeof button === 'boolean' ? /*#__PURE__*/createElement(ModalCloseButton, {
     "aria-label": "Close modal",
     autoFocus: false
-  }) : null))), withDivider ? /*#__PURE__*/createElement(Divider, null) : null);
+  }) : button))), withDivider ? /*#__PURE__*/createElement(Divider, null) : null);
 }
 /**
  * Renders the body of a modal.
@@ -199,10 +200,7 @@ function ModalFooter(_ref4) {
     className: exceptionallySetClassName,
     padding: "large"
   })));
-} //
-// ModalActions
-//
-
+}
 /**
  * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).
  * @see ModalFooter
@@ -215,9 +213,7 @@ function ModalActions(_ref5) {
   return /*#__PURE__*/createElement(ModalFooter, Object.assign({}, props), /*#__PURE__*/createElement(Inline, {
     align: "right",
     space: "large"
-  }, Children.map(children, function (child) {
-    return /*#__PURE__*/createElement("div", null, child);
-  })));
+  }, children));
 }
 
 export { Modal, ModalActions, ModalBody, ModalCloseButton, ModalFooter, ModalHeader };

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

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../src/new-components/modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { DialogOverlay, DialogContent } from '@reach/dialog'\nimport FocusLock from 'react-focus-lock'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Column, Columns } from '../columns'\nimport { Inline } from '../inline'\nimport { Divider } from '../divider'\nimport { Box } from '../box'\nimport { Button, ButtonProps } from '../button'\n\nimport styles from './modal.module.css'\n\ntype ModalWidth = 'small' | 'medium' | 'large' | 'xlarge' | 'full'\ntype ModalHeightMode = 'expand' | 'fitContent'\n\n//\n// ModalContext\n//\n\ntype ModalContextValue = {\n    onDismiss?(this: void): void\n    height: ModalHeightMode\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({\n    onDismiss: undefined,\n    height: 'fitContent',\n})\n\n//\n// Modal container\n//\n\ntype DivProps = Omit<\n    React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,\n    'className' | 'children' | `aria-label` | `aria-labelledby`\n>\n\nexport type ModalProps = DivProps & {\n    /**\n     * The content of the modal.\n     */\n    children: React.ReactNode\n    /**\n     * Whether the modal is open and visible or not.\n     */\n    isOpen: boolean\n    /**\n     * Called when the user triggers closing the modal.\n     */\n    onDismiss?(): void\n    /**\n     * A descriptive setting for how wide the modal should aim to be, depending on how much space\n     * it has on screen.\n     * @default 'medium'\n     */\n    width?: ModalWidth\n    /**\n     * A descriptive setting for how tall the modal should aim to be.\n     *\n     * - 'expand': the modal aims to fill most of the available screen height, leaving only a small\n     *   padding above and below.\n     * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.\n     *\n     * In either case, if content does not fit, the content of the main body is set to scroll\n     * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the\n     * viewport boundaries.\n     *\n     * If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of\n     * the inner layout to ensure scroll, or whatever other strategy you may want.\n     */\n    height?: ModalHeightMode\n    /**\n     * Whether to set or not the focus initially to the first focusable element inside the modal.\n     */\n    autoFocus?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n    /** Defines a string value that labels the current modal for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current modal for assistive technologies. */\n    'aria-labelledby'?: string\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n    return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/**\n * Renders a modal that sits on top of the rest of the content in the entire page.\n *\n * Follows the WAI-ARIA Dialog (Modal) Pattern.\n *\n * @see ModalHeader\n * @see ModalFooter\n * @see ModalBody\n */\nexport function Modal({\n    isOpen,\n    onDismiss,\n    height = 'fitContent',\n    width = 'medium',\n    exceptionallySetClassName,\n    autoFocus = true,\n    children,\n    ...props\n}: ModalProps) {\n    const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n        onDismiss,\n        height,\n    ])\n\n    return (\n        <DialogOverlay\n            isOpen={isOpen}\n            onDismiss={onDismiss}\n            dangerouslyBypassFocusLock // We're setting up our own focus lock below\n            className={classNames(styles.overlay, styles[height], styles[width])}\n            data-testid=\"modal-overlay\"\n        >\n            <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n                <DialogContent\n                    {...props}\n                    as={Box}\n                    borderRadius=\"full\"\n                    background=\"default\"\n                    display=\"flex\"\n                    flexDirection=\"column\"\n                    overflow=\"hidden\"\n                    height={height === 'expand' ? 'full' : undefined}\n                    flexGrow={height === 'expand' ? 1 : 0}\n                    className={[exceptionallySetClassName, styles.container]}\n                >\n                    <ModalContext.Provider value={contextValue}>{children}</ModalContext.Provider>\n                </DialogContent>\n            </FocusLock>\n        </DialogOverlay>\n    )\n}\n\n//\n// ModalCloseButton\n//\n\nexport type ModalCloseButtonProps = Omit<\n    ButtonProps,\n    | 'type'\n    | 'children'\n    | 'variant'\n    | 'icon'\n    | 'startIcon'\n    | 'endIcon'\n    | 'disabled'\n    | 'loading'\n    | 'tabIndex'\n> & {\n    /**\n     * The descriptive label of the button.\n     */\n    'aria-label': string\n}\n\n/**\n * The close button rendered by ModalHeader. Provided independently so that consumers can customize\n * the button's label.\n *\n * @see ModalHeader\n */\nexport function ModalCloseButton(props: ModalCloseButtonProps) {\n    const { onDismiss } = React.useContext(ModalContext)\n    const [includeInTabOrder, setincludeInTabOrder] = React.useState(false)\n    const [isMounted, setIsMounted] = React.useState(false)\n\n    React.useEffect(\n        function skipAutoFocus() {\n            if (isMounted) {\n                setincludeInTabOrder(true)\n            } else {\n                setIsMounted(true)\n            }\n        },\n        [isMounted],\n    )\n\n    return (\n        <Button\n            {...props}\n            variant=\"quaternary\"\n            onClick={onDismiss}\n            icon={<CloseIcon />}\n            tabIndex={includeInTabOrder ? 0 : -1}\n        />\n    )\n}\n\n//\n// ModalHeader\n//\n\nexport type ModalHeaderProps = DivProps & {\n    /**\n     * The content of the header.\n     */\n    children: React.ReactNode\n    /**\n     * Allows to provide a custom button element, or to omit the close button if set to false.\n     * @see ModalCloseButton\n     */\n    button?: React.ReactNode | boolean\n    /**\n     * Whether to render a divider line below the header.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal header area with an optional close button.\n *\n * @see Modal\n * @see ModalFooter\n * @see ModalBody\n */\nexport function ModalHeader({\n    children,\n    button = true,\n    withDivider = false,\n    exceptionallySetClassName,\n    ...props\n}: ModalHeaderProps) {\n    return (\n        <>\n            <Box\n                {...props}\n                as=\"header\"\n                paddingLeft=\"large\"\n                paddingRight=\"small\"\n                paddingY=\"small\"\n                className={exceptionallySetClassName}\n            >\n                <Columns space=\"large\" alignY=\"center\">\n                    <Column width=\"auto\">{children}</Column>\n                    <Column width=\"content\" exceptionallySetClassName={styles.buttonContainer}>\n                        {typeof button !== 'boolean' ? (\n                            button\n                        ) : button === true ? (\n                            <ModalCloseButton aria-label=\"Close modal\" autoFocus={false} />\n                        ) : null}\n                    </Column>\n                </Columns>\n            </Box>\n            {withDivider ? <Divider /> : null}\n        </>\n    )\n}\n\n//\n// ModalBody\n//\n\nexport type ModalBodyProps = DivProps & {\n    /**\n     * The content of the modal body.\n     */\n    children: React.ReactNode\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders the body of a modal.\n *\n * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other\n * things, that the contet of the modal body expands or contracts depending on the modal height\n * setting or the size of the content. The body content also automatically scrolls when it's too\n * large to fit the available space.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalFooter\n */\nexport function ModalBody({ exceptionallySetClassName, children, ...props }: ModalBodyProps) {\n    const { height } = React.useContext(ModalContext)\n    return (\n        <Box\n            {...props}\n            className={exceptionallySetClassName}\n            flexGrow={height === 'expand' ? 1 : 0}\n            height={height === 'expand' ? 'full' : undefined}\n            overflow=\"auto\"\n        >\n            <Box padding=\"large\" paddingBottom=\"xxlarge\">\n                {children}\n            </Box>\n        </Box>\n    )\n}\n\n//\n// ModalFooter\n//\n\nexport type ModalFooterProps = DivProps & {\n    /**\n     * The contant of the modal footer.\n     */\n    children: React.ReactNode\n    /**\n     * Whether to render a divider line below the footer.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal footer area.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalBody\n */\nexport function ModalFooter({\n    exceptionallySetClassName,\n    withDivider = false,\n    ...props\n}: ModalFooterProps) {\n    return (\n        <>\n            {withDivider ? <Divider /> : null}\n            <Box as=\"footer\" {...props} className={exceptionallySetClassName} padding=\"large\" />\n        </>\n    )\n}\n\n//\n// ModalActions\n//\n\n/**\n * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).\n * @see ModalFooter\n */\nexport function ModalActions({ children, ...props }: ModalFooterProps) {\n    return (\n        <ModalFooter {...props}>\n            <Inline align=\"right\" space=\"large\">\n                {React.Children.map(children, (child) => (\n                    <div>{child}</div>\n                ))}\n            </Inline>\n        </ModalFooter>\n    )\n}\n"],"names":["ModalContext","React","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","Modal","isOpen","width","exceptionallySetClassName","autoFocus","children","props","contextValue","DialogOverlay","dangerouslyBypassFocusLock","className","classNames","styles","overlay","FocusLock","whiteList","returnFocus","DialogContent","as","Box","borderRadius","background","display","flexDirection","overflow","flexGrow","container","Provider","value","ModalCloseButton","includeInTabOrder","setincludeInTabOrder","isMounted","setIsMounted","skipAutoFocus","Button","variant","onClick","icon","CloseIcon","tabIndex","ModalHeader","button","withDivider","paddingLeft","paddingRight","paddingY","Columns","space","alignY","Column","buttonContainer","Divider","ModalBody","padding","paddingBottom","ModalFooter","ModalActions","Inline","align","map","child"],"mappings":"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"}
+{"version":3,"file":"modal.js","sources":["../../../src/new-components/modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { DialogOverlay, DialogContent } from '@reach/dialog'\nimport FocusLock from 'react-focus-lock'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Column, Columns } from '../columns'\nimport { Inline } from '../inline'\nimport { Divider } from '../divider'\nimport { Box } from '../box'\nimport { Button, ButtonProps } from '../button'\n\nimport styles from './modal.module.css'\n\ntype ModalWidth = 'small' | 'medium' | 'large' | 'xlarge' | 'full'\ntype ModalHeightMode = 'expand' | 'fitContent'\n\n//\n// ModalContext\n//\n\ntype ModalContextValue = {\n    onDismiss?(this: void): void\n    height: ModalHeightMode\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({\n    onDismiss: undefined,\n    height: 'fitContent',\n})\n\n//\n// Modal container\n//\n\ntype DivProps = Omit<\n    React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,\n    'className' | 'children' | `aria-label` | `aria-labelledby`\n>\n\nexport type ModalProps = DivProps & {\n    /**\n     * The content of the modal.\n     */\n    children: React.ReactNode\n    /**\n     * Whether the modal is open and visible or not.\n     */\n    isOpen: boolean\n    /**\n     * Called when the user triggers closing the modal.\n     */\n    onDismiss?(): void\n    /**\n     * A descriptive setting for how wide the modal should aim to be, depending on how much space\n     * it has on screen.\n     * @default 'medium'\n     */\n    width?: ModalWidth\n    /**\n     * A descriptive setting for how tall the modal should aim to be.\n     *\n     * - 'expand': the modal aims to fill most of the available screen height, leaving only a small\n     *   padding above and below.\n     * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.\n     *\n     * In either case, if content does not fit, the content of the main body is set to scroll\n     * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the\n     * viewport boundaries.\n     *\n     * If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of\n     * the inner layout to ensure scroll, or whatever other strategy you may want.\n     */\n    height?: ModalHeightMode\n    /**\n     * Whether to set or not the focus initially to the first focusable element inside the modal.\n     */\n    autoFocus?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n    /** Defines a string value that labels the current modal for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current modal for assistive technologies. */\n    'aria-labelledby'?: string\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n    return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/**\n * Renders a modal that sits on top of the rest of the content in the entire page.\n *\n * Follows the WAI-ARIA Dialog (Modal) Pattern.\n *\n * @see ModalHeader\n * @see ModalFooter\n * @see ModalBody\n */\nexport function Modal({\n    isOpen,\n    onDismiss,\n    height = 'fitContent',\n    width = 'medium',\n    exceptionallySetClassName,\n    autoFocus = true,\n    children,\n    ...props\n}: ModalProps) {\n    const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n        onDismiss,\n        height,\n    ])\n\n    return (\n        <DialogOverlay\n            isOpen={isOpen}\n            onDismiss={onDismiss}\n            dangerouslyBypassFocusLock // We're setting up our own focus lock below\n            className={classNames(styles.overlay, styles[height], styles[width])}\n            data-testid=\"modal-overlay\"\n        >\n            <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n                <DialogContent\n                    {...props}\n                    as={Box}\n                    borderRadius=\"full\"\n                    background=\"default\"\n                    display=\"flex\"\n                    flexDirection=\"column\"\n                    overflow=\"hidden\"\n                    height={height === 'expand' ? 'full' : undefined}\n                    flexGrow={height === 'expand' ? 1 : 0}\n                    className={[exceptionallySetClassName, styles.container]}\n                >\n                    <ModalContext.Provider value={contextValue}>{children}</ModalContext.Provider>\n                </DialogContent>\n            </FocusLock>\n        </DialogOverlay>\n    )\n}\n\n//\n// ModalCloseButton\n//\n\nexport type ModalCloseButtonProps = Omit<\n    ButtonProps,\n    | 'type'\n    | 'children'\n    | 'variant'\n    | 'icon'\n    | 'startIcon'\n    | 'endIcon'\n    | 'disabled'\n    | 'loading'\n    | 'tabIndex'\n> & {\n    /**\n     * The descriptive label of the button.\n     */\n    'aria-label': string\n}\n\n/**\n * The close button rendered by ModalHeader. Provided independently so that consumers can customize\n * the button's label.\n *\n * @see ModalHeader\n */\nexport function ModalCloseButton(props: ModalCloseButtonProps) {\n    const { onDismiss } = React.useContext(ModalContext)\n    const [includeInTabOrder, setIncludeInTabOrder] = React.useState(false)\n    const [isMounted, setIsMounted] = React.useState(false)\n\n    React.useEffect(\n        function skipAutoFocus() {\n            if (isMounted) {\n                setIncludeInTabOrder(true)\n            } else {\n                setIsMounted(true)\n            }\n        },\n        [isMounted],\n    )\n\n    return (\n        <Button\n            {...props}\n            variant=\"quaternary\"\n            onClick={onDismiss}\n            icon={<CloseIcon />}\n            tabIndex={includeInTabOrder ? 0 : -1}\n        />\n    )\n}\n\n//\n// ModalHeader\n//\n\nexport type ModalHeaderProps = DivProps & {\n    /**\n     * The content of the header.\n     */\n    children: React.ReactNode\n    /**\n     * Allows to provide a custom button element, or to omit the close button if set to false.\n     * @see ModalCloseButton\n     */\n    button?: React.ReactNode | boolean\n    /**\n     * Whether to render a divider line below the header.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal header area with an optional close button.\n *\n * @see Modal\n * @see ModalFooter\n * @see ModalBody\n */\nexport function ModalHeader({\n    children,\n    button = true,\n    withDivider = false,\n    exceptionallySetClassName,\n    ...props\n}: ModalHeaderProps) {\n    return (\n        <>\n            <Box\n                {...props}\n                as=\"header\"\n                paddingLeft=\"large\"\n                paddingRight=\"small\"\n                paddingY=\"small\"\n                className={exceptionallySetClassName}\n            >\n                <Columns space=\"large\" alignY=\"center\">\n                    <Column width=\"auto\">{children}</Column>\n                    {button === false || button === null ? null : (\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","Modal","isOpen","width","exceptionallySetClassName","autoFocus","children","props","contextValue","DialogOverlay","dangerouslyBypassFocusLock","className","classNames","styles","overlay","FocusLock","whiteList","returnFocus","DialogContent","as","Box","borderRadius","background","display","flexDirection","overflow","flexGrow","container","Provider","value","ModalCloseButton","includeInTabOrder","setIncludeInTabOrder","isMounted","setIsMounted","skipAutoFocus","Button","variant","onClick","icon","CloseIcon","tabIndex","ModalHeader","button","withDivider","paddingLeft","paddingRight","paddingY","Columns","space","alignY","Column","buttonContainer","Divider","ModalBody","padding","paddingBottom","ModalFooter","ModalActions","Inline","align"],"mappings":";;;;;;;;;;;;;;;;;;AA0BA,IAAMA,YAAY,gBAAGC,aAAA,CAAuC;AACxDC,EAAAA,SAAS,EAAEC,SAD6C;AAExDC,EAAAA,MAAM,EAAE;AAFgD,CAAvC,CAArB;;AA8DA,SAASC,kBAAT,CAA4BC,OAA5B;AACI,SAAO,EAAEA,OAAO,CAACC,aAAR,KAA0BC,QAA1B,IAAsCF,OAAO,CAACG,OAAR,CAAgBC,WAAhB,OAAkC,QAA1E,CAAP;AACH;AAED;;;;;;;;;;;SASgBC;MACZC,cAAAA;MACAV,iBAAAA;yBACAE;MAAAA,kCAAS;wBACTS;MAAAA,gCAAQ;MACRC,iCAAAA;4BACAC;MAAAA,wCAAY;MACZC,gBAAAA;MACGC;;AAEH,MAAMC,YAAY,GAAsBjB,OAAA,CAAc;AAAA,WAAO;AAAEC,MAAAA,SAAS,EAATA,SAAF;AAAaE,MAAAA,MAAM,EAANA;AAAb,KAAP;AAAA,GAAd,EAA6C,CACjFF,SADiF,EAEjFE,MAFiF,CAA7C,CAAxC;AAKA,sBACIH,aAAA,CAACkB,aAAD;AACIP,IAAAA,MAAM,EAAEA;AACRV,IAAAA,SAAS,EAAEA;AACXkB,IAAAA,0BAA0B;AAAA;AAC1BC,IAAAA,SAAS,EAAEC,UAAU,CAACC,MAAM,CAACC,OAAR,EAAiBD,MAAM,CAACnB,MAAD,CAAvB,EAAiCmB,MAAM,CAACV,KAAD,CAAvC;mBACT;GALhB,eAOIZ,aAAA,CAACwB,SAAD;AAAWV,IAAAA,SAAS,EAAEA;AAAWW,IAAAA,SAAS,EAAErB;AAAoBsB,IAAAA,WAAW,EAAE;GAA7E,eACI1B,aAAA,CAAC2B,aAAD,oBACQX;AACJY,IAAAA,EAAE,EAAEC;AACJC,IAAAA,YAAY,EAAC;AACbC,IAAAA,UAAU,EAAC;AACXC,IAAAA,OAAO,EAAC;AACRC,IAAAA,aAAa,EAAC;AACdC,IAAAA,QAAQ,EAAC;AACT/B,IAAAA,MAAM,EAAEA,MAAM,KAAK,QAAX,GAAsB,MAAtB,GAA+BD;AACvCiC,IAAAA,QAAQ,EAAEhC,MAAM,KAAK,QAAX,GAAsB,CAAtB,GAA0B;AACpCiB,IAAAA,SAAS,EAAE,CAACP,yBAAD,EAA4BS,MAAM,CAACc,SAAnC;IAVf,eAYIpC,aAAA,CAACD,YAAY,CAACsC,QAAd;AAAuBC,IAAAA,KAAK,EAAErB;GAA9B,EAA6CF,QAA7C,CAZJ,CADJ,CAPJ,CADJ;AA0BH;AAwBD;;;;;;;SAMgBwB,iBAAiBvB;AAC7B,0BAAsBhB,UAAA,CAAiBD,YAAjB,CAAtB;AAAA,MAAQE,SAAR,qBAAQA,SAAR;;AACA,wBAAkDD,QAAA,CAAe,KAAf,CAAlD;AAAA,MAAOwC,iBAAP;AAAA,MAA0BC,oBAA1B;;AACA,yBAAkCzC,QAAA,CAAe,KAAf,CAAlC;AAAA,MAAO0C,SAAP;AAAA,MAAkBC,YAAlB;;AAEA3C,EAAAA,SAAA,CACI,SAAS4C,aAAT;AACI,QAAIF,SAAJ,EAAe;AACXD,MAAAA,oBAAoB,CAAC,IAAD,CAApB;AACH,KAFD,MAEO;AACHE,MAAAA,YAAY,CAAC,IAAD,CAAZ;AACH;AACJ,GAPL,EAQI,CAACD,SAAD,CARJ;AAWA,sBACI1C,aAAA,CAAC6C,MAAD,oBACQ7B;AACJ8B,IAAAA,OAAO,EAAC;AACRC,IAAAA,OAAO,EAAE9C;AACT+C,IAAAA,IAAI,eAAEhD,aAAA,CAACiD,SAAD,MAAA;AACNC,IAAAA,QAAQ,EAAEV,iBAAiB,GAAG,CAAH,GAAO,CAAC;IALvC,CADJ;AASH;AA2BD;;;;;;;;SAOgBW;MACZpC,iBAAAA;2BACAqC;MAAAA,mCAAS;gCACTC;MAAAA,6CAAc;MACdxC,kCAAAA;MACGG;;AAEH,sBACIhB,aAAA,SAAA,MAAA,eACIA,aAAA,CAAC6B,GAAD,oBACQb;AACJY,IAAAA,EAAE,EAAC;AACH0B,IAAAA,WAAW,EAAC;AACZC,IAAAA,YAAY,EAAC;AACbC,IAAAA,QAAQ,EAAC;AACTpC,IAAAA,SAAS,EAAEP;IANf,eAQIb,aAAA,CAACyD,OAAD;AAASC,IAAAA,KAAK,EAAC;AAAQC,IAAAA,MAAM,EAAC;GAA9B,eACI3D,aAAA,CAAC4D,MAAD;AAAQhD,IAAAA,KAAK,EAAC;GAAd,EAAsBG,QAAtB,CADJ,EAEKqC,MAAM,KAAK,KAAX,IAAoBA,MAAM,KAAK,IAA/B,GAAsC,IAAtC,gBACGpD,aAAA,CAAC4D,MAAD;AACIhD,IAAAA,KAAK,EAAC;AACNC,IAAAA,yBAAyB,EAAES,MAAM,CAACuC;mBACtB;GAHhB,EAKK,OAAOT,MAAP,KAAkB,SAAlB,gBACGpD,aAAA,CAACuC,gBAAD;kBAA6B;AAAczB,IAAAA,SAAS,EAAE;GAAtD,CADH,GAGGsC,MARR,CAHR,CARJ,CADJ,EA0BKC,WAAW,gBAAGrD,aAAA,CAAC8D,OAAD,MAAA,CAAH,GAAiB,IA1BjC,CADJ;AA8BH;AAiBD;;;;;;;;;;;;;SAYgBC;MAAYlD,kCAAAA;MAA2BE,iBAAAA;MAAaC;;AAChE,2BAAmBhB,UAAA,CAAiBD,YAAjB,CAAnB;AAAA,MAAQI,MAAR,sBAAQA,MAAR;;AACA,sBACIH,aAAA,CAAC6B,GAAD,oBACQb;AACJI,IAAAA,SAAS,EAAEP;AACXsB,IAAAA,QAAQ,EAAEhC,MAAM,KAAK,QAAX,GAAsB,CAAtB,GAA0B;AACpCA,IAAAA,MAAM,EAAEA,MAAM,KAAK,QAAX,GAAsB,MAAtB,GAA+BD;AACvCgC,IAAAA,QAAQ,EAAC;IALb,eAOIlC,aAAA,CAAC6B,GAAD;AAAKmC,IAAAA,OAAO,EAAC;AAAQC,IAAAA,aAAa,EAAC;GAAnC,EACKlD,QADL,CAPJ,CADJ;AAaH;AAsBD;;;;;;;;SAOgBmD;MACZrD,kCAAAA;gCACAwC;MAAAA,6CAAc;MACXrC;;AAEH,sBACIhB,aAAA,SAAA,MAAA,EACKqD,WAAW,gBAAGrD,aAAA,CAAC8D,OAAD,MAAA,CAAH,GAAiB,IADjC,eAEI9D,aAAA,CAAC6B,GAAD;AAAKD,IAAAA,EAAE,EAAC;KAAaZ;AAAOI,IAAAA,SAAS,EAAEP;AAA2BmD,IAAAA,OAAO,EAAC;IAA1E,CAFJ,CADJ;AAMH;AAQD;;;;;SAIgBG;MAAepD,iBAAAA;MAAaC;;AACxC,sBACIhB,aAAA,CAACkE,WAAD,oBAAiBlD,MAAjB,eACIhB,aAAA,CAACoE,MAAD;AAAQC,IAAAA,KAAK,EAAC;AAAQX,IAAAA,KAAK,EAAC;GAA5B,EACK3C,QADL,CADJ,CADJ;AAOH;;;;"}

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

@@ -21,7 +21,9 @@ function Notice(_ref) {
     width: "content"
   }, /*#__PURE__*/createElement(AlertIcon, {
     tone: tone
-  })), /*#__PURE__*/createElement(Column, null, children)));
+  })), /*#__PURE__*/createElement(Column, null, /*#__PURE__*/createElement(Box, {
+    paddingY: "xsmall"
+  }, children))));
 }
 
 export { Notice };

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

@@ -1 +1 @@
-{"version":3,"file":"notice.js","sources":["../../../src/new-components/notice/notice.tsx"],"sourcesContent":["import * as React from 'react'\nimport { AlertTone } from '../common-types'\nimport { getClassNames } from '../responsive-props'\nimport { Box } from '../box'\nimport { Columns, Column } from '../columns'\nimport { AlertIcon } from '../icons/alert-icon'\nimport styles from './notice.module.css'\n\ntype NoticeProps = {\n    id?: string\n    children: React.ReactNode\n    tone: AlertTone\n}\n\nfunction Notice({ id, children, tone }: NoticeProps) {\n    return (\n        <Box\n            id={id}\n            role=\"alert\"\n            aria-live=\"polite\"\n            className={[styles.container, getClassNames(styles, 'tone', tone)]}\n        >\n            <Columns space=\"small\" alignY=\"top\">\n                <Column width=\"content\">\n                    <AlertIcon tone={tone} />\n                </Column>\n                <Column>{children}</Column>\n            </Columns>\n        </Box>\n    )\n}\n\nexport { Notice }\nexport type { NoticeProps }\n"],"names":["Notice","id","children","tone","React","Box","role","className","styles","container","getClassNames","Columns","space","alignY","Column","width","AlertIcon"],"mappings":";;;;;;;AAcA,SAASA,MAAT;MAAkBC,UAAAA;MAAIC,gBAAAA;MAAUC,YAAAA;AAC5B,sBACIC,aAAA,CAACC,GAAD;AACIJ,IAAAA,EAAE,EAAEA;AACJK,IAAAA,IAAI,EAAC;iBACK;AACVC,IAAAA,SAAS,EAAE,CAACC,MAAM,CAACC,SAAR,EAAmBC,aAAa,CAACF,MAAD,EAAS,MAAT,EAAiBL,IAAjB,CAAhC;GAJf,eAMIC,aAAA,CAACO,OAAD;AAASC,IAAAA,KAAK,EAAC;AAAQC,IAAAA,MAAM,EAAC;GAA9B,eACIT,aAAA,CAACU,MAAD;AAAQC,IAAAA,KAAK,EAAC;GAAd,eACIX,aAAA,CAACY,SAAD;AAAWb,IAAAA,IAAI,EAAEA;GAAjB,CADJ,CADJ,eAIIC,aAAA,CAACU,MAAD,MAAA,EAASZ,QAAT,CAJJ,CANJ,CADJ;AAeH;;;;"}
+{"version":3,"file":"notice.js","sources":["../../../src/new-components/notice/notice.tsx"],"sourcesContent":["import * as React from 'react'\nimport { AlertTone } from '../common-types'\nimport { getClassNames } from '../responsive-props'\nimport { Box } from '../box'\nimport { Columns, Column } from '../columns'\nimport { AlertIcon } from '../icons/alert-icon'\nimport styles from './notice.module.css'\n\ntype NoticeProps = {\n    id?: string\n    children: React.ReactNode\n    tone: AlertTone\n}\n\nfunction Notice({ id, children, tone }: NoticeProps) {\n    return (\n        <Box\n            id={id}\n            role=\"alert\"\n            aria-live=\"polite\"\n            className={[styles.container, getClassNames(styles, 'tone', tone)]}\n        >\n            <Columns space=\"small\" alignY=\"top\">\n                <Column width=\"content\">\n                    <AlertIcon tone={tone} />\n                </Column>\n                <Column>\n                    <Box paddingY=\"xsmall\">{children}</Box>\n                </Column>\n            </Columns>\n        </Box>\n    )\n}\n\nexport { Notice }\nexport type { NoticeProps }\n"],"names":["Notice","id","children","tone","React","Box","role","className","styles","container","getClassNames","Columns","space","alignY","Column","width","AlertIcon","paddingY"],"mappings":";;;;;;;AAcA,SAASA,MAAT;MAAkBC,UAAAA;MAAIC,gBAAAA;MAAUC,YAAAA;AAC5B,sBACIC,aAAA,CAACC,GAAD;AACIJ,IAAAA,EAAE,EAAEA;AACJK,IAAAA,IAAI,EAAC;iBACK;AACVC,IAAAA,SAAS,EAAE,CAACC,MAAM,CAACC,SAAR,EAAmBC,aAAa,CAACF,MAAD,EAAS,MAAT,EAAiBL,IAAjB,CAAhC;GAJf,eAMIC,aAAA,CAACO,OAAD;AAASC,IAAAA,KAAK,EAAC;AAAQC,IAAAA,MAAM,EAAC;GAA9B,eACIT,aAAA,CAACU,MAAD;AAAQC,IAAAA,KAAK,EAAC;GAAd,eACIX,aAAA,CAACY,SAAD;AAAWb,IAAAA,IAAI,EAAEA;GAAjB,CADJ,CADJ,eAIIC,aAAA,CAACU,MAAD,MAAA,eACIV,aAAA,CAACC,GAAD;AAAKY,IAAAA,QAAQ,EAAC;GAAd,EAAwBf,QAAxB,CADJ,CAJJ,CANJ,CADJ;AAiBH;;;;"}

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

@@ -1,4 +1,4 @@
-var modules_40c67f5b = {"tab":"_7cdcd0b6","tab-normal":"af6705d0","tab-primary":"ad705020","tab-secondary":"_69a2043b","tab-tertiary":"_5b695667","tab-plain":"_88d3dc5e"};
+var modules_40c67f5b = {"tab":"bae5f7d8","tab-normal":"ad3e25c3","tab-primary":"_3a9a0bad","tab-secondary":"_143d4b7d","tab-tertiary":"c9c5d77d","tab-plain":"_92c440c0"};
 
 export default modules_40c67f5b;
 //# sourceMappingURL=tabs.module.css.js.map

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

@@ -1,4 +1,4 @@
-var modules_a9637dd3 = {"text":"c12d1277","size-caption":"c88e1204","size-copy":"_426d67ec","size-subtitle":"f978d6c7","weight-semibold":"_0c31eccd","weight-bold":"aba17bdd","tone-secondary":"_2767b43d","tone-danger":"e8ae531e","lineClampMultipleLines":"dc839422","lineClamp-1":"e2d23135","lineClamp-2":"_7c778b7e","lineClamp-3":"_5ff41166","lineClamp-4":"b7a4998e","lineClamp-5":"_6a7f8803"};
+var modules_a9637dd3 = {"text":"c5028ea8","size-caption":"_05d3a546","size-copy":"_100565e3","size-subtitle":"b8f72625","weight-semibold":"_398ecda1","weight-bold":"_8054cd6b","tone-secondary":"_6abd56b1","tone-danger":"_274b4a47","lineClampMultipleLines":"_724b0054","lineClamp-1":"_51ac6ee4","lineClamp-2":"b0742803","lineClamp-3":"dd664c95","lineClamp-4":"b02775b5","lineClamp-5":"da91b300"};
 
 export default modules_a9637dd3;
 //# sourceMappingURL=text.module.css.js.map

package/es/new-components/text-area/text-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-area.js","sources":["../../../src/new-components/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ntype TextAreaProps = FieldComponentProps<HTMLTextAreaElement>\n\nfunction TextArea({\n    id,\n    label,\n    secondaryLabel,\n    auxiliaryLabel,\n    hint,\n    maxWidth,\n    ...props\n}: TextAreaProps) {\n    return (\n        <BaseField\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            className={styles.container}\n            maxWidth={maxWidth}\n        >\n            {(extraProps) => (\n                <Box width=\"full\">\n                    <textarea {...props} {...extraProps} />\n                </Box>\n            )}\n        </BaseField>\n    )\n}\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["TextArea","id","label","secondaryLabel","auxiliaryLabel","hint","maxWidth","props","React","BaseField","className","styles","container","extraProps","Box","width"],"mappings":";;;;;;;;AAOA,SAASA,QAAT;MACIC,UAAAA;MACAC,aAAAA;MACAC,sBAAAA;MACAC,sBAAAA;MACAC,YAAAA;MACAC,gBAAAA;MACGC;;AAEH,sBACIC,aAAA,CAACC,SAAD;AACIR,IAAAA,EAAE,EAAEA;AACJC,IAAAA,KAAK,EAAEA;AACPC,IAAAA,cAAc,EAAEA;AAChBC,IAAAA,cAAc,EAAEA;AAChBC,IAAAA,IAAI,EAAEA;AACNK,IAAAA,SAAS,EAAEC,MAAM,CAACC;AAClBN,IAAAA,QAAQ,EAAEA;GAPd,EASK,UAACO,UAAD;AAAA,wBACGL,aAAA,CAACM,GAAD;AAAKC,MAAAA,KAAK,EAAC;KAAX,eACIP,aAAA,WAAA,oBAAcD,OAAWM,WAAzB,CADJ,CADH;AAAA,GATL,CADJ;AAiBH;;;;"}
+{"version":3,"file":"text-area.js","sources":["../../../src/new-components/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ntype TextAreaProps = FieldComponentProps<HTMLTextAreaElement> & {\n    rows?: number\n}\n\nfunction TextArea({\n    id,\n    label,\n    secondaryLabel,\n    auxiliaryLabel,\n    hint,\n    maxWidth,\n    ...props\n}: TextAreaProps) {\n    return (\n        <BaseField\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            className={styles.container}\n            maxWidth={maxWidth}\n        >\n            {(extraProps) => (\n                <Box width=\"full\">\n                    <textarea {...props} {...extraProps} />\n                </Box>\n            )}\n        </BaseField>\n    )\n}\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["TextArea","id","label","secondaryLabel","auxiliaryLabel","hint","maxWidth","props","React","BaseField","className","styles","container","extraProps","Box","width"],"mappings":";;;;;;;;AASA,SAASA,QAAT;MACIC,UAAAA;MACAC,aAAAA;MACAC,sBAAAA;MACAC,sBAAAA;MACAC,YAAAA;MACAC,gBAAAA;MACGC;;AAEH,sBACIC,aAAA,CAACC,SAAD;AACIR,IAAAA,EAAE,EAAEA;AACJC,IAAAA,KAAK,EAAEA;AACPC,IAAAA,cAAc,EAAEA;AAChBC,IAAAA,cAAc,EAAEA;AAChBC,IAAAA,IAAI,EAAEA;AACNK,IAAAA,SAAS,EAAEC,MAAM,CAACC;AAClBN,IAAAA,QAAQ,EAAEA;GAPd,EASK,UAACO,UAAD;AAAA,wBACGL,aAAA,CAACM,GAAD;AAAKC,MAAAA,KAAK,EAAC;KAAX,eACIP,aAAA,WAAA,oBAAcD,OAAWM,WAAzB,CADJ,CADH;AAAA,GATL,CADJ;AAiBH;;;;"}

package/es/new-components/text-link/text-link.module.css.js

@@ -1,4 +1,4 @@
-var modules_3d05deee = {"container":"_12eda218"};
+var modules_3d05deee = {"container":"b55607a1"};
 
 export default modules_3d05deee;
 //# sourceMappingURL=text-link.module.css.js.map

package/lib/components/menu/menu.js

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../_virtual/_rollupPluginBabelHelpers.js"),o=require("react"),n=(e(o),e(require("classnames"))),r=require("../../utils/polymorphism.js"),l=require("../../hooks/use-previous/use-previous.js"),i=require("reakit/Menu"),a=require("reakit/Popover"),s=["children","onItemSelect"],c=["exceptionallySetClassName"],u=["handleItemSelect"],m=["exceptionallySetClassName"],p=["handleItemSelect"],d=["value","children","onSelect","hideOnSelect","onClick","exceptionallySetClassName"],b=["handleItemSelect"],h=["children","onItemSelect"],f=["handleItemSelect"],v=["label","children","exceptionallySetClassName"],S=["handleItemSelect"],j=o.createContext({});function C(e){var n=e.children,r=e.onItemSelect,l=t.objectWithoutPropertiesLoose(e,s),a=i.useMenuState(t.objectSpread2({loop:!0},l)),c=o.useCallback((function(e){r&&r(e)}),[r]),u=o.useMemo((function(){return t.objectSpread2(t.objectSpread2({},a),{},{handleItemSelect:c})}),[a,c]);return o.createElement(j.Provider,{value:u},n)}var x=r.polymorphicComponent((function(e,r){var l=e.exceptionallySetClassName,a=t.objectWithoutPropertiesLoose(e,c),s=o.useContext(j),m=t.objectWithoutPropertiesLoose(s,u);return o.createElement(i.MenuButton,Object.assign({},a,m,{ref:r,className:n("reactist_menubutton",l)}))})),I={width:"100%",height:"100%",position:"fixed",top:0,left:0};function P(e){return o.createElement(a.PopoverBackdrop,{baseId:e.baseId,visible:e.visible,animated:e.animated,animating:e.animating,stopAnimation:e.stopAnimation,modal:e.modal,style:I},e.children)}var y=r.polymorphicComponent((function(e,r){var a=e.exceptionallySetClassName,s=t.objectWithoutPropertiesLoose(e,m),c=o.useContext(j),u=t.objectWithoutPropertiesLoose(c,p),d=l.usePrevious(u.visible);return o.useEffect((function(){var e,t;!1===u.visible&&!0===d&&(null===(e=u.unstable_referenceRef)||void 0===e||null===(t=e.current)||void 0===t||t.focus())}),[u.visible,d,u.unstable_referenceRef]),u.visible?o.createElement(P,Object.assign({},u),o.createElement(i.Menu,Object.assign({},s,u,{ref:r,className:n("reactist_menulist",a)}))):null})),M=r.polymorphicComponent((function(e,n){var r=e.value,l=e.children,a=e.onSelect,s=e.hideOnSelect,c=void 0===s||s,u=e.onClick,m=e.exceptionallySetClassName,p=t.objectWithoutPropertiesLoose(e,d),h=o.useContext(j),f=h.handleItemSelect,v=t.objectWithoutPropertiesLoose(h,b),S=v.hide,C=o.useCallback((function(e){null==u||u(e);var t=!1!==(a&&!e.defaultPrevented?a():void 0)&&c;f(r),t&&S()}),[a,u,f,c,S,r]);return o.createElement(i.MenuItem,Object.assign({},p,v,{ref:n,onClick:C,className:m}),l)})),N=o.forwardRef((function(e,r){var l=e.children,a=e.onItemSelect,s=t.objectWithoutPropertiesLoose(e,h),c=o.useContext(j),u=c.handleItemSelect,m=t.objectWithoutPropertiesLoose(c,f),p=m.hide,d=o.useCallback((function(e){a&&a(e),u(e),p()}),[p,u,a]),b=o.Children.toArray(l),v=b[0],S=b[1];return o.createElement(i.MenuItem,Object.assign({},m,s,{ref:r}),(function(e){return o.createElement(C,{onItemSelect:d},o.cloneElement(v,t.objectSpread2(t.objectSpread2({},e),{},{className:n(e.className,"reactist_submenu_button")})),S)}))})),_=r.polymorphicComponent((function(e,n){var r=e.label,l=e.children,a=e.exceptionallySetClassName,s=t.objectWithoutPropertiesLoose(e,v),c=o.useContext(j),u=t.objectWithoutPropertiesLoose(c,S);return o.createElement(i.MenuGroup,Object.assign({ref:n},s,u,{className:a}),r?o.createElement("div",{role:"presentation",className:"reactist_menugroup__label"},r):null,l)}));exports.Menu=C,exports.MenuButton=x,exports.MenuGroup=_,exports.MenuItem=M,exports.MenuList=y,exports.SubMenu=N;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../_virtual/_rollupPluginBabelHelpers.js"),o=require("react"),n=(e(o),e(require("classnames"))),r=require("../../utils/polymorphism.js"),l=require("../../hooks/use-previous/use-previous.js"),i=require("reakit/Menu"),a=require("reakit/Popover"),s=["children","onItemSelect"],c=["exceptionallySetClassName"],u=["handleItemSelect"],m=["exceptionallySetClassName"],p=["handleItemSelect"],d=["value","children","onSelect","hideOnSelect","onClick","exceptionallySetClassName"],b=["handleItemSelect"],h=["children","onItemSelect"],f=["handleItemSelect"],v=["label","children","exceptionallySetClassName"],S=["handleItemSelect"],j=o.createContext({});function C(e){var n=e.children,r=e.onItemSelect,l=t.objectWithoutPropertiesLoose(e,s),a=i.useMenuState(t.objectSpread2({loop:!0,unstable_offset:[8,8]},l)),c=o.useCallback((function(e){r&&r(e)}),[r]),u=o.useMemo((function(){return t.objectSpread2(t.objectSpread2({},a),{},{handleItemSelect:c})}),[a,c]);return o.createElement(j.Provider,{value:u},n)}var x=r.polymorphicComponent((function(e,r){var l=e.exceptionallySetClassName,a=t.objectWithoutPropertiesLoose(e,c),s=o.useContext(j),m=t.objectWithoutPropertiesLoose(s,u);return o.createElement(i.MenuButton,Object.assign({},a,m,{ref:r,className:n("reactist_menubutton",l)}))})),I={width:"100%",height:"100%",position:"fixed",top:0,left:0};function P(e){return o.createElement(a.PopoverBackdrop,{baseId:e.baseId,visible:e.visible,animated:e.animated,animating:e.animating,stopAnimation:e.stopAnimation,modal:e.modal,style:I},e.children)}var y=r.polymorphicComponent((function(e,r){var a=e.exceptionallySetClassName,s=t.objectWithoutPropertiesLoose(e,m),c=o.useContext(j),u=t.objectWithoutPropertiesLoose(c,p),d=l.usePrevious(u.visible);return o.useEffect((function(){var e,t;!1===u.visible&&!0===d&&(null===(e=u.unstable_referenceRef)||void 0===e||null===(t=e.current)||void 0===t||t.focus())}),[u.visible,d,u.unstable_referenceRef]),u.visible?o.createElement(P,Object.assign({},u),o.createElement(i.Menu,Object.assign({},s,u,{ref:r,className:n("reactist_menulist",a)}))):null})),M=r.polymorphicComponent((function(e,n){var r=e.value,l=e.children,a=e.onSelect,s=e.hideOnSelect,c=void 0===s||s,u=e.onClick,m=e.exceptionallySetClassName,p=t.objectWithoutPropertiesLoose(e,d),h=o.useContext(j),f=h.handleItemSelect,v=t.objectWithoutPropertiesLoose(h,b),S=v.hide,C=o.useCallback((function(e){null==u||u(e);var t=!1!==(a&&!e.defaultPrevented?a():void 0)&&c;f(r),t&&S()}),[a,u,f,c,S,r]);return o.createElement(i.MenuItem,Object.assign({},p,v,{ref:n,onClick:C,className:m}),l)})),N=o.forwardRef((function(e,r){var l=e.children,a=e.onItemSelect,s=t.objectWithoutPropertiesLoose(e,h),c=o.useContext(j),u=c.handleItemSelect,m=t.objectWithoutPropertiesLoose(c,f),p=m.hide,d=o.useCallback((function(e){a&&a(e),u(e),p()}),[p,u,a]),b=o.Children.toArray(l),v=b[0],S=b[1];return o.createElement(i.MenuItem,Object.assign({},m,s,{ref:r}),(function(e){return o.createElement(C,{onItemSelect:d},o.cloneElement(v,t.objectSpread2(t.objectSpread2({},e),{},{className:n(e.className,"reactist_submenu_button")})),S)}))})),_=r.polymorphicComponent((function(e,n){var r=e.label,l=e.children,a=e.exceptionallySetClassName,s=t.objectWithoutPropertiesLoose(e,v),c=o.useContext(j),u=t.objectWithoutPropertiesLoose(c,S);return o.createElement(i.MenuGroup,Object.assign({ref:n},s,u,{className:a}),r?o.createElement("div",{role:"presentation",className:"reactist_menugroup__label"},r):null,l)}));exports.Menu=C,exports.MenuButton=x,exports.MenuGroup=_,exports.MenuItem=M,exports.MenuList=y,exports.SubMenu=N;
 //# sourceMappingURL=menu.js.map

package/lib/components/menu/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":["../../../src/components/menu/menu.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { usePrevious } from '../../hooks/use-previous'\n\n//\n// Reactist menu is a thin wrapper around Reakit's menu components. This may or may not be\n// temporary. Our goal is to make it transparent for the users of Reactist of this implementation\n// detail. We may change in the future the external lib we use, or even implement it all internally,\n// as long as we keep the same outer interface as intact as possible.\n//\n// Around the heavy lifting of the external lib we just add some features to better integrate the\n// menu to Reactist's more opinionated approach (e.g. using our button with its custom variants and\n// other features, easily show keyboard shortcuts in menu items, etc.)\n//\nimport * as Reakit from 'reakit/Menu'\nimport { PopoverBackdrop } from 'reakit/Popover'\n\nimport './menu.less'\n\ntype NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>\n\ntype MenuContextState = Reakit.MenuStateReturn & {\n    handleItemSelect: (value: string | null | undefined) => void\n}\n\nconst MenuContext = React.createContext<MenuContextState>(\n    // Reakit gives us no means to obtain a valid initial/default value of type MenuStateReturn\n    // (it is normally obtained by calling useMenuState but we can't call hooks outside components).\n    // This is however of little consequence since this value is only used if some of the components\n    // are used outside Menu, something that should not happen and we do not support.\n    // @ts-expect-error\n    {},\n)\n\n//\n// Menu\n//\n\ntype MenuProps = Omit<Reakit.MenuInitialState, 'visible'> & {\n    /**\n     * The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a\n     * `MenuButton` that triggers the menu to be opened or closed.\n     */\n    children: React.ReactNode\n\n    /**\n     * An optional callback that will be called back whenever a menu item is selected. It receives\n     * the `value` of the selected `MenuItem`.\n     *\n     * If you pass down this callback, it is recommended that you properly memoize it so it does not\n     * change on every render.\n     */\n    onItemSelect?: (value: string | null | undefined) => void\n}\n\n/**\n * Wrapper component to control a menu. It does not render anything, only providing the state\n * management for the menu components inside it.\n */\nfunction Menu({ children, onItemSelect, ...props }: MenuProps) {\n    const state = Reakit.useMenuState({ loop: true, ...props })\n\n    const handleItemSelect = React.useCallback(\n        function handleItemSelect(value: string | null | undefined) {\n            if (onItemSelect) onItemSelect(value)\n        },\n        [onItemSelect],\n    )\n\n    const value: MenuContextState = React.useMemo(\n        () => ({\n            ...state,\n            handleItemSelect,\n        }),\n        [state, handleItemSelect],\n    )\n\n    return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>\n}\n\n//\n// MenuButton\n//\n\ntype MenuButtonProps = Omit<Reakit.MenuButtonProps, keyof Reakit.MenuStateReturn | 'className'>\n\n/**\n * A button to toggle a dropdown menu open or closed.\n */\nconst MenuButton = polymorphicComponent<'button', MenuButtonProps>(function MenuButton(\n    { exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { handleItemSelect, ...state } = React.useContext(MenuContext)\n    return (\n        <Reakit.MenuButton\n            {...props}\n            {...state}\n            ref={ref}\n            className={classNames('reactist_menubutton', exceptionallySetClassName)}\n        />\n    )\n})\n\n//\n// MenuList\n//\n\ntype MenuBackdropProps = Reakit.MenuStateReturn & {\n    children: React.ReactNode\n}\n\nconst BACKDROP_STYLE: React.CSSProperties = {\n    width: '100%',\n    height: '100%',\n    position: 'fixed',\n    top: 0,\n    left: 0,\n}\n\n/**\n * Internal component to provide a backdrop/overlay to all menus. This is needed because reakit's\n * menus do not show an overlay by default.\n */\nfunction MenuBackdrop({\n    baseId,\n    visible,\n    animated,\n    animating,\n    stopAnimation,\n    modal,\n    children,\n}: MenuBackdropProps) {\n    return (\n        <PopoverBackdrop\n            baseId={baseId}\n            visible={visible}\n            animated={animated}\n            animating={animating}\n            stopAnimation={stopAnimation}\n            modal={modal}\n            style={BACKDROP_STYLE}\n        >\n            {children}\n        </PopoverBackdrop>\n    )\n}\n\ntype MenuListProps = Omit<Reakit.MenuProps, keyof Reakit.MenuStateReturn | 'className'>\n\n/**\n * The dropdown menu itself, containing a list of menu items.\n */\nconst MenuList = polymorphicComponent<'div', MenuListProps>(function MenuList(\n    { exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { handleItemSelect, ...state } = React.useContext(MenuContext)\n    const previousVisible = usePrevious(state.visible)\n\n    React.useEffect(\n        function focusTriggerOnClose() {\n            if (state.visible === false && previousVisible === true) {\n                state.unstable_referenceRef?.current?.focus()\n            }\n        },\n        [state.visible, previousVisible, state.unstable_referenceRef],\n    )\n\n    return state.visible ? (\n        <MenuBackdrop {...state}>\n            <Reakit.Menu\n                {...props}\n                {...state}\n                ref={ref}\n                className={classNames('reactist_menulist', exceptionallySetClassName)}\n            />\n        </MenuBackdrop>\n    ) : null\n})\n\n//\n// MenuItem\n//\n\ntype MenuItemProps = {\n    /**\n     * An optional value given to this menu item. It is passed on to the parent `Menu`'s\n     * `onItemSelect` when you provide that instead of (or alongside) providing individual\n     * `onSelect` callbacks to each menu item.\n     */\n    value?: string\n    /**\n     * The content inside the menu item.\n     */\n    children: React.ReactNode\n    /**\n     * When `true` the menu item is disabled and won't be selectable or be part of the keyboard\n     * navigation across the menu options.\n     *\n     * @default true\n     */\n    disabled?: boolean\n    /**\n     * When `true` the menu will close when the menu item is selected, in addition to performing the\n     * action that the menu item is set out to do.\n     *\n     * Set this to `false` to make sure that a given menu item does not auto-closes the menu when\n     * selected. This should be the exception and not the norm, as the default is to auto-close.\n     *\n     * @default true\n     */\n    hideOnSelect?: boolean\n    /**\n     * The action to perform when the menu item is selected.\n     *\n     * If you return `false` from this function, the menu will not auto-close when this menu item\n     * is selected. Though you should use `hideOnSelect` for this purpose, this allows you to\n     * achieve the same effect conditionally and dynamically deciding at run time.\n     */\n    onSelect?: () => unknown\n    /**\n     * The event handler called when the menu item is clicked.\n     *\n     * This is similar to `onSelect`, but a bit different. You can certainly use it to trigger the\n     * action that the menu item represents. But in general you should prefer `onSelect` for that.\n     *\n     * The main use for this handler is to get access to the click event. This can be used, for\n     * example, to call `event.preventDefault()`, which will effectively prevent the rest of the\n     * consequences of the click, including preventing `onSelect` from being called. In particular,\n     * this is useful in menu items that are links, and you want the click to not trigger navigation\n     * under some circumstances.\n     */\n    onClick?: (event: React.MouseEvent) => void\n}\n\n/**\n * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`\n * callback.\n */\nconst MenuItem = polymorphicComponent<'button', MenuItemProps>(function MenuItem(\n    {\n        value,\n        children,\n        onSelect,\n        hideOnSelect = true,\n        onClick,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    const { handleItemSelect, ...state } = React.useContext(MenuContext)\n    const { hide } = state\n\n    const handleClick = React.useCallback(\n        function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n            onClick?.(event)\n            const onSelectResult: unknown =\n                onSelect && !event.defaultPrevented ? onSelect() : undefined\n            const shouldClose = onSelectResult !== false && hideOnSelect\n            handleItemSelect(value)\n            if (shouldClose) hide()\n        },\n        [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value],\n    )\n\n    return (\n        <Reakit.MenuItem\n            {...props}\n            {...state}\n            ref={ref}\n            onClick={handleClick}\n            className={exceptionallySetClassName}\n        >\n            {children}\n        </Reakit.MenuItem>\n    )\n})\n\n//\n// SubMenu\n//\n\ntype SubMenuProps = Pick<MenuProps, 'children' | 'onItemSelect'>\n\n/**\n * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have\n * a sub-menu.\n *\n * Its children are expected to have the structure of a first level menu (a `MenuButton` and a\n * `MenuList`).\n *\n * ```jsx\n * <MenuItem label=\"Edit profile\" />\n * <SubMenu>\n *   <MenuButton>More options</MenuButton>\n *   <MenuList>\n *     <MenuItem label=\"Preferences\" />\n *     <MenuItem label=\"Sign out\" />\n *   </MenuList>\n * </SubMenu>\n * ```\n *\n * The `MenuButton` will become a menu item in the current menu items list, and it will lead to\n * opening a sub-menu with the menu items list below it.\n */\nconst SubMenu = React.forwardRef<HTMLButtonElement, SubMenuProps>(function SubMenu(\n    { children, onItemSelect, ...props },\n    ref,\n) {\n    const { handleItemSelect: parentMenuItemSelect, ...state } = React.useContext(MenuContext)\n    const { hide: parentMenuHide } = state\n\n    const handleSubItemSelect = React.useCallback(\n        function handleSubItemSelect(value) {\n            if (onItemSelect) onItemSelect(value)\n            parentMenuItemSelect(value)\n            parentMenuHide()\n        },\n        [parentMenuHide, parentMenuItemSelect, onItemSelect],\n    )\n\n    const [button, list] = React.Children.toArray(children)\n\n    return (\n        <Reakit.MenuItem {...state} {...props} ref={ref}>\n            {(buttonProps) => (\n                <Menu onItemSelect={handleSubItemSelect}>\n                    {React.cloneElement(button as React.ReactElement, {\n                        ...buttonProps,\n                        className: classNames(buttonProps.className, 'reactist_submenu_button'),\n                    })}\n                    {list}\n                </Menu>\n            )}\n        </Reakit.MenuItem>\n    )\n})\n\n//\n// MenuGroup\n//\n\ntype MenuGroupProps = Omit<NativeProps<HTMLDivElement>, 'className'> & {\n    /**\n     * A label to be shown visually and also used to semantically label the group.\n     */\n    label: string\n}\n\n/**\n * A way to semantically group some menu items.\n *\n * This group does not add any visual separator. You can do that yourself adding `<hr />` elements\n * before and/or after the group if you so wish.\n */\nconst MenuGroup = polymorphicComponent<'div', MenuGroupProps>(function MenuGroud(\n    { label, children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { handleItemSelect, ...state } = React.useContext(MenuContext)\n    return (\n        <Reakit.MenuGroup ref={ref} {...props} {...state} className={exceptionallySetClassName}>\n            {label ? (\n                <div role=\"presentation\" className=\"reactist_menugroup__label\">\n                    {label}\n                </div>\n            ) : null}\n            {children}\n        </Reakit.MenuGroup>\n    )\n})\n\nexport { Menu, MenuButton, MenuList, MenuItem, SubMenu, MenuGroup }\nexport type { MenuButtonProps, MenuListProps, MenuItemProps, SubMenuProps, MenuGroupProps }\n"],"names":["MenuContext","React","Menu","children","onItemSelect","props","state","Reakit","loop","handleItemSelect","value","Provider","MenuButton","polymorphicComponent","ref","exceptionallySetClassName","className","classNames","BACKDROP_STYLE","width","height","position","top","left","MenuBackdrop","PopoverBackdrop","baseId","visible","animated","animating","stopAnimation","modal","style","MenuList","previousVisible","usePrevious","unstable_referenceRef","current","focus","MenuItem","onSelect","hideOnSelect","onClick","hide","handleClick","event","shouldClose","defaultPrevented","undefined","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","toArray","button","list","buttonProps","MenuGroup","label","role"],"mappings":"ywBA0BMA,EAAcC,gBAMhB,IA4BJ,SAASC,SAAOC,IAAAA,SAAUC,IAAAA,aAAiBC,sCACjCC,EAAQC,gCAAsBC,MAAM,GAASH,IAE7CI,EAAmBR,eACrB,SAA0BS,GAClBN,GAAcA,EAAaM,KAEnC,CAACN,IAGCM,EAA0BT,WAC5B,qDACOK,OACHG,iBAAAA,MAEJ,CAACH,EAAOG,WAGLR,gBAACD,EAAYW,UAASD,MAAOA,GAAQP,OAY1CS,EAAaC,wBAAgD,WAE/DC,OADEC,IAAAA,0BAA8BV,wCAGOJ,aAAiBD,GAA3BM,6CAEzBL,gBAACM,8BACOF,EACAC,GACJQ,IAAKA,EACLE,UAAWC,EAAW,sBAAuBF,SAanDG,EAAsC,CACxCC,MAAO,OACPC,OAAQ,OACRC,SAAU,QACVC,IAAK,EACLC,KAAM,GAOV,SAASC,YAUDvB,gBAACwB,mBACGC,SAVRA,OAWQC,UAVRA,QAWQC,WAVRA,SAWQC,YAVRA,UAWQC,gBAVRA,cAWQC,QAVRA,MAWQC,MAAOd,KAVff,cAsBE8B,EAAWpB,wBAA2C,WAExDC,OADEC,IAAAA,0BAA8BV,wCAGOJ,aAAiBD,GAA3BM,sCACvB4B,EAAkBC,cAAY7B,EAAMqB,gBAE1C1B,aACI,oBAC0B,IAAlBK,EAAMqB,UAAyC,IAApBO,cAC3B5B,EAAM8B,gDAAuBC,wBAASC,WAG9C,CAAChC,EAAMqB,QAASO,EAAiB5B,EAAM8B,wBAGpC9B,EAAMqB,QACT1B,gBAACuB,mBAAiBlB,GACdL,gBAACM,wBACOF,EACAC,GACJQ,IAAKA,EACLE,UAAWC,EAAW,oBAAqBF,OAGnD,QA8DFwB,EAAW1B,wBAA8C,WAU3DC,OARIJ,IAAAA,MACAP,IAAAA,SACAqC,IAAAA,aACAC,aAAAA,gBACAC,IAAAA,QACA3B,IAAAA,0BACGV,wCAIgCJ,aAAiBD,GAAhDS,IAAAA,iBAAqBH,sCACrBqC,EAASrC,EAATqC,KAEFC,EAAc3C,eAChB,SAAqB4C,GACjBH,MAAAA,GAAAA,EAAUG,OAGJC,GAAiC,KADnCN,IAAaK,EAAME,iBAAmBP,SAAaQ,IACPP,EAChDhC,EAAiBC,GACboC,GAAaH,MAErB,CAACH,EAAUE,EAASjC,EAAkBgC,EAAcE,EAAMjC,WAI1DT,gBAACM,4BACOF,EACAC,GACJQ,IAAKA,EACL4B,QAASE,EACT5B,UAAWD,IAEVZ,MAgCP8C,EAAUhD,cAAkD,WAE9Da,OADEX,IAAAA,SAAUC,IAAAA,aAAiBC,wCAGgCJ,aAAiBD,GAApDkD,IAAlBzC,iBAA2CH,sCACrC6C,EAAmB7C,EAAzBqC,KAEFS,EAAsBnD,eACxB,SAA6BS,GACrBN,GAAcA,EAAaM,GAC/BwC,EAAqBxC,GACrByC,MAEJ,CAACA,EAAgBD,EAAsB9C,MAGpBH,WAAeoD,QAAQlD,GAAvCmD,OAAQC,cAGXtD,gBAACM,4BAAoBD,EAAWD,GAAOS,IAAKA,KACvC,SAAC0C,UACEvD,gBAACC,GAAKE,aAAcgD,GACfnD,eAAmBqD,qCACbE,OACHxC,UAAWC,EAAWuC,EAAYxC,UAAW,8BAEhDuC,SAwBfE,EAAY5C,wBAA4C,WAE1DC,OADE4C,IAAAA,MAAOvD,IAAAA,SAAUY,IAAAA,0BAA8BV,wCAGVJ,aAAiBD,GAA3BM,6CAEzBL,gBAACM,2BAAiBO,IAAKA,GAAST,EAAWC,GAAOU,UAAWD,IACxD2C,EACGzD,uBAAK0D,KAAK,eAAe3C,UAAU,6BAC9B0C,GAEL,KACHvD"}
+{"version":3,"file":"menu.js","sources":["../../../src/components/menu/menu.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { usePrevious } from '../../hooks/use-previous'\n\n//\n// Reactist menu is a thin wrapper around Reakit's menu components. This may or may not be\n// temporary. Our goal is to make it transparent for the users of Reactist of this implementation\n// detail. We may change in the future the external lib we use, or even implement it all internally,\n// as long as we keep the same outer interface as intact as possible.\n//\n// Around the heavy lifting of the external lib we just add some features to better integrate the\n// menu to Reactist's more opinionated approach (e.g. using our button with its custom variants and\n// other features, easily show keyboard shortcuts in menu items, etc.)\n//\nimport * as Reakit from 'reakit/Menu'\nimport { PopoverBackdrop } from 'reakit/Popover'\n\nimport './menu.less'\n\ntype NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>\n\ntype MenuContextState = Reakit.MenuStateReturn & {\n    handleItemSelect: (value: string | null | undefined) => void\n}\n\nconst MenuContext = React.createContext<MenuContextState>(\n    // Reakit gives us no means to obtain a valid initial/default value of type MenuStateReturn\n    // (it is normally obtained by calling useMenuState but we can't call hooks outside components).\n    // This is however of little consequence since this value is only used if some of the components\n    // are used outside Menu, something that should not happen and we do not support.\n    // @ts-expect-error\n    {},\n)\n\n//\n// Menu\n//\n\ntype MenuProps = Omit<Reakit.MenuInitialState, 'visible'> & {\n    /**\n     * The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a\n     * `MenuButton` that triggers the menu to be opened or closed.\n     */\n    children: React.ReactNode\n\n    /**\n     * An optional callback that will be called back whenever a menu item is selected. It receives\n     * the `value` of the selected `MenuItem`.\n     *\n     * If you pass down this callback, it is recommended that you properly memoize it so it does not\n     * change on every render.\n     */\n    onItemSelect?: (value: string | null | undefined) => void\n}\n\n/**\n * Wrapper component to control a menu. It does not render anything, only providing the state\n * management for the menu components inside it.\n */\nfunction Menu({ children, onItemSelect, ...props }: MenuProps) {\n    const state = Reakit.useMenuState({ loop: true, unstable_offset: [8, 8], ...props })\n\n    const handleItemSelect = React.useCallback(\n        function handleItemSelect(value: string | null | undefined) {\n            if (onItemSelect) onItemSelect(value)\n        },\n        [onItemSelect],\n    )\n\n    const value: MenuContextState = React.useMemo(\n        () => ({\n            ...state,\n            handleItemSelect,\n        }),\n        [state, handleItemSelect],\n    )\n\n    return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>\n}\n\n//\n// MenuButton\n//\n\ntype MenuButtonProps = Omit<Reakit.MenuButtonProps, keyof Reakit.MenuStateReturn | 'className'>\n\n/**\n * A button to toggle a dropdown menu open or closed.\n */\nconst MenuButton = polymorphicComponent<'button', MenuButtonProps>(function MenuButton(\n    { exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { handleItemSelect, ...state } = React.useContext(MenuContext)\n    return (\n        <Reakit.MenuButton\n            {...props}\n            {...state}\n            ref={ref}\n            className={classNames('reactist_menubutton', exceptionallySetClassName)}\n        />\n    )\n})\n\n//\n// MenuList\n//\n\ntype MenuBackdropProps = Reakit.MenuStateReturn & {\n    children: React.ReactNode\n}\n\nconst BACKDROP_STYLE: React.CSSProperties = {\n    width: '100%',\n    height: '100%',\n    position: 'fixed',\n    top: 0,\n    left: 0,\n}\n\n/**\n * Internal component to provide a backdrop/overlay to all menus. This is needed because reakit's\n * menus do not show an overlay by default.\n */\nfunction MenuBackdrop({\n    baseId,\n    visible,\n    animated,\n    animating,\n    stopAnimation,\n    modal,\n    children,\n}: MenuBackdropProps) {\n    return (\n        <PopoverBackdrop\n            baseId={baseId}\n            visible={visible}\n            animated={animated}\n            animating={animating}\n            stopAnimation={stopAnimation}\n            modal={modal}\n            style={BACKDROP_STYLE}\n        >\n            {children}\n        </PopoverBackdrop>\n    )\n}\n\ntype MenuListProps = Omit<Reakit.MenuProps, keyof Reakit.MenuStateReturn | 'className'>\n\n/**\n * The dropdown menu itself, containing a list of menu items.\n */\nconst MenuList = polymorphicComponent<'div', MenuListProps>(function MenuList(\n    { exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { handleItemSelect, ...state } = React.useContext(MenuContext)\n    const previousVisible = usePrevious(state.visible)\n\n    React.useEffect(\n        function focusTriggerOnClose() {\n            if (state.visible === false && previousVisible === true) {\n                state.unstable_referenceRef?.current?.focus()\n            }\n        },\n        [state.visible, previousVisible, state.unstable_referenceRef],\n    )\n\n    return state.visible ? (\n        <MenuBackdrop {...state}>\n            <Reakit.Menu\n                {...props}\n                {...state}\n                ref={ref}\n                className={classNames('reactist_menulist', exceptionallySetClassName)}\n            />\n        </MenuBackdrop>\n    ) : null\n})\n\n//\n// MenuItem\n//\n\ntype MenuItemProps = {\n    /**\n     * An optional value given to this menu item. It is passed on to the parent `Menu`'s\n     * `onItemSelect` when you provide that instead of (or alongside) providing individual\n     * `onSelect` callbacks to each menu item.\n     */\n    value?: string\n    /**\n     * The content inside the menu item.\n     */\n    children: React.ReactNode\n    /**\n     * When `true` the menu item is disabled and won't be selectable or be part of the keyboard\n     * navigation across the menu options.\n     *\n     * @default true\n     */\n    disabled?: boolean\n    /**\n     * When `true` the menu will close when the menu item is selected, in addition to performing the\n     * action that the menu item is set out to do.\n     *\n     * Set this to `false` to make sure that a given menu item does not auto-closes the menu when\n     * selected. This should be the exception and not the norm, as the default is to auto-close.\n     *\n     * @default true\n     */\n    hideOnSelect?: boolean\n    /**\n     * The action to perform when the menu item is selected.\n     *\n     * If you return `false` from this function, the menu will not auto-close when this menu item\n     * is selected. Though you should use `hideOnSelect` for this purpose, this allows you to\n     * achieve the same effect conditionally and dynamically deciding at run time.\n     */\n    onSelect?: () => unknown\n    /**\n     * The event handler called when the menu item is clicked.\n     *\n     * This is similar to `onSelect`, but a bit different. You can certainly use it to trigger the\n     * action that the menu item represents. But in general you should prefer `onSelect` for that.\n     *\n     * The main use for this handler is to get access to the click event. This can be used, for\n     * example, to call `event.preventDefault()`, which will effectively prevent the rest of the\n     * consequences of the click, including preventing `onSelect` from being called. In particular,\n     * this is useful in menu items that are links, and you want the click to not trigger navigation\n     * under some circumstances.\n     */\n    onClick?: (event: React.MouseEvent) => void\n}\n\n/**\n * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`\n * callback.\n */\nconst MenuItem = polymorphicComponent<'button', MenuItemProps>(function MenuItem(\n    {\n        value,\n        children,\n        onSelect,\n        hideOnSelect = true,\n        onClick,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    const { handleItemSelect, ...state } = React.useContext(MenuContext)\n    const { hide } = state\n\n    const handleClick = React.useCallback(\n        function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n            onClick?.(event)\n            const onSelectResult: unknown =\n                onSelect && !event.defaultPrevented ? onSelect() : undefined\n            const shouldClose = onSelectResult !== false && hideOnSelect\n            handleItemSelect(value)\n            if (shouldClose) hide()\n        },\n        [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value],\n    )\n\n    return (\n        <Reakit.MenuItem\n            {...props}\n            {...state}\n            ref={ref}\n            onClick={handleClick}\n            className={exceptionallySetClassName}\n        >\n            {children}\n        </Reakit.MenuItem>\n    )\n})\n\n//\n// SubMenu\n//\n\ntype SubMenuProps = Pick<MenuProps, 'children' | 'onItemSelect'>\n\n/**\n * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have\n * a sub-menu.\n *\n * Its children are expected to have the structure of a first level menu (a `MenuButton` and a\n * `MenuList`).\n *\n * ```jsx\n * <MenuItem label=\"Edit profile\" />\n * <SubMenu>\n *   <MenuButton>More options</MenuButton>\n *   <MenuList>\n *     <MenuItem label=\"Preferences\" />\n *     <MenuItem label=\"Sign out\" />\n *   </MenuList>\n * </SubMenu>\n * ```\n *\n * The `MenuButton` will become a menu item in the current menu items list, and it will lead to\n * opening a sub-menu with the menu items list below it.\n */\nconst SubMenu = React.forwardRef<HTMLButtonElement, SubMenuProps>(function SubMenu(\n    { children, onItemSelect, ...props },\n    ref,\n) {\n    const { handleItemSelect: parentMenuItemSelect, ...state } = React.useContext(MenuContext)\n    const { hide: parentMenuHide } = state\n\n    const handleSubItemSelect = React.useCallback(\n        function handleSubItemSelect(value) {\n            if (onItemSelect) onItemSelect(value)\n            parentMenuItemSelect(value)\n            parentMenuHide()\n        },\n        [parentMenuHide, parentMenuItemSelect, onItemSelect],\n    )\n\n    const [button, list] = React.Children.toArray(children)\n\n    return (\n        <Reakit.MenuItem {...state} {...props} ref={ref}>\n            {(buttonProps) => (\n                <Menu onItemSelect={handleSubItemSelect}>\n                    {React.cloneElement(button as React.ReactElement, {\n                        ...buttonProps,\n                        className: classNames(buttonProps.className, 'reactist_submenu_button'),\n                    })}\n                    {list}\n                </Menu>\n            )}\n        </Reakit.MenuItem>\n    )\n})\n\n//\n// MenuGroup\n//\n\ntype MenuGroupProps = Omit<NativeProps<HTMLDivElement>, 'className'> & {\n    /**\n     * A label to be shown visually and also used to semantically label the group.\n     */\n    label: string\n}\n\n/**\n * A way to semantically group some menu items.\n *\n * This group does not add any visual separator. You can do that yourself adding `<hr />` elements\n * before and/or after the group if you so wish.\n */\nconst MenuGroup = polymorphicComponent<'div', MenuGroupProps>(function MenuGroud(\n    { label, children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { handleItemSelect, ...state } = React.useContext(MenuContext)\n    return (\n        <Reakit.MenuGroup ref={ref} {...props} {...state} className={exceptionallySetClassName}>\n            {label ? (\n                <div role=\"presentation\" className=\"reactist_menugroup__label\">\n                    {label}\n                </div>\n            ) : null}\n            {children}\n        </Reakit.MenuGroup>\n    )\n})\n\nexport { Menu, MenuButton, MenuList, MenuItem, SubMenu, MenuGroup }\nexport type { MenuButtonProps, MenuListProps, MenuItemProps, SubMenuProps, MenuGroupProps }\n"],"names":["MenuContext","React","Menu","children","onItemSelect","props","state","Reakit","loop","unstable_offset","handleItemSelect","value","Provider","MenuButton","polymorphicComponent","ref","exceptionallySetClassName","className","classNames","BACKDROP_STYLE","width","height","position","top","left","MenuBackdrop","PopoverBackdrop","baseId","visible","animated","animating","stopAnimation","modal","style","MenuList","previousVisible","usePrevious","unstable_referenceRef","current","focus","MenuItem","onSelect","hideOnSelect","onClick","hide","handleClick","event","shouldClose","defaultPrevented","undefined","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","toArray","button","list","buttonProps","MenuGroup","label","role"],"mappings":"ywBA0BMA,EAAcC,gBAMhB,IA4BJ,SAASC,SAAOC,IAAAA,SAAUC,IAAAA,aAAiBC,sCACjCC,EAAQC,gCAAsBC,MAAM,EAAMC,gBAAiB,CAAC,EAAG,IAAOJ,IAEtEK,EAAmBT,eACrB,SAA0BU,GAClBP,GAAcA,EAAaO,KAEnC,CAACP,IAGCO,EAA0BV,WAC5B,qDACOK,OACHI,iBAAAA,MAEJ,CAACJ,EAAOI,WAGLT,gBAACD,EAAYY,UAASD,MAAOA,GAAQR,OAY1CU,EAAaC,wBAAgD,WAE/DC,OADEC,IAAAA,0BAA8BX,wCAGOJ,aAAiBD,GAA3BM,6CAEzBL,gBAACM,8BACOF,EACAC,GACJS,IAAKA,EACLE,UAAWC,EAAW,sBAAuBF,SAanDG,EAAsC,CACxCC,MAAO,OACPC,OAAQ,OACRC,SAAU,QACVC,IAAK,EACLC,KAAM,GAOV,SAASC,YAUDxB,gBAACyB,mBACGC,SAVRA,OAWQC,UAVRA,QAWQC,WAVRA,SAWQC,YAVRA,UAWQC,gBAVRA,cAWQC,QAVRA,MAWQC,MAAOd,KAVfhB,cAsBE+B,EAAWpB,wBAA2C,WAExDC,OADEC,IAAAA,0BAA8BX,wCAGOJ,aAAiBD,GAA3BM,sCACvB6B,EAAkBC,cAAY9B,EAAMsB,gBAE1C3B,aACI,oBAC0B,IAAlBK,EAAMsB,UAAyC,IAApBO,cAC3B7B,EAAM+B,gDAAuBC,wBAASC,WAG9C,CAACjC,EAAMsB,QAASO,EAAiB7B,EAAM+B,wBAGpC/B,EAAMsB,QACT3B,gBAACwB,mBAAiBnB,GACdL,gBAACM,wBACOF,EACAC,GACJS,IAAKA,EACLE,UAAWC,EAAW,oBAAqBF,OAGnD,QA8DFwB,EAAW1B,wBAA8C,WAU3DC,OARIJ,IAAAA,MACAR,IAAAA,SACAsC,IAAAA,aACAC,aAAAA,gBACAC,IAAAA,QACA3B,IAAAA,0BACGX,wCAIgCJ,aAAiBD,GAAhDU,IAAAA,iBAAqBJ,sCACrBsC,EAAStC,EAATsC,KAEFC,EAAc5C,eAChB,SAAqB6C,GACjBH,MAAAA,GAAAA,EAAUG,OAGJC,GAAiC,KADnCN,IAAaK,EAAME,iBAAmBP,SAAaQ,IACPP,EAChDhC,EAAiBC,GACboC,GAAaH,MAErB,CAACH,EAAUE,EAASjC,EAAkBgC,EAAcE,EAAMjC,WAI1DV,gBAACM,4BACOF,EACAC,GACJS,IAAKA,EACL4B,QAASE,EACT5B,UAAWD,IAEVb,MAgCP+C,EAAUjD,cAAkD,WAE9Dc,OADEZ,IAAAA,SAAUC,IAAAA,aAAiBC,wCAGgCJ,aAAiBD,GAApDmD,IAAlBzC,iBAA2CJ,sCACrC8C,EAAmB9C,EAAzBsC,KAEFS,EAAsBpD,eACxB,SAA6BU,GACrBP,GAAcA,EAAaO,GAC/BwC,EAAqBxC,GACrByC,MAEJ,CAACA,EAAgBD,EAAsB/C,MAGpBH,WAAeqD,QAAQnD,GAAvCoD,OAAQC,cAGXvD,gBAACM,4BAAoBD,EAAWD,GAAOU,IAAKA,KACvC,SAAC0C,UACExD,gBAACC,GAAKE,aAAciD,GACfpD,eAAmBsD,qCACbE,OACHxC,UAAWC,EAAWuC,EAAYxC,UAAW,8BAEhDuC,SAwBfE,EAAY5C,wBAA4C,WAE1DC,OADE4C,IAAAA,MAAOxD,IAAAA,SAAUa,IAAAA,0BAA8BX,wCAGVJ,aAAiBD,GAA3BM,6CAEzBL,gBAACM,2BAAiBQ,IAAKA,GAASV,EAAWC,GAAOW,UAAWD,IACxD2C,EACG1D,uBAAK2D,KAAK,eAAe3C,UAAU,6BAC9B0C,GAEL,KACHxD"}

package/lib/index.d.ts

@@ -22,8 +22,8 @@ export * from './new-components/text-area';
 export * from './new-components/text-field';
 export * from './new-components/tabs';
 export * from './new-components/modal';
+export * from './new-components/avatar';
 export * from './hooks/use-previous';
-export { default as Avatar } from './components/avatar';
 export { default as Checkbox } from './components/checkbox';
 export { default as ColorPicker, COLORS } from './components/color-picker';
 export { default as Dropdown } from './components/dropdown';

package/lib/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./new-components/box/box.js"),o=require("./new-components/columns/columns.js"),t=require("./new-components/divider/divider.js"),r=require("./new-components/inline/inline.js"),n=require("./new-components/stack/stack.js"),s=require("./new-components/hidden/hidden.js"),i=require("./new-components/hidden-visually/hidden-visually.js"),p=require("./new-components/alert/alert.js"),d=require("./new-components/loading/loading.js"),u=require("./new-components/notice/notice.js"),a=require("./new-components/heading/heading.js"),l=require("./new-components/text/text.js"),c=require("./components/tooltip/tooltip.js"),x=require("./new-components/button/button.js"),m=require("./new-components/button-link/button-link.js"),j=require("./new-components/text-link/text-link.js"),q=require("./new-components/checkbox-field/checkbox-field.js"),w=require("./new-components/password-field/password-field.js"),b=require("./new-components/select-field/select-field.js"),f=require("./new-components/switch-field/switch-field.js"),k=require("./new-components/text-area/text-area.js"),M=require("./new-components/text-field/text-field.js"),T=require("./hooks/use-previous/use-previous.js"),h=require("./new-components/tabs/tabs.js"),S=require("./new-components/modal/modal.js"),v=require("./components/avatar/index.js"),g=require("./components/checkbox/index.js"),B=require("./components/deprecated-button/index.js"),L=require("./components/dropdown/index.js"),P=require("./components/color-picker/color-picker.js"),y=require("./components/color-picker/index.js"),C=require("./components/input/index.js"),F=require("./components/keyboard-shortcut/index.js"),A=require("./components/key-capturer/key-capturer.js"),D=require("./components/key-capturer/index.js"),H=require("./components/popover/index.js"),O=require("./components/progress-bar/index.js"),I=require("./components/select/index.js"),E=require("./components/time/index.js"),K=require("./components/notification/notification.js"),N=require("./components/menu/menu.js"),R=require("./components/deprecated-modal/index.js"),_=require("./components/deprecated-loading/deprecated-loading.js");exports.Box=e.Box,exports.Column=o.Column,exports.Columns=o.Columns,exports.Divider=t.Divider,exports.Inline=r.Inline,exports.Stack=n.Stack,exports.Hidden=s.Hidden,exports.HiddenVisually=i.HiddenVisually,exports.Alert=p.Alert,exports.Loading=d.Loading,exports.Notice=u.Notice,exports.Heading=a.Heading,exports.Text=l.Text,exports.Tooltip=c.Tooltip,exports.Button=x.Button,exports.ButtonLink=m.ButtonLink,exports.TextLink=j.TextLink,exports.CheckboxField=q.CheckboxField,exports.PasswordField=w.PasswordField,exports.SelectField=b.SelectField,exports.SwitchField=f.SwitchField,exports.TextArea=k.TextArea,exports.TextField=M.TextField,exports.usePrevious=T.usePrevious,exports.Tab=h.Tab,exports.TabAwareSlot=h.TabAwareSlot,exports.TabList=h.TabList,exports.TabPanel=h.TabPanel,exports.Tabs=h.Tabs,exports.Modal=S.Modal,exports.ModalActions=S.ModalActions,exports.ModalBody=S.ModalBody,exports.ModalCloseButton=S.ModalCloseButton,exports.ModalFooter=S.ModalFooter,exports.ModalHeader=S.ModalHeader,exports.Avatar=v.default,exports.Checkbox=g.default,exports.DeprecatedButton=B.default,exports.Dropdown=L.default,exports.COLORS=P.COLORS,exports.ColorPicker=y.default,exports.Input=C.default,exports.KeyboardShortcut=F.default,exports.SUPPORTED_KEYS=A.SUPPORTED_KEYS,exports.KeyCapturer=D.default,exports.Popover=H.default,exports.ProgressBar=O.default,exports.Select=I.default,exports.Time=E.default,exports.Notification=K.Notification,exports.Menu=N.Menu,exports.MenuButton=N.MenuButton,exports.MenuGroup=N.MenuGroup,exports.MenuItem=N.MenuItem,exports.MenuList=N.MenuList,exports.SubMenu=N.SubMenu,exports.DeprecatedModal=R.default,exports.DeprecatedLoading=_.Loading;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./new-components/box/box.js"),o=require("./new-components/columns/columns.js"),t=require("./new-components/divider/divider.js"),r=require("./new-components/inline/inline.js"),n=require("./new-components/stack/stack.js"),s=require("./new-components/hidden/hidden.js"),i=require("./new-components/hidden-visually/hidden-visually.js"),p=require("./components/tooltip/tooltip.js"),d=require("./new-components/button/button.js"),u=require("./new-components/alert/alert.js"),a=require("./new-components/loading/loading.js"),l=require("./new-components/notice/notice.js"),c=require("./new-components/heading/heading.js"),x=require("./new-components/text/text.js"),m=require("./new-components/button-link/button-link.js"),j=require("./new-components/text-link/text-link.js"),q=require("./new-components/checkbox-field/checkbox-field.js"),w=require("./new-components/password-field/password-field.js"),b=require("./new-components/select-field/select-field.js"),f=require("./new-components/switch-field/switch-field.js"),k=require("./new-components/text-area/text-area.js"),M=require("./new-components/text-field/text-field.js"),T=require("./hooks/use-previous/use-previous.js"),h=require("./new-components/tabs/tabs.js"),v=require("./new-components/modal/modal.js"),S=require("./new-components/avatar/avatar.js"),g=require("./components/checkbox/index.js"),B=require("./components/deprecated-button/index.js"),L=require("./components/dropdown/index.js"),P=require("./components/color-picker/color-picker.js"),y=require("./components/color-picker/index.js"),C=require("./components/input/index.js"),F=require("./components/keyboard-shortcut/index.js"),A=require("./components/key-capturer/key-capturer.js"),D=require("./components/key-capturer/index.js"),H=require("./components/popover/index.js"),O=require("./components/progress-bar/index.js"),I=require("./components/select/index.js"),E=require("./components/time/index.js"),K=require("./components/notification/notification.js"),N=require("./components/menu/menu.js"),R=require("./components/deprecated-modal/index.js"),_=require("./components/deprecated-loading/deprecated-loading.js");exports.Box=e.Box,exports.Column=o.Column,exports.Columns=o.Columns,exports.Divider=t.Divider,exports.Inline=r.Inline,exports.Stack=n.Stack,exports.Hidden=s.Hidden,exports.HiddenVisually=i.HiddenVisually,exports.Tooltip=p.Tooltip,exports.Button=d.Button,exports.Alert=u.Alert,exports.Loading=a.Loading,exports.Notice=l.Notice,exports.Heading=c.Heading,exports.Text=x.Text,exports.ButtonLink=m.ButtonLink,exports.TextLink=j.TextLink,exports.CheckboxField=q.CheckboxField,exports.PasswordField=w.PasswordField,exports.SelectField=b.SelectField,exports.SwitchField=f.SwitchField,exports.TextArea=k.TextArea,exports.TextField=M.TextField,exports.usePrevious=T.usePrevious,exports.Tab=h.Tab,exports.TabAwareSlot=h.TabAwareSlot,exports.TabList=h.TabList,exports.TabPanel=h.TabPanel,exports.Tabs=h.Tabs,exports.Modal=v.Modal,exports.ModalActions=v.ModalActions,exports.ModalBody=v.ModalBody,exports.ModalCloseButton=v.ModalCloseButton,exports.ModalFooter=v.ModalFooter,exports.ModalHeader=v.ModalHeader,exports.Avatar=S.Avatar,exports.Checkbox=g.default,exports.DeprecatedButton=B.default,exports.Dropdown=L.default,exports.COLORS=P.COLORS,exports.ColorPicker=y.default,exports.Input=C.default,exports.KeyboardShortcut=F.default,exports.SUPPORTED_KEYS=A.SUPPORTED_KEYS,exports.KeyCapturer=D.default,exports.Popover=H.default,exports.ProgressBar=O.default,exports.Select=I.default,exports.Time=E.default,exports.Notification=K.Notification,exports.Menu=N.Menu,exports.MenuButton=N.MenuButton,exports.MenuGroup=N.MenuGroup,exports.MenuItem=N.MenuItem,exports.MenuList=N.MenuList,exports.SubMenu=N.SubMenu,exports.DeprecatedModal=R.default,exports.DeprecatedLoading=_.Loading;
 //# sourceMappingURL=index.js.map

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),l=require("../responsive-props.js"),t=require("../box/box.js"),n=require("../columns/columns.js"),r=require("../icons/alert-icon.js"),o=require("../icons/close-icon.js"),a=require("./alert.module.css.js");exports.Alert=function(s){var c=s.children,i=s.tone,u=s.closeLabel,m=s.onClose;return e.createElement(t.Box,{id:s.id,role:"alert","aria-live":"polite",padding:"small",className:[a.default.container,l.getClassNames(a.default,"tone",i)]},e.createElement(n.Columns,{space:"small",alignY:"top"},e.createElement(n.Column,{width:"content"},e.createElement(r.AlertIcon,{tone:i})),e.createElement(n.Column,null,c),null!=m?e.createElement(n.Column,{width:"content"},e.createElement("button",{type:"button",onClick:m,"aria-label":u},e.createElement(o.CloseIcon,null))):null))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),l=require("../responsive-props.js"),t=require("../box/box.js"),n=require("../columns/columns.js"),r=require("../button/button.js"),a=require("../icons/alert-icon.js"),o=require("../icons/close-icon.js"),s=require("./alert.module.css.js");exports.Alert=function(i){var u=i.children,c=i.tone,m=i.closeLabel,d=i.onClose;return e.createElement(t.Box,{id:i.id,role:"alert","aria-live":"polite",borderRadius:"standard",className:[s.default.container,l.getClassNames(s.default,"tone",c)]},e.createElement(n.Columns,{space:"small",alignY:"top"},e.createElement(n.Column,{width:"content"},e.createElement(a.AlertIcon,{tone:c})),e.createElement(n.Column,null,e.createElement(t.Box,{paddingY:"xsmall",paddingRight:null!=d&&null!=m?void 0:"small"},u)),null!=d&&null!=m?e.createElement(n.Column,{width:"content"},e.createElement(r.Button,{variant:"quaternary",size:"small",onClick:d,"aria-label":m,icon:e.createElement(o.CloseIcon,null),style:{"--reactist-btn-hover-fill":"transparent"}})):null))};
 //# sourceMappingURL=alert.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sources":["../../../src/new-components/alert/alert.tsx"],"sourcesContent":["import * as React from 'react'\nimport { AlertTone } from '../common-types'\nimport { getClassNames } from '../responsive-props'\nimport { Box } from '../box'\nimport { Columns, Column } from '../columns'\n\nimport { AlertIcon } from '../icons/alert-icon'\nimport { CloseIcon } from '../icons/close-icon'\n\nimport styles from './alert.module.css'\n\ntype AllOrNone<T> = T | { [K in keyof T]?: never }\n\ntype AlertCloseProps = AllOrNone<{\n    closeLabel: string\n    onClose: () => void\n}>\n\ntype AlertProps = {\n    id?: string\n    children: React.ReactNode\n    tone: AlertTone\n} & AlertCloseProps\n\nfunction Alert({ id, children, tone, closeLabel, onClose }: AlertProps) {\n    return (\n        <Box\n            id={id}\n            role=\"alert\"\n            aria-live=\"polite\"\n            padding=\"small\"\n            className={[styles.container, getClassNames(styles, 'tone', tone)]}\n        >\n            <Columns space=\"small\" alignY=\"top\">\n                <Column width=\"content\">\n                    <AlertIcon tone={tone} />\n                </Column>\n                <Column>{children}</Column>\n                {onClose != null ? (\n                    <Column width=\"content\">\n                        <button type=\"button\" onClick={onClose} aria-label={closeLabel}>\n                            <CloseIcon />\n                        </button>\n                    </Column>\n                ) : null}\n            </Columns>\n        </Box>\n    )\n}\n\nexport { Alert }\nexport type { AlertProps }\n"],"names":["children","tone","closeLabel","onClose","React","Box","id","role","padding","className","styles","container","getClassNames","Columns","space","alignY","Column","width","AlertIcon","type","onClick","CloseIcon"],"mappings":"sTAwBA,gBAAqBA,IAAAA,SAAUC,IAAAA,KAAMC,IAAAA,WAAYC,IAAAA,eAEzCC,gBAACC,OACGC,KAHKA,GAILC,KAAK,oBACK,SACVC,QAAQ,QACRC,UAAW,CAACC,UAAOC,UAAWC,gBAAcF,UAAQ,OAAQT,KAE5DG,gBAACS,WAAQC,MAAM,QAAQC,OAAO,OAC1BX,gBAACY,UAAOC,MAAM,WACVb,gBAACc,aAAUjB,KAAMA,KAErBG,gBAACY,cAAQhB,GACG,MAAXG,EACGC,gBAACY,UAAOC,MAAM,WACVb,0BAAQe,KAAK,SAASC,QAASjB,eAAqBD,GAChDE,gBAACiB,oBAGT"}
+{"version":3,"file":"alert.js","sources":["../../../src/new-components/alert/alert.tsx"],"sourcesContent":["import * as React from 'react'\nimport { AlertTone } from '../common-types'\nimport { getClassNames } from '../responsive-props'\nimport { Box } from '../box'\nimport { Button } from '../button'\nimport { Columns, Column } from '../columns'\n\nimport { AlertIcon } from '../icons/alert-icon'\nimport { CloseIcon } from '../icons/close-icon'\n\nimport styles from './alert.module.css'\n\ntype AllOrNone<T> = T | { [K in keyof T]?: never }\n\ntype AlertCloseProps = AllOrNone<{\n    closeLabel: string\n    onClose: () => void\n}>\n\ntype AlertProps = {\n    id?: string\n    children: React.ReactNode\n    tone: AlertTone\n} & AlertCloseProps\n\nfunction Alert({ id, children, tone, closeLabel, onClose }: AlertProps) {\n    return (\n        <Box\n            id={id}\n            role=\"alert\"\n            aria-live=\"polite\"\n            borderRadius=\"standard\"\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\n                        paddingY=\"xsmall\"\n                        paddingRight={onClose != null && closeLabel != null ? undefined : 'small'}\n                    >\n                        {children}\n                    </Box>\n                </Column>\n                {onClose != null && closeLabel != null ? (\n                    <Column width=\"content\">\n                        <Button\n                            variant=\"quaternary\"\n                            size=\"small\"\n                            onClick={onClose}\n                            aria-label={closeLabel}\n                            icon={<CloseIcon />}\n                            style={{\n                                // @ts-expect-error not sure how to make TypeScript understand custom CSS properties\n                                '--reactist-btn-hover-fill': 'transparent',\n                            }}\n                        />\n                    </Column>\n                ) : null}\n            </Columns>\n        </Box>\n    )\n}\n\nexport { Alert }\nexport type { AlertProps }\n"],"names":["children","tone","closeLabel","onClose","React","Box","id","role","borderRadius","className","styles","container","getClassNames","Columns","space","alignY","Column","width","AlertIcon","paddingY","paddingRight","undefined","Button","variant","size","onClick","icon","CloseIcon","style"],"mappings":"uVAyBA,gBAAqBA,IAAAA,SAAUC,IAAAA,KAAMC,IAAAA,WAAYC,IAAAA,eAEzCC,gBAACC,OACGC,KAHKA,GAILC,KAAK,oBACK,SACVC,aAAa,WACbC,UAAW,CAACC,UAAOC,UAAWC,gBAAcF,UAAQ,OAAQT,KAE5DG,gBAACS,WAAQC,MAAM,QAAQC,OAAO,OAC1BX,gBAACY,UAAOC,MAAM,WACVb,gBAACc,aAAUjB,KAAMA,KAErBG,gBAACY,cACGZ,gBAACC,OACGc,SAAS,SACTC,aAAyB,MAAXjB,GAAiC,MAAdD,OAAqBmB,EAAY,SAEjErB,IAGG,MAAXG,GAAiC,MAAdD,EAChBE,gBAACY,UAAOC,MAAM,WACVb,gBAACkB,UACGC,QAAQ,aACRC,KAAK,QACLC,QAAStB,eACGD,EACZwB,KAAMtB,gBAACuB,kBACPC,MAAO,6BAE0B,kBAIzC"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={container:"ad19f859","tone-info":"_7fd19074","tone-positive":"b6504efb","tone-caution":"_1668c1a3","tone-critical":"_59663dff"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={container:"eb665121","tone-info":"d0373ff9","tone-positive":"bb18dcab","tone-caution":"_0af02331","tone-critical":"f76146f9"};
 //# sourceMappingURL=alert.module.css.js.map

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

@@ -1,17 +1,20 @@
 /// <reference types="react" />
-import './avatar.less';
+import { ResponsiveProp } from '../responsive-props';
 declare type AvatarSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
 declare type Props = {
+    /** @deprecated Please use `exceptionallySetClassName` */
     className?: string;
+    exceptionallySetClassName?: string;
+    /** @deprecated */
     colorList?: string[];
-    size?: AvatarSize;
+    size?: ResponsiveProp<AvatarSize>;
     avatarUrl?: string;
     user: {
         name?: string;
         email: string;
     };
 };
-declare function Avatar({ user, avatarUrl, size, className, colorList }: Props): JSX.Element;
+declare function Avatar({ user, avatarUrl, size, className, colorList, exceptionallySetClassName, ...props }: Props): JSX.Element;
 declare namespace Avatar {
     var displayName: string;
 }

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,a=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,t=require("../responsive-props.js"),s=require("../box/box.js"),l=require("./utils.js"),i=require("./avatar.module.css.js"),o=["user","avatarUrl","size","className","colorList","exceptionallySetClassName"],c=["#fcc652","#e9952c","#e16b2d","#d84b40","#e8435a","#e5198a","#ad3889","#86389c","#a8a8a8","#98be2f","#5d9d50","#5f9f85","#5bbcb6","#32a3bf","#2bafeb","#2d88c3","#3863cc","#5e5e5e"];function u(e){var u=e.user,d=e.avatarUrl,n=e.size,b=void 0===n?"l":n,m=e.className,p=e.colorList,f=void 0===p?c:p,v=e.exceptionallySetClassName,x=a.objectWithoutPropertiesLoose(e,o),g=l.getInitials(u.name)||l.getInitials(u.email),j=b||"l",N=d?{backgroundImage:"url("+d+")",textIndent:"-9999px"}:{backgroundColor:f[l.emailToIndex(u.email,f.length)]},q=t.getClassNames(i.default,"size",j);return r.createElement(s.Box,Object.assign({className:[m,i.default.avatar,q,v],style:N},x),g)}u.displayName="Avatar",exports.Avatar=u;
+//# sourceMappingURL=avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sources":["../../../src/new-components/avatar/avatar.tsx"],"sourcesContent":["import React from 'react'\n\nimport { getInitials, emailToIndex } from './utils'\n\nimport { getClassNames, ResponsiveProp } from '../responsive-props'\nimport styles from './avatar.module.css'\nimport { Box } from '../box'\n\nconst AVATAR_COLORS = [\n    '#fcc652',\n    '#e9952c',\n    '#e16b2d',\n    '#d84b40',\n    '#e8435a',\n    '#e5198a',\n    '#ad3889',\n    '#86389c',\n    '#a8a8a8',\n    '#98be2f',\n    '#5d9d50',\n    '#5f9f85',\n    '#5bbcb6',\n    '#32a3bf',\n    '#2bafeb',\n    '#2d88c3',\n    '#3863cc',\n    '#5e5e5e',\n]\n\ntype AvatarSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl'\n\ntype Props = {\n    /** @deprecated Please use `exceptionallySetClassName` */\n    className?: string\n    exceptionallySetClassName?: string\n    /** @deprecated */\n    colorList?: string[]\n    size?: ResponsiveProp<AvatarSize>\n    avatarUrl?: string\n    user: { name?: string; email: string }\n}\n\nfunction Avatar({\n    user,\n    avatarUrl,\n    size = 'l',\n    className,\n    colorList = AVATAR_COLORS,\n    exceptionallySetClassName,\n    ...props\n}: Props) {\n    const userInitials = getInitials(user.name) || getInitials(user.email)\n    const avatarSize = size ? size : 'l'\n\n    const style = avatarUrl\n        ? {\n              backgroundImage: `url(${avatarUrl})`,\n              textIndent: '-9999px', // hide the initials\n          }\n        : {\n              backgroundColor: colorList[emailToIndex(user.email, colorList.length)],\n          }\n\n    const sizeClassName = getClassNames(styles, 'size', avatarSize)\n\n    return (\n        <Box\n            className={[className, styles.avatar, sizeClassName, exceptionallySetClassName]}\n            style={style}\n            {...props}\n        >\n            {userInitials}\n        </Box>\n    )\n}\nAvatar.displayName = 'Avatar'\n\nexport { Avatar }\n"],"names":["AVATAR_COLORS","Avatar","user","avatarUrl","size","className","colorList","exceptionallySetClassName","props","userInitials","getInitials","name","email","avatarSize","style","backgroundImage","textIndent","backgroundColor","emailToIndex","length","sizeClassName","getClassNames","styles","React","Box","avatar","displayName"],"mappings":"sZAQMA,EAAgB,CAClB,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,WAgBJ,SAASC,SACLC,IAAAA,KACAC,IAAAA,cACAC,KAAAA,aAAO,MACPC,IAAAA,cACAC,UAAAA,aAAYN,IACZO,IAAAA,0BACGC,sCAEGC,EAAeC,cAAYR,EAAKS,OAASD,cAAYR,EAAKU,OAC1DC,EAAaT,GAAc,IAE3BU,EAAQX,EACR,CACIY,uBAAwBZ,MACxBa,WAAY,WAEhB,CACIC,gBAAiBX,EAAUY,eAAahB,EAAKU,MAAON,EAAUa,UAGlEC,EAAgBC,gBAAcC,UAAQ,OAAQT,UAGhDU,gBAACC,qBACGnB,UAAW,CAACA,EAAWiB,UAAOG,OAAQL,EAAeb,GACrDO,MAAOA,GACHN,GAEHC,GAIbR,EAAOyB,YAAc"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={avatar:"_38a1be89","size-xxs":"d32e92ae","size-xs":"_0667d719","size-s":"cf529fcf","size-m":"_6e268eab","size-l":"d64c62cf","size-xl":"_44fb77de","size-xxl":"_01f85e0e","size-xxxl":"_41a5fe19","tablet-size-xxs":"_6ab1577d","tablet-size-xs":"b52a4963","tablet-size-s":"_714a8419","tablet-size-m":"_81cd4d51","tablet-size-l":"bf0a4edb","tablet-size-xl":"e4f0dabd","tablet-size-xxl":"_67ea065d","tablet-size-xxxl":"_2af7f76f","desktop-size-xxs":"_759081dc","desktop-size-xs":"_8290d1c1","desktop-size-s":"_48ea172d","desktop-size-m":"_758f6641","desktop-size-l":"f9ada088","desktop-size-xl":"d3bb7470","desktop-size-xxl":"_9a312ee3","desktop-size-xxxl":"a1d30c23"};
+//# sourceMappingURL=avatar.module.css.js.map

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

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

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

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

package/lib/new-components/avatar/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../src/new-components/avatar/utils.ts"],"sourcesContent":["function getInitials(name?: string) {\n    if (!name) {\n        return ''\n    }\n\n    const seed = name.trim().split(' ')\n    const firstInitial = seed[0]\n    const lastInitial = seed[seed.length - 1]\n\n    let initials = firstInitial[0]\n    // Better readable this way.\n    // eslint-disable-next-line @typescript-eslint/prefer-string-starts-ends-with\n    if (firstInitial[0] !== lastInitial[0]) {\n        initials += lastInitial[0]\n    }\n    return initials.toUpperCase()\n}\n\nfunction emailToIndex(email: string, maxIndex: number) {\n    const seed = email.split('@')[0]\n    const hash = seed.charCodeAt(0) + seed.charCodeAt(seed.length - 1) || 0\n    return hash % maxIndex\n}\n\nexport { getInitials, emailToIndex }\n"],"names":["email","maxIndex","seed","split","charCodeAt","length","name","trim","firstInitial","lastInitial","initials","toUpperCase"],"mappings":"yFAkBA,SAAsBA,EAAeC,OAC3BC,EAAOF,EAAMG,MAAM,KAAK,UACjBD,EAAKE,WAAW,GAAKF,EAAKE,WAAWF,EAAKG,OAAS,IAAM,GACxDJ,uBArBlB,SAAqBK,OACZA,QACM,OAGLJ,EAAOI,EAAKC,OAAOJ,MAAM,KACzBK,EAAeN,EAAK,GACpBO,EAAcP,EAAKA,EAAKG,OAAS,GAEnCK,EAAWF,EAAa,UAGxBA,EAAa,KAAOC,EAAY,KAChCC,GAAYD,EAAY,IAErBC,EAASC"}

package/lib/new-components/avatar/utils.test.d.ts

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

package/lib/new-components/base-button/base-button.d.ts

@@ -37,6 +37,10 @@ declare type CommonProps = {
      * A tooltip linked to the button element.
      */
     tooltip?: TooltipProps['content'];
+    /**
+     * The distance between the button element and the linked tooltip.
+     */
+    tooltipGapSize?: TooltipProps['gapSize'];
 };
 declare type IconButtonProps = {
     icon: IconElement;
@@ -56,8 +60,6 @@ export declare type BaseButtonProps = CommonProps & (IconButtonProps | LabelledB
  * The component that powers `Button` and `ButtonLink`, where the button styling logic and some
  * common functionality resides. This component is internal to Reactist.
  *
- * 🎨 [Figma](https://www.figma.com/file/LYlWNzvhMDh907l07mPPQk/Product-Web?node-id=4693%3A175143)
- *
  * @see Button
  * @see ButtonLink
  */

package/lib/new-components/base-button/base-button.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"),n=require("../box/box.js"),a=require("../spinner/spinner.js"),o=require("../../components/tooltip/tooltip.js"),i=require("./base-button.module.css.js"),r=["as","variant","tone","size","disabled","loading","tooltip","onClick","exceptionallySetClassName","children","startIcon","endIcon","icon"];function s(e){e.preventDefault()}exports.BaseButton=t.polymorphicComponent((function(t,u){var c=t.as,d=void 0===c?"div":c,p=t.variant,m=t.tone,f=void 0===m?"normal":m,b=t.size,v=void 0===b?"normal":b,x=t.disabled,j=void 0!==x&&x,E=t.loading,B=void 0!==E&&E,h=t.tooltip,q=t.onClick,y=t.exceptionallySetClassName,C=t.children,I=t.startIcon,N=t.endIcon,g=t.icon,S=e.objectWithoutPropertiesLoose(t,r),_=B||j,k=l.createElement(n.Box,Object.assign({},S,{as:d,ref:u,"aria-disabled":_,onClick:_?s:q,className:[y,i.default.baseButton,i.default["variant-"+p],i.default["tone-"+f],i.default["size-"+v],g?i.default.iconButton:null,j?i.default.disabled:null]}),g?B&&l.createElement(a.Spinner,null)||g:l.createElement(l.Fragment,null,I?l.createElement(n.Box,{display:"flex",className:i.default.startIcon,"aria-hidden":!0},B&&!N?l.createElement(a.Spinner,null):I):null,C?l.createElement("span",{className:i.default.label},C):null,N||B&&!I?l.createElement(n.Box,{display:"flex",className:i.default.endIcon,"aria-hidden":!0},B?l.createElement(a.Spinner,null):N):null)),z=g?null!=h?h:S["aria-label"]:h;return z?l.createElement(o.Tooltip,{content:z},k):k}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),t=require("../../utils/polymorphism.js"),n=require("../box/box.js"),a=require("../../components/tooltip/tooltip.js"),o=require("../spinner/spinner.js"),i=require("./base-button.module.css.js"),r=["as","variant","tone","size","disabled","loading","tooltip","tooltipGapSize","onClick","exceptionallySetClassName","children","startIcon","endIcon","icon"];function s(e){e.preventDefault()}exports.BaseButton=t.polymorphicComponent((function(t,u){var c=t.as,d=void 0===c?"div":c,p=t.variant,m=t.tone,f=void 0===m?"normal":m,b=t.size,v=void 0===b?"normal":b,x=t.disabled,j=void 0!==x&&x,E=t.loading,B=void 0!==E&&E,S=t.tooltip,h=t.tooltipGapSize,q=t.onClick,y=t.exceptionallySetClassName,g=t.children,z=t.startIcon,C=t.endIcon,I=t.icon,N=e.objectWithoutPropertiesLoose(t,r),_=B||j,k=l.createElement(n.Box,Object.assign({},N,{as:d,ref:u,"aria-disabled":_,onClick:_?s:q,className:[y,i.default.baseButton,i.default["variant-"+p],i.default["tone-"+f],i.default["size-"+v],I?i.default.iconButton:null,j?i.default.disabled:null]}),I?B&&l.createElement(o.Spinner,null)||I:l.createElement(l.Fragment,null,z?l.createElement(n.Box,{display:"flex",className:i.default.startIcon,"aria-hidden":!0},B&&!C?l.createElement(o.Spinner,null):z):null,g?l.createElement("span",{className:i.default.label},g):null,C||B&&!z?l.createElement(n.Box,{display:"flex",className:i.default.endIcon,"aria-hidden":!0},B?l.createElement(o.Spinner,null):C):null)),P=I?null!=S?S:N["aria-label"]:S;return P?l.createElement(a.Tooltip,{content:P,gapSize:h},k):k}));
 //# sourceMappingURL=base-button.js.map

package/lib/new-components/base-button/base-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-button.js","sources":["../../../src/new-components/base-button/base-button.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Tooltip, TooltipProps } from '../../components/tooltip'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { Box } from '../box'\nimport { Spinner } from '../spinner'\nimport styles from './base-button.module.css'\n\nfunction preventDefault(event: React.SyntheticEvent) {\n    event.preventDefault()\n}\n\ntype ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'quaternary'\ntype ButtonTone = 'normal' | 'destructive'\ntype ButtonSize = 'small' | 'normal' | 'large'\ntype IconElement = React.ReactChild\n\ntype CommonProps = {\n    /**\n     * The button's variant.\n     */\n    variant: ButtonVariant\n    /**\n     * The button's tone.\n     * @default 'normal'\n     */\n    tone?: ButtonTone\n    /**\n     * The button's size.\n     * @default 'normal'\n     */\n    size?: ButtonSize\n    /**\n     * Whether the button is disabled or not.\n     * @default false\n     */\n    disabled?: boolean\n    /**\n     * Whether the button is busy/loading.\n     *\n     * A button in this state is functionally and semantically disabled. Visually is does not look\n     * dimmed (as disabled buttons normally do), but it shows a loading spinner instead.\n     *\n     * @default false\n     */\n    loading?: boolean\n    /**\n     * A tooltip linked to the button element.\n     */\n    tooltip?: TooltipProps['content']\n}\n\ntype IconButtonProps = {\n    icon: IconElement\n    'aria-label': string\n    children?: never\n    startIcon?: never\n    endIcon?: never\n}\n\ntype LabelledButtonProps = {\n    children: NonNullable<React.ReactNode>\n    startIcon?: IconElement\n    endIcon?: IconElement\n    icon?: never\n}\n\nexport type BaseButtonProps = CommonProps & (IconButtonProps | LabelledButtonProps)\n\n/**\n * The component that powers `Button` and `ButtonLink`, where the button styling logic and some\n * common functionality resides. This component is internal to Reactist.\n *\n * 🎨 [Figma](https://www.figma.com/file/LYlWNzvhMDh907l07mPPQk/Product-Web?node-id=4693%3A175143)\n *\n * @see Button\n * @see ButtonLink\n */\nexport const BaseButton = polymorphicComponent<'div', BaseButtonProps>(function BaseButton(\n    {\n        as = 'div',\n        variant,\n        tone = 'normal',\n        size = 'normal',\n        disabled = false,\n        loading = false,\n        tooltip,\n        onClick,\n        exceptionallySetClassName,\n        children,\n        startIcon,\n        endIcon,\n        icon,\n        ...props\n    },\n    ref,\n) {\n    const isDisabled = loading || disabled\n    const buttonElement = (\n        <Box\n            {...props}\n            as={as}\n            ref={ref}\n            aria-disabled={isDisabled}\n            onClick={isDisabled ? preventDefault : onClick}\n            className={[\n                exceptionallySetClassName,\n                styles.baseButton,\n                styles[`variant-${variant}`],\n                styles[`tone-${tone}`],\n                styles[`size-${size}`],\n                icon ? styles.iconButton : null,\n                disabled ? styles.disabled : null,\n            ]}\n        >\n            {icon ? (\n                (loading && <Spinner />) || icon\n            ) : (\n                <>\n                    {startIcon ? (\n                        <Box display=\"flex\" className={styles.startIcon} aria-hidden>\n                            {loading && !endIcon ? <Spinner /> : startIcon}\n                        </Box>\n                    ) : null}\n                    {children ? <span className={styles.label}>{children}</span> : null}\n                    {endIcon || (loading && !startIcon) ? (\n                        <Box display=\"flex\" className={styles.endIcon} aria-hidden>\n                            {loading ? <Spinner /> : endIcon}\n                        </Box>\n                    ) : null}\n                </>\n            )}\n        </Box>\n    )\n\n    // If it's an icon-only button, make sure it uses the aria-label as tooltip if no tooltip was provided\n    const tooltipContent = icon ? tooltip ?? props['aria-label'] : tooltip\n    return tooltipContent ? (\n        <Tooltip content={tooltipContent}>{buttonElement}</Tooltip>\n    ) : (\n        buttonElement\n    )\n})\n"],"names":["preventDefault","event","polymorphicComponent","ref","as","variant","tone","size","disabled","loading","tooltip","onClick","exceptionallySetClassName","children","startIcon","endIcon","icon","props","isDisabled","buttonElement","React","Box","className","styles","baseButton","iconButton","Spinner","display","label","tooltipContent","Tooltip","content"],"mappings":"meAOA,SAASA,EAAeC,GACpBA,EAAMD,oCAqEgBE,wBAA6C,WAiBnEC,WAfIC,GAAAA,aAAK,QACLC,IAAAA,YACAC,KAAAA,aAAO,eACPC,KAAAA,aAAO,eACPC,SAAAA,oBACAC,QAAAA,gBACAC,IAAAA,QACAC,IAAAA,QACAC,IAAAA,0BACAC,IAAAA,SACAC,IAAAA,UACAC,IAAAA,QACAC,IAAAA,KACGC,sCAIDC,EAAaT,GAAWD,EACxBW,EACFC,gBAACC,uBACOJ,GACJb,GAAIA,EACJD,IAAKA,kBACUe,EACfP,QAASO,EAAalB,EAAiBW,EACvCW,UAAW,CACPV,EACAW,UAAOC,WACPD,qBAAkBlB,GAClBkB,kBAAejB,GACfiB,kBAAehB,GACfS,EAAOO,UAAOE,WAAa,KAC3BjB,EAAWe,UAAOf,SAAW,QAGhCQ,EACIP,GAAWW,gBAACM,iBAAeV,EAE5BI,gCACKN,EACGM,gBAACC,OAAIM,QAAQ,OAAOL,UAAWC,UAAOT,4BACjCL,IAAYM,EAAUK,gBAACM,gBAAaZ,GAEzC,KACHD,EAAWO,wBAAME,UAAWC,UAAOK,OAAQf,GAAmB,KAC9DE,GAAYN,IAAYK,EACrBM,gBAACC,OAAIM,QAAQ,OAAOL,UAAWC,UAAOR,0BACjCN,EAAUW,gBAACM,gBAAaX,GAE7B,OAOdc,EAAiBb,EAAON,MAAAA,EAAAA,EAAWO,EAAM,cAAgBP,SACxDmB,EACHT,gBAACU,WAAQC,QAASF,GAAiBV,GAEnCA"}
+{"version":3,"file":"base-button.js","sources":["../../../src/new-components/base-button/base-button.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Tooltip, TooltipProps } from '../../components/tooltip'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { Box } from '../box'\nimport { Spinner } from '../spinner'\nimport styles from './base-button.module.css'\n\nfunction preventDefault(event: React.SyntheticEvent) {\n    event.preventDefault()\n}\n\ntype ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'quaternary'\ntype ButtonTone = 'normal' | 'destructive'\ntype ButtonSize = 'small' | 'normal' | 'large'\ntype IconElement = React.ReactChild\n\ntype CommonProps = {\n    /**\n     * The button's variant.\n     */\n    variant: ButtonVariant\n    /**\n     * The button's tone.\n     * @default 'normal'\n     */\n    tone?: ButtonTone\n    /**\n     * The button's size.\n     * @default 'normal'\n     */\n    size?: ButtonSize\n    /**\n     * Whether the button is disabled or not.\n     * @default false\n     */\n    disabled?: boolean\n    /**\n     * Whether the button is busy/loading.\n     *\n     * A button in this state is functionally and semantically disabled. Visually is does not look\n     * dimmed (as disabled buttons normally do), but it shows a loading spinner instead.\n     *\n     * @default false\n     */\n    loading?: boolean\n    /**\n     * A tooltip linked to the button element.\n     */\n    tooltip?: TooltipProps['content']\n    /**\n     * The distance between the button element and the linked tooltip.\n     */\n    tooltipGapSize?: TooltipProps['gapSize']\n}\n\ntype IconButtonProps = {\n    icon: IconElement\n    'aria-label': string\n    children?: never\n    startIcon?: never\n    endIcon?: never\n}\n\ntype LabelledButtonProps = {\n    children: NonNullable<React.ReactNode>\n    startIcon?: IconElement\n    endIcon?: IconElement\n    icon?: never\n}\n\nexport type BaseButtonProps = CommonProps & (IconButtonProps | LabelledButtonProps)\n\n/**\n * The component that powers `Button` and `ButtonLink`, where the button styling logic and some\n * common functionality resides. This component is internal to Reactist.\n *\n * @see Button\n * @see ButtonLink\n */\nexport const BaseButton = polymorphicComponent<'div', BaseButtonProps>(function BaseButton(\n    {\n        as = 'div',\n        variant,\n        tone = 'normal',\n        size = 'normal',\n        disabled = false,\n        loading = false,\n        tooltip,\n        tooltipGapSize,\n        onClick,\n        exceptionallySetClassName,\n        children,\n        startIcon,\n        endIcon,\n        icon,\n        ...props\n    },\n    ref,\n) {\n    const isDisabled = loading || disabled\n    const buttonElement = (\n        <Box\n            {...props}\n            as={as}\n            ref={ref}\n            aria-disabled={isDisabled}\n            onClick={isDisabled ? preventDefault : onClick}\n            className={[\n                exceptionallySetClassName,\n                styles.baseButton,\n                styles[`variant-${variant}`],\n                styles[`tone-${tone}`],\n                styles[`size-${size}`],\n                icon ? styles.iconButton : null,\n                disabled ? styles.disabled : null,\n            ]}\n        >\n            {icon ? (\n                (loading && <Spinner />) || icon\n            ) : (\n                <>\n                    {startIcon ? (\n                        <Box display=\"flex\" className={styles.startIcon} aria-hidden>\n                            {loading && !endIcon ? <Spinner /> : startIcon}\n                        </Box>\n                    ) : null}\n                    {children ? <span className={styles.label}>{children}</span> : null}\n                    {endIcon || (loading && !startIcon) ? (\n                        <Box display=\"flex\" className={styles.endIcon} aria-hidden>\n                            {loading ? <Spinner /> : endIcon}\n                        </Box>\n                    ) : null}\n                </>\n            )}\n        </Box>\n    )\n\n    // If it's an icon-only button, make sure it uses the aria-label as tooltip if no tooltip was provided\n    const tooltipContent = icon ? tooltip ?? props['aria-label'] : tooltip\n    return tooltipContent ? (\n        <Tooltip content={tooltipContent} gapSize={tooltipGapSize}>\n            {buttonElement}\n        </Tooltip>\n    ) : (\n        buttonElement\n    )\n})\n"],"names":["preventDefault","event","polymorphicComponent","ref","as","variant","tone","size","disabled","loading","tooltip","tooltipGapSize","onClick","exceptionallySetClassName","children","startIcon","endIcon","icon","props","isDisabled","buttonElement","React","Box","className","styles","baseButton","iconButton","Spinner","display","label","tooltipContent","Tooltip","content","gapSize"],"mappings":"ofAOA,SAASA,EAAeC,GACpBA,EAAMD,oCAuEgBE,wBAA6C,WAkBnEC,WAhBIC,GAAAA,aAAK,QACLC,IAAAA,YACAC,KAAAA,aAAO,eACPC,KAAAA,aAAO,eACPC,SAAAA,oBACAC,QAAAA,gBACAC,IAAAA,QACAC,IAAAA,eACAC,IAAAA,QACAC,IAAAA,0BACAC,IAAAA,SACAC,IAAAA,UACAC,IAAAA,QACAC,IAAAA,KACGC,sCAIDC,EAAaV,GAAWD,EACxBY,EACFC,gBAACC,uBACOJ,GACJd,GAAIA,EACJD,IAAKA,kBACUgB,EACfP,QAASO,EAAanB,EAAiBY,EACvCW,UAAW,CACPV,EACAW,UAAOC,WACPD,qBAAkBnB,GAClBmB,kBAAelB,GACfkB,kBAAejB,GACfU,EAAOO,UAAOE,WAAa,KAC3BlB,EAAWgB,UAAOhB,SAAW,QAGhCS,EACIR,GAAWY,gBAACM,iBAAeV,EAE5BI,gCACKN,EACGM,gBAACC,OAAIM,QAAQ,OAAOL,UAAWC,UAAOT,4BACjCN,IAAYO,EAAUK,gBAACM,gBAAaZ,GAEzC,KACHD,EAAWO,wBAAME,UAAWC,UAAOK,OAAQf,GAAmB,KAC9DE,GAAYP,IAAYM,EACrBM,gBAACC,OAAIM,QAAQ,OAAOL,UAAWC,UAAOR,0BACjCP,EAAUY,gBAACM,gBAAaX,GAE7B,OAOdc,EAAiBb,EAAOP,MAAAA,EAAAA,EAAWQ,EAAM,cAAgBR,SACxDoB,EACHT,gBAACU,WAAQC,QAASF,EAAgBG,QAAStB,GACtCS,GAGLA"}