@doist/reactist 17.8.0 → 17.9.0

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

@@ -7,8 +7,9 @@ import styles from './box.module.css.js';
 import paddingStyles from './padding.module.css.js';
 import marginStyles from './margin.module.css.js';
 import widthStyles from './width.module.css.js';
+import gapStyles from './gap.module.css.js';
 
-const _excluded = ["as", "position", "display", "flexDirection", "flexWrap", "flexGrow", "flexShrink", "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"];
+const _excluded = ["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"];
 const Box = /*#__PURE__*/polymorphicComponent(function Box(_ref, ref) {
   var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9;
 
@@ -20,6 +21,7 @@ const Box = /*#__PURE__*/polymorphicComponent(function Box(_ref, ref) {
     flexWrap,
     flexGrow,
     flexShrink,
+    gap,
     alignItems,
     justifyContent,
     alignSelf,
@@ -64,7 +66,7 @@ const Box = /*#__PURE__*/polymorphicComponent(function Box(_ref, ref) {
     className: classNames(className, styles.box, display ? getClassNames(styles, 'display', display) : null, position !== 'static' ? getClassNames(styles, 'position', position) : null, minWidth != null ? getClassNames(widthStyles, 'minWidth', String(minWidth)) : null, getClassNames(widthStyles, 'maxWidth', maxWidth), getClassNames(styles, 'textAlign', textAlign), // padding
     getClassNames(paddingStyles, 'paddingTop', resolvedPaddingTop), getClassNames(paddingStyles, 'paddingRight', resolvedPaddingRight), getClassNames(paddingStyles, 'paddingBottom', resolvedPaddingBottom), getClassNames(paddingStyles, 'paddingLeft', resolvedPaddingLeft), // margin
     getClassNames(marginStyles, 'marginTop', resolvedMarginTop), getClassNames(marginStyles, 'marginRight', resolvedMarginRight), getClassNames(marginStyles, 'marginBottom', resolvedMarginBottom), getClassNames(marginStyles, 'marginLeft', resolvedMarginLeft), // flex props
-    omitFlex ? null : getClassNames(styles, 'flexDirection', flexDirection), omitFlex ? null : getClassNames(styles, 'flexWrap', flexWrap), omitFlex ? null : getClassNames(styles, 'alignItems', alignItems), omitFlex ? null : getClassNames(styles, 'justifyContent', justifyContent), alignSelf != null ? getClassNames(styles, 'alignSelf', alignSelf) : null, flexShrink != null ? getClassNames(styles, 'flexShrink', String(flexShrink)) : null, flexGrow != null ? getClassNames(styles, 'flexGrow', String(flexGrow)) : null, // other props
+    omitFlex ? null : getClassNames(styles, 'flexDirection', flexDirection), omitFlex ? null : getClassNames(styles, 'flexWrap', flexWrap), omitFlex ? null : getClassNames(styles, 'alignItems', alignItems), omitFlex ? null : getClassNames(styles, 'justifyContent', justifyContent), alignSelf != null ? getClassNames(styles, 'alignSelf', alignSelf) : null, flexShrink != null ? getClassNames(styles, 'flexShrink', String(flexShrink)) : null, flexGrow != null ? getClassNames(styles, 'flexGrow', String(flexGrow)) : null, gap ? getClassNames(gapStyles, 'gap', gap) : null, // other props
     getClassNames(styles, 'overflow', overflow), width != null ? getClassNames(widthStyles, 'width', String(width)) : null, getClassNames(styles, 'height', height), getClassNames(styles, 'bg', background), borderRadius !== 'none' ? getClassNames(styles, 'borderRadius', borderRadius) : null, border !== 'none' ? getClassNames(styles, 'border', border) : null) || undefined,
     ref
   }), children);

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

@@ -1 +1 @@
-{"version":3,"file":"box.js","sources":["../../../src/new-components/box/box.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { getClassNames } from '../responsive-props'\n\nimport type { ResponsiveProp } from '../responsive-props'\nimport type {\n    DividerWeight,\n    Space,\n    SpaceWithNegatives,\n    WithEnhancedClassName,\n} from '../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'\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    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        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                    // 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":["Box","polymorphicComponent","ref","as","component","position","display","flexDirection","flexWrap","flexGrow","flexShrink","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","undefined"],"mappings":";;;;;;;;;;;MAyFMA,GAAG,gBAAGC,oBAAoB,CAAmC,SAASD,GAAT,OAuC/DE,GAvC+D;;;MAC/D;IACIC,EAAE,EAAEC,SAAS,GAAG,KADpB;IAEIC,QAAQ,GAAG,QAFf;IAGIC,OAHJ;IAIIC,aAAa,GAAG,KAJpB;IAKIC,QALJ;IAMIC,QANJ;IAOIC,UAPJ;IAQIC,UARJ;IASIC,cATJ;IAUIC,SAVJ;IAWIC,QAXJ;IAYIC,KAZJ;IAaIC,MAbJ;IAcIC,UAdJ;IAeIC,MAfJ;IAgBIC,YAhBJ;IAiBIC,QAjBJ;IAkBIC,QAlBJ;IAmBIC,SAnBJ;IAoBIC,OApBJ;IAqBIC,QArBJ;IAsBIC,QAtBJ;IAuBIC,UAvBJ;IAwBIC,YAxBJ;IAyBIC,aAzBJ;IA0BIC,WA1BJ;IA2BIC,MA3BJ;IA4BIC,OA5BJ;IA6BIC,OA7BJ;IA8BIC,SA9BJ;IA+BIC,WA/BJ;IAgCIC,YAhCJ;IAiCIC,UAjCJ;IAkCIC,SAlCJ;IAmCIC;;MACGC;;EAIP,MAAMC,kBAAkB,YAAGd,UAAH,WAAGA,UAAH,GAAiBF,QAAjB,oBAA6BD,OAArD;EACA,MAAMkB,oBAAoB,YAAGd,YAAH,WAAGA,YAAH,GAAmBF,QAAnB,oBAA+BF,OAAzD;EACA,MAAMmB,qBAAqB,YAAGd,aAAH,WAAGA,aAAH,GAAoBJ,QAApB,oBAAgCD,OAA3D;EACA,MAAMoB,mBAAmB,YAAGd,WAAH,WAAGA,WAAH,GAAkBJ,QAAlB,oBAA8BF,OAAvD;EAEA,MAAMqB,iBAAiB,YAAGX,SAAH,WAAGA,SAAH,GAAgBF,OAAhB,oBAA2BD,MAAlD;EACA,MAAMe,mBAAmB,YAAGX,WAAH,WAAGA,WAAH,GAAkBF,OAAlB,oBAA6BF,MAAtD;EACA,MAAMgB,oBAAoB,YAAGX,YAAH,WAAGA,YAAH,GAAmBJ,OAAnB,oBAA8BD,MAAxD;EACA,MAAMiB,kBAAkB,YAAGX,UAAH,WAAGA,UAAH,GAAiBJ,OAAjB,oBAA4BF,MAApD;EAEA,MAAMkB,QAAQ,GACV,CAAC1C,OAAD,IAAa,OAAOA,OAAP,KAAmB,QAAnB,IAA+BA,OAAO,KAAK,MAA3C,IAAqDA,OAAO,KAAK,YADlF;EAGA,oBAAO2C,aAAA,CACH7C,SADG,oCAGImC,KAHJ;IAICF,SAAS,EACLa,UAAU,CACNb,SADM,EAENc,MAAM,CAACC,GAFD,EAGN9C,OAAO,GAAG+C,aAAa,CAACF,MAAD,EAAS,SAAT,EAAoB7C,OAApB,CAAhB,GAA+C,IAHhD,EAIND,QAAQ,KAAK,QAAb,GAAwBgD,aAAa,CAACF,MAAD,EAAS,UAAT,EAAqB9C,QAArB,CAArC,GAAsE,IAJhE,EAKNe,QAAQ,IAAI,IAAZ,GACMiC,aAAa,CAACC,WAAD,EAAc,UAAd,EAA0BC,MAAM,CAACnC,QAAD,CAAhC,CADnB,GAEM,IAPA,EAQNiC,aAAa,CAACC,WAAD,EAAc,UAAd,EAA0BjC,QAA1B,CARP,EASNgC,aAAa,CAACF,MAAD,EAAS,WAAT,EAAsB7B,SAAtB,CATP;IAWN+B,aAAa,CAACG,aAAD,EAAgB,YAAhB,EAA8BhB,kBAA9B,CAXP,EAYNa,aAAa,CAACG,aAAD,EAAgB,cAAhB,EAAgCf,oBAAhC,CAZP,EAaNY,aAAa,CAACG,aAAD,EAAgB,eAAhB,EAAiCd,qBAAjC,CAbP,EAcNW,aAAa,CAACG,aAAD,EAAgB,aAAhB,EAA+Bb,mBAA/B,CAdP;IAgBNU,aAAa,CAACI,YAAD,EAAe,WAAf,EAA4Bb,iBAA5B,CAhBP,EAiBNS,aAAa,CAACI,YAAD,EAAe,aAAf,EAA8BZ,mBAA9B,CAjBP,EAkBNQ,aAAa,CAACI,YAAD,EAAe,cAAf,EAA+BX,oBAA/B,CAlBP,EAmBNO,aAAa,CAACI,YAAD,EAAe,YAAf,EAA6BV,kBAA7B,CAnBP;IAqBNC,QAAQ,GAAG,IAAH,GAAUK,aAAa,CAACF,MAAD,EAAS,eAAT,EAA0B5C,aAA1B,CArBzB,EAsBNyC,QAAQ,GAAG,IAAH,GAAUK,aAAa,CAACF,MAAD,EAAS,UAAT,EAAqB3C,QAArB,CAtBzB,EAuBNwC,QAAQ,GAAG,IAAH,GAAUK,aAAa,CAACF,MAAD,EAAS,YAAT,EAAuBxC,UAAvB,CAvBzB,EAwBNqC,QAAQ,GAAG,IAAH,GAAUK,aAAa,CAACF,MAAD,EAAS,gBAAT,EAA2BvC,cAA3B,CAxBzB,EAyBNC,SAAS,IAAI,IAAb,GAAoBwC,aAAa,CAACF,MAAD,EAAS,WAAT,EAAsBtC,SAAtB,CAAjC,GAAoE,IAzB9D,EA0BNH,UAAU,IAAI,IAAd,GACM2C,aAAa,CAACF,MAAD,EAAS,YAAT,EAAuBI,MAAM,CAAC7C,UAAD,CAA7B,CADnB,GAEM,IA5BA,EA6BND,QAAQ,IAAI,IAAZ,GAAmB4C,aAAa,CAACF,MAAD,EAAS,UAAT,EAAqBI,MAAM,CAAC9C,QAAD,CAA3B,CAAhC,GAAyE,IA7BnE;IA+BN4C,aAAa,CAACF,MAAD,EAAS,UAAT,EAAqBrC,QAArB,CA/BP,EAgCNC,KAAK,IAAI,IAAT,GAAgBsC,aAAa,CAACC,WAAD,EAAc,OAAd,EAAuBC,MAAM,CAACxC,KAAD,CAA7B,CAA7B,GAAqE,IAhC/D,EAiCNsC,aAAa,CAACF,MAAD,EAAS,QAAT,EAAmBnC,MAAnB,CAjCP,EAkCNqC,aAAa,CAACF,MAAD,EAAS,IAAT,EAAelC,UAAf,CAlCP,EAmCNE,YAAY,KAAK,MAAjB,GACMkC,aAAa,CAACF,MAAD,EAAS,cAAT,EAAyBhC,YAAzB,CADnB,GAEM,IArCA,EAsCND,MAAM,KAAK,MAAX,GAAoBmC,aAAa,CAACF,MAAD,EAAS,QAAT,EAAmBjC,MAAnB,CAAjC,GAA8D,IAtCxD,CAAV,IAuCKwC,SA5CV;IA6CCxD;MAEJoC,QA/CG,CAAP;AAiDH,CAvG+B;;;;"}
+{"version":3,"file":"box.js","sources":["../../../src/new-components/box/box.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { getClassNames } from '../responsive-props'\n\nimport type { ResponsiveProp } from '../responsive-props'\nimport type {\n    DividerWeight,\n    Space,\n    SpaceWithNegatives,\n    WithEnhancedClassName,\n} from '../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":["Box","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":"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"}

package/es/new-components/box/gap.module.css.js

@@ -0,0 +1,4 @@
+var modules_8b5c09cb = {"gap-none":"_64ed24f4","gap-xsmall":"_2580a74b","gap-small":"c68f8bf6","gap-medium":"_43e5f8e9","gap-large":"_966b120f","gap-xlarge":"f957894c","gap-xxlarge":"_8cca104b","tablet-gap-none":"_5797cee2","tablet-gap-xsmall":"_9015672f","tablet-gap-small":"_7ec86eec","tablet-gap-medium":"_714d7179","tablet-gap-large":"ae1deb59","tablet-gap-xlarge":"e1cfce55","tablet-gap-xxlarge":"_168a8ff8","desktop-gap-none":"_43e2b619","desktop-gap-xsmall":"_0ea9bf88","desktop-gap-small":"d451307a","desktop-gap-medium":"bf93cf66","desktop-gap-large":"_1430cddf","desktop-gap-xlarge":"fa00c93e","desktop-gap-xxlarge":"_6f3aee54"};
+
+export default modules_8b5c09cb;
+//# sourceMappingURL=gap.module.css.js.map

package/es/new-components/box/gap.module.css.js.map

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

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

@@ -16,11 +16,11 @@ const Column = /*#__PURE__*/polymorphicComponent(function Column(_ref, ref) {
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
-    className: [exceptionallySetClassName, styles.column, width !== 'content' ? getClassNames(styles, 'columnWidth', width.replace('/', '-')) : null],
+    className: [exceptionallySetClassName, getClassNames(styles, 'columnWidth', width.replace('/', '-'))],
     minWidth: 0,
-    width: width !== 'content' ? 'full' : undefined,
     height: "full",
     flexShrink: width === 'content' ? 0 : undefined,
+    flexGrow: width === 'auto' ? 1 : 0,
     ref: ref
   }), children);
 });
@@ -36,8 +36,9 @@ const Columns = /*#__PURE__*/polymorphicComponent(function Columns(_ref2, ref) {
       props = _objectWithoutProperties(_ref2, _excluded2);
 
   return /*#__PURE__*/createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
-    className: [exceptionallySetClassName, getClassNames(styles, 'space', space)],
+    className: [exceptionallySetClassName, styles.container, getClassNames(styles, 'container', space)],
     display: "flex",
+    gap: space,
     flexDirection: collapseBelow === 'desktop' ? {
       mobile: 'column',
       tablet: 'column',

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

@@ -1 +1 @@
-{"version":3,"file":"columns.js","sources":["../../../src/new-components/columns/columns.tsx"],"sourcesContent":["import * as React from 'react'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { getClassNames, mapResponsiveProp } from '../responsive-props'\nimport { Box } from '../box'\n\nimport type { ResponsiveProp, ResponsiveBreakpoints } from '../responsive-props'\nimport type { Space } from '../common-types'\nimport type { ReusableBoxProps } from '../box'\n\nimport styles from './columns.module.css'\n\ntype ColumnWidth =\n    | 'auto'\n    | 'content'\n    | '1/2'\n    | '1/3'\n    | '2/3'\n    | '1/4'\n    | '3/4'\n    | '1/5'\n    | '2/5'\n    | '3/5'\n    | '4/5'\n\ninterface ColumnProps {\n    width?: ColumnWidth\n}\n\nconst Column = polymorphicComponent<'div', ColumnProps>(function Column(\n    { width = 'auto', children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    return (\n        <Box\n            {...props}\n            className={[\n                exceptionallySetClassName,\n                styles.column,\n                width !== 'content'\n                    ? getClassNames(styles, 'columnWidth', width.replace('/', '-'))\n                    : null,\n            ]}\n            minWidth={0}\n            width={width !== 'content' ? 'full' : undefined}\n            height=\"full\"\n            flexShrink={width === 'content' ? 0 : undefined}\n            ref={ref}\n        >\n            {children}\n        </Box>\n    )\n})\n\ntype ColumnsHorizontalAlignment = 'left' | 'center' | 'right'\ntype ColumnsVerticalAlignment = 'top' | 'center' | 'bottom' | 'baseline'\ntype ColumnsCollapseBelow = Exclude<ResponsiveBreakpoints, 'mobile'>\n\ninterface ColumnsProps extends ReusableBoxProps {\n    space?: ResponsiveProp<Space>\n    align?: ResponsiveProp<ColumnsHorizontalAlignment>\n    alignY?: ResponsiveProp<ColumnsVerticalAlignment>\n    collapseBelow?: ResponsiveBreakpoints\n}\n\nconst Columns = polymorphicComponent<'div', ColumnsProps>(function Columns(\n    {\n        space,\n        align = 'left',\n        alignY = 'top',\n        collapseBelow,\n        children,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <Box\n            {...props}\n            className={[exceptionallySetClassName, getClassNames(styles, 'space', space)]}\n            display=\"flex\"\n            flexDirection={\n                collapseBelow === 'desktop'\n                    ? { mobile: 'column', tablet: 'column', desktop: 'row' }\n                    : collapseBelow === 'tablet'\n                    ? { mobile: 'column', tablet: 'row' }\n                    : 'row'\n            }\n            alignItems={mapResponsiveProp(alignY, (alignY) =>\n                alignY === 'top' ? 'flexStart' : alignY === 'bottom' ? 'flexEnd' : alignY,\n            )}\n            justifyContent={mapResponsiveProp(align, (align) =>\n                align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : align,\n            )}\n            ref={ref}\n        >\n            {children}\n        </Box>\n    )\n})\n\nexport type {\n    ColumnProps,\n    ColumnsProps,\n    ColumnWidth,\n    ColumnsCollapseBelow,\n    ColumnsHorizontalAlignment,\n    ColumnsVerticalAlignment,\n}\n\nexport { Column, Columns }\n"],"names":["Column","polymorphicComponent","ref","width","children","exceptionallySetClassName","props","React","Box","className","styles","column","getClassNames","replace","minWidth","undefined","height","flexShrink","Columns","space","align","alignY","collapseBelow","display","flexDirection","mobile","tablet","desktop","alignItems","mapResponsiveProp","justifyContent"],"mappings":";;;;;;;;;MA4BMA,MAAM,gBAAGC,oBAAoB,CAAqB,SAASD,MAAT,OAEpDE,GAFoD;MACpD;IAAEC,KAAK,GAAG,MAAV;IAAkBC,QAAlB;IAA4BC;;MAA8BC;;EAG1D,oBACIC,aAAA,CAACC,GAAD,oCACQF,KADR;IAEIG,SAAS,EAAE,CACPJ,yBADO,EAEPK,MAAM,CAACC,MAFA,EAGPR,KAAK,KAAK,SAAV,GACMS,aAAa,CAACF,MAAD,EAAS,aAAT,EAAwBP,KAAK,CAACU,OAAN,CAAc,GAAd,EAAmB,GAAnB,CAAxB,CADnB,GAEM,IALC,CAFf;IASIC,QAAQ,EAAE,CATd;IAUIX,KAAK,EAAEA,KAAK,KAAK,SAAV,GAAsB,MAAtB,GAA+BY,SAV1C;IAWIC,MAAM,EAAC,MAXX;IAYIC,UAAU,EAAEd,KAAK,KAAK,SAAV,GAAsB,CAAtB,GAA0BY,SAZ1C;IAaIb,GAAG,EAAEA;MAEJE,QAfL,CADJ;AAmBH,CAvBkC;MAoC7Bc,OAAO,gBAAGjB,oBAAoB,CAAsB,SAASiB,OAAT,QAUtDhB,GAVsD;MACtD;IACIiB,KADJ;IAEIC,KAAK,GAAG,MAFZ;IAGIC,MAAM,GAAG,KAHb;IAIIC,aAJJ;IAKIlB,QALJ;IAMIC;;MACGC;;EAIP,oBACIC,aAAA,CAACC,GAAD,oCACQF,KADR;IAEIG,SAAS,EAAE,CAACJ,yBAAD,EAA4BO,aAAa,CAACF,MAAD,EAAS,OAAT,EAAkBS,KAAlB,CAAzC,CAFf;IAGII,OAAO,EAAC,MAHZ;IAIIC,aAAa,EACTF,aAAa,KAAK,SAAlB,GACM;MAAEG,MAAM,EAAE,QAAV;MAAoBC,MAAM,EAAE,QAA5B;MAAsCC,OAAO,EAAE;KADrD,GAEML,aAAa,KAAK,QAAlB,GACA;MAAEG,MAAM,EAAE,QAAV;MAAoBC,MAAM,EAAE;KAD5B,GAEA,KATd;IAWIE,UAAU,EAAEC,iBAAiB,CAACR,MAAD,EAAUA,MAAD,IAClCA,MAAM,KAAK,KAAX,GAAmB,WAAnB,GAAiCA,MAAM,KAAK,QAAX,GAAsB,SAAtB,GAAkCA,MAD1C,CAXjC;IAcIS,cAAc,EAAED,iBAAiB,CAACT,KAAD,EAASA,KAAD,IACrCA,KAAK,KAAK,MAAV,GAAmB,WAAnB,GAAiCA,KAAK,KAAK,OAAV,GAAoB,SAApB,GAAgCA,KADpC,CAdrC;IAiBIlB,GAAG,EAAEA;MAEJE,QAnBL,CADJ;AAuBH,CAnCmC;;;;"}
+{"version":3,"file":"columns.js","sources":["../../../src/new-components/columns/columns.tsx"],"sourcesContent":["import * as React from 'react'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { getClassNames, mapResponsiveProp } from '../responsive-props'\nimport { Box } from '../box'\n\nimport type { ResponsiveProp, ResponsiveBreakpoints } from '../responsive-props'\nimport type { Space } from '../common-types'\nimport type { ReusableBoxProps } from '../box'\n\nimport styles from './columns.module.css'\n\ntype ColumnWidth =\n    | 'auto'\n    | 'content'\n    | '1/2'\n    | '1/3'\n    | '2/3'\n    | '1/4'\n    | '3/4'\n    | '1/5'\n    | '2/5'\n    | '3/5'\n    | '4/5'\n\ninterface ColumnProps {\n    width?: ColumnWidth\n}\n\nconst Column = polymorphicComponent<'div', ColumnProps>(function Column(\n    { width = 'auto', children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    return (\n        <Box\n            {...props}\n            className={[\n                exceptionallySetClassName,\n                getClassNames(styles, 'columnWidth', width.replace('/', '-')),\n            ]}\n            minWidth={0}\n            height=\"full\"\n            flexShrink={width === 'content' ? 0 : undefined}\n            flexGrow={width === 'auto' ? 1 : 0}\n            ref={ref}\n        >\n            {children}\n        </Box>\n    )\n})\n\ntype ColumnsHorizontalAlignment = 'left' | 'center' | 'right'\ntype ColumnsVerticalAlignment = 'top' | 'center' | 'bottom' | 'baseline'\ntype ColumnsCollapseBelow = Exclude<ResponsiveBreakpoints, 'mobile'>\n\ninterface ColumnsProps extends ReusableBoxProps {\n    space?: ResponsiveProp<Space>\n    align?: ResponsiveProp<ColumnsHorizontalAlignment>\n    alignY?: ResponsiveProp<ColumnsVerticalAlignment>\n    collapseBelow?: ResponsiveBreakpoints\n}\n\nconst Columns = polymorphicComponent<'div', ColumnsProps>(function Columns(\n    {\n        space,\n        align = 'left',\n        alignY = 'top',\n        collapseBelow,\n        children,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <Box\n            {...props}\n            className={[\n                exceptionallySetClassName,\n                styles.container,\n                getClassNames(styles, 'container', space),\n            ]}\n            display=\"flex\"\n            gap={space}\n            flexDirection={\n                collapseBelow === 'desktop'\n                    ? { mobile: 'column', tablet: 'column', desktop: 'row' }\n                    : collapseBelow === 'tablet'\n                    ? { mobile: 'column', tablet: 'row' }\n                    : 'row'\n            }\n            alignItems={mapResponsiveProp(alignY, (alignY) =>\n                alignY === 'top' ? 'flexStart' : alignY === 'bottom' ? 'flexEnd' : alignY,\n            )}\n            justifyContent={mapResponsiveProp(align, (align) =>\n                align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : align,\n            )}\n            ref={ref}\n        >\n            {children}\n        </Box>\n    )\n})\n\nexport type {\n    ColumnProps,\n    ColumnsProps,\n    ColumnWidth,\n    ColumnsCollapseBelow,\n    ColumnsHorizontalAlignment,\n    ColumnsVerticalAlignment,\n}\n\nexport { Column, Columns }\n"],"names":["Column","polymorphicComponent","ref","width","children","exceptionallySetClassName","props","React","Box","className","getClassNames","styles","replace","minWidth","height","flexShrink","undefined","flexGrow","Columns","space","align","alignY","collapseBelow","container","display","gap","flexDirection","mobile","tablet","desktop","alignItems","mapResponsiveProp","justifyContent"],"mappings":";;;;;;;;;MA4BMA,MAAM,gBAAGC,oBAAoB,CAAqB,SAASD,MAAT,OAEpDE,GAFoD;MACpD;IAAEC,KAAK,GAAG,MAAV;IAAkBC,QAAlB;IAA4BC;;MAA8BC;;EAG1D,oBACIC,aAAA,CAACC,GAAD,oCACQF,KADR;IAEIG,SAAS,EAAE,CACPJ,yBADO,EAEPK,aAAa,CAACC,MAAD,EAAS,aAAT,EAAwBR,KAAK,CAACS,OAAN,CAAc,GAAd,EAAmB,GAAnB,CAAxB,CAFN,CAFf;IAMIC,QAAQ,EAAE,CANd;IAOIC,MAAM,EAAC,MAPX;IAQIC,UAAU,EAAEZ,KAAK,KAAK,SAAV,GAAsB,CAAtB,GAA0Ba,SAR1C;IASIC,QAAQ,EAAEd,KAAK,KAAK,MAAV,GAAmB,CAAnB,GAAuB,CATrC;IAUID,GAAG,EAAEA;MAEJE,QAZL,CADJ;AAgBH,CApBkC;MAiC7Bc,OAAO,gBAAGjB,oBAAoB,CAAsB,SAASiB,OAAT,QAUtDhB,GAVsD;MACtD;IACIiB,KADJ;IAEIC,KAAK,GAAG,MAFZ;IAGIC,MAAM,GAAG,KAHb;IAIIC,aAJJ;IAKIlB,QALJ;IAMIC;;MACGC;;EAIP,oBACIC,aAAA,CAACC,GAAD,oCACQF,KADR;IAEIG,SAAS,EAAE,CACPJ,yBADO,EAEPM,MAAM,CAACY,SAFA,EAGPb,aAAa,CAACC,MAAD,EAAS,WAAT,EAAsBQ,KAAtB,CAHN,CAFf;IAOIK,OAAO,EAAC,MAPZ;IAQIC,GAAG,EAAEN,KART;IASIO,aAAa,EACTJ,aAAa,KAAK,SAAlB,GACM;MAAEK,MAAM,EAAE,QAAV;MAAoBC,MAAM,EAAE,QAA5B;MAAsCC,OAAO,EAAE;KADrD,GAEMP,aAAa,KAAK,QAAlB,GACA;MAAEK,MAAM,EAAE,QAAV;MAAoBC,MAAM,EAAE;KAD5B,GAEA,KAdd;IAgBIE,UAAU,EAAEC,iBAAiB,CAACV,MAAD,EAAUA,MAAD,IAClCA,MAAM,KAAK,KAAX,GAAmB,WAAnB,GAAiCA,MAAM,KAAK,QAAX,GAAsB,SAAtB,GAAkCA,MAD1C,CAhBjC;IAmBIW,cAAc,EAAED,iBAAiB,CAACX,KAAD,EAASA,KAAD,IACrCA,KAAK,KAAK,MAAV,GAAmB,WAAnB,GAAiCA,KAAK,KAAK,OAAV,GAAoB,SAApB,GAAgCA,KADpC,CAnBrC;IAsBIlB,GAAG,EAAEA;MAEJE,QAxBL,CADJ;AA4BH,CAxCmC;;;;"}

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

@@ -1,4 +1,4 @@
-var modules_67f2d07a = {"space-xsmall":"_6f59c771","column":"_91e05f0f","space-small":"_5a55af26","space-medium":"fa261310","space-large":"_6ebd4e46","space-xlarge":"_55ce4aea","space-xxlarge":"_04c9c3ac","tablet-space-xsmall":"ab76d8cd","tablet-space-small":"_14629bfb","tablet-space-medium":"_5b4e39ea","tablet-space-large":"ba270182","tablet-space-xlarge":"b96e7ec7","tablet-space-xxlarge":"d276612c","desktop-space-xsmall":"d7a73106","desktop-space-small":"_8f5e0e9e","desktop-space-medium":"_3a168411","desktop-space-large":"_0abcc12e","desktop-space-xlarge":"e0bafc60","desktop-space-xxlarge":"d2df9afd","columnWidth-auto":"b18d0b47","columnWidth-1-2":"_102a6b27","columnWidth-1-3":"_829872fe","columnWidth-2-3":"cf5aef9a","columnWidth-1-4":"_931bf714","columnWidth-3-4":"b0303130","columnWidth-1-5":"f6589a6f","columnWidth-2-5":"_2823aed9","columnWidth-3-5":"d00ba3bb","columnWidth-4-5":"_338f2d7c","tablet-tablet-space-xsmall":"_06582234"};
+var modules_67f2d07a = {"container":"eae3d34f","container-xsmall":"_9b4012c9","container-small":"e35e0320","container-medium":"_0703e67f","container-large":"_1cf15621","container-xlarge":"_1c7dff67","container-xxlarge":"_25bee9b6","columnWidth-content":"_4bb9987d","columnWidth-auto":"_9dd31975","columnWidth-1-2":"_38d11c0e","columnWidth-1-3":"_7ac225c6","columnWidth-2-3":"_9c340680","columnWidth-1-4":"_81cb99d2","columnWidth-3-4":"_10fd355f","columnWidth-1-5":"_3ee66520","columnWidth-2-5":"df1201a5","columnWidth-3-5":"f772e0b2","columnWidth-4-5":"_880cbbb1"};
 
 export default modules_67f2d07a;
 //# sourceMappingURL=columns.module.css.js.map

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

@@ -1,9 +1,8 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { createElement } from 'react';
 import { polymorphicComponent } from '../../utils/polymorphism.js';
-import { getClassNames, mapResponsiveProp } from '../responsive-props.js';
+import { mapResponsiveProp } from '../responsive-props.js';
 import { Box } from '../box/box.js';
-import styles from './inline.module.css.js';
 
 const _excluded = ["as", "space", "align", "alignY", "children", "exceptionallySetClassName"];
 const Inline = /*#__PURE__*/polymorphicComponent(function Inline(_ref, ref) {
@@ -21,7 +20,8 @@ const Inline = /*#__PURE__*/polymorphicComponent(function Inline(_ref, ref) {
     as: as,
     display: "flex",
     flexWrap: "wrap",
-    className: [exceptionallySetClassName, getClassNames(styles, 'space', space)],
+    gap: space,
+    className: exceptionallySetClassName,
     ref: ref,
     alignItems: mapResponsiveProp(alignY, alignY => alignY === 'top' ? 'flexStart' : alignY === 'bottom' ? 'flexEnd' : 'center'),
     justifyContent: mapResponsiveProp(align, align => align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : 'center')

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

@@ -1 +1 @@
-{"version":3,"file":"inline.js","sources":["../../../src/new-components/inline/inline.tsx"],"sourcesContent":["import * as React from 'react'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { getClassNames, mapResponsiveProp } from '../responsive-props'\nimport { Box } from '../box'\n\nimport type { ResponsiveProp } from '../responsive-props'\nimport type { Space } from '../common-types'\nimport type { ReusableBoxProps } from '../box'\n\nimport styles from './inline.module.css'\n\ntype InlineAlign = 'left' | 'center' | 'right'\n\ninterface InlineProps extends ReusableBoxProps {\n    space?: ResponsiveProp<Space>\n    align?: ResponsiveProp<InlineAlign>\n    alignY?: ResponsiveProp<'top' | 'center' | 'bottom'>\n}\n\nconst Inline = polymorphicComponent<'div', InlineProps>(function Inline(\n    { as, space, align = 'left', alignY = 'center', children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    return (\n        <Box\n            {...props}\n            as={as}\n            display=\"flex\"\n            flexWrap=\"wrap\"\n            className={[exceptionallySetClassName, getClassNames(styles, 'space', space)]}\n            ref={ref}\n            alignItems={mapResponsiveProp(alignY, (alignY) =>\n                alignY === 'top' ? 'flexStart' : alignY === 'bottom' ? 'flexEnd' : 'center',\n            )}\n            justifyContent={mapResponsiveProp(align, (align) =>\n                align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : 'center',\n            )}\n        >\n            {children}\n        </Box>\n    )\n})\n\nexport type { InlineProps, InlineAlign }\nexport { Inline }\n"],"names":["Inline","polymorphicComponent","ref","as","space","align","alignY","children","exceptionallySetClassName","props","React","Box","display","flexWrap","className","getClassNames","styles","alignItems","mapResponsiveProp","justifyContent"],"mappings":";;;;;;;;MAmBMA,MAAM,gBAAGC,oBAAoB,CAAqB,SAASD,MAAT,OAEpDE,GAFoD;MACpD;IAAEC,EAAF;IAAMC,KAAN;IAAaC,KAAK,GAAG,MAArB;IAA6BC,MAAM,GAAG,QAAtC;IAAgDC,QAAhD;IAA0DC;;MAA8BC;;EAGxF,oBACIC,aAAA,CAACC,GAAD,oCACQF,KADR;IAEIN,EAAE,EAAEA,EAFR;IAGIS,OAAO,EAAC,MAHZ;IAIIC,QAAQ,EAAC,MAJb;IAKIC,SAAS,EAAE,CAACN,yBAAD,EAA4BO,aAAa,CAACC,MAAD,EAAS,OAAT,EAAkBZ,KAAlB,CAAzC,CALf;IAMIF,GAAG,EAAEA,GANT;IAOIe,UAAU,EAAEC,iBAAiB,CAACZ,MAAD,EAAUA,MAAD,IAClCA,MAAM,KAAK,KAAX,GAAmB,WAAnB,GAAiCA,MAAM,KAAK,QAAX,GAAsB,SAAtB,GAAkC,QAD1C,CAPjC;IAUIa,cAAc,EAAED,iBAAiB,CAACb,KAAD,EAASA,KAAD,IACrCA,KAAK,KAAK,MAAV,GAAmB,WAAnB,GAAiCA,KAAK,KAAK,OAAV,GAAoB,SAApB,GAAgC,QADpC;MAIhCE,QAdL,CADJ;AAkBH,CAtBkC;;;;"}
+{"version":3,"file":"inline.js","sources":["../../../src/new-components/inline/inline.tsx"],"sourcesContent":["import * as React from 'react'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { mapResponsiveProp } from '../responsive-props'\nimport { Box } from '../box'\n\nimport type { ResponsiveProp } from '../responsive-props'\nimport type { Space } from '../common-types'\nimport type { ReusableBoxProps } from '../box'\n\ntype InlineAlign = 'left' | 'center' | 'right'\n\ninterface InlineProps extends ReusableBoxProps {\n    space?: ResponsiveProp<Space>\n    align?: ResponsiveProp<InlineAlign>\n    alignY?: ResponsiveProp<'top' | 'center' | 'bottom'>\n}\n\nconst Inline = polymorphicComponent<'div', InlineProps>(function Inline(\n    { as, space, align = 'left', alignY = 'center', children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    return (\n        <Box\n            {...props}\n            as={as}\n            display=\"flex\"\n            flexWrap=\"wrap\"\n            gap={space}\n            className={exceptionallySetClassName}\n            ref={ref}\n            alignItems={mapResponsiveProp(alignY, (alignY) =>\n                alignY === 'top' ? 'flexStart' : alignY === 'bottom' ? 'flexEnd' : 'center',\n            )}\n            justifyContent={mapResponsiveProp(align, (align) =>\n                align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : 'center',\n            )}\n        >\n            {children}\n        </Box>\n    )\n})\n\nexport type { InlineProps, InlineAlign }\nexport { Inline }\n"],"names":["Inline","polymorphicComponent","ref","as","space","align","alignY","children","exceptionallySetClassName","props","React","Box","display","flexWrap","gap","className","alignItems","mapResponsiveProp","justifyContent"],"mappings":";;;;;;;MAiBMA,MAAM,gBAAGC,oBAAoB,CAAqB,SAASD,MAAT,OAEpDE,GAFoD;MACpD;IAAEC,EAAF;IAAMC,KAAN;IAAaC,KAAK,GAAG,MAArB;IAA6BC,MAAM,GAAG,QAAtC;IAAgDC,QAAhD;IAA0DC;;MAA8BC;;EAGxF,oBACIC,aAAA,CAACC,GAAD,oCACQF,KADR;IAEIN,EAAE,EAAEA,EAFR;IAGIS,OAAO,EAAC,MAHZ;IAIIC,QAAQ,EAAC,MAJb;IAKIC,GAAG,EAAEV,KALT;IAMIW,SAAS,EAAEP,yBANf;IAOIN,GAAG,EAAEA,GAPT;IAQIc,UAAU,EAAEC,iBAAiB,CAACX,MAAD,EAAUA,MAAD,IAClCA,MAAM,KAAK,KAAX,GAAmB,WAAnB,GAAiCA,MAAM,KAAK,QAAX,GAAsB,SAAtB,GAAkC,QAD1C,CARjC;IAWIY,cAAc,EAAED,iBAAiB,CAACZ,KAAD,EAASA,KAAD,IACrCA,KAAK,KAAK,MAAV,GAAmB,WAAnB,GAAiCA,KAAK,KAAK,OAAV,GAAoB,SAApB,GAAgC,QADpC;MAIhCE,QAfL,CADJ;AAmBH,CAvBkC;;;;"}

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

@@ -101,7 +101,13 @@ function Modal(_ref) {
     "data-testid": "modal-overlay",
     "data-overlay": true,
     className: classNames(styles.overlay, styles[height], styles[width], exceptionallySetOverlayClassName),
-    onClick: hideOnInteractOutside ? handleBackdropClick : undefined,
+
+    /**
+     * We're using `onPointerDown` instead of `onClick` to prevent
+     * the modal from closing when the click starts inside the modal
+     * and ends on the backdrop.
+     */
+    onPointerDown: hideOnInteractOutside ? handleBackdropClick : undefined,
     ref: backdropRef
   }, /*#__PURE__*/createElement(FocusLock, {
     autoFocus: autoFocus,

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

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../src/new-components/modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport FocusLock from 'react-focus-lock'\nimport { hideOthers } from 'aria-hidden'\n\nimport { Dialog, DialogOptions, useDialogState } from 'ariakit/dialog'\nimport { Portal, PortalOptions } from 'ariakit/portal'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Column, Columns } from '../columns'\nimport { Inline } from '../inline'\nimport { Divider } from '../divider'\nimport { Box } from '../box'\nimport { Button, ButtonProps } from '../button'\n\nimport styles from './modal.module.css'\n\ntype ModalWidth = 'small' | 'medium' | 'large' | 'xlarge' | 'full'\ntype ModalHeightMode = 'expand' | 'fitContent'\n\n//\n// ModalContext\n//\n\ntype ModalContextValue = {\n    onDismiss?(this: void): void\n    height: ModalHeightMode\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({\n    onDismiss: undefined,\n    height: 'fitContent',\n})\n\n//\n// Modal container\n//\n\ntype DivProps = Omit<\n    React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,\n    'className' | 'children' | `aria-label` | `aria-labelledby`\n>\n\nexport type ModalProps = DivProps & {\n    /**\n     * The content of the modal.\n     */\n    children: React.ReactNode\n    /**\n     * Whether the modal is open and visible or not.\n     */\n    isOpen: boolean\n    /**\n     * Called when the user triggers closing the modal.\n     */\n    onDismiss?(): void\n    /**\n     * A descriptive setting for how wide the modal should aim to be, depending on how much space\n     * it has on screen.\n     * @default 'medium'\n     */\n    width?: ModalWidth\n    /**\n     * A descriptive setting for how tall the modal should aim to be.\n     *\n     * - 'expand': the modal aims to fill most of the available screen height, leaving only a small\n     *   padding above and below.\n     * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.\n     *\n     * In either case, if content does not fit, the content of the main body is set to scroll\n     * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the\n     * viewport boundaries.\n     *\n     * If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of\n     * the inner layout to ensure scroll, or whatever other strategy you may want.\n     */\n    height?: ModalHeightMode\n    /**\n     * Whether to set or not the focus initially to the first focusable element inside the modal.\n     */\n    autoFocus?: boolean\n    /**\n     * Controls if the modal is dismissed when pressing \"Escape\".\n     */\n    hideOnEscape?: DialogOptions['hideOnEscape']\n    /**\n     * Controls if the modal is dismissed when clicking outside the modal body, on the overlay.\n     */\n    hideOnInteractOutside?: DialogOptions['hideOnInteractOutside']\n    /**\n     * An escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n    /**\n     * An escape hatch in case you need to provide a custom class name to the overlay element.\n     */\n    exceptionallySetOverlayClassName?: string\n    /** Defines a string value that labels the current modal for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current modal for assistive technologies. */\n    'aria-labelledby'?: string\n    /**\n     * An HTML element or a memoized callback function that returns an HTML element to be used as\n     * the portal element. By default, the portal element will be a `div` element appended to the\n     * `document.body`.\n     *\n     * @default HTMLDivElement\n     *\n     * @example\n     * const [portal, setPortal] = useState(null);\n     * <Portal portalElement={portal} />;\n     * <div ref={setPortal} />;\n     *\n     * @example\n     * const getPortalElement = useCallback(() => {\n     *   const div = document.createElement(\"div\");\n     *   const portalRoot = document.getElementById(\"portal-root\");\n     *   portalRoot.appendChild(div);\n     *   return div;\n     * }, []);\n     * <Portal portalElement={getPortalElement} />;\n     */\n    portalElement?: PortalOptions['portalElement']\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n    return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/**\n * Renders a modal that sits on top of the rest of the content in the entire page.\n *\n * Follows the WAI-ARIA Dialog (Modal) Pattern.\n *\n * @see ModalHeader\n * @see ModalFooter\n * @see ModalBody\n */\nexport function Modal({\n    isOpen,\n    onDismiss,\n    height = 'fitContent',\n    width = 'medium',\n    exceptionallySetClassName,\n    exceptionallySetOverlayClassName,\n    autoFocus = true,\n    hideOnEscape = true,\n    hideOnInteractOutside = true,\n    children,\n    portalElement,\n    ...props\n}: ModalProps) {\n    const setVisible = React.useCallback(\n        (visible: boolean) => {\n            if (!visible) {\n                onDismiss?.()\n            }\n        },\n        [onDismiss],\n    )\n    const state = useDialogState({ visible: isOpen, setVisible })\n\n    const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n        onDismiss,\n        height,\n    ])\n\n    const portalRef = React.useRef<HTMLElement | null>(null)\n    const dialogRef = React.useRef<HTMLDivElement | null>(null)\n    const backdropRef = React.useRef<HTMLDivElement | null>(null)\n    const handleBackdropClick = React.useCallback(\n        (event: React.MouseEvent) => {\n            if (\n                // The focus lock element takes up the same space as the backdrop and is where the event bubbles up from,\n                // so instead of checking the backdrop as the event target, we need to make sure it's just above the dialog\n                !dialogRef.current?.contains(event.target as Node) &&\n                // Events fired from other portals will bubble up to the backdrop, even if it isn't a child in the DOM\n                backdropRef.current?.contains(event.target as Node)\n            ) {\n                event.stopPropagation()\n                onDismiss?.()\n            }\n        },\n        [onDismiss],\n    )\n\n    React.useLayoutEffect(\n        function disableAccessibilityTreeOutside() {\n            if (!isOpen || !portalRef.current) {\n                return\n            }\n\n            return hideOthers(portalRef.current)\n        },\n        [isOpen],\n    )\n\n    if (!isOpen) {\n        return null\n    }\n\n    return (\n        <Portal\n            // @ts-expect-error `portalRef` doesn't accept MutableRefObject initialized as null\n            portalRef={portalRef}\n            portalElement={portalElement}\n        >\n            <Box\n                data-testid=\"modal-overlay\"\n                data-overlay\n                className={classNames(\n                    styles.overlay,\n                    styles[height],\n                    styles[width],\n                    exceptionallySetOverlayClassName,\n                )}\n                onClick={hideOnInteractOutside ? handleBackdropClick : undefined}\n                ref={backdropRef}\n            >\n                <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n                    <Dialog\n                        {...props}\n                        ref={dialogRef}\n                        as={Box}\n                        state={state}\n                        hideOnEscape={hideOnEscape}\n                        preventBodyScroll\n                        borderRadius=\"full\"\n                        background=\"default\"\n                        display=\"flex\"\n                        flexDirection=\"column\"\n                        overflow=\"hidden\"\n                        height={height === 'expand' ? 'full' : undefined}\n                        flexGrow={height === 'expand' ? 1 : 0}\n                        className={[exceptionallySetClassName, styles.container]}\n                        // Disable focus lock as we set up our own using ReactFocusLock\n                        modal={false}\n                        autoFocus={false}\n                        autoFocusOnShow={false}\n                        autoFocusOnHide={false}\n                        // Disable portal and backdrop as we control their markup\n                        portal={false}\n                        backdrop={false}\n                        hideOnInteractOutside={false}\n                    >\n                        <ModalContext.Provider value={contextValue}>\n                            {children}\n                        </ModalContext.Provider>\n                    </Dialog>\n                </FocusLock>\n            </Box>\n        </Portal>\n    )\n}\n\n//\n// ModalCloseButton\n//\n\nexport type ModalCloseButtonProps = Omit<\n    ButtonProps,\n    | 'type'\n    | 'children'\n    | 'variant'\n    | 'icon'\n    | 'startIcon'\n    | 'endIcon'\n    | 'disabled'\n    | 'loading'\n    | 'tabIndex'\n    | 'width'\n    | 'align'\n> & {\n    /**\n     * The descriptive label of the button.\n     */\n    'aria-label': string\n}\n\n/**\n * The close button rendered by ModalHeader. Provided independently so that consumers can customize\n * the button's label.\n *\n * @see ModalHeader\n */\nexport function ModalCloseButton(props: ModalCloseButtonProps) {\n    const { onDismiss } = React.useContext(ModalContext)\n    const [includeInTabOrder, setIncludeInTabOrder] = React.useState(false)\n    const [isMounted, setIsMounted] = React.useState(false)\n\n    React.useEffect(\n        function skipAutoFocus() {\n            if (isMounted) {\n                setIncludeInTabOrder(true)\n            } else {\n                setIsMounted(true)\n            }\n        },\n        [isMounted],\n    )\n\n    return (\n        <Button\n            {...props}\n            variant=\"quaternary\"\n            onClick={onDismiss}\n            icon={<CloseIcon />}\n            tabIndex={includeInTabOrder ? 0 : -1}\n        />\n    )\n}\n\n//\n// ModalHeader\n//\n\nexport type ModalHeaderProps = DivProps & {\n    /**\n     * The content of the header.\n     */\n    children: React.ReactNode\n    /**\n     * Allows to provide a custom button element, or to omit the close button if set to false.\n     * @see ModalCloseButton\n     */\n    button?: React.ReactNode | boolean\n    /**\n     * Whether to render a divider line below the header.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal header area with an optional close button.\n *\n * @see Modal\n * @see ModalFooter\n * @see ModalBody\n */\nexport function ModalHeader({\n    children,\n    button = true,\n    withDivider = false,\n    exceptionallySetClassName,\n    ...props\n}: ModalHeaderProps) {\n    return (\n        <>\n            <Box\n                {...props}\n                as=\"header\"\n                paddingLeft=\"large\"\n                paddingRight={button === false || button === null ? 'large' : 'small'}\n                paddingY=\"small\"\n                className={exceptionallySetClassName}\n            >\n                <Columns space=\"large\" alignY=\"center\">\n                    <Column width=\"auto\">{children}</Column>\n                    {button === false || button === null ? (\n                        <div className={styles.headerContent} />\n                    ) : (\n                        <Column\n                            width=\"content\"\n                            exceptionallySetClassName={styles.buttonContainer}\n                            data-testid=\"button-container\"\n                        >\n                            {typeof button === 'boolean' ? (\n                                <ModalCloseButton aria-label=\"Close modal\" autoFocus={false} />\n                            ) : (\n                                button\n                            )}\n                        </Column>\n                    )}\n                </Columns>\n            </Box>\n            {withDivider ? <Divider /> : null}\n        </>\n    )\n}\n\n//\n// ModalBody\n//\n\nexport type ModalBodyProps = DivProps & {\n    /**\n     * The content of the modal body.\n     */\n    children: React.ReactNode\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders the body of a modal.\n *\n * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other\n * things, that the contet of the modal body expands or contracts depending on the modal height\n * setting or the size of the content. The body content also automatically scrolls when it's too\n * large to fit the available space.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalFooter\n */\nexport function ModalBody({ exceptionallySetClassName, children, ...props }: ModalBodyProps) {\n    const { height } = React.useContext(ModalContext)\n    return (\n        <Box\n            {...props}\n            className={exceptionallySetClassName}\n            flexGrow={height === 'expand' ? 1 : 0}\n            height={height === 'expand' ? 'full' : undefined}\n            overflow=\"auto\"\n        >\n            <Box padding=\"large\" paddingBottom=\"xxlarge\">\n                {children}\n            </Box>\n        </Box>\n    )\n}\n\n//\n// ModalFooter\n//\n\nexport type ModalFooterProps = DivProps & {\n    /**\n     * The contant of the modal footer.\n     */\n    children: React.ReactNode\n    /**\n     * Whether to render a divider line below the footer.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal footer area.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalBody\n */\nexport function ModalFooter({\n    exceptionallySetClassName,\n    withDivider = false,\n    ...props\n}: ModalFooterProps) {\n    return (\n        <>\n            {withDivider ? <Divider /> : null}\n            <Box as=\"footer\" {...props} className={exceptionallySetClassName} padding=\"large\" />\n        </>\n    )\n}\n\n//\n// ModalActions\n//\n\nexport type ModalActionsProps = ModalFooterProps\n\n/**\n * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).\n * @see ModalFooter\n */\nexport function ModalActions({ children, ...props }: ModalActionsProps) {\n    return (\n        <ModalFooter {...props}>\n            <Inline align=\"right\" space=\"large\">\n                {children}\n            </Inline>\n        </ModalFooter>\n    )\n}\n"],"names":["ModalContext","React","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","Modal","isOpen","width","exceptionallySetClassName","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement","props","setVisible","visible","state","useDialogState","contextValue","portalRef","dialogRef","backdropRef","handleBackdropClick","event","current","contains","target","stopPropagation","disableAccessibilityTreeOutside","hideOthers","Portal","Box","className","classNames","styles","overlay","onClick","ref","FocusLock","whiteList","returnFocus","Dialog","as","preventBodyScroll","borderRadius","background","display","flexDirection","overflow","flexGrow","container","modal","autoFocusOnShow","autoFocusOnHide","portal","backdrop","Provider","value","ModalCloseButton","includeInTabOrder","setIncludeInTabOrder","isMounted","setIsMounted","skipAutoFocus","Button","variant","icon","CloseIcon","tabIndex","ModalHeader","button","withDivider","paddingLeft","paddingRight","paddingY","Columns","space","alignY","Column","headerContent","buttonContainer","Divider","ModalBody","padding","paddingBottom","ModalFooter","ModalActions","Inline","align"],"mappings":"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"}
+{"version":3,"file":"modal.js","sources":["../../../src/new-components/modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport FocusLock from 'react-focus-lock'\nimport { hideOthers } from 'aria-hidden'\n\nimport { Dialog, DialogOptions, useDialogState } from 'ariakit/dialog'\nimport { Portal, PortalOptions } from 'ariakit/portal'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Column, Columns } from '../columns'\nimport { Inline } from '../inline'\nimport { Divider } from '../divider'\nimport { Box } from '../box'\nimport { Button, ButtonProps } from '../button'\n\nimport styles from './modal.module.css'\n\ntype ModalWidth = 'small' | 'medium' | 'large' | 'xlarge' | 'full'\ntype ModalHeightMode = 'expand' | 'fitContent'\n\n//\n// ModalContext\n//\n\ntype ModalContextValue = {\n    onDismiss?(this: void): void\n    height: ModalHeightMode\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({\n    onDismiss: undefined,\n    height: 'fitContent',\n})\n\n//\n// Modal container\n//\n\ntype DivProps = Omit<\n    React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,\n    'className' | 'children' | `aria-label` | `aria-labelledby`\n>\n\nexport type ModalProps = DivProps & {\n    /**\n     * The content of the modal.\n     */\n    children: React.ReactNode\n    /**\n     * Whether the modal is open and visible or not.\n     */\n    isOpen: boolean\n    /**\n     * Called when the user triggers closing the modal.\n     */\n    onDismiss?(): void\n    /**\n     * A descriptive setting for how wide the modal should aim to be, depending on how much space\n     * it has on screen.\n     * @default 'medium'\n     */\n    width?: ModalWidth\n    /**\n     * A descriptive setting for how tall the modal should aim to be.\n     *\n     * - 'expand': the modal aims to fill most of the available screen height, leaving only a small\n     *   padding above and below.\n     * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.\n     *\n     * In either case, if content does not fit, the content of the main body is set to scroll\n     * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the\n     * viewport boundaries.\n     *\n     * If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of\n     * the inner layout to ensure scroll, or whatever other strategy you may want.\n     */\n    height?: ModalHeightMode\n    /**\n     * Whether to set or not the focus initially to the first focusable element inside the modal.\n     */\n    autoFocus?: boolean\n    /**\n     * Controls if the modal is dismissed when pressing \"Escape\".\n     */\n    hideOnEscape?: DialogOptions['hideOnEscape']\n    /**\n     * Controls if the modal is dismissed when clicking outside the modal body, on the overlay.\n     */\n    hideOnInteractOutside?: DialogOptions['hideOnInteractOutside']\n    /**\n     * An escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n    /**\n     * An escape hatch in case you need to provide a custom class name to the overlay element.\n     */\n    exceptionallySetOverlayClassName?: string\n    /** Defines a string value that labels the current modal for assistive technologies. */\n    'aria-label'?: string\n    /** Identifies the element (or elements) that labels the current modal for assistive technologies. */\n    'aria-labelledby'?: string\n    /**\n     * An HTML element or a memoized callback function that returns an HTML element to be used as\n     * the portal element. By default, the portal element will be a `div` element appended to the\n     * `document.body`.\n     *\n     * @default HTMLDivElement\n     *\n     * @example\n     * const [portal, setPortal] = useState(null);\n     * <Portal portalElement={portal} />;\n     * <div ref={setPortal} />;\n     *\n     * @example\n     * const getPortalElement = useCallback(() => {\n     *   const div = document.createElement(\"div\");\n     *   const portalRoot = document.getElementById(\"portal-root\");\n     *   portalRoot.appendChild(div);\n     *   return div;\n     * }, []);\n     * <Portal portalElement={getPortalElement} />;\n     */\n    portalElement?: PortalOptions['portalElement']\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n    return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/**\n * Renders a modal that sits on top of the rest of the content in the entire page.\n *\n * Follows the WAI-ARIA Dialog (Modal) Pattern.\n *\n * @see ModalHeader\n * @see ModalFooter\n * @see ModalBody\n */\nexport function Modal({\n    isOpen,\n    onDismiss,\n    height = 'fitContent',\n    width = 'medium',\n    exceptionallySetClassName,\n    exceptionallySetOverlayClassName,\n    autoFocus = true,\n    hideOnEscape = true,\n    hideOnInteractOutside = true,\n    children,\n    portalElement,\n    ...props\n}: ModalProps) {\n    const setVisible = React.useCallback(\n        (visible: boolean) => {\n            if (!visible) {\n                onDismiss?.()\n            }\n        },\n        [onDismiss],\n    )\n    const state = useDialogState({ visible: isOpen, setVisible })\n\n    const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n        onDismiss,\n        height,\n    ])\n\n    const portalRef = React.useRef<HTMLElement | null>(null)\n    const dialogRef = React.useRef<HTMLDivElement | null>(null)\n    const backdropRef = React.useRef<HTMLDivElement | null>(null)\n    const handleBackdropClick = React.useCallback(\n        (event: React.MouseEvent) => {\n            if (\n                // The focus lock element takes up the same space as the backdrop and is where the event bubbles up from,\n                // so instead of checking the backdrop as the event target, we need to make sure it's just above the dialog\n                !dialogRef.current?.contains(event.target as Node) &&\n                // Events fired from other portals will bubble up to the backdrop, even if it isn't a child in the DOM\n                backdropRef.current?.contains(event.target as Node)\n            ) {\n                event.stopPropagation()\n                onDismiss?.()\n            }\n        },\n        [onDismiss],\n    )\n\n    React.useLayoutEffect(\n        function disableAccessibilityTreeOutside() {\n            if (!isOpen || !portalRef.current) {\n                return\n            }\n\n            return hideOthers(portalRef.current)\n        },\n        [isOpen],\n    )\n\n    if (!isOpen) {\n        return null\n    }\n\n    return (\n        <Portal\n            // @ts-expect-error `portalRef` doesn't accept MutableRefObject initialized as null\n            portalRef={portalRef}\n            portalElement={portalElement}\n        >\n            <Box\n                data-testid=\"modal-overlay\"\n                data-overlay\n                className={classNames(\n                    styles.overlay,\n                    styles[height],\n                    styles[width],\n                    exceptionallySetOverlayClassName,\n                )}\n                /**\n                 * We're using `onPointerDown` instead of `onClick` to prevent\n                 * the modal from closing when the click starts inside the modal\n                 * and ends on the backdrop.\n                 */\n                onPointerDown={hideOnInteractOutside ? handleBackdropClick : undefined}\n                ref={backdropRef}\n            >\n                <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n                    <Dialog\n                        {...props}\n                        ref={dialogRef}\n                        as={Box}\n                        state={state}\n                        hideOnEscape={hideOnEscape}\n                        preventBodyScroll\n                        borderRadius=\"full\"\n                        background=\"default\"\n                        display=\"flex\"\n                        flexDirection=\"column\"\n                        overflow=\"hidden\"\n                        height={height === 'expand' ? 'full' : undefined}\n                        flexGrow={height === 'expand' ? 1 : 0}\n                        className={[exceptionallySetClassName, styles.container]}\n                        // Disable focus lock as we set up our own using ReactFocusLock\n                        modal={false}\n                        autoFocus={false}\n                        autoFocusOnShow={false}\n                        autoFocusOnHide={false}\n                        // Disable portal and backdrop as we control their markup\n                        portal={false}\n                        backdrop={false}\n                        hideOnInteractOutside={false}\n                    >\n                        <ModalContext.Provider value={contextValue}>\n                            {children}\n                        </ModalContext.Provider>\n                    </Dialog>\n                </FocusLock>\n            </Box>\n        </Portal>\n    )\n}\n\n//\n// ModalCloseButton\n//\n\nexport type ModalCloseButtonProps = Omit<\n    ButtonProps,\n    | 'type'\n    | 'children'\n    | 'variant'\n    | 'icon'\n    | 'startIcon'\n    | 'endIcon'\n    | 'disabled'\n    | 'loading'\n    | 'tabIndex'\n    | 'width'\n    | 'align'\n> & {\n    /**\n     * The descriptive label of the button.\n     */\n    'aria-label': string\n}\n\n/**\n * The close button rendered by ModalHeader. Provided independently so that consumers can customize\n * the button's label.\n *\n * @see ModalHeader\n */\nexport function ModalCloseButton(props: ModalCloseButtonProps) {\n    const { onDismiss } = React.useContext(ModalContext)\n    const [includeInTabOrder, setIncludeInTabOrder] = React.useState(false)\n    const [isMounted, setIsMounted] = React.useState(false)\n\n    React.useEffect(\n        function skipAutoFocus() {\n            if (isMounted) {\n                setIncludeInTabOrder(true)\n            } else {\n                setIsMounted(true)\n            }\n        },\n        [isMounted],\n    )\n\n    return (\n        <Button\n            {...props}\n            variant=\"quaternary\"\n            onClick={onDismiss}\n            icon={<CloseIcon />}\n            tabIndex={includeInTabOrder ? 0 : -1}\n        />\n    )\n}\n\n//\n// ModalHeader\n//\n\nexport type ModalHeaderProps = DivProps & {\n    /**\n     * The content of the header.\n     */\n    children: React.ReactNode\n    /**\n     * Allows to provide a custom button element, or to omit the close button if set to false.\n     * @see ModalCloseButton\n     */\n    button?: React.ReactNode | boolean\n    /**\n     * Whether to render a divider line below the header.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal header area with an optional close button.\n *\n * @see Modal\n * @see ModalFooter\n * @see ModalBody\n */\nexport function ModalHeader({\n    children,\n    button = true,\n    withDivider = false,\n    exceptionallySetClassName,\n    ...props\n}: ModalHeaderProps) {\n    return (\n        <>\n            <Box\n                {...props}\n                as=\"header\"\n                paddingLeft=\"large\"\n                paddingRight={button === false || button === null ? 'large' : 'small'}\n                paddingY=\"small\"\n                className={exceptionallySetClassName}\n            >\n                <Columns space=\"large\" alignY=\"center\">\n                    <Column width=\"auto\">{children}</Column>\n                    {button === false || button === null ? (\n                        <div className={styles.headerContent} />\n                    ) : (\n                        <Column\n                            width=\"content\"\n                            exceptionallySetClassName={styles.buttonContainer}\n                            data-testid=\"button-container\"\n                        >\n                            {typeof button === 'boolean' ? (\n                                <ModalCloseButton aria-label=\"Close modal\" autoFocus={false} />\n                            ) : (\n                                button\n                            )}\n                        </Column>\n                    )}\n                </Columns>\n            </Box>\n            {withDivider ? <Divider /> : null}\n        </>\n    )\n}\n\n//\n// ModalBody\n//\n\nexport type ModalBodyProps = DivProps & {\n    /**\n     * The content of the modal body.\n     */\n    children: React.ReactNode\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders the body of a modal.\n *\n * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other\n * things, that the contet of the modal body expands or contracts depending on the modal height\n * setting or the size of the content. The body content also automatically scrolls when it's too\n * large to fit the available space.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalFooter\n */\nexport function ModalBody({ exceptionallySetClassName, children, ...props }: ModalBodyProps) {\n    const { height } = React.useContext(ModalContext)\n    return (\n        <Box\n            {...props}\n            className={exceptionallySetClassName}\n            flexGrow={height === 'expand' ? 1 : 0}\n            height={height === 'expand' ? 'full' : undefined}\n            overflow=\"auto\"\n        >\n            <Box padding=\"large\" paddingBottom=\"xxlarge\">\n                {children}\n            </Box>\n        </Box>\n    )\n}\n\n//\n// ModalFooter\n//\n\nexport type ModalFooterProps = DivProps & {\n    /**\n     * The contant of the modal footer.\n     */\n    children: React.ReactNode\n    /**\n     * Whether to render a divider line below the footer.\n     * @default false\n     */\n    withDivider?: boolean\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal footer area.\n *\n * @see Modal\n * @see ModalHeader\n * @see ModalBody\n */\nexport function ModalFooter({\n    exceptionallySetClassName,\n    withDivider = false,\n    ...props\n}: ModalFooterProps) {\n    return (\n        <>\n            {withDivider ? <Divider /> : null}\n            <Box as=\"footer\" {...props} className={exceptionallySetClassName} padding=\"large\" />\n        </>\n    )\n}\n\n//\n// ModalActions\n//\n\nexport type ModalActionsProps = ModalFooterProps\n\n/**\n * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).\n * @see ModalFooter\n */\nexport function ModalActions({ children, ...props }: ModalActionsProps) {\n    return (\n        <ModalFooter {...props}>\n            <Inline align=\"right\" space=\"large\">\n                {children}\n            </Inline>\n        </ModalFooter>\n    )\n}\n"],"names":["ModalContext","React","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","Modal","isOpen","width","exceptionallySetClassName","exceptionallySetOverlayClassName","autoFocus","hideOnEscape","hideOnInteractOutside","children","portalElement","props","setVisible","visible","state","useDialogState","contextValue","portalRef","dialogRef","backdropRef","handleBackdropClick","event","current","contains","target","stopPropagation","disableAccessibilityTreeOutside","hideOthers","Portal","Box","className","classNames","styles","overlay","onPointerDown","ref","FocusLock","whiteList","returnFocus","Dialog","as","preventBodyScroll","borderRadius","background","display","flexDirection","overflow","flexGrow","container","modal","autoFocusOnShow","autoFocusOnHide","portal","backdrop","Provider","value","ModalCloseButton","includeInTabOrder","setIncludeInTabOrder","isMounted","setIsMounted","skipAutoFocus","Button","variant","onClick","icon","CloseIcon","tabIndex","ModalHeader","button","withDivider","paddingLeft","paddingRight","paddingY","Columns","space","alignY","Column","headerContent","buttonContainer","Divider","ModalBody","padding","paddingBottom","ModalFooter","ModalActions","Inline","align"],"mappings":"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"}

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

@@ -1,33 +1,33 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { createElement, Children, Fragment } from 'react';
 import { polymorphicComponent } from '../../utils/polymorphism.js';
-import { mapResponsiveProp, getClassNames } from '../responsive-props.js';
+import { mapResponsiveProp } from '../responsive-props.js';
 import { Box } from '../box/box.js';
 import { Divider } from '../divider/divider.js';
 import flattenChildren from 'react-keyed-flatten-children';
-import styles from './stack.module.css.js';
 
-const _excluded = ["as", "space", "align", "dividers", "children", "exceptionallySetClassName"];
+const _excluded = ["as", "space", "align", "dividers", "width", "children", "exceptionallySetClassName"];
 const Stack = /*#__PURE__*/polymorphicComponent(function Stack(_ref, ref) {
   let {
     as,
     space,
-    align = 'start',
+    align,
     dividers = 'none',
+    width = 'full',
     children,
     exceptionallySetClassName
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  const alignProps = align === 'start' ? undefined : {
-    width: 'full',
-    flexDirection: 'column',
-    display: 'flex',
-    alignItems: mapResponsiveProp(align, align => align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center')
-  };
-  return /*#__PURE__*/createElement(Box, _objectSpread2(_objectSpread2(_objectSpread2({}, props), alignProps), {}, {
+  const alignItems = align === undefined ? undefined : mapResponsiveProp(align, align => align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center');
+  return /*#__PURE__*/createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
+    display: "flex",
+    flexDirection: "column",
+    width: width,
+    alignItems: alignItems,
+    gap: space,
     as: as,
-    className: [exceptionallySetClassName, getClassNames(styles, 'space', space)],
+    className: exceptionallySetClassName,
     ref: ref
   }), dividers !== 'none' ? Children.map(flattenChildren(children), (child, index) => index > 0 ? /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Divider, {
     weight: dividers

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

@@ -1 +1 @@
-{"version":3,"file":"stack.js","sources":["../../../src/new-components/stack/stack.tsx"],"sourcesContent":["import * as React from 'react'\nimport flattenChildren from 'react-keyed-flatten-children'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { getClassNames, mapResponsiveProp } from '../responsive-props'\nimport { Box } from '../box'\nimport { Divider } from '../divider'\n\nimport type { ResponsiveProp } from '../responsive-props'\nimport type { DividerWeight, Space } from '../common-types'\nimport type { BoxProps, ReusableBoxProps } from '../box'\n\nimport styles from './stack.module.css'\n\ntype Align = 'start' | 'center' | 'end'\n\ninterface StackProps extends ReusableBoxProps {\n    /** Space between items */\n    space?: ResponsiveProp<Space>\n    /** Align items horizontally */\n    align?: ResponsiveProp<Align>\n    /** The weight of the dividers to add. Defaults to 'none', which means no dividers are added */\n    dividers?: DividerWeight\n}\n\nconst Stack = polymorphicComponent<'div', StackProps>(function Stack(\n    {\n        as,\n        space,\n        align = 'start',\n        dividers = 'none',\n        children,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    const alignProps: BoxProps | undefined =\n        align === 'start'\n            ? undefined\n            : {\n                  width: 'full',\n                  flexDirection: 'column',\n                  display: 'flex',\n                  alignItems: mapResponsiveProp(align, (align) =>\n                      align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center',\n                  ),\n              }\n\n    return (\n        <Box\n            {...props}\n            {...alignProps}\n            as={as}\n            className={[exceptionallySetClassName, getClassNames(styles, 'space', space)]}\n            ref={ref}\n        >\n            {dividers !== 'none'\n                ? React.Children.map(flattenChildren(children), (child, index) =>\n                      index > 0 ? (\n                          <>\n                              <Divider weight={dividers} />\n                              {child}\n                          </>\n                      ) : (\n                          child\n                      ),\n                  )\n                : children}\n        </Box>\n    )\n})\n\nexport type { StackProps }\nexport { Stack }\n"],"names":["Stack","polymorphicComponent","ref","as","space","align","dividers","children","exceptionallySetClassName","props","alignProps","undefined","width","flexDirection","display","alignItems","mapResponsiveProp","React","Box","className","getClassNames","styles","map","flattenChildren","child","index","Divider","weight"],"mappings":";;;;;;;;;;MAwBMA,KAAK,gBAAGC,oBAAoB,CAAoB,SAASD,KAAT,OAUlDE,GAVkD;MAClD;IACIC,EADJ;IAEIC,KAFJ;IAGIC,KAAK,GAAG,OAHZ;IAIIC,QAAQ,GAAG,MAJf;IAKIC,QALJ;IAMIC;;MACGC;;EAIP,MAAMC,UAAU,GACZL,KAAK,KAAK,OAAV,GACMM,SADN,GAEM;IACIC,KAAK,EAAE,MADX;IAEIC,aAAa,EAAE,QAFnB;IAGIC,OAAO,EAAE,MAHb;IAIIC,UAAU,EAAEC,iBAAiB,CAACX,KAAD,EAASA,KAAD,IACjCA,KAAK,KAAK,OAAV,GAAoB,WAApB,GAAkCA,KAAK,KAAK,KAAV,GAAkB,SAAlB,GAA8B,QADvC;GAP3C;EAYA,oBACIY,aAAA,CAACC,GAAD,mDACQT,KADR,GAEQC,UAFR;IAGIP,EAAE,EAAEA,EAHR;IAIIgB,SAAS,EAAE,CAACX,yBAAD,EAA4BY,aAAa,CAACC,MAAD,EAAS,OAAT,EAAkBjB,KAAlB,CAAzC,CAJf;IAKIF,GAAG,EAAEA;MAEJI,QAAQ,KAAK,MAAb,GACKW,QAAA,CAAeK,GAAf,CAAmBC,eAAe,CAAChB,QAAD,CAAlC,EAA8C,CAACiB,KAAD,EAAQC,KAAR,KAC1CA,KAAK,GAAG,CAAR,gBACIR,aAAA,SAAA,MAAA,eACIA,aAAA,CAACS,OAAD;IAASC,MAAM,EAAErB;GAAjB,CADJ,EAEKkB,KAFL,CADJ,GAMIA,KAPR,CADL,GAWKjB,QAlBV,CADJ;AAsBH,CA9CiC;;;;"}
+{"version":3,"file":"stack.js","sources":["../../../src/new-components/stack/stack.tsx"],"sourcesContent":["import * as React from 'react'\nimport flattenChildren from 'react-keyed-flatten-children'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { mapResponsiveProp } from '../responsive-props'\nimport { Box } from '../box'\nimport { Divider } from '../divider'\n\nimport type { ResponsiveProp } from '../responsive-props'\nimport type { DividerWeight, Space } from '../common-types'\nimport type { BoxProps, ReusableBoxProps } from '../box'\n\ntype Align = 'start' | 'center' | 'end'\n\ninterface StackProps extends ReusableBoxProps {\n    /** Space between items */\n    space?: ResponsiveProp<Space>\n    /** Align items horizontally */\n    align?: ResponsiveProp<Align>\n    /** The weight of the dividers to add. Defaults to 'none', which means no dividers are added */\n    dividers?: DividerWeight\n}\n\nconst Stack = polymorphicComponent<'div', StackProps>(function Stack(\n    {\n        as,\n        space,\n        align,\n        dividers = 'none',\n        width = 'full',\n        children,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    const alignItems: BoxProps['alignItems'] =\n        align === undefined\n            ? undefined\n            : mapResponsiveProp(align, (align) =>\n                  align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center',\n              )\n\n    return (\n        <Box\n            {...props}\n            display=\"flex\"\n            flexDirection=\"column\"\n            width={width}\n            alignItems={alignItems}\n            gap={space}\n            as={as}\n            className={exceptionallySetClassName}\n            ref={ref}\n        >\n            {dividers !== 'none'\n                ? React.Children.map(flattenChildren(children), (child, index) =>\n                      index > 0 ? (\n                          <>\n                              <Divider weight={dividers} />\n                              {child}\n                          </>\n                      ) : (\n                          child\n                      ),\n                  )\n                : children}\n        </Box>\n    )\n})\n\nexport type { StackProps }\nexport { Stack }\n"],"names":["Stack","polymorphicComponent","ref","as","space","align","dividers","width","children","exceptionallySetClassName","props","alignItems","undefined","mapResponsiveProp","React","Box","display","flexDirection","gap","className","map","flattenChildren","child","index","Divider","weight"],"mappings":";;;;;;;;;MAsBMA,KAAK,gBAAGC,oBAAoB,CAAoB,SAASD,KAAT,OAWlDE,GAXkD;MAClD;IACIC,EADJ;IAEIC,KAFJ;IAGIC,KAHJ;IAIIC,QAAQ,GAAG,MAJf;IAKIC,KAAK,GAAG,MALZ;IAMIC,QANJ;IAOIC;;MACGC;;EAIP,MAAMC,UAAU,GACZN,KAAK,KAAKO,SAAV,GACMA,SADN,GAEMC,iBAAiB,CAACR,KAAD,EAASA,KAAD,IACrBA,KAAK,KAAK,OAAV,GAAoB,WAApB,GAAkCA,KAAK,KAAK,KAAV,GAAkB,SAAlB,GAA8B,QADnD,CAH3B;EAOA,oBACIS,aAAA,CAACC,GAAD,oCACQL,KADR;IAEIM,OAAO,EAAC,MAFZ;IAGIC,aAAa,EAAC,QAHlB;IAIIV,KAAK,EAAEA,KAJX;IAKII,UAAU,EAAEA,UALhB;IAMIO,GAAG,EAAEd,KANT;IAOID,EAAE,EAAEA,EAPR;IAQIgB,SAAS,EAAEV,yBARf;IASIP,GAAG,EAAEA;MAEJI,QAAQ,KAAK,MAAb,GACKQ,QAAA,CAAeM,GAAf,CAAmBC,eAAe,CAACb,QAAD,CAAlC,EAA8C,CAACc,KAAD,EAAQC,KAAR,KAC1CA,KAAK,GAAG,CAAR,gBACIT,aAAA,SAAA,MAAA,eACIA,aAAA,CAACU,OAAD;IAASC,MAAM,EAAEnB;GAAjB,CADJ,EAEKgB,KAFL,CADJ,GAMIA,KAPR,CADL,GAWKd,QAtBV,CADJ;AA0BH,CA9CiC;;;;"}

package/lib/new-components/box/box.d.ts

@@ -50,6 +50,7 @@ interface BoxProps extends WithEnhancedClassName, ReusableBoxProps, BoxMarginPro
     display?: ResponsiveProp<BoxDisplay>;
     flexDirection?: ResponsiveProp<BoxFlexDirection>;
     flexWrap?: BoxFlexWrap;
+    gap?: ResponsiveProp<Space | 'none'>;
     alignItems?: ResponsiveProp<BoxAlignItems>;
     alignSelf?: ResponsiveProp<BoxAlignSelf>;
     justifyContent?: ResponsiveProp<BoxJustifyContent>;

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

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

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

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

package/lib/new-components/box/gap.module.css.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={"gap-none":"_64ed24f4","gap-xsmall":"_2580a74b","gap-small":"c68f8bf6","gap-medium":"_43e5f8e9","gap-large":"_966b120f","gap-xlarge":"f957894c","gap-xxlarge":"_8cca104b","tablet-gap-none":"_5797cee2","tablet-gap-xsmall":"_9015672f","tablet-gap-small":"_7ec86eec","tablet-gap-medium":"_714d7179","tablet-gap-large":"ae1deb59","tablet-gap-xlarge":"e1cfce55","tablet-gap-xxlarge":"_168a8ff8","desktop-gap-none":"_43e2b619","desktop-gap-xsmall":"_0ea9bf88","desktop-gap-small":"d451307a","desktop-gap-medium":"bf93cf66","desktop-gap-large":"_1430cddf","desktop-gap-xlarge":"fa00c93e","desktop-gap-xxlarge":"_6f3aee54"};
+//# sourceMappingURL=gap.module.css.js.map

package/lib/new-components/box/gap.module.css.js.map

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

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

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

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

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