@ozen-ui/kit 0.3.1 → 0.4.0

package/__inner__/cjs/components/Grid/Grid.css

@@ -80,6 +80,84 @@
 .Grid_gap_8xl {
     grid-gap: var(--space-8xl);
   }
+.Grid_colGap_0 {
+    grid-column-gap: 0;
+  }
+.Grid_colGap_xs {
+    grid-column-gap: var(--space-xs);
+  }
+.Grid_colGap_s {
+    grid-column-gap: var(--space-s);
+  }
+.Grid_colGap_m {
+    grid-column-gap: var(--space-m);
+  }
+.Grid_colGap_l {
+    grid-column-gap: var(--space-l);
+  }
+.Grid_colGap_xl {
+    grid-column-gap: var(--space-xl);
+  }
+.Grid_colGap_2xl {
+    grid-column-gap: var(--space-2xl);
+  }
+.Grid_colGap_3xl {
+    grid-column-gap: var(--space-3xl);
+  }
+.Grid_colGap_4xl {
+    grid-column-gap: var(--space-4xl);
+  }
+.Grid_colGap_5xl {
+    grid-column-gap: var(--space-5xl);
+  }
+.Grid_colGap_6xl {
+    grid-column-gap: var(--space-6xl);
+  }
+.Grid_colGap_7xl {
+    grid-column-gap: var(--space-7xl);
+  }
+.Grid_colGap_8xl {
+    grid-column-gap: var(--space-8xl);
+  }
+.Grid_rowGap_0 {
+    grid-row-gap: 0;
+  }
+.Grid_rowGap_xs {
+    grid-row-gap: var(--space-xs);
+  }
+.Grid_rowGap_s {
+    grid-row-gap: var(--space-s);
+  }
+.Grid_rowGap_m {
+    grid-row-gap: var(--space-m);
+  }
+.Grid_rowGap_l {
+    grid-row-gap: var(--space-l);
+  }
+.Grid_rowGap_xl {
+    grid-row-gap: var(--space-xl);
+  }
+.Grid_rowGap_2xl {
+    grid-row-gap: var(--space-2xl);
+  }
+.Grid_rowGap_3xl {
+    grid-row-gap: var(--space-3xl);
+  }
+.Grid_rowGap_4xl {
+    grid-row-gap: var(--space-4xl);
+  }
+.Grid_rowGap_5xl {
+    grid-row-gap: var(--space-5xl);
+  }
+.Grid_rowGap_6xl {
+    grid-row-gap: var(--space-6xl);
+  }
+.Grid_rowGap_7xl {
+    grid-row-gap: var(--space-7xl);
+  }
+.Grid_rowGap_8xl {
+    grid-row-gap: var(--space-8xl);
+  }
 @media (min-width: 0) {
       .Grid_gap_xs_0 {
     grid-gap: 0;
@@ -119,6 +197,84 @@
   }
       .Grid_gap_xs_8xl {
     grid-gap: var(--space-8xl);
+  }
+      .Grid_colGap_xs_0 {
+    grid-column-gap: 0;
+  }
+      .Grid_colGap_xs_xs {
+    grid-column-gap: var(--space-xs);
+  }
+      .Grid_colGap_xs_s {
+    grid-column-gap: var(--space-s);
+  }
+      .Grid_colGap_xs_m {
+    grid-column-gap: var(--space-m);
+  }
+      .Grid_colGap_xs_l {
+    grid-column-gap: var(--space-l);
+  }
+      .Grid_colGap_xs_xl {
+    grid-column-gap: var(--space-xl);
+  }
+      .Grid_colGap_xs_2xl {
+    grid-column-gap: var(--space-2xl);
+  }
+      .Grid_colGap_xs_3xl {
+    grid-column-gap: var(--space-3xl);
+  }
+      .Grid_colGap_xs_4xl {
+    grid-column-gap: var(--space-4xl);
+  }
+      .Grid_colGap_xs_5xl {
+    grid-column-gap: var(--space-5xl);
+  }
+      .Grid_colGap_xs_6xl {
+    grid-column-gap: var(--space-6xl);
+  }
+      .Grid_colGap_xs_7xl {
+    grid-column-gap: var(--space-7xl);
+  }
+      .Grid_colGap_xs_8xl {
+    grid-column-gap: var(--space-8xl);
+  }
+      .Grid_rowGap_xs_0 {
+    grid-row-gap: 0;
+  }
+      .Grid_rowGap_xs_xs {
+    grid-row-gap: var(--space-xs);
+  }
+      .Grid_rowGap_xs_s {
+    grid-row-gap: var(--space-s);
+  }
+      .Grid_rowGap_xs_m {
+    grid-row-gap: var(--space-m);
+  }
+      .Grid_rowGap_xs_l {
+    grid-row-gap: var(--space-l);
+  }
+      .Grid_rowGap_xs_xl {
+    grid-row-gap: var(--space-xl);
+  }
+      .Grid_rowGap_xs_2xl {
+    grid-row-gap: var(--space-2xl);
+  }
+      .Grid_rowGap_xs_3xl {
+    grid-row-gap: var(--space-3xl);
+  }
+      .Grid_rowGap_xs_4xl {
+    grid-row-gap: var(--space-4xl);
+  }
+      .Grid_rowGap_xs_5xl {
+    grid-row-gap: var(--space-5xl);
+  }
+      .Grid_rowGap_xs_6xl {
+    grid-row-gap: var(--space-6xl);
+  }
+      .Grid_rowGap_xs_7xl {
+    grid-row-gap: var(--space-7xl);
+  }
+      .Grid_rowGap_xs_8xl {
+    grid-row-gap: var(--space-8xl);
   }
       .Grid_cols_xs_1 {
     grid-template-columns: repeat(1, 1fr);
@@ -196,6 +352,84 @@
   }
       .Grid_gap_s_8xl {
     grid-gap: var(--space-8xl);
+  }
+      .Grid_colGap_s_0 {
+    grid-column-gap: 0;
+  }
+      .Grid_colGap_s_xs {
+    grid-column-gap: var(--space-xs);
+  }
+      .Grid_colGap_s_s {
+    grid-column-gap: var(--space-s);
+  }
+      .Grid_colGap_s_m {
+    grid-column-gap: var(--space-m);
+  }
+      .Grid_colGap_s_l {
+    grid-column-gap: var(--space-l);
+  }
+      .Grid_colGap_s_xl {
+    grid-column-gap: var(--space-xl);
+  }
+      .Grid_colGap_s_2xl {
+    grid-column-gap: var(--space-2xl);
+  }
+      .Grid_colGap_s_3xl {
+    grid-column-gap: var(--space-3xl);
+  }
+      .Grid_colGap_s_4xl {
+    grid-column-gap: var(--space-4xl);
+  }
+      .Grid_colGap_s_5xl {
+    grid-column-gap: var(--space-5xl);
+  }
+      .Grid_colGap_s_6xl {
+    grid-column-gap: var(--space-6xl);
+  }
+      .Grid_colGap_s_7xl {
+    grid-column-gap: var(--space-7xl);
+  }
+      .Grid_colGap_s_8xl {
+    grid-column-gap: var(--space-8xl);
+  }
+      .Grid_rowGap_s_0 {
+    grid-row-gap: 0;
+  }
+      .Grid_rowGap_s_xs {
+    grid-row-gap: var(--space-xs);
+  }
+      .Grid_rowGap_s_s {
+    grid-row-gap: var(--space-s);
+  }
+      .Grid_rowGap_s_m {
+    grid-row-gap: var(--space-m);
+  }
+      .Grid_rowGap_s_l {
+    grid-row-gap: var(--space-l);
+  }
+      .Grid_rowGap_s_xl {
+    grid-row-gap: var(--space-xl);
+  }
+      .Grid_rowGap_s_2xl {
+    grid-row-gap: var(--space-2xl);
+  }
+      .Grid_rowGap_s_3xl {
+    grid-row-gap: var(--space-3xl);
+  }
+      .Grid_rowGap_s_4xl {
+    grid-row-gap: var(--space-4xl);
+  }
+      .Grid_rowGap_s_5xl {
+    grid-row-gap: var(--space-5xl);
+  }
+      .Grid_rowGap_s_6xl {
+    grid-row-gap: var(--space-6xl);
+  }
+      .Grid_rowGap_s_7xl {
+    grid-row-gap: var(--space-7xl);
+  }
+      .Grid_rowGap_s_8xl {
+    grid-row-gap: var(--space-8xl);
   }
       .Grid_cols_s_1 {
     grid-template-columns: repeat(1, 1fr);
@@ -273,6 +507,84 @@
   }
       .Grid_gap_m_8xl {
     grid-gap: var(--space-8xl);
+  }
+      .Grid_colGap_m_0 {
+    grid-column-gap: 0;
+  }
+      .Grid_colGap_m_xs {
+    grid-column-gap: var(--space-xs);
+  }
+      .Grid_colGap_m_s {
+    grid-column-gap: var(--space-s);
+  }
+      .Grid_colGap_m_m {
+    grid-column-gap: var(--space-m);
+  }
+      .Grid_colGap_m_l {
+    grid-column-gap: var(--space-l);
+  }
+      .Grid_colGap_m_xl {
+    grid-column-gap: var(--space-xl);
+  }
+      .Grid_colGap_m_2xl {
+    grid-column-gap: var(--space-2xl);
+  }
+      .Grid_colGap_m_3xl {
+    grid-column-gap: var(--space-3xl);
+  }
+      .Grid_colGap_m_4xl {
+    grid-column-gap: var(--space-4xl);
+  }
+      .Grid_colGap_m_5xl {
+    grid-column-gap: var(--space-5xl);
+  }
+      .Grid_colGap_m_6xl {
+    grid-column-gap: var(--space-6xl);
+  }
+      .Grid_colGap_m_7xl {
+    grid-column-gap: var(--space-7xl);
+  }
+      .Grid_colGap_m_8xl {
+    grid-column-gap: var(--space-8xl);
+  }
+      .Grid_rowGap_m_0 {
+    grid-row-gap: 0;
+  }
+      .Grid_rowGap_m_xs {
+    grid-row-gap: var(--space-xs);
+  }
+      .Grid_rowGap_m_s {
+    grid-row-gap: var(--space-s);
+  }
+      .Grid_rowGap_m_m {
+    grid-row-gap: var(--space-m);
+  }
+      .Grid_rowGap_m_l {
+    grid-row-gap: var(--space-l);
+  }
+      .Grid_rowGap_m_xl {
+    grid-row-gap: var(--space-xl);
+  }
+      .Grid_rowGap_m_2xl {
+    grid-row-gap: var(--space-2xl);
+  }
+      .Grid_rowGap_m_3xl {
+    grid-row-gap: var(--space-3xl);
+  }
+      .Grid_rowGap_m_4xl {
+    grid-row-gap: var(--space-4xl);
+  }
+      .Grid_rowGap_m_5xl {
+    grid-row-gap: var(--space-5xl);
+  }
+      .Grid_rowGap_m_6xl {
+    grid-row-gap: var(--space-6xl);
+  }
+      .Grid_rowGap_m_7xl {
+    grid-row-gap: var(--space-7xl);
+  }
+      .Grid_rowGap_m_8xl {
+    grid-row-gap: var(--space-8xl);
   }
       .Grid_cols_m_1 {
     grid-template-columns: repeat(1, 1fr);
@@ -350,6 +662,84 @@
   }
       .Grid_gap_l_8xl {
     grid-gap: var(--space-8xl);
+  }
+      .Grid_colGap_l_0 {
+    grid-column-gap: 0;
+  }
+      .Grid_colGap_l_xs {
+    grid-column-gap: var(--space-xs);
+  }
+      .Grid_colGap_l_s {
+    grid-column-gap: var(--space-s);
+  }
+      .Grid_colGap_l_m {
+    grid-column-gap: var(--space-m);
+  }
+      .Grid_colGap_l_l {
+    grid-column-gap: var(--space-l);
+  }
+      .Grid_colGap_l_xl {
+    grid-column-gap: var(--space-xl);
+  }
+      .Grid_colGap_l_2xl {
+    grid-column-gap: var(--space-2xl);
+  }
+      .Grid_colGap_l_3xl {
+    grid-column-gap: var(--space-3xl);
+  }
+      .Grid_colGap_l_4xl {
+    grid-column-gap: var(--space-4xl);
+  }
+      .Grid_colGap_l_5xl {
+    grid-column-gap: var(--space-5xl);
+  }
+      .Grid_colGap_l_6xl {
+    grid-column-gap: var(--space-6xl);
+  }
+      .Grid_colGap_l_7xl {
+    grid-column-gap: var(--space-7xl);
+  }
+      .Grid_colGap_l_8xl {
+    grid-column-gap: var(--space-8xl);
+  }
+      .Grid_rowGap_l_0 {
+    grid-row-gap: 0;
+  }
+      .Grid_rowGap_l_xs {
+    grid-row-gap: var(--space-xs);
+  }
+      .Grid_rowGap_l_s {
+    grid-row-gap: var(--space-s);
+  }
+      .Grid_rowGap_l_m {
+    grid-row-gap: var(--space-m);
+  }
+      .Grid_rowGap_l_l {
+    grid-row-gap: var(--space-l);
+  }
+      .Grid_rowGap_l_xl {
+    grid-row-gap: var(--space-xl);
+  }
+      .Grid_rowGap_l_2xl {
+    grid-row-gap: var(--space-2xl);
+  }
+      .Grid_rowGap_l_3xl {
+    grid-row-gap: var(--space-3xl);
+  }
+      .Grid_rowGap_l_4xl {
+    grid-row-gap: var(--space-4xl);
+  }
+      .Grid_rowGap_l_5xl {
+    grid-row-gap: var(--space-5xl);
+  }
+      .Grid_rowGap_l_6xl {
+    grid-row-gap: var(--space-6xl);
+  }
+      .Grid_rowGap_l_7xl {
+    grid-row-gap: var(--space-7xl);
+  }
+      .Grid_rowGap_l_8xl {
+    grid-row-gap: var(--space-8xl);
   }
       .Grid_cols_l_1 {
     grid-template-columns: repeat(1, 1fr);

package/__inner__/cjs/components/Grid/Grid.d.ts

@@ -11,6 +11,10 @@ export type GridProps = {
     cols?: ResponsiveValue<GridColsVariant>;
     /** Отступы между элементами */
     gap?: ResponsiveValue<GridGapVariant>;
+    /** Отступы вокруг колонки */
+    colGap?: ResponsiveValue<GridGapVariant>;
+    /** Отступы вокруг строки */
+    rowGap?: ResponsiveValue<GridGapVariant>;
     /** Содержимое компонента */
     children?: ReactNode;
     /** Дополнительные СSS-классы */

package/__inner__/cjs/components/Grid/Grid.js

@@ -8,6 +8,7 @@ var classnames_1 = require("@bem-react/classnames");
 var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
 var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+var constants_1 = require("./constants");
 var useGrid_1 = require("./useGrid");
 exports.gridColsVariant = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
 exports.gridGapVariant = [
@@ -31,7 +32,7 @@ exports.Grid = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(fu
         props: inProps,
         name: 'Grid'
     });
-    var _a = props.cols, cols = _a === void 0 ? 12 : _a, _b = props.gap, gap = _b === void 0 ? '2xl' : _b, _c = props.as, Tag = _c === void 0 ? 'div' : _c, children = props.children, className = props.className, other = tslib_1.__rest(props, ["cols", "gap", "as", "children", "className"]);
-    return (react_1["default"].createElement(Tag, tslib_1.__assign({ className: (0, classnames_1.classnames)((0, exports.cnGrid)({}), (0, useGrid_1.useGenerateGridModsCn)(exports.cnGrid, { cols: cols, gap: gap }), className) }, other, { ref: ref }), children));
+    var _a = props.cols, cols = _a === void 0 ? constants_1.GRID_DEFAULT_COLS : _a, _b = props.gap, gap = _b === void 0 ? constants_1.GRID_DEFAULT_GAP : _b, _c = props.as, Tag = _c === void 0 ? constants_1.GRID_DEFAULT_TAG : _c, colGap = props.colGap, rowGap = props.rowGap, children = props.children, className = props.className, other = tslib_1.__rest(props, ["cols", "gap", "as", "colGap", "rowGap", "children", "className"]);
+    return (react_1["default"].createElement(Tag, tslib_1.__assign({ className: (0, classnames_1.classnames)((0, exports.cnGrid)({}), (0, useGrid_1.useGenerateGridModsCn)(exports.cnGrid, { cols: cols, gap: gap, colGap: colGap, rowGap: rowGap }), className) }, other, { ref: ref }), children));
 });
 exports.Grid.displayName = 'Grid';

package/__inner__/cjs/components/Grid/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const GRID_DEFAULT_COLS = 12;
+export declare const GRID_DEFAULT_GAP = "2xl";
+export declare const GRID_DEFAULT_TAG = "div";

package/__inner__/cjs/components/Grid/constants.js

@@ -0,0 +1,6 @@
+"use strict";
+exports.__esModule = true;
+exports.GRID_DEFAULT_TAG = exports.GRID_DEFAULT_GAP = exports.GRID_DEFAULT_COLS = void 0;
+exports.GRID_DEFAULT_COLS = 12;
+exports.GRID_DEFAULT_GAP = '2xl';
+exports.GRID_DEFAULT_TAG = 'div';

package/__inner__/cjs/components/Segment/components/SegmentItem.d.ts

@@ -15,7 +15,7 @@ export type SegmentItemProps = {
     /** Если {true} отображает компонент как выбранный */
     selected?: boolean;
     /** Содержимое компонента */
-    children: ReactNode;
+    children?: ReactNode;
     /** Ссылка на элемент SVG-иконки в компоненте */
     iconRef?: Ref<SVGSVGElement>;
     /** Ссылка на input-элемент в компоненте */
@@ -43,7 +43,7 @@ export declare const SegmentItem: React.ForwardRefExoticComponent<{
     /** Если {true} отображает компонент как выбранный */
     selected?: boolean | undefined;
     /** Содержимое компонента */
-    children: ReactNode;
+    children?: ReactNode;
     /** Ссылка на элемент SVG-иконки в компоненте */
     iconRef?: React.Ref<SVGSVGElement> | undefined;
     /** Ссылка на input-элемент в компоненте */

package/__inner__/esm/components/Grid/Grid.css

@@ -80,6 +80,84 @@
 .Grid_gap_8xl {
     grid-gap: var(--space-8xl);
   }
+.Grid_colGap_0 {
+    grid-column-gap: 0;
+  }
+.Grid_colGap_xs {
+    grid-column-gap: var(--space-xs);
+  }
+.Grid_colGap_s {
+    grid-column-gap: var(--space-s);
+  }
+.Grid_colGap_m {
+    grid-column-gap: var(--space-m);
+  }
+.Grid_colGap_l {
+    grid-column-gap: var(--space-l);
+  }
+.Grid_colGap_xl {
+    grid-column-gap: var(--space-xl);
+  }
+.Grid_colGap_2xl {
+    grid-column-gap: var(--space-2xl);
+  }
+.Grid_colGap_3xl {
+    grid-column-gap: var(--space-3xl);
+  }
+.Grid_colGap_4xl {
+    grid-column-gap: var(--space-4xl);
+  }
+.Grid_colGap_5xl {
+    grid-column-gap: var(--space-5xl);
+  }
+.Grid_colGap_6xl {
+    grid-column-gap: var(--space-6xl);
+  }
+.Grid_colGap_7xl {
+    grid-column-gap: var(--space-7xl);
+  }
+.Grid_colGap_8xl {
+    grid-column-gap: var(--space-8xl);
+  }
+.Grid_rowGap_0 {
+    grid-row-gap: 0;
+  }
+.Grid_rowGap_xs {
+    grid-row-gap: var(--space-xs);
+  }
+.Grid_rowGap_s {
+    grid-row-gap: var(--space-s);
+  }
+.Grid_rowGap_m {
+    grid-row-gap: var(--space-m);
+  }
+.Grid_rowGap_l {
+    grid-row-gap: var(--space-l);
+  }
+.Grid_rowGap_xl {
+    grid-row-gap: var(--space-xl);
+  }
+.Grid_rowGap_2xl {
+    grid-row-gap: var(--space-2xl);
+  }
+.Grid_rowGap_3xl {
+    grid-row-gap: var(--space-3xl);
+  }
+.Grid_rowGap_4xl {
+    grid-row-gap: var(--space-4xl);
+  }
+.Grid_rowGap_5xl {
+    grid-row-gap: var(--space-5xl);
+  }
+.Grid_rowGap_6xl {
+    grid-row-gap: var(--space-6xl);
+  }
+.Grid_rowGap_7xl {
+    grid-row-gap: var(--space-7xl);
+  }
+.Grid_rowGap_8xl {
+    grid-row-gap: var(--space-8xl);
+  }
 @media (min-width: 0) {
       .Grid_gap_xs_0 {
     grid-gap: 0;
@@ -119,6 +197,84 @@
   }
       .Grid_gap_xs_8xl {
     grid-gap: var(--space-8xl);
+  }
+      .Grid_colGap_xs_0 {
+    grid-column-gap: 0;
+  }
+      .Grid_colGap_xs_xs {
+    grid-column-gap: var(--space-xs);
+  }
+      .Grid_colGap_xs_s {
+    grid-column-gap: var(--space-s);
+  }
+      .Grid_colGap_xs_m {
+    grid-column-gap: var(--space-m);
+  }
+      .Grid_colGap_xs_l {
+    grid-column-gap: var(--space-l);
+  }
+      .Grid_colGap_xs_xl {
+    grid-column-gap: var(--space-xl);
+  }
+      .Grid_colGap_xs_2xl {
+    grid-column-gap: var(--space-2xl);
+  }
+      .Grid_colGap_xs_3xl {
+    grid-column-gap: var(--space-3xl);
+  }
+      .Grid_colGap_xs_4xl {
+    grid-column-gap: var(--space-4xl);
+  }
+      .Grid_colGap_xs_5xl {
+    grid-column-gap: var(--space-5xl);
+  }
+      .Grid_colGap_xs_6xl {
+    grid-column-gap: var(--space-6xl);
+  }
+      .Grid_colGap_xs_7xl {
+    grid-column-gap: var(--space-7xl);
+  }
+      .Grid_colGap_xs_8xl {
+    grid-column-gap: var(--space-8xl);
+  }
+      .Grid_rowGap_xs_0 {
+    grid-row-gap: 0;
+  }
+      .Grid_rowGap_xs_xs {
+    grid-row-gap: var(--space-xs);
+  }
+      .Grid_rowGap_xs_s {
+    grid-row-gap: var(--space-s);
+  }
+      .Grid_rowGap_xs_m {
+    grid-row-gap: var(--space-m);
+  }
+      .Grid_rowGap_xs_l {
+    grid-row-gap: var(--space-l);
+  }
+      .Grid_rowGap_xs_xl {
+    grid-row-gap: var(--space-xl);
+  }
+      .Grid_rowGap_xs_2xl {
+    grid-row-gap: var(--space-2xl);
+  }
+      .Grid_rowGap_xs_3xl {
+    grid-row-gap: var(--space-3xl);
+  }
+      .Grid_rowGap_xs_4xl {
+    grid-row-gap: var(--space-4xl);
+  }
+      .Grid_rowGap_xs_5xl {
+    grid-row-gap: var(--space-5xl);
+  }
+      .Grid_rowGap_xs_6xl {
+    grid-row-gap: var(--space-6xl);
+  }
+      .Grid_rowGap_xs_7xl {
+    grid-row-gap: var(--space-7xl);
+  }
+      .Grid_rowGap_xs_8xl {
+    grid-row-gap: var(--space-8xl);
   }
       .Grid_cols_xs_1 {
     grid-template-columns: repeat(1, 1fr);
@@ -196,6 +352,84 @@
   }
       .Grid_gap_s_8xl {
     grid-gap: var(--space-8xl);
+  }
+      .Grid_colGap_s_0 {
+    grid-column-gap: 0;
+  }
+      .Grid_colGap_s_xs {
+    grid-column-gap: var(--space-xs);
+  }
+      .Grid_colGap_s_s {
+    grid-column-gap: var(--space-s);
+  }
+      .Grid_colGap_s_m {
+    grid-column-gap: var(--space-m);
+  }
+      .Grid_colGap_s_l {
+    grid-column-gap: var(--space-l);
+  }
+      .Grid_colGap_s_xl {
+    grid-column-gap: var(--space-xl);
+  }
+      .Grid_colGap_s_2xl {
+    grid-column-gap: var(--space-2xl);
+  }
+      .Grid_colGap_s_3xl {
+    grid-column-gap: var(--space-3xl);
+  }
+      .Grid_colGap_s_4xl {
+    grid-column-gap: var(--space-4xl);
+  }
+      .Grid_colGap_s_5xl {
+    grid-column-gap: var(--space-5xl);
+  }
+      .Grid_colGap_s_6xl {
+    grid-column-gap: var(--space-6xl);
+  }
+      .Grid_colGap_s_7xl {
+    grid-column-gap: var(--space-7xl);
+  }
+      .Grid_colGap_s_8xl {
+    grid-column-gap: var(--space-8xl);
+  }
+      .Grid_rowGap_s_0 {
+    grid-row-gap: 0;
+  }
+      .Grid_rowGap_s_xs {
+    grid-row-gap: var(--space-xs);
+  }
+      .Grid_rowGap_s_s {
+    grid-row-gap: var(--space-s);
+  }
+      .Grid_rowGap_s_m {
+    grid-row-gap: var(--space-m);
+  }
+      .Grid_rowGap_s_l {
+    grid-row-gap: var(--space-l);
+  }
+      .Grid_rowGap_s_xl {
+    grid-row-gap: var(--space-xl);
+  }
+      .Grid_rowGap_s_2xl {
+    grid-row-gap: var(--space-2xl);
+  }
+      .Grid_rowGap_s_3xl {
+    grid-row-gap: var(--space-3xl);
+  }
+      .Grid_rowGap_s_4xl {
+    grid-row-gap: var(--space-4xl);
+  }
+      .Grid_rowGap_s_5xl {
+    grid-row-gap: var(--space-5xl);
+  }
+      .Grid_rowGap_s_6xl {
+    grid-row-gap: var(--space-6xl);
+  }
+      .Grid_rowGap_s_7xl {
+    grid-row-gap: var(--space-7xl);
+  }
+      .Grid_rowGap_s_8xl {
+    grid-row-gap: var(--space-8xl);
   }
       .Grid_cols_s_1 {
     grid-template-columns: repeat(1, 1fr);
@@ -273,6 +507,84 @@
   }
       .Grid_gap_m_8xl {
     grid-gap: var(--space-8xl);
+  }
+      .Grid_colGap_m_0 {
+    grid-column-gap: 0;
+  }
+      .Grid_colGap_m_xs {
+    grid-column-gap: var(--space-xs);
+  }
+      .Grid_colGap_m_s {
+    grid-column-gap: var(--space-s);
+  }
+      .Grid_colGap_m_m {
+    grid-column-gap: var(--space-m);
+  }
+      .Grid_colGap_m_l {
+    grid-column-gap: var(--space-l);
+  }
+      .Grid_colGap_m_xl {
+    grid-column-gap: var(--space-xl);
+  }
+      .Grid_colGap_m_2xl {
+    grid-column-gap: var(--space-2xl);
+  }
+      .Grid_colGap_m_3xl {
+    grid-column-gap: var(--space-3xl);
+  }
+      .Grid_colGap_m_4xl {
+    grid-column-gap: var(--space-4xl);
+  }
+      .Grid_colGap_m_5xl {
+    grid-column-gap: var(--space-5xl);
+  }
+      .Grid_colGap_m_6xl {
+    grid-column-gap: var(--space-6xl);
+  }
+      .Grid_colGap_m_7xl {
+    grid-column-gap: var(--space-7xl);
+  }
+      .Grid_colGap_m_8xl {
+    grid-column-gap: var(--space-8xl);
+  }
+      .Grid_rowGap_m_0 {
+    grid-row-gap: 0;
+  }
+      .Grid_rowGap_m_xs {
+    grid-row-gap: var(--space-xs);
+  }
+      .Grid_rowGap_m_s {
+    grid-row-gap: var(--space-s);
+  }
+      .Grid_rowGap_m_m {
+    grid-row-gap: var(--space-m);
+  }
+      .Grid_rowGap_m_l {
+    grid-row-gap: var(--space-l);
+  }
+      .Grid_rowGap_m_xl {
+    grid-row-gap: var(--space-xl);
+  }
+      .Grid_rowGap_m_2xl {
+    grid-row-gap: var(--space-2xl);
+  }
+      .Grid_rowGap_m_3xl {
+    grid-row-gap: var(--space-3xl);
+  }
+      .Grid_rowGap_m_4xl {
+    grid-row-gap: var(--space-4xl);
+  }
+      .Grid_rowGap_m_5xl {
+    grid-row-gap: var(--space-5xl);
+  }
+      .Grid_rowGap_m_6xl {
+    grid-row-gap: var(--space-6xl);
+  }
+      .Grid_rowGap_m_7xl {
+    grid-row-gap: var(--space-7xl);
+  }
+      .Grid_rowGap_m_8xl {
+    grid-row-gap: var(--space-8xl);
   }
       .Grid_cols_m_1 {
     grid-template-columns: repeat(1, 1fr);
@@ -350,6 +662,84 @@
   }
       .Grid_gap_l_8xl {
     grid-gap: var(--space-8xl);
+  }
+      .Grid_colGap_l_0 {
+    grid-column-gap: 0;
+  }
+      .Grid_colGap_l_xs {
+    grid-column-gap: var(--space-xs);
+  }
+      .Grid_colGap_l_s {
+    grid-column-gap: var(--space-s);
+  }
+      .Grid_colGap_l_m {
+    grid-column-gap: var(--space-m);
+  }
+      .Grid_colGap_l_l {
+    grid-column-gap: var(--space-l);
+  }
+      .Grid_colGap_l_xl {
+    grid-column-gap: var(--space-xl);
+  }
+      .Grid_colGap_l_2xl {
+    grid-column-gap: var(--space-2xl);
+  }
+      .Grid_colGap_l_3xl {
+    grid-column-gap: var(--space-3xl);
+  }
+      .Grid_colGap_l_4xl {
+    grid-column-gap: var(--space-4xl);
+  }
+      .Grid_colGap_l_5xl {
+    grid-column-gap: var(--space-5xl);
+  }
+      .Grid_colGap_l_6xl {
+    grid-column-gap: var(--space-6xl);
+  }
+      .Grid_colGap_l_7xl {
+    grid-column-gap: var(--space-7xl);
+  }
+      .Grid_colGap_l_8xl {
+    grid-column-gap: var(--space-8xl);
+  }
+      .Grid_rowGap_l_0 {
+    grid-row-gap: 0;
+  }
+      .Grid_rowGap_l_xs {
+    grid-row-gap: var(--space-xs);
+  }
+      .Grid_rowGap_l_s {
+    grid-row-gap: var(--space-s);
+  }
+      .Grid_rowGap_l_m {
+    grid-row-gap: var(--space-m);
+  }
+      .Grid_rowGap_l_l {
+    grid-row-gap: var(--space-l);
+  }
+      .Grid_rowGap_l_xl {
+    grid-row-gap: var(--space-xl);
+  }
+      .Grid_rowGap_l_2xl {
+    grid-row-gap: var(--space-2xl);
+  }
+      .Grid_rowGap_l_3xl {
+    grid-row-gap: var(--space-3xl);
+  }
+      .Grid_rowGap_l_4xl {
+    grid-row-gap: var(--space-4xl);
+  }
+      .Grid_rowGap_l_5xl {
+    grid-row-gap: var(--space-5xl);
+  }
+      .Grid_rowGap_l_6xl {
+    grid-row-gap: var(--space-6xl);
+  }
+      .Grid_rowGap_l_7xl {
+    grid-row-gap: var(--space-7xl);
+  }
+      .Grid_rowGap_l_8xl {
+    grid-row-gap: var(--space-8xl);
   }
       .Grid_cols_l_1 {
     grid-template-columns: repeat(1, 1fr);

package/__inner__/esm/components/Grid/Grid.d.ts

@@ -11,6 +11,10 @@ export type GridProps = {
     cols?: ResponsiveValue<GridColsVariant>;
     /** Отступы между элементами */
     gap?: ResponsiveValue<GridGapVariant>;
+    /** Отступы вокруг колонки */
+    colGap?: ResponsiveValue<GridGapVariant>;
+    /** Отступы вокруг строки */
+    rowGap?: ResponsiveValue<GridGapVariant>;
     /** Содержимое компонента */
     children?: ReactNode;
     /** Дополнительные СSS-классы */

package/__inner__/esm/components/Grid/Grid.js

@@ -5,6 +5,7 @@ import { classnames } from '@bem-react/classnames';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
+import { GRID_DEFAULT_COLS, GRID_DEFAULT_GAP, GRID_DEFAULT_TAG, } from './constants';
 import { useGenerateGridModsCn } from './useGrid';
 export var gridColsVariant = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
 export var gridGapVariant = [
@@ -28,7 +29,7 @@ export var Grid = polymorphicComponentWithRef(function (inProps, ref) {
         props: inProps,
         name: 'Grid'
     });
-    var _a = props.cols, cols = _a === void 0 ? 12 : _a, _b = props.gap, gap = _b === void 0 ? '2xl' : _b, _c = props.as, Tag = _c === void 0 ? 'div' : _c, children = props.children, className = props.className, other = __rest(props, ["cols", "gap", "as", "children", "className"]);
-    return (React.createElement(Tag, __assign({ className: classnames(cnGrid({}), useGenerateGridModsCn(cnGrid, { cols: cols, gap: gap }), className) }, other, { ref: ref }), children));
+    var _a = props.cols, cols = _a === void 0 ? GRID_DEFAULT_COLS : _a, _b = props.gap, gap = _b === void 0 ? GRID_DEFAULT_GAP : _b, _c = props.as, Tag = _c === void 0 ? GRID_DEFAULT_TAG : _c, colGap = props.colGap, rowGap = props.rowGap, children = props.children, className = props.className, other = __rest(props, ["cols", "gap", "as", "colGap", "rowGap", "children", "className"]);
+    return (React.createElement(Tag, __assign({ className: classnames(cnGrid({}), useGenerateGridModsCn(cnGrid, { cols: cols, gap: gap, colGap: colGap, rowGap: rowGap }), className) }, other, { ref: ref }), children));
 });
 Grid.displayName = 'Grid';

package/__inner__/esm/components/Grid/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const GRID_DEFAULT_COLS = 12;
+export declare const GRID_DEFAULT_GAP = "2xl";
+export declare const GRID_DEFAULT_TAG = "div";

package/__inner__/esm/components/Grid/constants.js

@@ -0,0 +1,3 @@
+export var GRID_DEFAULT_COLS = 12;
+export var GRID_DEFAULT_GAP = '2xl';
+export var GRID_DEFAULT_TAG = 'div';

package/__inner__/esm/components/Segment/components/SegmentItem.d.ts

@@ -15,7 +15,7 @@ export type SegmentItemProps = {
     /** Если {true} отображает компонент как выбранный */
     selected?: boolean;
     /** Содержимое компонента */
-    children: ReactNode;
+    children?: ReactNode;
     /** Ссылка на элемент SVG-иконки в компоненте */
     iconRef?: Ref<SVGSVGElement>;
     /** Ссылка на input-элемент в компоненте */
@@ -43,7 +43,7 @@ export declare const SegmentItem: React.ForwardRefExoticComponent<{
     /** Если {true} отображает компонент как выбранный */
     selected?: boolean | undefined;
     /** Содержимое компонента */
-    children: ReactNode;
+    children?: ReactNode;
     /** Ссылка на элемент SVG-иконки в компоненте */
     iconRef?: React.Ref<SVGSVGElement> | undefined;
     /** Ссылка на input-элемент в компоненте */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "React component library",
   "files": [
     "*"

package/useListState/package.json

@@ -1,5 +0,0 @@
-{
-	"main": "../__inner__/cjs/hooks/useListState/index.js",
-	"module": "../__inner__/esm/hooks/useListState/index.js",
-	"types": "../__inner__/esm/hooks/useListState/index.d.ts"
-}