@doist/reactist 24.2.0-beta → 25.0.0-beta.1

package/lib/banner/banner.d.ts

@@ -9,7 +9,7 @@ declare type BannerProps = {
     /**
      * The icon that should be added inside the Banner.
      */
-    icon: React.ReactChild;
+    icon: React.ReactElement | string | number;
     /**
      * The title to be displayed at the top of the Banner.
      */
@@ -21,7 +21,7 @@ declare type BannerProps = {
     /**
      * An optional action to displayed inside the Banner.
      */
-    action?: React.ReactChild;
+    action?: React.ReactElement | string | number;
 };
 declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<HTMLDivElement>>;
 export { Banner };

package/lib/banner/banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.js","sources":["../../src/banner/banner.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Columns, Column } from '../columns'\nimport { useId } from '../utils/common-helpers'\n\nimport styles from './banner.module.css'\n\nexport type BannerTone = 'info' | 'promotion'\n\ntype BannerProps = {\n    id?: string\n    /**\n     * The tone of the Banner. Affects the background color and the outline.\n     */\n    tone: BannerTone\n    /**\n     * The icon that should be added inside the Banner.\n     */\n    icon: React.ReactChild\n    /**\n     * The title to be displayed at the top of the Banner.\n     */\n    title: React.ReactNode\n    /**\n     * An optional description to be displayed inside the Banner.\n     */\n    description?: React.ReactNode\n    /**\n     * An optional action to displayed inside the Banner.\n     */\n    action?: React.ReactChild\n}\n\nconst Banner = React.forwardRef<HTMLDivElement, BannerProps>(function Banner(\n    { id, tone, icon, title, description, action, ...props }: BannerProps,\n    ref,\n) {\n    const titleId = useId()\n    const descriptionId = useId()\n    return (\n        <Box\n            {...props}\n            ref={ref}\n            id={id}\n            role=\"status\"\n            aria-labelledby={titleId}\n            aria-describedby={descriptionId}\n            aria-live=\"polite\"\n            tabIndex={0}\n            borderRadius=\"standard\"\n            className={[styles.banner, styles[`banner-${tone}`]]}\n        >\n            <Columns space=\"medium\" alignY=\"center\">\n                <Column\n                    width=\"content\"\n                    aria-hidden\n                    style={{\n                        /* Make sure the icon is centered vertically */\n                        lineHeight: 0,\n                    }}\n                >\n                    {icon}\n                </Column>\n                <Column>\n                    <Box paddingY=\"xsmall\">\n                        {description ? (\n                            <Box id={titleId} className={[styles.title, styles[`title-${tone}`]]}>\n                                {title}\n                            </Box>\n                        ) : (\n                            <Box\n                                id={titleId}\n                                className={[\n                                    styles.title,\n                                    // If the banner does not have a description, we need to slightly tweak\n                                    // the styling of the title applying an extra css class\n                                    styles[`title-without-description`],\n                                    styles[`title-${tone}`],\n                                ]}\n                            >\n                                {title}\n                            </Box>\n                        )}\n                        {description ? (\n                            <Box\n                                id={descriptionId}\n                                className={[styles.description, styles[`description-${tone}`]]}\n                            >\n                                {description}\n                            </Box>\n                        ) : null}\n                    </Box>\n                </Column>\n                {action ? <Column width=\"content\">{action}</Column> : null}\n            </Columns>\n        </Box>\n    )\n})\n\nexport { Banner }\nexport type { BannerProps }\n"],"names":["React","ref","id","tone","icon","title","description","action","props","titleId","useId","descriptionId","Box","role","tabIndex","borderRadius","className","styles","banner","Columns","space","alignY","Column","width","style","lineHeight","paddingY"],"mappings":"sWAiCeA,cAA8C,WAEzDC,OADAC,GAAEA,EAAFC,KAAMA,EAANC,KAAYA,EAAZC,MAAkBA,EAAlBC,YAAyBA,EAAzBC,OAAsCA,KAAWC,iCAGjD,MAAMC,EAAUC,UACVC,EAAgBD,UACtB,OACIV,gBAACY,yCACOJ,OACJP,IAAKA,EACLC,GAAIA,EACJW,KAAK,2BACYJ,qBACCE,cACR,SACVG,SAAU,EACVC,aAAa,WACbC,UAAW,CAACC,UAAOC,OAAQD,oBAAiBd,MAE5CH,gBAACmB,WAAQC,MAAM,SAASC,OAAO,UAC3BrB,gBAACsB,UACGC,MAAM,2BAENC,MAAO,CAEHC,WAAY,IAGfrB,GAELJ,gBAACsB,cACGtB,gBAACY,OAAIc,SAAS,UAEN1B,gBAACY,MADJN,GACQJ,GAAIO,EAASO,UAAW,CAACC,UAAOZ,MAAOY,mBAAgBd,MAKxDD,GAAIO,EACJO,UAAW,CACPC,UAAOZ,MAGPY,uCACAA,mBAAgBd,KAVnBE,GAgBRC,EACGN,gBAACY,OACGV,GAAIS,EACJK,UAAW,CAACC,UAAOX,YAAaW,yBAAsBd,KAErDG,GAEL,OAGXC,EAASP,gBAACsB,UAAOC,MAAM,WAAWhB,GAAmB"}
+{"version":3,"file":"banner.js","sources":["../../src/banner/banner.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Columns, Column } from '../columns'\nimport { useId } from '../utils/common-helpers'\n\nimport styles from './banner.module.css'\n\nexport type BannerTone = 'info' | 'promotion'\n\ntype BannerProps = {\n    id?: string\n\n    /**\n     * The tone of the Banner. Affects the background color and the outline.\n     */\n    tone: BannerTone\n\n    /**\n     * The icon that should be added inside the Banner.\n     */\n    icon: React.ReactElement | string | number\n\n    /**\n     * The title to be displayed at the top of the Banner.\n     */\n    title: React.ReactNode\n\n    /**\n     * An optional description to be displayed inside the Banner.\n     */\n    description?: React.ReactNode\n\n    /**\n     * An optional action to displayed inside the Banner.\n     */\n    action?: React.ReactElement | string | number\n}\n\nconst Banner = React.forwardRef<HTMLDivElement, BannerProps>(function Banner(\n    { id, tone, icon, title, description, action, ...props }: BannerProps,\n    ref,\n) {\n    const titleId = useId()\n    const descriptionId = useId()\n    return (\n        <Box\n            {...props}\n            ref={ref}\n            id={id}\n            role=\"status\"\n            aria-labelledby={titleId}\n            aria-describedby={descriptionId}\n            aria-live=\"polite\"\n            tabIndex={0}\n            borderRadius=\"standard\"\n            className={[styles.banner, styles[`banner-${tone}`]]}\n        >\n            <Columns space=\"medium\" alignY=\"center\">\n                <Column\n                    width=\"content\"\n                    aria-hidden\n                    style={{\n                        /* Make sure the icon is centered vertically */\n                        lineHeight: 0,\n                    }}\n                >\n                    {icon}\n                </Column>\n                <Column>\n                    <Box paddingY=\"xsmall\">\n                        {description ? (\n                            <Box id={titleId} className={[styles.title, styles[`title-${tone}`]]}>\n                                {title}\n                            </Box>\n                        ) : (\n                            <Box\n                                id={titleId}\n                                className={[\n                                    styles.title,\n                                    // If the banner does not have a description, we need to slightly tweak\n                                    // the styling of the title applying an extra css class\n                                    styles[`title-without-description`],\n                                    styles[`title-${tone}`],\n                                ]}\n                            >\n                                {title}\n                            </Box>\n                        )}\n                        {description ? (\n                            <Box\n                                id={descriptionId}\n                                className={[styles.description, styles[`description-${tone}`]]}\n                            >\n                                {description}\n                            </Box>\n                        ) : null}\n                    </Box>\n                </Column>\n                {action ? <Column width=\"content\">{action}</Column> : null}\n            </Columns>\n        </Box>\n    )\n})\n\nexport { Banner }\nexport type { BannerProps }\n"],"names":["React","ref","id","tone","icon","title","description","action","props","titleId","useId","descriptionId","Box","role","tabIndex","borderRadius","className","styles","banner","Columns","space","alignY","Column","width","style","lineHeight","paddingY"],"mappings":"sWAsCeA,cAA8C,WAEzDC,OADAC,GAAEA,EAAFC,KAAMA,EAANC,KAAYA,EAAZC,MAAkBA,EAAlBC,YAAyBA,EAAzBC,OAAsCA,KAAWC,iCAGjD,MAAMC,EAAUC,UACVC,EAAgBD,UACtB,OACIV,gBAACY,yCACOJ,OACJP,IAAKA,EACLC,GAAIA,EACJW,KAAK,2BACYJ,qBACCE,cACR,SACVG,SAAU,EACVC,aAAa,WACbC,UAAW,CAACC,UAAOC,OAAQD,oBAAiBd,MAE5CH,gBAACmB,WAAQC,MAAM,SAASC,OAAO,UAC3BrB,gBAACsB,UACGC,MAAM,2BAENC,MAAO,CAEHC,WAAY,IAGfrB,GAELJ,gBAACsB,cACGtB,gBAACY,OAAIc,SAAS,UAEN1B,gBAACY,MADJN,GACQJ,GAAIO,EAASO,UAAW,CAACC,UAAOZ,MAAOY,mBAAgBd,MAKxDD,GAAIO,EACJO,UAAW,CACPC,UAAOZ,MAGPY,uCACAA,mBAAgBd,KAVnBE,GAgBRC,EACGN,gBAACY,OACGV,GAAIS,EACJK,UAAW,CAACC,UAAOX,YAAaW,yBAAsBd,KAErDG,GAEL,OAGXC,EAASP,gBAACsB,UAAOC,MAAM,WAAWhB,GAAmB"}

package/lib/base-field/base-field.d.ts

@@ -5,12 +5,12 @@ declare type FieldHintProps = {
     id: string;
     children: React.ReactNode;
 };
-declare function FieldHint(props: FieldHintProps): JSX.Element;
+declare function FieldHint(props: FieldHintProps): React.JSX.Element;
 declare type FieldTone = 'neutral' | 'success' | 'error' | 'loading';
 declare type FieldMessageProps = FieldHintProps & {
     tone: FieldTone;
 };
-declare function FieldMessage({ id, children, tone }: FieldMessageProps): JSX.Element;
+declare function FieldMessage({ id, children, tone }: FieldMessageProps): React.JSX.Element;
 declare type ChildrenRenderProps = {
     id: string;
     'aria-describedby'?: string;
@@ -121,6 +121,6 @@ declare type BaseFieldProps = WithEnhancedClassName & Pick<HtmlInputProps<HTMLIn
     children: (props: ChildrenRenderProps) => React.ReactNode;
 };
 declare type FieldComponentProps<T extends HTMLElement> = Omit<BaseFieldProps, 'children' | 'className' | 'variant'> & Omit<HtmlInputProps<T>, 'className' | 'style'>;
-declare function BaseField({ variant, label, secondaryLabel, auxiliaryLabel, hint, message, tone, className, children, maxWidth, hidden, 'aria-describedby': originalAriaDescribedBy, id: originalId, }: BaseFieldProps & BaseFieldVariantProps & WithEnhancedClassName): JSX.Element;
+declare function BaseField({ variant, label, secondaryLabel, auxiliaryLabel, hint, message, tone, className, children, maxWidth, hidden, 'aria-describedby': originalAriaDescribedBy, id: originalId, }: BaseFieldProps & BaseFieldVariantProps & WithEnhancedClassName): React.JSX.Element;
 export { BaseField, FieldHint, FieldMessage };
 export type { BaseFieldVariant, BaseFieldVariantProps, FieldComponentProps };

package/lib/box/box.d.ts

@@ -58,6 +58,7 @@ interface BoxProps extends WithEnhancedClassName, ReusableBoxProps, BoxMarginPro
     height?: 'full';
     textAlign?: ResponsiveProp<BoxTextAlign>;
 }
+declare function 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, }: BoxProps): string;
 declare const Box: import("../utils/polymorphism").PolymorphicComponent<"div", BoxProps, "keepClassName">;
 export type { BoxProps, BoxPaddingProps, BoxMarginProps, ReusableBoxProps, BoxMinWidth, BoxMaxWidth, BoxDisplay, BoxPosition, BoxFlexDirection, BoxFlexWrap, BoxAlignItems, BoxJustifyContent, BoxOverflow, BoxTextAlign, BoxBackground, BoxBorderRadius, };
-export { Box };
+export { Box, getBoxClassNames };

package/lib/box/box.js

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

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\nconst Box = polymorphicComponent<'div', BoxProps, 'keepClassName'>(function Box(\n    {\n        as: component = 'div',\n        position = 'static',\n        display,\n        flexDirection = 'row',\n        flexWrap,\n        flexGrow,\n        flexShrink,\n        gap,\n        alignItems,\n        justifyContent,\n        alignSelf,\n        overflow,\n        width,\n        height,\n        background,\n        border,\n        borderRadius,\n        minWidth,\n        maxWidth,\n        textAlign,\n        padding,\n        paddingY,\n        paddingX,\n        paddingTop,\n        paddingRight,\n        paddingBottom,\n        paddingLeft,\n        margin,\n        marginY,\n        marginX,\n        marginTop,\n        marginRight,\n        marginBottom,\n        marginLeft,\n        className,\n        children,\n        ...props\n    },\n    ref,\n) {\n    const resolvedPaddingTop = paddingTop ?? paddingY ?? padding\n    const resolvedPaddingRight = paddingRight ?? paddingX ?? padding\n    const resolvedPaddingBottom = paddingBottom ?? paddingY ?? padding\n    const resolvedPaddingLeft = paddingLeft ?? paddingX ?? padding\n\n    const resolvedMarginTop = marginTop ?? marginY ?? margin\n    const resolvedMarginRight = marginRight ?? marginX ?? margin\n    const resolvedMarginBottom = marginBottom ?? marginY ?? margin\n    const resolvedMarginLeft = marginLeft ?? marginX ?? margin\n\n    const omitFlex =\n        !display || (typeof display === 'string' && display !== 'flex' && display !== 'inlineFlex')\n\n    return React.createElement(\n        component,\n        {\n            ...props,\n            className:\n                classNames(\n                    className,\n                    styles.box,\n                    display ? getClassNames(styles, 'display', display) : null,\n                    position !== 'static' ? getClassNames(styles, 'position', position) : null,\n                    minWidth != null\n                        ? getClassNames(widthStyles, 'minWidth', String(minWidth))\n                        : null,\n                    getClassNames(widthStyles, 'maxWidth', maxWidth),\n                    getClassNames(styles, 'textAlign', textAlign),\n                    // padding\n                    getClassNames(paddingStyles, 'paddingTop', resolvedPaddingTop),\n                    getClassNames(paddingStyles, 'paddingRight', resolvedPaddingRight),\n                    getClassNames(paddingStyles, 'paddingBottom', resolvedPaddingBottom),\n                    getClassNames(paddingStyles, 'paddingLeft', resolvedPaddingLeft),\n                    // margin\n                    getClassNames(marginStyles, 'marginTop', resolvedMarginTop),\n                    getClassNames(marginStyles, 'marginRight', resolvedMarginRight),\n                    getClassNames(marginStyles, 'marginBottom', resolvedMarginBottom),\n                    getClassNames(marginStyles, 'marginLeft', resolvedMarginLeft),\n                    // flex props\n                    omitFlex ? null : getClassNames(styles, 'flexDirection', flexDirection),\n                    omitFlex ? null : getClassNames(styles, 'flexWrap', flexWrap),\n                    omitFlex ? null : getClassNames(styles, 'alignItems', alignItems),\n                    omitFlex ? null : getClassNames(styles, 'justifyContent', justifyContent),\n                    alignSelf != null ? getClassNames(styles, 'alignSelf', alignSelf) : null,\n                    flexShrink != null\n                        ? getClassNames(styles, 'flexShrink', String(flexShrink))\n                        : null,\n                    flexGrow != null ? getClassNames(styles, 'flexGrow', String(flexGrow)) : null,\n                    gap ? getClassNames(gapStyles, 'gap', gap) : null,\n                    // other props\n                    getClassNames(styles, 'overflow', overflow),\n                    width != null ? getClassNames(widthStyles, 'width', String(width)) : null,\n                    getClassNames(styles, 'height', height),\n                    getClassNames(styles, 'bg', background),\n                    borderRadius !== 'none'\n                        ? getClassNames(styles, 'borderRadius', borderRadius)\n                        : null,\n                    border !== 'none' ? getClassNames(styles, 'border', border) : null,\n                ) || undefined,\n            ref,\n        },\n        children,\n    )\n})\n\nexport type {\n    BoxProps,\n    BoxPaddingProps,\n    BoxMarginProps,\n    ReusableBoxProps,\n    BoxMinWidth,\n    BoxMaxWidth,\n    BoxDisplay,\n    BoxPosition,\n    BoxFlexDirection,\n    BoxFlexWrap,\n    BoxAlignItems,\n    BoxJustifyContent,\n    BoxOverflow,\n    BoxTextAlign,\n    BoxBackground,\n    BoxBorderRadius,\n}\n\nexport { Box }\n"],"names":["polymorphicComponent","ref","as","component","position","display","flexDirection","flexWrap","flexGrow","flexShrink","gap","alignItems","justifyContent","alignSelf","overflow","width","height","background","border","borderRadius","minWidth","maxWidth","textAlign","padding","paddingY","paddingX","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginY","marginX","marginTop","marginRight","marginBottom","marginLeft","className","children","props","resolvedPaddingTop","resolvedPaddingRight","resolvedPaddingBottom","resolvedPaddingLeft","resolvedMarginTop","resolvedMarginRight","resolvedMarginBottom","resolvedMarginLeft","omitFlex","React","classNames","styles","box","getClassNames","widthStyles","String","paddingStyles","marginStyles","gapStyles","undefined"],"mappings":"i7BA2FYA,wBAAuD,WAwC/DC,2BAtCIC,GAAIC,EAAY,MADpBC,SAEIA,EAAW,SAFfC,QAGIA,EAHJC,cAIIA,EAAgB,MAJpBC,SAKIA,EALJC,SAMIA,EANJC,WAOIA,EAPJC,IAQIA,EARJC,WASIA,EATJC,eAUIA,EAVJC,UAWIA,EAXJC,SAYIA,EAZJC,MAaIA,EAbJC,OAcIA,EAdJC,WAeIA,EAfJC,OAgBIA,EAhBJC,aAiBIA,EAjBJC,SAkBIA,EAlBJC,SAmBIA,EAnBJC,UAoBIA,EApBJC,QAqBIA,EArBJC,SAsBIA,EAtBJC,SAuBIA,EAvBJC,WAwBIA,EAxBJC,aAyBIA,EAzBJC,cA0BIA,EA1BJC,YA2BIA,EA3BJC,OA4BIA,EA5BJC,QA6BIA,EA7BJC,QA8BIA,EA9BJC,UA+BIA,EA/BJC,YAgCIA,EAhCJC,aAiCIA,EAjCJC,WAkCIA,EAlCJC,UAmCIA,GAnCJC,SAoCIA,MACGC,kCAIP,MAAMC,kBAAqBd,EAAAA,EAAcF,KAAYD,EAC/CkB,kBAAuBd,EAAAA,EAAgBF,KAAYF,EACnDmB,kBAAwBd,EAAAA,EAAiBJ,KAAYD,EACrDoB,kBAAsBd,EAAAA,EAAeJ,KAAYF,EAEjDqB,kBAAoBX,EAAAA,EAAaF,KAAWD,EAC5Ce,kBAAsBX,EAAAA,EAAeF,KAAWF,EAChDgB,kBAAuBX,EAAAA,EAAgBJ,KAAWD,EAClDiB,kBAAqBX,EAAAA,EAAcJ,KAAWF,EAE9CkB,IACD3C,GAA+B,iBAAZA,GAAoC,SAAZA,GAAkC,eAAZA,EAEtE,OAAO4C,gBACH9C,qCAEOoC,QACHF,UACIa,EACIb,GACAc,UAAOC,IACP/C,EAAUgD,gBAAcF,UAAQ,UAAW9C,GAAW,KACzC,WAAbD,EAAwBiD,gBAAcF,UAAQ,WAAY/C,GAAY,KAC1D,MAAZgB,EACMiC,gBAAcC,UAAa,WAAYC,OAAOnC,IAC9C,KACNiC,gBAAcC,UAAa,WAAYjC,GACvCgC,gBAAcF,UAAQ,YAAa7B,GAEnC+B,gBAAcG,UAAe,aAAchB,IAC3Ca,gBAAcG,UAAe,eAAgBf,IAC7CY,gBAAcG,UAAe,gBAAiBd,IAC9CW,gBAAcG,UAAe,cAAeb,IAE5CU,gBAAcI,UAAc,YAAab,IACzCS,gBAAcI,UAAc,cAAeZ,IAC3CQ,gBAAcI,UAAc,eAAgBX,IAC5CO,gBAAcI,UAAc,aAAcV,IAE1CC,GAAW,KAAOK,gBAAcF,UAAQ,gBAAiB7C,GACzD0C,GAAW,KAAOK,gBAAcF,UAAQ,WAAY5C,GACpDyC,GAAW,KAAOK,gBAAcF,UAAQ,aAAcxC,GACtDqC,GAAW,KAAOK,gBAAcF,UAAQ,iBAAkBvC,GAC7C,MAAbC,EAAoBwC,gBAAcF,UAAQ,YAAatC,GAAa,KACtD,MAAdJ,EACM4C,gBAAcF,UAAQ,aAAcI,OAAO9C,IAC3C,KACM,MAAZD,EAAmB6C,gBAAcF,UAAQ,WAAYI,OAAO/C,IAAa,KACzEE,EAAM2C,gBAAcK,UAAW,MAAOhD,GAAO,KAE7C2C,gBAAcF,UAAQ,WAAYrC,GACzB,MAATC,EAAgBsC,gBAAcC,UAAa,QAASC,OAAOxC,IAAU,KACrEsC,gBAAcF,UAAQ,SAAUnC,GAChCqC,gBAAcF,UAAQ,KAAMlC,GACX,SAAjBE,EACMkC,gBAAcF,UAAQ,eAAgBhC,GACtC,KACK,SAAXD,EAAoBmC,gBAAcF,UAAQ,SAAUjC,GAAU,YAC7DyC,EACT1D,IAAAA,IAEJqC"}
+{"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":"q6BA2FA,SAASA,GAAiBC,SACtBA,EAAW,SADWC,QAEtBA,EAFsBC,cAGtBA,EAAgB,MAHMC,SAItBA,EAJsBC,SAKtBA,EALsBC,WAMtBA,EANsBC,IAOtBA,EAPsBC,WAQtBA,EARsBC,eAStBA,EATsBC,UAUtBA,EAVsBC,SAWtBA,EAXsBC,MAYtBA,EAZsBC,OAatBA,EAbsBC,WActBA,EAdsBC,OAetBA,EAfsBC,aAgBtBA,EAhBsBC,SAiBtBA,EAjBsBC,SAkBtBA,EAlBsBC,UAmBtBA,EAnBsBC,QAoBtBA,EApBsBC,SAqBtBA,EArBsBC,SAsBtBA,EAtBsBC,WAuBtBA,EAvBsBC,aAwBtBA,EAxBsBC,cAyBtBA,EAzBsBC,YA0BtBA,EA1BsBC,OA2BtBA,EA3BsBC,QA4BtBA,EA5BsBC,QA6BtBA,EA7BsBC,UA8BtBA,EA9BsBC,YA+BtBA,EA/BsBC,aAgCtBA,EAhCsBC,WAiCtBA,EAjCsBC,UAkCtBA,wBAEA,MAAMC,iBAAqBZ,EAAAA,EAAcF,KAAYD,EAC/CgB,iBAAuBZ,EAAAA,EAAgBF,KAAYF,EACnDiB,iBAAwBZ,EAAAA,EAAiBJ,KAAYD,EACrDkB,iBAAsBZ,EAAAA,EAAeJ,KAAYF,EAEjDmB,iBAAoBT,EAAAA,EAAaF,KAAWD,EAC5Ca,kBAAsBT,EAAAA,EAAeF,KAAWF,EAChDc,kBAAuBT,EAAAA,EAAgBJ,KAAWD,EAClDe,kBAAqBT,EAAAA,EAAcJ,KAAWF,EAE9CgB,IACDzC,GAA+B,iBAAZA,GAAoC,SAAZA,GAAkC,eAAZA,EAEtE,OAAO0C,EACHV,EACAW,UAAOC,IACP5C,EAAU6C,gBAAcF,UAAQ,UAAW3C,GAAW,KACzC,WAAbD,EAAwB8C,gBAAcF,UAAQ,WAAY5C,GAAY,KAC1D,MAAZgB,EAAmB8B,gBAAcC,UAAa,WAAYC,OAAOhC,IAAa,KAC9E8B,gBAAcC,UAAa,WAAY9B,GACvC6B,gBAAcF,UAAQ,YAAa1B,GAEnC4B,gBAAcG,UAAe,aAAcf,GAC3CY,gBAAcG,UAAe,eAAgBd,GAC7CW,gBAAcG,UAAe,gBAAiBb,GAC9CU,gBAAcG,UAAe,cAAeZ,GAE5CS,gBAAcI,UAAc,YAAaZ,GACzCQ,gBAAcI,UAAc,cAAeX,IAC3CO,gBAAcI,UAAc,eAAgBV,IAC5CM,gBAAcI,UAAc,aAAcT,IAE1CC,GAAW,KAAOI,gBAAcF,UAAQ,gBAAiB1C,GACzDwC,GAAW,KAAOI,gBAAcF,UAAQ,WAAYzC,GACpDuC,GAAW,KAAOI,gBAAcF,UAAQ,aAAcrC,GACtDmC,GAAW,KAAOI,gBAAcF,UAAQ,iBAAkBpC,GAC7C,MAAbC,EAAoBqC,gBAAcF,UAAQ,YAAanC,GAAa,KACtD,MAAdJ,EAAqByC,gBAAcF,UAAQ,aAAcI,OAAO3C,IAAe,KACnE,MAAZD,EAAmB0C,gBAAcF,UAAQ,WAAYI,OAAO5C,IAAa,KACzEE,EAAMwC,gBAAcK,UAAW,MAAO7C,GAAO,KAE7CwC,gBAAcF,UAAQ,WAAYlC,GACzB,MAATC,EAAgBmC,gBAAcC,UAAa,QAASC,OAAOrC,IAAU,KACrEmC,gBAAcF,UAAQ,SAAUhC,GAChCkC,gBAAcF,UAAQ,KAAM/B,GACX,SAAjBE,EAA0B+B,gBAAcF,UAAQ,eAAgB7B,GAAgB,KACrE,SAAXD,EAAoBgC,gBAAcF,UAAQ,SAAU9B,GAAU,kBAI1DsC,wBAAuD,WAwC/DC,OAtCIC,GAAIC,EAAY,MADpBvD,SAEIA,EAAW,SAFfC,QAGIA,EAHJC,cAIIA,EAAgB,MAJpBC,SAKIA,EALJC,SAMIA,EANJC,WAOIA,EAPJC,IAQIA,EARJC,WASIA,EATJC,eAUIA,EAVJC,UAWIA,EAXJC,SAYIA,EAZJC,MAaIA,EAbJC,OAcIA,EAdJC,WAeIA,EAfJC,OAgBIA,EAhBJC,aAiBIA,EAjBJC,SAkBIA,EAlBJC,SAmBIA,EAnBJC,UAoBIA,EApBJC,QAqBIA,EArBJC,SAsBIA,EAtBJC,SAuBIA,EAvBJC,WAwBIA,EAxBJC,aAyBIA,EAzBJC,cA0BIA,EA1BJC,YA2BIA,EA3BJC,OA4BIA,EA5BJC,QA6BIA,EA7BJC,QA8BIA,EA9BJC,UA+BIA,EA/BJC,YAgCIA,EAhCJC,aAiCIA,EAjCJC,WAkCIA,EAlCJC,UAmCIA,EAnCJuB,SAoCIA,KACGC,iCAIP,OAAOC,gBACHH,qCAEOE,OACHxB,UAAWlC,EAAiB,CACxBC,SAAAA,EACAC,QAAAA,EACAC,cAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,WAAAA,EACAC,IAAAA,EACAC,WAAAA,EACAC,eAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,MAAAA,EACAC,OAAAA,EACAC,WAAAA,EACAC,OAAAA,EACAC,aAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,WAAAA,EACAC,aAAAA,EACAC,cAAAA,EACAC,YAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,UAAAA,EACAC,YAAAA,EACAC,aAAAA,EACAC,WAAAA,EACAC,UAAAA,IAEJoB,IAAAA,IAEJG"}

package/lib/button/button.d.ts

@@ -1,15 +1,127 @@
 import * as React from 'react';
-import type { BaseButtonProps } from '../base-button';
-declare type NativeButtonProps = Omit<React.AllHTMLAttributes<HTMLButtonElement>, 'aria-disabled' | 'className' | keyof BaseButtonProps>;
-export declare type ButtonProps = NativeButtonProps & BaseButtonProps & {
+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;
+interface CommonButtonProps extends ObfuscatedClassName, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className'>, Pick<RoleProps, 'render'> {
+    /**
+     * The button's variant.
+     */
+    variant: ButtonVariant;
+    /**
+     * The button's tone.
+     *
+     * @default 'normal'
+     */
+    tone?: ButtonTone;
+    /**
+     * The button's size.
+     *
+     * @default 'normal'
+     */
+    size?: ButtonSize;
+    /**
+     * Controls the shape of the button.
+     *
+     * Specifically, it allows to make it have slightly curved corners (the default) vs. having them
+     * fully curved to the point that they are as round as possible.
+     *
+     * In icon-only buttons this allows to have the button be circular.
+     *
+     * @default 'normal'
+     */
+    shape?: 'normal' | 'rounded';
+    /**
+     * Whether the button is disabled or not.
+     *
+     * Buttons are disabled using aria-disabled, rather than the HTML disabled attribute. This
+     * allows the buttons to be focusable, which can aid discoverability. This way, users can tab to
+     * the button and read its label, even if they can't activate it.
+     *
+     * It is also convenient when buttons are rendered as a link. Links cannot normally be disabled,
+     * but by using aria-disabled, we can make them behave as if they were.
+     *
+     * The `onClick` handler is automatically prevented when the button is disabled in this way, to
+     * mimic the behavior of a native disabled attribute.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the button is busy/loading.
+     *
+     * A button in this state is functionally and semantically disabled. Visually is does not look
+     * dimmed (as disabled buttons normally do), but it shows a loading spinner instead.
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * A tooltip linked to the button element.
+     */
+    tooltip?: TooltipProps['content'];
+    /**
+     * The type of the button.
+     *
+     * @default 'button'
+     */
     type?: 'button' | 'submit' | 'reset';
-    exceptionallySetClassName?: string;
-};
+}
+interface ButtonProps extends CommonButtonProps {
+    /**
+     * The button label content.
+     */
+    children?: React.ReactNode;
+    /**
+     * The icon to display at the start of the button (before the label).
+     */
+    startIcon?: IconElement;
+    /**
+     * The icon to display at the end of the button (after the label).
+     */
+    endIcon?: IconElement;
+    /**
+     * The width of the button.
+     *
+     * - `'auto'`: The button will be as wide as its content.
+     * - `'full'`: The button will be as wide as its container.
+     *
+     * @default 'auto'
+     */
+    width?: 'auto' | 'full';
+    /**
+     * The alignment of the button label inside the button.
+     *
+     * @default 'center'
+     */
+    align?: 'start' | 'center' | 'end';
+}
 /**
- * A semantic button that also looks like a button, and provides all the necessary visual variants.
- * It follows the [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).
- *
- * @see ButtonLink
+ * A button element that displays a text label and optionally a start or end icon. It follows the
+ * [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).
  */
-export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export {};
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+interface IconButtonProps extends CommonButtonProps {
+    /**
+     * The icon to display inside the button.
+     */
+    icon: IconElement;
+    /**
+     * The button label.
+     *
+     * It is used for assistive technologies, and it is also shown as a tooltip (if not tooltip is
+     * provided explicitly).
+     */
+    'aria-label': string;
+}
+/**
+ * A button element that displays an icon only, visually, though it is semantically labelled. It
+ * also makes sure to always show a tooltip with its label. It follows the
+ * [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).
+ */
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export type { ButtonProps, IconButtonProps, ButtonVariant, ButtonTone };
+export { Button, IconButton };

package/lib/button/button.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),a=require("../base-button/base-button.js");const r=["variant","tone","size","type","disabled","exceptionallySetClassName"];exports.Button=t.forwardRef((function(o,s){let{variant:l,tone:n="normal",size:i="normal",type:u="button",disabled:b=!1,exceptionallySetClassName:p}=o,c=e.objectWithoutProperties(o,r);return t.createElement(a.BaseButton,e.objectSpread2(e.objectSpread2({},c),{},{as:"button",ref:s,variant:l,tone:n,size:i,type:u,disabled:b,exceptionallySetClassName:p}))}));
+"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;
 //# 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 { BaseButton } from '../base-button'\nimport type { BaseButtonProps } from '../base-button'\n\ntype NativeButtonProps = Omit<\n    React.AllHTMLAttributes<HTMLButtonElement>,\n    'aria-disabled' | 'className' | keyof BaseButtonProps\n>\n\nexport type ButtonProps = NativeButtonProps &\n    BaseButtonProps & {\n        type?: 'button' | 'submit' | 'reset'\n        exceptionallySetClassName?: string\n    }\n\n/**\n * A semantic button that also looks like a button, and provides all the necessary visual variants.\n * It follows the [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).\n *\n * @see ButtonLink\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n    {\n        variant,\n        tone = 'normal',\n        size = 'normal',\n        type = 'button',\n        disabled = false,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseButton\n            {...props}\n            as=\"button\"\n            ref={ref}\n            variant={variant}\n            tone={tone}\n            size={size}\n            type={type}\n            disabled={disabled}\n            exceptionallySetClassName={exceptionallySetClassName}\n        />\n    )\n})\n"],"names":["React","ref","variant","tone","size","type","disabled","exceptionallySetClassName","props","BaseButton","as"],"mappings":"2RAqBsBA,cAAiD,WAUnEC,OATAC,QACIA,EADJC,KAEIA,EAAO,SAFXC,KAGIA,EAAO,SAHXC,KAIIA,EAAO,SAJXC,SAKIA,GAAW,EALfC,0BAMIA,KACGC,iCAIP,OACIR,gBAACS,gDACOD,OACJE,GAAG,SACHT,IAAKA,EACLC,QAASA,EACTC,KAAMA,EACNC,KAAMA,EACNC,KAAMA,EACNC,SAAUA,EACVC,0BAA2BA"}
+{"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"}

package/lib/button/button.module.css.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={baseButton:"_3930afa0",label:"_90654824","shape-rounded":"c05d17c2","size-small":"_1e29d236","size-normal":"_7246d092","size-large":"_2d084671",disabled:"_2b0b9d95",iconButton:"abd5766f",startIcon:"_380e7c73",endIcon:"_20fe4105","variant-primary":"_7ea1378e","variant-secondary":"_64ee8afd","variant-tertiary":"_650176bf","variant-quaternary":"aa19cb97","tone-destructive":"_7a2d9a8c"};
+//# sourceMappingURL=button.module.css.js.map

package/lib/button/button.module.css.js.map

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

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

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

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\n/**\n * FIXME: This is a workaround for consumers that are using newer versions of React types that no longer have these props.\n * Once we upgrade Reactist to the newest React types, we should be able to remove these.\n */\ntype DeprecatedProps = 'crossOrigin' | 'onPointerEnterCapture' | 'onPointerLeaveCapture'\n\ntype CheckboxFieldProps = Omit<\n    JSX.IntrinsicElements['input'],\n    | 'type'\n    | 'className'\n    | 'disabled'\n    | 'aria-controls'\n    | 'aria-describedby'\n    | 'aria-label'\n    | 'aria-labelledby'\n    | DeprecatedProps\n> & {\n    'aria-checked'?: never\n    /** Identifies the set of checkboxes controlled by the mixed checkbox for assistive technologies. */\n    'aria-controls'?: string\n    /** Identifies the element (or elements) that describes the checkbox for assistive technologies. */\n    'aria-describedby'?: string\n    /** Defines a string value that labels the current checkbox for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current checkbox for assistive technologies. */\n    'aria-labelledby'?: string\n    /** Defines whether or not the checkbox is disabled. */\n    disabled?: boolean\n    /** The label for the checkbox element. */\n    label?: React.ReactNode\n    /** The icon that should be added to the checkbox label. */\n    icon?: React.ReactChild\n    /** Defines whether or not the checkbox can be of a `mixed` state. */\n    indeterminate?: boolean\n}\n\nconst CheckboxField = React.forwardRef<HTMLInputElement, CheckboxFieldProps>(function CheckboxField(\n    { label, icon, disabled, indeterminate, defaultChecked, onChange, ...props },\n    ref,\n) {\n    const isControlledComponent = typeof props.checked === 'boolean'\n    if (typeof indeterminate === 'boolean' && !isControlledComponent) {\n        // eslint-disable-next-line no-console\n        console.warn('Cannot use indeterminate on an uncontrolled checkbox')\n        indeterminate = undefined\n    }\n\n    if (!label && !props['aria-label'] && !props['aria-labelledby']) {\n        // eslint-disable-next-line no-console\n        console.warn('A Checkbox needs a label')\n    }\n\n    const [keyFocused, setKeyFocused] = React.useState(false)\n    const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n    const isChecked = props.checked ?? checkedState\n\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const combinedRef = useForkRef(internalRef, ref)\n    React.useEffect(\n        function setIndeterminate() {\n            if (internalRef.current && typeof indeterminate === 'boolean') {\n                internalRef.current.indeterminate = indeterminate\n            }\n        },\n        [indeterminate],\n    )\n\n    return (\n        <Box\n            as=\"label\"\n            display=\"flex\"\n            alignItems=\"center\"\n            className={[\n                styles.container,\n                disabled ? styles.disabled : null,\n                isChecked ? styles.checked : null,\n                keyFocused ? styles.keyFocused : null,\n            ]}\n        >\n            <input\n                {...props}\n                ref={combinedRef}\n                type=\"checkbox\"\n                aria-checked={indeterminate ? 'mixed' : isChecked}\n                checked={isChecked}\n                disabled={disabled}\n                onChange={(event) => {\n                    onChange?.(event)\n                    if (!event.defaultPrevented) {\n                        setChecked(event.currentTarget.checked)\n                    }\n                }}\n                onBlur={(event) => {\n                    setKeyFocused(false)\n                    props?.onBlur?.(event)\n                }}\n                onKeyUp={(event) => {\n                    setKeyFocused(true)\n                    props?.onKeyUp?.(event)\n                }}\n            />\n            <CheckboxIcon\n                checked={isChecked}\n                disabled={disabled}\n                indeterminate={indeterminate}\n                aria-hidden\n            />\n            {icon ? (\n                <Box display=\"flex\" className={styles.icon} aria-hidden>\n                    {icon}\n                </Box>\n            ) : null}\n            {label ? (\n                <Box display=\"flex\" className={styles.label}>\n                    <Text>{label}</Text>\n                </Box>\n            ) : null}\n        </Box>\n    )\n})\n\nexport { CheckboxField }\nexport type { CheckboxFieldProps }\n"],"names":["React","ref","label","icon","disabled","indeterminate","defaultChecked","onChange","props","checked","console","warn","undefined","keyFocused","setKeyFocused","checkedState","setChecked","isChecked","internalRef","combinedRef","useForkRef","current","Box","as","display","alignItems","className","styles","container","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","CheckboxIcon","Text"],"mappings":"0ZA4CsBA,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","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"}

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

@@ -4,5 +4,5 @@ declare type Props = React.SVGProps<SVGSVGElement> & {
     indeterminate?: boolean;
     disabled?: boolean;
 };
-declare function CheckboxIcon({ checked, indeterminate, disabled, ...props }: Props): JSX.Element;
+declare function CheckboxIcon({ checked, indeterminate, disabled, ...props }: Props): React.JSX.Element;
 export { CheckboxIcon };

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

@@ -11,7 +11,7 @@ declare type Props = {
     onChange?: (color: number) => void;
     colorList?: (string | NamedColor)[];
 };
-declare function ColorPicker({ color, small, onChange, colorList }: Props): JSX.Element;
+declare function ColorPicker({ color, small, onChange, colorList }: Props): React.JSX.Element;
 declare namespace ColorPicker {
     var displayName: string;
 }
@@ -22,7 +22,7 @@ declare type ColorItemProps = {
     onClick?: (colorIndex: number) => void;
     tooltip?: React.ReactNode;
 };
-declare function ColorItem({ color, colorIndex, isActive, onClick, tooltip }: ColorItemProps): JSX.Element;
+declare function ColorItem({ color, colorIndex, isActive, onClick, tooltip }: ColorItemProps): React.JSX.Element;
 declare namespace ColorItem {
     var displayName: string;
 }

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

@@ -17,7 +17,7 @@ declare type BoxState = {
     top: boolean;
     showBody: boolean;
 };
-declare class Box extends React.Component<React.PropsWithChildren<BoxProps>, BoxState> {
+declare class Box extends React.Component<BoxProps, BoxState> {
     static displayName: string;
     constructor(props: BoxProps, context: React.Context<unknown>);
     componentWillUnmount(): void;
@@ -26,8 +26,8 @@ declare class Box extends React.Component<React.PropsWithChildren<BoxProps>, Box
     _toggleShowBody: () => void;
     _getTriggerComponent(): React.ReactElement<TriggerProps, string | React.JSXElementConstructor<any>> | undefined;
     _setPosition: (body: HTMLElement | null) => void;
-    _getBodyComponent(): JSX.Element | null;
-    render(): JSX.Element;
+    _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'> & {
@@ -43,13 +43,13 @@ declare type BodyProps = {
     top?: boolean;
     right?: boolean;
 };
-declare function Body({ top, right, children, setPosition }: BodyProps): JSX.Element;
+declare function Body({ top, right, children, setPosition }: BodyProps): React.JSX.Element;
 declare namespace Body {
     var displayName: string;
 }
 declare const Dropdown: {
     Box: typeof Box;
-    Trigger: React.ForwardRefExoticComponent<Pick<TriggerProps, "onClick" | "key" | "autoFocus" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "tooltip"> & React.RefAttributes<HTMLButtonElement>>;
+    Trigger: React.ForwardRefExoticComponent<Omit<TriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
     Body: typeof Body;
 };
 export { Dropdown };