@ozen-ui/kit 0.20.0 → 0.22.0

package/__inner__/cjs/components/Button/Button.css

@@ -14,16 +14,18 @@
   padding: 0 var(--button-padding-x);
   background-color: var(--button-bg-color);
   border-radius: var(--border-radius-xs);
-  transition: background-color var(--transition-default),
-    border-color var(--transition-default), box-shadow var(--transition-default),
+  transition:
+    background-color var(--transition-default),
+    border-color var(--transition-default),
+    box-shadow var(--transition-default),
     opacity var(--transition-default);
   -webkit-tap-highlight-color: unset;
   position: relative;
 }
 .Button_size_2xs {
-      --button-height: 32px;
+      --button-height: var(--control-height-2xs);
+      --button-padding-x: var(--control-padding-xs);
       --button-min-width: 56px;
-      --button-padding-x: 12px;
 
       font: var(--typography-text-2xs-font);
 
@@ -32,9 +34,9 @@
       text-transform: var(--typography-text-2xs-text_transform, none);
     }
 .Button_size_xs {
-      --button-height: 40px;
+      --button-height: var(--control-height-xs);
+      --button-padding-x: var(--control-padding-xs);
       --button-min-width: 64px;
-      --button-padding-x: 12px;
 
       font: var(--typography-text-xs-font);
 
@@ -43,9 +45,9 @@
       text-transform: var(--typography-text-xs-text_transform, none);
     }
 .Button_size_s {
-      --button-height: 48px;
+      --button-height: var(--control-height-s);
+      --button-padding-x: var(--control-padding-s);
       --button-min-width: 72px;
-      --button-padding-x: 16px;
 
       font: var(--typography-text-s-font);
 
@@ -54,9 +56,9 @@
       text-transform: var(--typography-text-s-text_transform, none);
     }
 .Button_size_m {
-      --button-height: 56px;
+      --button-height: var(--control-height-m);
+      --button-padding-x: var(--control-padding-m);
       --button-min-width: 80px;
-      --button-padding-x: 20px;
 
       font: var(--typography-text-m-font);
 
@@ -65,9 +67,9 @@
       text-transform: var(--typography-text-m-text_transform, none);
     }
 .Button_size_l {
-      --button-height: 64px;
+      --button-height: var(--control-height-l);
+      --button-padding-x: var(--control-padding-l);
       --button-min-width: 88px;
-      --button-padding-x: 24px;
 
       font: var(--typography-text-l-font);
 

package/__inner__/cjs/components/Card/Card.js

@@ -28,7 +28,7 @@ exports.Card = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(fu
     var _a = props.size, size = _a === void 0 ? 'm' : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.interactive, interactive = _c === void 0 ? false : _c, _d = props.borderWidth, borderWidth = _d === void 0 ? 's' : _d, _e = props.borderVariant, borderVariant = _e === void 0 ? 'solid' : _e, _f = props.borderColor, borderColor = _f === void 0 ? 'standard' : _f, _g = props.backgroundColor, backgroundColor = _g === void 0 ? 'standard' : _g, _h = props.as, Tag = _h === void 0 ? 'div' : _h, className = props.className, children = props.children, other = tslib_1.__rest(props, ["size", "disabled", "interactive", "borderWidth", "borderVariant", "borderColor", "backgroundColor", "as", "className", "children"]);
     var shouldBeInteractive = !disabled && interactive;
     var shouldShowBorder = borderWidth !== 'none';
-    return (react_1.default.createElement(Paper_1.Paper, tslib_1.__assign({ as: Tag, radius: matchBorderRadiusPaperToCard[size], background: matchBackgroundColorPaperToCard[backgroundColor] }, other, { ref: ref, "aria-disabled": disabled }, (shouldBeInteractive && { tabIndex: 0 }), { className: (0, exports.cnCard)(tslib_1.__assign({ size: size, disabled: disabled, interactive: shouldBeInteractive, backgroundColor: backgroundColor, borderWidth: borderWidth }, (shouldShowBorder && {
+    return (react_1.default.createElement(Paper_1.Paper, tslib_1.__assign({ as: Tag, radius: matchBorderRadiusPaperToCard[size], background: matchBackgroundColorPaperToCard[backgroundColor] }, (shouldBeInteractive && { tabIndex: 0 }), { "aria-disabled": disabled }, other, { ref: ref, className: (0, exports.cnCard)(tslib_1.__assign({ size: size, disabled: disabled, interactive: shouldBeInteractive, backgroundColor: backgroundColor, borderWidth: borderWidth }, (shouldShowBorder && {
             borderVariant: borderVariant,
             borderColor: borderColor,
         })), [className]) }), children));

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

@@ -1,20 +1,20 @@
 import './IconButton.css';
-import React from 'react';
 import type { ElementType } from 'react';
 import type { IconSize, IconProps } from '@ozen-ui/icons';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import type { RenderContentType } from '../../utils/renderContent';
 import { ICON_BUTTON_DEFAULT_TAG } from './constants';
 export declare const iconButtonColorVariant: readonly ["primary", "secondary"];
 export declare const iconButtonVariant: readonly ["contained", "outlined", "ghost", "function", "floating"];
 export type IconButtonVariant = (typeof iconButtonVariant)[number];
 export type IconButtonColorVariant = (typeof iconButtonColorVariant)[number];
-export type IconButtonIconProps = {
+export type IconButtonIcon = RenderContentType<IconProps & {
     size?: IconSize;
-};
+}>['content'];
 type IconButtonBaseProps = {
     /** Иконка */
-    icon: React.FC<IconProps & IconButtonIconProps>;
+    icon: IconButtonIcon;
     /** Вариант представления компонента */
     variant?: IconButtonVariant;
     /** Размер */
@@ -31,9 +31,9 @@ type IconButtonBaseProps = {
     loading?: boolean;
     /** Дополнительные CSS-классы */
     className?: string;
-    children?: never;
     /** Если {true} делает компонент круглым  */
     rounded?: boolean;
+    children?: never;
 };
 export type IconButtonProps<As extends ElementType = typeof ICON_BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<IconButtonBaseProps, As>;
 export declare const cnIconButton: import("@bem-react/classname").ClassNameFormatter;

package/__inner__/cjs/components/IconButton/IconButton.js

@@ -4,11 +4,11 @@ exports.IconButton = exports.cnIconButton = exports.iconButtonVariant = exports.
 var tslib_1 = require("tslib");
 require("./IconButton.css");
 var react_1 = tslib_1.__importStar(require("react"));
-var react_is_1 = require("react-is");
 var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
 var getIconSizeToFormElement_1 = require("../../utils/getIconSizeToFormElement");
 var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+var renderContent_1 = require("../../utils/renderContent");
 var Loader_1 = require("../Loader");
 var constants_1 = require("./constants");
 exports.iconButtonColorVariant = ['primary', 'secondary'];
@@ -32,23 +32,31 @@ exports.IconButton = (0, polymorphicComponentWithRef_1.polymorphicComponentWithR
         props: inProps,
         name: 'IconButton',
     });
-    var _a = props.size, size = _a === void 0 ? constants_1.ICON_BUTTON_DEFAULT_SIZE : _a, _b = props.variant, variant = _b === void 0 ? constants_1.ICON_BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? constants_1.ICON_BUTTON_DEFAULT_COLOR : _c, _d = props.as, Tag = _d === void 0 ? constants_1.ICON_BUTTON_DEFAULT_TAG : _d, iconColor = props.iconColor, compressed = props.compressed, loading = props.loading, disabled = props.disabled, className = props.className, Icon = props.icon, onClick = props.onClick, rounded = props.rounded, other = tslib_1.__rest(props, ["size", "variant", "color", "as", "iconColor", "compressed", "loading", "disabled", "className", "icon", "onClick", "rounded"]);
-    var iconSize = (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size);
+    var _a = props.size, size = _a === void 0 ? constants_1.ICON_BUTTON_DEFAULT_SIZE : _a, _b = props.variant, variant = _b === void 0 ? constants_1.ICON_BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? constants_1.ICON_BUTTON_DEFAULT_COLOR : _c, _d = props.as, Tag = _d === void 0 ? constants_1.ICON_BUTTON_DEFAULT_TAG : _d, iconColor = props.iconColor, compressed = props.compressed, loading = props.loading, disabled = props.disabled, className = props.className, icon = props.icon, onClick = props.onClick, rounded = props.rounded, other = tslib_1.__rest(props, ["size", "variant", "color", "as", "iconColor", "compressed", "loading", "disabled", "className", "icon", "onClick", "rounded"]);
     var isInteractionPrevented = disabled || loading;
     var handleClick = function (event) {
         if (onClick && !disabled && !loading) {
             onClick(event);
         }
     };
+    var renderIcon = function (content) {
+        return (0, renderContent_1.renderContent)({
+            content: content,
+            props: {
+                size: (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size),
+                color: iconColor,
+            },
+        });
+    };
     var resolvedChildren = (0, react_1.useMemo)(function () {
         if (loading) {
             return (react_1.default.createElement(Loader_1.Loader, { className: (0, exports.cnIconButton)('Loader'), color: "var(--color-content-disabled)", size: loaderSizeMapper[size] }));
         }
-        if ((0, react_is_1.isValidElementType)(Icon)) {
-            return react_1.default.createElement(Icon, { size: iconSize, color: iconColor });
+        if (icon) {
+            return renderIcon(icon);
         }
         return null;
-    }, [loading, size, iconColor, iconSize, Icon]);
+    }, [loading, size, iconColor, icon, renderIcon]);
     return (react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnIconButton)({
             variant: variant,
             size: size,

package/__inner__/cjs/components/Indicator/Indicator.css

@@ -3,6 +3,7 @@
   inline-size: var(--indicator-size);
   block-size: var(--indicator-size);
   border-radius: calc(var(--indicator-size) / 2);
+  flex-shrink: 0;
 }
 
   .Indicator_variant_neutral {

package/__inner__/cjs/components/List/List.css

@@ -1,6 +1,11 @@
 .List {
+  --list-item-color: var(--color-content-primary);
   --list-item-border-radius: var(--border-radius-xs);
-  --list-pipka-background-color: var(--color-content-action);
+  --list-item-bg-color: transparent;
+  --list-item-bg-color-hover: var(--color-background-main-hover);
+  --list-item-bg-color-active: var(--color-background-main-pressed);
+  --list-item-bg-color-disabled: var(--color-content-tertiary);
+  --list-pipka-bg-color: var(--color-content-action);
   --list-pipka-border-radius: 0 var(--border-radius-xs) var(--border-radius-xs)
     0;
   display: flex;

package/__inner__/cjs/components/List/components/ListItem/ListItem.css

@@ -4,7 +4,7 @@
   min-block-size: var(--list-item-min-height);
   padding: var(--list-item-padding);
   border-radius: var(--list-item-border-radius);
-  color: var(--color-content-primary);
+  color: var(--list-item-color);
   box-sizing: border-box;
   flex-shrink: 0;
   margin: 0 var(--list-gutter);

package/__inner__/cjs/components/List/components/ListItemButton/ListItemButton.css

@@ -1,31 +1,31 @@
 .ListItemButton {
   inline-size: calc(100% - 2 * var(--list-gutter));
+  min-block-size: var(--list-item-min-height);
+  padding: var(--list-item-padding);
+  color: var(--list-item-color);
+  border-radius: var(--list-item-border-radius);
+  background-color: var(--list-item-bg-color);
+  margin: 0 var(--list-gutter);
+  transition: background-color var(--transition-default);
   display: flex;
   flex-shrink: 0;
   align-items: center;
   box-sizing: border-box;
-  min-block-size: var(--list-item-min-height);
-  padding: var(--list-item-padding);
-  color: var(--color-content-primary);
   outline: none;
   text-decoration: none;
-  border-radius: var(--list-item-border-radius);
-  transition: background-color var(--transition-default);
   text-align: start;
-  background-color: transparent;
   cursor: pointer;
   overflow: hidden;
   -webkit-tap-highlight-color: transparent;
-  margin: 0 var(--list-gutter);
   border: none;
 }
 
   .ListItemButton:hover {
-    background-color: var(--color-background-main-hover);
+    background-color: var(--list-item-bg-color-hover);
   }
 
   .ListItemButton:active {
-    background-color: var(--color-background-main-pressed);
+    background-color: var(--list-item-bg-color-active);
   }
 
   .ListItemButton:focus {
@@ -38,7 +38,7 @@
 
   .ListItemButton_disabled {
     pointer-events: none;
-    color: var(--color-content-tertiary);
+    color: var(--list-item-bg-color-disabled);
   }
 
   .ListItemButton_disabled .ListItemText-TextPrimary,
@@ -50,7 +50,7 @@
     content: '';
     inline-size: var(--list-pipka-width);
     block-size: var(--list-pipka-height);
-    background-color: var(--list-pipka-background-color);
+    background-color: var(--list-pipka-bg-color);
     border-radius: var(--list-pipka-border-radius);
     position: absolute;
     inset-inline-start: 0;

package/__inner__/cjs/components/List/components/ListItemButton/ListItemButton.d.ts

@@ -8,6 +8,9 @@ export type ListItemButtonBaseProps = {
     children?: ReactNode;
     /** Если {true} делает элемент неактивным */
     disabled?: boolean;
+    /** Если {true} отображает элемент списка как выбранный */
+    selected?: boolean;
+    /** Идентификатор компонента для тестов */
     'data-testid'?: string;
 };
 export type ListItemButtonProps<As extends ElementType = typeof LIST_ITEM_BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<ListItemButtonBaseProps, As>;

package/__inner__/cjs/components/List/components/ListItemButton/ListItemButton.js

@@ -12,7 +12,7 @@ var constants_1 = require("../../constants");
 exports.cnListItemButton = (0, classname_1.cn)('ListItemButton');
 exports.ListItemButton = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'ListItemButton' });
-    var _a = props.as, Tag = _a === void 0 ? constants_1.LIST_ITEM_BUTTON_DEFAULT_TAG : _a, children = props.children, disabled = props.disabled, className = props.className, onClick = props.onClick, tabIndexProp = props.tabIndex, onKeyDownProp = props.onKeyDown, other = tslib_1.__rest(props, ["as", "children", "disabled", "className", "onClick", "tabIndex", "onKeyDown"]);
+    var _a = props.as, Tag = _a === void 0 ? constants_1.LIST_ITEM_BUTTON_DEFAULT_TAG : _a, children = props.children, disabled = props.disabled, className = props.className, onClick = props.onClick, tabIndexProp = props.tabIndex, onKeyDownProp = props.onKeyDown, selected = props.selected, other = tslib_1.__rest(props, ["as", "children", "disabled", "className", "onClick", "tabIndex", "onKeyDown", "selected"]);
     var tabIndex = (0, react_1.useMemo)(function () { return (!disabled ? 0 : -1); }, [disabled]);
     var handleClick = function (event) {
         if (!disabled)
@@ -44,6 +44,7 @@ exports.ListItemButton = (0, polymorphicComponentWithRef_1.polymorphicComponentW
     }, [Tag, handleKeyDown]);
     return (react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnListItemButton)({
             disabled: disabled,
+            selected: selected,
         }, [className]), onClick: handleClick, tabIndex: tabIndexProp || tabIndex }, additionalTagProps, other, { ref: ref }), children));
 });
 exports.ListItemButton.displayName = 'ListItemButton';

package/__inner__/cjs/components/Menu/components/MenuItem/MenuItem.d.ts

@@ -4,8 +4,6 @@ import { type ListItemButtonBaseProps } from '../../../List';
 import { LIST_ITEM_BUTTON_DEFAULT_TAG } from '../../../List/constants';
 export declare const cnMenuItem: import("@bem-react/classname").ClassNameFormatter;
 export type MenuItemBaseProps = ListItemButtonBaseProps & {
-    /** Если {true} отображает элемент меню как выбранный */
-    selected?: boolean;
     /** Используется для вычисления лейбла выбранного элемента меню в выпадающих списках */
     label?: string;
     /** Используется для вычисления значения выбранного элемента меню в выпадающих списках */

package/__inner__/cjs/components/Menu/components/MenuItem/MenuItem.js

@@ -20,6 +20,6 @@ exports.MenuItem = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef
             (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [autoFocus, disabled]);
-    return (react_1.default.createElement(List_1.ListItemButton, tslib_1.__assign({ role: "menuitem", as: Tag, disabled: disabled }, other, { ref: (0, useMultiRef_1.useMultiRef)([ref, innerRef]), className: (0, List_1.cnListItemButton)({ selected: selected }, [className, (0, exports.cnMenuItem)()]), "data-value": value, "data-label": label }), children));
+    return (react_1.default.createElement(List_1.ListItemButton, tslib_1.__assign({ role: "menuitem", as: Tag, disabled: disabled, selected: selected }, other, { ref: (0, useMultiRef_1.useMultiRef)([ref, innerRef]), className: (0, exports.cnMenuItem)('', [className]), "data-value": value, "data-label": label }), children));
 });
 exports.MenuItem.displayName = 'MenuItem';

package/__inner__/cjs/components/ThemeProvider/_control/Theme_control_ozenDefault.css

@@ -0,0 +1,16 @@
+.Theme_control_ozenDefault {
+  --control-padding-4xs: 2px;
+  --control-padding-3xs: 4px;
+  --control-padding-2xs: 8px;
+  --control-padding-xs: 12px;
+  --control-padding-s: 16px;
+  --control-padding-m: 20px;
+  --control-padding-l: 24px;
+  --control-height-4xs: 16px;
+  --control-height-3xs: 24px;
+  --control-height-2xs: 32px;
+  --control-height-xs: 40px;
+  --control-height-s: 48px;
+  --control-height-m: 56px;
+  --control-height-l: 64px;
+}

package/__inner__/cjs/components/ThemeProvider/_spacing/Theme_spacing_ozenDefault.css

@@ -0,0 +1,13 @@
+.Theme_spacing_ozenDefault {
+  --spacing-4xs: 2px;
+  --spacing-3xs: 4px;
+  --spacing-2xs: 8px;
+  --spacing-xs: 12px;
+  --spacing-s: 16px;
+  --spacing-m: 24px;
+  --spacing-l: 32px;
+  --spacing-xl: 40px;
+  --spacing-2xl: 48px;
+  --spacing-3xl: 56px;
+  --spacing-4xl: 64px;
+}

package/__inner__/cjs/components/ThemeProvider/themes/helper.d.ts

@@ -5,5 +5,7 @@ export declare const shadow: readonly ["--shadow-l", "--shadow-m", "--shadow-s"]
 export declare const breakpoint: readonly ["--breakpoint-xs", "--breakpoint-s", "--breakpoint-m", "--breakpoint-l"];
 export declare const zIndex: readonly ["--z-index-default", "--z-index-absolute", "--z-index-header", "--z-index-sidebar", "--z-index-modal", "--z-index-popover", "--z-index-snackbar", "--z-index-chat"];
 export declare const space: readonly ["--space-8xl", "--space-7xl", "--space-6xl", "--space-5xl", "--space-4xl", "--space-3xl", "--space-2xl", "--space-xl", "--space-l", "--space-m", "--space-s", "--space-xs"];
+export declare const spacing: readonly ["--spacing-4xs", "--spacing-3xs", "--spacing-2xs", "--spacing-xs", "--spacing-s", "--spacing-m", "--spacing-l", "--spacing-xl", "--spacing-2xl", "--spacing-3xl", "--spacing-4xl"];
+export declare const control: readonly ["--control-padding-4xs", "--control-padding-3xs", "--control-padding-2xs", "--control-padding-xs", "--control-padding-s", "--control-padding-m", "--control-padding-l", "--control-height-4xs", "--control-height-3xs", "--control-height-2xs", "--control-height-xs", "--control-height-s", "--control-height-m", "--control-height-l"];
 export declare const typography: readonly ["--typography-text-xl_1-font", "--typography-text-4xl_1-font", "--typography-text-3xl_1-font", "--typography-text-2xl_1-font", "--typography-heading-4xl-font", "--typography-text-4xl-font", "--typography-heading-3xl-font", "--typography-text-3xl-font", "--typography-heading-2xl-font", "--typography-text-2xl-font", "--typography-heading-xl-font", "--typography-text-xl-font", "--typography-text-l-font", "--typography-text-l_1-font", "--typography-text-m-font", "--typography-text-m_1-font", "--typography-text-s-font", "--typography-text-s_1-font", "--typography-text-xs-font", "--typography-text-xs_1-font", "--typography-text-2xs-font", "--typography-text-2xs_1-font", "--typography-text-3xs-font", "--typography-caption-3xs-font", "--typography-caption-3xs-text_transform", "--typography-caption-3xs-letter_spacing", "--typography-text-3xs_1-font", "--typography-caption-3xs_1-font", "--typography-caption-3xs_1-text_transform", "--typography-caption-3xs_1-letter_spacing"];
 export declare const transition: readonly ["--transition-default", "--transition-slow"];

package/__inner__/cjs/components/ThemeProvider/themes/helper.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.transition = exports.typography = exports.space = exports.zIndex = exports.breakpoint = exports.shadow = exports.borderWidth = exports.borderRadius = exports.color = void 0;
+exports.transition = exports.typography = exports.control = exports.spacing = exports.space = exports.zIndex = exports.breakpoint = exports.shadow = exports.borderWidth = exports.borderRadius = exports.color = void 0;
 exports.color = [
     '--color-content-primary',
     '--color-content-secondary',
@@ -192,6 +192,35 @@ exports.space = [
     '--space-s',
     '--space-xs',
 ];
+exports.spacing = [
+    '--spacing-4xs',
+    '--spacing-3xs',
+    '--spacing-2xs',
+    '--spacing-xs',
+    '--spacing-s',
+    '--spacing-m',
+    '--spacing-l',
+    '--spacing-xl',
+    '--spacing-2xl',
+    '--spacing-3xl',
+    '--spacing-4xl',
+];
+exports.control = [
+    '--control-padding-4xs',
+    '--control-padding-3xs',
+    '--control-padding-2xs',
+    '--control-padding-xs',
+    '--control-padding-s',
+    '--control-padding-m',
+    '--control-padding-l',
+    '--control-height-4xs',
+    '--control-height-3xs',
+    '--control-height-2xs',
+    '--control-height-xs',
+    '--control-height-s',
+    '--control-height-m',
+    '--control-height-l',
+];
 exports.typography = [
     '--typography-text-xl_1-font',
     '--typography-text-4xl_1-font',

package/__inner__/cjs/components/ThemeProvider/themes/themeBBusinessDefault.d.ts

@@ -4,6 +4,8 @@ import '../_color/Theme_color_bBusinessDefault.css';
 import '../_typography/Theme_typography_ozenDefault.css';
 import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
 import '../_space/Theme_space_ozenDefault.css';
+import '../_spacing/Theme_spacing_ozenDefault.css';
+import '../_control/Theme_control_ozenDefault.css';
 import '../_shadow/Theme_shadow_ozenDefault.css';
 import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
 import '../_borderWidth/Theme_borderWidth_ozenDefault.css';

package/__inner__/cjs/components/ThemeProvider/themes/themeBBusinessDefault.js

@@ -6,6 +6,8 @@ require("../_color/Theme_color_bBusinessDefault.css");
 require("../_typography/Theme_typography_ozenDefault.css");
 require("../_borderRadius/Theme_borderRadius_ozenDefault.css");
 require("../_space/Theme_space_ozenDefault.css");
+require("../_spacing/Theme_spacing_ozenDefault.css");
+require("../_control/Theme_control_ozenDefault.css");
 require("../_shadow/Theme_shadow_ozenDefault.css");
 require("../_breakpoint/Theme_breakpoint_ozenDefault.css");
 require("../_borderWidth/Theme_borderWidth_ozenDefault.css");
@@ -15,6 +17,8 @@ exports.themeBBusinessDefault = {
     tokens: {
         color: 'bBusinessDefault',
         space: 'ozenDefault',
+        spacing: 'ozenDefault',
+        control: 'ozenDefault',
         typography: 'ozenDefault',
         borderRadius: 'ozenDefault',
         borderWidth: 'ozenDefault',

package/__inner__/cjs/components/ThemeProvider/themes/themeOzenDark.d.ts

@@ -4,6 +4,8 @@ import '../_color/Theme_color_ozenDark.css';
 import '../_typography/Theme_typography_ozenDefault.css';
 import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
 import '../_space/Theme_space_ozenDefault.css';
+import '../_spacing/Theme_spacing_ozenDefault.css';
+import '../_control/Theme_control_ozenDefault.css';
 import '../_shadow/Theme_shadow_ozenDefault.css';
 import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
 import '../_borderWidth/Theme_borderWidth_ozenDefault.css';

package/__inner__/cjs/components/ThemeProvider/themes/themeOzenDark.js

@@ -6,6 +6,8 @@ require("../_color/Theme_color_ozenDark.css");
 require("../_typography/Theme_typography_ozenDefault.css");
 require("../_borderRadius/Theme_borderRadius_ozenDefault.css");
 require("../_space/Theme_space_ozenDefault.css");
+require("../_spacing/Theme_spacing_ozenDefault.css");
+require("../_control/Theme_control_ozenDefault.css");
 require("../_shadow/Theme_shadow_ozenDefault.css");
 require("../_breakpoint/Theme_breakpoint_ozenDefault.css");
 require("../_borderWidth/Theme_borderWidth_ozenDefault.css");
@@ -15,6 +17,8 @@ exports.themeOzenDark = {
     tokens: {
         color: 'ozenDark',
         space: 'ozenDefault',
+        spacing: 'ozenDefault',
+        control: 'ozenDefault',
         typography: 'ozenDefault',
         borderRadius: 'ozenDefault',
         borderWidth: 'ozenDefault',

package/__inner__/cjs/components/ThemeProvider/themes/themeOzenDefault.d.ts

@@ -4,6 +4,8 @@ import '../_color/Theme_color_ozenDefault.css';
 import '../_typography/Theme_typography_ozenDefault.css';
 import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
 import '../_space/Theme_space_ozenDefault.css';
+import '../_spacing/Theme_spacing_ozenDefault.css';
+import '../_control/Theme_control_ozenDefault.css';
 import '../_shadow/Theme_shadow_ozenDefault.css';
 import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
 import '../_borderWidth/Theme_borderWidth_ozenDefault.css';

package/__inner__/cjs/components/ThemeProvider/themes/themeOzenDefault.js

@@ -6,6 +6,8 @@ require("../_color/Theme_color_ozenDefault.css");
 require("../_typography/Theme_typography_ozenDefault.css");
 require("../_borderRadius/Theme_borderRadius_ozenDefault.css");
 require("../_space/Theme_space_ozenDefault.css");
+require("../_spacing/Theme_spacing_ozenDefault.css");
+require("../_control/Theme_control_ozenDefault.css");
 require("../_shadow/Theme_shadow_ozenDefault.css");
 require("../_breakpoint/Theme_breakpoint_ozenDefault.css");
 require("../_borderWidth/Theme_borderWidth_ozenDefault.css");
@@ -15,6 +17,8 @@ exports.themeOzenDefault = {
     tokens: {
         color: 'ozenDefault',
         space: 'ozenDefault',
+        spacing: 'ozenDefault',
+        control: 'ozenDefault',
         typography: 'ozenDefault',
         borderRadius: 'ozenDefault',
         borderWidth: 'ozenDefault',

package/__inner__/cjs/components/ThemeProvider/types.d.ts

@@ -53,6 +53,8 @@ export type Theme = {
         borderRadius: string;
         borderWidth: string;
         space: string;
+        spacing: string;
+        control: string;
         shadow: string;
         breakpoint: string;
         zIndex: string;

package/__inner__/cjs/hooks/useBoolean/useBoolean.d.ts

@@ -1,4 +1,4 @@
-type UseBooleanControllers = {
+export type UseBooleanControllers = {
     /** Установить значение в {true} */
     on: () => void;
     /** Установить значение в {false} */
@@ -6,8 +6,7 @@ type UseBooleanControllers = {
     /** Перевести значение в противоположное состояние */
     toggle: () => void;
 };
-type UseBooleanReturnValue = [boolean, UseBooleanControllers];
+export type UseBooleanReturnValue = [boolean, UseBooleanControllers];
 export declare function useBoolean(
 /** Значение по умолчанию */
 defaultValue?: boolean): UseBooleanReturnValue;
-export {};

package/__inner__/cjs/hooks/useThemeVars/useThemeVars.d.ts

@@ -1,5 +1,5 @@
 import { themeHelper } from '../../components/ThemeProvider';
-type VariablesVariant = 'color' | 'breakpoint' | 'zIndex' | 'space' | 'borderRadius' | 'borderWidth' | 'shadow' | 'typography' | 'transition';
+type VariablesVariant = 'color' | 'breakpoint' | 'zIndex' | 'space' | 'spacing' | 'control' | 'borderRadius' | 'borderWidth' | 'shadow' | 'typography' | 'transition';
 export type ThemeVariables = {
     [P in VariablesVariant]: {
         [key in (typeof themeHelper)[P][number]]: string;

package/__inner__/esm/components/Button/Button.css

@@ -14,16 +14,18 @@
   padding: 0 var(--button-padding-x);
   background-color: var(--button-bg-color);
   border-radius: var(--border-radius-xs);
-  transition: background-color var(--transition-default),
-    border-color var(--transition-default), box-shadow var(--transition-default),
+  transition:
+    background-color var(--transition-default),
+    border-color var(--transition-default),
+    box-shadow var(--transition-default),
     opacity var(--transition-default);
   -webkit-tap-highlight-color: unset;
   position: relative;
 }
 .Button_size_2xs {
-      --button-height: 32px;
+      --button-height: var(--control-height-2xs);
+      --button-padding-x: var(--control-padding-xs);
       --button-min-width: 56px;
-      --button-padding-x: 12px;
 
       font: var(--typography-text-2xs-font);
 
@@ -32,9 +34,9 @@
       text-transform: var(--typography-text-2xs-text_transform, none);
     }
 .Button_size_xs {
-      --button-height: 40px;
+      --button-height: var(--control-height-xs);
+      --button-padding-x: var(--control-padding-xs);
       --button-min-width: 64px;
-      --button-padding-x: 12px;
 
       font: var(--typography-text-xs-font);
 
@@ -43,9 +45,9 @@
       text-transform: var(--typography-text-xs-text_transform, none);
     }
 .Button_size_s {
-      --button-height: 48px;
+      --button-height: var(--control-height-s);
+      --button-padding-x: var(--control-padding-s);
       --button-min-width: 72px;
-      --button-padding-x: 16px;
 
       font: var(--typography-text-s-font);
 
@@ -54,9 +56,9 @@
       text-transform: var(--typography-text-s-text_transform, none);
     }
 .Button_size_m {
-      --button-height: 56px;
+      --button-height: var(--control-height-m);
+      --button-padding-x: var(--control-padding-m);
       --button-min-width: 80px;
-      --button-padding-x: 20px;
 
       font: var(--typography-text-m-font);
 
@@ -65,9 +67,9 @@
       text-transform: var(--typography-text-m-text_transform, none);
     }
 .Button_size_l {
-      --button-height: 64px;
+      --button-height: var(--control-height-l);
+      --button-padding-x: var(--control-padding-l);
       --button-min-width: 88px;
-      --button-padding-x: 24px;
 
       font: var(--typography-text-l-font);
 

package/__inner__/esm/components/Card/Card.js

@@ -25,7 +25,7 @@ export var Card = polymorphicComponentWithRef(function (inProps, ref) {
     var _a = props.size, size = _a === void 0 ? 'm' : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.interactive, interactive = _c === void 0 ? false : _c, _d = props.borderWidth, borderWidth = _d === void 0 ? 's' : _d, _e = props.borderVariant, borderVariant = _e === void 0 ? 'solid' : _e, _f = props.borderColor, borderColor = _f === void 0 ? 'standard' : _f, _g = props.backgroundColor, backgroundColor = _g === void 0 ? 'standard' : _g, _h = props.as, Tag = _h === void 0 ? 'div' : _h, className = props.className, children = props.children, other = __rest(props, ["size", "disabled", "interactive", "borderWidth", "borderVariant", "borderColor", "backgroundColor", "as", "className", "children"]);
     var shouldBeInteractive = !disabled && interactive;
     var shouldShowBorder = borderWidth !== 'none';
-    return (React.createElement(Paper, __assign({ as: Tag, radius: matchBorderRadiusPaperToCard[size], background: matchBackgroundColorPaperToCard[backgroundColor] }, other, { ref: ref, "aria-disabled": disabled }, (shouldBeInteractive && { tabIndex: 0 }), { className: cnCard(__assign({ size: size, disabled: disabled, interactive: shouldBeInteractive, backgroundColor: backgroundColor, borderWidth: borderWidth }, (shouldShowBorder && {
+    return (React.createElement(Paper, __assign({ as: Tag, radius: matchBorderRadiusPaperToCard[size], background: matchBackgroundColorPaperToCard[backgroundColor] }, (shouldBeInteractive && { tabIndex: 0 }), { "aria-disabled": disabled }, other, { ref: ref, className: cnCard(__assign({ size: size, disabled: disabled, interactive: shouldBeInteractive, backgroundColor: backgroundColor, borderWidth: borderWidth }, (shouldShowBorder && {
             borderVariant: borderVariant,
             borderColor: borderColor,
         })), [className]) }), children));

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

@@ -1,20 +1,20 @@
 import './IconButton.css';
-import React from 'react';
 import type { ElementType } from 'react';
 import type { IconSize, IconProps } from '@ozen-ui/icons';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import type { RenderContentType } from '../../utils/renderContent';
 import { ICON_BUTTON_DEFAULT_TAG } from './constants';
 export declare const iconButtonColorVariant: readonly ["primary", "secondary"];
 export declare const iconButtonVariant: readonly ["contained", "outlined", "ghost", "function", "floating"];
 export type IconButtonVariant = (typeof iconButtonVariant)[number];
 export type IconButtonColorVariant = (typeof iconButtonColorVariant)[number];
-export type IconButtonIconProps = {
+export type IconButtonIcon = RenderContentType<IconProps & {
     size?: IconSize;
-};
+}>['content'];
 type IconButtonBaseProps = {
     /** Иконка */
-    icon: React.FC<IconProps & IconButtonIconProps>;
+    icon: IconButtonIcon;
     /** Вариант представления компонента */
     variant?: IconButtonVariant;
     /** Размер */
@@ -31,9 +31,9 @@ type IconButtonBaseProps = {
     loading?: boolean;
     /** Дополнительные CSS-классы */
     className?: string;
-    children?: never;
     /** Если {true} делает компонент круглым  */
     rounded?: boolean;
+    children?: never;
 };
 export type IconButtonProps<As extends ElementType = typeof ICON_BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<IconButtonBaseProps, As>;
 export declare const cnIconButton: import("@bem-react/classname").ClassNameFormatter;

package/__inner__/esm/components/IconButton/IconButton.js

@@ -1,11 +1,11 @@
 import { __assign, __rest } from "tslib";
 import './IconButton.css';
 import React, { useMemo } from 'react';
-import { isValidElementType } from 'react-is';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { getIconSizeToFormElement } from '../../utils/getIconSizeToFormElement';
 import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
+import { renderContent } from '../../utils/renderContent';
 import { Loader } from '../Loader';
 import { ICON_BUTTON_DEFAULT_SIZE, ICON_BUTTON_DEFAULT_VARIANT, ICON_BUTTON_DEFAULT_COLOR, ICON_BUTTON_DEFAULT_TAG, } from './constants';
 export var iconButtonColorVariant = ['primary', 'secondary'];
@@ -29,23 +29,31 @@ export var IconButton = polymorphicComponentWithRef(function (inProps, ref) {
         props: inProps,
         name: 'IconButton',
     });
-    var _a = props.size, size = _a === void 0 ? ICON_BUTTON_DEFAULT_SIZE : _a, _b = props.variant, variant = _b === void 0 ? ICON_BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? ICON_BUTTON_DEFAULT_COLOR : _c, _d = props.as, Tag = _d === void 0 ? ICON_BUTTON_DEFAULT_TAG : _d, iconColor = props.iconColor, compressed = props.compressed, loading = props.loading, disabled = props.disabled, className = props.className, Icon = props.icon, onClick = props.onClick, rounded = props.rounded, other = __rest(props, ["size", "variant", "color", "as", "iconColor", "compressed", "loading", "disabled", "className", "icon", "onClick", "rounded"]);
-    var iconSize = getIconSizeToFormElement(size);
+    var _a = props.size, size = _a === void 0 ? ICON_BUTTON_DEFAULT_SIZE : _a, _b = props.variant, variant = _b === void 0 ? ICON_BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? ICON_BUTTON_DEFAULT_COLOR : _c, _d = props.as, Tag = _d === void 0 ? ICON_BUTTON_DEFAULT_TAG : _d, iconColor = props.iconColor, compressed = props.compressed, loading = props.loading, disabled = props.disabled, className = props.className, icon = props.icon, onClick = props.onClick, rounded = props.rounded, other = __rest(props, ["size", "variant", "color", "as", "iconColor", "compressed", "loading", "disabled", "className", "icon", "onClick", "rounded"]);
     var isInteractionPrevented = disabled || loading;
     var handleClick = function (event) {
         if (onClick && !disabled && !loading) {
             onClick(event);
         }
     };
+    var renderIcon = function (content) {
+        return renderContent({
+            content: content,
+            props: {
+                size: getIconSizeToFormElement(size),
+                color: iconColor,
+            },
+        });
+    };
     var resolvedChildren = useMemo(function () {
         if (loading) {
             return (React.createElement(Loader, { className: cnIconButton('Loader'), color: "var(--color-content-disabled)", size: loaderSizeMapper[size] }));
         }
-        if (isValidElementType(Icon)) {
-            return React.createElement(Icon, { size: iconSize, color: iconColor });
+        if (icon) {
+            return renderIcon(icon);
         }
         return null;
-    }, [loading, size, iconColor, iconSize, Icon]);
+    }, [loading, size, iconColor, icon, renderIcon]);
     return (React.createElement(Tag, __assign({ className: cnIconButton({
             variant: variant,
             size: size,

package/__inner__/esm/components/Indicator/Indicator.css

@@ -3,6 +3,7 @@
   inline-size: var(--indicator-size);
   block-size: var(--indicator-size);
   border-radius: calc(var(--indicator-size) / 2);
+  flex-shrink: 0;
 }
 
   .Indicator_variant_neutral {

package/__inner__/esm/components/List/List.css

@@ -1,6 +1,11 @@
 .List {
+  --list-item-color: var(--color-content-primary);
   --list-item-border-radius: var(--border-radius-xs);
-  --list-pipka-background-color: var(--color-content-action);
+  --list-item-bg-color: transparent;
+  --list-item-bg-color-hover: var(--color-background-main-hover);
+  --list-item-bg-color-active: var(--color-background-main-pressed);
+  --list-item-bg-color-disabled: var(--color-content-tertiary);
+  --list-pipka-bg-color: var(--color-content-action);
   --list-pipka-border-radius: 0 var(--border-radius-xs) var(--border-radius-xs)
     0;
   display: flex;

package/__inner__/esm/components/List/components/ListItem/ListItem.css

@@ -4,7 +4,7 @@
   min-block-size: var(--list-item-min-height);
   padding: var(--list-item-padding);
   border-radius: var(--list-item-border-radius);
-  color: var(--color-content-primary);
+  color: var(--list-item-color);
   box-sizing: border-box;
   flex-shrink: 0;
   margin: 0 var(--list-gutter);

package/__inner__/esm/components/List/components/ListItemButton/ListItemButton.css

@@ -1,31 +1,31 @@
 .ListItemButton {
   inline-size: calc(100% - 2 * var(--list-gutter));
+  min-block-size: var(--list-item-min-height);
+  padding: var(--list-item-padding);
+  color: var(--list-item-color);
+  border-radius: var(--list-item-border-radius);
+  background-color: var(--list-item-bg-color);
+  margin: 0 var(--list-gutter);
+  transition: background-color var(--transition-default);
   display: flex;
   flex-shrink: 0;
   align-items: center;
   box-sizing: border-box;
-  min-block-size: var(--list-item-min-height);
-  padding: var(--list-item-padding);
-  color: var(--color-content-primary);
   outline: none;
   text-decoration: none;
-  border-radius: var(--list-item-border-radius);
-  transition: background-color var(--transition-default);
   text-align: start;
-  background-color: transparent;
   cursor: pointer;
   overflow: hidden;
   -webkit-tap-highlight-color: transparent;
-  margin: 0 var(--list-gutter);
   border: none;
 }
 
   .ListItemButton:hover {
-    background-color: var(--color-background-main-hover);
+    background-color: var(--list-item-bg-color-hover);
   }
 
   .ListItemButton:active {
-    background-color: var(--color-background-main-pressed);
+    background-color: var(--list-item-bg-color-active);
   }
 
   .ListItemButton:focus {
@@ -38,7 +38,7 @@
 
   .ListItemButton_disabled {
     pointer-events: none;
-    color: var(--color-content-tertiary);
+    color: var(--list-item-bg-color-disabled);
   }
 
   .ListItemButton_disabled .ListItemText-TextPrimary,
@@ -50,7 +50,7 @@
     content: '';
     inline-size: var(--list-pipka-width);
     block-size: var(--list-pipka-height);
-    background-color: var(--list-pipka-background-color);
+    background-color: var(--list-pipka-bg-color);
     border-radius: var(--list-pipka-border-radius);
     position: absolute;
     inset-inline-start: 0;

package/__inner__/esm/components/List/components/ListItemButton/ListItemButton.d.ts

@@ -8,6 +8,9 @@ export type ListItemButtonBaseProps = {
     children?: ReactNode;
     /** Если {true} делает элемент неактивным */
     disabled?: boolean;
+    /** Если {true} отображает элемент списка как выбранный */
+    selected?: boolean;
+    /** Идентификатор компонента для тестов */
     'data-testid'?: string;
 };
 export type ListItemButtonProps<As extends ElementType = typeof LIST_ITEM_BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<ListItemButtonBaseProps, As>;

package/__inner__/esm/components/List/components/ListItemButton/ListItemButton.js

@@ -9,7 +9,7 @@ import { LIST_ITEM_BUTTON_DEFAULT_TAG } from '../../constants';
 export var cnListItemButton = cn('ListItemButton');
 export var ListItemButton = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'ListItemButton' });
-    var _a = props.as, Tag = _a === void 0 ? LIST_ITEM_BUTTON_DEFAULT_TAG : _a, children = props.children, disabled = props.disabled, className = props.className, onClick = props.onClick, tabIndexProp = props.tabIndex, onKeyDownProp = props.onKeyDown, other = __rest(props, ["as", "children", "disabled", "className", "onClick", "tabIndex", "onKeyDown"]);
+    var _a = props.as, Tag = _a === void 0 ? LIST_ITEM_BUTTON_DEFAULT_TAG : _a, children = props.children, disabled = props.disabled, className = props.className, onClick = props.onClick, tabIndexProp = props.tabIndex, onKeyDownProp = props.onKeyDown, selected = props.selected, other = __rest(props, ["as", "children", "disabled", "className", "onClick", "tabIndex", "onKeyDown", "selected"]);
     var tabIndex = useMemo(function () { return (!disabled ? 0 : -1); }, [disabled]);
     var handleClick = function (event) {
         if (!disabled)
@@ -41,6 +41,7 @@ export var ListItemButton = polymorphicComponentWithRef(function (inProps, ref)
     }, [Tag, handleKeyDown]);
     return (React.createElement(Tag, __assign({ className: cnListItemButton({
             disabled: disabled,
+            selected: selected,
         }, [className]), onClick: handleClick, tabIndex: tabIndexProp || tabIndex }, additionalTagProps, other, { ref: ref }), children));
 });
 ListItemButton.displayName = 'ListItemButton';

package/__inner__/esm/components/Menu/components/MenuItem/MenuItem.d.ts

@@ -4,8 +4,6 @@ import { type ListItemButtonBaseProps } from '../../../List';
 import { LIST_ITEM_BUTTON_DEFAULT_TAG } from '../../../List/constants';
 export declare const cnMenuItem: import("@bem-react/classname").ClassNameFormatter;
 export type MenuItemBaseProps = ListItemButtonBaseProps & {
-    /** Если {true} отображает элемент меню как выбранный */
-    selected?: boolean;
     /** Используется для вычисления лейбла выбранного элемента меню в выпадающих списках */
     label?: string;
     /** Используется для вычисления значения выбранного элемента меню в выпадающих списках */

package/__inner__/esm/components/Menu/components/MenuItem/MenuItem.js

@@ -4,7 +4,7 @@ import { useMultiRef } from '../../../../hooks/useMultiRef';
 import { useThemeProps } from '../../../../hooks/useThemeProps';
 import { cn } from '../../../../utils/classname';
 import { polymorphicComponentWithRef, } from '../../../../utils/polymorphicComponentWithRef';
-import { cnListItemButton, ListItemButton, } from '../../../List';
+import { ListItemButton } from '../../../List';
 import { LIST_ITEM_BUTTON_DEFAULT_TAG } from '../../../List/constants';
 export var cnMenuItem = cn('MenuItem');
 export var MenuItem = polymorphicComponentWithRef(function (inProps, ref) {
@@ -17,6 +17,6 @@ export var MenuItem = polymorphicComponentWithRef(function (inProps, ref) {
             (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [autoFocus, disabled]);
-    return (React.createElement(ListItemButton, __assign({ role: "menuitem", as: Tag, disabled: disabled }, other, { ref: useMultiRef([ref, innerRef]), className: cnListItemButton({ selected: selected }, [className, cnMenuItem()]), "data-value": value, "data-label": label }), children));
+    return (React.createElement(ListItemButton, __assign({ role: "menuitem", as: Tag, disabled: disabled, selected: selected }, other, { ref: useMultiRef([ref, innerRef]), className: cnMenuItem('', [className]), "data-value": value, "data-label": label }), children));
 });
 MenuItem.displayName = 'MenuItem';

package/__inner__/esm/components/ThemeProvider/_control/Theme_control_ozenDefault.css

@@ -0,0 +1,16 @@
+.Theme_control_ozenDefault {
+  --control-padding-4xs: 2px;
+  --control-padding-3xs: 4px;
+  --control-padding-2xs: 8px;
+  --control-padding-xs: 12px;
+  --control-padding-s: 16px;
+  --control-padding-m: 20px;
+  --control-padding-l: 24px;
+  --control-height-4xs: 16px;
+  --control-height-3xs: 24px;
+  --control-height-2xs: 32px;
+  --control-height-xs: 40px;
+  --control-height-s: 48px;
+  --control-height-m: 56px;
+  --control-height-l: 64px;
+}

package/__inner__/esm/components/ThemeProvider/_spacing/Theme_spacing_ozenDefault.css

@@ -0,0 +1,13 @@
+.Theme_spacing_ozenDefault {
+  --spacing-4xs: 2px;
+  --spacing-3xs: 4px;
+  --spacing-2xs: 8px;
+  --spacing-xs: 12px;
+  --spacing-s: 16px;
+  --spacing-m: 24px;
+  --spacing-l: 32px;
+  --spacing-xl: 40px;
+  --spacing-2xl: 48px;
+  --spacing-3xl: 56px;
+  --spacing-4xl: 64px;
+}

package/__inner__/esm/components/ThemeProvider/themes/helper.d.ts

@@ -5,5 +5,7 @@ export declare const shadow: readonly ["--shadow-l", "--shadow-m", "--shadow-s"]
 export declare const breakpoint: readonly ["--breakpoint-xs", "--breakpoint-s", "--breakpoint-m", "--breakpoint-l"];
 export declare const zIndex: readonly ["--z-index-default", "--z-index-absolute", "--z-index-header", "--z-index-sidebar", "--z-index-modal", "--z-index-popover", "--z-index-snackbar", "--z-index-chat"];
 export declare const space: readonly ["--space-8xl", "--space-7xl", "--space-6xl", "--space-5xl", "--space-4xl", "--space-3xl", "--space-2xl", "--space-xl", "--space-l", "--space-m", "--space-s", "--space-xs"];
+export declare const spacing: readonly ["--spacing-4xs", "--spacing-3xs", "--spacing-2xs", "--spacing-xs", "--spacing-s", "--spacing-m", "--spacing-l", "--spacing-xl", "--spacing-2xl", "--spacing-3xl", "--spacing-4xl"];
+export declare const control: readonly ["--control-padding-4xs", "--control-padding-3xs", "--control-padding-2xs", "--control-padding-xs", "--control-padding-s", "--control-padding-m", "--control-padding-l", "--control-height-4xs", "--control-height-3xs", "--control-height-2xs", "--control-height-xs", "--control-height-s", "--control-height-m", "--control-height-l"];
 export declare const typography: readonly ["--typography-text-xl_1-font", "--typography-text-4xl_1-font", "--typography-text-3xl_1-font", "--typography-text-2xl_1-font", "--typography-heading-4xl-font", "--typography-text-4xl-font", "--typography-heading-3xl-font", "--typography-text-3xl-font", "--typography-heading-2xl-font", "--typography-text-2xl-font", "--typography-heading-xl-font", "--typography-text-xl-font", "--typography-text-l-font", "--typography-text-l_1-font", "--typography-text-m-font", "--typography-text-m_1-font", "--typography-text-s-font", "--typography-text-s_1-font", "--typography-text-xs-font", "--typography-text-xs_1-font", "--typography-text-2xs-font", "--typography-text-2xs_1-font", "--typography-text-3xs-font", "--typography-caption-3xs-font", "--typography-caption-3xs-text_transform", "--typography-caption-3xs-letter_spacing", "--typography-text-3xs_1-font", "--typography-caption-3xs_1-font", "--typography-caption-3xs_1-text_transform", "--typography-caption-3xs_1-letter_spacing"];
 export declare const transition: readonly ["--transition-default", "--transition-slow"];

package/__inner__/esm/components/ThemeProvider/themes/helper.js

@@ -189,6 +189,35 @@ export var space = [
     '--space-s',
     '--space-xs',
 ];
+export var spacing = [
+    '--spacing-4xs',
+    '--spacing-3xs',
+    '--spacing-2xs',
+    '--spacing-xs',
+    '--spacing-s',
+    '--spacing-m',
+    '--spacing-l',
+    '--spacing-xl',
+    '--spacing-2xl',
+    '--spacing-3xl',
+    '--spacing-4xl',
+];
+export var control = [
+    '--control-padding-4xs',
+    '--control-padding-3xs',
+    '--control-padding-2xs',
+    '--control-padding-xs',
+    '--control-padding-s',
+    '--control-padding-m',
+    '--control-padding-l',
+    '--control-height-4xs',
+    '--control-height-3xs',
+    '--control-height-2xs',
+    '--control-height-xs',
+    '--control-height-s',
+    '--control-height-m',
+    '--control-height-l',
+];
 export var typography = [
     '--typography-text-xl_1-font',
     '--typography-text-4xl_1-font',

package/__inner__/esm/components/ThemeProvider/themes/themeBBusinessDefault.d.ts

@@ -4,6 +4,8 @@ import '../_color/Theme_color_bBusinessDefault.css';
 import '../_typography/Theme_typography_ozenDefault.css';
 import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
 import '../_space/Theme_space_ozenDefault.css';
+import '../_spacing/Theme_spacing_ozenDefault.css';
+import '../_control/Theme_control_ozenDefault.css';
 import '../_shadow/Theme_shadow_ozenDefault.css';
 import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
 import '../_borderWidth/Theme_borderWidth_ozenDefault.css';

package/__inner__/esm/components/ThemeProvider/themes/themeBBusinessDefault.js

@@ -3,6 +3,8 @@ import '../_color/Theme_color_bBusinessDefault.css';
 import '../_typography/Theme_typography_ozenDefault.css';
 import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
 import '../_space/Theme_space_ozenDefault.css';
+import '../_spacing/Theme_spacing_ozenDefault.css';
+import '../_control/Theme_control_ozenDefault.css';
 import '../_shadow/Theme_shadow_ozenDefault.css';
 import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
 import '../_borderWidth/Theme_borderWidth_ozenDefault.css';
@@ -12,6 +14,8 @@ export var themeBBusinessDefault = {
     tokens: {
         color: 'bBusinessDefault',
         space: 'ozenDefault',
+        spacing: 'ozenDefault',
+        control: 'ozenDefault',
         typography: 'ozenDefault',
         borderRadius: 'ozenDefault',
         borderWidth: 'ozenDefault',

package/__inner__/esm/components/ThemeProvider/themes/themeOzenDark.d.ts

@@ -4,6 +4,8 @@ import '../_color/Theme_color_ozenDark.css';
 import '../_typography/Theme_typography_ozenDefault.css';
 import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
 import '../_space/Theme_space_ozenDefault.css';
+import '../_spacing/Theme_spacing_ozenDefault.css';
+import '../_control/Theme_control_ozenDefault.css';
 import '../_shadow/Theme_shadow_ozenDefault.css';
 import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
 import '../_borderWidth/Theme_borderWidth_ozenDefault.css';

package/__inner__/esm/components/ThemeProvider/themes/themeOzenDark.js

@@ -3,6 +3,8 @@ import '../_color/Theme_color_ozenDark.css';
 import '../_typography/Theme_typography_ozenDefault.css';
 import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
 import '../_space/Theme_space_ozenDefault.css';
+import '../_spacing/Theme_spacing_ozenDefault.css';
+import '../_control/Theme_control_ozenDefault.css';
 import '../_shadow/Theme_shadow_ozenDefault.css';
 import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
 import '../_borderWidth/Theme_borderWidth_ozenDefault.css';
@@ -12,6 +14,8 @@ export var themeOzenDark = {
     tokens: {
         color: 'ozenDark',
         space: 'ozenDefault',
+        spacing: 'ozenDefault',
+        control: 'ozenDefault',
         typography: 'ozenDefault',
         borderRadius: 'ozenDefault',
         borderWidth: 'ozenDefault',

package/__inner__/esm/components/ThemeProvider/themes/themeOzenDefault.d.ts

@@ -4,6 +4,8 @@ import '../_color/Theme_color_ozenDefault.css';
 import '../_typography/Theme_typography_ozenDefault.css';
 import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
 import '../_space/Theme_space_ozenDefault.css';
+import '../_spacing/Theme_spacing_ozenDefault.css';
+import '../_control/Theme_control_ozenDefault.css';
 import '../_shadow/Theme_shadow_ozenDefault.css';
 import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
 import '../_borderWidth/Theme_borderWidth_ozenDefault.css';

package/__inner__/esm/components/ThemeProvider/themes/themeOzenDefault.js

@@ -3,6 +3,8 @@ import '../_color/Theme_color_ozenDefault.css';
 import '../_typography/Theme_typography_ozenDefault.css';
 import '../_borderRadius/Theme_borderRadius_ozenDefault.css';
 import '../_space/Theme_space_ozenDefault.css';
+import '../_spacing/Theme_spacing_ozenDefault.css';
+import '../_control/Theme_control_ozenDefault.css';
 import '../_shadow/Theme_shadow_ozenDefault.css';
 import '../_breakpoint/Theme_breakpoint_ozenDefault.css';
 import '../_borderWidth/Theme_borderWidth_ozenDefault.css';
@@ -12,6 +14,8 @@ export var themeOzenDefault = {
     tokens: {
         color: 'ozenDefault',
         space: 'ozenDefault',
+        spacing: 'ozenDefault',
+        control: 'ozenDefault',
         typography: 'ozenDefault',
         borderRadius: 'ozenDefault',
         borderWidth: 'ozenDefault',

package/__inner__/esm/components/ThemeProvider/types.d.ts

@@ -53,6 +53,8 @@ export type Theme = {
         borderRadius: string;
         borderWidth: string;
         space: string;
+        spacing: string;
+        control: string;
         shadow: string;
         breakpoint: string;
         zIndex: string;

package/__inner__/esm/hooks/useBoolean/useBoolean.d.ts

@@ -1,4 +1,4 @@
-type UseBooleanControllers = {
+export type UseBooleanControllers = {
     /** Установить значение в {true} */
     on: () => void;
     /** Установить значение в {false} */
@@ -6,8 +6,7 @@ type UseBooleanControllers = {
     /** Перевести значение в противоположное состояние */
     toggle: () => void;
 };
-type UseBooleanReturnValue = [boolean, UseBooleanControllers];
+export type UseBooleanReturnValue = [boolean, UseBooleanControllers];
 export declare function useBoolean(
 /** Значение по умолчанию */
 defaultValue?: boolean): UseBooleanReturnValue;
-export {};

package/__inner__/esm/hooks/useThemeVars/useThemeVars.d.ts

@@ -1,5 +1,5 @@
 import { themeHelper } from '../../components/ThemeProvider';
-type VariablesVariant = 'color' | 'breakpoint' | 'zIndex' | 'space' | 'borderRadius' | 'borderWidth' | 'shadow' | 'typography' | 'transition';
+type VariablesVariant = 'color' | 'breakpoint' | 'zIndex' | 'space' | 'spacing' | 'control' | 'borderRadius' | 'borderWidth' | 'shadow' | 'typography' | 'transition';
 export type ThemeVariables = {
     [P in VariablesVariant]: {
         [key in (typeof themeHelper)[P][number]]: string;

package/package.json

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