@ozen-ui/kit 0.84.1 → 0.84.3

package/__inner__/cjs/components/DataList/entities/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./size"), exports);

package/__inner__/cjs/components/DataList/entities/size.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dataListSizeVariant = void 0;
+var types_1 = require("../../../types");
+exports.dataListSizeVariant = types_1.formElementSizeVariant;

package/__inner__/cjs/components/DataList/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./entities"), exports);
 tslib_1.__exportStar(require("./DataList"), exports);
 tslib_1.__exportStar(require("./components"), exports);
 tslib_1.__exportStar(require("./types"), exports);

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

@@ -1,12 +1,6 @@
 .List {
   --list-item-bg-color: transparent;
-  --list-item-color: var(--color-content-primary);
-  --list-pipka-bg-color: var(--color-content-action);
-  --list-item-bg-color-disabled: var(--color-content-tertiary);
-  --list-item-bg-color-hover: var(--color-background-main-hover);
-  --list-item-bg-color-active: var(--color-background-main-pressed);
-  --list-pipka-border-radius: 0 var(--border-radius-xs) var(--border-radius-xs)
-    0;
+  --list-pipka-border-radius: 0 var(--border-radius-xs) var(--border-radius-xs) 0;
   display: flex;
   flex-direction: column;
   gap: var(--list-gap);
@@ -14,8 +8,35 @@
   margin: 0;
   position: relative;
   outline: none;
+  background-color: var(--list-bg-color);
 }
 
+  .List_color_main {
+    --list-bg-color: var(--color-background-main);
+    --list-item-color: var(--color-content-primary);
+    --list-item-secondary-color: var(--color-content-secondary);
+    --list-item-disabled-color: var(--color-content-tertiary);
+    --list-pipka-bg-color: var(--color-content-action);
+    --list-item-bg-color-disabled: var(--color-content-tertiary);
+    --list-item-bg-color-hover: var(--color-background-main-hover);
+    --list-item-bg-color-active: var(--color-background-main-pressed);
+    --list-item-bg-color-selected: transparent;
+    --list-divider-color: var(--color-border-secondary);
+  }
+
+  .List_color_accent {
+    --list-bg-color: var(--color-accent-main);
+    --list-item-color: var(--color-content-accent-primary);
+    --list-item-secondary-color: var(--color-content-accent-secondary);
+    --list-item-disabled-color: var(--color-content-accent-disabled);
+    --list-pipka-bg-color: var(--color-content-accent-primary);
+    --list-item-bg-color-disabled: var(--color-content-accent-disabled);
+    --list-item-bg-color-hover: var(--color-accent-primary-hover);
+    --list-item-bg-color-active: var(--color-accent-primary-pressed);
+    --list-item-bg-color-selected: var(--color-accent-primary);
+    --list-divider-color: var(--color-accent-primary);
+  }
+
   .List_size_2xs,
     .List_size_xs,
     .List_size_s {
@@ -91,3 +112,7 @@
   .List:empty {
     --list-gutter: 0;
   }
+
+  .List .Divider {
+    --divider-color: var(--list-divider-color);
+  }

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

@@ -12,8 +12,8 @@ var ListContext_1 = require("./ListContext");
 exports.cnList = (0, classname_1.cn)('List');
 exports.List = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'List' });
-    var _a = props.as, Tag = _a === void 0 ? constants_1.LIST_DEFAULT_TAG : _a, _b = props.size, size = _b === void 0 ? constants_1.LIST_DEFAULT_SIZE : _b, _c = props.disablePadding, disablePadding = _c === void 0 ? constants_1.LIST_DEFAULT_DISABLE_PADDING : _c, children = props.children, className = props.className, other = tslib_1.__rest(props, ["as", "size", "disablePadding", "children", "className"]);
+    var _a = props.as, Tag = _a === void 0 ? constants_1.LIST_DEFAULT_TAG : _a, _b = props.size, size = _b === void 0 ? constants_1.LIST_DEFAULT_SIZE : _b, _c = props.disablePadding, disablePadding = _c === void 0 ? constants_1.LIST_DEFAULT_DISABLE_PADDING : _c, children = props.children, className = props.className, _d = props.color, color = _d === void 0 ? constants_1.LIST_DEFAULT_COLOR : _d, other = tslib_1.__rest(props, ["as", "size", "disablePadding", "children", "className", "color"]);
     return (react_1.default.createElement(ListContext_1.ListContext.Provider, { value: { size: size } },
-        react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnList)({ size: size, disablePadding: disablePadding }, [className]) }, other, { ref: ref }), children)));
+        react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnList)({ size: size, disablePadding: disablePadding, color: color }, [className]) }, other, { ref: ref }), children)));
 });
 exports.List.displayName = 'List';

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

@@ -50,9 +50,13 @@
 
   .ListItemButton_disabled .ListItemText-TextPrimary,
     .ListItemButton_disabled .ListItemText-TextSecondary {
-      color: var(--color-content-tertiary);
+      color: var(--list-item-disabled-color);
     }
 
+  .ListItemButton_selected {
+    background-color: var(--list-item-bg-color-selected);
+  }
+
   .ListItemButton_selected::after {
     content: '';
     inline-size: var(--list-pipka-width);

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

@@ -6,6 +6,14 @@
   min-inline-size: 0;
 }
 
+  .ListItemText-TextPrimary {
+    color: var(--list-item-color);
+  }
+
+  .ListItemText-TextSecondary {
+    color: var(--list-item-secondary-color);
+  }
+
   .ListItemText:last-child {
     margin-inline-end: 0;
   }

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

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LIST_ITEM_BUTTON_DEFAULT_ALIGN = exports.LIST_ITEM_BUTTON_DEFAULT_TAG = exports.LIST_ITEM_DEFAULT_ALIGN = exports.LIST_ITEM_DEFAULT_TAG = exports.LIST_DEFAULT_TAG = exports.LIST_DEFAULT_DISABLE_PADDING = exports.LIST_DEFAULT_SIZE = void 0;
+exports.LIST_ITEM_BUTTON_DEFAULT_ALIGN = exports.LIST_ITEM_BUTTON_DEFAULT_TAG = exports.LIST_ITEM_DEFAULT_ALIGN = exports.LIST_ITEM_DEFAULT_TAG = exports.LIST_DEFAULT_COLOR = exports.LIST_DEFAULT_TAG = exports.LIST_DEFAULT_DISABLE_PADDING = exports.LIST_DEFAULT_SIZE = void 0;
 exports.LIST_DEFAULT_SIZE = 'm';
 exports.LIST_DEFAULT_DISABLE_PADDING = false;
 exports.LIST_DEFAULT_TAG = 'ul';
+exports.LIST_DEFAULT_COLOR = 'main';
 exports.LIST_ITEM_DEFAULT_TAG = 'li';
 exports.LIST_ITEM_DEFAULT_ALIGN = 'center';
 exports.LIST_ITEM_BUTTON_DEFAULT_TAG = 'div';

package/__inner__/cjs/components/List/entities/color.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.listColorVariant = void 0;
+exports.listColorVariant = ['main', 'accent'];

package/__inner__/cjs/components/List/entities/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./color"), exports);
+tslib_1.__exportStar(require("./size"), exports);

package/__inner__/cjs/components/List/entities/size.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.listSizeVariant = void 0;
+var types_1 = require("../../../types");
+exports.listSizeVariant = types_1.formElementSizeVariant;

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useListContext = void 0;
 var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./entities"), exports);
 tslib_1.__exportStar(require("./List"), exports);
 tslib_1.__exportStar(require("./components"), exports);
 tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/Menu/Menu.css

@@ -29,4 +29,5 @@
   .Menu {
   overflow: hidden auto;
   max-block-size: 40vh;
+  background-color: transparent;
 }

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

@@ -15,10 +15,10 @@ var constants_1 = require("./constants");
 exports.cnMenu = (0, classname_1.cn)('Menu');
 exports.Menu = (0, react_1.forwardRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Menu' });
-    var _a = props.size, size = _a === void 0 ? constants_1.MENU_DEFAULT_SIZE : _a, open = props.open, menuListProps = props.menuListProps, menuListRef = props.menuListRef, onClose = props.onClose, children = props.children, className = props.className, other = tslib_1.__rest(props, ["size", "open", "menuListProps", "menuListRef", "onClose", "children", "className"]);
+    var _a = props.size, size = _a === void 0 ? constants_1.MENU_DEFAULT_SIZE : _a, open = props.open, menuListProps = props.menuListProps, menuListRef = props.menuListRef, onClose = props.onClose, children = props.children, className = props.className, _b = props.color, color = _b === void 0 ? constants_1.MENU_DEFAULT_COLOR : _b, other = tslib_1.__rest(props, ["size", "open", "menuListProps", "menuListRef", "onClose", "children", "className", "color"]);
     var radius = (0, getPaperSizeToFormElement_1.getPaperSizeToFormElement)(size);
     (0, useDeprecated_1.useDeprecatedProperty)(!!menuListRef, 'menuListRef', 'menuListProps.ref');
     return (react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ as: Paper_1.Paper, offset: [0, 4], radius: radius }, other, { open: open, onClose: onClose, className: (0, exports.cnMenu)('', [className]), disableEnforceFocus: true, ref: ref }),
-        react_1.default.createElement(components_1.MenuContextConsumer, { onClose: onClose, menuListRef: menuListRef, menuListProps: tslib_1.__assign(tslib_1.__assign({ size: size }, menuListProps), { ref: menuListRef || (menuListProps === null || menuListProps === void 0 ? void 0 : menuListProps.ref) }) }, children)));
+        react_1.default.createElement(components_1.MenuContextConsumer, { onClose: onClose, menuListRef: menuListRef, menuListProps: tslib_1.__assign(tslib_1.__assign({ size: size, color: color }, menuListProps), { ref: menuListRef || (menuListProps === null || menuListProps === void 0 ? void 0 : menuListProps.ref) }) }, children)));
 });
 exports.Menu.displayName = 'Menu';

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

@@ -1,4 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MENU_DEFAULT_SIZE = void 0;
+exports.MENU_DEFAULT_COLOR = exports.MENU_DEFAULT_SIZE = void 0;
 exports.MENU_DEFAULT_SIZE = 'm';
+exports.MENU_DEFAULT_COLOR = 'main';

package/__inner__/cjs/components/Menu/entities/color.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.menuColorVariant = void 0;
+var List_1 = require("../../List");
+exports.menuColorVariant = List_1.listColorVariant;

package/__inner__/cjs/components/Menu/entities/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./color"), exports);
+tslib_1.__exportStar(require("./size"), exports);

package/__inner__/cjs/components/Menu/entities/size.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.menuSizeVariant = void 0;
+var types_1 = require("../../../types");
+exports.menuSizeVariant = types_1.formElementSizeVariant;

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

@@ -5,6 +5,7 @@ var tslib_1 = require("tslib");
 var List_1 = require("../List");
 Object.defineProperty(exports, "MenuItemText", { enumerable: true, get: function () { return List_1.ListItemText; } });
 Object.defineProperty(exports, "MenuItemIcon", { enumerable: true, get: function () { return List_1.ListItemIcon; } });
+tslib_1.__exportStar(require("./entities"), exports);
 tslib_1.__exportStar(require("./Menu"), exports);
 tslib_1.__exportStar(require("./components"), exports);
 tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/Sidebar/modules/SidebarCollapsibleItem/SidebarCollapsibleItem.css

@@ -3,7 +3,7 @@
   z-index: 0;
 }
 
-  .SidebarCollapsibleItem_collapsed .SidebarCollapsibleItem-Content {
+  .SidebarCollapsibleItem_collapsed .SidebarCollapsibleItem-ContentWrapper {
       opacity: 0;
       max-inline-size: 0;
       margin-inline-start: 0;
@@ -14,26 +14,32 @@
     z-index: 1;
   }
 
-  .SidebarCollapsibleItem-Content {
+  .SidebarCollapsibleItem-ContentWrapper {
     display: flex;
     flex-shrink: 0;
     margin-inline-start: var(--sidebar-collapsible-item-gap);
   }
 
-  .SidebarCollapsibleItem-Content > * {
-    flex-shrink: 0;
+  .SidebarCollapsibleItem-Content {
+    box-sizing: border-box;
   }
 
   .SidebarCollapsibleItem_center {
     margin-inline: auto;
   }
 
-.SidebarCollapsibleItem_animated .SidebarCollapsibleItem-Content {
+.Sidebar_variant_full .SidebarCollapsibleItem-Content, .Sidebar_variant_mini .SidebarCollapsibleItem-Content {
+    overflow: hidden;
+    inline-size: var(--sidebar-collapsible-item-content-width);
+    min-inline-size: var(--sidebar-collapsible-item-content-width);
+  }
+
+.SidebarCollapsibleItem_animated .SidebarCollapsibleItem-ContentWrapper {
     transition: var(--transition-default);
     transition-property: opacity, transform, max-inline-size, margin-inline;
   }
 
-.SidebarCollapsibleItem_animated.SidebarCollapsibleItem_collapsed .SidebarCollapsibleItem-Content {
+.SidebarCollapsibleItem_animated.SidebarCollapsibleItem_collapsed .SidebarCollapsibleItem-ContentWrapper {
       transform: translateX(calc(var(--sidebar-collapsible-item-gap) * -1));
       transition-duration: 100ms;
     }

package/__inner__/cjs/components/Sidebar/modules/SidebarCollapsibleItem/SidebarCollapsibleItem.js

@@ -17,8 +17,8 @@ exports.SidebarCollapsibleItem = (0, utils_1.polymorphicComponentWithRef)(functi
         props: inProps,
         name: 'SidebarCollapsibleItem',
     });
-    var _a = props.as, as = _a === void 0 ? constants_1.SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_TAG : _a, className = props.className, fixed = props.fixed, classNames = props.classNames, _b = props.justify, justify = _b === void 0 ? constants_1.SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_JUSTIFY : _b, _c = props.animated, animated = _c === void 0 ? true : _c, children = props.children, collapsed = props.collapsed, _d = props.autoCenter, autoCenter = _d === void 0 ? constants_1.SIDEBAR_COLLAPSIBLE_ITEM_AUTO_CENTER : _d, other = tslib_1.__rest(props, ["as", "className", "fixed", "classNames", "justify", "animated", "children", "collapsed", "autoCenter"]);
-    var variant = (0, SidebarContext_1.useSidebarContext)().variant;
+    var _a = props.as, as = _a === void 0 ? constants_1.SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_TAG : _a, className = props.className, fixed = props.fixed, classNames = props.classNames, _b = props.justify, justify = _b === void 0 ? constants_1.SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_JUSTIFY : _b, _c = props.animated, animated = _c === void 0 ? true : _c, children = props.children, collapsed = props.collapsed, _d = props.autoCenter, autoCenter = _d === void 0 ? constants_1.SIDEBAR_COLLAPSIBLE_ITEM_AUTO_CENTER : _d, contentFullWidth = props.contentFullWidth, other = tslib_1.__rest(props, ["as", "className", "fixed", "classNames", "justify", "animated", "children", "collapsed", "autoCenter", "contentFullWidth"]);
+    var _e = (0, SidebarContext_1.useSidebarContext)(), variant = _e.variant, size = _e.size;
     var isCollapsed = collapsed !== null && collapsed !== void 0 ? collapsed : variant === 'mini';
     var internalRef = (0, react_1.useRef)(null);
     var itemRef = (0, useMultiRef_1.useMultiRef)([ref, internalRef]);
@@ -29,15 +29,22 @@ exports.SidebarCollapsibleItem = (0, utils_1.polymorphicComponentWithRef)(functi
             props: { collapsed: isCollapsed },
         })
         : fixed;
-    var _e = (0, hooks_1.useSidebarCollapsibleItemAnimation)({
+    var _f = (0, hooks_1.useSidebarCollapsibleItemAnimation)({
         autoCenter: autoCenter,
         ref: internalRef,
         fixedRef: fixedRef,
         isCollapsed: isCollapsed,
-    }), onExit = _e.onExit, onEnter = _e.onEnter, onTransitionEnd = _e.onTransitionEnd, hasMarginAutoClass = _e.hasMarginAutoClass;
+    }), onExit = _f.onExit, onEnter = _f.onEnter, onTransitionEnd = _f.onTransitionEnd, hasMarginAutoClass = _f.hasMarginAutoClass;
     return (react_1.default.createElement(react_transition_group_1.CSSTransition, { nodeRef: internalRef, in: isCollapsed, timeout: { enter: 120, exit: 120 }, appear: true, onEnter: onEnter, onExit: onExit, onEntered: onTransitionEnd, onExited: onTransitionEnd },
         react_1.default.createElement(Stack_1.Stack, tslib_1.__assign({}, other, { ref: itemRef, as: as, className: (0, exports.cnSidebarCollapsibleItem)({ collapsed: isCollapsed, animated: animated, center: hasMarginAutoClass }, [className]), justify: justify }),
             react_1.default.createElement("div", { ref: fixedRef, className: (0, exports.cnSidebarCollapsibleItem)('Fixed', [classNames === null || classNames === void 0 ? void 0 : classNames.fixed]) }, fixedRendered),
-            react_1.default.createElement("div", { className: (0, exports.cnSidebarCollapsibleItem)('Content', [classNames === null || classNames === void 0 ? void 0 : classNames.content]) }, children))));
+            react_1.default.createElement("div", { className: (0, exports.cnSidebarCollapsibleItem)('ContentWrapper', [
+                    classNames === null || classNames === void 0 ? void 0 : classNames.contentWrapper,
+                ]), style: (0, utils_1.generateCSSVariables)({
+                    'sidebar-collapsible-item-content-width': "".concat(contentFullWidth[size], "px"),
+                }) },
+                react_1.default.createElement("div", { className: (0, exports.cnSidebarCollapsibleItem)('Content', [
+                        classNames === null || classNames === void 0 ? void 0 : classNames.content,
+                    ]) }, children)))));
 });
 exports.SidebarCollapsibleItem.displayName = 'SidebarCollapsibleItem';

package/__inner__/cjs/components/Sidebar/modules/SidebarHeaderLogo/SidebarHeaderLogo.css

@@ -20,7 +20,6 @@
     letter-spacing: var(--typography-text-m_1-letter_spacing, 0);
     text-transform: var(--typography-text-m_1-text_transform, none);
     color: var(--sidebar-content-primary-color);
-    white-space: nowrap;
   }
 .SidebarHeaderLogo-Icon {
     background-color: var(--sidebar-header-icon-background);

package/__inner__/cjs/components/Sidebar/modules/SidebarHeaderLogo/SidebarHeaderLogo.js

@@ -17,6 +17,9 @@ exports.SidebarHeaderLogo = (0, utils_1.polymorphicComponentWithRef)(function (i
     });
     var _a = props.as, as = _a === void 0 ? constants_1.SIDEBAR_HEADER_LOGO_DEFAULT_TAG : _a, className = props.className, children = props.children, icon = props.icon, other = tslib_1.__rest(props, ["as", "className", "children", "icon"]);
     var _b = (0, SidebarContext_1.useSidebarContext)(), color = _b.color, variant = _b.variant, size = _b.size;
-    return (react_1.default.createElement(SidebarCollapsibleItem_1.SidebarCollapsibleItem, tslib_1.__assign({}, other, { as: as, fixed: react_1.default.createElement(Stack_1.Stack, { className: (0, exports.cnSidebarHeaderLogo)('Icon'), justify: "center", align: "center" }, icon), collapsed: variant !== 'full', classNames: { content: (0, exports.cnSidebarHeaderLogo)('Text') }, ref: ref, className: (0, exports.cnSidebarHeaderLogo)({ color: color, size: size }, [className]), align: "center" }), children));
+    return (react_1.default.createElement(SidebarCollapsibleItem_1.SidebarCollapsibleItem, tslib_1.__assign({}, other, { as: as, fixed: react_1.default.createElement(Stack_1.Stack, { className: (0, exports.cnSidebarHeaderLogo)('Icon'), justify: "center", align: "center" }, icon), collapsed: variant !== 'full', classNames: { content: (0, exports.cnSidebarHeaderLogo)('Text') }, ref: ref, className: (0, exports.cnSidebarHeaderLogo)({ color: color, size: size }, [className]), align: "center", contentFullWidth: {
+            s: 184,
+            m: 200,
+        } }), children));
 });
 exports.SidebarHeaderLogo.displayName = 'SidebarHeaderLogo';

package/__inner__/cjs/components/Sidebar/modules/SidebarItem/SidebarItem.css

@@ -64,9 +64,8 @@
     block-size: 24px;
   }
 .SidebarItem-Content {
-    flex: 1;
+    display: flex;
     color: var(--sidebar-content-primary-color);
-    white-space: nowrap;
     justify-content: space-between;
     align-items: center;
   }

package/__inner__/cjs/components/Sidebar/modules/SidebarItem/SidebarItem.js

@@ -54,7 +54,10 @@ exports.SidebarItem = (0, utils_1.polymorphicComponentWithRef)(function (inProps
         react_1.default.createElement(SidebarCollapsibleItem_1.SidebarCollapsibleItem, tslib_1.__assign({}, other, { as: as, onClick: function (event) {
                 onClick === null || onClick === void 0 ? void 0 : onClick(event);
                 setIsOpenSubItems(!isOpenSubitems);
-            }, collapsed: isCollapsed, className: (0, exports.cnSidebarItem)('Item'), autoCenter: false, fixed: function (props) {
+            }, collapsed: isCollapsed, className: (0, exports.cnSidebarItem)('Item'), contentFullWidth: {
+                s: 180,
+                m: 196,
+            }, autoCenter: false, fixed: function (props) {
                 var badge = (0, utils_1.isFunction)(badgeProp)
                     ? badgeProp({ collapsed: props.collapsed })
                     : badgeProp;

package/__inner__/cjs/components/Sidebar/modules/SidebarUser/SidebarUser.css

@@ -25,8 +25,6 @@
     overflow: hidden;
     justify-content: space-between;
     align-items: center;
-    flex: 1;
-    white-space: nowrap;
     gap: var(--spacing-xs)
   }
 

package/__inner__/cjs/components/Sidebar/modules/SidebarUser/SidebarUser.js

@@ -27,6 +27,9 @@ exports.SidebarUser = (0, utils_1.polymorphicComponentWithRef)(function (inProps
             } })), collapsed: isCollapsed, classNames: {
             content: (0, exports.cnSidebarUser)('Content'),
             fixed: (0, exports.cnSidebarUser)('Fixed'),
+        }, contentFullWidth: {
+            s: 184,
+            m: 200,
         } }),
         react_1.default.createElement(Stack_1.Stack, { direction: "column", className: (0, exports.cnSidebarUser)('Info') },
             react_1.default.createElement(Typography_1.Typography, { variant: "text-s", as: "span", className: (0, exports.cnSidebarUser)('Name') }, name),

package/__inner__/cjs/components/Sidebar/modules/SidebarUserMenu/SidebarUserMenu.css

@@ -31,6 +31,11 @@
   .SidebarUserMenu-Button_open .SidebarUserMenu-Chevron {
         transform: rotate(180deg);
       }
+  .SidebarUserMenu-Button .SidebarUserMenu-LabelWrapper {
+    overflow: initial;
+    text-overflow: initial;
+    white-space: initial;
+  }
   .SidebarUserMenu-Label {
     display: -webkit-box;
     -webkit-box-orient: block-axis;

package/__inner__/cjs/components/Sidebar/modules/SidebarUserMenu/SidebarUserMenu.js

@@ -40,9 +40,11 @@ exports.SidebarUserMenu = (0, utils_1.polymorphicComponentWithRef)(function (inP
                 onClick === null || onClick === void 0 ? void 0 : onClick(event);
             }, style: (0, utils_1.generateCSSVariables)({
                 'sidebar-user-menu-ellipsis': maxLines.toString(),
-            }), className: (0, exports.cnSidebarUserMenu)('Button', { color: color, open: isOpen, manyLines: isManyLines }, [className]), size: "2xs", iconRight: react_1.default.createElement(icons_1.ChevronDownSmallIcon, { className: (0, exports.cnSidebarUserMenu)('Chevron') }) }),
+            }), className: (0, exports.cnSidebarUserMenu)('Button', { color: color, open: isOpen, manyLines: isManyLines }, [className]), labelProps: {
+                className: (0, exports.cnSidebarUserMenu)('LabelWrapper'),
+            }, size: "2xs", iconRight: react_1.default.createElement(icons_1.ChevronDownSmallIcon, { className: (0, exports.cnSidebarUserMenu)('Chevron') }) }),
             react_1.default.createElement(Typography_1.Typography, { variant: labelVariant, className: (0, exports.cnSidebarUserMenu)('Label'), color: "inherit", as: "span" }, label)),
-        react_1.default.createElement(Menu_1.Menu, tslib_1.__assign({ placement: "right-end" }, menuProps, { size: (_a = menuProps === null || menuProps === void 0 ? void 0 : menuProps.size) !== null && _a !== void 0 ? _a : constants_1.SIDEBAR_USER_MENU_DEFAULT_MENU_SIZE, anchorRef: buttonRef, open: isOpen, className: (0, exports.cnSidebarUserMenu)('Menu', [menuProps === null || menuProps === void 0 ? void 0 : menuProps.className]), onClose: function () {
+        react_1.default.createElement(Menu_1.Menu, tslib_1.__assign({ placement: "right-end", anchorRef: buttonRef, color: color }, menuProps, { size: (_a = menuProps === null || menuProps === void 0 ? void 0 : menuProps.size) !== null && _a !== void 0 ? _a : constants_1.SIDEBAR_USER_MENU_DEFAULT_MENU_SIZE, open: isOpen, className: (0, exports.cnSidebarUserMenu)('Menu', [menuProps === null || menuProps === void 0 ? void 0 : menuProps.className]), onClose: function () {
                 var _a;
                 setIsOpen(false);
                 (_a = menuProps === null || menuProps === void 0 ? void 0 : menuProps.onClose) === null || _a === void 0 ? void 0 : _a.call(menuProps);

package/__inner__/esm/components/DataList/entities/index.js

@@ -0,0 +1 @@
+export * from './size';

package/__inner__/esm/components/DataList/entities/size.js

@@ -0,0 +1,2 @@
+import { formElementSizeVariant } from '../../../types';
+export var dataListSizeVariant = formElementSizeVariant;

package/__inner__/esm/components/DataList/index.js

@@ -1,3 +1,4 @@
+export * from './entities';
 export * from './DataList';
 export * from './components';
 export * from './types';

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

@@ -1,12 +1,6 @@
 .List {
   --list-item-bg-color: transparent;
-  --list-item-color: var(--color-content-primary);
-  --list-pipka-bg-color: var(--color-content-action);
-  --list-item-bg-color-disabled: var(--color-content-tertiary);
-  --list-item-bg-color-hover: var(--color-background-main-hover);
-  --list-item-bg-color-active: var(--color-background-main-pressed);
-  --list-pipka-border-radius: 0 var(--border-radius-xs) var(--border-radius-xs)
-    0;
+  --list-pipka-border-radius: 0 var(--border-radius-xs) var(--border-radius-xs) 0;
   display: flex;
   flex-direction: column;
   gap: var(--list-gap);
@@ -14,8 +8,35 @@
   margin: 0;
   position: relative;
   outline: none;
+  background-color: var(--list-bg-color);
 }
 
+  .List_color_main {
+    --list-bg-color: var(--color-background-main);
+    --list-item-color: var(--color-content-primary);
+    --list-item-secondary-color: var(--color-content-secondary);
+    --list-item-disabled-color: var(--color-content-tertiary);
+    --list-pipka-bg-color: var(--color-content-action);
+    --list-item-bg-color-disabled: var(--color-content-tertiary);
+    --list-item-bg-color-hover: var(--color-background-main-hover);
+    --list-item-bg-color-active: var(--color-background-main-pressed);
+    --list-item-bg-color-selected: transparent;
+    --list-divider-color: var(--color-border-secondary);
+  }
+
+  .List_color_accent {
+    --list-bg-color: var(--color-accent-main);
+    --list-item-color: var(--color-content-accent-primary);
+    --list-item-secondary-color: var(--color-content-accent-secondary);
+    --list-item-disabled-color: var(--color-content-accent-disabled);
+    --list-pipka-bg-color: var(--color-content-accent-primary);
+    --list-item-bg-color-disabled: var(--color-content-accent-disabled);
+    --list-item-bg-color-hover: var(--color-accent-primary-hover);
+    --list-item-bg-color-active: var(--color-accent-primary-pressed);
+    --list-item-bg-color-selected: var(--color-accent-primary);
+    --list-divider-color: var(--color-accent-primary);
+  }
+
   .List_size_2xs,
     .List_size_xs,
     .List_size_s {
@@ -91,3 +112,7 @@
   .List:empty {
     --list-gutter: 0;
   }
+
+  .List .Divider {
+    --divider-color: var(--list-divider-color);
+  }

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

@@ -4,13 +4,13 @@ import React from 'react';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
-import { LIST_DEFAULT_SIZE, LIST_DEFAULT_TAG, LIST_DEFAULT_DISABLE_PADDING, } from './constants';
+import { LIST_DEFAULT_SIZE, LIST_DEFAULT_TAG, LIST_DEFAULT_DISABLE_PADDING, LIST_DEFAULT_COLOR, } from './constants';
 import { ListContext } from './ListContext';
 export var cnList = cn('List');
 export var List = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'List' });
-    var _a = props.as, Tag = _a === void 0 ? LIST_DEFAULT_TAG : _a, _b = props.size, size = _b === void 0 ? LIST_DEFAULT_SIZE : _b, _c = props.disablePadding, disablePadding = _c === void 0 ? LIST_DEFAULT_DISABLE_PADDING : _c, children = props.children, className = props.className, other = __rest(props, ["as", "size", "disablePadding", "children", "className"]);
+    var _a = props.as, Tag = _a === void 0 ? LIST_DEFAULT_TAG : _a, _b = props.size, size = _b === void 0 ? LIST_DEFAULT_SIZE : _b, _c = props.disablePadding, disablePadding = _c === void 0 ? LIST_DEFAULT_DISABLE_PADDING : _c, children = props.children, className = props.className, _d = props.color, color = _d === void 0 ? LIST_DEFAULT_COLOR : _d, other = __rest(props, ["as", "size", "disablePadding", "children", "className", "color"]);
     return (React.createElement(ListContext.Provider, { value: { size: size } },
-        React.createElement(Tag, __assign({ className: cnList({ size: size, disablePadding: disablePadding }, [className]) }, other, { ref: ref }), children)));
+        React.createElement(Tag, __assign({ className: cnList({ size: size, disablePadding: disablePadding, color: color }, [className]) }, other, { ref: ref }), children)));
 });
 List.displayName = 'List';

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

@@ -50,9 +50,13 @@
 
   .ListItemButton_disabled .ListItemText-TextPrimary,
     .ListItemButton_disabled .ListItemText-TextSecondary {
-      color: var(--color-content-tertiary);
+      color: var(--list-item-disabled-color);
     }
 
+  .ListItemButton_selected {
+    background-color: var(--list-item-bg-color-selected);
+  }
+
   .ListItemButton_selected::after {
     content: '';
     inline-size: var(--list-pipka-width);

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

@@ -6,6 +6,14 @@
   min-inline-size: 0;
 }
 
+  .ListItemText-TextPrimary {
+    color: var(--list-item-color);
+  }
+
+  .ListItemText-TextSecondary {
+    color: var(--list-item-secondary-color);
+  }
+
   .ListItemText:last-child {
     margin-inline-end: 0;
   }

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

@@ -1,6 +1,7 @@
 export var LIST_DEFAULT_SIZE = 'm';
 export var LIST_DEFAULT_DISABLE_PADDING = false;
 export var LIST_DEFAULT_TAG = 'ul';
+export var LIST_DEFAULT_COLOR = 'main';
 export var LIST_ITEM_DEFAULT_TAG = 'li';
 export var LIST_ITEM_DEFAULT_ALIGN = 'center';
 export var LIST_ITEM_BUTTON_DEFAULT_TAG = 'div';

package/__inner__/esm/components/List/entities/color.js

@@ -0,0 +1 @@
+export var listColorVariant = ['main', 'accent'];

package/__inner__/esm/components/List/entities/index.js

@@ -0,0 +1,2 @@
+export * from './color';
+export * from './size';

package/__inner__/esm/components/List/entities/size.js

@@ -0,0 +1,2 @@
+import { formElementSizeVariant } from '../../../types';
+export var listSizeVariant = formElementSizeVariant;

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

@@ -1,3 +1,4 @@
+export * from './entities';
 export * from './List';
 export * from './components';
 export * from './types';

package/__inner__/esm/components/Menu/Menu.css

@@ -29,4 +29,5 @@
   .Menu {
   overflow: hidden auto;
   max-block-size: 40vh;
+  background-color: transparent;
 }

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

@@ -8,14 +8,14 @@ import { getPaperSizeToFormElement } from '../../utils/getPaperSizeToFormElement
 import { Paper } from '../Paper';
 import { Popover } from '../Popover';
 import { MenuContextConsumer } from './components';
-import { MENU_DEFAULT_SIZE } from './constants';
+import { MENU_DEFAULT_COLOR, MENU_DEFAULT_SIZE } from './constants';
 export var cnMenu = cn('Menu');
 export var Menu = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'Menu' });
-    var _a = props.size, size = _a === void 0 ? MENU_DEFAULT_SIZE : _a, open = props.open, menuListProps = props.menuListProps, menuListRef = props.menuListRef, onClose = props.onClose, children = props.children, className = props.className, other = __rest(props, ["size", "open", "menuListProps", "menuListRef", "onClose", "children", "className"]);
+    var _a = props.size, size = _a === void 0 ? MENU_DEFAULT_SIZE : _a, open = props.open, menuListProps = props.menuListProps, menuListRef = props.menuListRef, onClose = props.onClose, children = props.children, className = props.className, _b = props.color, color = _b === void 0 ? MENU_DEFAULT_COLOR : _b, other = __rest(props, ["size", "open", "menuListProps", "menuListRef", "onClose", "children", "className", "color"]);
     var radius = getPaperSizeToFormElement(size);
     useDeprecatedProperty(!!menuListRef, 'menuListRef', 'menuListProps.ref');
     return (React.createElement(Popover, __assign({ as: Paper, offset: [0, 4], radius: radius }, other, { open: open, onClose: onClose, className: cnMenu('', [className]), disableEnforceFocus: true, ref: ref }),
-        React.createElement(MenuContextConsumer, { onClose: onClose, menuListRef: menuListRef, menuListProps: __assign(__assign({ size: size }, menuListProps), { ref: menuListRef || (menuListProps === null || menuListProps === void 0 ? void 0 : menuListProps.ref) }) }, children)));
+        React.createElement(MenuContextConsumer, { onClose: onClose, menuListRef: menuListRef, menuListProps: __assign(__assign({ size: size, color: color }, menuListProps), { ref: menuListRef || (menuListProps === null || menuListProps === void 0 ? void 0 : menuListProps.ref) }) }, children)));
 });
 Menu.displayName = 'Menu';

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

@@ -1 +1,2 @@
 export var MENU_DEFAULT_SIZE = 'm';
+export var MENU_DEFAULT_COLOR = 'main';

package/__inner__/esm/components/Menu/entities/color.js

@@ -0,0 +1,2 @@
+import { listColorVariant } from '../../List';
+export var menuColorVariant = listColorVariant;

package/__inner__/esm/components/Menu/entities/index.js

@@ -0,0 +1,2 @@
+export * from './color';
+export * from './size';

package/__inner__/esm/components/Menu/entities/size.js

@@ -0,0 +1,2 @@
+import { formElementSizeVariant } from '../../../types';
+export var menuSizeVariant = formElementSizeVariant;

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

@@ -1,4 +1,5 @@
 export { ListItemText as MenuItemText, ListItemIcon as MenuItemIcon, } from '../List';
+export * from './entities';
 export * from './Menu';
 export * from './components';
 export * from './types';

package/__inner__/esm/components/Sidebar/modules/SidebarCollapsibleItem/SidebarCollapsibleItem.css

@@ -3,7 +3,7 @@
   z-index: 0;
 }
 
-  .SidebarCollapsibleItem_collapsed .SidebarCollapsibleItem-Content {
+  .SidebarCollapsibleItem_collapsed .SidebarCollapsibleItem-ContentWrapper {
       opacity: 0;
       max-inline-size: 0;
       margin-inline-start: 0;
@@ -14,26 +14,32 @@
     z-index: 1;
   }
 
-  .SidebarCollapsibleItem-Content {
+  .SidebarCollapsibleItem-ContentWrapper {
     display: flex;
     flex-shrink: 0;
     margin-inline-start: var(--sidebar-collapsible-item-gap);
   }
 
-  .SidebarCollapsibleItem-Content > * {
-    flex-shrink: 0;
+  .SidebarCollapsibleItem-Content {
+    box-sizing: border-box;
   }
 
   .SidebarCollapsibleItem_center {
     margin-inline: auto;
   }
 
-.SidebarCollapsibleItem_animated .SidebarCollapsibleItem-Content {
+.Sidebar_variant_full .SidebarCollapsibleItem-Content, .Sidebar_variant_mini .SidebarCollapsibleItem-Content {
+    overflow: hidden;
+    inline-size: var(--sidebar-collapsible-item-content-width);
+    min-inline-size: var(--sidebar-collapsible-item-content-width);
+  }
+
+.SidebarCollapsibleItem_animated .SidebarCollapsibleItem-ContentWrapper {
     transition: var(--transition-default);
     transition-property: opacity, transform, max-inline-size, margin-inline;
   }
 
-.SidebarCollapsibleItem_animated.SidebarCollapsibleItem_collapsed .SidebarCollapsibleItem-Content {
+.SidebarCollapsibleItem_animated.SidebarCollapsibleItem_collapsed .SidebarCollapsibleItem-ContentWrapper {
       transform: translateX(calc(var(--sidebar-collapsible-item-gap) * -1));
       transition-duration: 100ms;
     }

package/__inner__/esm/components/Sidebar/modules/SidebarCollapsibleItem/SidebarCollapsibleItem.js

@@ -3,7 +3,7 @@ import React, { useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { useMultiRef } from '../../../../hooks/useMultiRef';
 import { useThemeProps } from '../../../../hooks/useThemeProps';
-import { cn, isFunction, polymorphicComponentWithRef, renderContent, } from '../../../../utils';
+import { cn, generateCSSVariables, isFunction, polymorphicComponentWithRef, renderContent, } from '../../../../utils';
 import { Stack } from '../../../Stack';
 import { useSidebarContext } from '../../SidebarContext';
 import { SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_TAG, SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_JUSTIFY, SIDEBAR_COLLAPSIBLE_ITEM_AUTO_CENTER, } from './constants';
@@ -14,8 +14,8 @@ export var SidebarCollapsibleItem = polymorphicComponentWithRef(function (inProp
         props: inProps,
         name: 'SidebarCollapsibleItem',
     });
-    var _a = props.as, as = _a === void 0 ? SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_TAG : _a, className = props.className, fixed = props.fixed, classNames = props.classNames, _b = props.justify, justify = _b === void 0 ? SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_JUSTIFY : _b, _c = props.animated, animated = _c === void 0 ? true : _c, children = props.children, collapsed = props.collapsed, _d = props.autoCenter, autoCenter = _d === void 0 ? SIDEBAR_COLLAPSIBLE_ITEM_AUTO_CENTER : _d, other = __rest(props, ["as", "className", "fixed", "classNames", "justify", "animated", "children", "collapsed", "autoCenter"]);
-    var variant = useSidebarContext().variant;
+    var _a = props.as, as = _a === void 0 ? SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_TAG : _a, className = props.className, fixed = props.fixed, classNames = props.classNames, _b = props.justify, justify = _b === void 0 ? SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_JUSTIFY : _b, _c = props.animated, animated = _c === void 0 ? true : _c, children = props.children, collapsed = props.collapsed, _d = props.autoCenter, autoCenter = _d === void 0 ? SIDEBAR_COLLAPSIBLE_ITEM_AUTO_CENTER : _d, contentFullWidth = props.contentFullWidth, other = __rest(props, ["as", "className", "fixed", "classNames", "justify", "animated", "children", "collapsed", "autoCenter", "contentFullWidth"]);
+    var _e = useSidebarContext(), variant = _e.variant, size = _e.size;
     var isCollapsed = collapsed !== null && collapsed !== void 0 ? collapsed : variant === 'mini';
     var internalRef = useRef(null);
     var itemRef = useMultiRef([ref, internalRef]);
@@ -26,15 +26,22 @@ export var SidebarCollapsibleItem = polymorphicComponentWithRef(function (inProp
             props: { collapsed: isCollapsed },
         })
         : fixed;
-    var _e = useSidebarCollapsibleItemAnimation({
+    var _f = useSidebarCollapsibleItemAnimation({
         autoCenter: autoCenter,
         ref: internalRef,
         fixedRef: fixedRef,
         isCollapsed: isCollapsed,
-    }), onExit = _e.onExit, onEnter = _e.onEnter, onTransitionEnd = _e.onTransitionEnd, hasMarginAutoClass = _e.hasMarginAutoClass;
+    }), onExit = _f.onExit, onEnter = _f.onEnter, onTransitionEnd = _f.onTransitionEnd, hasMarginAutoClass = _f.hasMarginAutoClass;
     return (React.createElement(CSSTransition, { nodeRef: internalRef, in: isCollapsed, timeout: { enter: 120, exit: 120 }, appear: true, onEnter: onEnter, onExit: onExit, onEntered: onTransitionEnd, onExited: onTransitionEnd },
         React.createElement(Stack, __assign({}, other, { ref: itemRef, as: as, className: cnSidebarCollapsibleItem({ collapsed: isCollapsed, animated: animated, center: hasMarginAutoClass }, [className]), justify: justify }),
             React.createElement("div", { ref: fixedRef, className: cnSidebarCollapsibleItem('Fixed', [classNames === null || classNames === void 0 ? void 0 : classNames.fixed]) }, fixedRendered),
-            React.createElement("div", { className: cnSidebarCollapsibleItem('Content', [classNames === null || classNames === void 0 ? void 0 : classNames.content]) }, children))));
+            React.createElement("div", { className: cnSidebarCollapsibleItem('ContentWrapper', [
+                    classNames === null || classNames === void 0 ? void 0 : classNames.contentWrapper,
+                ]), style: generateCSSVariables({
+                    'sidebar-collapsible-item-content-width': "".concat(contentFullWidth[size], "px"),
+                }) },
+                React.createElement("div", { className: cnSidebarCollapsibleItem('Content', [
+                        classNames === null || classNames === void 0 ? void 0 : classNames.content,
+                    ]) }, children)))));
 });
 SidebarCollapsibleItem.displayName = 'SidebarCollapsibleItem';

package/__inner__/esm/components/Sidebar/modules/SidebarHeaderLogo/SidebarHeaderLogo.css

@@ -20,7 +20,6 @@
     letter-spacing: var(--typography-text-m_1-letter_spacing, 0);
     text-transform: var(--typography-text-m_1-text_transform, none);
     color: var(--sidebar-content-primary-color);
-    white-space: nowrap;
   }
 .SidebarHeaderLogo-Icon {
     background-color: var(--sidebar-header-icon-background);

package/__inner__/esm/components/Sidebar/modules/SidebarHeaderLogo/SidebarHeaderLogo.js

@@ -14,6 +14,9 @@ export var SidebarHeaderLogo = polymorphicComponentWithRef(function (inProps, re
     });
     var _a = props.as, as = _a === void 0 ? SIDEBAR_HEADER_LOGO_DEFAULT_TAG : _a, className = props.className, children = props.children, icon = props.icon, other = __rest(props, ["as", "className", "children", "icon"]);
     var _b = useSidebarContext(), color = _b.color, variant = _b.variant, size = _b.size;
-    return (React.createElement(SidebarCollapsibleItem, __assign({}, other, { as: as, fixed: React.createElement(Stack, { className: cnSidebarHeaderLogo('Icon'), justify: "center", align: "center" }, icon), collapsed: variant !== 'full', classNames: { content: cnSidebarHeaderLogo('Text') }, ref: ref, className: cnSidebarHeaderLogo({ color: color, size: size }, [className]), align: "center" }), children));
+    return (React.createElement(SidebarCollapsibleItem, __assign({}, other, { as: as, fixed: React.createElement(Stack, { className: cnSidebarHeaderLogo('Icon'), justify: "center", align: "center" }, icon), collapsed: variant !== 'full', classNames: { content: cnSidebarHeaderLogo('Text') }, ref: ref, className: cnSidebarHeaderLogo({ color: color, size: size }, [className]), align: "center", contentFullWidth: {
+            s: 184,
+            m: 200,
+        } }), children));
 });
 SidebarHeaderLogo.displayName = 'SidebarHeaderLogo';

package/__inner__/esm/components/Sidebar/modules/SidebarItem/SidebarItem.css

@@ -64,9 +64,8 @@
     block-size: 24px;
   }
 .SidebarItem-Content {
-    flex: 1;
+    display: flex;
     color: var(--sidebar-content-primary-color);
-    white-space: nowrap;
     justify-content: space-between;
     align-items: center;
   }

package/__inner__/esm/components/Sidebar/modules/SidebarItem/SidebarItem.js

@@ -51,7 +51,10 @@ export var SidebarItem = polymorphicComponentWithRef(function (inProps, ref) {
         React.createElement(SidebarCollapsibleItem, __assign({}, other, { as: as, onClick: function (event) {
                 onClick === null || onClick === void 0 ? void 0 : onClick(event);
                 setIsOpenSubItems(!isOpenSubitems);
-            }, collapsed: isCollapsed, className: cnSidebarItem('Item'), autoCenter: false, fixed: function (props) {
+            }, collapsed: isCollapsed, className: cnSidebarItem('Item'), contentFullWidth: {
+                s: 180,
+                m: 196,
+            }, autoCenter: false, fixed: function (props) {
                 var badge = isFunction(badgeProp)
                     ? badgeProp({ collapsed: props.collapsed })
                     : badgeProp;

package/__inner__/esm/components/Sidebar/modules/SidebarUser/SidebarUser.css

@@ -25,8 +25,6 @@
     overflow: hidden;
     justify-content: space-between;
     align-items: center;
-    flex: 1;
-    white-space: nowrap;
     gap: var(--spacing-xs)
   }
 

package/__inner__/esm/components/Sidebar/modules/SidebarUser/SidebarUser.js

@@ -24,6 +24,9 @@ export var SidebarUser = polymorphicComponentWithRef(function (inProps, ref) {
             } })), collapsed: isCollapsed, classNames: {
             content: cnSidebarUser('Content'),
             fixed: cnSidebarUser('Fixed'),
+        }, contentFullWidth: {
+            s: 184,
+            m: 200,
         } }),
         React.createElement(Stack, { direction: "column", className: cnSidebarUser('Info') },
             React.createElement(Typography, { variant: "text-s", as: "span", className: cnSidebarUser('Name') }, name),

package/__inner__/esm/components/Sidebar/modules/SidebarUserMenu/SidebarUserMenu.css

@@ -31,6 +31,11 @@
   .SidebarUserMenu-Button_open .SidebarUserMenu-Chevron {
         transform: rotate(180deg);
       }
+  .SidebarUserMenu-Button .SidebarUserMenu-LabelWrapper {
+    overflow: initial;
+    text-overflow: initial;
+    white-space: initial;
+  }
   .SidebarUserMenu-Label {
     display: -webkit-box;
     -webkit-box-orient: block-axis;

package/__inner__/esm/components/Sidebar/modules/SidebarUserMenu/SidebarUserMenu.js

@@ -37,9 +37,11 @@ export var SidebarUserMenu = polymorphicComponentWithRef(function (inProps, ref)
                 onClick === null || onClick === void 0 ? void 0 : onClick(event);
             }, style: generateCSSVariables({
                 'sidebar-user-menu-ellipsis': maxLines.toString(),
-            }), className: cnSidebarUserMenu('Button', { color: color, open: isOpen, manyLines: isManyLines }, [className]), size: "2xs", iconRight: React.createElement(ChevronDownSmallIcon, { className: cnSidebarUserMenu('Chevron') }) }),
+            }), className: cnSidebarUserMenu('Button', { color: color, open: isOpen, manyLines: isManyLines }, [className]), labelProps: {
+                className: cnSidebarUserMenu('LabelWrapper'),
+            }, size: "2xs", iconRight: React.createElement(ChevronDownSmallIcon, { className: cnSidebarUserMenu('Chevron') }) }),
             React.createElement(Typography, { variant: labelVariant, className: cnSidebarUserMenu('Label'), color: "inherit", as: "span" }, label)),
-        React.createElement(Menu, __assign({ placement: "right-end" }, menuProps, { size: (_a = menuProps === null || menuProps === void 0 ? void 0 : menuProps.size) !== null && _a !== void 0 ? _a : SIDEBAR_USER_MENU_DEFAULT_MENU_SIZE, anchorRef: buttonRef, open: isOpen, className: cnSidebarUserMenu('Menu', [menuProps === null || menuProps === void 0 ? void 0 : menuProps.className]), onClose: function () {
+        React.createElement(Menu, __assign({ placement: "right-end", anchorRef: buttonRef, color: color }, menuProps, { size: (_a = menuProps === null || menuProps === void 0 ? void 0 : menuProps.size) !== null && _a !== void 0 ? _a : SIDEBAR_USER_MENU_DEFAULT_MENU_SIZE, open: isOpen, className: cnSidebarUserMenu('Menu', [menuProps === null || menuProps === void 0 ? void 0 : menuProps.className]), onClose: function () {
                 var _a;
                 setIsOpen(false);
                 (_a = menuProps === null || menuProps === void 0 ? void 0 : menuProps.onClose) === null || _a === void 0 ? void 0 : _a.call(menuProps);

package/__inner__/types/components/AutocompleteNext/components/AutocompleteDropdown/types.d.ts

@@ -37,7 +37,7 @@ export type AutocompleteDropdownProps<OPTION = AutocompleteDefaultOption, MULTIP
     /** Свойства компонента Popover */
     popoverProps?: Partial<Omit<PopoverProps, 'children' | 'open' | 'anchorRef' | 'onClose' | 'className'>>;
     /** Свойства компонента List */
-    listProps?: Partial<Omit<ListProps, 'children'>>;
+    listProps?: Partial<Omit<ListProps, 'children' | 'color'>>;
     loading?: boolean;
     hasOptions?: boolean;
     'data-testid'?: string;

package/__inner__/types/components/DataList/entities/index.d.ts

@@ -0,0 +1 @@
+export * from './size';

package/__inner__/types/components/DataList/entities/size.d.ts

@@ -0,0 +1,2 @@
+export declare const dataListSizeVariant: readonly ["2xs", "xs", "s", "m", "l"];
+export type DataListSizeVariant = (typeof dataListSizeVariant)[number];

package/__inner__/types/components/DataList/index.d.ts

@@ -1,3 +1,4 @@
+export * from './entities';
 export * from './DataList';
 export * from './components';
 export * from './types';

package/__inner__/types/components/DataList/types.d.ts

@@ -1,11 +1,11 @@
 import type { ReactNode, ElementType, SyntheticEvent } from 'react';
 import type React from 'react';
-import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import type { WithDisplayName } from '../../types/react';
 import type { PolymorphicComponentPropsWithRef, PolymorphicComponentRef } from '../../utils/polymorphicComponentWithRef';
 import type { ListProps } from '../List';
 import type { PopoverBaseProps } from '../Popover';
 import type { DATA_LIST_DEFAULT_TAG } from './constants';
+import type { DataListSizeVariant } from './entities';
 export type DataListValue = string | number;
 export type DataListSelected<MULTIPLE extends boolean> = (MULTIPLE extends true ? DataListValue[] : DataListValue) | undefined;
 export type DataListPayload<MULTIPLE extends boolean> = {
@@ -25,7 +25,7 @@ export type DataListBaseProps<MULTIPLE extends boolean = false> = {
     /** Дополнительные CSS-классы */
     className?: string;
     /** Размер компонента */
-    size?: FormElementSizeVariant;
+    size?: DataListSizeVariant;
     /** Выбранная или выбранные опции */
     selected?: DataListSelected<MULTIPLE>;
     /** Выбранная опция по умолчанию */
@@ -33,7 +33,7 @@ export type DataListBaseProps<MULTIPLE extends boolean = false> = {
     /** Функция обратного вызова для выбора значения */
     onSelect?: DataListOnSelect<MULTIPLE>;
     /** Свойства компонента List */
-    listProps?: ListProps;
+    listProps?: Omit<ListProps, 'color'>;
 } & Omit<PopoverBaseProps, 'onSelect'>;
 export type DataListRef = PolymorphicComponentRef<typeof DATA_LIST_DEFAULT_TAG>;
 export type DataListProps<As extends ElementType = typeof DATA_LIST_DEFAULT_TAG, MULTIPLE extends boolean = false> = PolymorphicComponentPropsWithRef<DataListBaseProps<MULTIPLE>, As>;

package/__inner__/types/components/List/ListContext.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
-import type { ListContextValue } from './types';
+import type { ListSizeVariant } from './entities';
+export type ListContextValue = {
+    size: ListSizeVariant;
+};
 export declare const ListContext: React.Context<ListContextValue>;
 export declare const useListContext: () => ListContextValue;

package/__inner__/types/components/List/constants.d.ts

@@ -1,6 +1,7 @@
 export declare const LIST_DEFAULT_SIZE = "m";
 export declare const LIST_DEFAULT_DISABLE_PADDING = false;
 export declare const LIST_DEFAULT_TAG = "ul";
+export declare const LIST_DEFAULT_COLOR = "main";
 export declare const LIST_ITEM_DEFAULT_TAG = "li";
 export declare const LIST_ITEM_DEFAULT_ALIGN = "center";
 export declare const LIST_ITEM_BUTTON_DEFAULT_TAG = "div";

package/__inner__/types/components/List/entities/color.d.ts

@@ -0,0 +1,2 @@
+export declare const listColorVariant: readonly ["main", "accent"];
+export type ListColorVariant = (typeof listColorVariant)[number];

package/__inner__/types/components/List/entities/index.d.ts

@@ -0,0 +1,2 @@
+export * from './color';
+export * from './size';

package/__inner__/types/components/List/entities/size.d.ts

@@ -0,0 +1,2 @@
+export declare const listSizeVariant: readonly ["2xs", "xs", "s", "m", "l"];
+export type ListSizeVariant = (typeof listSizeVariant)[number];

package/__inner__/types/components/List/index.d.ts

@@ -1,4 +1,6 @@
+export * from './entities';
 export * from './List';
 export * from './components';
 export * from './types';
 export { useListContext } from './ListContext';
+export type { ListContextValue } from './ListContext';

package/__inner__/types/components/List/types.d.ts

@@ -1,16 +1,14 @@
 import type { ElementType, ReactNode } from 'react';
-import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
 import type { LIST_DEFAULT_TAG } from './constants';
-export type ListSizeVariant = FormElementSizeVariant;
-export type ListContextValue = {
-    size: ListSizeVariant;
-};
+import type { ListColorVariant, ListSizeVariant } from './entities';
 export type ListBaseProps = {
     /** Содержимое компонента */
     children?: ReactNode;
     /** Размер компонента */
     size?: ListSizeVariant;
+    /** Цвет компонента */
+    color?: ListColorVariant;
     /** Если `true` отключает боковые отступы */
     disablePadding?: boolean;
     /** Идентификатор компонента для тестов */

package/__inner__/types/components/Menu/constants.d.ts

@@ -1 +1,2 @@
 export declare const MENU_DEFAULT_SIZE = "m";
+export declare const MENU_DEFAULT_COLOR = "main";

package/__inner__/types/components/Menu/entities/color.d.ts

@@ -0,0 +1,2 @@
+export declare const menuColorVariant: readonly ["main", "accent"];
+export type MenuColorVariant = (typeof menuColorVariant)[number];

package/__inner__/types/components/Menu/entities/index.d.ts

@@ -0,0 +1,2 @@
+export * from './color';
+export * from './size';

package/__inner__/types/components/Menu/entities/size.d.ts

@@ -0,0 +1,2 @@
+export declare const menuSizeVariant: readonly ["2xs", "xs", "s", "m", "l"];
+export type MenuSizeVariant = (typeof menuSizeVariant)[number];

package/__inner__/types/components/Menu/index.d.ts

@@ -1,4 +1,5 @@
 export { ListItemText as MenuItemText, ListItemIcon as MenuItemIcon, } from '../List';
+export * from './entities';
 export * from './Menu';
 export * from './components';
 export * from './types';

package/__inner__/types/components/Menu/types.d.ts

@@ -1,8 +1,8 @@
 import type { ComponentRef, RefObject } from 'react';
 import type { ExtendableComponentPropsWithRef } from '../../types/ExtendableComponentPropsWithRef';
-import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import type { PopoverBaseProps } from '../Popover';
 import type { MenuListProps } from './components';
+import type { MenuColorVariant, MenuSizeVariant } from './entities';
 export type MenuRef = ComponentRef<'div'>;
 export type MenuProps = ExtendableComponentPropsWithRef<{
     /** Свойства компонента MenuList */
@@ -13,5 +13,7 @@ export type MenuProps = ExtendableComponentPropsWithRef<{
      * */
     menuListRef?: RefObject<HTMLDivElement>;
     /** Размер компонента */
-    size?: FormElementSizeVariant;
+    size?: MenuSizeVariant;
+    /** Цвет компонента */
+    color?: MenuColorVariant;
 } & Omit<PopoverBaseProps, 'disableEnforceFocus'>, 'div'>;

package/__inner__/types/components/Sidebar/modules/SidebarCollapsibleItem/types.d.ts

@@ -1,18 +1,23 @@
 import type { ComponentRef, ElementType, ReactNode } from 'react';
 import type { PolymorphicComponentPropsWithRef, RenderContentType } from '../../../../utils';
 import type { StackBaseProps } from '../../../Stack';
+import type { SidebarSizeVariant } from '../../entities';
 import type { SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_TAG } from './constants';
 export type SidebarCollapsibleItemClassNames = {
     content?: string;
+    contentWrapper?: string;
     fixed?: string;
 };
 export type SidebarCollapsibleItemFixedProps = {
     collapsed: boolean;
 };
 export type SidebarCollapsibleItemFixed = RenderContentType<SidebarCollapsibleItemFixedProps>['content'];
+export type SidebarCollapsibleItemContentFullWidth = Record<SidebarSizeVariant, number>;
 export type SidebarCollapsibleItemBaseProps = {
     /** Фиксированная часть */
     fixed: SidebarCollapsibleItemFixed;
+    /** Полная ширина контента для full-варианта */
+    contentFullWidth: SidebarCollapsibleItemContentFullWidth;
     /** Кастомный класс */
     className?: string;
     /** Кастомный классы блоков */

package/__inner__/types/components/Sidebar/modules/SidebarUserMenu/types.d.ts

@@ -19,7 +19,7 @@ export type SidebarUserMenuBaseProps = {
         open: boolean;
     }) => void;
     /** Свойства компонента Menu */
-    menuProps?: Omit<MenuProps, 'anchorRef' | 'open'>;
+    menuProps?: Omit<MenuProps, 'open'>;
     /** Максимальное количество строк */
     maxLines?: number;
     /** Идентификатор компонента для тестов */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.84.1",
+  "version": "0.84.3",
   "description": "React component library",
   "files": [
     "*"
@@ -29,9 +29,9 @@
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
     "tslib": "^2.6.3",
-    "@ozen-ui/fonts": "0.84.1",
-    "@ozen-ui/logger": "0.84.1",
-    "@ozen-ui/icons": "0.84.1"
+    "@ozen-ui/logger": "0.84.3",
+    "@ozen-ui/fonts": "0.84.3",
+    "@ozen-ui/icons": "0.84.3"
   },
   "devDependencies": {
     "@types/lodash.isequal": "^4.5.0"