@doist/reactist 19.1.1 → 20.0.0

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

@@ -76,5 +76,5 @@ export declare type BaseButtonProps = CommonProps & (IconButtonProps | LabelledB
  * @see Button
  * @see ButtonLink
  */
-export declare const BaseButton: import("../../utils/polymorphism").PolymorphicComponent<"div", BaseButtonProps, "obfuscateClassName">;
+export declare const BaseButton: import("../utils/polymorphism").PolymorphicComponent<"div", BaseButtonProps, "obfuscateClassName">;
 export {};

package/lib/base-button/base-button.js

@@ -0,0 +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("../tooltip/tooltip.js"),o=require("../spinner/spinner.js"),i=require("./base-button.module.css.js");const r=["as","variant","tone","size","shape","disabled","loading","tooltip","onClick","exceptionallySetClassName","children","startIcon","endIcon","icon","width","align"];function s(e){e.preventDefault()}exports.BaseButton=t.polymorphicComponent((function(t,d){let{as:u="div",variant:c,tone:p="normal",size:m="normal",shape:f="normal",disabled:b=!1,loading:h=!1,tooltip:x,onClick:v,exceptionallySetClassName:j,children:B,startIcon:E,endIcon:g,icon:q,width:y="auto",align:S="center"}=t,C=e.objectWithoutProperties(t,r);const I=h||b,N=l.createElement(n.Box,e.objectSpread2(e.objectSpread2({},C),{},{as:u,ref:d,"aria-disabled":I,onClick:I?s:v,width:q?void 0:y,className:[j,i.default.baseButton,i.default["variant-"+c],i.default["tone-"+p],i.default["size-"+m],"rounded"===f?i.default["shape-rounded"]:null,q?i.default.iconButton:null,b?i.default.disabled:null]}),q?h&&l.createElement(o.Spinner,null)||q:l.createElement(l.Fragment,null,E?l.createElement(n.Box,{display:"flex",className:i.default.startIcon,"aria-hidden":!0},h&&!g?l.createElement(o.Spinner,null):E):null,B?l.createElement(n.Box,{as:"span",className:i.default.label,overflow:"hidden",width:"full"===y?"full":void 0,textAlign:"auto"===y?"center":S},B):null,g||h&&!E?l.createElement(n.Box,{display:"flex",className:i.default.endIcon,"aria-hidden":!0},h?l.createElement(o.Spinner,null):g):null)),w=q&&void 0===x?C["aria-label"]:x;return w?l.createElement(a.Tooltip,{content:w},N):N}));
+//# sourceMappingURL=base-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"base-button.js","sources":["../../src/base-button/base-button.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Tooltip, TooltipProps } from '../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    /**\n     * The button's tone.\n     * @default 'normal'\n     */\n    tone?: ButtonTone\n\n    /**\n     * The button's size.\n     * @default 'normal'\n     */\n    size?: ButtonSize\n\n    /**\n     * Controls the shape of the button. Specifically, it allows to make it have slightly curved\n     * corners (the default) vs. having them fully curved to the point that they are as round as\n     * possible. In icon-only buttons this allows to have the button be circular.\n     * @default 'normal'\n     */\n    shape?: 'normal' | 'rounded'\n\n    /**\n     * Whether the button is disabled or not.\n     * @default false\n     */\n    disabled?: boolean\n\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    /**\n     * A tooltip linked to the button element.\n     */\n    tooltip?: TooltipProps['content']\n}\n\ntype AlignmentProps = {\n    width: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'full'\n    align?: 'start' | 'center' | 'end'\n}\n\ntype AutoWidthProps = {\n    width?: 'auto'\n    align?: never\n}\n\ntype IconButtonProps = {\n    icon: IconElement\n    'aria-label': string\n    children?: never\n    startIcon?: never\n    endIcon?: never\n    width?: never\n    align?: never\n}\n\ntype LabelledButtonProps = {\n    children: NonNullable<React.ReactNode>\n    startIcon?: IconElement\n    endIcon?: IconElement\n    icon?: never\n} & (AutoWidthProps | AlignmentProps)\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        shape = 'normal',\n        disabled = false,\n        loading = false,\n        tooltip,\n        onClick,\n        exceptionallySetClassName,\n        children,\n        startIcon,\n        endIcon,\n        icon,\n        width = 'auto',\n        align = 'center',\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            width={icon ? undefined : width}\n            className={[\n                exceptionallySetClassName,\n                styles.baseButton,\n                styles[`variant-${variant}`],\n                styles[`tone-${tone}`],\n                styles[`size-${size}`],\n                shape === 'rounded' ? styles['shape-rounded'] : null,\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 ? (\n                        <Box\n                            as=\"span\"\n                            className={styles.label}\n                            overflow=\"hidden\"\n                            width={width === 'full' ? 'full' : undefined}\n                            textAlign={width === 'auto' ? 'center' : align}\n                        >\n                            {children}\n                        </Box>\n                    ) : 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 === undefined ? 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","shape","disabled","loading","tooltip","onClick","exceptionallySetClassName","children","startIcon","endIcon","icon","width","align","props","isDisabled","buttonElement","React","Box","undefined","className","styles","baseButton","iconButton","Spinner","display","label","overflow","textAlign","tooltipContent","Tooltip","content"],"mappings":"6eAOA,SAASA,EAAeC,GACpBA,EAAMD,oCA4FgBE,wBAA6C,WAoBnEC,OAnBAC,GACIA,EAAK,MADTC,QAEIA,EAFJC,KAGIA,EAAO,SAHXC,KAIIA,EAAO,SAJXC,MAKIA,EAAQ,SALZC,SAMIA,GAAW,EANfC,QAOIA,GAAU,UACVC,EARJC,QASIA,EATJC,0BAUIA,EAVJC,SAWIA,EAXJC,UAYIA,EAZJC,QAaIA,EAbJC,KAcIA,EAdJC,MAeIA,EAAQ,OAfZC,MAgBIA,EAAQ,YACLC,iCAIP,MAAMC,EAAaX,GAAWD,EACxBa,EACFC,gBAACC,yCACOJ,OACJhB,GAAIA,EACJD,IAAKA,kBACUkB,EACfT,QAASS,EAAarB,EAAiBY,EACvCM,MAAOD,OAAOQ,EAAYP,EAC1BQ,UAAW,CACPb,EACAc,UAAOC,WACPD,qBAAkBtB,GAClBsB,kBAAerB,GACfqB,kBAAepB,GACL,YAAVC,EAAsBmB,UAAO,iBAAmB,KAChDV,EAAOU,UAAOE,WAAa,KAC3BpB,EAAWkB,UAAOlB,SAAW,QAGhCQ,EACIP,GAAWa,gBAACO,iBAAeb,EAE5BM,gCACKR,EACGQ,gBAACC,OAAIO,QAAQ,OAAOL,UAAWC,UAAOZ,4BACjCL,IAAYM,EAAUO,gBAACO,gBAAaf,GAEzC,KACHD,EACGS,gBAACC,OACGpB,GAAG,OACHsB,UAAWC,UAAOK,MAClBC,SAAS,SACTf,MAAiB,SAAVA,EAAmB,YAASO,EACnCS,UAAqB,SAAVhB,EAAmB,SAAWC,GAExCL,GAEL,KACHE,GAAYN,IAAYK,EACrBQ,gBAACC,OAAIO,QAAQ,OAAOL,UAAWC,UAAOX,0BACjCN,EAAUa,gBAACO,gBAAad,GAE7B,OAOdmB,EAAiBlB,QAAoBQ,IAAZd,EAAwBS,EAAM,cAAgBT,EAC7E,OAAOwB,EACHZ,gBAACa,WAAQC,QAASF,GAAiBb,GAEnCA"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BoxProps } from '../box';
-import type { WithEnhancedClassName } from '../common-types';
+import type { WithEnhancedClassName } from '../utils/common-types';
 declare type FieldHintProps = {
     id: string;
     children: React.ReactNode;

package/lib/base-field/base-field.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),a=require("../box/box.js"),r=require("../stack/stack.js"),t=require("../spinner/spinner.js"),n=require("../utils/common-helpers.js"),i=require("../text/text.js"),s=require("./base-field.module.css.js");function d(a){return l.createElement(i.Text,e.objectSpread2({as:"p",tone:"secondary",size:"copy"},a))}function o(a){return l.createElement("svg",e.objectSpread2({width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a),l.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5ZM1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8ZM8.66667 10.3333C8.66667 10.7015 8.36819 11 8 11C7.63181 11 7.33333 10.7015 7.33333 10.3333C7.33333 9.96514 7.63181 9.66667 8 9.66667C8.36819 9.66667 8.66667 9.96514 8.66667 10.3333ZM8.65766 5.65766C8.65766 5.29445 8.36322 5 8 5C7.99087 5.00008 7.98631 5.00013 7.98175 5.00025C7.97719 5.00038 7.97263 5.00059 7.96352 5.00101C7.60086 5.02116 7.3232 5.33149 7.34335 5.69415L7.50077 8.52774C7.53575 9.15742 8.46425 9.15742 8.49923 8.52774L8.65665 5.69415C8.65707 5.68503 8.65728 5.68047 8.65741 5.67591C8.65754 5.67135 8.65758 5.66679 8.65766 5.65766Z",fill:"currentColor"}))}function c({id:e,children:r,tone:n}){return l.createElement(i.Text,{as:"p",tone:"error"===n?"danger":"success"===n?"positive":"normal",size:"copy",id:e},l.createElement(a.Box,{as:"span",marginRight:"xsmall",display:"inlineFlex",className:s.default.messageIcon},"loading"===n?l.createElement(t.Spinner,{size:16}):l.createElement(o,{"aria-hidden":!0})),r)}exports.BaseField=function({variant:e="default",label:t,secondaryLabel:o,auxiliaryLabel:u,hint:m,message:p,tone:x="neutral",className:b,children:f,maxWidth:C,hidden:E,"aria-describedby":h,id:y}){const g=n.useId(y),j=n.useId(),v=n.useId(),B={id:g,"aria-describedby":null!=h?h:[p?v:null,j].filter(Boolean).join(" "),"aria-invalid":"error"===x||void 0};return l.createElement(r.Stack,{space:"small",hidden:E},l.createElement(a.Box,{className:[b,s.default.container,"error"===x?s.default.error:null,"bordered"===e?s.default.bordered:null],maxWidth:C},t||o||u?l.createElement(a.Box,{as:"span",display:"flex",justifyContent:"spaceBetween",alignItems:"flexEnd"},l.createElement(i.Text,{size:"bordered"===e?"caption":"body",as:"label",htmlFor:g},t?l.createElement("span",{className:s.default.primaryLabel},t):null,o?l.createElement("span",{className:s.default.secondaryLabel}," (",o,")"):null),u?l.createElement(a.Box,{className:s.default.auxiliaryLabel,paddingLeft:"small"},u):null):null,f(B)),p?l.createElement(c,{id:v,tone:x},p):null,m?l.createElement(d,{id:j},m):null)},exports.FieldHint=d,exports.FieldMessage=c;
+//# sourceMappingURL=base-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"base-field.js","sources":["../../src/base-field/base-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box, BoxProps } from '../box'\nimport { useId } from '../utils/common-helpers'\nimport { Text } from '../text'\nimport styles from './base-field.module.css'\nimport { Stack } from '../stack'\n\nimport type { WithEnhancedClassName } from '../utils/common-types'\nimport { Spinner } from '../spinner'\n\ntype FieldHintProps = {\n    id: string\n    children: React.ReactNode\n}\n\nfunction FieldHint(props: FieldHintProps) {\n    return <Text as=\"p\" tone=\"secondary\" size=\"copy\" {...props} />\n}\n\nfunction MessageIcon(props: React.SVGProps<SVGSVGElement>) {\n    return (\n        <svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            {...props}\n        >\n            <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5ZM1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8ZM8.66667 10.3333C8.66667 10.7015 8.36819 11 8 11C7.63181 11 7.33333 10.7015 7.33333 10.3333C7.33333 9.96514 7.63181 9.66667 8 9.66667C8.36819 9.66667 8.66667 9.96514 8.66667 10.3333ZM8.65766 5.65766C8.65766 5.29445 8.36322 5 8 5C7.99087 5.00008 7.98631 5.00013 7.98175 5.00025C7.97719 5.00038 7.97263 5.00059 7.96352 5.00101C7.60086 5.02116 7.3232 5.33149 7.34335 5.69415L7.50077 8.52774C7.53575 9.15742 8.46425 9.15742 8.49923 8.52774L8.65665 5.69415C8.65707 5.68503 8.65728 5.68047 8.65741 5.67591C8.65754 5.67135 8.65758 5.66679 8.65766 5.65766Z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    )\n}\n\ntype FieldTone = 'neutral' | 'success' | 'error' | 'loading'\n\ntype FieldMessageProps = FieldHintProps & {\n    tone: FieldTone\n}\n\nfunction FieldMessage({ id, children, tone }: FieldMessageProps) {\n    const textTone = tone === 'error' ? 'danger' : tone === 'success' ? 'positive' : 'normal'\n    return (\n        <Text as=\"p\" tone={textTone} size=\"copy\" id={id}>\n            <Box as=\"span\" marginRight=\"xsmall\" display=\"inlineFlex\" className={styles.messageIcon}>\n                {tone === 'loading' ? <Spinner size={16} /> : <MessageIcon aria-hidden />}\n            </Box>\n            {children}\n        </Text>\n    )\n}\n\n//\n// BaseField\n//\n\ntype ChildrenRenderProps = {\n    id: string\n    'aria-describedby'?: string\n    'aria-invalid'?: true\n}\n\ntype HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<\n    React.InputHTMLAttributes<T>,\n    T\n>\n\ntype BaseFieldVariant = 'default' | 'bordered'\ntype BaseFieldVariantProps = {\n    /**\n     * Provides alternative visual layouts or modes that the field can be rendered in.\n     *\n     * Namely, there are two variants supported:\n     *\n     * - the default one\n     * - a \"bordered\" variant, where the border of the field surrounds also the labels, instead\n     *   of just surrounding the actual field element\n     *\n     * In both cases, the message and description texts for the field lie outside the bordered\n     * area.\n     */\n    variant?: BaseFieldVariant\n}\n\ntype BaseFieldProps = WithEnhancedClassName &\n    Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'aria-describedby'> & {\n        /**\n         * The main label for this field element.\n         *\n         * This prop is not optional. Consumers of field components must be explicit about not\n         * wanting a label by passing `label=\"\"` or `label={null}`. In those situations, consumers\n         * should make sure that fields are properly labelled semantically by other means (e.g using\n         * `aria-labelledby`, or rendering a `<label />` element referencing the field by id).\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see BaseFieldProps['secondaryLabel']\n         * @see BaseFieldProps['auxiliaryLabel']\n         */\n        label: React.ReactNode\n\n        /**\n         * An optional secondary label for this field element. It is combined with the `label` to\n         * form the field's entire accessible name (unless the field label is overriden by using\n         * `aria-label` or `aria-labelledby`).\n         *\n         * Avoid providing interactive elements in the label. Prefer `auxiliaryLabel` for that.\n         *\n         * @see BaseFieldProps['label']\n         * @see BaseFieldProps['auxiliaryLabel']\n         */\n        secondaryLabel?: React.ReactNode\n\n        /**\n         * An optional extra element to be placed to the right of the main and secondary labels.\n         *\n         * This extra element is not included in the accessible name of the field element. Its only\n         * purpose is either visual, or functional (if you include interactive elements in it).\n         *\n         * @see BaseFieldProps['label']\n         * @see BaseFieldProps['secondaryLabel']\n         */\n        auxiliaryLabel?: React.ReactNode\n\n        /**\n         * A message associated with the field. It is rendered below the field, and with an\n         * appearance that conveys the tone of the field (e.g. coloured red for errors, green for\n         * success, etc).\n         *\n         * The message element is associated to the field via the `aria-describedby` attribute. If a\n         * `hint` is provided, both the hint and the message are associated as the field accessible\n         * description.\n         *\n         * In the future, when `aria-errormessage` gets better user agent support, we should use it\n         * to associate the filed with a message when tone is `\"error\"`.\n         *\n         * @see BaseFieldProps['tone']\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid\n         */\n        message?: React.ReactNode\n\n        /**\n         * The tone with which the message, if any, is presented.\n         *\n         * If the tone is `\"error\"`, the field border turns red, and the message, if any, is also\n         * red.\n         *\n         * When the tone is `\"loading\"`, it is recommended that you also disable the field. However,\n         * this is not enforced by the component. It is only a recommendation.\n         *\n         * @see BaseFieldProps['message']\n         * @see BaseFieldProps['hint']\n         */\n        tone?: FieldTone\n\n        /**\n         * A hint or help-like content associated as the accessible description of the field. It is\n         * generally rendered below it, and with a visual style that reduces its prominence (i.e.\n         * as secondary text).\n         *\n         * It sets the `aria-describedby` attribute pointing to the element that holds the hint\n         * content.\n         *\n         * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby\n         */\n        hint?: React.ReactNode\n\n        /**\n         * The maximum width that the input field can expand to.\n         */\n        maxWidth?: BoxProps['maxWidth']\n\n        /**\n         * Used internally by components composed using `BaseField`. It is not exposed as part of\n         * the public props of such components.\n         */\n        children: (props: ChildrenRenderProps) => React.ReactNode\n    }\n\ntype FieldComponentProps<T extends HTMLElement> = Omit<\n    BaseFieldProps,\n    'children' | 'className' | 'variant'\n> &\n    Omit<HtmlInputProps<T>, 'className' | 'style'>\n\nfunction BaseField({\n    variant = 'default',\n    label,\n    secondaryLabel,\n    auxiliaryLabel,\n    hint,\n    message,\n    tone = 'neutral',\n    className,\n    children,\n    maxWidth,\n    hidden,\n    'aria-describedby': originalAriaDescribedBy,\n    id: originalId,\n}: BaseFieldProps & BaseFieldVariantProps & WithEnhancedClassName) {\n    const id = useId(originalId)\n    const hintId = useId()\n    const messageId = useId()\n\n    const ariaDescribedBy =\n        originalAriaDescribedBy ?? [message ? messageId : null, hintId].filter(Boolean).join(' ')\n\n    const childrenProps: ChildrenRenderProps = {\n        id,\n        'aria-describedby': ariaDescribedBy,\n        'aria-invalid': tone === 'error' ? true : undefined,\n    }\n\n    return (\n        <Stack space=\"small\" hidden={hidden}>\n            <Box\n                className={[\n                    className,\n                    styles.container,\n                    tone === 'error' ? styles.error : null,\n                    variant === 'bordered' ? styles.bordered : null,\n                ]}\n                maxWidth={maxWidth}\n            >\n                {label || secondaryLabel || auxiliaryLabel ? (\n                    <Box\n                        as=\"span\"\n                        display=\"flex\"\n                        justifyContent=\"spaceBetween\"\n                        alignItems=\"flexEnd\"\n                    >\n                        <Text\n                            size={variant === 'bordered' ? 'caption' : 'body'}\n                            as=\"label\"\n                            htmlFor={id}\n                        >\n                            {label ? <span className={styles.primaryLabel}>{label}</span> : null}\n                            {secondaryLabel ? (\n                                <span className={styles.secondaryLabel}>\n                                    &nbsp;({secondaryLabel})\n                                </span>\n                            ) : null}\n                        </Text>\n                        {auxiliaryLabel ? (\n                            <Box className={styles.auxiliaryLabel} paddingLeft=\"small\">\n                                {auxiliaryLabel}\n                            </Box>\n                        ) : null}\n                    </Box>\n                ) : null}\n                {children(childrenProps)}\n            </Box>\n            {message ? (\n                <FieldMessage id={messageId} tone={tone}>\n                    {message}\n                </FieldMessage>\n            ) : null}\n            {hint ? <FieldHint id={hintId}>{hint}</FieldHint> : null}\n        </Stack>\n    )\n}\n\nexport { BaseField, FieldHint, FieldMessage }\nexport type { BaseFieldVariant, BaseFieldVariantProps, FieldComponentProps }\n"],"names":["FieldHint","props","React","Text","as","tone","size","MessageIcon","width","height","viewBox","fill","xmlns","fillRule","clipRule","d","FieldMessage","id","children","Box","marginRight","display","className","styles","messageIcon","Spinner","variant","label","secondaryLabel","auxiliaryLabel","hint","message","maxWidth","hidden","aria-describedby","originalAriaDescribedBy","originalId","useId","hintId","messageId","childrenProps","filter","Boolean","join","aria-invalid","undefined","Stack","space","container","error","bordered","justifyContent","alignItems","htmlFor","primaryLabel","paddingLeft"],"mappings":"2VAeA,SAASA,EAAUC,GACf,OAAOC,gBAACC,wBAAKC,GAAG,IAAIC,KAAK,YAAYC,KAAK,QAAWL,IAGzD,SAASM,EAAYN,GACjB,OACIC,uCACIM,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,MAAM,8BACFX,GAEJC,wBACIW,SAAS,UACTC,SAAS,UACTC,EAAE,izBACFJ,KAAK,kBAYrB,SAASK,GAAaC,GAAEA,EAAFC,SAAMA,EAANb,KAAgBA,IAElC,OACIH,gBAACC,QAAKC,GAAG,IAAIC,KAFS,UAATA,EAAmB,SAAoB,YAATA,EAAqB,WAAa,SAEhDC,KAAK,OAAOW,GAAIA,GACzCf,gBAACiB,OAAIf,GAAG,OAAOgB,YAAY,SAASC,QAAQ,aAAaC,UAAWC,UAAOC,aAC7D,YAATnB,EAAqBH,gBAACuB,WAAQnB,KAAM,KAASJ,gBAACK,uBAElDW,qBA2Ib,UAAmBQ,QACfA,EAAU,UADKC,MAEfA,EAFeC,eAGfA,EAHeC,eAIfA,EAJeC,KAKfA,EALeC,QAMfA,EANe1B,KAOfA,EAAO,UAPQiB,UAQfA,EAReJ,SASfA,EATec,SAUfA,EAVeC,OAWfA,EACAC,mBAAoBC,EACpBlB,GAAImB,IAEJ,MAAMnB,EAAKoB,QAAMD,GACXE,EAASD,UACTE,EAAYF,UAKZG,EAAqC,CACvCvB,GAAAA,EACAiB,yBAJAC,EAAAA,EAA2B,CAACJ,EAAUQ,EAAY,KAAMD,GAAQG,OAAOC,SAASC,KAAK,KAKrFC,eAAyB,UAATvC,QAA0BwC,GAG9C,OACI3C,gBAAC4C,SAAMC,MAAM,QAAQd,OAAQA,GACzB/B,gBAACiB,OACGG,UAAW,CACPA,EACAC,UAAOyB,UACE,UAAT3C,EAAmBkB,UAAO0B,MAAQ,KACtB,aAAZvB,EAAyBH,UAAO2B,SAAW,MAE/ClB,SAAUA,GAETL,GAASC,GAAkBC,EACxB3B,gBAACiB,OACGf,GAAG,OACHiB,QAAQ,OACR8B,eAAe,eACfC,WAAW,WAEXlD,gBAACC,QACGG,KAAkB,aAAZoB,EAAyB,UAAY,OAC3CtB,GAAG,QACHiD,QAASpC,GAERU,EAAQzB,wBAAMoB,UAAWC,UAAO+B,cAAe3B,GAAgB,KAC/DC,EACG1B,wBAAMoB,UAAWC,UAAOK,qBACZA,OAEZ,MAEPC,EACG3B,gBAACiB,OAAIG,UAAWC,UAAOM,eAAgB0B,YAAY,SAC9C1B,GAEL,MAER,KACHX,EAASsB,IAEbT,EACG7B,gBAACc,GAAaC,GAAIsB,EAAWlC,KAAMA,GAC9B0B,GAEL,KACHD,EAAO5B,gBAACF,GAAUiB,GAAIqB,GAASR,GAAoB"}

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

@@ -1,5 +1,5 @@
-import type { ResponsiveProp } from '../responsive-props';
-import type { DividerWeight, Space, SpaceWithNegatives, WithEnhancedClassName } from '../common-types';
+import type { ResponsiveProp } from '../utils/responsive-props';
+import type { DividerWeight, Space, SpaceWithNegatives, WithEnhancedClassName } from '../utils/common-types';
 interface BoxPaddingProps {
     padding?: ResponsiveProp<Space>;
     paddingX?: ResponsiveProp<Space>;
@@ -58,6 +58,6 @@ interface BoxProps extends WithEnhancedClassName, ReusableBoxProps, BoxMarginPro
     height?: 'full';
     textAlign?: ResponsiveProp<BoxTextAlign>;
 }
-declare const Box: import("../../utils/polymorphism").PolymorphicComponent<"div", BoxProps, "keepClassName">;
+declare const Box: import("../utils/polymorphism").PolymorphicComponent<"div", BoxProps, "keepClassName">;
 export type { BoxProps, BoxPaddingProps, BoxMarginProps, ReusableBoxProps, BoxMinWidth, BoxMaxWidth, BoxDisplay, BoxPosition, BoxFlexDirection, BoxFlexWrap, BoxAlignItems, BoxJustifyContent, BoxOverflow, BoxTextAlign, BoxBackground, BoxBorderRadius, };
 export { Box };

package/lib/{new-components/box → box}/box.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 l=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),t=(e(a),e(require("classnames"))),s=require("../../utils/polymorphism.js"),n=require("../responsive-props.js"),i=require("./box.module.css.js"),d=require("./padding.module.css.js"),r=require("./margin.module.css.js"),u=require("./width.module.css.js"),g=require("./gap.module.css.js");const o=["as","position","display","flexDirection","flexWrap","flexGrow","flexShrink","gap","alignItems","justifyContent","alignSelf","overflow","width","height","background","border","borderRadius","minWidth","maxWidth","textAlign","padding","paddingY","paddingX","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginY","marginX","marginTop","marginRight","marginBottom","marginLeft","className","children"];exports.Box=s.polymorphicComponent((function(e,s){var m,f,p,c,C,h,N,x;let{as:b="div",position:j="static",display:S,flexDirection:w="row",flexWrap:y,flexGrow:q,flexShrink:v,gap:W,alignItems:R,justifyContent:B,alignSelf:L,overflow:T,width:k,height:X,background:Y,border:_,borderRadius:A,minWidth:D,maxWidth:G,textAlign:I,padding:P,paddingY:E,paddingX:F,paddingTop:H,paddingRight:M,paddingBottom:O,paddingLeft:z,margin:J,marginY:K,marginX:Q,marginTop:U,marginRight:V,marginBottom:Z,marginLeft:$,className:ee,children:le}=e,ae=l.objectWithoutProperties(e,o);const te=null!=(m=null!=H?H:E)?m:P,se=null!=(f=null!=M?M:F)?f:P,ne=null!=(p=null!=O?O:E)?p:P,ie=null!=(c=null!=z?z:F)?c:P,de=null!=(C=null!=U?U:K)?C:J,re=null!=(h=null!=V?V:Q)?h:J,ue=null!=(N=null!=Z?Z:K)?N:J,ge=null!=(x=null!=$?$:Q)?x:J,oe=!S||"string"==typeof S&&"flex"!==S&&"inlineFlex"!==S;return a.createElement(b,l.objectSpread2(l.objectSpread2({},ae),{},{className:t(ee,i.default.box,S?n.getClassNames(i.default,"display",S):null,"static"!==j?n.getClassNames(i.default,"position",j):null,null!=D?n.getClassNames(u.default,"minWidth",String(D)):null,n.getClassNames(u.default,"maxWidth",G),n.getClassNames(i.default,"textAlign",I),n.getClassNames(d.default,"paddingTop",te),n.getClassNames(d.default,"paddingRight",se),n.getClassNames(d.default,"paddingBottom",ne),n.getClassNames(d.default,"paddingLeft",ie),n.getClassNames(r.default,"marginTop",de),n.getClassNames(r.default,"marginRight",re),n.getClassNames(r.default,"marginBottom",ue),n.getClassNames(r.default,"marginLeft",ge),oe?null:n.getClassNames(i.default,"flexDirection",w),oe?null:n.getClassNames(i.default,"flexWrap",y),oe?null:n.getClassNames(i.default,"alignItems",R),oe?null:n.getClassNames(i.default,"justifyContent",B),null!=L?n.getClassNames(i.default,"alignSelf",L):null,null!=v?n.getClassNames(i.default,"flexShrink",String(v)):null,null!=q?n.getClassNames(i.default,"flexGrow",String(q)):null,W?n.getClassNames(g.default,"gap",W):null,n.getClassNames(i.default,"overflow",T),null!=k?n.getClassNames(u.default,"width",String(k)):null,n.getClassNames(i.default,"height",X),n.getClassNames(i.default,"bg",Y),"none"!==A?n.getClassNames(i.default,"borderRadius",A):null,"none"!==_?n.getClassNames(i.default,"border",_):null)||void 0,ref:s}),le)}));
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var l=require("../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),t=(e(a),e(require("classnames"))),s=require("../utils/polymorphism.js"),n=require("../utils/responsive-props.js"),i=require("./box.module.css.js"),d=require("./padding.module.css.js"),r=require("./margin.module.css.js"),u=require("./width.module.css.js"),g=require("./gap.module.css.js");const o=["as","position","display","flexDirection","flexWrap","flexGrow","flexShrink","gap","alignItems","justifyContent","alignSelf","overflow","width","height","background","border","borderRadius","minWidth","maxWidth","textAlign","padding","paddingY","paddingX","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginY","marginX","marginTop","marginRight","marginBottom","marginLeft","className","children"];exports.Box=s.polymorphicComponent((function(e,s){var m,f,p,c,C,h,N,x;let{as:b="div",position:j="static",display:S,flexDirection:w="row",flexWrap:y,flexGrow:q,flexShrink:v,gap:W,alignItems:R,justifyContent:B,alignSelf:L,overflow:T,width:k,height:X,background:Y,border:_,borderRadius:A,minWidth:D,maxWidth:G,textAlign:I,padding:P,paddingY:E,paddingX:F,paddingTop:H,paddingRight:M,paddingBottom:O,paddingLeft:z,margin:J,marginY:K,marginX:Q,marginTop:U,marginRight:V,marginBottom:Z,marginLeft:$,className:ee,children:le}=e,ae=l.objectWithoutProperties(e,o);const te=null!=(m=null!=H?H:E)?m:P,se=null!=(f=null!=M?M:F)?f:P,ne=null!=(p=null!=O?O:E)?p:P,ie=null!=(c=null!=z?z:F)?c:P,de=null!=(C=null!=U?U:K)?C:J,re=null!=(h=null!=V?V:Q)?h:J,ue=null!=(N=null!=Z?Z:K)?N:J,ge=null!=(x=null!=$?$:Q)?x:J,oe=!S||"string"==typeof S&&"flex"!==S&&"inlineFlex"!==S;return a.createElement(b,l.objectSpread2(l.objectSpread2({},ae),{},{className:t(ee,i.default.box,S?n.getClassNames(i.default,"display",S):null,"static"!==j?n.getClassNames(i.default,"position",j):null,null!=D?n.getClassNames(u.default,"minWidth",String(D)):null,n.getClassNames(u.default,"maxWidth",G),n.getClassNames(i.default,"textAlign",I),n.getClassNames(d.default,"paddingTop",te),n.getClassNames(d.default,"paddingRight",se),n.getClassNames(d.default,"paddingBottom",ne),n.getClassNames(d.default,"paddingLeft",ie),n.getClassNames(r.default,"marginTop",de),n.getClassNames(r.default,"marginRight",re),n.getClassNames(r.default,"marginBottom",ue),n.getClassNames(r.default,"marginLeft",ge),oe?null:n.getClassNames(i.default,"flexDirection",w),oe?null:n.getClassNames(i.default,"flexWrap",y),oe?null:n.getClassNames(i.default,"alignItems",R),oe?null:n.getClassNames(i.default,"justifyContent",B),null!=L?n.getClassNames(i.default,"alignSelf",L):null,null!=v?n.getClassNames(i.default,"flexShrink",String(v)):null,null!=q?n.getClassNames(i.default,"flexGrow",String(q)):null,W?n.getClassNames(g.default,"gap",W):null,n.getClassNames(i.default,"overflow",T),null!=k?n.getClassNames(u.default,"width",String(k)):null,n.getClassNames(i.default,"height",X),n.getClassNames(i.default,"bg",Y),"none"!==A?n.getClassNames(i.default,"borderRadius",A):null,"none"!==_?n.getClassNames(i.default,"border",_):null)||void 0,ref:s}),le)}));
 //# sourceMappingURL=box.js.map

package/lib/box/box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.js","sources":["../../src/box/box.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { polymorphicComponent } from '../utils/polymorphism'\nimport { getClassNames } from '../utils/responsive-props'\n\nimport type { ResponsiveProp } from '../utils/responsive-props'\nimport type {\n    DividerWeight,\n    Space,\n    SpaceWithNegatives,\n    WithEnhancedClassName,\n} from '../utils/common-types'\n\nimport styles from './box.module.css'\nimport paddingStyles from './padding.module.css'\nimport marginStyles from './margin.module.css'\nimport widthStyles from './width.module.css'\nimport gapStyles from './gap.module.css'\n\ninterface BoxPaddingProps {\n    padding?: ResponsiveProp<Space>\n    paddingX?: ResponsiveProp<Space>\n    paddingY?: ResponsiveProp<Space>\n    paddingTop?: ResponsiveProp<Space>\n    paddingRight?: ResponsiveProp<Space>\n    paddingBottom?: ResponsiveProp<Space>\n    paddingLeft?: ResponsiveProp<Space>\n}\n\ninterface BoxMarginProps {\n    margin?: ResponsiveProp<SpaceWithNegatives>\n    marginX?: ResponsiveProp<SpaceWithNegatives>\n    marginY?: ResponsiveProp<SpaceWithNegatives>\n    marginTop?: ResponsiveProp<SpaceWithNegatives>\n    marginRight?: ResponsiveProp<SpaceWithNegatives>\n    marginBottom?: ResponsiveProp<SpaceWithNegatives>\n    marginLeft?: ResponsiveProp<SpaceWithNegatives>\n}\n\ntype BoxDisplay = 'block' | 'flex' | 'inline' | 'inlineBlock' | 'inlineFlex' | 'none'\ntype BoxFlexDirection = 'column' | 'row'\ntype BoxFlexWrap = 'nowrap' | 'wrap'\ntype BoxAlignItems = 'center' | 'flexEnd' | 'flexStart' | 'baseline'\ntype BoxJustifyContent =\n    | 'center'\n    | 'flexEnd'\n    | 'flexStart'\n    | 'spaceAround'\n    | 'spaceBetween'\n    | 'spaceEvenly'\ntype BoxAlignSelf = 'flexStart' | 'flexEnd' | 'center' | 'baseline' | 'stretch'\ntype BoxOverflow = 'hidden' | 'auto' | 'visible' | 'scroll'\n\ntype BoxMaxMinWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'\ntype BoxMinWidth = 0 | BoxMaxMinWidth\ntype BoxMaxWidth = BoxMaxMinWidth | 'full'\ntype BoxWidth = 0 | BoxMaxMinWidth | 'full' | 'auto' | 'maxContent' | 'minContent' | 'fitContent'\ntype BoxBackground = 'default' | 'aside' | 'highlight' | 'selected' | 'toast'\ntype BoxBorderRadius = 'standard' | 'none' | 'full'\n\ninterface BorderProps {\n    borderRadius?: BoxBorderRadius\n    border?: DividerWeight\n}\n\ninterface ReusableBoxProps extends BorderProps, BoxPaddingProps {\n    minWidth?: BoxMinWidth\n    maxWidth?: BoxMaxWidth\n    width?: BoxWidth\n    background?: BoxBackground\n    flexGrow?: 0 | 1\n    flexShrink?: 0\n}\n\ntype BoxPosition = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky'\ntype BoxTextAlign = 'start' | 'center' | 'end' | 'justify'\n\ninterface BoxProps extends WithEnhancedClassName, ReusableBoxProps, BoxMarginProps {\n    position?: ResponsiveProp<BoxPosition>\n    display?: ResponsiveProp<BoxDisplay>\n    flexDirection?: ResponsiveProp<BoxFlexDirection>\n    flexWrap?: BoxFlexWrap\n    gap?: ResponsiveProp<Space | 'none'>\n    alignItems?: ResponsiveProp<BoxAlignItems>\n    alignSelf?: ResponsiveProp<BoxAlignSelf>\n    justifyContent?: ResponsiveProp<BoxJustifyContent>\n    overflow?: BoxOverflow\n    height?: 'full'\n    textAlign?: ResponsiveProp<BoxTextAlign>\n}\n\nconst Box = polymorphicComponent<'div', BoxProps, 'keepClassName'>(function Box(\n    {\n        as: component = 'div',\n        position = 'static',\n        display,\n        flexDirection = 'row',\n        flexWrap,\n        flexGrow,\n        flexShrink,\n        gap,\n        alignItems,\n        justifyContent,\n        alignSelf,\n        overflow,\n        width,\n        height,\n        background,\n        border,\n        borderRadius,\n        minWidth,\n        maxWidth,\n        textAlign,\n        padding,\n        paddingY,\n        paddingX,\n        paddingTop,\n        paddingRight,\n        paddingBottom,\n        paddingLeft,\n        margin,\n        marginY,\n        marginX,\n        marginTop,\n        marginRight,\n        marginBottom,\n        marginLeft,\n        className,\n        children,\n        ...props\n    },\n    ref,\n) {\n    const resolvedPaddingTop = paddingTop ?? paddingY ?? padding\n    const resolvedPaddingRight = paddingRight ?? paddingX ?? padding\n    const resolvedPaddingBottom = paddingBottom ?? paddingY ?? padding\n    const resolvedPaddingLeft = paddingLeft ?? paddingX ?? padding\n\n    const resolvedMarginTop = marginTop ?? marginY ?? margin\n    const resolvedMarginRight = marginRight ?? marginX ?? margin\n    const resolvedMarginBottom = marginBottom ?? marginY ?? margin\n    const resolvedMarginLeft = marginLeft ?? marginX ?? margin\n\n    const omitFlex =\n        !display || (typeof display === 'string' && display !== 'flex' && display !== 'inlineFlex')\n\n    return React.createElement(\n        component,\n        {\n            ...props,\n            className:\n                classNames(\n                    className,\n                    styles.box,\n                    display ? getClassNames(styles, 'display', display) : null,\n                    position !== 'static' ? getClassNames(styles, 'position', position) : null,\n                    minWidth != null\n                        ? getClassNames(widthStyles, 'minWidth', String(minWidth))\n                        : null,\n                    getClassNames(widthStyles, 'maxWidth', maxWidth),\n                    getClassNames(styles, 'textAlign', textAlign),\n                    // padding\n                    getClassNames(paddingStyles, 'paddingTop', resolvedPaddingTop),\n                    getClassNames(paddingStyles, 'paddingRight', resolvedPaddingRight),\n                    getClassNames(paddingStyles, 'paddingBottom', resolvedPaddingBottom),\n                    getClassNames(paddingStyles, 'paddingLeft', resolvedPaddingLeft),\n                    // margin\n                    getClassNames(marginStyles, 'marginTop', resolvedMarginTop),\n                    getClassNames(marginStyles, 'marginRight', resolvedMarginRight),\n                    getClassNames(marginStyles, 'marginBottom', resolvedMarginBottom),\n                    getClassNames(marginStyles, 'marginLeft', resolvedMarginLeft),\n                    // flex props\n                    omitFlex ? null : getClassNames(styles, 'flexDirection', flexDirection),\n                    omitFlex ? null : getClassNames(styles, 'flexWrap', flexWrap),\n                    omitFlex ? null : getClassNames(styles, 'alignItems', alignItems),\n                    omitFlex ? null : getClassNames(styles, 'justifyContent', justifyContent),\n                    alignSelf != null ? getClassNames(styles, 'alignSelf', alignSelf) : null,\n                    flexShrink != null\n                        ? getClassNames(styles, 'flexShrink', String(flexShrink))\n                        : null,\n                    flexGrow != null ? getClassNames(styles, 'flexGrow', String(flexGrow)) : null,\n                    gap ? getClassNames(gapStyles, 'gap', gap) : null,\n                    // other props\n                    getClassNames(styles, 'overflow', overflow),\n                    width != null ? getClassNames(widthStyles, 'width', String(width)) : null,\n                    getClassNames(styles, 'height', height),\n                    getClassNames(styles, 'bg', background),\n                    borderRadius !== 'none'\n                        ? getClassNames(styles, 'borderRadius', borderRadius)\n                        : null,\n                    border !== 'none' ? getClassNames(styles, 'border', border) : null,\n                ) || undefined,\n            ref,\n        },\n        children,\n    )\n})\n\nexport type {\n    BoxProps,\n    BoxPaddingProps,\n    BoxMarginProps,\n    ReusableBoxProps,\n    BoxMinWidth,\n    BoxMaxWidth,\n    BoxDisplay,\n    BoxPosition,\n    BoxFlexDirection,\n    BoxFlexWrap,\n    BoxAlignItems,\n    BoxJustifyContent,\n    BoxOverflow,\n    BoxTextAlign,\n    BoxBackground,\n    BoxBorderRadius,\n}\n\nexport { Box }\n"],"names":["polymorphicComponent","ref","as","component","position","display","flexDirection","flexWrap","flexGrow","flexShrink","gap","alignItems","justifyContent","alignSelf","overflow","width","height","background","border","borderRadius","minWidth","maxWidth","textAlign","padding","paddingY","paddingX","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginY","marginX","marginTop","marginRight","marginBottom","marginLeft","className","children","props","resolvedPaddingTop","resolvedPaddingRight","resolvedPaddingBottom","resolvedPaddingLeft","resolvedMarginTop","resolvedMarginRight","resolvedMarginBottom","resolvedMarginLeft","omitFlex","React","classNames","styles","box","getClassNames","widthStyles","String","paddingStyles","marginStyles","gapStyles","undefined"],"mappings":"i7BA2FYA,wBAAuD,WAwC/DC,2BAtCIC,GAAIC,EAAY,MADpBC,SAEIA,EAAW,SAFfC,QAGIA,EAHJC,cAIIA,EAAgB,MAJpBC,SAKIA,EALJC,SAMIA,EANJC,WAOIA,EAPJC,IAQIA,EARJC,WASIA,EATJC,eAUIA,EAVJC,UAWIA,EAXJC,SAYIA,EAZJC,MAaIA,EAbJC,OAcIA,EAdJC,WAeIA,EAfJC,OAgBIA,EAhBJC,aAiBIA,EAjBJC,SAkBIA,EAlBJC,SAmBIA,EAnBJC,UAoBIA,EApBJC,QAqBIA,EArBJC,SAsBIA,EAtBJC,SAuBIA,EAvBJC,WAwBIA,EAxBJC,aAyBIA,EAzBJC,cA0BIA,EA1BJC,YA2BIA,EA3BJC,OA4BIA,EA5BJC,QA6BIA,EA7BJC,QA8BIA,EA9BJC,UA+BIA,EA/BJC,YAgCIA,EAhCJC,aAiCIA,EAjCJC,WAkCIA,EAlCJC,UAmCIA,GAnCJC,SAoCIA,MACGC,kCAIP,MAAMC,kBAAqBd,EAAAA,EAAcF,KAAYD,EAC/CkB,kBAAuBd,EAAAA,EAAgBF,KAAYF,EACnDmB,kBAAwBd,EAAAA,EAAiBJ,KAAYD,EACrDoB,kBAAsBd,EAAAA,EAAeJ,KAAYF,EAEjDqB,kBAAoBX,EAAAA,EAAaF,KAAWD,EAC5Ce,kBAAsBX,EAAAA,EAAeF,KAAWF,EAChDgB,kBAAuBX,EAAAA,EAAgBJ,KAAWD,EAClDiB,kBAAqBX,EAAAA,EAAcJ,KAAWF,EAE9CkB,IACD3C,GAA+B,iBAAZA,GAAoC,SAAZA,GAAkC,eAAZA,EAEtE,OAAO4C,gBACH9C,qCAEOoC,QACHF,UACIa,EACIb,GACAc,UAAOC,IACP/C,EAAUgD,gBAAcF,UAAQ,UAAW9C,GAAW,KACzC,WAAbD,EAAwBiD,gBAAcF,UAAQ,WAAY/C,GAAY,KAC1D,MAAZgB,EACMiC,gBAAcC,UAAa,WAAYC,OAAOnC,IAC9C,KACNiC,gBAAcC,UAAa,WAAYjC,GACvCgC,gBAAcF,UAAQ,YAAa7B,GAEnC+B,gBAAcG,UAAe,aAAchB,IAC3Ca,gBAAcG,UAAe,eAAgBf,IAC7CY,gBAAcG,UAAe,gBAAiBd,IAC9CW,gBAAcG,UAAe,cAAeb,IAE5CU,gBAAcI,UAAc,YAAab,IACzCS,gBAAcI,UAAc,cAAeZ,IAC3CQ,gBAAcI,UAAc,eAAgBX,IAC5CO,gBAAcI,UAAc,aAAcV,IAE1CC,GAAW,KAAOK,gBAAcF,UAAQ,gBAAiB7C,GACzD0C,GAAW,KAAOK,gBAAcF,UAAQ,WAAY5C,GACpDyC,GAAW,KAAOK,gBAAcF,UAAQ,aAAcxC,GACtDqC,GAAW,KAAOK,gBAAcF,UAAQ,iBAAkBvC,GAC7C,MAAbC,EAAoBwC,gBAAcF,UAAQ,YAAatC,GAAa,KACtD,MAAdJ,EACM4C,gBAAcF,UAAQ,aAAcI,OAAO9C,IAC3C,KACM,MAAZD,EAAmB6C,gBAAcF,UAAQ,WAAYI,OAAO/C,IAAa,KACzEE,EAAM2C,gBAAcK,UAAW,MAAOhD,GAAO,KAE7C2C,gBAAcF,UAAQ,WAAYrC,GACzB,MAATC,EAAgBsC,gBAAcC,UAAa,QAASC,OAAOxC,IAAU,KACrEsC,gBAAcF,UAAQ,SAAUnC,GAChCqC,gBAAcF,UAAQ,KAAMlC,GACX,SAAjBE,EACMkC,gBAAcF,UAAQ,eAAgBhC,GACtC,KACK,SAAXD,EAAoBmC,gBAAcF,UAAQ,SAAUjC,GAAU,YAC7DyC,EACT1D,IAAAA,IAEJqC"}

package/lib/button/button.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),a=require("../base-button/base-button.js");const r=["variant","tone","size","type","disabled","exceptionallySetClassName"];exports.Button=t.forwardRef((function(o,s){let{variant:l,tone:n="normal",size:i="normal",type:u="button",disabled:b=!1,exceptionallySetClassName:p}=o,c=e.objectWithoutProperties(o,r);return t.createElement(a.BaseButton,e.objectSpread2(e.objectSpread2({},c),{},{as:"button",ref:s,variant:l,tone:n,size:i,type:u,disabled:b,exceptionallySetClassName:p}))}));
+//# sourceMappingURL=button.js.map

package/lib/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sources":["../../src/button/button.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseButton } from '../base-button'\nimport type { BaseButtonProps } from '../base-button'\n\ntype NativeButtonProps = Omit<\n    React.AllHTMLAttributes<HTMLButtonElement>,\n    'aria-disabled' | 'className' | keyof BaseButtonProps\n>\n\nexport type ButtonProps = NativeButtonProps &\n    BaseButtonProps & {\n        type?: 'button' | 'submit' | 'reset'\n        exceptionallySetClassName?: string\n    }\n\n/**\n * A semantic button that also looks like a button, and provides all the necessary visual variants.\n * It follows the [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).\n *\n * @see ButtonLink\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n    {\n        variant,\n        tone = 'normal',\n        size = 'normal',\n        type = 'button',\n        disabled = false,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseButton\n            {...props}\n            as=\"button\"\n            ref={ref}\n            variant={variant}\n            tone={tone}\n            size={size}\n            type={type}\n            disabled={disabled}\n            exceptionallySetClassName={exceptionallySetClassName}\n        />\n    )\n})\n"],"names":["React","ref","variant","tone","size","type","disabled","exceptionallySetClassName","props","BaseButton","as"],"mappings":"2RAqBsBA,cAAiD,WAUnEC,OATAC,QACIA,EADJC,KAEIA,EAAO,SAFXC,KAGIA,EAAO,SAHXC,KAIIA,EAAO,SAJXC,SAKIA,GAAW,EALfC,0BAMIA,KACGC,iCAIP,OACIR,gBAACS,gDACOD,OACJE,GAAG,SACHT,IAAKA,EACLC,QAASA,EACTC,KAAMA,EACNC,KAAMA,EACNC,KAAMA,EACNC,SAAUA,EACVC,0BAA2BA"}

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { BaseButtonProps } from '../base-button';
-import type { OpenInNewTab } from '../common-types';
+import type { OpenInNewTab } from '../utils/common-types';
 declare type NativeLinkProps = Omit<JSX.IntrinsicElements['a'], 'aria-disabled' | 'target' | 'rel' | 'className'>;
 export declare type ButtonLinkProps = NativeLinkProps & BaseButtonProps & OpenInNewTab;
 /**
@@ -9,5 +9,5 @@ export declare type ButtonLinkProps = NativeLinkProps & BaseButtonProps & OpenIn
  *
  * @see Button
  */
-export declare const ButtonLink: import("../../utils/polymorphism").PolymorphicComponent<"a", ButtonLinkProps, "obfuscateClassName">;
+export declare const ButtonLink: import("../utils/polymorphism").PolymorphicComponent<"a", ButtonLinkProps, "obfuscateClassName">;
 export {};

package/lib/button-link/button-link.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),r=require("../utils/polymorphism.js"),o=require("../base-button/base-button.js");const a=["as","variant","tone","size","exceptionallySetClassName","openInNewTab"];exports.ButtonLink=r.polymorphicComponent((function(r,n){let{as:s="a",variant:i,tone:l="normal",size:p="normal",exceptionallySetClassName:u,openInNewTab:c=!1}=r,b=e.objectWithoutProperties(r,a);return t.createElement(o.BaseButton,e.objectSpread2(e.objectSpread2({},b),{},{as:s,ref:n,variant:i,tone:l,size:p,exceptionallySetClassName:u,target:c?"_blank":void 0,rel:c?"noopener noreferrer":void 0}))}));
+//# sourceMappingURL=button-link.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button-link.js","sources":["../../src/button-link/button-link.tsx"],"sourcesContent":["import * as React from 'react'\nimport { polymorphicComponent } from '../utils/polymorphism'\nimport { BaseButton } from '../base-button'\nimport type { BaseButtonProps } from '../base-button'\nimport type { OpenInNewTab } from '../utils/common-types'\n\ntype NativeLinkProps = Omit<\n    JSX.IntrinsicElements['a'],\n    'aria-disabled' | 'target' | 'rel' | 'className'\n>\n\nexport type ButtonLinkProps = NativeLinkProps & BaseButtonProps & OpenInNewTab\n\n/**\n * A semantic link that looks like a button, exactly matching the `Button` component in all visual\n * aspects.\n *\n * @see Button\n */\nexport const ButtonLink = polymorphicComponent<'a', ButtonLinkProps>(function ButtonLink(\n    {\n        as = 'a',\n        variant,\n        tone = 'normal',\n        size = 'normal',\n        exceptionallySetClassName,\n        openInNewTab = false,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseButton\n            {...props}\n            as={as}\n            ref={ref}\n            variant={variant}\n            tone={tone}\n            size={size}\n            exceptionallySetClassName={exceptionallySetClassName}\n            target={openInNewTab ? '_blank' : undefined}\n            rel={openInNewTab ? 'noopener noreferrer' : undefined}\n        />\n    )\n})\n"],"names":["polymorphicComponent","ref","as","variant","tone","size","exceptionallySetClassName","openInNewTab","props","React","BaseButton","target","undefined","rel"],"mappings":"uUAmB0BA,wBAA2C,WAUjEC,OATAC,GACIA,EAAK,IADTC,QAEIA,EAFJC,KAGIA,EAAO,SAHXC,KAIIA,EAAO,SAJXC,0BAKIA,EALJC,aAMIA,GAAe,KACZC,iCAIP,OACIC,gBAACC,gDACOF,OACJN,GAAIA,EACJD,IAAKA,EACLE,QAASA,EACTC,KAAMA,EACNC,KAAMA,EACNC,0BAA2BA,EAC3BK,OAAQJ,EAAe,cAAWK,EAClCC,IAAKN,EAAe,2BAAwBK"}

package/lib/checkbox-field/checkbox-field.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),n=require("../box/box.js"),a=require("../text/text.js"),t=require("ariakit-react-utils"),r=require("./checkbox-icon.js"),c=require("./checkbox-field.module.css.js");const o=["label","icon","disabled","indeterminate","defaultChecked","onChange"];exports.CheckboxField=l.forwardRef((function(u,d){var i,s,b;let{label:f,icon:h,disabled:x,indeterminate:k,defaultChecked:p,onChange:m}=u,y=e.objectWithoutProperties(u,o);"boolean"!=typeof k||"boolean"==typeof y.checked||(console.warn("Cannot use indeterminate on an uncontrolled checkbox"),k=void 0),f||y["aria-label"]||y["aria-labelledby"]||console.warn("A Checkbox needs a label");const[j,C]=l.useState(!1),[q,B]=l.useState(null!=(i=null!=(s=y.checked)?s:p)&&i),E=null!=(b=y.checked)?b:q,g=l.useRef(null),v=t.useForkRef(g,d);return l.useEffect((function(){g.current&&"boolean"==typeof k&&(g.current.indeterminate=k)}),[k]),l.createElement(n.Box,{as:"label",display:"flex",alignItems:"center",className:[c.default.container,x?c.default.disabled:null,E?c.default.checked:null,j?c.default.keyFocused:null]},l.createElement("input",e.objectSpread2(e.objectSpread2({},y),{},{ref:v,type:"checkbox","aria-checked":k?"mixed":E,checked:E,disabled:x,onChange:e=>{null==m||m(e),e.defaultPrevented||B(e.currentTarget.checked)},onBlur:e=>{C(!1),null==y||null==y.onBlur||y.onBlur(e)},onKeyUp:e=>{C(!0),null==y||null==y.onKeyUp||y.onKeyUp(e)}})),l.createElement(r.CheckboxIcon,{checked:E,disabled:x,indeterminate:k,"aria-hidden":!0}),h?l.createElement(n.Box,{display:"flex",className:c.default.icon,"aria-hidden":!0},h):null,f?l.createElement(n.Box,{display:"flex",className:c.default.label},l.createElement(a.Text,null,f)):null)}));
+//# sourceMappingURL=checkbox-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-field.js","sources":["../../src/checkbox-field/checkbox-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useForkRef } from 'ariakit-react-utils'\nimport { Box } from '../box'\nimport { Text } from '../text'\nimport { CheckboxIcon } from './checkbox-icon'\n\nimport styles from './checkbox-field.module.css'\n\ntype CheckboxFieldProps = Omit<\n    JSX.IntrinsicElements['input'],\n    | 'type'\n    | 'className'\n    | 'disabled'\n    | 'aria-controls'\n    | 'aria-describedby'\n    | 'aria-label'\n    | 'aria-labelledby'\n> & {\n    'aria-checked'?: never\n    /** Identifies the set of checkboxes controlled by the mixed checkbox for assistive technologies. */\n    'aria-controls'?: string\n    /** Identifies the element (or elements) that describes the checkbox for assistive technologies. */\n    'aria-describedby'?: string\n    /** Defines a string value that labels the current checkbox for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current checkbox for assistive technologies. */\n    'aria-labelledby'?: string\n    /** Defines whether or not the checkbox is disabled. */\n    disabled?: boolean\n    /** The label for the checkbox element. */\n    label?: React.ReactNode\n    /** The icon that should be added to the checkbox label. */\n    icon?: React.ReactChild\n    /** Defines whether or not the checkbox can be of a `mixed` state. */\n    indeterminate?: boolean\n}\n\nconst CheckboxField = React.forwardRef<HTMLInputElement, CheckboxFieldProps>(function CheckboxField(\n    { label, icon, disabled, indeterminate, defaultChecked, onChange, ...props },\n    ref,\n) {\n    const isControlledComponent = typeof props.checked === 'boolean'\n    if (typeof indeterminate === 'boolean' && !isControlledComponent) {\n        // eslint-disable-next-line no-console\n        console.warn('Cannot use indeterminate on an uncontrolled checkbox')\n        indeterminate = undefined\n    }\n\n    if (!label && !props['aria-label'] && !props['aria-labelledby']) {\n        // eslint-disable-next-line no-console\n        console.warn('A Checkbox needs a label')\n    }\n\n    const [keyFocused, setKeyFocused] = React.useState(false)\n    const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n    const isChecked = props.checked ?? checkedState\n\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const combinedRef = useForkRef(internalRef, ref)\n    React.useEffect(\n        function setIndeterminate() {\n            if (internalRef.current && typeof indeterminate === 'boolean') {\n                internalRef.current.indeterminate = indeterminate\n            }\n        },\n        [indeterminate],\n    )\n\n    return (\n        <Box\n            as=\"label\"\n            display=\"flex\"\n            alignItems=\"center\"\n            className={[\n                styles.container,\n                disabled ? styles.disabled : null,\n                isChecked ? styles.checked : null,\n                keyFocused ? styles.keyFocused : null,\n            ]}\n        >\n            <input\n                {...props}\n                ref={combinedRef}\n                type=\"checkbox\"\n                aria-checked={indeterminate ? 'mixed' : isChecked}\n                checked={isChecked}\n                disabled={disabled}\n                onChange={(event) => {\n                    onChange?.(event)\n                    if (!event.defaultPrevented) {\n                        setChecked(event.currentTarget.checked)\n                    }\n                }}\n                onBlur={(event) => {\n                    setKeyFocused(false)\n                    props?.onBlur?.(event)\n                }}\n                onKeyUp={(event) => {\n                    setKeyFocused(true)\n                    props?.onKeyUp?.(event)\n                }}\n            />\n            <CheckboxIcon\n                checked={isChecked}\n                disabled={disabled}\n                indeterminate={indeterminate}\n                aria-hidden\n            />\n            {icon ? (\n                <Box display=\"flex\" className={styles.icon} aria-hidden>\n                    {icon}\n                </Box>\n            ) : null}\n            {label ? (\n                <Box display=\"flex\" className={styles.label}>\n                    <Text>{label}</Text>\n                </Box>\n            ) : null}\n        </Box>\n    )\n})\n\nexport { CheckboxField }\nexport type { CheckboxFieldProps }\n"],"names":["React","ref","label","icon","disabled","indeterminate","defaultChecked","onChange","props","checked","console","warn","undefined","keyFocused","setKeyFocused","checkedState","setChecked","isChecked","internalRef","combinedRef","useForkRef","current","Box","as","display","alignItems","className","styles","container","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","CheckboxIcon","Text"],"mappings":"4ZAqCsBA,cAAuD,WAEzEC,iBADAC,MAAEA,EAAFC,KAASA,EAATC,SAAeA,EAAfC,cAAyBA,EAAzBC,eAAwCA,EAAxCC,SAAwDA,KAAaC,iCAIxC,kBAAlBH,GAD4C,kBAAlBG,EAAMC,UAGvCC,QAAQC,KAAK,wDACbN,OAAgBO,GAGfV,GAAUM,EAAM,eAAkBA,EAAM,oBAEzCE,QAAQC,KAAK,4BAGjB,MAAOE,EAAYC,GAAiBd,YAAe,IAC5Ce,EAAcC,GAAchB,6BAAeQ,EAAMC,WAAWH,OAC7DW,WAAYT,EAAMC,WAAWM,EAE7BG,EAAclB,SAA+B,MAC7CmB,EAAcC,aAAWF,EAAajB,GAU5C,OATAD,aACI,WACQkB,EAAYG,SAAoC,kBAAlBhB,IAC9Ba,EAAYG,QAAQhB,cAAgBA,KAG5C,CAACA,IAIDL,gBAACsB,OACGC,GAAG,QACHC,QAAQ,OACRC,WAAW,SACXC,UAAW,CACPC,UAAOC,UACPxB,EAAWuB,UAAOvB,SAAW,KAC7Ba,EAAYU,UAAOlB,QAAU,KAC7BI,EAAac,UAAOd,WAAa,OAGrCb,2DACQQ,OACJP,IAAKkB,EACLU,KAAK,0BACSxB,EAAgB,QAAUY,EACxCR,QAASQ,EACTb,SAAUA,EACVG,SAAWuB,UACPvB,GAAAA,EAAWuB,GACNA,EAAMC,kBACPf,EAAWc,EAAME,cAAcvB,UAGvCwB,OAASH,IACLhB,GAAc,SACdN,SAAAA,EAAOyB,QAAPzB,EAAOyB,OAASH,IAEpBI,QAAUJ,IACNhB,GAAc,SACdN,SAAAA,EAAO0B,SAAP1B,EAAO0B,QAAUJ,OAGzB9B,gBAACmC,gBACG1B,QAASQ,EACTb,SAAUA,EACVC,cAAeA,qBAGlBF,EACGH,gBAACsB,OAAIE,QAAQ,OAAOE,UAAWC,UAAOxB,uBACjCA,GAEL,KACHD,EACGF,gBAACsB,OAAIE,QAAQ,OAAOE,UAAWC,UAAOzB,OAClCF,gBAACoC,YAAMlC,IAEX"}

package/lib/checkbox-field/checkbox-icon.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),a=require("react");const t=["checked","indeterminate","disabled"],r={checked:"M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2.457 4.293l-5.293 5.293-1.793-1.793a1 1 0 1 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0l6-6a1 1 0 1 0-1.414-1.414z",unchecked:"M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm0 1H6a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z",mixed:"M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2 7H8a1 1 0 0 0 0 2h8a1 1 0 0 0 0-2z",filled:"M6 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V6C4 4.89543 4.89543 4 6 4Z"};exports.CheckboxIcon=function(i){let{checked:c,indeterminate:d,disabled:l}=i,n=e.objectWithoutProperties(i,t);const o=function({checked:e,indeterminate:a,disabled:t}){return a?"mixed":e?"checked":t?"filled":"unchecked"}({checked:c,indeterminate:d,disabled:l});return a.createElement("svg",e.objectSpread2({xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},n),a.createElement("path",{fill:"currentColor",fillRule:"nonzero",d:r[o]}))};
+//# sourceMappingURL=checkbox-icon.js.map

package/lib/checkbox-field/checkbox-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-icon.js","sources":["../../src/checkbox-field/checkbox-icon.tsx"],"sourcesContent":["import * as React from 'react'\n\nconst svgPath = {\n    checked:\n        'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2.457 4.293l-5.293 5.293-1.793-1.793a1 1 0 1 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0l6-6a1 1 0 1 0-1.414-1.414z',\n    unchecked:\n        'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm0 1H6a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z',\n    mixed:\n        'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2 7H8a1 1 0 0 0 0 2h8a1 1 0 0 0 0-2z',\n    filled:\n        'M6 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V6C4 4.89543 4.89543 4 6 4Z',\n} as const\n\ntype Props = React.SVGProps<SVGSVGElement> & {\n    checked?: boolean\n    indeterminate?: boolean\n    disabled?: boolean\n}\n\nfunction getPathKey({ checked, indeterminate, disabled }: Props): keyof typeof svgPath {\n    if (indeterminate) {\n        return 'mixed' // indeterminate, when true, overrides the checked state\n    }\n\n    if (checked) {\n        return 'checked'\n    }\n\n    // We only used 'filled' when unchecked AND disabled, because the default unchecked icon\n    // is not enough to convey the disabled state with opacity alone. For all other cases\n    // above, when disabled, we use the same icon the corresponds to that state, and the\n    // opacity conveys the fact that the checkbox is disabled.\n    // See https://twist.com/a/1585/ch/414345/t/2257308/c/65201390\n    if (disabled) {\n        return 'filled'\n    }\n\n    return 'unchecked'\n}\n\nfunction CheckboxIcon({ checked, indeterminate, disabled, ...props }: Props) {\n    const pathKey = getPathKey({ checked, indeterminate, disabled })\n    return (\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            {...props}\n        >\n            <path fill=\"currentColor\" fillRule=\"nonzero\" d={svgPath[pathKey]} />\n        </svg>\n    )\n}\n\nexport { CheckboxIcon }\n"],"names":["svgPath","checked","unchecked","mixed","filled","indeterminate","disabled","props","pathKey","getPathKey","React","xmlns","width","height","viewBox","fill","fillRule","d"],"mappings":"gMAEMA,EAAU,CACZC,QACI,4LACJC,UACI,kJACJC,MACI,iHACJC,OACI,gJA8BR,gBAAsBH,QAAEA,EAAFI,cAAWA,EAAXC,SAA0BA,KAAaC,iCACzD,MAAMC,EAtBV,UAAoBP,QAAEA,EAAFI,cAAWA,EAAXC,SAA0BA,IAC1C,OAAID,EACO,QAGPJ,EACO,UAQPK,EACO,SAGJ,YAISG,CAAW,CAAER,QAAAA,EAASI,cAAAA,EAAeC,SAAAA,IACrD,OACII,uCACIC,MAAM,6BACNC,MAAM,KACNC,OAAO,KACPC,QAAQ,aACJP,GAEJG,wBAAMK,KAAK,eAAeC,SAAS,UAAUC,EAAGjB,EAAQQ"}

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

@@ -1,11 +1,11 @@
-import type { ResponsiveProp, ResponsiveBreakpoints } from '../responsive-props';
-import type { Space } from '../common-types';
+import type { ResponsiveProp, ResponsiveBreakpoints } from '../utils/responsive-props';
+import type { Space } from '../utils/common-types';
 import type { ReusableBoxProps } from '../box';
 declare type ColumnWidth = 'auto' | 'content' | '1/2' | '1/3' | '2/3' | '1/4' | '3/4' | '1/5' | '2/5' | '3/5' | '4/5';
 interface ColumnProps {
     width?: ColumnWidth;
 }
-declare const Column: import("../../utils/polymorphism").PolymorphicComponent<"div", ColumnProps, "obfuscateClassName">;
+declare const Column: import("../utils/polymorphism").PolymorphicComponent<"div", ColumnProps, "obfuscateClassName">;
 declare type ColumnsHorizontalAlignment = 'left' | 'center' | 'right';
 declare type ColumnsVerticalAlignment = 'top' | 'center' | 'bottom' | 'baseline';
 declare type ColumnsCollapseBelow = Exclude<ResponsiveBreakpoints, 'mobile'>;
@@ -15,6 +15,6 @@ interface ColumnsProps extends ReusableBoxProps {
     alignY?: ResponsiveProp<ColumnsVerticalAlignment>;
     collapseBelow?: ResponsiveBreakpoints;
 }
-declare const Columns: import("../../utils/polymorphism").PolymorphicComponent<"div", ColumnsProps, "obfuscateClassName">;
+declare const Columns: import("../utils/polymorphism").PolymorphicComponent<"div", ColumnsProps, "obfuscateClassName">;
 export type { ColumnProps, ColumnsProps, ColumnWidth, ColumnsCollapseBelow, ColumnsHorizontalAlignment, ColumnsVerticalAlignment, };
 export { Column, Columns };

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),l=require("../../utils/polymorphism.js"),o=require("../responsive-props.js"),r=require("../box/box.js"),a=require("./columns.module.css.js");const s=["width","children","exceptionallySetClassName"],i=["space","align","alignY","collapseBelow","children","exceptionallySetClassName"],n=l.polymorphicComponent((function(l,i){let{width:n="auto",children:p,exceptionallySetClassName:c}=l,u=e.objectWithoutProperties(l,s);return t.createElement(r.Box,e.objectSpread2(e.objectSpread2({},u),{},{className:[c,o.getClassNames(a.default,"columnWidth",n.replace("/","-"))],minWidth:0,height:"full",flexShrink:"content"===n?0:void 0,flexGrow:"auto"===n?1:0,ref:i}),p)})),p=l.polymorphicComponent((function(l,s){let{space:n,align:p="left",alignY:c="top",collapseBelow:u,children:m,exceptionallySetClassName:d}=l,f=e.objectWithoutProperties(l,i);return t.createElement(r.Box,e.objectSpread2(e.objectSpread2({},f),{},{className:[d,a.default.container,o.getClassNames(a.default,"container",n)],display:"flex",gap:n,flexDirection:"desktop"===u?{mobile:"column",tablet:"column",desktop:"row"}:"tablet"===u?{mobile:"column",tablet:"row"}:"row",alignItems:o.mapResponsiveProp(c,e=>"top"===e?"flexStart":"bottom"===e?"flexEnd":e),justifyContent:o.mapResponsiveProp(p,e=>"left"===e?"flexStart":"right"===e?"flexEnd":e),ref:s}),m)}));exports.Column=n,exports.Columns=p;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),l=require("../utils/polymorphism.js"),o=require("../utils/responsive-props.js"),r=require("../box/box.js"),a=require("./columns.module.css.js");const s=["width","children","exceptionallySetClassName"],i=["space","align","alignY","collapseBelow","children","exceptionallySetClassName"],n=l.polymorphicComponent((function(l,i){let{width:n="auto",children:p,exceptionallySetClassName:c}=l,u=e.objectWithoutProperties(l,s);return t.createElement(r.Box,e.objectSpread2(e.objectSpread2({},u),{},{className:[c,o.getClassNames(a.default,"columnWidth",n.replace("/","-"))],minWidth:0,height:"full",flexShrink:"content"===n?0:void 0,flexGrow:"auto"===n?1:0,ref:i}),p)})),p=l.polymorphicComponent((function(l,s){let{space:n,align:p="left",alignY:c="top",collapseBelow:u,children:m,exceptionallySetClassName:d}=l,f=e.objectWithoutProperties(l,i);return t.createElement(r.Box,e.objectSpread2(e.objectSpread2({},f),{},{className:[d,a.default.container,o.getClassNames(a.default,"container",n)],display:"flex",gap:n,flexDirection:"desktop"===u?{mobile:"column",tablet:"column",desktop:"row"}:"tablet"===u?{mobile:"column",tablet:"row"}:"row",alignItems:o.mapResponsiveProp(c,e=>"top"===e?"flexStart":"bottom"===e?"flexEnd":e),justifyContent:o.mapResponsiveProp(p,e=>"left"===e?"flexStart":"right"===e?"flexEnd":e),ref:s}),m)}));exports.Column=n,exports.Columns=p;
 //# sourceMappingURL=columns.js.map

package/lib/columns/columns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"columns.js","sources":["../../src/columns/columns.tsx"],"sourcesContent":["import * as React from 'react'\nimport { polymorphicComponent } from '../utils/polymorphism'\nimport { getClassNames, mapResponsiveProp } from '../utils/responsive-props'\nimport { Box } from '../box'\n\nimport type { ResponsiveProp, ResponsiveBreakpoints } from '../utils/responsive-props'\nimport type { Space } from '../utils/common-types'\nimport type { ReusableBoxProps } from '../box'\n\nimport styles from './columns.module.css'\n\ntype ColumnWidth =\n    | 'auto'\n    | 'content'\n    | '1/2'\n    | '1/3'\n    | '2/3'\n    | '1/4'\n    | '3/4'\n    | '1/5'\n    | '2/5'\n    | '3/5'\n    | '4/5'\n\ninterface ColumnProps {\n    width?: ColumnWidth\n}\n\nconst Column = polymorphicComponent<'div', ColumnProps>(function Column(\n    { width = 'auto', children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    return (\n        <Box\n            {...props}\n            className={[\n                exceptionallySetClassName,\n                getClassNames(styles, 'columnWidth', width.replace('/', '-')),\n            ]}\n            minWidth={0}\n            height=\"full\"\n            flexShrink={width === 'content' ? 0 : undefined}\n            flexGrow={width === 'auto' ? 1 : 0}\n            ref={ref}\n        >\n            {children}\n        </Box>\n    )\n})\n\ntype ColumnsHorizontalAlignment = 'left' | 'center' | 'right'\ntype ColumnsVerticalAlignment = 'top' | 'center' | 'bottom' | 'baseline'\ntype ColumnsCollapseBelow = Exclude<ResponsiveBreakpoints, 'mobile'>\n\ninterface ColumnsProps extends ReusableBoxProps {\n    space?: ResponsiveProp<Space>\n    align?: ResponsiveProp<ColumnsHorizontalAlignment>\n    alignY?: ResponsiveProp<ColumnsVerticalAlignment>\n    collapseBelow?: ResponsiveBreakpoints\n}\n\nconst Columns = polymorphicComponent<'div', ColumnsProps>(function Columns(\n    {\n        space,\n        align = 'left',\n        alignY = 'top',\n        collapseBelow,\n        children,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <Box\n            {...props}\n            className={[\n                exceptionallySetClassName,\n                styles.container,\n                getClassNames(styles, 'container', space),\n            ]}\n            display=\"flex\"\n            gap={space}\n            flexDirection={\n                collapseBelow === 'desktop'\n                    ? { mobile: 'column', tablet: 'column', desktop: 'row' }\n                    : collapseBelow === 'tablet'\n                    ? { mobile: 'column', tablet: 'row' }\n                    : 'row'\n            }\n            alignItems={mapResponsiveProp(alignY, (alignY) =>\n                alignY === 'top' ? 'flexStart' : alignY === 'bottom' ? 'flexEnd' : alignY,\n            )}\n            justifyContent={mapResponsiveProp(align, (align) =>\n                align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : align,\n            )}\n            ref={ref}\n        >\n            {children}\n        </Box>\n    )\n})\n\nexport type {\n    ColumnProps,\n    ColumnsProps,\n    ColumnWidth,\n    ColumnsCollapseBelow,\n    ColumnsHorizontalAlignment,\n    ColumnsVerticalAlignment,\n}\n\nexport { Column, Columns }\n"],"names":["Column","polymorphicComponent","ref","width","children","exceptionallySetClassName","props","React","Box","className","getClassNames","styles","replace","minWidth","height","flexShrink","undefined","flexGrow","Columns","space","align","alignY","collapseBelow","container","display","gap","flexDirection","mobile","tablet","desktop","alignItems","mapResponsiveProp","justifyContent"],"mappings":"8aA4BMA,EAASC,wBAAyC,WAEpDC,OADAC,MAAEA,EAAQ,OAAVC,SAAkBA,EAAlBC,0BAA4BA,KAA8BC,iCAG1D,OACIC,gBAACC,yCACOF,OACJG,UAAW,CACPJ,EACAK,gBAAcC,UAAQ,cAAeR,EAAMS,QAAQ,IAAK,OAE5DC,SAAU,EACVC,OAAO,OACPC,WAAsB,YAAVZ,EAAsB,OAAIa,EACtCC,SAAoB,SAAVd,EAAmB,EAAI,EACjCD,IAAKA,IAEJE,MAgBPc,EAAUjB,wBAA0C,WAUtDC,OATAiB,MACIA,EADJC,MAEIA,EAAQ,OAFZC,OAGIA,EAAS,MAHbC,cAIIA,EAJJlB,SAKIA,EALJC,0BAMIA,KACGC,iCAIP,OACIC,gBAACC,yCACOF,OACJG,UAAW,CACPJ,EACAM,UAAOY,UACPb,gBAAcC,UAAQ,YAAaQ,IAEvCK,QAAQ,OACRC,IAAKN,EACLO,cACsB,YAAlBJ,EACM,CAAEK,OAAQ,SAAUC,OAAQ,SAAUC,QAAS,OAC7B,WAAlBP,EACA,CAAEK,OAAQ,SAAUC,OAAQ,OAC5B,MAEVE,WAAYC,oBAAkBV,EAASA,GACxB,QAAXA,EAAmB,YAAyB,WAAXA,EAAsB,UAAYA,GAEvEW,eAAgBD,oBAAkBX,EAAQA,GAC5B,SAAVA,EAAmB,YAAwB,UAAVA,EAAoB,UAAYA,GAErElB,IAAKA,IAEJE"}

package/lib/components/color-picker/color-picker.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("react"),o=(e(t),e(require("classnames"))),r=require("../../new-components/tooltip/tooltip.js"),l=require("../deprecated-dropdown/index.js");const n=["#606060","#4A90E2","#03B3B2","#008299","#82BA00","#D24726","#AC193D","#DC4FAD","#3BD5FB","#74E8D3","#FFCC00","#FB886E","#CCCCCC"],c=e=>"string"!=typeof e;function a({color:e=0,small:r,onChange:a,colorList:s=n}){return t.createElement(l.default.Box,{right:!0,className:"reactist_color_picker"},t.createElement(l.default.Trigger,null,(()=>{const l=((e,t)=>e[t>=e.length?0:t])(s,e);return t.createElement("span",{className:o("color_trigger",{small:r}),style:{backgroundColor:c(l)?l.color:l}},t.createElement("span",{className:"color_trigger--inner_ring"}))})()),t.createElement(l.default.Body,null,t.createElement("div",{className:"color_options"},s.reduce((o,r,l)=>(o.push(t.createElement(i,{isActive:e>=s.length?0===l:l===e,key:l,color:c(r)?r.color:r,colorIndex:l,onClick:a,tooltip:c(r)?r.name:null})),o),[]))))}function i({color:e,colorIndex:o,isActive:l,onClick:n,tooltip:c}){const a=t.createElement("span",{"data-testid":"reactist-color-item",className:"reactist color_item"+(l?" active":""),style:{backgroundColor:e},onClick:()=>null==n?void 0:n(o)},t.createElement("span",{className:"color_item--inner_ring"}));return c?t.createElement(r.Tooltip,{content:c},a):a}a.displayName="ColorPicker",i.displayName="ColorItem",exports.COLORS=n,exports.ColorItem=i,exports.ColorPicker=a;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),o=(e(t),e(require("classnames"))),r=require("../../tooltip/tooltip.js"),l=require("../deprecated-dropdown/index.js");const c=["#606060","#4A90E2","#03B3B2","#008299","#82BA00","#D24726","#AC193D","#DC4FAD","#3BD5FB","#74E8D3","#FFCC00","#FB886E","#CCCCCC"],n=e=>"string"!=typeof e;function a({color:e=0,small:r,onChange:a,colorList:s=c}){return t.createElement(l.default.Box,{right:!0,className:"reactist_color_picker"},t.createElement(l.default.Trigger,null,(()=>{const l=((e,t)=>e[t>=e.length?0:t])(s,e);return t.createElement("span",{className:o("color_trigger",{small:r}),style:{backgroundColor:n(l)?l.color:l}},t.createElement("span",{className:"color_trigger--inner_ring"}))})()),t.createElement(l.default.Body,null,t.createElement("div",{className:"color_options"},s.reduce((o,r,l)=>(o.push(t.createElement(i,{isActive:e>=s.length?0===l:l===e,key:l,color:n(r)?r.color:r,colorIndex:l,onClick:a,tooltip:n(r)?r.name:null})),o),[]))))}function i({color:e,colorIndex:o,isActive:l,onClick:c,tooltip:n}){const a=t.createElement("span",{"data-testid":"reactist-color-item",className:"reactist color_item"+(l?" active":""),style:{backgroundColor:e},onClick:()=>null==c?void 0:c(o)},t.createElement("span",{className:"color_item--inner_ring"}));return n?t.createElement(r.Tooltip,{content:n},a):a}a.displayName="ColorPicker",i.displayName="ColorItem",exports.COLORS=c,exports.ColorItem=i,exports.ColorPicker=a;
 //# sourceMappingURL=color-picker.js.map

package/lib/components/color-picker/color-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.js","sources":["../../../src/components/color-picker/color-picker.tsx"],"sourcesContent":["import * as React from 'react'\nimport classnames from 'classnames'\n\nimport DeprecatedDropdown from '../deprecated-dropdown'\nimport { Tooltip } from '../../new-components/tooltip'\n\nimport './color-picker.less'\n\ntype NamedColor = { name: string; color: string }\n\nconst COLORS = [\n    '#606060',\n    '#4A90E2',\n    '#03B3B2',\n    '#008299',\n    '#82BA00',\n    '#D24726',\n    '#AC193D',\n    '#DC4FAD',\n    '#3BD5FB',\n    '#74E8D3',\n    '#FFCC00',\n    '#FB886E',\n    '#CCCCCC',\n]\n\nconst _isNamedColor = (color: string | NamedColor | undefined): color is NamedColor =>\n    typeof color !== 'string'\n\nconst _getColor = (colorList: (string | NamedColor)[], colorIndex: number) => {\n    const index = colorIndex >= colorList.length ? 0 : colorIndex\n    return colorList[index]\n}\n\ntype Props = {\n    small?: boolean\n    color?: number\n    onChange?: (color: number) => void\n    colorList?: (string | NamedColor)[]\n}\n\nfunction ColorPicker({ color = 0, small, onChange, colorList = COLORS }: Props) {\n    return (\n        <DeprecatedDropdown.Box right className=\"reactist_color_picker\">\n            <DeprecatedDropdown.Trigger>\n                {(() => {\n                    const backgroundColor = _getColor(colorList, color)\n\n                    return (\n                        <span\n                            className={classnames('color_trigger', { small })}\n                            style={{\n                                backgroundColor: _isNamedColor(backgroundColor)\n                                    ? backgroundColor.color\n                                    : backgroundColor,\n                            }}\n                        >\n                            <span className=\"color_trigger--inner_ring\" />\n                        </span>\n                    )\n                })()}\n            </DeprecatedDropdown.Trigger>\n            <DeprecatedDropdown.Body>\n                <div className=\"color_options\">\n                    {colorList.reduce<React.ReactNode[]>((items, currentColor, currentIndex) => {\n                        items.push(\n                            <ColorItem\n                                isActive={\n                                    color >= colorList.length\n                                        ? currentIndex === 0\n                                        : currentIndex === color\n                                }\n                                key={currentIndex}\n                                color={\n                                    _isNamedColor(currentColor) ? currentColor.color : currentColor\n                                }\n                                colorIndex={currentIndex}\n                                onClick={onChange}\n                                tooltip={_isNamedColor(currentColor) ? currentColor.name : null}\n                            />,\n                        )\n                        return items\n                    }, [])}\n                </div>\n            </DeprecatedDropdown.Body>\n        </DeprecatedDropdown.Box>\n    )\n}\nColorPicker.displayName = 'ColorPicker'\n\ntype ColorItemProps = {\n    color: string\n    colorIndex: number\n    isActive?: boolean\n    onClick?: (colorIndex: number) => void\n    tooltip?: React.ReactNode\n}\n\nfunction ColorItem({ color, colorIndex, isActive, onClick, tooltip }: ColorItemProps) {\n    const item = (\n        <span\n            data-testid=\"reactist-color-item\"\n            className={'reactist color_item' + (isActive ? ' active' : '')}\n            style={{ backgroundColor: color }}\n            onClick={() => onClick?.(colorIndex)}\n        >\n            <span className=\"color_item--inner_ring\" />\n        </span>\n    )\n\n    return tooltip ? <Tooltip content={tooltip}>{item}</Tooltip> : item\n}\nColorItem.displayName = 'ColorItem'\n\nexport { ColorPicker, ColorItem, COLORS }\n"],"names":["COLORS","_isNamedColor","color","ColorPicker","small","onChange","colorList","React","DeprecatedDropdown","Box","right","className","Trigger","backgroundColor","colorIndex","length","_getColor","classnames","style","Body","reduce","items","currentColor","currentIndex","push","ColorItem","isActive","key","onClick","tooltip","name","item","Tooltip","content","displayName"],"mappings":"2SAUMA,EAAS,CACX,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,WAGEC,EAAiBC,GACF,iBAAVA,EAcX,SAASC,GAAYD,MAAEA,EAAQ,EAAVE,MAAaA,EAAbC,SAAoBA,EAApBC,UAA8BA,EAAYN,IAC3D,OACIO,gBAACC,UAAmBC,KAAIC,SAAMC,UAAU,yBACpCJ,gBAACC,UAAmBI,aACf,MACG,MAAMC,EAjBR,EAACP,EAAoCQ,IAE5CR,EADOQ,GAAcR,EAAUS,OAAS,EAAID,GAgBXE,CAAUV,EAAWJ,GAE7C,OACIK,wBACII,UAAWM,EAAW,gBAAiB,CAAEb,MAAAA,IACzCc,MAAO,CACHL,gBAAiBZ,EAAcY,GACzBA,EAAgBX,MAChBW,IAGVN,wBAAMI,UAAU,gCAZ3B,IAiBLJ,gBAACC,UAAmBW,UAChBZ,uBAAKI,UAAU,iBACVL,EAAUc,OAA0B,CAACC,EAAOC,EAAcC,KACvDF,EAAMG,KACFjB,gBAACkB,GACGC,SACIxB,GAASI,EAAUS,OACI,IAAjBQ,EACAA,IAAiBrB,EAE3ByB,IAAKJ,EACLrB,MACID,EAAcqB,GAAgBA,EAAapB,MAAQoB,EAEvDR,WAAYS,EACZK,QAASvB,EACTwB,QAAS5B,EAAcqB,GAAgBA,EAAaQ,KAAO,QAG5DT,GACR,OAgBvB,SAASI,GAAUvB,MAAEA,EAAFY,WAASA,EAATY,SAAqBA,EAArBE,QAA+BA,UAASC,IACvD,MAAME,EACFxB,sCACgB,sBACZI,UAAW,uBAAyBe,EAAW,UAAY,IAC3DR,MAAO,CAAEL,gBAAiBX,GAC1B0B,QAAS,UAAMA,SAAAA,EAAUd,IAEzBP,wBAAMI,UAAU,4BAIxB,OAAOkB,EAAUtB,gBAACyB,WAAQC,QAASJ,GAAUE,GAAkBA,EAtBnE5B,EAAY+B,YAAc,cAwB1BT,EAAUS,YAAc"}
+{"version":3,"file":"color-picker.js","sources":["../../../src/components/color-picker/color-picker.tsx"],"sourcesContent":["import * as React from 'react'\nimport classnames from 'classnames'\n\nimport DeprecatedDropdown from '../deprecated-dropdown'\nimport { Tooltip } from '../../tooltip'\n\nimport './color-picker.less'\n\ntype NamedColor = { name: string; color: string }\n\nconst COLORS = [\n    '#606060',\n    '#4A90E2',\n    '#03B3B2',\n    '#008299',\n    '#82BA00',\n    '#D24726',\n    '#AC193D',\n    '#DC4FAD',\n    '#3BD5FB',\n    '#74E8D3',\n    '#FFCC00',\n    '#FB886E',\n    '#CCCCCC',\n]\n\nconst _isNamedColor = (color: string | NamedColor | undefined): color is NamedColor =>\n    typeof color !== 'string'\n\nconst _getColor = (colorList: (string | NamedColor)[], colorIndex: number) => {\n    const index = colorIndex >= colorList.length ? 0 : colorIndex\n    return colorList[index]\n}\n\ntype Props = {\n    small?: boolean\n    color?: number\n    onChange?: (color: number) => void\n    colorList?: (string | NamedColor)[]\n}\n\nfunction ColorPicker({ color = 0, small, onChange, colorList = COLORS }: Props) {\n    return (\n        <DeprecatedDropdown.Box right className=\"reactist_color_picker\">\n            <DeprecatedDropdown.Trigger>\n                {(() => {\n                    const backgroundColor = _getColor(colorList, color)\n\n                    return (\n                        <span\n                            className={classnames('color_trigger', { small })}\n                            style={{\n                                backgroundColor: _isNamedColor(backgroundColor)\n                                    ? backgroundColor.color\n                                    : backgroundColor,\n                            }}\n                        >\n                            <span className=\"color_trigger--inner_ring\" />\n                        </span>\n                    )\n                })()}\n            </DeprecatedDropdown.Trigger>\n            <DeprecatedDropdown.Body>\n                <div className=\"color_options\">\n                    {colorList.reduce<React.ReactNode[]>((items, currentColor, currentIndex) => {\n                        items.push(\n                            <ColorItem\n                                isActive={\n                                    color >= colorList.length\n                                        ? currentIndex === 0\n                                        : currentIndex === color\n                                }\n                                key={currentIndex}\n                                color={\n                                    _isNamedColor(currentColor) ? currentColor.color : currentColor\n                                }\n                                colorIndex={currentIndex}\n                                onClick={onChange}\n                                tooltip={_isNamedColor(currentColor) ? currentColor.name : null}\n                            />,\n                        )\n                        return items\n                    }, [])}\n                </div>\n            </DeprecatedDropdown.Body>\n        </DeprecatedDropdown.Box>\n    )\n}\nColorPicker.displayName = 'ColorPicker'\n\ntype ColorItemProps = {\n    color: string\n    colorIndex: number\n    isActive?: boolean\n    onClick?: (colorIndex: number) => void\n    tooltip?: React.ReactNode\n}\n\nfunction ColorItem({ color, colorIndex, isActive, onClick, tooltip }: ColorItemProps) {\n    const item = (\n        <span\n            data-testid=\"reactist-color-item\"\n            className={'reactist color_item' + (isActive ? ' active' : '')}\n            style={{ backgroundColor: color }}\n            onClick={() => onClick?.(colorIndex)}\n        >\n            <span className=\"color_item--inner_ring\" />\n        </span>\n    )\n\n    return tooltip ? <Tooltip content={tooltip}>{item}</Tooltip> : item\n}\nColorItem.displayName = 'ColorItem'\n\nexport { ColorPicker, ColorItem, COLORS }\n"],"names":["COLORS","_isNamedColor","color","ColorPicker","small","onChange","colorList","React","DeprecatedDropdown","Box","right","className","Trigger","backgroundColor","colorIndex","length","_getColor","classnames","style","Body","reduce","items","currentColor","currentIndex","push","ColorItem","isActive","key","onClick","tooltip","name","item","Tooltip","content","displayName"],"mappings":"4RAUMA,EAAS,CACX,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,WAGEC,EAAiBC,GACF,iBAAVA,EAcX,SAASC,GAAYD,MAAEA,EAAQ,EAAVE,MAAaA,EAAbC,SAAoBA,EAApBC,UAA8BA,EAAYN,IAC3D,OACIO,gBAACC,UAAmBC,KAAIC,SAAMC,UAAU,yBACpCJ,gBAACC,UAAmBI,aACf,MACG,MAAMC,EAjBR,EAACP,EAAoCQ,IAE5CR,EADOQ,GAAcR,EAAUS,OAAS,EAAID,GAgBXE,CAAUV,EAAWJ,GAE7C,OACIK,wBACII,UAAWM,EAAW,gBAAiB,CAAEb,MAAAA,IACzCc,MAAO,CACHL,gBAAiBZ,EAAcY,GACzBA,EAAgBX,MAChBW,IAGVN,wBAAMI,UAAU,gCAZ3B,IAiBLJ,gBAACC,UAAmBW,UAChBZ,uBAAKI,UAAU,iBACVL,EAAUc,OAA0B,CAACC,EAAOC,EAAcC,KACvDF,EAAMG,KACFjB,gBAACkB,GACGC,SACIxB,GAASI,EAAUS,OACI,IAAjBQ,EACAA,IAAiBrB,EAE3ByB,IAAKJ,EACLrB,MACID,EAAcqB,GAAgBA,EAAapB,MAAQoB,EAEvDR,WAAYS,EACZK,QAASvB,EACTwB,QAAS5B,EAAcqB,GAAgBA,EAAaQ,KAAO,QAG5DT,GACR,OAgBvB,SAASI,GAAUvB,MAAEA,EAAFY,WAASA,EAATY,SAAqBA,EAArBE,QAA+BA,UAASC,IACvD,MAAME,EACFxB,sCACgB,sBACZI,UAAW,uBAAyBe,EAAW,UAAY,IAC3DR,MAAO,CAAEL,gBAAiBX,GAC1B0B,QAAS,UAAMA,SAAAA,EAAUd,IAEzBP,wBAAMI,UAAU,4BAIxB,OAAOkB,EAAUtB,gBAACyB,WAAQC,QAASJ,GAAUE,GAAkBA,EAtBnE5B,EAAY+B,YAAc,cAwB1BT,EAAUS,YAAc"}

package/lib/components/deprecated-button/deprecated-button.js

@@ -1,2 +1,2 @@
-"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),o=require("react"),i=(t(o),t(require("classnames"))),l=require("../../new-components/tooltip/tooltip.js");const a=["type","variant","size","loading","disabled","tooltip","onClick","children"],r=o.forwardRef((function(t,r){let{type:n="button",variant:s,size:u="default",loading:c=!1,disabled:d=!1,tooltip:p,onClick:b,children:f}=t,_=e.objectWithoutProperties(t,a);const j=i("reactist_button",s?"reactist_button--"+s:null,"default"!==u?"reactist_button--"+u:null,{"reactist_button--loading":c},_.className),m=o.createElement("button",e.objectSpread2(e.objectSpread2({},_),{},{ref:r,type:n,className:j,"aria-disabled":d||c,onClick:d||c?void 0:b}),f);return p?o.createElement(l.Tooltip,{content:p},m):m}));r.displayName="Button",r.defaultProps={size:"default",loading:!1,disabled:!1},exports.Button=r;
+"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),o=require("react"),i=(t(o),t(require("classnames"))),l=require("../../tooltip/tooltip.js");const a=["type","variant","size","loading","disabled","tooltip","onClick","children"],r=o.forwardRef((function(t,r){let{type:n="button",variant:s,size:u="default",loading:d=!1,disabled:c=!1,tooltip:p,onClick:b,children:f}=t,_=e.objectWithoutProperties(t,a);const j=i("reactist_button",s?"reactist_button--"+s:null,"default"!==u?"reactist_button--"+u:null,{"reactist_button--loading":d},_.className),m=o.createElement("button",e.objectSpread2(e.objectSpread2({},_),{},{ref:r,type:n,className:j,"aria-disabled":c||d,onClick:c||d?void 0:b}),f);return p?o.createElement(l.Tooltip,{content:p},m):m}));r.displayName="Button",r.defaultProps={size:"default",loading:!1,disabled:!1},exports.Button=r;
 //# sourceMappingURL=deprecated-button.js.map

package/lib/components/deprecated-button/deprecated-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"deprecated-button.js","sources":["../../../src/components/deprecated-button/deprecated-button.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport { Tooltip } from '../../new-components/tooltip'\n\nimport './deprecated-button.less'\n\ntype NativeButtonProps = React.DetailedHTMLProps<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HTMLButtonElement\n>\n\n/** @deprecated */\nexport type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'link'\n\n/** @deprecated */\nexport type ButtonSize = 'default' | 'small' | 'large'\n\n/** @deprecated */\nexport type ButtonProps = Omit<NativeButtonProps, 'title' | 'ref'> & {\n    /**\n     * Loading style. When true it disables the button, but it also adds a visual indication of\n     * some in-progress operation going on.\n     */\n    loading?: boolean\n    /**\n     * Controls visually how the button shows up from a predefined set of kinds of buttons.\n     */\n    variant?: ButtonVariant\n    /**\n     * The size of the button. If not provided it shows up in a normal size.\n     */\n    size?: ButtonSize\n    /**\n     * Tooltip that is displayed on hover.\n     *\n     * This replaces `title` which is not supported for these buttons to avoid confusion.\n     */\n    tooltip?: React.ReactNode\n}\n\n/**\n * @deprecated\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n    {\n        type = 'button',\n        variant,\n        size = 'default',\n        loading = false,\n        disabled = false,\n        tooltip,\n        onClick,\n        children,\n        ...props\n    },\n    ref,\n) {\n    const className = classNames(\n        'reactist_button',\n        variant ? `reactist_button--${variant}` : null,\n        size !== 'default' ? `reactist_button--${size}` : null,\n        { 'reactist_button--loading': loading },\n        props.className,\n    )\n\n    const button = (\n        <button\n            {...props}\n            ref={ref}\n            type={type}\n            className={className}\n            aria-disabled={disabled || loading}\n            onClick={disabled || loading ? undefined : onClick}\n        >\n            {children}\n        </button>\n    )\n\n    return tooltip ? <Tooltip content={tooltip}>{button}</Tooltip> : button\n})\n\nButton.displayName = 'Button'\n\nButton.defaultProps = {\n    size: 'default',\n    loading: false,\n    disabled: false,\n}\n\nexport { Button }\n"],"names":["Button","React","ref","type","variant","size","loading","disabled","tooltip","onClick","children","props","className","classNames","reactist_button--loading","button","undefined","Tooltip","content","displayName","defaultProps"],"mappings":"uYA4CMA,EAASC,cAAiD,WAY5DC,OAXAC,KACIA,EAAO,SADXC,QAEIA,EAFJC,KAGIA,EAAO,UAHXC,QAIIA,GAAU,EAJdC,SAKIA,GAAW,UACXC,EANJC,QAOIA,EAPJC,SAQIA,KACGC,iCAIP,MAAMC,EAAYC,EACd,kBACAT,sBAA8BA,EAAY,KACjC,YAATC,sBAAyCA,EAAS,KAClD,CAAES,2BAA4BR,GAC9BK,EAAMC,WAGJG,EACFd,4DACQU,OACJT,IAAKA,EACLC,KAAMA,EACNS,UAAWA,kBACIL,GAAYD,EAC3BG,QAASF,GAAYD,OAAUU,EAAYP,IAE1CC,GAIT,OAAOF,EAAUP,gBAACgB,WAAQC,QAASV,GAAUO,GAAoBA,KAGrEf,EAAOmB,YAAc,SAErBnB,EAAOoB,aAAe,CAClBf,KAAM,UACNC,SAAS,EACTC,UAAU"}
+{"version":3,"file":"deprecated-button.js","sources":["../../../src/components/deprecated-button/deprecated-button.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport { Tooltip } from '../../tooltip'\n\nimport './deprecated-button.less'\n\ntype NativeButtonProps = React.DetailedHTMLProps<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HTMLButtonElement\n>\n\n/** @deprecated */\nexport type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'link'\n\n/** @deprecated */\nexport type ButtonSize = 'default' | 'small' | 'large'\n\n/** @deprecated */\nexport type ButtonProps = Omit<NativeButtonProps, 'title' | 'ref'> & {\n    /**\n     * Loading style. When true it disables the button, but it also adds a visual indication of\n     * some in-progress operation going on.\n     */\n    loading?: boolean\n    /**\n     * Controls visually how the button shows up from a predefined set of kinds of buttons.\n     */\n    variant?: ButtonVariant\n    /**\n     * The size of the button. If not provided it shows up in a normal size.\n     */\n    size?: ButtonSize\n    /**\n     * Tooltip that is displayed on hover.\n     *\n     * This replaces `title` which is not supported for these buttons to avoid confusion.\n     */\n    tooltip?: React.ReactNode\n}\n\n/**\n * @deprecated\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n    {\n        type = 'button',\n        variant,\n        size = 'default',\n        loading = false,\n        disabled = false,\n        tooltip,\n        onClick,\n        children,\n        ...props\n    },\n    ref,\n) {\n    const className = classNames(\n        'reactist_button',\n        variant ? `reactist_button--${variant}` : null,\n        size !== 'default' ? `reactist_button--${size}` : null,\n        { 'reactist_button--loading': loading },\n        props.className,\n    )\n\n    const button = (\n        <button\n            {...props}\n            ref={ref}\n            type={type}\n            className={className}\n            aria-disabled={disabled || loading}\n            onClick={disabled || loading ? undefined : onClick}\n        >\n            {children}\n        </button>\n    )\n\n    return tooltip ? <Tooltip content={tooltip}>{button}</Tooltip> : button\n})\n\nButton.displayName = 'Button'\n\nButton.defaultProps = {\n    size: 'default',\n    loading: false,\n    disabled: false,\n}\n\nexport { Button }\n"],"names":["Button","React","ref","type","variant","size","loading","disabled","tooltip","onClick","children","props","className","classNames","reactist_button--loading","button","undefined","Tooltip","content","displayName","defaultProps"],"mappings":"wXA4CMA,EAASC,cAAiD,WAY5DC,OAXAC,KACIA,EAAO,SADXC,QAEIA,EAFJC,KAGIA,EAAO,UAHXC,QAIIA,GAAU,EAJdC,SAKIA,GAAW,UACXC,EANJC,QAOIA,EAPJC,SAQIA,KACGC,iCAIP,MAAMC,EAAYC,EACd,kBACAT,sBAA8BA,EAAY,KACjC,YAATC,sBAAyCA,EAAS,KAClD,CAAES,2BAA4BR,GAC9BK,EAAMC,WAGJG,EACFd,4DACQU,OACJT,IAAKA,EACLC,KAAMA,EACNS,UAAWA,kBACIL,GAAYD,EAC3BG,QAASF,GAAYD,OAAUU,EAAYP,IAE1CC,GAIT,OAAOF,EAAUP,gBAACgB,WAAQC,QAASV,GAAUO,GAAoBA,KAGrEf,EAAOmB,YAAc,SAErBnB,EAAOoB,aAAe,CAClBf,KAAM,UACNC,SAAS,EACTC,UAAU"}

package/lib/components/progress-bar/progress-bar.js

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react"),a=(e(r),e(require("classnames"))),t=require("../../new-components/hidden-visually/hidden-visually.js");function s({fillPercentage:e=0,className:s,"aria-valuetext":l}){const n=a("reactist_progress_bar",s),i=e<0?0:e>100?100:e;return r.createElement("div",{className:n},r.createElement("div",{className:"inner",style:{width:i+"%"}}),r.createElement(t.HiddenVisually,null,r.createElement("progress",{value:i,max:100,"aria-valuetext":null!=l?l:void 0})))}s.displayName="ProgressBar",exports.ProgressBar=s;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react"),a=(e(r),e(require("classnames"))),t=require("../../hidden-visually/hidden-visually.js");function s({fillPercentage:e=0,className:s,"aria-valuetext":l}){const i=a("reactist_progress_bar",s),n=e<0?0:e>100?100:e;return r.createElement("div",{className:i},r.createElement("div",{className:"inner",style:{width:n+"%"}}),r.createElement(t.HiddenVisually,null,r.createElement("progress",{value:n,max:100,"aria-valuetext":null!=l?l:void 0})))}s.displayName="ProgressBar",exports.ProgressBar=s;
 //# sourceMappingURL=progress-bar.js.map

package/lib/components/progress-bar/progress-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.js","sources":["../../../src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["import * as React from 'react'\nimport { HiddenVisually } from '../../new-components/hidden-visually'\nimport classNames from 'classnames'\n\nimport './progress-bar.less'\n\ntype Props = {\n    /** Additional css class applied to the progress bar. */\n    className?: string\n    /** How much of the progress bar should be filled. Number between 0 and 100 inclusive. */\n    fillPercentage?: number\n    /** Defines the human readable text alternative for assitive technologies. */\n    'aria-valuetext'?: string\n}\nfunction ProgressBar({ fillPercentage = 0, className, 'aria-valuetext': ariaValuetext }: Props) {\n    const finalClassName = classNames('reactist_progress_bar', className)\n    const width = fillPercentage < 0 ? 0 : fillPercentage > 100 ? 100 : fillPercentage\n    return (\n        <div className={finalClassName}>\n            <div className=\"inner\" style={{ width: `${width}%` }} />\n            <HiddenVisually>\n                <progress value={width} max={100} aria-valuetext={ariaValuetext ?? undefined} />\n            </HiddenVisually>\n        </div>\n    )\n}\nProgressBar.displayName = 'ProgressBar'\n\nexport { ProgressBar }\n"],"names":["ProgressBar","fillPercentage","className","aria-valuetext","ariaValuetext","finalClassName","classNames","width","React","style","HiddenVisually","value","max","undefined","displayName"],"mappings":"wQAcA,SAASA,GAAYC,eAAEA,EAAiB,EAAnBC,UAAsBA,EAAWC,iBAAkBC,IACpE,MAAMC,EAAiBC,EAAW,wBAAyBJ,GACrDK,EAAQN,EAAiB,EAAI,EAAIA,EAAiB,IAAM,IAAMA,EACpE,OACIO,uBAAKN,UAAWG,GACZG,uBAAKN,UAAU,QAAQO,MAAO,CAAEF,MAAUA,SAC1CC,gBAACE,sBACGF,4BAAUG,MAAOJ,EAAOK,IAAK,2BAAqBR,EAAAA,OAAiBS,MAKnFb,EAAYc,YAAc"}
+{"version":3,"file":"progress-bar.js","sources":["../../../src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["import * as React from 'react'\nimport { HiddenVisually } from '../../hidden-visually'\nimport classNames from 'classnames'\n\nimport './progress-bar.less'\n\ntype Props = {\n    /** Additional css class applied to the progress bar. */\n    className?: string\n    /** How much of the progress bar should be filled. Number between 0 and 100 inclusive. */\n    fillPercentage?: number\n    /** Defines the human readable text alternative for assitive technologies. */\n    'aria-valuetext'?: string\n}\nfunction ProgressBar({ fillPercentage = 0, className, 'aria-valuetext': ariaValuetext }: Props) {\n    const finalClassName = classNames('reactist_progress_bar', className)\n    const width = fillPercentage < 0 ? 0 : fillPercentage > 100 ? 100 : fillPercentage\n    return (\n        <div className={finalClassName}>\n            <div className=\"inner\" style={{ width: `${width}%` }} />\n            <HiddenVisually>\n                <progress value={width} max={100} aria-valuetext={ariaValuetext ?? undefined} />\n            </HiddenVisually>\n        </div>\n    )\n}\nProgressBar.displayName = 'ProgressBar'\n\nexport { ProgressBar }\n"],"names":["ProgressBar","fillPercentage","className","aria-valuetext","ariaValuetext","finalClassName","classNames","width","React","style","HiddenVisually","value","max","undefined","displayName"],"mappings":"yPAcA,SAASA,GAAYC,eAAEA,EAAiB,EAAnBC,UAAsBA,EAAWC,iBAAkBC,IACpE,MAAMC,EAAiBC,EAAW,wBAAyBJ,GACrDK,EAAQN,EAAiB,EAAI,EAAIA,EAAiB,IAAM,IAAMA,EACpE,OACIO,uBAAKN,UAAWG,GACZG,uBAAKN,UAAU,QAAQO,MAAO,CAAEF,MAAUA,SAC1CC,gBAACE,sBACGF,4BAAUG,MAAOJ,EAAOK,IAAK,2BAAqBR,EAAAA,OAAiBS,MAKnFb,EAAYc,YAAc"}

package/lib/components/time/time.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../../new-components/tooltip/tooltip.js"),s=require("./time-utils.js");class r extends e.Component{constructor(e){super(e),this.refreshInterval=void 0,this.refreshInterval=void 0,this.state={hovered:!1,mouseX:void 0,mouseY:void 0}}componentDidMount(){this.props.refresh&&this._refresh()}componentDidUpdate(e){!e.refresh&&this.props.refresh&&this._refresh(),e.refresh&&!this.props.refresh&&this.refreshInterval&&clearTimeout(this.refreshInterval)}componentWillUnmount(){this.refreshInterval&&clearTimeout(this.refreshInterval)}_setHovered(e,t){const{mouseX:s,mouseY:r}=this.state,{clientX:o,clientY:i}=t;o===s&&i===r||this.setState(()=>({hovered:e,mouseX:o,mouseY:i}))}_renderTime(e){if(this.props.time){if(this.state.hovered){if(this.props.expandFullyOnHover&&!this.props.tooltipOnHover)return s.TimeUtils.formatTimeLong(this.props.time,e);if(this.props.expandOnHover&&!this.props.tooltipOnHover)return s.TimeUtils.formatTime(this.props.time,e)}return s.TimeUtils.timeAgo(this.props.time,e)}}_refresh(){this.refreshInterval=setInterval(()=>{this.forceUpdate()},6e4)}render(){let r="reactist_time";this.props.className&&(r=this.props.className);const o=this._renderTime(this.props.config);return e.createElement("time",{className:r,onMouseEnter:e=>this._setHovered(!0,e),onMouseLeave:e=>this._setHovered(!1,e)},this.props.tooltipOnHover?e.createElement(t.Tooltip,{content:this.props.tooltip||this.props.time&&s.TimeUtils.formatTimeLong(this.props.time,this.props.config)},e.createElement("span",null,o)):o)}}r.displayName=void 0,r.defaultProps=void 0,r.displayName="Time",r.defaultProps={expandOnHover:!1,expandFullyOnHover:!1,tooltipOnHover:!1,refresh:!0,config:{locale:"en",daysSuffix:"d",hoursSuffix:"h",minutesSuffix:"m",momentsAgo:"moments ago"}},exports.Time=r;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../../tooltip/tooltip.js"),s=require("./time-utils.js");class r extends e.Component{constructor(e){super(e),this.refreshInterval=void 0,this.refreshInterval=void 0,this.state={hovered:!1,mouseX:void 0,mouseY:void 0}}componentDidMount(){this.props.refresh&&this._refresh()}componentDidUpdate(e){!e.refresh&&this.props.refresh&&this._refresh(),e.refresh&&!this.props.refresh&&this.refreshInterval&&clearTimeout(this.refreshInterval)}componentWillUnmount(){this.refreshInterval&&clearTimeout(this.refreshInterval)}_setHovered(e,t){const{mouseX:s,mouseY:r}=this.state,{clientX:o,clientY:i}=t;o===s&&i===r||this.setState(()=>({hovered:e,mouseX:o,mouseY:i}))}_renderTime(e){if(this.props.time){if(this.state.hovered){if(this.props.expandFullyOnHover&&!this.props.tooltipOnHover)return s.TimeUtils.formatTimeLong(this.props.time,e);if(this.props.expandOnHover&&!this.props.tooltipOnHover)return s.TimeUtils.formatTime(this.props.time,e)}return s.TimeUtils.timeAgo(this.props.time,e)}}_refresh(){this.refreshInterval=setInterval(()=>{this.forceUpdate()},6e4)}render(){let r="reactist_time";this.props.className&&(r=this.props.className);const o=this._renderTime(this.props.config);return e.createElement("time",{className:r,onMouseEnter:e=>this._setHovered(!0,e),onMouseLeave:e=>this._setHovered(!1,e)},this.props.tooltipOnHover?e.createElement(t.Tooltip,{content:this.props.tooltip||this.props.time&&s.TimeUtils.formatTimeLong(this.props.time,this.props.config)},e.createElement("span",null,o)):o)}}r.displayName=void 0,r.defaultProps=void 0,r.displayName="Time",r.defaultProps={expandOnHover:!1,expandFullyOnHover:!1,tooltipOnHover:!1,refresh:!0,config:{locale:"en",daysSuffix:"d",hoursSuffix:"h",minutesSuffix:"m",momentsAgo:"moments ago"}},exports.Time=r;
 //# sourceMappingURL=time.js.map

package/lib/components/time/time.js.map

@@ -1 +1 @@
-{"version":3,"file":"time.js","sources":["../../../src/components/time/time.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Tooltip } from '../../new-components/tooltip'\nimport { TimeUtils, TimeConfig } from './time-utils'\n\nimport './time.less'\n\nconst DELAY = 60000\n\ntype Props = {\n    /** UNIX timestamp of the time to display. */\n    time?: number\n    /** Configuration for localization. */\n    config?: TimeConfig\n    /** Additional css class applied to the time element. */\n    className?: string\n    tooltipOnHover?: boolean\n    /** Refresh the component every DELAY seconds. */\n    refresh?: boolean\n    /** If you don't want to use the default time format on the tooltip use this prop to supply a custom text */\n    tooltip?: React.ReactNode\n    /** When hovering over time it expands to short absolute version. */\n    expandOnHover?: boolean\n    /** When hovering over time it expands to the full absolute version. */\n    expandFullyOnHover?: boolean\n}\n\ntype State = {\n    hovered: boolean\n    mouseX?: number\n    mouseY?: number\n}\n\nclass Time extends React.Component<Props, State> {\n    public static displayName: string\n    public static defaultProps: Props\n\n    constructor(props: Props) {\n        super(props)\n        this.refreshInterval = undefined\n\n        this.state = {\n            hovered: false,\n            mouseX: undefined,\n            mouseY: undefined,\n        }\n    }\n\n    componentDidMount() {\n        if (this.props.refresh) {\n            this._refresh()\n        }\n    }\n\n    componentDidUpdate(prevProps: Props) {\n        if (!prevProps.refresh && this.props.refresh) {\n            this._refresh()\n        }\n\n        if (prevProps.refresh && !this.props.refresh) {\n            if (this.refreshInterval) {\n                clearTimeout(this.refreshInterval)\n            }\n        }\n    }\n\n    componentWillUnmount() {\n        if (this.refreshInterval) {\n            clearTimeout(this.refreshInterval)\n        }\n    }\n\n    refreshInterval?: ReturnType<typeof setTimeout>\n\n    _setHovered(hovered: boolean, event: React.MouseEvent) {\n        const { mouseX, mouseY } = this.state\n        const { clientX, clientY } = event\n        if (clientX !== mouseX || clientY !== mouseY) {\n            // mouse has moved\n            this.setState(() => ({\n                hovered,\n                mouseX: clientX,\n                mouseY: clientY,\n            }))\n        }\n    }\n\n    _renderTime(config: Props['config']) {\n        if (!this.props.time) {\n            return\n        }\n        if (this.state.hovered) {\n            if (this.props.expandFullyOnHover && !this.props.tooltipOnHover) {\n                return TimeUtils.formatTimeLong(this.props.time, config)\n            }\n            if (this.props.expandOnHover && !this.props.tooltipOnHover) {\n                return TimeUtils.formatTime(this.props.time, config)\n            }\n        }\n        return TimeUtils.timeAgo(this.props.time, config)\n    }\n\n    _refresh() {\n        this.refreshInterval = setInterval(() => {\n            this.forceUpdate()\n        }, DELAY)\n    }\n\n    render() {\n        let className = 'reactist_time'\n        if (this.props.className) {\n            className = this.props.className\n        }\n\n        const timeComponent = this._renderTime(this.props.config)\n\n        return (\n            <time\n                className={className}\n                onMouseEnter={(event) => this._setHovered(true, event)}\n                onMouseLeave={(event) => this._setHovered(false, event)}\n            >\n                {this.props.tooltipOnHover ? (\n                    <Tooltip\n                        content={\n                            this.props.tooltip ||\n                            (this.props.time &&\n                                TimeUtils.formatTimeLong(this.props.time, this.props.config))\n                        }\n                    >\n                        <span>{timeComponent}</span>\n                    </Tooltip>\n                ) : (\n                    timeComponent\n                )}\n            </time>\n        )\n    }\n}\nTime.displayName = 'Time'\n\nTime.defaultProps = {\n    expandOnHover: false,\n    expandFullyOnHover: false,\n    tooltipOnHover: false,\n    refresh: true,\n    config: {\n        locale: 'en',\n        daysSuffix: 'd',\n        hoursSuffix: 'h',\n        minutesSuffix: 'm',\n        momentsAgo: 'moments ago',\n    },\n}\n\nexport { Time }\n"],"names":["Time","React","constructor","props","super","refreshInterval","this","undefined","state","hovered","mouseX","mouseY","componentDidMount","refresh","_refresh","componentDidUpdate","prevProps","clearTimeout","componentWillUnmount","_setHovered","event","clientX","clientY","setState","_renderTime","config","time","expandFullyOnHover","tooltipOnHover","TimeUtils","formatTimeLong","expandOnHover","formatTime","timeAgo","setInterval","forceUpdate","render","className","timeComponent","onMouseEnter","onMouseLeave","Tooltip","content","tooltip","displayName","defaultProps","locale","daysSuffix","hoursSuffix","minutesSuffix","momentsAgo"],"mappings":"6KAiCA,MAAMA,UAAaC,YAIfC,YAAYC,GACRC,MAAMD,QAkCVE,uBAjCIC,KAAKD,qBAAkBE,EAEvBD,KAAKE,MAAQ,CACTC,SAAS,EACTC,YAAQH,EACRI,YAAQJ,GAIhBK,oBACQN,KAAKH,MAAMU,SACXP,KAAKQ,WAIbC,mBAAmBC,IACVA,EAAUH,SAAWP,KAAKH,MAAMU,SACjCP,KAAKQ,WAGLE,EAAUH,UAAYP,KAAKH,MAAMU,SAC7BP,KAAKD,iBACLY,aAAaX,KAAKD,iBAK9Ba,uBACQZ,KAAKD,iBACLY,aAAaX,KAAKD,iBAM1Bc,YAAYV,EAAkBW,GAC1B,MAAMV,OAAEA,EAAFC,OAAUA,GAAWL,KAAKE,OAC1Ba,QAAEA,EAAFC,QAAWA,GAAYF,EACzBC,IAAYX,GAAUY,IAAYX,GAElCL,KAAKiB,SAAS,MACVd,QAAAA,EACAC,OAAQW,EACRV,OAAQW,KAKpBE,YAAYC,GACR,GAAKnB,KAAKH,MAAMuB,KAAhB,CAGA,GAAIpB,KAAKE,MAAMC,QAAS,CACpB,GAAIH,KAAKH,MAAMwB,qBAAuBrB,KAAKH,MAAMyB,eAC7C,OAAOC,YAAUC,eAAexB,KAAKH,MAAMuB,KAAMD,GAErD,GAAInB,KAAKH,MAAM4B,gBAAkBzB,KAAKH,MAAMyB,eACxC,OAAOC,YAAUG,WAAW1B,KAAKH,MAAMuB,KAAMD,GAGrD,OAAOI,YAAUI,QAAQ3B,KAAKH,MAAMuB,KAAMD,IAG9CX,WACIR,KAAKD,gBAAkB6B,YAAY,KAC/B5B,KAAK6B,eAjGH,KAqGVC,SACI,IAAIC,EAAY,gBACZ/B,KAAKH,MAAMkC,YACXA,EAAY/B,KAAKH,MAAMkC,WAG3B,MAAMC,EAAgBhC,KAAKkB,YAAYlB,KAAKH,MAAMsB,QAElD,OACIxB,wBACIoC,UAAWA,EACXE,aAAenB,GAAUd,KAAKa,aAAY,EAAMC,GAChDoB,aAAepB,GAAUd,KAAKa,aAAY,EAAOC,IAEhDd,KAAKH,MAAMyB,eACR3B,gBAACwC,WACGC,QACIpC,KAAKH,MAAMwC,SACVrC,KAAKH,MAAMuB,MACRG,YAAUC,eAAexB,KAAKH,MAAMuB,KAAMpB,KAAKH,MAAMsB,SAG7DxB,4BAAOqC,IAGXA,IApGdtC,EACY4C,mBADZ5C,EAEY6C,oBAwGlB7C,EAAK4C,YAAc,OAEnB5C,EAAK6C,aAAe,CAChBd,eAAe,EACfJ,oBAAoB,EACpBC,gBAAgB,EAChBf,SAAS,EACTY,OAAQ,CACJqB,OAAQ,KACRC,WAAY,IACZC,YAAa,IACbC,cAAe,IACfC,WAAY"}
+{"version":3,"file":"time.js","sources":["../../../src/components/time/time.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Tooltip } from '../../tooltip'\nimport { TimeUtils, TimeConfig } from './time-utils'\n\nimport './time.less'\n\nconst DELAY = 60000\n\ntype Props = {\n    /** UNIX timestamp of the time to display. */\n    time?: number\n    /** Configuration for localization. */\n    config?: TimeConfig\n    /** Additional css class applied to the time element. */\n    className?: string\n    tooltipOnHover?: boolean\n    /** Refresh the component every DELAY seconds. */\n    refresh?: boolean\n    /** If you don't want to use the default time format on the tooltip use this prop to supply a custom text */\n    tooltip?: React.ReactNode\n    /** When hovering over time it expands to short absolute version. */\n    expandOnHover?: boolean\n    /** When hovering over time it expands to the full absolute version. */\n    expandFullyOnHover?: boolean\n}\n\ntype State = {\n    hovered: boolean\n    mouseX?: number\n    mouseY?: number\n}\n\nclass Time extends React.Component<Props, State> {\n    public static displayName: string\n    public static defaultProps: Props\n\n    constructor(props: Props) {\n        super(props)\n        this.refreshInterval = undefined\n\n        this.state = {\n            hovered: false,\n            mouseX: undefined,\n            mouseY: undefined,\n        }\n    }\n\n    componentDidMount() {\n        if (this.props.refresh) {\n            this._refresh()\n        }\n    }\n\n    componentDidUpdate(prevProps: Props) {\n        if (!prevProps.refresh && this.props.refresh) {\n            this._refresh()\n        }\n\n        if (prevProps.refresh && !this.props.refresh) {\n            if (this.refreshInterval) {\n                clearTimeout(this.refreshInterval)\n            }\n        }\n    }\n\n    componentWillUnmount() {\n        if (this.refreshInterval) {\n            clearTimeout(this.refreshInterval)\n        }\n    }\n\n    refreshInterval?: ReturnType<typeof setTimeout>\n\n    _setHovered(hovered: boolean, event: React.MouseEvent) {\n        const { mouseX, mouseY } = this.state\n        const { clientX, clientY } = event\n        if (clientX !== mouseX || clientY !== mouseY) {\n            // mouse has moved\n            this.setState(() => ({\n                hovered,\n                mouseX: clientX,\n                mouseY: clientY,\n            }))\n        }\n    }\n\n    _renderTime(config: Props['config']) {\n        if (!this.props.time) {\n            return\n        }\n        if (this.state.hovered) {\n            if (this.props.expandFullyOnHover && !this.props.tooltipOnHover) {\n                return TimeUtils.formatTimeLong(this.props.time, config)\n            }\n            if (this.props.expandOnHover && !this.props.tooltipOnHover) {\n                return TimeUtils.formatTime(this.props.time, config)\n            }\n        }\n        return TimeUtils.timeAgo(this.props.time, config)\n    }\n\n    _refresh() {\n        this.refreshInterval = setInterval(() => {\n            this.forceUpdate()\n        }, DELAY)\n    }\n\n    render() {\n        let className = 'reactist_time'\n        if (this.props.className) {\n            className = this.props.className\n        }\n\n        const timeComponent = this._renderTime(this.props.config)\n\n        return (\n            <time\n                className={className}\n                onMouseEnter={(event) => this._setHovered(true, event)}\n                onMouseLeave={(event) => this._setHovered(false, event)}\n            >\n                {this.props.tooltipOnHover ? (\n                    <Tooltip\n                        content={\n                            this.props.tooltip ||\n                            (this.props.time &&\n                                TimeUtils.formatTimeLong(this.props.time, this.props.config))\n                        }\n                    >\n                        <span>{timeComponent}</span>\n                    </Tooltip>\n                ) : (\n                    timeComponent\n                )}\n            </time>\n        )\n    }\n}\nTime.displayName = 'Time'\n\nTime.defaultProps = {\n    expandOnHover: false,\n    expandFullyOnHover: false,\n    tooltipOnHover: false,\n    refresh: true,\n    config: {\n        locale: 'en',\n        daysSuffix: 'd',\n        hoursSuffix: 'h',\n        minutesSuffix: 'm',\n        momentsAgo: 'moments ago',\n    },\n}\n\nexport { Time }\n"],"names":["Time","React","constructor","props","super","refreshInterval","this","undefined","state","hovered","mouseX","mouseY","componentDidMount","refresh","_refresh","componentDidUpdate","prevProps","clearTimeout","componentWillUnmount","_setHovered","event","clientX","clientY","setState","_renderTime","config","time","expandFullyOnHover","tooltipOnHover","TimeUtils","formatTimeLong","expandOnHover","formatTime","timeAgo","setInterval","forceUpdate","render","className","timeComponent","onMouseEnter","onMouseLeave","Tooltip","content","tooltip","displayName","defaultProps","locale","daysSuffix","hoursSuffix","minutesSuffix","momentsAgo"],"mappings":"8JAiCA,MAAMA,UAAaC,YAIfC,YAAYC,GACRC,MAAMD,QAkCVE,uBAjCIC,KAAKD,qBAAkBE,EAEvBD,KAAKE,MAAQ,CACTC,SAAS,EACTC,YAAQH,EACRI,YAAQJ,GAIhBK,oBACQN,KAAKH,MAAMU,SACXP,KAAKQ,WAIbC,mBAAmBC,IACVA,EAAUH,SAAWP,KAAKH,MAAMU,SACjCP,KAAKQ,WAGLE,EAAUH,UAAYP,KAAKH,MAAMU,SAC7BP,KAAKD,iBACLY,aAAaX,KAAKD,iBAK9Ba,uBACQZ,KAAKD,iBACLY,aAAaX,KAAKD,iBAM1Bc,YAAYV,EAAkBW,GAC1B,MAAMV,OAAEA,EAAFC,OAAUA,GAAWL,KAAKE,OAC1Ba,QAAEA,EAAFC,QAAWA,GAAYF,EACzBC,IAAYX,GAAUY,IAAYX,GAElCL,KAAKiB,SAAS,MACVd,QAAAA,EACAC,OAAQW,EACRV,OAAQW,KAKpBE,YAAYC,GACR,GAAKnB,KAAKH,MAAMuB,KAAhB,CAGA,GAAIpB,KAAKE,MAAMC,QAAS,CACpB,GAAIH,KAAKH,MAAMwB,qBAAuBrB,KAAKH,MAAMyB,eAC7C,OAAOC,YAAUC,eAAexB,KAAKH,MAAMuB,KAAMD,GAErD,GAAInB,KAAKH,MAAM4B,gBAAkBzB,KAAKH,MAAMyB,eACxC,OAAOC,YAAUG,WAAW1B,KAAKH,MAAMuB,KAAMD,GAGrD,OAAOI,YAAUI,QAAQ3B,KAAKH,MAAMuB,KAAMD,IAG9CX,WACIR,KAAKD,gBAAkB6B,YAAY,KAC/B5B,KAAK6B,eAjGH,KAqGVC,SACI,IAAIC,EAAY,gBACZ/B,KAAKH,MAAMkC,YACXA,EAAY/B,KAAKH,MAAMkC,WAG3B,MAAMC,EAAgBhC,KAAKkB,YAAYlB,KAAKH,MAAMsB,QAElD,OACIxB,wBACIoC,UAAWA,EACXE,aAAenB,GAAUd,KAAKa,aAAY,EAAMC,GAChDoB,aAAepB,GAAUd,KAAKa,aAAY,EAAOC,IAEhDd,KAAKH,MAAMyB,eACR3B,gBAACwC,WACGC,QACIpC,KAAKH,MAAMwC,SACVrC,KAAKH,MAAMuB,MACRG,YAAUC,eAAexB,KAAKH,MAAMuB,KAAMpB,KAAKH,MAAMsB,SAG7DxB,4BAAOqC,IAGXA,IApGdtC,EACY4C,mBADZ5C,EAEY6C,oBAwGlB7C,EAAK4C,YAAc,OAEnB5C,EAAK6C,aAAe,CAChBd,eAAe,EACfJ,oBAAoB,EACpBC,gBAAgB,EAChBf,SAAS,EACTY,OAAQ,CACJqB,OAAQ,KACRC,WAAY,IACZC,YAAa,IACbC,cAAe,IACfC,WAAY"}

package/lib/deprecated-modal/modal.js

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