@alfalab/core-components 47.4.0-beta.1 → 47.5.0

package/generic-wrapper/Component.d.ts

@@ -9,6 +9,7 @@ type PaddingPropType = {
     bottom?: ReducedGapType;
     left?: ReducedGapType;
 };
+type GapType = 0 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 128;
 type GenericWrapperProps = React.HTMLAttributes<HTMLDivElement> & {
     /**
      * Дочерние элементы.
@@ -42,6 +43,10 @@ type GenericWrapperProps = React.HTMLAttributes<HTMLDivElement> & {
      * Позволяет заполнить всё доступное пространство родительского элемента.
      */
     grow?: boolean;
+    /**
+     * Отступы между элементами флекс-контейнера
+     */
+    gap?: GapType;
 };
-declare const GenericWrapper: ({ children, padding, alignItems, justifyContent, className, dataTestId, column, grow, ...restProps }: GenericWrapperProps) => React.JSX.Element;
-export { ReducedGapType, PaddingPropType, GenericWrapperProps, GenericWrapper };
+declare const GenericWrapper: ({ children, padding, alignItems, justifyContent, className, dataTestId, column, grow, gap, ...restProps }: GenericWrapperProps) => React.JSX.Element;
+export { ReducedGapType, PaddingPropType, GapType, GenericWrapperProps, GenericWrapper };

package/generic-wrapper/Component.js

@@ -9,12 +9,12 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"generic-wrapper__component_1fbon","column":"generic-wrapper__column_1fbon","align-stretch":"generic-wrapper__align-stretch_1fbon","align-start":"generic-wrapper__align-start_1fbon","align-end":"generic-wrapper__align-end_1fbon","align-center":"generic-wrapper__align-center_1fbon","align-baseline":"generic-wrapper__align-baseline_1fbon","justify-center":"generic-wrapper__justify-center_1fbon","justify-between":"generic-wrapper__justify-between_1fbon","justify-around":"generic-wrapper__justify-around_1fbon","justify-evenly":"generic-wrapper__justify-evenly_1fbon","justify-start":"generic-wrapper__justify-start_1fbon","justify-end":"generic-wrapper__justify-end_1fbon","grow":"generic-wrapper__grow_1fbon","padding-top-3xs":"generic-wrapper__padding-top-3xs_1fbon","padding-top-2xs":"generic-wrapper__padding-top-2xs_1fbon","padding-top-xs":"generic-wrapper__padding-top-xs_1fbon","padding-top-s":"generic-wrapper__padding-top-s_1fbon","padding-top-m":"generic-wrapper__padding-top-m_1fbon","padding-top-l":"generic-wrapper__padding-top-l_1fbon","padding-top-xl":"generic-wrapper__padding-top-xl_1fbon","padding-right-3xs":"generic-wrapper__padding-right-3xs_1fbon","padding-right-2xs":"generic-wrapper__padding-right-2xs_1fbon","padding-right-xs":"generic-wrapper__padding-right-xs_1fbon","padding-right-s":"generic-wrapper__padding-right-s_1fbon","padding-right-m":"generic-wrapper__padding-right-m_1fbon","padding-right-l":"generic-wrapper__padding-right-l_1fbon","padding-right-xl":"generic-wrapper__padding-right-xl_1fbon","padding-bottom-3xs":"generic-wrapper__padding-bottom-3xs_1fbon","padding-bottom-2xs":"generic-wrapper__padding-bottom-2xs_1fbon","padding-bottom-xs":"generic-wrapper__padding-bottom-xs_1fbon","padding-bottom-s":"generic-wrapper__padding-bottom-s_1fbon","padding-bottom-m":"generic-wrapper__padding-bottom-m_1fbon","padding-bottom-l":"generic-wrapper__padding-bottom-l_1fbon","padding-bottom-xl":"generic-wrapper__padding-bottom-xl_1fbon","padding-left-3xs":"generic-wrapper__padding-left-3xs_1fbon","padding-left-2xs":"generic-wrapper__padding-left-2xs_1fbon","padding-left-xs":"generic-wrapper__padding-left-xs_1fbon","padding-left-s":"generic-wrapper__padding-left-s_1fbon","padding-left-m":"generic-wrapper__padding-left-m_1fbon","padding-left-l":"generic-wrapper__padding-left-l_1fbon","padding-left-xl":"generic-wrapper__padding-left-xl_1fbon"};
+var styles = {"component":"generic-wrapper__component_1fbon","column":"generic-wrapper__column_1fbon","align-stretch":"generic-wrapper__align-stretch_1fbon","align-start":"generic-wrapper__align-start_1fbon","align-end":"generic-wrapper__align-end_1fbon","align-center":"generic-wrapper__align-center_1fbon","align-baseline":"generic-wrapper__align-baseline_1fbon","justify-center":"generic-wrapper__justify-center_1fbon","justify-between":"generic-wrapper__justify-between_1fbon","justify-around":"generic-wrapper__justify-around_1fbon","justify-evenly":"generic-wrapper__justify-evenly_1fbon","justify-start":"generic-wrapper__justify-start_1fbon","justify-end":"generic-wrapper__justify-end_1fbon","grow":"generic-wrapper__grow_1fbon","padding-top-3xs":"generic-wrapper__padding-top-3xs_1fbon","padding-top-2xs":"generic-wrapper__padding-top-2xs_1fbon","padding-top-xs":"generic-wrapper__padding-top-xs_1fbon","padding-top-s":"generic-wrapper__padding-top-s_1fbon","padding-top-m":"generic-wrapper__padding-top-m_1fbon","padding-top-l":"generic-wrapper__padding-top-l_1fbon","padding-top-xl":"generic-wrapper__padding-top-xl_1fbon","padding-right-3xs":"generic-wrapper__padding-right-3xs_1fbon","padding-right-2xs":"generic-wrapper__padding-right-2xs_1fbon","padding-right-xs":"generic-wrapper__padding-right-xs_1fbon","padding-right-s":"generic-wrapper__padding-right-s_1fbon","padding-right-m":"generic-wrapper__padding-right-m_1fbon","padding-right-l":"generic-wrapper__padding-right-l_1fbon","padding-right-xl":"generic-wrapper__padding-right-xl_1fbon","padding-bottom-3xs":"generic-wrapper__padding-bottom-3xs_1fbon","padding-bottom-2xs":"generic-wrapper__padding-bottom-2xs_1fbon","padding-bottom-xs":"generic-wrapper__padding-bottom-xs_1fbon","padding-bottom-s":"generic-wrapper__padding-bottom-s_1fbon","padding-bottom-m":"generic-wrapper__padding-bottom-m_1fbon","padding-bottom-l":"generic-wrapper__padding-bottom-l_1fbon","padding-bottom-xl":"generic-wrapper__padding-bottom-xl_1fbon","padding-left-3xs":"generic-wrapper__padding-left-3xs_1fbon","padding-left-2xs":"generic-wrapper__padding-left-2xs_1fbon","padding-left-xs":"generic-wrapper__padding-left-xs_1fbon","padding-left-s":"generic-wrapper__padding-left-s_1fbon","padding-left-m":"generic-wrapper__padding-left-m_1fbon","padding-left-l":"generic-wrapper__padding-left-l_1fbon","padding-left-xl":"generic-wrapper__padding-left-xl_1fbon","gap-0":"generic-wrapper__gap-0_1fbon","gap-2":"generic-wrapper__gap-2_1fbon","gap-4":"generic-wrapper__gap-4_1fbon","gap-8":"generic-wrapper__gap-8_1fbon","gap-12":"generic-wrapper__gap-12_1fbon","gap-16":"generic-wrapper__gap-16_1fbon","gap-20":"generic-wrapper__gap-20_1fbon","gap-24":"generic-wrapper__gap-24_1fbon","gap-32":"generic-wrapper__gap-32_1fbon","gap-40":"generic-wrapper__gap-40_1fbon","gap-48":"generic-wrapper__gap-48_1fbon","gap-56":"generic-wrapper__gap-56_1fbon","gap-64":"generic-wrapper__gap-64_1fbon","gap-72":"generic-wrapper__gap-72_1fbon","gap-80":"generic-wrapper__gap-80_1fbon","gap-96":"generic-wrapper__gap-96_1fbon","gap-128":"generic-wrapper__gap-128_1fbon"};
 require('./index.css');
 
 var GenericWrapper = function (_a) {
-    var _b;
-    var children = _a.children, padding = _a.padding, alignItems = _a.alignItems, justifyContent = _a.justifyContent, className = _a.className, dataTestId = _a.dataTestId, _c = _a.column, column = _c === void 0 ? false : _c, _d = _a.grow, grow = _d === void 0 ? false : _d, restProps = tslib.__rest(_a, ["children", "padding", "alignItems", "justifyContent", "className", "dataTestId", "column", "grow"]);
+    var _b, _c;
+    var children = _a.children, padding = _a.padding, alignItems = _a.alignItems, justifyContent = _a.justifyContent, className = _a.className, dataTestId = _a.dataTestId, _d = _a.column, column = _d === void 0 ? false : _d, _e = _a.grow, grow = _e === void 0 ? false : _e, gap = _a.gap, restProps = tslib.__rest(_a, ["children", "padding", "alignItems", "justifyContent", "className", "dataTestId", "column", "grow", "gap"]);
     var paddingStyles = padding && (_b = {},
         _b[styles["padding-top-".concat(padding.top)]] = padding.top,
         _b[styles["padding-right-".concat(padding.right)]] = padding.right,
@@ -25,7 +25,7 @@ var GenericWrapper = function (_a) {
     var justifyContentStyles = justifyContent && styles["justify-".concat(justifyContent)];
     var growStyles = grow && styles.grow;
     var columnsStyles = column && styles.column;
-    return (React__default.default.createElement("div", tslib.__assign({ className: cn__default.default(styles.component, columnsStyles, alignmentStyles, paddingStyles, justifyContentStyles, growStyles, className), "data-test-id": dataTestId }, restProps), children));
+    return (React__default.default.createElement("div", tslib.__assign({ className: cn__default.default(styles.component, columnsStyles, alignmentStyles, paddingStyles, justifyContentStyles, growStyles, className, (_c = {}, _c[styles["gap-".concat(gap)]] = gap, _c)), "data-test-id": dataTestId }, restProps), children));
 };
 
 exports.GenericWrapper = GenericWrapper;

package/generic-wrapper/cssm/Component.d.ts

@@ -9,6 +9,7 @@ type PaddingPropType = {
     bottom?: ReducedGapType;
     left?: ReducedGapType;
 };
+type GapType = 0 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 128;
 type GenericWrapperProps = React.HTMLAttributes<HTMLDivElement> & {
     /**
      * Дочерние элементы.
@@ -42,6 +43,10 @@ type GenericWrapperProps = React.HTMLAttributes<HTMLDivElement> & {
      * Позволяет заполнить всё доступное пространство родительского элемента.
      */
     grow?: boolean;
+    /**
+     * Отступы между элементами флекс-контейнера
+     */
+    gap?: GapType;
 };
-declare const GenericWrapper: ({ children, padding, alignItems, justifyContent, className, dataTestId, column, grow, ...restProps }: GenericWrapperProps) => React.JSX.Element;
-export { ReducedGapType, PaddingPropType, GenericWrapperProps, GenericWrapper };
+declare const GenericWrapper: ({ children, padding, alignItems, justifyContent, className, dataTestId, column, grow, gap, ...restProps }: GenericWrapperProps) => React.JSX.Element;
+export { ReducedGapType, PaddingPropType, GapType, GenericWrapperProps, GenericWrapper };

package/generic-wrapper/cssm/Component.js

@@ -12,8 +12,8 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var GenericWrapper = function (_a) {
-    var _b;
-    var children = _a.children, padding = _a.padding, alignItems = _a.alignItems, justifyContent = _a.justifyContent, className = _a.className, dataTestId = _a.dataTestId, _c = _a.column, column = _c === void 0 ? false : _c, _d = _a.grow, grow = _d === void 0 ? false : _d, restProps = tslib.__rest(_a, ["children", "padding", "alignItems", "justifyContent", "className", "dataTestId", "column", "grow"]);
+    var _b, _c;
+    var children = _a.children, padding = _a.padding, alignItems = _a.alignItems, justifyContent = _a.justifyContent, className = _a.className, dataTestId = _a.dataTestId, _d = _a.column, column = _d === void 0 ? false : _d, _e = _a.grow, grow = _e === void 0 ? false : _e, gap = _a.gap, restProps = tslib.__rest(_a, ["children", "padding", "alignItems", "justifyContent", "className", "dataTestId", "column", "grow", "gap"]);
     var paddingStyles = padding && (_b = {},
         _b[styles__default.default["padding-top-".concat(padding.top)]] = padding.top,
         _b[styles__default.default["padding-right-".concat(padding.right)]] = padding.right,
@@ -24,7 +24,7 @@ var GenericWrapper = function (_a) {
     var justifyContentStyles = justifyContent && styles__default.default["justify-".concat(justifyContent)];
     var growStyles = grow && styles__default.default.grow;
     var columnsStyles = column && styles__default.default.column;
-    return (React__default.default.createElement("div", tslib.__assign({ className: cn__default.default(styles__default.default.component, columnsStyles, alignmentStyles, paddingStyles, justifyContentStyles, growStyles, className), "data-test-id": dataTestId }, restProps), children));
+    return (React__default.default.createElement("div", tslib.__assign({ className: cn__default.default(styles__default.default.component, columnsStyles, alignmentStyles, paddingStyles, justifyContentStyles, growStyles, className, (_c = {}, _c[styles__default.default["gap-".concat(gap)]] = gap, _c)), "data-test-id": dataTestId }, restProps), children));
 };
 
 exports.GenericWrapper = GenericWrapper;

package/generic-wrapper/cssm/index.module.css

@@ -11,13 +11,15 @@
     /* Hard up */
 } :root {
 } :root {
-    --gap-3xs: 2px;
-    --gap-2xs: 4px;
-    --gap-xs: 8px;
-    --gap-s: 12px;
-    --gap-m: 16px;
-    --gap-l: 20px;
-    --gap-xl: 24px;
+    --gap-3xs: 2px; /* deprecated */
+    --gap-2xs: 4px; /* deprecated */
+    --gap-xs: 8px; /* deprecated */
+    --gap-s: 12px; /* deprecated */ /* deprecated */
+    --gap-m: 16px; /* deprecated */
+    --gap-l: 20px; /* deprecated */
+    --gap-xl: 24px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+
+    /* новые значения, используйте их */
 } :root {
 } :root {
 } .component {
@@ -105,4 +107,55 @@
         padding-left: var(--gap-l);
     } .padding-left-xl {
         padding-left: var(--gap-xl);
+    } /* prettier-ignore */ .gap-0 {
+        grid-gap: 0px;
+        gap: 0px;
+    } .gap-2 {
+        grid-gap: 2px;
+        gap: 2px;
+    } .gap-4 {
+        grid-gap: 4px;
+        gap: 4px;
+    } .gap-8 {
+        grid-gap: 8px;
+        gap: 8px;
+    } .gap-12 {
+        grid-gap: 12px;
+        gap: 12px;
+    } .gap-16 {
+        grid-gap: 16px;
+        gap: 16px;
+    } .gap-20 {
+        grid-gap: 20px;
+        gap: 20px;
+    } .gap-24 {
+        grid-gap: 24px;
+        gap: 24px;
+    } .gap-32 {
+        grid-gap: 32px;
+        gap: 32px;
+    } .gap-40 {
+        grid-gap: 40px;
+        gap: 40px;
+    } .gap-48 {
+        grid-gap: 48px;
+        gap: 48px;
+    } .gap-56 {
+        grid-gap: 56px;
+        gap: 56px;
+    } .gap-64 {
+        grid-gap: 64px;
+        gap: 64px;
+    } .gap-72 {
+        grid-gap: 72px;
+        gap: 72px;
+    } .gap-80 {
+        grid-gap: 80px;
+        gap: 80px;
+    } .gap-96 {
+        grid-gap: 96px;
+        gap: 96px;
+    } .gap-128 {
+        grid-gap: 128px;
+        gap: 128px;
     }

package/generic-wrapper/esm/Component.d.ts

@@ -9,6 +9,7 @@ type PaddingPropType = {
     bottom?: ReducedGapType;
     left?: ReducedGapType;
 };
+type GapType = 0 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 128;
 type GenericWrapperProps = React.HTMLAttributes<HTMLDivElement> & {
     /**
      * Дочерние элементы.
@@ -42,6 +43,10 @@ type GenericWrapperProps = React.HTMLAttributes<HTMLDivElement> & {
      * Позволяет заполнить всё доступное пространство родительского элемента.
      */
     grow?: boolean;
+    /**
+     * Отступы между элементами флекс-контейнера
+     */
+    gap?: GapType;
 };
-declare const GenericWrapper: ({ children, padding, alignItems, justifyContent, className, dataTestId, column, grow, ...restProps }: GenericWrapperProps) => React.JSX.Element;
-export { ReducedGapType, PaddingPropType, GenericWrapperProps, GenericWrapper };
+declare const GenericWrapper: ({ children, padding, alignItems, justifyContent, className, dataTestId, column, grow, gap, ...restProps }: GenericWrapperProps) => React.JSX.Element;
+export { ReducedGapType, PaddingPropType, GapType, GenericWrapperProps, GenericWrapper };

package/generic-wrapper/esm/Component.js

@@ -2,12 +2,12 @@ import { __rest, __assign } from 'tslib';
 import React from 'react';
 import cn from 'classnames';
 
-var styles = {"component":"generic-wrapper__component_1fbon","column":"generic-wrapper__column_1fbon","align-stretch":"generic-wrapper__align-stretch_1fbon","align-start":"generic-wrapper__align-start_1fbon","align-end":"generic-wrapper__align-end_1fbon","align-center":"generic-wrapper__align-center_1fbon","align-baseline":"generic-wrapper__align-baseline_1fbon","justify-center":"generic-wrapper__justify-center_1fbon","justify-between":"generic-wrapper__justify-between_1fbon","justify-around":"generic-wrapper__justify-around_1fbon","justify-evenly":"generic-wrapper__justify-evenly_1fbon","justify-start":"generic-wrapper__justify-start_1fbon","justify-end":"generic-wrapper__justify-end_1fbon","grow":"generic-wrapper__grow_1fbon","padding-top-3xs":"generic-wrapper__padding-top-3xs_1fbon","padding-top-2xs":"generic-wrapper__padding-top-2xs_1fbon","padding-top-xs":"generic-wrapper__padding-top-xs_1fbon","padding-top-s":"generic-wrapper__padding-top-s_1fbon","padding-top-m":"generic-wrapper__padding-top-m_1fbon","padding-top-l":"generic-wrapper__padding-top-l_1fbon","padding-top-xl":"generic-wrapper__padding-top-xl_1fbon","padding-right-3xs":"generic-wrapper__padding-right-3xs_1fbon","padding-right-2xs":"generic-wrapper__padding-right-2xs_1fbon","padding-right-xs":"generic-wrapper__padding-right-xs_1fbon","padding-right-s":"generic-wrapper__padding-right-s_1fbon","padding-right-m":"generic-wrapper__padding-right-m_1fbon","padding-right-l":"generic-wrapper__padding-right-l_1fbon","padding-right-xl":"generic-wrapper__padding-right-xl_1fbon","padding-bottom-3xs":"generic-wrapper__padding-bottom-3xs_1fbon","padding-bottom-2xs":"generic-wrapper__padding-bottom-2xs_1fbon","padding-bottom-xs":"generic-wrapper__padding-bottom-xs_1fbon","padding-bottom-s":"generic-wrapper__padding-bottom-s_1fbon","padding-bottom-m":"generic-wrapper__padding-bottom-m_1fbon","padding-bottom-l":"generic-wrapper__padding-bottom-l_1fbon","padding-bottom-xl":"generic-wrapper__padding-bottom-xl_1fbon","padding-left-3xs":"generic-wrapper__padding-left-3xs_1fbon","padding-left-2xs":"generic-wrapper__padding-left-2xs_1fbon","padding-left-xs":"generic-wrapper__padding-left-xs_1fbon","padding-left-s":"generic-wrapper__padding-left-s_1fbon","padding-left-m":"generic-wrapper__padding-left-m_1fbon","padding-left-l":"generic-wrapper__padding-left-l_1fbon","padding-left-xl":"generic-wrapper__padding-left-xl_1fbon"};
+var styles = {"component":"generic-wrapper__component_1fbon","column":"generic-wrapper__column_1fbon","align-stretch":"generic-wrapper__align-stretch_1fbon","align-start":"generic-wrapper__align-start_1fbon","align-end":"generic-wrapper__align-end_1fbon","align-center":"generic-wrapper__align-center_1fbon","align-baseline":"generic-wrapper__align-baseline_1fbon","justify-center":"generic-wrapper__justify-center_1fbon","justify-between":"generic-wrapper__justify-between_1fbon","justify-around":"generic-wrapper__justify-around_1fbon","justify-evenly":"generic-wrapper__justify-evenly_1fbon","justify-start":"generic-wrapper__justify-start_1fbon","justify-end":"generic-wrapper__justify-end_1fbon","grow":"generic-wrapper__grow_1fbon","padding-top-3xs":"generic-wrapper__padding-top-3xs_1fbon","padding-top-2xs":"generic-wrapper__padding-top-2xs_1fbon","padding-top-xs":"generic-wrapper__padding-top-xs_1fbon","padding-top-s":"generic-wrapper__padding-top-s_1fbon","padding-top-m":"generic-wrapper__padding-top-m_1fbon","padding-top-l":"generic-wrapper__padding-top-l_1fbon","padding-top-xl":"generic-wrapper__padding-top-xl_1fbon","padding-right-3xs":"generic-wrapper__padding-right-3xs_1fbon","padding-right-2xs":"generic-wrapper__padding-right-2xs_1fbon","padding-right-xs":"generic-wrapper__padding-right-xs_1fbon","padding-right-s":"generic-wrapper__padding-right-s_1fbon","padding-right-m":"generic-wrapper__padding-right-m_1fbon","padding-right-l":"generic-wrapper__padding-right-l_1fbon","padding-right-xl":"generic-wrapper__padding-right-xl_1fbon","padding-bottom-3xs":"generic-wrapper__padding-bottom-3xs_1fbon","padding-bottom-2xs":"generic-wrapper__padding-bottom-2xs_1fbon","padding-bottom-xs":"generic-wrapper__padding-bottom-xs_1fbon","padding-bottom-s":"generic-wrapper__padding-bottom-s_1fbon","padding-bottom-m":"generic-wrapper__padding-bottom-m_1fbon","padding-bottom-l":"generic-wrapper__padding-bottom-l_1fbon","padding-bottom-xl":"generic-wrapper__padding-bottom-xl_1fbon","padding-left-3xs":"generic-wrapper__padding-left-3xs_1fbon","padding-left-2xs":"generic-wrapper__padding-left-2xs_1fbon","padding-left-xs":"generic-wrapper__padding-left-xs_1fbon","padding-left-s":"generic-wrapper__padding-left-s_1fbon","padding-left-m":"generic-wrapper__padding-left-m_1fbon","padding-left-l":"generic-wrapper__padding-left-l_1fbon","padding-left-xl":"generic-wrapper__padding-left-xl_1fbon","gap-0":"generic-wrapper__gap-0_1fbon","gap-2":"generic-wrapper__gap-2_1fbon","gap-4":"generic-wrapper__gap-4_1fbon","gap-8":"generic-wrapper__gap-8_1fbon","gap-12":"generic-wrapper__gap-12_1fbon","gap-16":"generic-wrapper__gap-16_1fbon","gap-20":"generic-wrapper__gap-20_1fbon","gap-24":"generic-wrapper__gap-24_1fbon","gap-32":"generic-wrapper__gap-32_1fbon","gap-40":"generic-wrapper__gap-40_1fbon","gap-48":"generic-wrapper__gap-48_1fbon","gap-56":"generic-wrapper__gap-56_1fbon","gap-64":"generic-wrapper__gap-64_1fbon","gap-72":"generic-wrapper__gap-72_1fbon","gap-80":"generic-wrapper__gap-80_1fbon","gap-96":"generic-wrapper__gap-96_1fbon","gap-128":"generic-wrapper__gap-128_1fbon"};
 require('./index.css');
 
 var GenericWrapper = function (_a) {
-    var _b;
-    var children = _a.children, padding = _a.padding, alignItems = _a.alignItems, justifyContent = _a.justifyContent, className = _a.className, dataTestId = _a.dataTestId, _c = _a.column, column = _c === void 0 ? false : _c, _d = _a.grow, grow = _d === void 0 ? false : _d, restProps = __rest(_a, ["children", "padding", "alignItems", "justifyContent", "className", "dataTestId", "column", "grow"]);
+    var _b, _c;
+    var children = _a.children, padding = _a.padding, alignItems = _a.alignItems, justifyContent = _a.justifyContent, className = _a.className, dataTestId = _a.dataTestId, _d = _a.column, column = _d === void 0 ? false : _d, _e = _a.grow, grow = _e === void 0 ? false : _e, gap = _a.gap, restProps = __rest(_a, ["children", "padding", "alignItems", "justifyContent", "className", "dataTestId", "column", "grow", "gap"]);
     var paddingStyles = padding && (_b = {},
         _b[styles["padding-top-".concat(padding.top)]] = padding.top,
         _b[styles["padding-right-".concat(padding.right)]] = padding.right,
@@ -18,7 +18,7 @@ var GenericWrapper = function (_a) {
     var justifyContentStyles = justifyContent && styles["justify-".concat(justifyContent)];
     var growStyles = grow && styles.grow;
     var columnsStyles = column && styles.column;
-    return (React.createElement("div", __assign({ className: cn(styles.component, columnsStyles, alignmentStyles, paddingStyles, justifyContentStyles, growStyles, className), "data-test-id": dataTestId }, restProps), children));
+    return (React.createElement("div", __assign({ className: cn(styles.component, columnsStyles, alignmentStyles, paddingStyles, justifyContentStyles, growStyles, className, (_c = {}, _c[styles["gap-".concat(gap)]] = gap, _c)), "data-test-id": dataTestId }, restProps), children));
 };
 
 export { GenericWrapper };

package/generic-wrapper/esm/index.css

@@ -12,13 +12,15 @@
     /* Hard up */
 } :root {
 } :root {
-    --gap-3xs: 2px;
-    --gap-2xs: 4px;
-    --gap-xs: 8px;
-    --gap-s: 12px;
-    --gap-m: 16px;
-    --gap-l: 20px;
-    --gap-xl: 24px;
+    --gap-3xs: 2px; /* deprecated */
+    --gap-2xs: 4px; /* deprecated */
+    --gap-xs: 8px; /* deprecated */
+    --gap-s: 12px; /* deprecated */ /* deprecated */
+    --gap-m: 16px; /* deprecated */
+    --gap-l: 20px; /* deprecated */
+    --gap-xl: 24px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+
+    /* новые значения, используйте их */
 } :root {
 } :root {
 } .generic-wrapper__component_1fbon {
@@ -106,4 +108,72 @@
         padding-left: var(--gap-l);
     } .generic-wrapper__padding-left-xl_1fbon {
         padding-left: var(--gap-xl);
+    } /* prettier-ignore */ .generic-wrapper__gap-0_1fbon {
+        grid-gap: 0px;
+        grid-gap: 0px;
+        gap: 0px;
+    } .generic-wrapper__gap-2_1fbon {
+        grid-gap: 2px;
+        grid-gap: 2px;
+        gap: 2px;
+    } .generic-wrapper__gap-4_1fbon {
+        grid-gap: 4px;
+        grid-gap: 4px;
+        gap: 4px;
+    } .generic-wrapper__gap-8_1fbon {
+        grid-gap: 8px;
+        grid-gap: 8px;
+        gap: 8px;
+    } .generic-wrapper__gap-12_1fbon {
+        grid-gap: 12px;
+        grid-gap: 12px;
+        gap: 12px;
+    } .generic-wrapper__gap-16_1fbon {
+        grid-gap: 16px;
+        grid-gap: 16px;
+        gap: 16px;
+    } .generic-wrapper__gap-20_1fbon {
+        grid-gap: 20px;
+        grid-gap: 20px;
+        gap: 20px;
+    } .generic-wrapper__gap-24_1fbon {
+        grid-gap: 24px;
+        grid-gap: 24px;
+        gap: 24px;
+    } .generic-wrapper__gap-32_1fbon {
+        grid-gap: 32px;
+        grid-gap: 32px;
+        gap: 32px;
+    } .generic-wrapper__gap-40_1fbon {
+        grid-gap: 40px;
+        grid-gap: 40px;
+        gap: 40px;
+    } .generic-wrapper__gap-48_1fbon {
+        grid-gap: 48px;
+        grid-gap: 48px;
+        gap: 48px;
+    } .generic-wrapper__gap-56_1fbon {
+        grid-gap: 56px;
+        grid-gap: 56px;
+        gap: 56px;
+    } .generic-wrapper__gap-64_1fbon {
+        grid-gap: 64px;
+        grid-gap: 64px;
+        gap: 64px;
+    } .generic-wrapper__gap-72_1fbon {
+        grid-gap: 72px;
+        grid-gap: 72px;
+        gap: 72px;
+    } .generic-wrapper__gap-80_1fbon {
+        grid-gap: 80px;
+        grid-gap: 80px;
+        gap: 80px;
+    } .generic-wrapper__gap-96_1fbon {
+        grid-gap: 96px;
+        grid-gap: 96px;
+        gap: 96px;
+    } .generic-wrapper__gap-128_1fbon {
+        grid-gap: 128px;
+        grid-gap: 128px;
+        gap: 128px;
     }

package/generic-wrapper/index.css

@@ -12,13 +12,15 @@
     /* Hard up */
 } :root {
 } :root {
-    --gap-3xs: 2px;
-    --gap-2xs: 4px;
-    --gap-xs: 8px;
-    --gap-s: 12px;
-    --gap-m: 16px;
-    --gap-l: 20px;
-    --gap-xl: 24px;
+    --gap-3xs: 2px; /* deprecated */
+    --gap-2xs: 4px; /* deprecated */
+    --gap-xs: 8px; /* deprecated */
+    --gap-s: 12px; /* deprecated */ /* deprecated */
+    --gap-m: 16px; /* deprecated */
+    --gap-l: 20px; /* deprecated */
+    --gap-xl: 24px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+
+    /* новые значения, используйте их */
 } :root {
 } :root {
 } .generic-wrapper__component_1fbon {
@@ -106,4 +108,72 @@
         padding-left: var(--gap-l);
     } .generic-wrapper__padding-left-xl_1fbon {
         padding-left: var(--gap-xl);
+    } /* prettier-ignore */ .generic-wrapper__gap-0_1fbon {
+        grid-gap: 0px;
+        grid-gap: 0px;
+        gap: 0px;
+    } .generic-wrapper__gap-2_1fbon {
+        grid-gap: 2px;
+        grid-gap: 2px;
+        gap: 2px;
+    } .generic-wrapper__gap-4_1fbon {
+        grid-gap: 4px;
+        grid-gap: 4px;
+        gap: 4px;
+    } .generic-wrapper__gap-8_1fbon {
+        grid-gap: 8px;
+        grid-gap: 8px;
+        gap: 8px;
+    } .generic-wrapper__gap-12_1fbon {
+        grid-gap: 12px;
+        grid-gap: 12px;
+        gap: 12px;
+    } .generic-wrapper__gap-16_1fbon {
+        grid-gap: 16px;
+        grid-gap: 16px;
+        gap: 16px;
+    } .generic-wrapper__gap-20_1fbon {
+        grid-gap: 20px;
+        grid-gap: 20px;
+        gap: 20px;
+    } .generic-wrapper__gap-24_1fbon {
+        grid-gap: 24px;
+        grid-gap: 24px;
+        gap: 24px;
+    } .generic-wrapper__gap-32_1fbon {
+        grid-gap: 32px;
+        grid-gap: 32px;
+        gap: 32px;
+    } .generic-wrapper__gap-40_1fbon {
+        grid-gap: 40px;
+        grid-gap: 40px;
+        gap: 40px;
+    } .generic-wrapper__gap-48_1fbon {
+        grid-gap: 48px;
+        grid-gap: 48px;
+        gap: 48px;
+    } .generic-wrapper__gap-56_1fbon {
+        grid-gap: 56px;
+        grid-gap: 56px;
+        gap: 56px;
+    } .generic-wrapper__gap-64_1fbon {
+        grid-gap: 64px;
+        grid-gap: 64px;
+        gap: 64px;
+    } .generic-wrapper__gap-72_1fbon {
+        grid-gap: 72px;
+        grid-gap: 72px;
+        gap: 72px;
+    } .generic-wrapper__gap-80_1fbon {
+        grid-gap: 80px;
+        grid-gap: 80px;
+        gap: 80px;
+    } .generic-wrapper__gap-96_1fbon {
+        grid-gap: 96px;
+        grid-gap: 96px;
+        gap: 96px;
+    } .generic-wrapper__gap-128_1fbon {
+        grid-gap: 128px;
+        grid-gap: 128px;
+        gap: 128px;
     }

package/generic-wrapper/modern/Component.d.ts

@@ -9,6 +9,7 @@ type PaddingPropType = {
     bottom?: ReducedGapType;
     left?: ReducedGapType;
 };
+type GapType = 0 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 128;
 type GenericWrapperProps = React.HTMLAttributes<HTMLDivElement> & {
     /**
      * Дочерние элементы.
@@ -42,6 +43,10 @@ type GenericWrapperProps = React.HTMLAttributes<HTMLDivElement> & {
      * Позволяет заполнить всё доступное пространство родительского элемента.
      */
     grow?: boolean;
+    /**
+     * Отступы между элементами флекс-контейнера
+     */
+    gap?: GapType;
 };
-declare const GenericWrapper: ({ children, padding, alignItems, justifyContent, className, dataTestId, column, grow, ...restProps }: GenericWrapperProps) => React.JSX.Element;
-export { ReducedGapType, PaddingPropType, GenericWrapperProps, GenericWrapper };
+declare const GenericWrapper: ({ children, padding, alignItems, justifyContent, className, dataTestId, column, grow, gap, ...restProps }: GenericWrapperProps) => React.JSX.Element;
+export { ReducedGapType, PaddingPropType, GapType, GenericWrapperProps, GenericWrapper };

package/generic-wrapper/modern/Component.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import cn from 'classnames';
 
-const styles = {"component":"generic-wrapper__component_1fbon","column":"generic-wrapper__column_1fbon","align-stretch":"generic-wrapper__align-stretch_1fbon","align-start":"generic-wrapper__align-start_1fbon","align-end":"generic-wrapper__align-end_1fbon","align-center":"generic-wrapper__align-center_1fbon","align-baseline":"generic-wrapper__align-baseline_1fbon","justify-center":"generic-wrapper__justify-center_1fbon","justify-between":"generic-wrapper__justify-between_1fbon","justify-around":"generic-wrapper__justify-around_1fbon","justify-evenly":"generic-wrapper__justify-evenly_1fbon","justify-start":"generic-wrapper__justify-start_1fbon","justify-end":"generic-wrapper__justify-end_1fbon","grow":"generic-wrapper__grow_1fbon","padding-top-3xs":"generic-wrapper__padding-top-3xs_1fbon","padding-top-2xs":"generic-wrapper__padding-top-2xs_1fbon","padding-top-xs":"generic-wrapper__padding-top-xs_1fbon","padding-top-s":"generic-wrapper__padding-top-s_1fbon","padding-top-m":"generic-wrapper__padding-top-m_1fbon","padding-top-l":"generic-wrapper__padding-top-l_1fbon","padding-top-xl":"generic-wrapper__padding-top-xl_1fbon","padding-right-3xs":"generic-wrapper__padding-right-3xs_1fbon","padding-right-2xs":"generic-wrapper__padding-right-2xs_1fbon","padding-right-xs":"generic-wrapper__padding-right-xs_1fbon","padding-right-s":"generic-wrapper__padding-right-s_1fbon","padding-right-m":"generic-wrapper__padding-right-m_1fbon","padding-right-l":"generic-wrapper__padding-right-l_1fbon","padding-right-xl":"generic-wrapper__padding-right-xl_1fbon","padding-bottom-3xs":"generic-wrapper__padding-bottom-3xs_1fbon","padding-bottom-2xs":"generic-wrapper__padding-bottom-2xs_1fbon","padding-bottom-xs":"generic-wrapper__padding-bottom-xs_1fbon","padding-bottom-s":"generic-wrapper__padding-bottom-s_1fbon","padding-bottom-m":"generic-wrapper__padding-bottom-m_1fbon","padding-bottom-l":"generic-wrapper__padding-bottom-l_1fbon","padding-bottom-xl":"generic-wrapper__padding-bottom-xl_1fbon","padding-left-3xs":"generic-wrapper__padding-left-3xs_1fbon","padding-left-2xs":"generic-wrapper__padding-left-2xs_1fbon","padding-left-xs":"generic-wrapper__padding-left-xs_1fbon","padding-left-s":"generic-wrapper__padding-left-s_1fbon","padding-left-m":"generic-wrapper__padding-left-m_1fbon","padding-left-l":"generic-wrapper__padding-left-l_1fbon","padding-left-xl":"generic-wrapper__padding-left-xl_1fbon"};
+const styles = {"component":"generic-wrapper__component_1fbon","column":"generic-wrapper__column_1fbon","align-stretch":"generic-wrapper__align-stretch_1fbon","align-start":"generic-wrapper__align-start_1fbon","align-end":"generic-wrapper__align-end_1fbon","align-center":"generic-wrapper__align-center_1fbon","align-baseline":"generic-wrapper__align-baseline_1fbon","justify-center":"generic-wrapper__justify-center_1fbon","justify-between":"generic-wrapper__justify-between_1fbon","justify-around":"generic-wrapper__justify-around_1fbon","justify-evenly":"generic-wrapper__justify-evenly_1fbon","justify-start":"generic-wrapper__justify-start_1fbon","justify-end":"generic-wrapper__justify-end_1fbon","grow":"generic-wrapper__grow_1fbon","padding-top-3xs":"generic-wrapper__padding-top-3xs_1fbon","padding-top-2xs":"generic-wrapper__padding-top-2xs_1fbon","padding-top-xs":"generic-wrapper__padding-top-xs_1fbon","padding-top-s":"generic-wrapper__padding-top-s_1fbon","padding-top-m":"generic-wrapper__padding-top-m_1fbon","padding-top-l":"generic-wrapper__padding-top-l_1fbon","padding-top-xl":"generic-wrapper__padding-top-xl_1fbon","padding-right-3xs":"generic-wrapper__padding-right-3xs_1fbon","padding-right-2xs":"generic-wrapper__padding-right-2xs_1fbon","padding-right-xs":"generic-wrapper__padding-right-xs_1fbon","padding-right-s":"generic-wrapper__padding-right-s_1fbon","padding-right-m":"generic-wrapper__padding-right-m_1fbon","padding-right-l":"generic-wrapper__padding-right-l_1fbon","padding-right-xl":"generic-wrapper__padding-right-xl_1fbon","padding-bottom-3xs":"generic-wrapper__padding-bottom-3xs_1fbon","padding-bottom-2xs":"generic-wrapper__padding-bottom-2xs_1fbon","padding-bottom-xs":"generic-wrapper__padding-bottom-xs_1fbon","padding-bottom-s":"generic-wrapper__padding-bottom-s_1fbon","padding-bottom-m":"generic-wrapper__padding-bottom-m_1fbon","padding-bottom-l":"generic-wrapper__padding-bottom-l_1fbon","padding-bottom-xl":"generic-wrapper__padding-bottom-xl_1fbon","padding-left-3xs":"generic-wrapper__padding-left-3xs_1fbon","padding-left-2xs":"generic-wrapper__padding-left-2xs_1fbon","padding-left-xs":"generic-wrapper__padding-left-xs_1fbon","padding-left-s":"generic-wrapper__padding-left-s_1fbon","padding-left-m":"generic-wrapper__padding-left-m_1fbon","padding-left-l":"generic-wrapper__padding-left-l_1fbon","padding-left-xl":"generic-wrapper__padding-left-xl_1fbon","gap-0":"generic-wrapper__gap-0_1fbon","gap-2":"generic-wrapper__gap-2_1fbon","gap-4":"generic-wrapper__gap-4_1fbon","gap-8":"generic-wrapper__gap-8_1fbon","gap-12":"generic-wrapper__gap-12_1fbon","gap-16":"generic-wrapper__gap-16_1fbon","gap-20":"generic-wrapper__gap-20_1fbon","gap-24":"generic-wrapper__gap-24_1fbon","gap-32":"generic-wrapper__gap-32_1fbon","gap-40":"generic-wrapper__gap-40_1fbon","gap-48":"generic-wrapper__gap-48_1fbon","gap-56":"generic-wrapper__gap-56_1fbon","gap-64":"generic-wrapper__gap-64_1fbon","gap-72":"generic-wrapper__gap-72_1fbon","gap-80":"generic-wrapper__gap-80_1fbon","gap-96":"generic-wrapper__gap-96_1fbon","gap-128":"generic-wrapper__gap-128_1fbon"};
 require('./index.css');
 
-const GenericWrapper = ({ children, padding, alignItems, justifyContent, className, dataTestId, column = false, grow = false, ...restProps }) => {
+const GenericWrapper = ({ children, padding, alignItems, justifyContent, className, dataTestId, column = false, grow = false, gap, ...restProps }) => {
     const paddingStyles = padding && {
         [styles[`padding-top-${padding.top}`]]: padding.top,
         [styles[`padding-right-${padding.right}`]]: padding.right,
@@ -15,7 +15,7 @@ const GenericWrapper = ({ children, padding, alignItems, justifyContent, classNa
     const justifyContentStyles = justifyContent && styles[`justify-${justifyContent}`];
     const growStyles = grow && styles.grow;
     const columnsStyles = column && styles.column;
-    return (React.createElement("div", { className: cn(styles.component, columnsStyles, alignmentStyles, paddingStyles, justifyContentStyles, growStyles, className), "data-test-id": dataTestId, ...restProps }, children));
+    return (React.createElement("div", { className: cn(styles.component, columnsStyles, alignmentStyles, paddingStyles, justifyContentStyles, growStyles, className, { [styles[`gap-${gap}`]]: gap }), "data-test-id": dataTestId, ...restProps }, children));
 };
 
 export { GenericWrapper };

package/generic-wrapper/modern/index.css

@@ -12,13 +12,15 @@
     /* Hard up */
 } :root {
 } :root {
-    --gap-3xs: 2px;
-    --gap-2xs: 4px;
-    --gap-xs: 8px;
-    --gap-s: 12px;
-    --gap-m: 16px;
-    --gap-l: 20px;
-    --gap-xl: 24px;
+    --gap-3xs: 2px; /* deprecated */
+    --gap-2xs: 4px; /* deprecated */
+    --gap-xs: 8px; /* deprecated */
+    --gap-s: 12px; /* deprecated */ /* deprecated */
+    --gap-m: 16px; /* deprecated */
+    --gap-l: 20px; /* deprecated */
+    --gap-xl: 24px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+
+    /* новые значения, используйте их */
 } :root {
 } :root {
 } .generic-wrapper__component_1fbon {
@@ -106,4 +108,72 @@
         padding-left: var(--gap-l);
     } .generic-wrapper__padding-left-xl_1fbon {
         padding-left: var(--gap-xl);
+    } /* prettier-ignore */ .generic-wrapper__gap-0_1fbon {
+        grid-gap: 0px;
+        grid-gap: 0px;
+        gap: 0px;
+    } .generic-wrapper__gap-2_1fbon {
+        grid-gap: 2px;
+        grid-gap: 2px;
+        gap: 2px;
+    } .generic-wrapper__gap-4_1fbon {
+        grid-gap: 4px;
+        grid-gap: 4px;
+        gap: 4px;
+    } .generic-wrapper__gap-8_1fbon {
+        grid-gap: 8px;
+        grid-gap: 8px;
+        gap: 8px;
+    } .generic-wrapper__gap-12_1fbon {
+        grid-gap: 12px;
+        grid-gap: 12px;
+        gap: 12px;
+    } .generic-wrapper__gap-16_1fbon {
+        grid-gap: 16px;
+        grid-gap: 16px;
+        gap: 16px;
+    } .generic-wrapper__gap-20_1fbon {
+        grid-gap: 20px;
+        grid-gap: 20px;
+        gap: 20px;
+    } .generic-wrapper__gap-24_1fbon {
+        grid-gap: 24px;
+        grid-gap: 24px;
+        gap: 24px;
+    } .generic-wrapper__gap-32_1fbon {
+        grid-gap: 32px;
+        grid-gap: 32px;
+        gap: 32px;
+    } .generic-wrapper__gap-40_1fbon {
+        grid-gap: 40px;
+        grid-gap: 40px;
+        gap: 40px;
+    } .generic-wrapper__gap-48_1fbon {
+        grid-gap: 48px;
+        grid-gap: 48px;
+        gap: 48px;
+    } .generic-wrapper__gap-56_1fbon {
+        grid-gap: 56px;
+        grid-gap: 56px;
+        gap: 56px;
+    } .generic-wrapper__gap-64_1fbon {
+        grid-gap: 64px;
+        grid-gap: 64px;
+        gap: 64px;
+    } .generic-wrapper__gap-72_1fbon {
+        grid-gap: 72px;
+        grid-gap: 72px;
+        gap: 72px;
+    } .generic-wrapper__gap-80_1fbon {
+        grid-gap: 80px;
+        grid-gap: 80px;
+        gap: 80px;
+    } .generic-wrapper__gap-96_1fbon {
+        grid-gap: 96px;
+        grid-gap: 96px;
+        gap: 96px;
+    } .generic-wrapper__gap-128_1fbon {
+        grid-gap: 128px;
+        grid-gap: 128px;
+        gap: 128px;
     }

package/grid/col/Component.js

@@ -4,7 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
 var utils_index = require('../utils/index.js');
-var gutters_module = require('../gutters.module-3be8525a.js');
+var gutters_module = require('../gutters.module-6ff876ef.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/grid/esm/Component.js

@@ -4,7 +4,7 @@ import 'tslib';
 import 'react';
 import 'classnames';
 import './utils/index.js';
-import './gutters.module-05406eaf.js';
+import './gutters.module-eb96fda7.js';
 
 var Grid = {
     Row: Row,