@doist/reactist 17.8.0 → 17.9.0

package/dist/reactist.cjs.development.js

@@ -204,7 +204,9 @@ var modules_131405ac = {"marginTop-xsmall":"c7813d79","marginTop-small":"d3449da
 
 var modules_89b7671c = {"minWidth-0":"_68ab48ca","minWidth-xsmall":"_6fa2b565","minWidth-small":"dd50fabd","minWidth-medium":"e7e2c808","minWidth-large":"_6abbe25e","minWidth-xlarge":"_54f479ac","maxWidth-xsmall":"_148492bc","maxWidth-small":"bd023b96","maxWidth-medium":"e102903f","maxWidth-large":"_0e8d76d7","maxWidth-xlarge":"_47a031d0","maxWidth-full":"cd4c8183","width-0":"_5f5959e8","width-full":"_8c75067a","width-auto":"_56a651f6","width-maxContent":"_26f87bb8","width-minContent":"_07a6ab44","width-fitContent":"a87016fa","width-xsmall":"_1a972e50","width-small":"c96d8261","width-medium":"f3829d42","width-large":"_2caef228","width-xlarge":"_069e1491"};
 
-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"];
+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"};
+
+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;
 
@@ -216,6 +218,7 @@ const Box = /*#__PURE__*/polymorphicComponent(function Box(_ref, ref) {
     flexWrap,
     flexGrow,
     flexShrink,
+    gap,
     alignItems,
     justifyContent,
     alignSelf,
@@ -260,13 +263,13 @@ const Box = /*#__PURE__*/polymorphicComponent(function Box(_ref, ref) {
     className: classNames(className, modules_54d944f2.box, display ? getClassNames(modules_54d944f2, 'display', display) : null, position !== 'static' ? getClassNames(modules_54d944f2, 'position', position) : null, minWidth != null ? getClassNames(modules_89b7671c, 'minWidth', String(minWidth)) : null, getClassNames(modules_89b7671c, 'maxWidth', maxWidth), getClassNames(modules_54d944f2, 'textAlign', textAlign), // padding
     getClassNames(modules_b537a8ee, 'paddingTop', resolvedPaddingTop), getClassNames(modules_b537a8ee, 'paddingRight', resolvedPaddingRight), getClassNames(modules_b537a8ee, 'paddingBottom', resolvedPaddingBottom), getClassNames(modules_b537a8ee, 'paddingLeft', resolvedPaddingLeft), // margin
     getClassNames(modules_131405ac, 'marginTop', resolvedMarginTop), getClassNames(modules_131405ac, 'marginRight', resolvedMarginRight), getClassNames(modules_131405ac, 'marginBottom', resolvedMarginBottom), getClassNames(modules_131405ac, 'marginLeft', resolvedMarginLeft), // flex props
-    omitFlex ? null : getClassNames(modules_54d944f2, 'flexDirection', flexDirection), omitFlex ? null : getClassNames(modules_54d944f2, 'flexWrap', flexWrap), omitFlex ? null : getClassNames(modules_54d944f2, 'alignItems', alignItems), omitFlex ? null : getClassNames(modules_54d944f2, 'justifyContent', justifyContent), alignSelf != null ? getClassNames(modules_54d944f2, 'alignSelf', alignSelf) : null, flexShrink != null ? getClassNames(modules_54d944f2, 'flexShrink', String(flexShrink)) : null, flexGrow != null ? getClassNames(modules_54d944f2, 'flexGrow', String(flexGrow)) : null, // other props
+    omitFlex ? null : getClassNames(modules_54d944f2, 'flexDirection', flexDirection), omitFlex ? null : getClassNames(modules_54d944f2, 'flexWrap', flexWrap), omitFlex ? null : getClassNames(modules_54d944f2, 'alignItems', alignItems), omitFlex ? null : getClassNames(modules_54d944f2, 'justifyContent', justifyContent), alignSelf != null ? getClassNames(modules_54d944f2, 'alignSelf', alignSelf) : null, flexShrink != null ? getClassNames(modules_54d944f2, 'flexShrink', String(flexShrink)) : null, flexGrow != null ? getClassNames(modules_54d944f2, 'flexGrow', String(flexGrow)) : null, gap ? getClassNames(modules_8b5c09cb, 'gap', gap) : null, // other props
     getClassNames(modules_54d944f2, 'overflow', overflow), width != null ? getClassNames(modules_89b7671c, 'width', String(width)) : null, getClassNames(modules_54d944f2, 'height', height), getClassNames(modules_54d944f2, 'bg', background), borderRadius !== 'none' ? getClassNames(modules_54d944f2, 'borderRadius', borderRadius) : null, border !== 'none' ? getClassNames(modules_54d944f2, 'border', border) : null) || undefined,
     ref
   }), children);
 });
 
-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"};
 
 const _excluded$1 = ["width", "children", "exceptionallySetClassName"],
       _excluded2 = ["space", "align", "alignY", "collapseBelow", "children", "exceptionallySetClassName"];
@@ -279,11 +282,11 @@ const Column = /*#__PURE__*/polymorphicComponent(function Column(_ref, ref) {
       props = _objectWithoutProperties(_ref, _excluded$1);
 
   return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
-    className: [exceptionallySetClassName, modules_67f2d07a.column, width !== 'content' ? getClassNames(modules_67f2d07a, 'columnWidth', width.replace('/', '-')) : null],
+    className: [exceptionallySetClassName, getClassNames(modules_67f2d07a, '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);
 });
@@ -299,8 +302,9 @@ const Columns = /*#__PURE__*/polymorphicComponent(function Columns(_ref2, ref) {
       props = _objectWithoutProperties(_ref2, _excluded2);
 
   return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
-    className: [exceptionallySetClassName, getClassNames(modules_67f2d07a, 'space', space)],
+    className: [exceptionallySetClassName, modules_67f2d07a.container, getClassNames(modules_67f2d07a, 'container', space)],
     display: "flex",
+    gap: space,
     flexDirection: collapseBelow === 'desktop' ? {
       mobile: 'column',
       tablet: 'column',
@@ -331,8 +335,6 @@ function Divider(_ref) {
   }, props));
 }
 
-var modules_da5d5c21 = {"space-xsmall":"_6b1279e0","space-small":"_0d82c42d","space-medium":"_556714e1","space-large":"e90b43fb","space-xlarge":"a9c34345","space-xxlarge":"aa102efe","tablet-space-xsmall":"_34d16157","tablet-space-small":"c7e0e54f","tablet-space-medium":"_7f2a4e4b","tablet-space-large":"ae256487","tablet-space-xlarge":"e88be0f7","tablet-space-xxlarge":"dc7bcb18","desktop-space-xsmall":"_853f3012","desktop-space-small":"_3bfaf758","desktop-space-medium":"_36462a93","desktop-space-large":"e73081b7","desktop-space-xlarge":"e22ec9dd","desktop-space-xxlarge":"_4a20bd12"};
-
 const _excluded$3 = ["as", "space", "align", "alignY", "children", "exceptionallySetClassName"];
 const Inline = /*#__PURE__*/polymorphicComponent(function Inline(_ref, ref) {
   let {
@@ -349,36 +351,36 @@ const Inline = /*#__PURE__*/polymorphicComponent(function Inline(_ref, ref) {
     as: as,
     display: "flex",
     flexWrap: "wrap",
-    className: [exceptionallySetClassName, getClassNames(modules_da5d5c21, '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')
   }), children);
 });
 
-var modules_3af3b7ac = {"space-xsmall":"_7b475ead","space-small":"_5641699f","space-medium":"_1a1c63e4","space-large":"_560f80a0","space-xlarge":"_84ffebbc","space-xxlarge":"b60a65cb","tablet-space-xsmall":"d808f5c3","tablet-space-small":"a51c76b3","tablet-space-medium":"_7185a7aa","tablet-space-large":"af82e610","tablet-space-xlarge":"_88b4ff46","tablet-space-xxlarge":"_9de15321","desktop-space-xsmall":"_6fb32d20","desktop-space-small":"_07ee315a","desktop-space-medium":"a270d7ec","desktop-space-large":"ea6ebb29","desktop-space-xlarge":"_35b36178","desktop-space-xxlarge":"_56c7dc23"};
-
-const _excluded$4 = ["as", "space", "align", "dividers", "children", "exceptionallySetClassName"];
+const _excluded$4 = ["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$4);
 
-  const alignProps = align === 'start' ? undefined : {
-    width: 'full',
-    flexDirection: 'column',
-    display: 'flex',
-    alignItems: mapResponsiveProp(align, align => align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center')
-  };
-  return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2(_objectSpread2({}, props), alignProps), {}, {
+  const alignItems = align === undefined ? undefined : mapResponsiveProp(align, align => align === 'start' ? 'flexStart' : align === 'end' ? 'flexEnd' : 'center');
+  return /*#__PURE__*/React.createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
+    display: "flex",
+    flexDirection: "column",
+    width: width,
+    alignItems: alignItems,
+    gap: space,
     as: as,
-    className: [exceptionallySetClassName, getClassNames(modules_3af3b7ac, 'space', space)],
+    className: exceptionallySetClassName,
     ref: ref
   }), dividers !== 'none' ? React.Children.map(flattenChildren(children), (child, index) => index > 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
     weight: dividers
@@ -2173,7 +2175,13 @@ function Modal(_ref) {
     "data-testid": "modal-overlay",
     "data-overlay": true,
     className: classNames(modules_8f59d13b.overlay, modules_8f59d13b[height], modules_8f59d13b[width], exceptionallySetOverlayClassName),
-    onClick: hideOnInteractOutside ? handleBackdropClick : undefined,
+
+    /**
+     * We're using `onPointerDown` instead of `onClick` to prevent
+     * the modal from closing when the click starts inside the modal
+     * and ends on the backdrop.
+     */
+    onPointerDown: hideOnInteractOutside ? handleBackdropClick : undefined,
     ref: backdropRef
   }, /*#__PURE__*/React.createElement(FocusLock, {
     autoFocus: autoFocus,