@ozen-ui/kit 0.19.0 → 0.21.0

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/Table/components/TableRow/TableRow.css

@@ -1,7 +1,12 @@
-.TableRow_hover:hover {
+.TableRow {
+  transition: background-color var(--transition-slow);
+}
+
+  .TableRow_hover:hover {
     outline: none;
     background-color: var(--color-background-primary-hover);
   }
+
   .TableRow_hover:active,
   .TableRow_selected {
     outline: none;

package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_bBusinessDefault.css

@@ -29,7 +29,7 @@
   --color-content-primary-inverse: #fff;
   --color-content-accent-main: #a0a0a0;
   --color-accent-main: #181818;
-  --color-content-accent-primary: #fff;
+  --color-content-accent-primary: #dcdcdc;
   --color-accent-primary: #282828;
   --color-content-accent-disabled: #606060;
   --color-background-main: #fff;
@@ -124,7 +124,7 @@
   --color-accent-tertiary-pressed: #686868;
   --color-accent-disabled: #484848;
   --color-accent-secondary-inverse: #808080;
-  --color-accent-main-inverse: #fff;
+  --color-accent-main-inverse: #dcdcdc;
   --color-additional-a1: #0b6abe;
   --color-additional-a2: #1899e9;
   --color-additional-a3: #b3f1ff;

package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_ozenDark.css

@@ -30,7 +30,7 @@
   --color-background-main-inverse: #f5f5f5;
   --color-content-accent-main: #a0a0a0;
   --color-accent-main: #181818;
-  --color-content-accent-primary: #fff;
+  --color-content-accent-primary: #dcdcdc;
   --color-accent-primary: #282828;
   --color-content-accent-disabled: #606060;
   --color-background-main-hover: #2c2c2c;

package/__inner__/cjs/components/ThemeProvider/_color/Theme_color_ozenDefault.css

@@ -29,7 +29,7 @@
   --color-content-primary-inverse: #fff;
   --color-content-accent-main: #a0a0a0;
   --color-accent-main: #181818;
-  --color-content-accent-primary: #fff;
+  --color-content-accent-primary: #dcdcdc;
   --color-accent-primary: #282828;
   --color-content-accent-disabled: #606060;
   --color-background-main: #fff;

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__/esm/components/Avatar/Avatar.css

@@ -1,112 +1,115 @@
 .Avatar {
   --avatar-size: 100%;
+  --avatar-color: var(--color-content-action-on);
+  --avatar-bg-color: unset;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   inline-size: var(--avatar-size);
   block-size: var(--avatar-size);
+  color: var(--avatar-color);
+  background-color: var(--avatar-bg-color);
   font-family: Roboto, sans-serif;
   border-radius: 50%;
   position: relative;
   overflow: visible;
-  color: var(--color-content-action-on);
 }
 
   .Avatar_color_a1 {
-      background: var(--color-additional-a1);
+      --avatar-bg-color: var(--color-additional-a1);
     }
 
   .Avatar_color_a2 {
-      background: var(--color-additional-a2);
+      --avatar-bg-color: var(--color-additional-a2);
     }
 
   .Avatar_color_a3 {
-      background: var(--color-additional-a3);
+      --avatar-bg-color: var(--color-additional-a3);
     }
 
   .Avatar_color_b1 {
-      background: var(--color-additional-b1);
+      --avatar-bg-color: var(--color-additional-b1);
     }
 
   .Avatar_color_b2 {
-      background: var(--color-additional-b2);
+      --avatar-bg-color: var(--color-additional-b2);
     }
 
   .Avatar_color_b3 {
-      background: var(--color-additional-b3);
+      --avatar-bg-color: var(--color-additional-b3);
     }
 
   .Avatar_color_c1 {
-      background: var(--color-additional-c1);
+      --avatar-bg-color: var(--color-additional-c1);
     }
 
   .Avatar_color_c2 {
-      background: var(--color-additional-c2);
+      --avatar-bg-color: var(--color-additional-c2);
     }
 
   .Avatar_color_c3 {
-      background: var(--color-additional-c3);
+      --avatar-bg-color: var(--color-additional-c3);
     }
 
   .Avatar_color_d1 {
-      background: var(--color-additional-d1);
+      --avatar-bg-color: var(--color-additional-d1);
     }
 
   .Avatar_color_d2 {
-      background: var(--color-additional-d2);
+      --avatar-bg-color: var(--color-additional-d2);
     }
 
   .Avatar_color_d3 {
-      background: var(--color-additional-d3);
+      --avatar-bg-color: var(--color-additional-d3);
     }
 
   .Avatar_color_e1 {
-      background: var(--color-additional-e1);
+      --avatar-bg-color: var(--color-additional-e1);
     }
 
   .Avatar_color_e2 {
-      background: var(--color-additional-e2);
+      --avatar-bg-color: var(--color-additional-e2);
     }
 
   .Avatar_color_e3 {
-      background: var(--color-additional-e3);
+      --avatar-bg-color: var(--color-additional-e3);
     }
 
   .Avatar_color_f1 {
-      background: var(--color-additional-f1);
+      --avatar-bg-color: var(--color-additional-f1);
     }
 
   .Avatar_color_f2 {
-      background: var(--color-additional-f2);
+      --avatar-bg-color: var(--color-additional-f2);
     }
 
   .Avatar_color_f3 {
-      background: var(--color-additional-f3);
+      --avatar-bg-color: var(--color-additional-f3);
     }
 
   .Avatar_color_g1 {
-      background: var(--color-additional-g1);
+      --avatar-bg-color: var(--color-additional-g1);
     }
 
   .Avatar_color_g2 {
-      background: var(--color-additional-g2);
+      --avatar-bg-color: var(--color-additional-g2);
     }
 
   .Avatar_color_g3 {
-      background: var(--color-additional-g3);
+      --avatar-bg-color: var(--color-additional-g3);
     }
 
   .Avatar_color_h1 {
-      background: var(--color-additional-h1);
+      --avatar-bg-color: var(--color-additional-h1);
     }
 
   .Avatar_color_h2 {
-      background: var(--color-additional-h2);
+      --avatar-bg-color: var(--color-additional-h2);
     }
 
   .Avatar_color_h3 {
-      background: var(--color-additional-h3);
+      --avatar-bg-color: var(--color-additional-h3);
     }
 
   .Avatar-Image {

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

@@ -1,6 +1,6 @@
 import './Avatar.css';
 import React from 'react';
-import type { ComponentPropsWithRef, ComponentRef } from 'react';
+import type { ComponentPropsWithRef, ComponentRef, ReactNode } from 'react';
 import type { IndicatorProps } from '../Indicator';
 export declare const avatarSizeVariant: readonly ["4xs", "3xs", "2xs", "xs", "s", "m", "l", "xl"];
 export declare const avatarHueVariant: number[];
@@ -16,14 +16,14 @@ export type AvatarProps = {
     /** Url изображения */
     src?: string;
     /** Имя пользователя */
-    name: string;
+    name?: string;
     /** Цветовой оттенок аватарки (при использовании без src) */
     hue?: AvatarHueVariant;
     /** Дополнительные СSS-классы */
     className?: string;
     /** Свойства компонента Indicator */
     indicatorProps?: IndicatorProps;
-    children?: never;
+    children?: ReactNode;
 } & ComponentPropsWithRef<typeof avatarEl>;
 export declare const cnAvatar: import("@bem-react/classname").ClassNameFormatter;
 export declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/Avatar/Avatar.js

@@ -7,6 +7,7 @@ import { cn } from '../../utils/classname';
 import { Indicator } from '../Indicator';
 import { AVATAR_DEFAULT_HUE, AVATAR_DEFAULT_ONLINE, AVATAR_DEFAULT_SIZE, } from './constants';
 import { getHashNumber } from './get-hash-number';
+import { matchSizeIndicatorToAvatar, getInitials } from './utils';
 export var avatarSizeVariant = [
     '4xs',
     '3xs',
@@ -20,38 +21,25 @@ export var avatarSizeVariant = [
 export var avatarHueVariant = [1, 2, 3];
 var avatarEl = 'div';
 export var cnAvatar = cn('Avatar');
-var getInitials = function (name) {
-    var _a, _b, _c;
-    var parts = name.split(' ');
-    var initials;
-    if (parts.length === 1) {
-        initials = ((_a = parts[0]) === null || _a === void 0 ? void 0 : _a.charAt(0)) || '';
-    }
-    else {
-        initials = ((_b = parts.shift()) !== null && _b !== void 0 ? _b : '').charAt(0) + ((_c = parts.pop()) !== null && _c !== void 0 ? _c : '').charAt(0);
-    }
-    return initials.toUpperCase();
-};
-var matchSizeIndicatorToAvatar = {
-    '4xs': 'xs',
-    '3xs': 'xs',
-    '2xs': 'xs',
-    xs: 's',
-    s: 's',
-    m: 's',
-    l: 'm',
-    xl: 'm',
-};
 export var Avatar = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'Avatar' });
-    var _a = props.size, size = _a === void 0 ? AVATAR_DEFAULT_SIZE : _a, _b = props.online, online = _b === void 0 ? AVATAR_DEFAULT_ONLINE : _b, _c = props.hue, hue = _c === void 0 ? AVATAR_DEFAULT_HUE : _c, src = props.src, name = props.name, className = props.className, indicatorProps = props.indicatorProps, other = __rest(props, ["size", "online", "hue", "src", "name", "className", "indicatorProps"]);
+    var _a = props.size, size = _a === void 0 ? AVATAR_DEFAULT_SIZE : _a, _b = props.online, online = _b === void 0 ? AVATAR_DEFAULT_ONLINE : _b, _c = props.hue, hue = _c === void 0 ? AVATAR_DEFAULT_HUE : _c, src = props.src, nameProp = props.name, className = props.className, indicatorProps = props.indicatorProps, children = props.children, other = __rest(props, ["size", "online", "hue", "src", "name", "className", "indicatorProps", "children"]);
+    var name = nameProp || '';
     var _d = __read(useBoolean(!!src), 2), showImage = _d[0], off = _d[1].off;
     var indicatorSize = matchSizeIndicatorToAvatar[size];
     var colorShades = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
     var color = "".concat(colorShades[getHashNumber(name, colorShades.length)]).concat(hue);
-    var initials = getInitials(name);
+    var renderContent = function () {
+        if (children) {
+            return children;
+        }
+        if (src && showImage) {
+            return (React.createElement("img", { src: src, alt: name, className: cnAvatar('Image'), onError: off }));
+        }
+        return getInitials(name);
+    };
     return (React.createElement("div", __assign({ className: cnAvatar({ size: size, color: !showImage && color }, [className]) }, other, { ref: ref }),
-        src && showImage ? (React.createElement("img", { src: src, alt: name, className: cnAvatar('Image'), onError: off })) : (initials),
-        online && (React.createElement(Indicator, __assign({ variant: "success", size: indicatorSize, className: cnAvatar('Online'), border: true }, indicatorProps)))));
+        renderContent(),
+        online && (React.createElement(Indicator, __assign({ variant: "success", size: indicatorSize, border: true }, indicatorProps, { className: cnAvatar('Online', indicatorProps === null || indicatorProps === void 0 ? void 0 : indicatorProps.className) })))));
 });
 Avatar.displayName = 'Avatar';

package/__inner__/esm/components/Avatar/utils.d.ts

@@ -0,0 +1,6 @@
+import type { IndicatorSizeVariant } from '../Indicator';
+import type { AvatarSizeVariant } from './index';
+export declare const getInitials: (name: string) => string;
+export declare const matchSizeIndicatorToAvatar: {
+    [key in AvatarSizeVariant]: IndicatorSizeVariant;
+};

package/__inner__/esm/components/Avatar/utils.js

@@ -0,0 +1,22 @@
+export var getInitials = function (name) {
+    var _a, _b, _c;
+    var parts = name.split(' ');
+    var initials;
+    if (parts.length === 1) {
+        initials = ((_a = parts[0]) === null || _a === void 0 ? void 0 : _a.charAt(0)) || '';
+    }
+    else {
+        initials = ((_b = parts.shift()) !== null && _b !== void 0 ? _b : '').charAt(0) + ((_c = parts.pop()) !== null && _c !== void 0 ? _c : '').charAt(0);
+    }
+    return initials.toUpperCase();
+};
+export var matchSizeIndicatorToAvatar = {
+    '4xs': 'xs',
+    '3xs': 'xs',
+    '2xs': 'xs',
+    xs: 's',
+    s: 's',
+    m: 's',
+    l: 'm',
+    xl: 'm',
+};

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

@@ -1,17 +1,17 @@
 import './Button.css';
-import React from 'react';
 import type { ReactNode, ElementType } from 'react';
 import type { IconProps, IconSize } from '@ozen-ui/icons';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import type { RenderContentType } from '../../utils/renderContent';
 import { BUTTON_DEFAULT_TAG } from './constants';
 export declare const buttonVariant: readonly ["contained", "outlined", "ghost", "function"];
 export declare const buttonColorVariant: readonly ["primary", "secondary", "warning", "error"];
 export type ButtonVariant = (typeof buttonVariant)[number];
 export type ButtonColorVariant = (typeof buttonColorVariant)[number];
-export type ButtonIconComponent = React.FC<IconProps & {
+export type ButtonIcon = RenderContentType<IconProps & {
     size?: IconSize;
-}>;
+}>['content'];
 type ButtonBaseProps = {
     /**
      * Вариант отображения кнопки
@@ -37,9 +37,9 @@ type ButtonBaseProps = {
     /** Дополнительные CSS-классы */
     className?: string;
     /** Иконка слева */
-    iconLeft?: ButtonIconComponent;
+    iconLeft?: ButtonIcon;
     /** Иконка справа */
-    iconRight?: ButtonIconComponent;
+    iconRight?: ButtonIcon;
     /** Если {true} растягивает кнопку на всю ширину родительского контейнера */
     fullWidth?: boolean;
 };

package/__inner__/esm/components/Button/Button.js

@@ -6,6 +6,7 @@ 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 { BUTTON_DEFAULT_SIZE, BUTTON_DEFAULT_VARIANT, BUTTON_DEFAULT_COLOR, BUTTON_DEFAULT_TAG, } from './constants';
 export var buttonVariant = [
@@ -28,19 +29,27 @@ export var Button = polymorphicComponentWithRef(function (inProps, ref) {
         props: inProps,
         name: 'Button',
     });
-    var _a = props.as, Tag = _a === void 0 ? BUTTON_DEFAULT_TAG : _a, _b = props.variant, variant = _b === void 0 ? BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? BUTTON_DEFAULT_COLOR : _c, _d = props.size, size = _d === void 0 ? BUTTON_DEFAULT_SIZE : _d, IconLeft = props.iconLeft, IconRight = props.iconRight, loading = props.loading, children = props.children, disabled = props.disabled, className = props.className, fullWidth = props.fullWidth, onClick = props.onClick, other = __rest(props, ["as", "variant", "color", "size", "iconLeft", "iconRight", "loading", "children", "disabled", "className", "fullWidth", "onClick"]);
+    var _a = props.as, Tag = _a === void 0 ? BUTTON_DEFAULT_TAG : _a, _b = props.variant, variant = _b === void 0 ? BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? BUTTON_DEFAULT_COLOR : _c, _d = props.size, size = _d === void 0 ? BUTTON_DEFAULT_SIZE : _d, iconLeft = props.iconLeft, iconRight = props.iconRight, loading = props.loading, children = props.children, disabled = props.disabled, className = props.className, fullWidth = props.fullWidth, onClick = props.onClick, other = __rest(props, ["as", "variant", "color", "size", "iconLeft", "iconRight", "loading", "children", "disabled", "className", "fullWidth", "onClick"]);
     var iconSize = getIconSizeToFormElement(size);
     var handleClick = function (event) {
         if (onClick && !disabled && !loading) {
             onClick(event);
         }
     };
+    var renderIcon = function (content) {
+        return renderContent({
+            content: content,
+            props: {
+                size: getIconSizeToFormElement(size),
+            },
+        });
+    };
     var isInteractionPrevented = disabled || loading;
     var childContent = (React.createElement(React.Fragment, null,
         React.createElement("span", { className: cnButton('Label') },
-            IconLeft && React.createElement(IconLeft, { size: iconSize }),
+            renderIcon(iconLeft),
             children,
-            IconRight && React.createElement(IconRight, { size: iconSize })),
+            renderIcon(iconRight)),
         React.createElement(CSSTransition, { in: loading, timeout: 120, classNames: cnButton('Loader', { animation: true }), unmountOnExit: true },
             React.createElement(Loader, { size: iconSize, color: "var(--color-content-disabled)", className: cnButton('Loader') }))));
     return (React.createElement(Tag, __assign({ disabled: isInteractionPrevented, onClick: handleClick, type: "button", className: cnButton({

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/Grid/Grid.css

@@ -158,6 +158,24 @@
 .Grid_rowGap_8xl {
     grid-row-gap: var(--space-8xl);
   }
+.Grid_align_start {
+      align-items: start;
+    }
+.Grid_align_end {
+      align-items: end;
+    }
+.Grid_align_center {
+      align-items: center;
+    }
+.Grid_justify_start {
+      justify-items: start;
+    }
+.Grid_justify_end {
+      justify-items: end;
+    }
+.Grid_justify_center {
+      justify-items: center;
+    }
 @media (min-width: 0) {
       .Grid_gap_xs_0 {
     grid-gap: 0;

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

@@ -5,6 +5,10 @@ export declare const gridColsVariant: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1
 export type GridColsVariant = (typeof gridColsVariant)[number];
 export declare const gridGapVariant: readonly ["0", "xs", "s", "m", "l", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "8xl"];
 export type GridGapVariant = (typeof gridGapVariant)[number];
+export declare const gridAlignVariant: readonly ["start", "end", "center"];
+export declare const gridJustifyVariant: readonly ["start", "end", "center"];
+export type GridAlignVariant = (typeof gridAlignVariant)[number];
+export type GridJustifyVariant = (typeof gridJustifyVariant)[number];
 export declare const cnGrid: import("@bem-react/classname").ClassNameFormatter;
 export type GridProps = {
     /** Количество колонок в сетке */
@@ -15,6 +19,10 @@ export type GridProps = {
     colGap?: ResponsiveValue<GridGapVariant>;
     /** Отступы вокруг строки */
     rowGap?: ResponsiveValue<GridGapVariant>;
+    /** Выравнивание */
+    align?: GridAlignVariant;
+    /** Пространство между элементами */
+    justify?: GridJustifyVariant;
     /** Содержимое компонента */
     children?: ReactNode;
     /** Дополнительные СSS-классы */

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

@@ -23,13 +23,22 @@ export var gridGapVariant = [
     '7xl',
     '8xl',
 ];
+export var gridAlignVariant = ['start', 'end', 'center'];
+export var gridJustifyVariant = ['start', 'end', 'center'];
 export var cnGrid = cn('Grid');
 export var Grid = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,
         name: 'Grid',
     });
-    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));
+    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, align = props.align, justify = props.justify, children = props.children, className = props.className, other = __rest(props, ["cols", "gap", "as", "colGap", "rowGap", "align", "justify", "children", "className"]);
+    return (React.createElement(Tag, __assign({ className: classnames(cnGrid({}), useGenerateGridModsCn(cnGrid, {
+            cols: cols,
+            gap: gap,
+            colGap: colGap,
+            rowGap: rowGap,
+            align: align,
+            justify: justify,
+        }), className) }, other, { ref: ref }), children));
 });
 Grid.displayName = 'Grid';

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);