@doist/reactist 17.8.1 → 17.9.1

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":"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"}
+{"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/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/es/new-components/tabs/tabs.js

@@ -51,6 +51,7 @@ function Tabs({
  * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.
  */
 
+
 const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref, ref) {
   let {
     as,
@@ -109,7 +110,7 @@ function TabList(_ref2) {
       position: "relative",
       width: "maxContent"
     }, props), /*#__PURE__*/createElement(Box, {
-      className: classNames(styles.track, styles["track-" + space], styles["track-" + variant])
+      className: [styles.track, styles["track-" + variant]]
     }), /*#__PURE__*/createElement(Inline, {
       space: space
     }, children)))
@@ -119,6 +120,7 @@ function TabList(_ref2) {
  * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.
  */
 
+
 const TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref3, ref) {
   let {
     children,

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../../src/new-components/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport {\n    useTabState,\n    Tab as BaseTab,\n    TabList as BaseTabList,\n    TabPanel as BaseTabPanel,\n    TabState,\n} from 'ariakit/tab'\nimport { Inline } from '../inline'\nimport { usePrevious } from '../../hooks/use-previous'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport type { Space } from '../common-types'\n\nimport styles from './tabs.module.css'\nimport { Box } from '../box'\n\ntype TabsContextValue = {\n    tabState: TabState\n} & Required<Pick<TabsProps, 'variant'>>\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null)\n\ntype TabsProps = {\n    /** The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>` components */\n    children: React.ReactNode\n    /**\n     * Determines the look and feel of the tabs.\n     */\n    variant?: 'themed' | 'neutral'\n    /**\n     * The id of the selected tab. Assigning a value makes this a\n     * controlled component\n     */\n    selectedId?: string | null\n    /**\n     * The tab to initially select. This can be used if the component should not\n     * be a controlled component but needs to have a tab selected\n     */\n    defaultSelectedId?: string | null\n    /**\n     * Called with the tab id when a tab is selected\n     */\n    onSelectedIdChange?: (selectedId: string | null | undefined) => void\n}\n\n/**\n * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.\n */\nexport function Tabs({\n    children,\n    selectedId,\n    defaultSelectedId,\n    variant = 'neutral',\n    onSelectedIdChange,\n}: TabsProps): React.ReactElement {\n    const tabState = useTabState({ selectedId, setSelectedId: onSelectedIdChange })\n    const previousDefaultSelectedId = usePrevious(defaultSelectedId)\n    const { selectedId: actualSelectedId, select } = tabState\n\n    React.useEffect(\n        function selectDefaultTab() {\n            if (\n                !selectedId &&\n                defaultSelectedId !== previousDefaultSelectedId &&\n                defaultSelectedId !== actualSelectedId &&\n                defaultSelectedId !== undefined\n            ) {\n                select(defaultSelectedId)\n            }\n        },\n        [selectedId, defaultSelectedId, actualSelectedId, select, previousDefaultSelectedId],\n    )\n\n    const memoizedTabState = React.useMemo(\n        function memoizeTabState() {\n            return {\n                tabState,\n                variant,\n            }\n        },\n        [variant, tabState],\n    )\n\n    return <TabsContext.Provider value={memoizedTabState}>{children}</TabsContext.Provider>\n}\n\ntype TabProps = {\n    /** The content to render inside of the tab button */\n    children: React.ReactNode\n\n    /** The tab's identifier. This must match its corresponding `<TabPanel>`'s id */\n    id: string\n}\n\n/**\n * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.\n */\nexport const Tab = polymorphicComponent<'button', TabProps>(function Tab(\n    { as, children, id, exceptionallySetClassName, ...props },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { variant, tabState } = tabContextValue\n\n    return (\n        <BaseTab\n            {...props}\n            as={as}\n            className={classNames(exceptionallySetClassName, styles.tab, styles[`tab-${variant}`])}\n            id={id}\n            state={tabState}\n            ref={ref}\n        >\n            {children}\n        </BaseTab>\n    )\n})\n\ntype TabListProps = (\n    | {\n          /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */\n          'aria-label': string\n      }\n    | {\n          /**\n           * One or more element IDs used to label the tab list for assistive technologies. Required if\n           * `aria-label` is omitted.\n           */\n          'aria-labelledby': string\n      }\n    | {\n          /**\n           * For cases where multiple instances of the tab list exists, the duplicates may be marked as aria-hidden\n           */\n          'aria-hidden': boolean\n      }\n) & {\n    /**\n     * A list of `<Tab>` elements\n     */\n    children: React.ReactNode\n\n    /**\n     * Controls the spacing between tabs\n     */\n    space?: Space\n}\n\n/**\n * A component used to group `<Tab>` elements together.\n */\nexport function TabList({\n    children,\n    space = 'xsmall',\n    ...props\n}: TabListProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabState, variant } = tabContextValue\n\n    return (\n        // The extra <Box> prevents <Inline>'s negative margins from collapsing when used in a flex container\n        // which will render the track with the wrong height\n        <Box>\n            <BaseTabList\n                state={tabState}\n                as={Box}\n                position=\"relative\"\n                width=\"maxContent\"\n                {...props}\n            >\n                <Box\n                    className={classNames(\n                        styles.track,\n                        styles[`track-${space}`],\n                        styles[`track-${variant}`],\n                    )}\n                />\n                <Inline space={space}>{children}</Inline>\n            </BaseTabList>\n        </Box>\n    )\n}\n\ntype TabPanelProps = {\n    /** The content to be rendered inside the tab */\n    children?: React.ReactNode\n\n    /** The tabPanel's identifier. This must match its corresponding `<Tab>`'s id */\n    id: string\n\n    /**\n     * By default, the tab panel's content is always rendered even when they are not active. This behaviour can be changed to\n     * 'active', which renders only when the tab is active, and 'lazy', meaning while inactive tab panels will not be rendered\n     * initially, they will remain mounted once they are active until the entire Tabs tree is unmounted.\n     */\n    render?: 'always' | 'active' | 'lazy'\n}\n\n/**\n * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.\n */\nexport const TabPanel = polymorphicComponent<'div', TabPanelProps, 'omitClassName'>(\n    function TabPanel(\n        { children, id, as, render = 'always', ...props },\n        ref,\n    ): React.ReactElement | null {\n        const tabContextValue = React.useContext(TabsContext)\n        const [tabRendered, setTabRendered] = React.useState(false)\n        const tabIsActive = tabContextValue?.tabState.selectedId === id\n\n        React.useEffect(\n            function trackTabRenderedState() {\n                if (!tabRendered && tabIsActive) {\n                    setTabRendered(true)\n                }\n            },\n            [tabRendered, tabIsActive],\n        )\n\n        if (!tabContextValue) {\n            return null\n        }\n\n        const { tabState } = tabContextValue\n        const shouldRender =\n            render === 'always' ||\n            (render === 'active' && tabIsActive) ||\n            (render === 'lazy' && (tabIsActive || tabRendered))\n\n        return shouldRender ? (\n            <BaseTabPanel tabId={id} {...props} state={tabState} as={as} ref={ref}>\n                {children}\n            </BaseTabPanel>\n        ) : null\n    },\n)\n\ntype TabAwareSlotProps = {\n    /**\n     * Render prop used to provide the content to be rendered inside the slot. The render prop will be\n     * called with the current `selectedId`\n     */\n    children: (provided: { selectedId?: string | null }) => React.ReactElement | null\n}\n\n/**\n * Allows content to be rendered based on the current tab being selected while outside of the TabPanel\n * component. Can be placed freely within the main `<Tabs>` component.\n */\nexport function TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    return tabContextValue ? children({ selectedId: tabContextValue?.tabState.selectedId }) : null\n}\n"],"names":["TabsContext","React","Tabs","children","selectedId","defaultSelectedId","variant","onSelectedIdChange","tabState","useTabState","setSelectedId","previousDefaultSelectedId","usePrevious","actualSelectedId","select","selectDefaultTab","undefined","memoizedTabState","memoizeTabState","Provider","value","Tab","polymorphicComponent","ref","as","id","exceptionallySetClassName","props","tabContextValue","BaseTab","className","classNames","styles","tab","state","TabList","space","Box","BaseTabList","position","width","track","Inline","TabPanel","render","tabRendered","setTabRendered","tabIsActive","trackTabRenderedState","shouldRender","BaseTabPanel","tabId","TabAwareSlot"],"mappings":"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"}
+{"version":3,"file":"tabs.js","sources":["../../../src/new-components/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport {\n    useTabState,\n    Tab as BaseTab,\n    TabList as BaseTabList,\n    TabPanel as BaseTabPanel,\n    TabState,\n} from 'ariakit/tab'\nimport { Inline } from '../inline'\nimport { usePrevious } from '../../hooks/use-previous'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport type { Space } from '../common-types'\n\nimport styles from './tabs.module.css'\nimport { Box } from '../box'\n\ntype TabsContextValue = {\n    tabState: TabState\n} & Required<Pick<TabsProps, 'variant'>>\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null)\n\ntype TabsProps = {\n    /** The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>` components */\n    children: React.ReactNode\n    /**\n     * Determines the look and feel of the tabs.\n     */\n    variant?: 'themed' | 'neutral'\n    /**\n     * The id of the selected tab. Assigning a value makes this a\n     * controlled component\n     */\n    selectedId?: string | null\n    /**\n     * The tab to initially select. This can be used if the component should not\n     * be a controlled component but needs to have a tab selected\n     */\n    defaultSelectedId?: string | null\n    /**\n     * Called with the tab id when a tab is selected\n     */\n    onSelectedIdChange?: (selectedId: string | null | undefined) => void\n}\n\n/**\n * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.\n */\nfunction Tabs({\n    children,\n    selectedId,\n    defaultSelectedId,\n    variant = 'neutral',\n    onSelectedIdChange,\n}: TabsProps): React.ReactElement {\n    const tabState = useTabState({ selectedId, setSelectedId: onSelectedIdChange })\n    const previousDefaultSelectedId = usePrevious(defaultSelectedId)\n    const { selectedId: actualSelectedId, select } = tabState\n\n    React.useEffect(\n        function selectDefaultTab() {\n            if (\n                !selectedId &&\n                defaultSelectedId !== previousDefaultSelectedId &&\n                defaultSelectedId !== actualSelectedId &&\n                defaultSelectedId !== undefined\n            ) {\n                select(defaultSelectedId)\n            }\n        },\n        [selectedId, defaultSelectedId, actualSelectedId, select, previousDefaultSelectedId],\n    )\n\n    const memoizedTabState = React.useMemo(\n        function memoizeTabState() {\n            return {\n                tabState,\n                variant,\n            }\n        },\n        [variant, tabState],\n    )\n\n    return <TabsContext.Provider value={memoizedTabState}>{children}</TabsContext.Provider>\n}\n\ntype TabProps = {\n    /** The content to render inside of the tab button */\n    children: React.ReactNode\n\n    /** The tab's identifier. This must match its corresponding `<TabPanel>`'s id */\n    id: string\n}\n\n/**\n * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.\n */\nconst Tab = polymorphicComponent<'button', TabProps>(function Tab(\n    { as, children, id, exceptionallySetClassName, ...props },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { variant, tabState } = tabContextValue\n\n    return (\n        <BaseTab\n            {...props}\n            as={as}\n            className={classNames(exceptionallySetClassName, styles.tab, styles[`tab-${variant}`])}\n            id={id}\n            state={tabState}\n            ref={ref}\n        >\n            {children}\n        </BaseTab>\n    )\n})\n\ntype TabListProps = (\n    | {\n          /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */\n          'aria-label': string\n      }\n    | {\n          /**\n           * One or more element IDs used to label the tab list for assistive technologies. Required if\n           * `aria-label` is omitted.\n           */\n          'aria-labelledby': string\n      }\n    | {\n          /**\n           * For cases where multiple instances of the tab list exists, the duplicates may be marked as aria-hidden\n           */\n          'aria-hidden': boolean\n      }\n) & {\n    /**\n     * A list of `<Tab>` elements\n     */\n    children: React.ReactNode\n\n    /**\n     * Controls the spacing between tabs\n     */\n    space?: Space\n}\n\n/**\n * A component used to group `<Tab>` elements together.\n */\nfunction TabList({\n    children,\n    space = 'xsmall',\n    ...props\n}: TabListProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabState, variant } = tabContextValue\n\n    return (\n        // The extra <Box> prevents <Inline>'s negative margins from collapsing when used in a flex container\n        // which will render the track with the wrong height\n        <Box>\n            <BaseTabList\n                state={tabState}\n                as={Box}\n                position=\"relative\"\n                width=\"maxContent\"\n                {...props}\n            >\n                <Box className={[styles.track, styles[`track-${variant}`]]} />\n                <Inline space={space}>{children}</Inline>\n            </BaseTabList>\n        </Box>\n    )\n}\n\ntype TabPanelProps = {\n    /** The content to be rendered inside the tab */\n    children?: React.ReactNode\n\n    /** The tabPanel's identifier. This must match its corresponding `<Tab>`'s id */\n    id: string\n\n    /**\n     * By default, the tab panel's content is always rendered even when they are not active. This behaviour can be changed to\n     * 'active', which renders only when the tab is active, and 'lazy', meaning while inactive tab panels will not be rendered\n     * initially, they will remain mounted once they are active until the entire Tabs tree is unmounted.\n     */\n    render?: 'always' | 'active' | 'lazy'\n}\n\n/**\n * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.\n */\nconst TabPanel = polymorphicComponent<'div', TabPanelProps, 'omitClassName'>(function TabPanel(\n    { children, id, as, render = 'always', ...props },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    const [tabRendered, setTabRendered] = React.useState(false)\n    const tabIsActive = tabContextValue?.tabState.selectedId === id\n\n    React.useEffect(\n        function trackTabRenderedState() {\n            if (!tabRendered && tabIsActive) {\n                setTabRendered(true)\n            }\n        },\n        [tabRendered, tabIsActive],\n    )\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabState } = tabContextValue\n    const shouldRender =\n        render === 'always' ||\n        (render === 'active' && tabIsActive) ||\n        (render === 'lazy' && (tabIsActive || tabRendered))\n\n    return shouldRender ? (\n        <BaseTabPanel tabId={id} {...props} state={tabState} as={as} ref={ref}>\n            {children}\n        </BaseTabPanel>\n    ) : null\n})\n\ntype TabAwareSlotProps = {\n    /**\n     * Render prop used to provide the content to be rendered inside the slot. The render prop will be\n     * called with the current `selectedId`\n     */\n    children: (provided: { selectedId?: string | null }) => React.ReactElement | null\n}\n\n/**\n * Allows content to be rendered based on the current tab being selected while outside of the TabPanel\n * component. Can be placed freely within the main `<Tabs>` component.\n */\nfunction TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n    return tabContextValue ? children({ selectedId: tabContextValue?.tabState.selectedId }) : null\n}\n\nexport { Tab, Tabs, TabList, TabPanel, TabAwareSlot }\n"],"names":["TabsContext","React","Tabs","children","selectedId","defaultSelectedId","variant","onSelectedIdChange","tabState","useTabState","setSelectedId","previousDefaultSelectedId","usePrevious","actualSelectedId","select","selectDefaultTab","undefined","memoizedTabState","memoizeTabState","Provider","value","Tab","polymorphicComponent","ref","as","id","exceptionallySetClassName","props","tabContextValue","BaseTab","className","classNames","styles","tab","state","TabList","space","Box","BaseTabList","position","width","track","Inline","TabPanel","render","tabRendered","setTabRendered","tabIsActive","trackTabRenderedState","shouldRender","BaseTabPanel","tabId","TabAwareSlot"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-var modules_40c67f5b = {"tab":"a1064a3b","track":"_06f1b8a1","tab-neutral":"dabbec7d","tab-themed":"e6f5ae4e","track-neutral":"_43913ce5","track-themed":"_39bdfdde","track-xsmall":"_1c148f4e","track-small":"_2a370df5","track-medium":"_77430437","track-large":"_33db5352","track-xlarge":"_60bf9564","track-xxlarge":"_29a35080"};
+var modules_40c67f5b = {"tab":"e96bf360","track":"_430e252d","tab-neutral":"f631ccbe","tab-themed":"_6ba96acc","track-neutral":"ef4cd8d3","track-themed":"_344b3b10"};
 
 export default modules_40c67f5b;
 //# sourceMappingURL=tabs.module.css.js.map

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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={"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"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={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"};
 //# sourceMappingURL=columns.module.css.js.map

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),t=require("../../utils/polymorphism.js"),s=require("../responsive-props.js"),l=require("../box/box.js"),a=require("./inline.module.css.js");const i=["as","space","align","alignY","children","exceptionallySetClassName"];exports.Inline=t.polymorphicComponent((function(t,o){let{as:n,space:p,align:c="left",alignY:u="center",children:m,exceptionallySetClassName:f}=t,x=e.objectWithoutProperties(t,i);return r.createElement(l.Box,e.objectSpread2(e.objectSpread2({},x),{},{as:n,display:"flex",flexWrap:"wrap",className:[f,s.getClassNames(a.default,"space",p)],ref:o,alignItems:s.mapResponsiveProp(u,e=>"top"===e?"flexStart":"bottom"===e?"flexEnd":"center"),justifyContent:s.mapResponsiveProp(c,e=>"left"===e?"flexStart":"right"===e?"flexEnd":"center")}),m)}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),t=require("../../utils/polymorphism.js"),l=require("../responsive-props.js"),s=require("../box/box.js");const a=["as","space","align","alignY","children","exceptionallySetClassName"];exports.Inline=t.polymorphicComponent((function(t,o){let{as:i,space:p,align:n="left",alignY:c="center",children:u,exceptionallySetClassName:x}=t,f=e.objectWithoutProperties(t,a);return r.createElement(s.Box,e.objectSpread2(e.objectSpread2({},f),{},{as:i,display:"flex",flexWrap:"wrap",gap:p,className:x,ref:o,alignItems:l.mapResponsiveProp(c,e=>"top"===e?"flexStart":"bottom"===e?"flexEnd":"center"),justifyContent:l.mapResponsiveProp(n,e=>"left"===e?"flexStart":"right"===e?"flexEnd":"center")}),u)}));
 //# sourceMappingURL=inline.js.map