@doist/reactist 25.0.0-beta.2 → 25.0.0

package/lib/box/box.js.map

@@ -1 +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\nfunction getBoxClassNames({\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}: BoxProps) {\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 classNames(\n        className,\n        styles.box,\n        display ? getClassNames(styles, 'display', display) : null,\n        position !== 'static' ? getClassNames(styles, 'position', position) : null,\n        minWidth != null ? getClassNames(widthStyles, 'minWidth', String(minWidth)) : 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 ? getClassNames(styles, 'flexShrink', String(flexShrink)) : 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' ? getClassNames(styles, 'borderRadius', borderRadius) : null,\n        border !== 'none' ? getClassNames(styles, 'border', border) : null,\n    )\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    return React.createElement(\n        component,\n        {\n            ...props,\n            className: getBoxClassNames({\n                position,\n                display,\n                flexDirection,\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            }),\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, getBoxClassNames }\n"],"names":["getBoxClassNames","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","resolvedPaddingTop","resolvedPaddingRight","resolvedPaddingBottom","resolvedPaddingLeft","resolvedMarginTop","resolvedMarginRight","resolvedMarginBottom","resolvedMarginLeft","omitFlex","classNames","styles","box","getClassNames","widthStyles","String","paddingStyles","marginStyles","gapStyles","polymorphicComponent","ref","as","component","children","props","React"],"mappings":"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"}
+{"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\nfunction getBoxClassNames({\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}: BoxProps) {\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 classNames(\n        className,\n        styles.box,\n        display ? getClassNames(styles, 'display', display) : null,\n        position !== 'static' ? getClassNames(styles, 'position', position) : null,\n        minWidth != null ? getClassNames(widthStyles, 'minWidth', String(minWidth)) : 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 ? getClassNames(styles, 'flexShrink', String(flexShrink)) : 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' ? getClassNames(styles, 'borderRadius', borderRadius) : null,\n        border !== 'none' ? getClassNames(styles, 'border', border) : null,\n    )\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    return React.createElement(\n        component,\n        {\n            ...props,\n            className: getBoxClassNames({\n                position,\n                display,\n                flexDirection,\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            }),\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, getBoxClassNames }\n"],"names":["getBoxClassNames","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","_ref","_ref2","_ref3","_ref4","_ref5","_ref6","_ref7","_ref8","resolvedPaddingTop","resolvedPaddingRight","resolvedPaddingBottom","resolvedPaddingLeft","resolvedMarginTop","resolvedMarginRight","resolvedMarginBottom","resolvedMarginLeft","omitFlex","classNames","styles","box","getClassNames","widthStyles","String","paddingStyles","marginStyles","gapStyles","polymorphicComponent","_ref9","ref","as","component","children","props","_objectWithoutProperties","objectWithoutProperties","_excluded","React","createElement"],"mappings":"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"}

package/lib/button/button.d.ts

@@ -2,10 +2,10 @@ import * as React from 'react';
 import { RoleProps } from '@ariakit/react';
 import { TooltipProps } from '../tooltip';
 import type { ObfuscatedClassName } from '../utils/common-types';
-declare type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'quaternary';
-declare type ButtonTone = 'normal' | 'destructive';
-declare type ButtonSize = 'small' | 'normal' | 'large';
-declare type IconElement = React.ReactElement | string;
+type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'quaternary';
+type ButtonTone = 'normal' | 'destructive';
+type ButtonSize = 'small' | 'normal' | 'large';
+type IconElement = React.ReactElement | string;
 interface CommonButtonProps extends ObfuscatedClassName, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className'>, Pick<RoleProps, 'render'> {
     /**
      * The button's variant.

package/lib/button/button.js

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),n=(e(l),e(require("classnames"))),a=require("../box/box.js"),o=require("@ariakit/react"),r=require("../spinner/spinner.js"),i=require("../tooltip/tooltip.js"),d=require("./button.module.css.js");const s=["variant","tone","size","shape","type","disabled","loading","tooltip","render","onClick","exceptionallySetClassName","children","startIcon","endIcon","width","align"],u=["variant","tone","size","shape","type","disabled","loading","tooltip","render","onClick","exceptionallySetClassName","children","icon"];function c(e){e.preventDefault()}const p=l.forwardRef((function(e,u){let{variant:p,tone:f="normal",size:m="normal",shape:b="normal",type:h="button",disabled:x=!1,loading:v=!1,tooltip:y,render:j,onClick:C,exceptionallySetClassName:E,children:S,startIcon:g,endIcon:B,width:N="auto",align:q="center"}=e,k=t.objectWithoutProperties(e,s);const w=v||x,I=l.createElement(o.Role.button,t.objectSpread2(t.objectSpread2({},k),{},{render:j,type:null!=j?void 0:h,ref:u,"aria-disabled":w,onClick:w?c:C,className:n([a.getBoxClassNames({width:N}),E,d.default.baseButton,d.default["variant-"+p],d.default["tone-"+f],d.default["size-"+m],"rounded"===b?d.default["shape-rounded"]:null,x?d.default.disabled:null])}),l.createElement(l.Fragment,null,g?l.createElement(a.Box,{display:"flex",className:d.default.startIcon,"aria-hidden":!0},v&&!B?l.createElement(r.Spinner,null):g):null,S?l.createElement(a.Box,{as:"span",className:d.default.label,overflow:"hidden",width:"full"===N?"full":void 0,textAlign:"auto"===N?"center":q},S):null,B||v&&!g?l.createElement(a.Box,{display:"flex",className:d.default.endIcon,"aria-hidden":!0},v?l.createElement(r.Spinner,null):B):null));return y?l.createElement(i.Tooltip,{content:y},I):I})),f=l.forwardRef((function(e,a){let{variant:s,tone:p="normal",size:f="normal",shape:m="normal",type:b="button",disabled:h=!1,loading:x=!1,tooltip:v,render:y,onClick:j,exceptionallySetClassName:C,icon:E}=e,S=t.objectWithoutProperties(e,u);const g=x||h,B=l.createElement(o.Role.button,t.objectSpread2(t.objectSpread2({},S),{},{render:y,type:null!=y?void 0:b,ref:a,"aria-disabled":g,onClick:g?c:j,className:n([C,d.default.baseButton,d.default["variant-"+s],d.default["tone-"+p],d.default["size-"+f],"rounded"===m?d.default["shape-rounded"]:null,d.default.iconButton,h?d.default.disabled:null])}),x&&l.createElement(r.Spinner,null)||E),N=void 0===v?S["aria-label"]:v;return N?l.createElement(i.Tooltip,{content:N},B):B}));exports.Button=p,exports.IconButton=f;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),n=require("classnames"),l=require("@ariakit/react"),a=require("../box/box.js"),r=require("../spinner/spinner.js"),o=require("../tooltip/tooltip.js"),i=require("./button.module.css.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var l=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,l.get?l:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,t}var s=u(t),c=d(n);const p=["variant","tone","size","shape","type","disabled","loading","tooltip","render","onClick","exceptionallySetClassName","children","startIcon","endIcon","width","align"],f=["variant","tone","size","shape","type","disabled","loading","tooltip","render","onClick","exceptionallySetClassName","children","icon"];function b(e){e.preventDefault()}const m=s.forwardRef((function(t,n){let{variant:d,tone:u="normal",size:f="normal",shape:m="normal",type:h="button",disabled:v=!1,loading:j=!1,tooltip:y,render:x,onClick:g,exceptionallySetClassName:E,children:C,startIcon:S,endIcon:B,width:N="auto",align:k="center"}=t,q=e.objectWithoutProperties(t,p);const w=j||v,I=s.createElement(l.Role.button,e.objectSpread2(e.objectSpread2({},q),{},{render:x,type:null!=x?void 0:h,ref:n,"aria-disabled":w,onClick:w?b:g,className:c.default([a.getBoxClassNames({width:N}),E,i.default.baseButton,i.default["variant-"+d],i.default["tone-"+u],i.default["size-"+f],"rounded"===m?i.default["shape-rounded"]:null,v?i.default.disabled:null])}),s.createElement(s.Fragment,null,S?s.createElement(a.Box,{display:"flex",className:i.default.startIcon,"aria-hidden":!0},j&&!B?s.createElement(r.Spinner,null):S):null,C?s.createElement(a.Box,{as:"span",className:i.default.label,overflow:"hidden",width:"full"===N?"full":void 0,textAlign:"auto"===N?"center":k},C):null,B||j&&!S?s.createElement(a.Box,{display:"flex",className:i.default.endIcon,"aria-hidden":!0},j?s.createElement(r.Spinner,null):B):null));return y?s.createElement(o.Tooltip,{content:y},I):I})),h=s.forwardRef((function(t,n){let{variant:a,tone:d="normal",size:u="normal",shape:p="normal",type:m="button",disabled:h=!1,loading:v=!1,tooltip:j,render:y,onClick:x,exceptionallySetClassName:g,icon:E}=t,C=e.objectWithoutProperties(t,f);const S=v||h,B=s.createElement(l.Role.button,e.objectSpread2(e.objectSpread2({},C),{},{render:y,type:null!=y?void 0:m,ref:n,"aria-disabled":S,onClick:S?b:x,className:c.default([g,i.default.baseButton,i.default["variant-"+a],i.default["tone-"+d],i.default["size-"+u],"rounded"===p?i.default["shape-rounded"]:null,i.default.iconButton,h?i.default.disabled:null])}),v&&s.createElement(r.Spinner,null)||E),N=void 0===j?C["aria-label"]:j;return N?s.createElement(o.Tooltip,{content:N},B):B}));exports.Button=m,exports.IconButton=h;
 //# sourceMappingURL=button.js.map

package/lib/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../src/button/button.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Role, RoleProps } from '@ariakit/react'\n\nimport { Box, getBoxClassNames } from '../box'\nimport { Spinner } from '../spinner'\nimport { Tooltip, TooltipProps } from '../tooltip'\n\nimport styles from './button.module.css'\n\nimport type { ObfuscatedClassName } from '../utils/common-types'\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.ReactElement | string\n\ninterface CommonButtonProps\n    extends ObfuscatedClassName,\n        Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className'>,\n        Pick<RoleProps, 'render'> {\n    /**\n     * The button's variant.\n     */\n    variant: ButtonVariant\n\n    /**\n     * The button's tone.\n     *\n     * @default 'normal'\n     */\n    tone?: ButtonTone\n\n    /**\n     * The button's size.\n     *\n     * @default 'normal'\n     */\n    size?: ButtonSize\n\n    /**\n     * Controls the shape of the button.\n     *\n     * Specifically, it allows to make it have slightly curved corners (the default) vs. having them\n     * fully curved to the point that they are as round as possible.\n     *\n     * In icon-only buttons this allows to have the button be circular.\n     *\n     * @default 'normal'\n     */\n    shape?: 'normal' | 'rounded'\n\n    /**\n     * Whether the button is disabled or not.\n     *\n     * Buttons are disabled using aria-disabled, rather than the HTML disabled attribute. This\n     * allows the buttons to be focusable, which can aid discoverability. This way, users can tab to\n     * the button and read its label, even if they can't activate it.\n     *\n     * It is also convenient when buttons are rendered as a link. Links cannot normally be disabled,\n     * but by using aria-disabled, we can make them behave as if they were.\n     *\n     * The `onClick` handler is automatically prevented when the button is disabled in this way, to\n     * mimic the behavior of a native disabled attribute.\n     *\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    /**\n     * The type of the button.\n     *\n     * @default 'button'\n     */\n    type?: 'button' | 'submit' | 'reset'\n}\n\ninterface ButtonProps extends CommonButtonProps {\n    /**\n     * The button label content.\n     */\n    children?: React.ReactNode\n\n    /**\n     * The icon to display at the start of the button (before the label).\n     */\n    startIcon?: IconElement\n\n    /**\n     * The icon to display at the end of the button (after the label).\n     */\n    endIcon?: IconElement\n\n    /**\n     * The width of the button.\n     *\n     * - `'auto'`: The button will be as wide as its content.\n     * - `'full'`: The button will be as wide as its container.\n     *\n     * @default 'auto'\n     */\n    width?: 'auto' | 'full'\n\n    /**\n     * The alignment of the button label inside the button.\n     *\n     * @default 'center'\n     */\n    align?: 'start' | 'center' | 'end'\n}\n\n/**\n * A button element that displays a text label and optionally a start or end icon. It follows the\n * [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n    {\n        variant,\n        tone = 'normal',\n        size = 'normal',\n        shape = 'normal',\n        type = 'button',\n        disabled = false,\n        loading = false,\n        tooltip,\n        render,\n        onClick,\n        exceptionallySetClassName,\n        children,\n        startIcon,\n        endIcon,\n        width = 'auto',\n        align = 'center',\n        ...props\n    },\n    ref,\n) {\n    const isDisabled = loading || disabled\n    const buttonElement = (\n        <Role.button\n            {...props}\n            render={render}\n            type={render != null ? undefined : type}\n            ref={ref}\n            aria-disabled={isDisabled}\n            onClick={isDisabled ? preventDefault : onClick}\n            className={classNames([\n                getBoxClassNames({ width }),\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                disabled ? styles.disabled : null,\n            ])}\n        >\n            <>\n                {startIcon ? (\n                    <Box display=\"flex\" className={styles.startIcon} aria-hidden>\n                        {loading && !endIcon ? <Spinner /> : startIcon}\n                    </Box>\n                ) : null}\n\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\n                {endIcon || (loading && !startIcon) ? (\n                    <Box display=\"flex\" className={styles.endIcon} aria-hidden>\n                        {loading ? <Spinner /> : endIcon}\n                    </Box>\n                ) : null}\n            </>\n        </Role.button>\n    )\n\n    return tooltip ? <Tooltip content={tooltip}>{buttonElement}</Tooltip> : buttonElement\n})\n\ninterface IconButtonProps extends CommonButtonProps {\n    /**\n     * The icon to display inside the button.\n     */\n    icon: IconElement\n\n    /**\n     * The button label.\n     *\n     * It is used for assistive technologies, and it is also shown as a tooltip (if not tooltip is\n     * provided explicitly).\n     */\n    'aria-label': string\n}\n\n/**\n * A button element that displays an icon only, visually, though it is semantically labelled. It\n * also makes sure to always show a tooltip with its label. It follows the\n * [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).\n */\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n    {\n        variant,\n        tone = 'normal',\n        size = 'normal',\n        shape = 'normal',\n        type = 'button',\n        disabled = false,\n        loading = false,\n        tooltip,\n        render,\n        onClick,\n        exceptionallySetClassName,\n        children,\n        icon,\n        ...props\n    },\n    ref,\n) {\n    const isDisabled = loading || disabled\n    const buttonElement = (\n        <Role.button\n            {...props}\n            render={render}\n            type={render != null ? undefined : type}\n            ref={ref}\n            aria-disabled={isDisabled}\n            onClick={isDisabled ? preventDefault : onClick}\n            className={classNames([\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                styles.iconButton,\n                disabled ? styles.disabled : null,\n            ])}\n        >\n            {(loading && <Spinner />) || icon}\n        </Role.button>\n    )\n\n    const tooltipContent = tooltip === undefined ? props['aria-label'] : tooltip\n    return tooltipContent ? (\n        <Tooltip content={tooltipContent}>{buttonElement}</Tooltip>\n    ) : (\n        buttonElement\n    )\n})\n\nexport type { ButtonProps, IconButtonProps, ButtonVariant, ButtonTone }\nexport { Button, IconButton }\n"],"names":["preventDefault","event","Button","React","ref","variant","tone","size","shape","type","disabled","loading","tooltip","render","onClick","exceptionallySetClassName","children","startIcon","endIcon","width","align","props","isDisabled","buttonElement","Role","button","undefined","className","classNames","getBoxClassNames","styles","baseButton","Box","display","Spinner","as","label","overflow","textAlign","Tooltip","content","IconButton","icon","iconButton","tooltipContent"],"mappings":"qtBAYA,SAASA,EAAeC,GACpBA,EAAMD,uBAyHJE,EAASC,cAAiD,WAoB5DC,OAnBAC,QACIA,EADJC,KAEIA,EAAO,SAFXC,KAGIA,EAAO,SAHXC,MAIIA,EAAQ,SAJZC,KAKIA,EAAO,SALXC,SAMIA,GAAW,EANfC,QAOIA,GAAU,UACVC,EARJC,OASIA,EATJC,QAUIA,EAVJC,0BAWIA,EAXJC,SAYIA,EAZJC,UAaIA,EAbJC,QAcIA,EAdJC,MAeIA,EAAQ,OAfZC,MAgBIA,EAAQ,YACLC,iCAIP,MAAMC,EAAaX,GAAWD,EACxBa,EACFpB,gBAACqB,OAAKC,0CACEJ,OACJR,OAAQA,EACRJ,KAAgB,MAAVI,OAAiBa,EAAYjB,EACnCL,IAAKA,kBACUkB,EACfR,QAASQ,EAAatB,EAAiBc,EACvCa,UAAWC,EAAW,CAClBC,mBAAiB,CAAEV,MAAAA,IACnBJ,EACAe,UAAOC,WACPD,qBAAkBzB,GAClByB,kBAAexB,GACfwB,kBAAevB,GACL,YAAVC,EAAsBsB,UAAO,iBAAmB,KAChDpB,EAAWoB,UAAOpB,SAAW,SAGjCP,gCACKc,EACGd,gBAAC6B,OAAIC,QAAQ,OAAON,UAAWG,UAAOb,4BACjCN,IAAYO,EAAUf,gBAAC+B,gBAAajB,GAEzC,KAEHD,EACGb,gBAAC6B,OACGG,GAAG,OACHR,UAAWG,UAAOM,MAClBC,SAAS,SACTlB,MAAiB,SAAVA,EAAmB,YAASO,EACnCY,UAAqB,SAAVnB,EAAmB,SAAWC,GAExCJ,GAEL,KAEHE,GAAYP,IAAYM,EACrBd,gBAAC6B,OAAIC,QAAQ,OAAON,UAAWG,UAAOZ,0BACjCP,EAAUR,gBAAC+B,gBAAahB,GAE7B,OAKhB,OAAON,EAAUT,gBAACoC,WAAQC,QAAS5B,GAAUW,GAA2BA,KAuBtEkB,EAAatC,cAAqD,WAiBpEC,OAhBAC,QACIA,EADJC,KAEIA,EAAO,SAFXC,KAGIA,EAAO,SAHXC,MAIIA,EAAQ,SAJZC,KAKIA,EAAO,SALXC,SAMIA,GAAW,EANfC,QAOIA,GAAU,UACVC,EARJC,OASIA,EATJC,QAUIA,EAVJC,0BAWIA,EAXJ2B,KAaIA,KACGrB,iCAIP,MAAMC,EAAaX,GAAWD,EACxBa,EACFpB,gBAACqB,OAAKC,0CACEJ,OACJR,OAAQA,EACRJ,KAAgB,MAAVI,OAAiBa,EAAYjB,EACnCL,IAAKA,kBACUkB,EACfR,QAASQ,EAAatB,EAAiBc,EACvCa,UAAWC,EAAW,CAClBb,EACAe,UAAOC,WACPD,qBAAkBzB,GAClByB,kBAAexB,GACfwB,kBAAevB,GACL,YAAVC,EAAsBsB,UAAO,iBAAmB,KAChDA,UAAOa,WACPjC,EAAWoB,UAAOpB,SAAW,SAG/BC,GAAWR,gBAAC+B,iBAAeQ,GAI/BE,OAA6BlB,IAAZd,EAAwBS,EAAM,cAAgBT,EACrE,OAAOgC,EACHzC,gBAACoC,WAAQC,QAASI,GAAiBrB,GAEnCA"}
+{"version":3,"file":"button.js","sources":["../../src/button/button.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Role, RoleProps } from '@ariakit/react'\n\nimport { Box, getBoxClassNames } from '../box'\nimport { Spinner } from '../spinner'\nimport { Tooltip, TooltipProps } from '../tooltip'\n\nimport styles from './button.module.css'\n\nimport type { ObfuscatedClassName } from '../utils/common-types'\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.ReactElement | string\n\ninterface CommonButtonProps\n    extends ObfuscatedClassName,\n        Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className'>,\n        Pick<RoleProps, 'render'> {\n    /**\n     * The button's variant.\n     */\n    variant: ButtonVariant\n\n    /**\n     * The button's tone.\n     *\n     * @default 'normal'\n     */\n    tone?: ButtonTone\n\n    /**\n     * The button's size.\n     *\n     * @default 'normal'\n     */\n    size?: ButtonSize\n\n    /**\n     * Controls the shape of the button.\n     *\n     * Specifically, it allows to make it have slightly curved corners (the default) vs. having them\n     * fully curved to the point that they are as round as possible.\n     *\n     * In icon-only buttons this allows to have the button be circular.\n     *\n     * @default 'normal'\n     */\n    shape?: 'normal' | 'rounded'\n\n    /**\n     * Whether the button is disabled or not.\n     *\n     * Buttons are disabled using aria-disabled, rather than the HTML disabled attribute. This\n     * allows the buttons to be focusable, which can aid discoverability. This way, users can tab to\n     * the button and read its label, even if they can't activate it.\n     *\n     * It is also convenient when buttons are rendered as a link. Links cannot normally be disabled,\n     * but by using aria-disabled, we can make them behave as if they were.\n     *\n     * The `onClick` handler is automatically prevented when the button is disabled in this way, to\n     * mimic the behavior of a native disabled attribute.\n     *\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    /**\n     * The type of the button.\n     *\n     * @default 'button'\n     */\n    type?: 'button' | 'submit' | 'reset'\n}\n\ninterface ButtonProps extends CommonButtonProps {\n    /**\n     * The button label content.\n     */\n    children?: React.ReactNode\n\n    /**\n     * The icon to display at the start of the button (before the label).\n     */\n    startIcon?: IconElement\n\n    /**\n     * The icon to display at the end of the button (after the label).\n     */\n    endIcon?: IconElement\n\n    /**\n     * The width of the button.\n     *\n     * - `'auto'`: The button will be as wide as its content.\n     * - `'full'`: The button will be as wide as its container.\n     *\n     * @default 'auto'\n     */\n    width?: 'auto' | 'full'\n\n    /**\n     * The alignment of the button label inside the button.\n     *\n     * @default 'center'\n     */\n    align?: 'start' | 'center' | 'end'\n}\n\n/**\n * A button element that displays a text label and optionally a start or end icon. It follows the\n * [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n    {\n        variant,\n        tone = 'normal',\n        size = 'normal',\n        shape = 'normal',\n        type = 'button',\n        disabled = false,\n        loading = false,\n        tooltip,\n        render,\n        onClick,\n        exceptionallySetClassName,\n        children,\n        startIcon,\n        endIcon,\n        width = 'auto',\n        align = 'center',\n        ...props\n    },\n    ref,\n) {\n    const isDisabled = loading || disabled\n    const buttonElement = (\n        <Role.button\n            {...props}\n            render={render}\n            type={render != null ? undefined : type}\n            ref={ref}\n            aria-disabled={isDisabled}\n            onClick={isDisabled ? preventDefault : onClick}\n            className={classNames([\n                getBoxClassNames({ width }),\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                disabled ? styles.disabled : null,\n            ])}\n        >\n            <>\n                {startIcon ? (\n                    <Box display=\"flex\" className={styles.startIcon} aria-hidden>\n                        {loading && !endIcon ? <Spinner /> : startIcon}\n                    </Box>\n                ) : null}\n\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\n                {endIcon || (loading && !startIcon) ? (\n                    <Box display=\"flex\" className={styles.endIcon} aria-hidden>\n                        {loading ? <Spinner /> : endIcon}\n                    </Box>\n                ) : null}\n            </>\n        </Role.button>\n    )\n\n    return tooltip ? <Tooltip content={tooltip}>{buttonElement}</Tooltip> : buttonElement\n})\n\ninterface IconButtonProps extends CommonButtonProps {\n    /**\n     * The icon to display inside the button.\n     */\n    icon: IconElement\n\n    /**\n     * The button label.\n     *\n     * It is used for assistive technologies, and it is also shown as a tooltip (if not tooltip is\n     * provided explicitly).\n     */\n    'aria-label': string\n}\n\n/**\n * A button element that displays an icon only, visually, though it is semantically labelled. It\n * also makes sure to always show a tooltip with its label. It follows the\n * [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).\n */\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n    {\n        variant,\n        tone = 'normal',\n        size = 'normal',\n        shape = 'normal',\n        type = 'button',\n        disabled = false,\n        loading = false,\n        tooltip,\n        render,\n        onClick,\n        exceptionallySetClassName,\n        children,\n        icon,\n        ...props\n    },\n    ref,\n) {\n    const isDisabled = loading || disabled\n    const buttonElement = (\n        <Role.button\n            {...props}\n            render={render}\n            type={render != null ? undefined : type}\n            ref={ref}\n            aria-disabled={isDisabled}\n            onClick={isDisabled ? preventDefault : onClick}\n            className={classNames([\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                styles.iconButton,\n                disabled ? styles.disabled : null,\n            ])}\n        >\n            {(loading && <Spinner />) || icon}\n        </Role.button>\n    )\n\n    const tooltipContent = tooltip === undefined ? props['aria-label'] : tooltip\n    return tooltipContent ? (\n        <Tooltip content={tooltipContent}>{buttonElement}</Tooltip>\n    ) : (\n        buttonElement\n    )\n})\n\nexport type { ButtonProps, IconButtonProps, ButtonVariant, ButtonTone }\nexport { Button, IconButton }\n"],"names":["preventDefault","event","Button","React","forwardRef","ref","variant","tone","size","shape","type","disabled","loading","tooltip","render","onClick","exceptionallySetClassName","children","startIcon","endIcon","width","align","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","isDisabled","buttonElement","createElement","Role","button","_objectSpread","objectSpread2","undefined","aria-disabled","className","classNames","getBoxClassNames","styles","baseButton","Fragment","Box","display","aria-hidden","Spinner","as","label","overflow","textAlign","Tooltip","content","IconButton","icon","_ref2","_excluded2","iconButton","tooltipContent"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox-field.js","sources":["../../src/checkbox-field/checkbox-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Text } from '../text'\nimport { CheckboxIcon } from './checkbox-icon'\n\nimport styles from './checkbox-field.module.css'\nimport { useForkRef } from './use-fork-ref'\n\ninterface CheckboxFieldProps\n    extends 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    /**\n     *\n     * Identifies the set of checkboxes controlled by the mixed checkbox for assistive technologies.\n     */\n    'aria-controls'?: string\n\n    /**\n     * Identifies the element (or elements) that describes the checkbox for assistive technologies.\n     */\n    'aria-describedby'?: string\n\n    /**\n     * Defines a string value that labels the current checkbox for assistive technologies.\n     */\n    'aria-label'?: string\n\n    /**\n     * Identifies the element (or elements) that labels the current checkbox for assistive technologies.\n     */\n    'aria-labelledby'?: string\n\n    /**\n     * Defines whether or not the checkbox is disabled.\n     */\n    disabled?: boolean\n\n    /**\n     * The label for the checkbox element.\n     */\n    label?: React.ReactNode\n\n    /**\n     * The icon that should be added to the checkbox label.\n     */\n    icon?: React.ReactElement | string | number\n\n    /**\n     * Defines whether or not the checkbox can be of a `mixed` state.\n     */\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":"0ZA8DsBA,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"}
+{"version":3,"file":"checkbox-field.js","sources":["../../src/checkbox-field/checkbox-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Text } from '../text'\nimport { CheckboxIcon } from './checkbox-icon'\n\nimport styles from './checkbox-field.module.css'\nimport { useForkRef } from './use-fork-ref'\n\ninterface CheckboxFieldProps\n    extends 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    /**\n     *\n     * Identifies the set of checkboxes controlled by the mixed checkbox for assistive technologies.\n     */\n    'aria-controls'?: string\n\n    /**\n     * Identifies the element (or elements) that describes the checkbox for assistive technologies.\n     */\n    'aria-describedby'?: string\n\n    /**\n     * Defines a string value that labels the current checkbox for assistive technologies.\n     */\n    'aria-label'?: string\n\n    /**\n     * Identifies the element (or elements) that labels the current checkbox for assistive technologies.\n     */\n    'aria-labelledby'?: string\n\n    /**\n     * Defines whether or not the checkbox is disabled.\n     */\n    disabled?: boolean\n\n    /**\n     * The label for the checkbox element.\n     */\n    label?: React.ReactNode\n\n    /**\n     * The icon that should be added to the checkbox label.\n     */\n    icon?: React.ReactElement | string | number\n\n    /**\n     * Defines whether or not the checkbox can be of a `mixed` state.\n     */\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","forwardRef","ref","_ref2","_props$checked","_props$checked2","label","icon","disabled","indeterminate","defaultChecked","onChange","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","checked","console","warn","undefined","keyFocused","setKeyFocused","useState","checkedState","setChecked","isChecked","internalRef","useRef","combinedRef","useForkRef","useEffect","current","createElement","Box","as","display","alignItems","className","styles","container","type","aria-checked","event","defaultPrevented","currentTarget","onBlur","onKeyUp","CheckboxIcon","aria-hidden","Text"],"mappings":"qrBA8DsBA,EAAMC,YAAiD,SAEzEC,EAAAA,GAAG,IAAAC,EAAAC,EAAAC,EAAA,IADHC,MAAEA,EAAFC,KAASA,EAATC,SAAeA,EAAfC,cAAyBA,EAAzBC,eAAwCA,EAAxCC,SAAwDA,GACrDC,EADkEC,EAClEC,EAAAC,wBAAAH,EAAAI,GAG0B,kBAAlBP,GAD4C,kBAAlBI,EAAMI,UAGvCC,QAAQC,KAAK,wDACbV,OAAgBW,GAGfd,GAAUO,EAAM,eAAkBA,EAAM,oBAEzCK,QAAQC,KAAK,4BAGjB,MAAOE,EAAYC,GAAiBtB,EAAMuB,UAAS,IAC5CC,EAAcC,GAAczB,EAAMuB,SAAN,OAAeV,EAAf,OAAeA,EAAAA,EAAMI,SAArBb,EAAgCM,IAAhCP,GAC7BuB,SAAYb,EAAAA,EAAMI,WAAWO,EAE7BG,EAAc3B,EAAM4B,OAAyB,MAC7CC,EAAcC,EAAAA,WAAWH,EAAazB,GAU5C,OATAF,EAAM+B,WACF,WACQJ,EAAYK,SAAoC,kBAAlBvB,IAC9BkB,EAAYK,QAAQvB,cAAgBA,KAG5C,CAACA,IAIDT,EAACiC,cAAAC,MACG,CAAAC,GAAG,QACHC,QAAQ,OACRC,WAAW,SACXC,UAAW,CACPC,EAAAA,QAAOC,UACPhC,EAAW+B,EAAAA,QAAO/B,SAAW,KAC7BkB,EAAYa,EAAM,QAACtB,QAAU,KAC7BI,EAAakB,EAAM,QAAClB,WAAa,OAGrCrB,EAAAiC,cAAA,2CACQpB,GADR,GAAA,CAEIX,IAAK2B,EACLY,KAAK,WACSC,eAAAjC,EAAgB,QAAUiB,EACxCT,QAASS,EACTlB,SAAUA,EACVG,SAAWgC,IACP,MAAAhC,GAAAA,EAAWgC,GACNA,EAAMC,kBACPnB,EAAWkB,EAAME,cAAc5B,UAGvC6B,OAASH,IACLrB,GAAc,GACT,MAALT,SAAAA,EAAOiC,QAAPjC,EAAOiC,OAASH,IAEpBI,QAAUJ,IACNrB,GAAc,GACT,MAALT,SAAAA,EAAOkC,SAAPlC,EAAOkC,QAAUJ,OAGzB3C,EAAAiC,cAACe,eAAY,CACT/B,QAASS,EACTlB,SAAUA,EACVC,cAAeA,EAEjBwC,eAAA,IACD1C,EACGP,gBAACkC,EAAAA,IAAG,CAACE,QAAQ,OAAOE,UAAWC,EAAM,QAAChC,KACjC0C,eAAA,GAAA1C,GAEL,KACHD,EACGN,gBAACkC,MAAG,CAACE,QAAQ,OAAOE,UAAWC,EAAM,QAACjC,OAClCN,EAAAiC,cAACiB,EAADA,KAAK,KAAE5C,IAEX"}

package/lib/checkbox-field/checkbox-icon.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare type Props = React.SVGProps<SVGSVGElement> & {
+type Props = React.SVGProps<SVGSVGElement> & {
     checked?: boolean;
     indeterminate?: boolean;
     disabled?: boolean;

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

@@ -1,2 +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]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js");function t(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,t}var r=t(require("react"));const a=["checked","indeterminate","disabled"],c={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(t){let{checked:n,indeterminate:i,disabled:l}=t,d=e.objectWithoutProperties(t,a);const o=function({checked:e,indeterminate:t,disabled:r}){return t?"mixed":e?"checked":r?"filled":"unchecked"}({checked:n,indeterminate:i,disabled:l});return r.createElement("svg",e.objectSpread2({xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},d),r.createElement("path",{fill:"currentColor",fillRule:"nonzero",d:c[o]}))};
 //# sourceMappingURL=checkbox-icon.js.map

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

@@ -1 +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"}
+{"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","_ref","indeterminate","disabled","props","_objectWithoutProperties","objectWithoutProperties","_excluded","pathKey","getPathKey","React","createElement","_objectSpread","xmlns","width","height","viewBox","fill","fillRule","d"],"mappings":"udAEMA,EAAU,CACZC,QACI,4LACJC,UACI,kJACJC,MACI,iHACJC,OACI,gJA8BR,SAA2EC,GAAA,IAArDJ,QAAEA,EAAFK,cAAWA,EAAXC,SAA0BA,GAA2BF,EAAdG,EAAcC,EAAAC,wBAAAL,EAAAM,GACvE,MAAMC,EAtBV,UAAoBX,QAAEA,EAAFK,cAAWA,EAAXC,SAA0BA,IAC1C,OAAID,EACO,QAGPL,EACO,UAQPM,EACO,SAGJ,YAISM,CAAW,CAAEZ,QAAAA,EAASK,cAAAA,EAAeC,SAAAA,IACrD,OACIO,EACIC,cAAA,MADJC,gBAAA,CACIC,MAAM,6BACNC,MAAM,KACNC,OAAO,KACPC,QAAQ,aACJZ,GAEJM,EAAAC,cAAA,OAAA,CAAMM,KAAK,eAAeC,SAAS,UAAUC,EAAGvB,EAAQY"}

package/lib/checkbox-field/use-fork-ref.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-fork-ref.js","sources":["../../src/checkbox-field/use-fork-ref.ts"],"sourcesContent":["import { useMemo } from 'react'\n\n/**\n * Sets both a function and object React ref.\n */\nfunction setRef<T>(\n    ref: React.RefCallback<T> | React.MutableRefObject<T> | null | undefined,\n    value: T,\n) {\n    if (typeof ref === 'function') {\n        ref(value)\n    } else if (ref) {\n        ref.current = value\n    }\n}\n\n/**\n * Merges React Refs into a single memoized function ref so you can pass it to an element.\n * @example\n * const Component = React.forwardRef((props, ref) => {\n *   const internalRef = React.useRef();\n *   return <div {...props} ref={useForkRef(internalRef, ref)} />;\n * });\n */\nfunction useForkRef(...refs: Array<React.Ref<unknown> | undefined>) {\n    return useMemo(\n        () => {\n            if (!refs.some(Boolean)) return\n            return (value: unknown) => {\n                refs.forEach((ref) => setRef(ref, value))\n            }\n        },\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        refs,\n    )\n}\n\nexport { useForkRef }\n"],"names":["refs","useMemo","some","Boolean","value","forEach","ref","current","setRef"],"mappings":"8GAwBA,YAAuBA,GACnB,OAAOC,UACH,KACI,GAAKD,EAAKE,KAAKC,SACf,OAAQC,IACJJ,EAAKK,QAASC,GAxB9B,SACIA,EACAF,GAEmB,mBAARE,EACPA,EAAIF,GACGE,IACPA,EAAIC,QAAUH,GAiBgBI,CAAOF,EAAKF,MAI1CJ"}
+{"version":3,"file":"use-fork-ref.js","sources":["../../src/checkbox-field/use-fork-ref.ts"],"sourcesContent":["import { useMemo } from 'react'\n\n/**\n * Sets both a function and object React ref.\n */\nfunction setRef<T>(\n    ref: React.RefCallback<T> | React.MutableRefObject<T> | null | undefined,\n    value: T,\n) {\n    if (typeof ref === 'function') {\n        ref(value)\n    } else if (ref) {\n        ref.current = value\n    }\n}\n\n/**\n * Merges React Refs into a single memoized function ref so you can pass it to an element.\n * @example\n * const Component = React.forwardRef((props, ref) => {\n *   const internalRef = React.useRef();\n *   return <div {...props} ref={useForkRef(internalRef, ref)} />;\n * });\n */\nfunction useForkRef(...refs: Array<React.Ref<unknown> | undefined>) {\n    return useMemo(\n        () => {\n            if (!refs.some(Boolean)) return\n            return (value: unknown) => {\n                refs.forEach((ref) => setRef(ref, value))\n            }\n        },\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        refs,\n    )\n}\n\nexport { useForkRef }\n"],"names":["refs","useMemo","some","Boolean","value","forEach","ref","current","setRef"],"mappings":"8GAwBA,YAAuBA,GACnB,OAAOC,EAAOA,QACV,KACI,GAAKD,EAAKE,KAAKC,SACf,OAAQC,IACJJ,EAAKK,QAASC,GAxB9B,SACIA,EACAF,GAEmB,mBAARE,EACPA,EAAIF,GACGE,IACPA,EAAIC,QAAUH,GAiBgBI,CAAOF,EAAKF,MAI1CJ"}

package/lib/columns/columns.d.ts

@@ -1,14 +1,14 @@
 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';
+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 type ColumnsHorizontalAlignment = 'left' | 'center' | 'right';
-declare type ColumnsVerticalAlignment = 'top' | 'center' | 'bottom' | 'baseline';
-declare type ColumnsCollapseBelow = Exclude<ResponsiveBreakpoints, 'mobile'>;
+type ColumnsHorizontalAlignment = 'left' | 'center' | 'right';
+type ColumnsVerticalAlignment = 'top' | 'center' | 'bottom' | 'baseline';
+type ColumnsCollapseBelow = Exclude<ResponsiveBreakpoints, 'mobile'>;
 interface ColumnsProps extends ReusableBoxProps {
     space?: ResponsiveProp<Space>;
     align?: ResponsiveProp<ColumnsHorizontalAlignment>;

package/lib/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("../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;
+"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");function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(l){if("default"!==l){var o=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(t,l,o.get?o:{enumerable:!0,get:function(){return e[l]}})}})),t.default=e,t}var i=n(t);const s=["width","children","exceptionallySetClassName"],c=["space","align","alignY","collapseBelow","children","exceptionallySetClassName"],p=l.polymorphicComponent((function(t,l){let{width:n="auto",children:c,exceptionallySetClassName:p}=t,u=e.objectWithoutProperties(t,s);return i.createElement(r.Box,e.objectSpread2(e.objectSpread2({},u),{},{className:[p,o.getClassNames(a.default,"columnWidth",n.replace("/","-"))],minWidth:0,height:"full",flexShrink:"content"===n?0:void 0,flexGrow:"auto"===n?1:0,ref:l}),c)})),u=l.polymorphicComponent((function(t,l){let{space:n,align:s="left",alignY:p="top",collapseBelow:u,children:m,exceptionallySetClassName:f}=t,d=e.objectWithoutProperties(t,c);return i.createElement(r.Box,e.objectSpread2(e.objectSpread2({},d),{},{className:[f,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(p,e=>"top"===e?"flexStart":"bottom"===e?"flexEnd":e),justifyContent:o.mapResponsiveProp(s,e=>"left"===e?"flexStart":"right"===e?"flexEnd":e),ref:l}),m)}));exports.Column=p,exports.Columns=u;
 //# sourceMappingURL=columns.js.map

package/lib/columns/columns.js.map

@@ -1 +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"}
+{"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","ref","width","children","exceptionallySetClassName","props","_objectWithoutProperties","objectWithoutProperties","_excluded","React","createElement","Box","className","getClassNames","styles","replace","minWidth","height","flexShrink","undefined","flexGrow","Columns","_ref2","space","align","alignY","collapseBelow","_excluded2","container","display","gap","flexDirection","mobile","tablet","desktop","alignItems","mapResponsiveProp","justifyContent"],"mappings":"ysBA4BMA,EAASC,EAAAA,sBAAyC,SAAAC,EAEpDC,GAAG,IADHC,MAAEA,EAAQ,OAAVC,SAAkBA,EAAlBC,0BAA4BA,GACzBJ,EADuDK,EACvDC,EAAAC,wBAAAP,EAAAQ,GAEH,OACIC,EAACC,cAAAC,yCACON,GADR,GAAA,CAEIO,UAAW,CACPR,EACAS,EAAaA,cAACC,UAAQ,cAAeZ,EAAMa,QAAQ,IAAK,OAE5DC,SAAU,EACVC,OAAO,OACPC,WAAsB,YAAVhB,EAAsB,OAAIiB,EACtCC,SAAoB,SAAVlB,EAAmB,EAAI,EACjCD,IAAKA,IAEJE,MAgBPkB,EAAUtB,EAAAA,sBAA0C,SAAAuB,EAUtDrB,GAAG,IATHsB,MACIA,EADJC,MAEIA,EAAQ,OAFZC,OAGIA,EAAS,MAHbC,cAIIA,EAJJvB,SAKIA,EALJC,0BAMIA,GAGDkB,EAFIjB,EAEJC,EAAAC,wBAAAe,EAAAK,GAEH,OACIlB,EAACC,cAAAC,yCACON,GADR,GAAA,CAEIO,UAAW,CACPR,EACAU,UAAOc,UACPf,EAAAA,cAAcC,EAAD,QAAS,YAAaS,IAEvCM,QAAQ,OACRC,IAAKP,EACLQ,cACsB,YAAlBL,EACM,CAAEM,OAAQ,SAAUC,OAAQ,SAAUC,QAAS,OAC7B,WAAlBR,EACA,CAAEM,OAAQ,SAAUC,OAAQ,OAC5B,MAEVE,WAAYC,EAAiBA,kBAACX,EAASA,GACxB,QAAXA,EAAmB,YAAyB,WAAXA,EAAsB,UAAYA,GAEvEY,eAAgBD,EAAiBA,kBAACZ,EAAQA,GAC5B,SAAVA,EAAmB,YAAwB,UAAVA,EAAoB,UAAYA,GAErEvB,IAAKA,IAEJE"}

package/lib/components/color-picker/color-picker.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import './color-picker.less';
-declare type NamedColor = {
+type NamedColor = {
     name: string;
     color: string;
 };
 declare const COLORS: string[];
-declare type Props = {
+type Props = {
     small?: boolean;
     color?: number;
     onChange?: (color: number) => void;
@@ -15,7 +15,7 @@ declare function ColorPicker({ color, small, onChange, colorList }: Props): Reac
 declare namespace ColorPicker {
     var displayName: string;
 }
-declare type ColorItemProps = {
+type ColorItemProps = {
     color: string;
     colorIndex: number;
     isActive?: boolean;

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("../../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;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("classnames"),r=require("../deprecated-dropdown/dropdown.js"),o=require("../../tooltip/tooltip.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,t}var c=n(e),a=l(t);const i=["#606060","#4A90E2","#03B3B2","#008299","#82BA00","#D24726","#AC193D","#DC4FAD","#3BD5FB","#74E8D3","#FFCC00","#FB886E","#CCCCCC"],s=e=>"string"!=typeof e;function u({color:e=0,small:t,onChange:o,colorList:l=i}){return c.createElement(r.Dropdown.Box,{right:!0,className:"reactist_color_picker"},c.createElement(r.Dropdown.Trigger,null,(()=>{const r=((e,t)=>e[t>=e.length?0:t])(l,e);return c.createElement("span",{className:a.default("color_trigger",{small:t}),style:{backgroundColor:s(r)?r.color:r}},c.createElement("span",{className:"color_trigger--inner_ring"}))})()),c.createElement(r.Dropdown.Body,null,c.createElement("div",{className:"color_options"},l.reduce((t,r,n)=>(t.push(c.createElement(d,{isActive:e>=l.length?0===n:n===e,key:n,color:s(r)?r.color:r,colorIndex:n,onClick:o,tooltip:s(r)?r.name:null})),t),[]))))}function d({color:e,colorIndex:t,isActive:r,onClick:l,tooltip:n}){const a=c.createElement("span",{"data-testid":"reactist-color-item",className:"reactist color_item"+(r?" active":""),style:{backgroundColor:e},onClick:()=>null==l?void 0:l(t)},c.createElement("span",{className:"color_item--inner_ring"}));return n?c.createElement(o.Tooltip,{content:n},a):a}u.displayName="ColorPicker",d.displayName="ColorItem",exports.COLORS=i,exports.ColorItem=d,exports.ColorPicker=u;
 //# 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 '../../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"}
+{"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","createElement","DeprecatedDropdown","Dropdown","Box","right","className","Trigger","backgroundColor","colorIndex","length","_getColor","classnames","style","Body","reduce","items","currentColor","currentIndex","push","ColorItem","isActive","key","onClick","tooltip","name","item","data-testid","Tooltip","content","displayName"],"mappings":"mjBAUA,MAAMA,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,EAACC,cAAAC,EAAkBC,SAACC,KAAIC,OAAK,EAACC,UAAU,yBACpCN,EAAAC,cAACC,EAAAA,SAAmBK,QACf,KAAA,MACG,MAAMC,EAjBR,EAACT,EAAoCU,IAE5CV,EADOU,GAAcV,EAAUW,OAAS,EAAID,GAgBXE,CAAUZ,EAAWJ,GAE7C,OACIK,EAAAC,cAAA,OAAA,CACIK,UAAWM,EAAU,QAAC,gBAAiB,CAAEf,MAAAA,IACzCgB,MAAO,CACHL,gBAAiBd,EAAcc,GACzBA,EAAgBb,MAChBa,IAGVR,EAAAC,cAAA,OAAA,CAAMK,UAAU,gCAZ3B,IAiBLN,EAACC,cAAAC,EAAkBC,SAACW,KAAI,KACpBd,EAAAC,cAAA,MAAA,CAAKK,UAAU,iBACVP,EAAUgB,OAA0B,CAACC,EAAOC,EAAcC,KACvDF,EAAMG,KACFnB,EAAAC,cAACmB,EAAS,CACNC,SACI1B,GAASI,EAAUW,OACI,IAAjBQ,EACAA,IAAiBvB,EAE3B2B,IAAKJ,EACLvB,MACID,EAAcuB,GAAgBA,EAAatB,MAAQsB,EAEvDR,WAAYS,EACZK,QAASzB,EACT0B,QAAS9B,EAAcuB,GAAgBA,EAAaQ,KAAO,QAG5DT,GACR,OAgBvB,SAASI,GAAUzB,MAAEA,EAAFc,WAASA,EAATY,SAAqBA,EAArBE,QAA+BA,EAASC,QAAAA,IACvD,MAAME,EACF1B,EACgBC,cAAA,OAAA,CAAA0B,cAAA,sBACZrB,UAAW,uBAAyBe,EAAW,UAAY,IAC3DR,MAAO,CAAEL,gBAAiBb,GAC1B4B,QAAS,IAAMA,MAAAA,OAAAA,EAAAA,EAAUd,IAEzBT,EAAAC,cAAA,OAAA,CAAMK,UAAU,4BAIxB,OAAOkB,EAAUxB,EAAAC,cAAC2B,UAAQ,CAAAC,QAASL,GAAUE,GAAkBA,EAtBnE9B,EAAYkC,YAAc,cAwB1BV,EAAUU,YAAc"}

package/lib/components/deprecated-button/deprecated-button.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import './deprecated-button.less';
-declare type NativeButtonProps = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+type NativeButtonProps = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
 /** @deprecated */
-export declare type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'link';
+export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'link';
 /** @deprecated */
-export declare type ButtonSize = 'default' | 'small' | 'large';
+export type ButtonSize = 'default' | 'small' | 'large';
 /** @deprecated */
-export declare type ButtonProps = Omit<NativeButtonProps, 'title' | 'ref'> & {
+export type ButtonProps = Omit<NativeButtonProps, 'title' | 'ref'> & {
     /**
      * Loading style. When true it disables the button, but it also adds a visual indication of
      * some in-progress operation going on.

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("../../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;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),r=require("classnames"),o=require("../../tooltip/tooltip.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,t}var l=i(t),n=a(r);const u=["type","variant","size","loading","disabled","tooltip","onClick","children"],c=l.forwardRef((function(t,r){let{type:a="button",variant:i,size:c="default",loading:s=!1,disabled:d=!1,tooltip:f,onClick:p,children:b}=t,j=e.objectWithoutProperties(t,u);const _=n.default("reactist_button",i?"reactist_button--"+i:null,"default"!==c?"reactist_button--"+c:null,{"reactist_button--loading":s},j.className),v=l.createElement("button",e.objectSpread2(e.objectSpread2({},j),{},{ref:r,type:a,className:_,"aria-disabled":d||s,onClick:d||s?void 0:p}),b);return f?l.createElement(o.Tooltip,{content:f},v):v}));c.displayName="Button",c.defaultProps={size:"default",loading:!1,disabled:!1},exports.Button=c;
 //# 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 '../../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"}
+{"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","forwardRef","ref","type","variant","size","loading","disabled","tooltip","onClick","children","_ref","props","_objectWithoutProperties","objectWithoutProperties","_excluded","className","classNames","reactist_button--loading","button","createElement","aria-disabled","undefined","Tooltip","content","displayName","defaultProps"],"mappings":"kpBA4CMA,EAASC,EAAMC,YAA2C,SAY5DC,EAAAA,GAAG,IAXHC,KACIA,EAAO,SADXC,QAEIA,EAFJC,KAGIA,EAAO,UAHXC,QAIIA,GAAU,EAJdC,SAKIA,GAAW,UACXC,EANJC,QAOIA,EAPJC,SAQIA,GAGDC,EAFIC,EAEJC,EAAAC,wBAAAH,EAAAI,GAEH,MAAMC,EAAYC,EAAU,QACxB,kBACAb,EAA8BA,oBAAAA,EAAY,KACjC,YAATC,sBAAyCA,EAAS,KAClD,CAAEa,2BAA4BZ,GAC9BM,EAAMI,WAGJG,EACFnB,EACQoB,cAAA,4CAAAR,GADR,GAAA,CAEIV,IAAKA,EACLC,KAAMA,EACNa,UAAWA,EACIK,gBAAAd,GAAYD,EAC3BG,QAASF,GAAYD,OAAUgB,EAAYb,IAE1CC,GAIT,OAAOF,EAAUR,EAAAoB,cAACG,UAAQ,CAAAC,QAAShB,GAAUW,GAAoBA,KAGrEpB,EAAO0B,YAAc,SAErB1B,EAAO2B,aAAe,CAClBrB,KAAM,UACNC,SAAS,EACTC,UAAU"}

package/lib/components/deprecated-dropdown/dropdown.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import './dropdown.less';
-declare type BoxProps = {
+type BoxProps = {
     onShowBody?: () => void;
     onHideBody?: () => void;
     allowBodyInteractions?: boolean;
@@ -13,7 +13,7 @@ declare type BoxProps = {
     ];
     className?: string;
 };
-declare type BoxState = {
+type BoxState = {
     top: boolean;
     showBody: boolean;
 };
@@ -29,15 +29,15 @@ declare class Box extends React.Component<BoxProps, BoxState> {
     _getBodyComponent(): React.JSX.Element | null;
     render(): React.JSX.Element;
 }
-declare type NativeButtonProps = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
-declare type TriggerProps = Omit<NativeButtonProps, 'title' | 'onClick'> & {
+type NativeButtonProps = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+type TriggerProps = Omit<NativeButtonProps, 'title' | 'onClick'> & {
     tooltip?: React.ReactNode;
     /**
      * @private the onClick prop is not to be used externally
      */
     onClick?: NativeButtonProps['onClick'];
 };
-declare type BodyProps = {
+type BodyProps = {
     setPosition?: React.Ref<HTMLDivElement>;
     children?: React.ReactNode;
     top?: boolean;

package/lib/components/deprecated-dropdown/dropdown.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"))),s=t(require("react-dom")),n=require("../deprecated-button/index.js");const r=["children","onClick","tooltip","className"];class d extends o.Component{constructor(t,e){super(t,e),this._timeout=void 0,this._handleClickOutside=t=>{const e=s.findDOMNode(this);e&&!e.contains(t.target)?this._toggleShowBody():this.props.allowBodyInteractions||(this._timeout=setTimeout(()=>{this.state.showBody&&this._toggleShowBody()},100))},this._toggleShowBody=()=>{this.state.showBody?(this.props.onHideBody&&this.props.onHideBody(),document.removeEventListener("click",this._handleClickOutside,!0)):(this.props.onShowBody&&this.props.onShowBody(),document.addEventListener("click",this._handleClickOutside,!0)),this.setState({showBody:!this.state.showBody})},this._setPosition=t=>{if(t){const e=document.getElementById(this.props.scrolling_parent?this.props.scrolling_parent:"");if(e){const o=s.findDOMNode(this);if(!o)return;const i=s.findDOMNode(this).offsetTop,n=o.querySelector(".trigger");if(!n)return;const r=e.clientHeight+e.scrollTop-i-n.clientHeight<t.clientHeight;r!==this.state.top&&this.setState({top:r})}}},this.state={showBody:!1,top:t.top||!1},this._timeout=void 0}componentWillUnmount(){document.removeEventListener("click",this._handleClickOutside,!0),this._timeout&&clearTimeout(this._timeout)}_getTriggerComponent(){var t;const e=null==(t=this.props.children)?void 0:t[0];return e?o.cloneElement(e,{onClick:this._toggleShowBody}):void 0}_getBodyComponent(){if(!this.state.showBody)return null;const{top:t}=this.state,{right:e=!1,children:s}=this.props,n={top:t,right:e,setPosition:this._setPosition},r=i({body_wrapper:!0,with_arrow:!0,top:t,bottom:!t}),d=null==s?void 0:s[1],l="function"==typeof d?d(n):d?o.cloneElement(d,n):void 0;return o.createElement("div",{className:r,style:{position:"relative"}},l)}render(){const t=i("reactist_dropdown",this.props.className),{top:e}=this.state;return o.createElement("div",{style:{display:"inline-block"},className:t,"data-testid":"reactist-dropdown-box"},e&&this._getBodyComponent(),this._getTriggerComponent(),!e&&this._getBodyComponent())}}d.displayName=void 0,d.displayName="Dropdown.Box";const l=o.forwardRef((function(t,s){let{children:d,onClick:l,tooltip:a,className:c}=t,p=e.objectWithoutProperties(t,r);return o.createElement(n.default,e.objectSpread2(e.objectSpread2({},p),{},{className:i("trigger",c),onClick:function(t){t.preventDefault(),t.stopPropagation(),l&&l(t)},tooltip:a,ref:s}),d)}));function a({top:t,right:e,children:i,setPosition:s}){const n={position:"absolute",right:0,top:0};return t&&(n.top="auto",n.bottom=0),e&&(n.right="auto",n.left=0),o.createElement("div",{ref:s,style:n,className:"body",id:"reactist-dropdown-body","data-testid":"reactist-dropdown-body"},i)}l.displayName="Dropdown.Trigger",a.displayName="Dropdown.Body",exports.Dropdown={Box:d,Trigger:l,Body:a};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../_virtual/_rollupPluginBabelHelpers.js"),e=require("react"),o=require("react-dom"),i=require("classnames"),s=require("../deprecated-button/deprecated-button.js");function r(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}function n(t){if(t&&t.__esModule)return t;var e=Object.create(null);return t&&Object.keys(t).forEach((function(o){if("default"!==o){var i=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(e,o,i.get?i:{enumerable:!0,get:function(){return t[o]}})}})),e.default=t,e}var d=n(e),l=r(o),a=r(i);const c=["children","onClick","tooltip","className"];class p extends d.Component{constructor(t,e){super(t,e),this._timeout=void 0,this._handleClickOutside=t=>{const e=l.default.findDOMNode(this);e&&!e.contains(t.target)?this._toggleShowBody():this.props.allowBodyInteractions||(this._timeout=setTimeout(()=>{this.state.showBody&&this._toggleShowBody()},100))},this._toggleShowBody=()=>{this.state.showBody?(this.props.onHideBody&&this.props.onHideBody(),document.removeEventListener("click",this._handleClickOutside,!0)):(this.props.onShowBody&&this.props.onShowBody(),document.addEventListener("click",this._handleClickOutside,!0)),this.setState({showBody:!this.state.showBody})},this._setPosition=t=>{if(t){const e=document.getElementById(this.props.scrolling_parent?this.props.scrolling_parent:"");if(e){const o=l.default.findDOMNode(this);if(!o)return;const i=l.default.findDOMNode(this).offsetTop,s=o.querySelector(".trigger");if(!s)return;const r=e.clientHeight+e.scrollTop-i-s.clientHeight<t.clientHeight;r!==this.state.top&&this.setState({top:r})}}},this.state={showBody:!1,top:t.top||!1},this._timeout=void 0}componentWillUnmount(){document.removeEventListener("click",this._handleClickOutside,!0),this._timeout&&clearTimeout(this._timeout)}_getTriggerComponent(){var t;const e=null==(t=this.props.children)?void 0:t[0];return e?d.cloneElement(e,{onClick:this._toggleShowBody}):void 0}_getBodyComponent(){if(!this.state.showBody)return null;const{top:t}=this.state,{right:e=!1,children:o}=this.props,i={top:t,right:e,setPosition:this._setPosition},s=a.default({body_wrapper:!0,with_arrow:!0,top:t,bottom:!t}),r=null==o?void 0:o[1],n="function"==typeof r?r(i):r?d.cloneElement(r,i):void 0;return d.createElement("div",{className:s,style:{position:"relative"}},n)}render(){const t=a.default("reactist_dropdown",this.props.className),{top:e}=this.state;return d.createElement("div",{style:{display:"inline-block"},className:t,"data-testid":"reactist-dropdown-box"},e&&this._getBodyComponent(),this._getTriggerComponent(),!e&&this._getBodyComponent())}}p.displayName=void 0,p.displayName="Dropdown.Box";const u=d.forwardRef((function(e,o){let{children:i,onClick:r,tooltip:n,className:l}=e,p=t.objectWithoutProperties(e,c);return d.createElement(s.Button,t.objectSpread2(t.objectSpread2({},p),{},{className:a.default("trigger",l),onClick:function(t){t.preventDefault(),t.stopPropagation(),r&&r(t)},tooltip:n,ref:o}),i)}));function h({top:t,right:e,children:o,setPosition:i}){const s={position:"absolute",right:0,top:0};return t&&(s.top="auto",s.bottom=0),e&&(s.right="auto",s.left=0),d.createElement("div",{ref:i,style:s,className:"body",id:"reactist-dropdown-body","data-testid":"reactist-dropdown-body"},o)}u.displayName="Dropdown.Trigger",h.displayName="Dropdown.Body",exports.Dropdown={Box:p,Trigger:u,Body:h};
 //# sourceMappingURL=dropdown.js.map