@alfalab/core-components 44.5.1-beta.2 → 44.5.1-beta.4

package/space/cssm/Component.js

@@ -2,14 +2,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
-var classNames = require('classnames');
+var cn = require('classnames');
 var Item = require('./Item.js');
 var styles = require('./index.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var SpaceSizes = {
@@ -22,32 +22,37 @@ var getNumberSize = function (size) { return (typeof size === 'string' ? SpaceSi
  * Позаимствовано с благодарностью из Ant Design
  */
 var Space = React.forwardRef(function (props, ref) {
-    var _a, _b;
-    var children = props.children, className = props.className, _c = props.align, align = _c === void 0 ? 'start' : _c, _d = props.direction, direction = _d === void 0 ? 'vertical' : _d, _e = props.size, size = _e === void 0 ? 'm' : _e, _f = props.wrap, wrap = _f === void 0 ? false : _f, _g = props.divider, divider = _g === void 0 ? false : _g, _h = props.fullWidth, fullWidth = _h === void 0 ? false : _h, dataTestId = props.dataTestId;
-    var _j = React__default.default.useMemo(function () {
+    var _a, _b, _c;
+    var children = props.children, className = props.className, _d = props.align, align = _d === void 0 ? 'start' : _d, _e = props.direction, direction = _e === void 0 ? 'vertical' : _e, _f = props.size, size = _f === void 0 ? 'm' : _f, _g = props.wrap, wrap = _g === void 0 ? false : _g, _h = props.divider, divider = _h === void 0 ? false : _h, _j = props.fullWidth, fullWidth = _j === void 0 ? false : _j, dataTestId = props.dataTestId, _k = props.useCssGaps, useCssGaps = _k === void 0 ? false : _k;
+    var _l = React__default.default.useMemo(function () {
         return (Array.isArray(size) ? size : [size, size]).map(function (item) {
             return getNumberSize(item);
         });
-    }, [size]), horizontalSize = _j[0], verticalSize = _j[1];
+    }, [size]), horizontalSize = _l[0], verticalSize = _l[1];
     var childNodes = React.Children.toArray(children);
     if (childNodes.length === 0) {
         return null;
     }
     var directionClassName = styles__default.default[direction];
     var alignClassName = styles__default.default[align];
-    var containerClassName = classNames__default.default(styles__default.default.spaceContainer, directionClassName, (_a = {},
+    var containerClassName = cn__default.default(styles__default.default.spaceContainer, directionClassName, (_a = {},
         _a[alignClassName] = align,
         _a[styles__default.default.spaceContainerFullWidth] = fullWidth,
         _a), className);
-    var itemClassName = classNames__default.default(styles__default.default.spaceItem, (_b = {},
+    var itemClassName = cn__default.default(styles__default.default.spaceItem, (_b = {},
         _b[styles__default.default.spaceItemFullWidth] = fullWidth,
         _b));
     var nodes = childNodes.map(function (child, i) { return (
     /* eslint-disable react/no-array-index-key */
-    React__default.default.createElement(Item, { className: itemClassName, key: "".concat(itemClassName, "-").concat(i), direction: direction, horizontalSize: horizontalSize, verticalSize: verticalSize, length: childNodes.length, index: i, wrap: wrap, divider: divider }, child)
+    React__default.default.createElement(Item, { className: itemClassName, dividerClassName: styles__default.default.divider, key: "".concat(itemClassName, "-").concat(i), direction: direction, horizontalSize: horizontalSize, verticalSize: verticalSize, length: childNodes.length, index: i, wrap: wrap, divider: divider, useCssGaps: useCssGaps }, child)
     /* eslint-enable */
     ); });
-    return (React__default.default.createElement("div", { "data-test-id": dataTestId, className: containerClassName, style: tslib.__assign({}, (wrap && { flexWrap: 'wrap', marginBottom: -verticalSize })), ref: ref }, nodes));
+    return (React__default.default.createElement("div", { "data-test-id": dataTestId, className: cn__default.default(containerClassName, (_c = {},
+            _c[styles__default.default.wrap] = useCssGaps && wrap,
+            _c)), style: tslib.__assign(tslib.__assign({}, (useCssGaps && {
+            columnGap: horizontalSize / (divider ? 2 : 1),
+            rowGap: verticalSize / (divider ? 2 : 1),
+        })), (wrap && !useCssGaps && { flexWrap: 'wrap', marginBottom: -verticalSize })), ref: ref }, nodes));
 });
 
 exports.Space = Space;

package/space/cssm/Item.d.ts

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { Direction } from "./utils";
 interface ItemProps {
     className: string;
+    dividerClassName: string;
     horizontalSize: number;
     verticalSize: number;
     length: number;
@@ -11,6 +12,7 @@ interface ItemProps {
     direction?: Direction;
     divider?: string | React.ReactNode;
     wrap?: boolean;
+    useCssGaps: boolean;
 }
 declare const Item: (props: ItemProps) => React.JSX.Element | null;
 export { Item as default, ItemProps };

package/space/cssm/Item.js

@@ -22,22 +22,24 @@ function _interopNamespaceCompat(e) {
 var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
 
 var Item = function (props) {
-    var className = props.className, horizontalSize = props.horizontalSize, verticalSize = props.verticalSize, length = props.length, direction = props.direction, index = props.index, children = props.children, divider = props.divider, wrap = props.wrap;
-    var style = {};
-    if (direction === 'vertical') {
-        if (index < length - 1) {
-            style = { marginBottom: horizontalSize / (divider ? 2 : 1) };
+    var className = props.className, dividerClassName = props.dividerClassName, horizontalSize = props.horizontalSize, verticalSize = props.verticalSize, length = props.length, direction = props.direction, index = props.index, children = props.children, divider = props.divider, wrap = props.wrap, useCssGaps = props.useCssGaps;
+    var style;
+    if (!useCssGaps) {
+        if (direction === 'vertical') {
+            if (index < length - 1) {
+                style = { marginBottom: horizontalSize / (divider ? 2 : 1) };
+            }
+        }
+        else {
+            style = tslib.__assign(tslib.__assign({}, (index < length - 1 && { marginRight: horizontalSize / (divider ? 2 : 1) })), (wrap && { paddingBottom: verticalSize }));
         }
-    }
-    else {
-        style = tslib.__assign(tslib.__assign({}, (index < length - 1 && { marginRight: horizontalSize / (divider ? 2 : 1) })), (wrap && { paddingBottom: verticalSize }));
     }
     if (children === null || children === undefined) {
         return null;
     }
     return (React__namespace.createElement(React__namespace.Fragment, null,
         React__namespace.createElement("div", { className: className, style: style }, children),
-        index < length - 1 && divider && (React__namespace.createElement("span", { style: tslib.__assign({ width: '100%' }, style) }, divider))));
+        index < length - 1 && divider && (React__namespace.createElement("span", { className: dividerClassName, style: style }, divider))));
 };
 
 module.exports = Item;

package/space/cssm/index.js

@@ -1,11 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Component = require('./Component.js');
-require('tslib');
-require('react');
-require('classnames');
-require('./Item.js');
-require('./index.module.css');
 
 
 

package/space/cssm/index.module.css

@@ -29,4 +29,8 @@
     width: 100%;
 } .spaceItem:empty {
     display: none;
+} .wrap {
+    flex-wrap: wrap;
+} .divider {
+    width: 100%;
 }

package/space/esm/Component.d.ts

@@ -39,6 +39,11 @@ type SpaceProps = {
      * Растягивать ли компонент на всю ширину
      */
     fullWidth?: boolean;
+    /**
+     * Использовать css gap
+     * @description Поддержка ограничена. см https://caniuse.com/?search=gap
+     */
+    useCssGaps?: boolean;
 };
 /**
  * Позаимствовано с благодарностью из Ant Design

package/space/esm/Component.js

@@ -1,9 +1,9 @@
 import { __assign } from 'tslib';
 import React__default, { forwardRef, Children } from 'react';
-import classNames from 'classnames';
+import cn from 'classnames';
 import Item from './Item.js';
 
-var styles = {"spaceContainer":"space__spaceContainer_yftco","spaceContainerFullWidth":"space__spaceContainerFullWidth_yftco","vertical":"space__vertical_yftco","center":"space__center_yftco","start":"space__start_yftco","end":"space__end_yftco","spaceItemFullWidth":"space__spaceItemFullWidth_yftco","spaceItem":"space__spaceItem_yftco"};
+var styles = {"spaceContainer":"space__spaceContainer_qffi4","spaceContainerFullWidth":"space__spaceContainerFullWidth_qffi4","vertical":"space__vertical_qffi4","center":"space__center_qffi4","start":"space__start_qffi4","end":"space__end_qffi4","spaceItemFullWidth":"space__spaceItemFullWidth_qffi4","spaceItem":"space__spaceItem_qffi4","wrap":"space__wrap_qffi4","divider":"space__divider_qffi4"};
 require('./index.css');
 
 var SpaceSizes = {
@@ -16,32 +16,37 @@ var getNumberSize = function (size) { return (typeof size === 'string' ? SpaceSi
  * Позаимствовано с благодарностью из Ant Design
  */
 var Space = forwardRef(function (props, ref) {
-    var _a, _b;
-    var children = props.children, className = props.className, _c = props.align, align = _c === void 0 ? 'start' : _c, _d = props.direction, direction = _d === void 0 ? 'vertical' : _d, _e = props.size, size = _e === void 0 ? 'm' : _e, _f = props.wrap, wrap = _f === void 0 ? false : _f, _g = props.divider, divider = _g === void 0 ? false : _g, _h = props.fullWidth, fullWidth = _h === void 0 ? false : _h, dataTestId = props.dataTestId;
-    var _j = React__default.useMemo(function () {
+    var _a, _b, _c;
+    var children = props.children, className = props.className, _d = props.align, align = _d === void 0 ? 'start' : _d, _e = props.direction, direction = _e === void 0 ? 'vertical' : _e, _f = props.size, size = _f === void 0 ? 'm' : _f, _g = props.wrap, wrap = _g === void 0 ? false : _g, _h = props.divider, divider = _h === void 0 ? false : _h, _j = props.fullWidth, fullWidth = _j === void 0 ? false : _j, dataTestId = props.dataTestId, _k = props.useCssGaps, useCssGaps = _k === void 0 ? false : _k;
+    var _l = React__default.useMemo(function () {
         return (Array.isArray(size) ? size : [size, size]).map(function (item) {
             return getNumberSize(item);
         });
-    }, [size]), horizontalSize = _j[0], verticalSize = _j[1];
+    }, [size]), horizontalSize = _l[0], verticalSize = _l[1];
     var childNodes = Children.toArray(children);
     if (childNodes.length === 0) {
         return null;
     }
     var directionClassName = styles[direction];
     var alignClassName = styles[align];
-    var containerClassName = classNames(styles.spaceContainer, directionClassName, (_a = {},
+    var containerClassName = cn(styles.spaceContainer, directionClassName, (_a = {},
         _a[alignClassName] = align,
         _a[styles.spaceContainerFullWidth] = fullWidth,
         _a), className);
-    var itemClassName = classNames(styles.spaceItem, (_b = {},
+    var itemClassName = cn(styles.spaceItem, (_b = {},
         _b[styles.spaceItemFullWidth] = fullWidth,
         _b));
     var nodes = childNodes.map(function (child, i) { return (
     /* eslint-disable react/no-array-index-key */
-    React__default.createElement(Item, { className: itemClassName, key: "".concat(itemClassName, "-").concat(i), direction: direction, horizontalSize: horizontalSize, verticalSize: verticalSize, length: childNodes.length, index: i, wrap: wrap, divider: divider }, child)
+    React__default.createElement(Item, { className: itemClassName, dividerClassName: styles.divider, key: "".concat(itemClassName, "-").concat(i), direction: direction, horizontalSize: horizontalSize, verticalSize: verticalSize, length: childNodes.length, index: i, wrap: wrap, divider: divider, useCssGaps: useCssGaps }, child)
     /* eslint-enable */
     ); });
-    return (React__default.createElement("div", { "data-test-id": dataTestId, className: containerClassName, style: __assign({}, (wrap && { flexWrap: 'wrap', marginBottom: -verticalSize })), ref: ref }, nodes));
+    return (React__default.createElement("div", { "data-test-id": dataTestId, className: cn(containerClassName, (_c = {},
+            _c[styles.wrap] = useCssGaps && wrap,
+            _c)), style: __assign(__assign({}, (useCssGaps && {
+            columnGap: horizontalSize / (divider ? 2 : 1),
+            rowGap: verticalSize / (divider ? 2 : 1),
+        })), (wrap && !useCssGaps && { flexWrap: 'wrap', marginBottom: -verticalSize })), ref: ref }, nodes));
 });
 
 export { Space };

package/space/esm/Item.d.ts

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { Direction } from "./utils";
 interface ItemProps {
     className: string;
+    dividerClassName: string;
     horizontalSize: number;
     verticalSize: number;
     length: number;
@@ -11,6 +12,7 @@ interface ItemProps {
     direction?: Direction;
     divider?: string | React.ReactNode;
     wrap?: boolean;
+    useCssGaps: boolean;
 }
 declare const Item: (props: ItemProps) => React.JSX.Element | null;
 export { Item as default, ItemProps };

package/space/esm/Item.js

@@ -2,22 +2,24 @@ import { __assign } from 'tslib';
 import * as React from 'react';
 
 var Item = function (props) {
-    var className = props.className, horizontalSize = props.horizontalSize, verticalSize = props.verticalSize, length = props.length, direction = props.direction, index = props.index, children = props.children, divider = props.divider, wrap = props.wrap;
-    var style = {};
-    if (direction === 'vertical') {
-        if (index < length - 1) {
-            style = { marginBottom: horizontalSize / (divider ? 2 : 1) };
+    var className = props.className, dividerClassName = props.dividerClassName, horizontalSize = props.horizontalSize, verticalSize = props.verticalSize, length = props.length, direction = props.direction, index = props.index, children = props.children, divider = props.divider, wrap = props.wrap, useCssGaps = props.useCssGaps;
+    var style;
+    if (!useCssGaps) {
+        if (direction === 'vertical') {
+            if (index < length - 1) {
+                style = { marginBottom: horizontalSize / (divider ? 2 : 1) };
+            }
+        }
+        else {
+            style = __assign(__assign({}, (index < length - 1 && { marginRight: horizontalSize / (divider ? 2 : 1) })), (wrap && { paddingBottom: verticalSize }));
         }
-    }
-    else {
-        style = __assign(__assign({}, (index < length - 1 && { marginRight: horizontalSize / (divider ? 2 : 1) })), (wrap && { paddingBottom: verticalSize }));
     }
     if (children === null || children === undefined) {
         return null;
     }
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: className, style: style }, children),
-        index < length - 1 && divider && (React.createElement("span", { style: __assign({ width: '100%' }, style) }, divider))));
+        index < length - 1 && divider && (React.createElement("span", { className: dividerClassName, style: style }, divider))));
 };
 
 export { Item as default };

package/space/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: vfa51 */
+/* hash: 17bze */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -14,20 +14,24 @@
 } :root {
 } :root {
 } :root {
-} .space__spaceContainer_yftco {
+} .space__spaceContainer_qffi4 {
     display: inline-flex;
-} .space__spaceContainerFullWidth_yftco {
+} .space__spaceContainerFullWidth_qffi4 {
     width: 100%;
-} .space__vertical_yftco {
+} .space__vertical_qffi4 {
     flex-direction: column;
-} .space__center_yftco {
+} .space__center_qffi4 {
     align-items: center;
-} .space__start_yftco {
+} .space__start_qffi4 {
     align-items: flex-start;
-} .space__end_yftco {
+} .space__end_qffi4 {
     align-items: flex-end;
-} .space__spaceItemFullWidth_yftco {
+} .space__spaceItemFullWidth_qffi4 {
     width: 100%;
-} .space__spaceItem_yftco:empty {
+} .space__spaceItem_qffi4:empty {
     display: none;
+} .space__wrap_qffi4 {
+    flex-wrap: wrap;
+} .space__divider_qffi4 {
+    width: 100%;
 }

package/space/index.css

@@ -1,4 +1,4 @@
-/* hash: vfa51 */
+/* hash: 17bze */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -14,20 +14,24 @@
 } :root {
 } :root {
 } :root {
-} .space__spaceContainer_yftco {
+} .space__spaceContainer_qffi4 {
     display: inline-flex;
-} .space__spaceContainerFullWidth_yftco {
+} .space__spaceContainerFullWidth_qffi4 {
     width: 100%;
-} .space__vertical_yftco {
+} .space__vertical_qffi4 {
     flex-direction: column;
-} .space__center_yftco {
+} .space__center_qffi4 {
     align-items: center;
-} .space__start_yftco {
+} .space__start_qffi4 {
     align-items: flex-start;
-} .space__end_yftco {
+} .space__end_qffi4 {
     align-items: flex-end;
-} .space__spaceItemFullWidth_yftco {
+} .space__spaceItemFullWidth_qffi4 {
     width: 100%;
-} .space__spaceItem_yftco:empty {
+} .space__spaceItem_qffi4:empty {
     display: none;
+} .space__wrap_qffi4 {
+    flex-wrap: wrap;
+} .space__divider_qffi4 {
+    width: 100%;
 }

package/space/index.js

@@ -1,10 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Component = require('./Component.js');
-require('tslib');
-require('react');
-require('classnames');
-require('./Item.js');
 
 
 

package/space/modern/Component.d.ts

@@ -39,6 +39,11 @@ type SpaceProps = {
      * Растягивать ли компонент на всю ширину
      */
     fullWidth?: boolean;
+    /**
+     * Использовать css gap
+     * @description Поддержка ограничена. см https://caniuse.com/?search=gap
+     */
+    useCssGaps?: boolean;
 };
 /**
  * Позаимствовано с благодарностью из Ant Design

package/space/modern/Component.js

@@ -1,8 +1,8 @@
 import React__default, { forwardRef, Children } from 'react';
-import classNames from 'classnames';
+import cn from 'classnames';
 import Item from './Item.js';
 
-const styles = {"spaceContainer":"space__spaceContainer_yftco","spaceContainerFullWidth":"space__spaceContainerFullWidth_yftco","vertical":"space__vertical_yftco","center":"space__center_yftco","start":"space__start_yftco","end":"space__end_yftco","spaceItemFullWidth":"space__spaceItemFullWidth_yftco","spaceItem":"space__spaceItem_yftco"};
+const styles = {"spaceContainer":"space__spaceContainer_qffi4","spaceContainerFullWidth":"space__spaceContainerFullWidth_qffi4","vertical":"space__vertical_qffi4","center":"space__center_qffi4","start":"space__start_qffi4","end":"space__end_qffi4","spaceItemFullWidth":"space__spaceItemFullWidth_qffi4","spaceItem":"space__spaceItem_qffi4","wrap":"space__wrap_qffi4","divider":"space__divider_qffi4"};
 require('./index.css');
 
 const SpaceSizes = {
@@ -15,7 +15,7 @@ const getNumberSize = (size) => (typeof size === 'string' ? SpaceSizes[size] : s
  * Позаимствовано с благодарностью из Ant Design
  */
 const Space = forwardRef((props, ref) => {
-    const { children, className, align = 'start', direction = 'vertical', size = 'm', wrap = false, divider = false, fullWidth = false, dataTestId, } = props;
+    const { children, className, align = 'start', direction = 'vertical', size = 'm', wrap = false, divider = false, fullWidth = false, dataTestId, useCssGaps = false, } = props;
     const [horizontalSize, verticalSize] = React__default.useMemo(() => (Array.isArray(size) ? size : [size, size]).map((item) => getNumberSize(item)), [size]);
     const childNodes = Children.toArray(children);
     if (childNodes.length === 0) {
@@ -23,20 +23,26 @@ const Space = forwardRef((props, ref) => {
     }
     const directionClassName = styles[direction];
     const alignClassName = styles[align];
-    const containerClassName = classNames(styles.spaceContainer, directionClassName, {
+    const containerClassName = cn(styles.spaceContainer, directionClassName, {
         [alignClassName]: align,
         [styles.spaceContainerFullWidth]: fullWidth,
     }, className);
-    const itemClassName = classNames(styles.spaceItem, {
+    const itemClassName = cn(styles.spaceItem, {
         [styles.spaceItemFullWidth]: fullWidth,
     });
     const nodes = childNodes.map((child, i) => (
     /* eslint-disable react/no-array-index-key */
-    React__default.createElement(Item, { className: itemClassName, key: `${itemClassName}-${i}`, direction: direction, horizontalSize: horizontalSize, verticalSize: verticalSize, length: childNodes.length, index: i, wrap: wrap, divider: divider }, child)
+    React__default.createElement(Item, { className: itemClassName, dividerClassName: styles.divider, key: `${itemClassName}-${i}`, direction: direction, horizontalSize: horizontalSize, verticalSize: verticalSize, length: childNodes.length, index: i, wrap: wrap, divider: divider, useCssGaps: useCssGaps }, child)
     /* eslint-enable */
     ));
-    return (React__default.createElement("div", { "data-test-id": dataTestId, className: containerClassName, style: {
-            ...(wrap && { flexWrap: 'wrap', marginBottom: -verticalSize }),
+    return (React__default.createElement("div", { "data-test-id": dataTestId, className: cn(containerClassName, {
+            [styles.wrap]: useCssGaps && wrap,
+        }), style: {
+            ...(useCssGaps && {
+                columnGap: horizontalSize / (divider ? 2 : 1),
+                rowGap: verticalSize / (divider ? 2 : 1),
+            }),
+            ...(wrap && !useCssGaps && { flexWrap: 'wrap', marginBottom: -verticalSize }),
         }, ref: ref }, nodes));
 });
 

package/space/modern/Item.d.ts

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { Direction } from "./utils";
 interface ItemProps {
     className: string;
+    dividerClassName: string;
     horizontalSize: number;
     verticalSize: number;
     length: number;
@@ -11,6 +12,7 @@ interface ItemProps {
     direction?: Direction;
     divider?: string | React.ReactNode;
     wrap?: boolean;
+    useCssGaps: boolean;
 }
 declare const Item: (props: ItemProps) => React.JSX.Element | null;
 export { Item as default, ItemProps };

package/space/modern/Item.js

@@ -1,28 +1,27 @@
 import * as React from 'react';
 
 const Item = (props) => {
-    const { className, horizontalSize, verticalSize, length, direction, index, children, divider, wrap, } = props;
-    let style = {};
-    if (direction === 'vertical') {
-        if (index < length - 1) {
-            style = { marginBottom: horizontalSize / (divider ? 2 : 1) };
+    const { className, dividerClassName, horizontalSize, verticalSize, length, direction, index, children, divider, wrap, useCssGaps, } = props;
+    let style;
+    if (!useCssGaps) {
+        if (direction === 'vertical') {
+            if (index < length - 1) {
+                style = { marginBottom: horizontalSize / (divider ? 2 : 1) };
+            }
+        }
+        else {
+            style = {
+                ...(index < length - 1 && { marginRight: horizontalSize / (divider ? 2 : 1) }),
+                ...(wrap && { paddingBottom: verticalSize }),
+            };
         }
-    }
-    else {
-        style = {
-            ...(index < length - 1 && { marginRight: horizontalSize / (divider ? 2 : 1) }),
-            ...(wrap && { paddingBottom: verticalSize }),
-        };
     }
     if (children === null || children === undefined) {
         return null;
     }
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: className, style: style }, children),
-        index < length - 1 && divider && (React.createElement("span", { style: {
-                width: '100%',
-                ...style,
-            } }, divider))));
+        index < length - 1 && divider && (React.createElement("span", { className: dividerClassName, style: style }, divider))));
 };
 
 export { Item as default };

package/space/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: vfa51 */
+/* hash: 17bze */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -14,20 +14,24 @@
 } :root {
 } :root {
 } :root {
-} .space__spaceContainer_yftco {
+} .space__spaceContainer_qffi4 {
     display: inline-flex;
-} .space__spaceContainerFullWidth_yftco {
+} .space__spaceContainerFullWidth_qffi4 {
     width: 100%;
-} .space__vertical_yftco {
+} .space__vertical_qffi4 {
     flex-direction: column;
-} .space__center_yftco {
+} .space__center_qffi4 {
     align-items: center;
-} .space__start_yftco {
+} .space__start_qffi4 {
     align-items: flex-start;
-} .space__end_yftco {
+} .space__end_qffi4 {
     align-items: flex-end;
-} .space__spaceItemFullWidth_yftco {
+} .space__spaceItemFullWidth_qffi4 {
     width: 100%;
-} .space__spaceItem_yftco:empty {
+} .space__spaceItem_qffi4:empty {
     display: none;
+} .space__wrap_qffi4 {
+    flex-wrap: wrap;
+} .space__divider_qffi4 {
+    width: 100%;
 }

package/spinner/Component.js

@@ -9,13 +9,13 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var defaultColors = {"component":"spinner__component_1e13r"};
+var defaultColors = {"component":"spinner__component_2dpj2"};
 require('./default.css');
 
-var styles = {"spinner":"spinner__spinner_134m9","spin_animation":"spinner__spin_animation_134m9","visible":"spinner__visible_134m9","xs":"spinner__xs_134m9","s":"spinner__s_134m9","m":"spinner__m_134m9"};
+var styles = {"spinner":"spinner__spinner_1gajb","spin_animation":"spinner__spin_animation_1gajb","visible":"spinner__visible_1gajb","xs":"spinner__xs_1gajb","s":"spinner__s_1gajb","m":"spinner__m_1gajb"};
 require('./index.css');
 
-var invertedColors = {"component":"spinner__component_1jvg7"};
+var invertedColors = {"component":"spinner__component_881zr"};
 require('./inverted.css');
 
 var colorStyles = {

package/spinner/cssm/index.js

@@ -1,12 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Component = require('./Component.js');
-require('react');
-require('classnames');
-require('@alfalab/hooks');
-require('./default.module.css');
-require('./index.module.css');
-require('./inverted.module.css');
 
 
 

package/spinner/default.css

@@ -17,6 +17,6 @@
 } :root {
 } :root {
     --spinner-default-color: var(--color-light-neutral-1500);
-} .spinner__component_1e13r {
+} .spinner__component_2dpj2 {
     color: var(--spinner-default-color);
 }

package/spinner/esm/Component.js

@@ -2,13 +2,13 @@ import React from 'react';
 import cn from 'classnames';
 import { useId } from '@alfalab/hooks';
 
-var defaultColors = {"component":"spinner__component_1e13r"};
+var defaultColors = {"component":"spinner__component_2dpj2"};
 require('./default.css');
 
-var styles = {"spinner":"spinner__spinner_134m9","spin_animation":"spinner__spin_animation_134m9","visible":"spinner__visible_134m9","xs":"spinner__xs_134m9","s":"spinner__s_134m9","m":"spinner__m_134m9"};
+var styles = {"spinner":"spinner__spinner_1gajb","spin_animation":"spinner__spin_animation_1gajb","visible":"spinner__visible_1gajb","xs":"spinner__xs_1gajb","s":"spinner__s_1gajb","m":"spinner__m_1gajb"};
 require('./index.css');
 
-var invertedColors = {"component":"spinner__component_1jvg7"};
+var invertedColors = {"component":"spinner__component_881zr"};
 require('./inverted.css');
 
 var colorStyles = {

package/spinner/esm/default.css

@@ -17,6 +17,6 @@
 } :root {
 } :root {
     --spinner-default-color: var(--color-light-neutral-1500);
-} .spinner__component_1e13r {
+} .spinner__component_2dpj2 {
     color: var(--spinner-default-color);
 }

package/spinner/esm/index.css

@@ -18,23 +18,23 @@
     --spinner-display-visible: inline-block;
     --spinner-animation-duration: 0.8s;
     --spinner-animation-timing-function: linear;
-} .spinner__spinner_134m9 {
+} .spinner__spinner_1gajb {
     display: none;
-    animation: spinner__spin_animation_134m9 var(--spinner-animation-duration) infinite
+    animation: spinner__spin_animation_1gajb var(--spinner-animation-duration) infinite
         var(--spinner-animation-timing-function);
-} .spinner__visible_134m9 {
+} .spinner__visible_1gajb {
     display: var(--spinner-display-visible);
     vertical-align: middle;
-} .spinner__xs_134m9 {
+} .spinner__xs_1gajb {
     width: 18px;
     height: 18px;
-} .spinner__s_134m9 {
+} .spinner__s_1gajb {
     width: 24px;
     height: 24px;
-} .spinner__m_134m9 {
+} .spinner__m_1gajb {
     width: 48px;
     height: 48px;
-} @keyframes spinner__spin_animation_134m9 {
+} @keyframes spinner__spin_animation_1gajb {
     from {
         transform: rotate(0);
     }