@itcase/ui 1.3.32 → 1.3.36

package/dist/{Button-DZ3z7f-A.js → Button-BtAUGGPc.js}

@@ -245,16 +245,16 @@ var buttonAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__a
 var buttonConfig = {
     appearance: buttonAppearance,
     setAppearance: function (appearanceConfig) {
-        buttonConfig.appearance = appearanceConfig;
+        this.appearance = appearanceConfig;
     },
 };
 var Button = React.forwardRef(function Button(props, ref) {
-    var className = props.className, appearance = props.appearance, children = props.children, label = props.label, Badge = props.Badge, dataTestId = props.dataTestId, dataTour = props.dataTour, href = props.href, _a = props.htmlType, htmlType = _a === void 0 ? 'button' : _a, icon = props.icon, iconAfter = props.iconAfter, iconAfterSrc = props.iconAfterSrc, iconBefore = props.iconBefore, iconBeforeSrc = props.iconBeforeSrc, iconSrc = props.iconSrc, link = props.link, _b = props.loadertype, loadertype = _b === void 0 ? 'simple' : _b, _c = props.loading, loading = _c === void 0 ? false : _c, rel = props.rel, target = props.target, before = props.before, after = props.after, isDisabled = props.isDisabled, isLoading = props.isLoading, onClick = props.onClick, onMouseDown = props.onMouseDown;
-    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultApperance, appearance) {
+    var className = props.className, appearance = props.appearance, children = props.children, label = props.label, Badge = props.Badge, dataTestId = props.dataTestId, dataTour = props.dataTour, href = props.href, _a = props.htmlType, htmlType = _a === void 0 ? 'button' : _a, icon = props.icon, iconAfter = props.iconAfter, iconAfterSrc = props.iconAfterSrc, iconBefore = props.iconBefore, iconBeforeSrc = props.iconBeforeSrc, iconSrc = props.iconSrc, link = props.link, _b = props.loadertype, loadertype = _b === void 0 ? 'simple' : _b, loading = props.loading, rel = props.rel, target = props.target, before = props.before, after = props.after, isDisabled = props.isDisabled, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, onClick = props.onClick, onMouseDown = props.onMouseDown;
+    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultAppearance, appearance) {
         var _a;
-        return (__assign(__assign({}, resultApperance), (_a = buttonConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
+        return (__assign(__assign({}, resultAppearance), (_a = buttonConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
     }, {});
-    if (loading) {
+    if (loading !== undefined) {
         console.warn('DEPRECATED: prop Loading is deprecated, use isLoading');
     }
     var _isLoading = isLoading !== null && isLoading !== void 0 ? isLoading : loading;

package/dist/{Button-D1m2MxZA.js → Button-HKkjJ38v.js}

@@ -247,16 +247,16 @@ var buttonAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(
 var buttonConfig = {
     appearance: buttonAppearance,
     setAppearance: function (appearanceConfig) {
-        buttonConfig.appearance = appearanceConfig;
+        this.appearance = appearanceConfig;
     },
 };
 var Button = React.forwardRef(function Button(props, ref) {
-    var className = props.className, appearance = props.appearance, children = props.children, label = props.label, Badge = props.Badge, dataTestId = props.dataTestId, dataTour = props.dataTour, href = props.href, _a = props.htmlType, htmlType = _a === void 0 ? 'button' : _a, icon = props.icon, iconAfter = props.iconAfter, iconAfterSrc = props.iconAfterSrc, iconBefore = props.iconBefore, iconBeforeSrc = props.iconBeforeSrc, iconSrc = props.iconSrc, link = props.link, _b = props.loadertype, loadertype = _b === void 0 ? 'simple' : _b, _c = props.loading, loading = _c === void 0 ? false : _c, rel = props.rel, target = props.target, before = props.before, after = props.after, isDisabled = props.isDisabled, isLoading = props.isLoading, onClick = props.onClick, onMouseDown = props.onMouseDown;
-    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultApperance, appearance) {
+    var className = props.className, appearance = props.appearance, children = props.children, label = props.label, Badge = props.Badge, dataTestId = props.dataTestId, dataTour = props.dataTour, href = props.href, _a = props.htmlType, htmlType = _a === void 0 ? 'button' : _a, icon = props.icon, iconAfter = props.iconAfter, iconAfterSrc = props.iconAfterSrc, iconBefore = props.iconBefore, iconBeforeSrc = props.iconBeforeSrc, iconSrc = props.iconSrc, link = props.link, _b = props.loadertype, loadertype = _b === void 0 ? 'simple' : _b, loading = props.loading, rel = props.rel, target = props.target, before = props.before, after = props.after, isDisabled = props.isDisabled, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, onClick = props.onClick, onMouseDown = props.onMouseDown;
+    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultAppearance, appearance) {
         var _a;
-        return (tslib_es6.__assign(tslib_es6.__assign({}, resultApperance), (_a = buttonConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
+        return (tslib_es6.__assign(tslib_es6.__assign({}, resultAppearance), (_a = buttonConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
     }, {});
-    if (loading) {
+    if (loading !== undefined) {
         console.warn('DEPRECATED: prop Loading is deprecated, use isLoading');
     }
     var _isLoading = isLoading !== null && isLoading !== void 0 ? isLoading : loading;

package/dist/Group-Chtnas-J.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
+
+var groupAppearance = {
+    dev: {
+        borderWidth: 1,
+        borderColor: 'surfaceBorderPrimary',
+        direction: 'horizontal',
+        fill: 'surfacePrimary',
+        fillHover: 'surfacePrimaryHover',
+    },
+};
+
+var groupConfig = {
+    appearance: groupAppearance,
+    setAppearance: function (newComponent) {
+        groupConfig.appearance = newComponent;
+    },
+};
+var Group = React.forwardRef(function Group(props, ref) {
+    var id = props.id, className = props.className, name = props.name, appearance = props.appearance, children = props.children, dataTestId = props.dataTestId, dataTour = props.dataTour, horizontalScroll = props.horizontalScroll, htmlFor = props.htmlFor, style = props.style, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, onClick = props.onClick;
+    // @ts-expect-error
+    var appearanceConfig = groupConfig.appearance && groupConfig.appearance[appearance];
+    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    var directionClass = propsGenerator.directionClass, flexGrowClass = propsGenerator.flexGrowClass, justifyContentClass = propsGenerator.justifyContentClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorHoverClass = propsGenerator.textColorHoverClass, columnsClass = propsGenerator.columnsClass, contentAlignClass = propsGenerator.contentAlignClass, elevationClass = propsGenerator.elevationClass, heightClass = propsGenerator.heightClass, iconFillHoverClass = propsGenerator.iconFillHoverClass, shapeClass = propsGenerator.shapeClass, stackingClass = propsGenerator.stackingClass, widthClass = propsGenerator.widthClass, wrapClass = propsGenerator.wrapClass;
+    // @ts-expect-error
+    var _b = useStyles.useStyles(props), groupStyles = _b.styles, groupWrapperStyles = _b.wrapper;
+    return (jsxRuntime.jsx(Tag, { id: id, className: clsx(className, 'group', widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), columnsClass && "group_columns_".concat(columnsClass), contentAlignClass && "group_content-align_".concat(contentAlignClass), alignDirectionClass && "align_".concat(alignDirectionClass), directionClass && "group_direction_".concat(directionClass), alignClass && "align_".concat(alignClass), textColorClass && "group_text-color_".concat(textColorClass), textColorActiveClass &&
+            "group_text-color_active_".concat(textColorActiveClass), textColorHoverClass &&
+            "group_text-color_hover_".concat(textColorHoverClass), iconFillHoverClass && "group_icon_fill_hover_".concat(iconFillHoverClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), horizontalScroll && 'group_type_horizontal_scroll', stackingClass && "group_stacking_".concat(stackingClass), wrapClass && "group_wrap_".concat(wrapClass), flexGrowClass && "flex-grow_".concat(flexGrowClass), shapeClass && "group_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), elevationClass && "elevation_".concat(elevationClass), justifyContentClass && "justify-content_".concat(justifyContentClass), onClick && 'cursor_type_pointer'), name: name, "data-testid": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, ref: ref, style: Object.assign({}, groupStyles, style), onClick: onClick, children: horizontalScroll ? (jsxRuntime.jsx("div", { className: "group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
+});
+
+exports.Group = Group;
+exports.groupAppearance = groupAppearance;
+exports.groupConfig = groupConfig;

package/dist/Group-DiMnEfge.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import clsx from 'clsx';
+import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { useStyles } from './hooks/useStyles/useStyles.js';
+
+var groupAppearance = {
+    dev: {
+        borderWidth: 1,
+        borderColor: 'surfaceBorderPrimary',
+        direction: 'horizontal',
+        fill: 'surfacePrimary',
+        fillHover: 'surfacePrimaryHover',
+    },
+};
+
+var groupConfig = {
+    appearance: groupAppearance,
+    setAppearance: function (newComponent) {
+        groupConfig.appearance = newComponent;
+    },
+};
+var Group = React.forwardRef(function Group(props, ref) {
+    var id = props.id, className = props.className, name = props.name, appearance = props.appearance, children = props.children, dataTestId = props.dataTestId, dataTour = props.dataTour, horizontalScroll = props.horizontalScroll, htmlFor = props.htmlFor, style = props.style, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, onClick = props.onClick;
+    // @ts-expect-error
+    var appearanceConfig = groupConfig.appearance && groupConfig.appearance[appearance];
+    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    var directionClass = propsGenerator.directionClass, flexGrowClass = propsGenerator.flexGrowClass, justifyContentClass = propsGenerator.justifyContentClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorHoverClass = propsGenerator.textColorHoverClass, columnsClass = propsGenerator.columnsClass, contentAlignClass = propsGenerator.contentAlignClass, elevationClass = propsGenerator.elevationClass, heightClass = propsGenerator.heightClass, iconFillHoverClass = propsGenerator.iconFillHoverClass, shapeClass = propsGenerator.shapeClass, stackingClass = propsGenerator.stackingClass, widthClass = propsGenerator.widthClass, wrapClass = propsGenerator.wrapClass;
+    // @ts-expect-error
+    var _b = useStyles(props), groupStyles = _b.styles, groupWrapperStyles = _b.wrapper;
+    return (jsx(Tag, { id: id, className: clsx(className, 'group', widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), columnsClass && "group_columns_".concat(columnsClass), contentAlignClass && "group_content-align_".concat(contentAlignClass), alignDirectionClass && "align_".concat(alignDirectionClass), directionClass && "group_direction_".concat(directionClass), alignClass && "align_".concat(alignClass), textColorClass && "group_text-color_".concat(textColorClass), textColorActiveClass &&
+            "group_text-color_active_".concat(textColorActiveClass), textColorHoverClass &&
+            "group_text-color_hover_".concat(textColorHoverClass), iconFillHoverClass && "group_icon_fill_hover_".concat(iconFillHoverClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), horizontalScroll && 'group_type_horizontal_scroll', stackingClass && "group_stacking_".concat(stackingClass), wrapClass && "group_wrap_".concat(wrapClass), flexGrowClass && "flex-grow_".concat(flexGrowClass), shapeClass && "group_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), elevationClass && "elevation_".concat(elevationClass), justifyContentClass && "justify-content_".concat(justifyContentClass), onClick && 'cursor_type_pointer'), name: name, "data-testid": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, ref: ref, style: Object.assign({}, groupStyles, style), onClick: onClick, children: horizontalScroll ? (jsx("div", { className: "group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
+});
+
+export { Group as G, groupAppearance as a, groupConfig as g };

package/dist/cjs/components/Accordion.js

@@ -38,25 +38,27 @@ var accordionItemConfig = {
     },
 };
 function AccordionItem(props) {
-    var id = props.id, children = props.children, isExpanded = props.isExpanded, afterContent = props.afterContent, appearance = props.appearance, beforeContent = props.beforeContent, className = props.className, content = props.content, contentTextColor = props.contentTextColor, contentTextSize = props.contentTextSize, contentTextWeight = props.contentTextWeight, dividerDirection = props.dividerDirection, dividerFill = props.dividerFill, dividerSize = props.dividerSize, icon = props.icon, _a = props.iconFill, iconFill = _a === void 0 ? 'surfaceItemAccent' : _a, showDivider = props.showDivider, size = props.size, title = props.title, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, onClick = props.onClick;
+    var id = props.id, className = props.className, appearance = props.appearance, children = props.children, title = props.title, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, afterContent = props.afterContent, beforeContent = props.beforeContent, content = props.content, contentTextColor = props.contentTextColor, contentTextSize = props.contentTextSize, contentTextWeight = props.contentTextWeight, dividerDirection = props.dividerDirection, dividerFill = props.dividerFill, dividerSize = props.dividerSize, icon = props.icon, _a = props.iconFill, iconFill = _a === void 0 ? 'surfaceItemAccent' : _a, showDivider = props.showDivider, size = props.size, isExpanded = props.isExpanded, onClick = props.onClick;
     var onClickTitle = React.useCallback(function () {
         // "!isExpanded" - is next state of expanded
         var thisItemData = {
             id: id,
-            isExpanded: !isExpanded,
-            content: content,
             title: title,
+            content: content,
+            isExpanded: !isExpanded,
         };
         onClick && onClick(thisItemData);
     }, [id, title, content, isExpanded, onClick]);
     // @ts-expect-error
-    var appearanceConfig = accordionItemConfig.appearance && accordionItemConfig.appearance[appearance];
+    var appearanceConfig = accordionItemConfig.appearance &&
+        accordionItemConfig.appearance[appearance];
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var borderColorClass = propsGenerator.borderColorClass, contentBorderColorClass = propsGenerator.contentBorderColorClass, contentFillClass = propsGenerator.contentFillClass, contentFillHoverClass = propsGenerator.contentFillHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, shapeClass = propsGenerator.shapeClass, titleBorderColorClass = propsGenerator.titleBorderColorClass, titleFillClass = propsGenerator.titleFillClass, titleFillHoverClass = propsGenerator.titleFillHoverClass;
+    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, titleBorderColorClass = propsGenerator.titleBorderColorClass, titleFillClass = propsGenerator.titleFillClass, titleFillHoverClass = propsGenerator.titleFillHoverClass, contentBorderColorClass = propsGenerator.contentBorderColorClass, contentFillClass = propsGenerator.contentFillClass, contentFillHoverClass = propsGenerator.contentFillHoverClass, shapeClass = propsGenerator.shapeClass;
     // @ts-expect-error
     var styles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsxs("div", { className: clsx('accordion-item', className, borderColorClass && "border-color_".concat(borderColorClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), shapeClass && "accordion-item_shape_".concat(shapeClass), size && "accordion-item_size_".concat(size), isExpanded && 'accordion-item_state_open'), style: styles, children: [jsxRuntime.jsx(Text.Text, { className: clsx('accordion-item__title', titleBorderColorClass && "border-color_".concat(titleBorderColorClass), titleFillClass && "fill_".concat(titleFillClass), titleFillHoverClass && "fill_hover_".concat(titleFillHoverClass), 'cursor_type_pointer'), size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, onClick: onClickTitle, children: title }), jsxRuntime.jsx("div", { className: clsx('accordion-item__icon', 'cursor_type_pointer'), onClick: onClickTitle, children: icon || jsxRuntime.jsx(Icon.Icon, { iconFill: iconFill, size: "16", SvgImage: _default.icon16.ChevronDown }) }), beforeContent && beforeContent, showDivider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", fill: dividerFill || 'surfaceTertiary', direction: dividerDirection, size: dividerSize })), isExpanded && (jsxRuntime.jsx("div", { className: clsx('accordion-item__content', contentBorderColorClass && "border-color_".concat(contentBorderColorClass), contentFillClass && "fill_".concat(contentFillClass), contentFillHoverClass && "fill_hover_".concat(contentFillHoverClass)), children: children ||
-                    (content && (jsxRuntime.jsx(Text.Text, { size: contentTextSize, textColor: contentTextColor, textWeight: contentTextWeight, children: content }))) })), afterContent && afterContent] }));
+    return (jsxRuntime.jsxs("div", { className: clsx('accordion-item', className, borderColorClass && "border-color_".concat(borderColorClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), shapeClass && "accordion-item_shape_".concat(shapeClass), size && "accordion-item_size_".concat(size), isExpanded && 'accordion-item_state_open'), style: styles, children: [jsxRuntime.jsx(Text.Text, { className: clsx('accordion-item__title', titleBorderColorClass && "border-color_".concat(titleBorderColorClass), titleFillClass && "fill_".concat(titleFillClass), titleFillHoverClass && "fill_hover_".concat(titleFillHoverClass), 'cursor_type_pointer'), textColor: titleTextColor, textWeight: titleTextWeight, size: titleTextSize, onClick: onClickTitle, children: title }), jsxRuntime.jsx("div", { className: clsx('accordion-item__icon', 'cursor_type_pointer'), onClick: onClickTitle, children: icon || (jsxRuntime.jsx(Icon.Icon, { iconFill: iconFill, size: "16", SvgImage: _default.icon16.ChevronDown })) }), beforeContent && beforeContent, showDivider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", direction: dividerDirection, fill: dividerFill || 'surfaceTertiary', size: dividerSize })), isExpanded && (jsxRuntime.jsx("div", { className: clsx('accordion-item__content', contentBorderColorClass &&
+                    "border-color_".concat(contentBorderColorClass), contentFillClass && "fill_".concat(contentFillClass), contentFillHoverClass && "fill_hover_".concat(contentFillHoverClass)), children: children ||
+                    (content && (jsxRuntime.jsx(Text.Text, { textColor: contentTextColor, textWeight: contentTextWeight, size: contentTextSize, children: content }))) })), afterContent && afterContent] }));
 }
 
 var accordionConfig = {
@@ -66,7 +68,7 @@ var accordionConfig = {
     },
 };
 function Accordion(props) {
-    var children = props.children, isMultiple = props.isMultiple, appearance = props.appearance, className = props.className, _a = props.initial, initial = _a === void 0 ? [] : _a, items = props.items, onClickItem = props.onClickItem;
+    var className = props.className, appearance = props.appearance, _a = props.initial, initial = _a === void 0 ? [] : _a, children = props.children, items = props.items, isMultiple = props.isMultiple, onClickItem = props.onClickItem;
     var _b = React.useState(function () { return castArray(initial); }), expandedItems = _b[0], setExpandedItems = _b[1];
     var onClickAccordionItem = React.useCallback(function (targetItem) {
         setExpandedItems(function (prevState) {
@@ -94,7 +96,7 @@ function Accordion(props) {
     }, [isMultiple, onClickItem]);
     var accordionItemsList = React.useMemo(function () {
         if (items) {
-            return items.map(function (item, i) { return (jsxRuntime.jsx(AccordionItem, { content: item.content, id: item.id, title: item.title, isExpanded: expandedItems.includes(item.id), onClick: onClickAccordionItem }, "accordionItem_".concat(item.id || i + 1))); });
+            return items.map(function (item, i) { return (jsxRuntime.jsx(AccordionItem, { id: item.id, title: item.title, content: item.content, isExpanded: expandedItems.includes(item.id), onClick: onClickAccordionItem }, "accordionItem_".concat(item.id || i + 1))); });
         }
         if (children) {
             // @ts-ignore
@@ -112,15 +114,9 @@ function Accordion(props) {
         }
         return [];
     }, [children, items, expandedItems, onClickAccordionItem]);
-    // @ts-expect-error
     var appearanceConfig = accordionConfig.appearance && accordionConfig.appearance[appearance];
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var borderColorClass = propsGenerator.borderColorClass, directionClass = propsGenerator.directionClass, fillClass = propsGenerator.fillClass, shapeClass = propsGenerator.shapeClass, widthClass = propsGenerator.widthClass;
-    /*
-     * paddingHorizontalWrapper="16px"
-     * paddingHorizontal - styles  (horizontal will be parsed to left/right)
-     * wrapper - target
-     */
+    var directionClass = propsGenerator.directionClass, fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, shapeClass = propsGenerator.shapeClass, widthClass = propsGenerator.widthClass;
     // @ts-expect-error
     var _c = useStyles.useStyles(props), accordionStyles = _c.styles, accordionWrapperStyles = _c.wrapper;
     return (jsxRuntime.jsx("div", { className: clsx(className, 'accordion', borderColorClass && "border-color_".concat(borderColorClass), directionClass && "accordion_direction_".concat(directionClass), fillClass && "fill_".concat(fillClass), shapeClass && "accordion_shape_".concat(shapeClass), widthClass && "width_".concat(widthClass)), style: accordionStyles, children: jsxRuntime.jsx("div", { className: "accordion__wrapper", style: accordionWrapperStyles, children: accordionItemsList }) }));

package/dist/cjs/components/Button.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Button = require('../../Button-D1m2MxZA.js');
+var Button = require('../../Button-HKkjJ38v.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('react/jsx-runtime');
 require('react');

package/dist/cjs/components/Cell.js

@@ -34,15 +34,15 @@ var cellConfig = {
     },
 };
 function Cell(props) {
-    var isActive = props.isActive, _a = props.isDisabled, isDisabled = _a === void 0 ? false : _a, isEqual = props.isEqual, after = props.after, appearance = props.appearance, before = props.before, className = props.className, mode = props.mode, reverse = props.reverse, set = props.set, showTitleLabel = props.showTitleLabel, showValueLabel = props.showValueLabel, size = props.size, title = props.title, titleIcon = props.titleIcon, titleIconFill = props.titleIconFill, titleIconFillHover = props.titleIconFillHover, titleIconFillSize = props.titleIconFillSize, titleIconItemFill = props.titleIconItemFill, titleIconShape = props.titleIconShape, titleIconSrc = props.titleIconSrc, titleLabel = props.titleLabel, titleLabelAppearance = props.titleLabelAppearance, titleLabelShape = props.titleLabelShape, titleLabelSize = props.titleLabelSize, 
+    var className = props.className, appearance = props.appearance, title = props.title, titleIcon = props.titleIcon, titleIconFill = props.titleIconFill, titleIconFillHover = props.titleIconFillHover, titleIconFillSize = props.titleIconFillSize, titleIconItemFill = props.titleIconItemFill, titleIconShape = props.titleIconShape, titleIconSrc = props.titleIconSrc, titleLabel = props.titleLabel, titleLabelAppearance = props.titleLabelAppearance, titleLabelShape = props.titleLabelShape, titleLabelSize = props.titleLabelSize, 
     // titleLabelTextSize,
     titleTag = props.titleTag, titleTextColor = props.titleTextColor, 
     // titleTextSize,
-    titleTextTruncate = props.titleTextTruncate, titleTextWeight = props.titleTextWeight, titleTextWrap = props.titleTextWrap, value = props.value, valueIcon = props.valueIcon, valueIconFill = props.valueIconFill, valueIconFillHover = props.valueIconFillHover, valueIconFillSize = props.valueIconFillSize, valueIconItemFill = props.valueIconItemFill, valueIconShape = props.valueIconShape, valueIconSrc = props.valueIconSrc, valueLabel = props.valueLabel, valueLabelAppearance = props.valueLabelAppearance, valueLabelShape = props.valueLabelShape, valueLabelSize = props.valueLabelSize, 
+    titleTextTruncate = props.titleTextTruncate, titleTextWeight = props.titleTextWeight, titleTextWrap = props.titleTextWrap, mode = props.mode, reverse = props.reverse, showTitleLabel = props.showTitleLabel, showValueLabel = props.showValueLabel, size = props.size, value = props.value, valueIcon = props.valueIcon, valueIconFill = props.valueIconFill, valueIconFillHover = props.valueIconFillHover, valueIconFillSize = props.valueIconFillSize, valueIconItemFill = props.valueIconItemFill, valueIconShape = props.valueIconShape, valueIconSrc = props.valueIconSrc, valueLabel = props.valueLabel, valueLabelAppearance = props.valueLabelAppearance, valueLabelShape = props.valueLabelShape, valueLabelSize = props.valueLabelSize, 
     // valueLabelTextSize,
     valueTag = props.valueTag, valueTextAlign = props.valueTextAlign, valueTextColor = props.valueTextColor, 
     // valueTextSize,
-    valueTextTruncate = props.valueTextTruncate, valueTextWeight = props.valueTextWeight, valueTextWrap = props.valueTextWrap, zeroGap = props.zeroGap, zeroPadding = props.zeroPadding, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
+    valueTextTruncate = props.valueTextTruncate, valueTextWeight = props.valueTextWeight, valueTextWrap = props.valueTextWrap, zeroGap = props.zeroGap, zeroPadding = props.zeroPadding, before = props.before, after = props.after, isActive = props.isActive, _a = props.isDisabled, isDisabled = _a === void 0 ? false : _a, isEqual = props.isEqual, set = props.set, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
     // @ts-expect-error
     var appearanceConfig = cellConfig.appearance && cellConfig.appearance[appearance];
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
@@ -56,7 +56,11 @@ function Cell(props) {
     /* eslint-enable perfectionist/sort-objects */
     // @ts-expect-error
     var _b = useStyles.useStyles(props), dataStyles = _b.data, cellStyles = _b.styles;
-    return (jsxRuntime.jsxs("div", { className: clsx(className, 'cell', mode && "cell_mode_".concat(mode), size && "cell_size_".concat(size), set && "cell_set_".concat(set), bgFillClass && "fill_".concat(bgFillClass), bgFillHoverClass && "fill_hover_".concat(bgFillHoverClass), isActive && bgFillActiveClass && "fill_active_".concat(bgFillActiveClass), isDisabled && bgFillDisabledClass && "fill_disabled_".concat(bgFillDisabledClass), bgShapeClass && "cell_shape_".concat(bgShapeClass), widthClass && !cellStyles.width && "width_".concat(widthClass), zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap', reverse && 'cell_reverse'), style: cellStyles, onClick: onClick, onMouseEnter: onMouseEnter, children: [before && jsxRuntime.jsx("div", { className: "cell__before", children: before }), jsxRuntime.jsxs("div", { className: clsx('cell__wrapper', directionClass && "cell__wrapper_direction_".concat(directionClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), isActive && fillActiveClass && "fill_active_".concat(fillActiveClass), isDisabled && fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), shapeClass && "cell__wrapper_shape_".concat(shapeClass), isEqual && 'cell__wrapper-equal'), children: [title && (jsxRuntime.jsxs("div", { className: "cell__data", style: dataStyles, children: [jsxRuntime.jsx(Text.Text, { className: "cell__title", size: titleTextSize, tag: titleTag, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title }), (titleIcon || titleIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), showTitleLabel && (jsxRuntime.jsx(Label.Label, { labelTextSize: titleLabelTextSize, appearance: titleLabelAppearance, label: titleLabel, shape: titleLabelShape, size: titleLabelSize }))] })), value && (jsxRuntime.jsxs("div", { className: "cell__data", style: dataStyles, children: [jsxRuntime.jsx(Text.Text, { className: "cell__value", size: valueTextSize, tag: valueTag, textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, children: value }), (valueIcon || valueIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), showValueLabel && (jsxRuntime.jsx(Label.Label, { labelTextSize: valueLabelTextSize, appearance: valueLabelAppearance, label: valueLabel, shape: valueLabelShape, size: valueLabelSize }))] }))] }), after && jsxRuntime.jsx("div", { className: "cell__after", children: after })] }));
+    return (jsxRuntime.jsxs("div", { className: clsx(className, 'cell', mode && "cell_mode_".concat(mode), size && "cell_size_".concat(size), set && "cell_set_".concat(set), bgFillClass && "fill_".concat(bgFillClass), bgFillHoverClass && "fill_hover_".concat(bgFillHoverClass), isActive && bgFillActiveClass && "fill_active_".concat(bgFillActiveClass), isDisabled &&
+            bgFillDisabledClass &&
+            "fill_disabled_".concat(bgFillDisabledClass), bgShapeClass && "cell_shape_".concat(bgShapeClass), widthClass && !(cellStyles === null || cellStyles === void 0 ? void 0 : cellStyles.width) && "width_".concat(widthClass), zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap', reverse && 'cell_reverse'), style: cellStyles, onClick: onClick, onMouseEnter: onMouseEnter, children: [before && jsxRuntime.jsx("div", { className: "cell__before", children: before }), jsxRuntime.jsxs("div", { className: clsx('cell__wrapper', directionClass && "cell__wrapper_direction_".concat(directionClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), isActive && fillActiveClass && "fill_active_".concat(fillActiveClass), isDisabled &&
+                    fillDisabledClass &&
+                    "fill_disabled_".concat(fillDisabledClass), shapeClass && "cell__wrapper_shape_".concat(shapeClass), isEqual && 'cell__wrapper-equal'), children: [title && (jsxRuntime.jsxs("div", { className: "cell__data", style: dataStyles, children: [jsxRuntime.jsx(Text.Text, { className: "cell__title", textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, size: titleTextSize, tag: titleTag, children: title }), (titleIcon || titleIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), showTitleLabel && (jsxRuntime.jsx(Label.Label, { appearance: titleLabelAppearance, label: titleLabel, labelTextSize: titleLabelTextSize, shape: titleLabelShape, size: titleLabelSize }))] })), value && (jsxRuntime.jsxs("div", { className: "cell__data", style: dataStyles, children: [jsxRuntime.jsx(Text.Text, { className: "cell__value", textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, size: valueTextSize, tag: valueTag, children: value }), (valueIcon || valueIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), showValueLabel && (jsxRuntime.jsx(Label.Label, { appearance: valueLabelAppearance, label: valueLabel, labelTextSize: valueLabelTextSize, shape: valueLabelShape, size: valueLabelSize }))] }))] }), after && jsxRuntime.jsx("div", { className: "cell__after", children: after })] }));
 }
 
 exports.Cell = Cell;

package/dist/cjs/components/CookiesWarning.js

@@ -5,8 +5,8 @@ var React = require('react');
 var clsx = require('clsx');
 var Cookies = require('js-cookie');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var Button = require('../../Button-D1m2MxZA.js');
-var Group = require('../../Group-Bkz3RO18.js');
+var Button = require('../../Button-HKkjJ38v.js');
+var Group = require('../../Group-Chtnas-J.js');
 var Text = require('../../Text-C49zj3jO.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('lodash/camelCase');

package/dist/cjs/components/DatePicker.js

@@ -8,7 +8,7 @@ var locale = require('date-fns/locale');
 var DatePicker = require('react-datepicker');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Button = require('../../Button-D1m2MxZA.js');
+var Button = require('../../Button-HKkjJ38v.js');
 var Icon = require('../../Icon-GVGrUu_Z.js');
 var Input = require('../../Input-Dwvk-poq.js');
 var Label = require('../../Label-XTFwl1aq.js');

package/dist/cjs/components/Group.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Group = require('../../Group-Bkz3RO18.js');
+var Group = require('../../Group-Chtnas-J.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');

package/dist/cjs/components/Panel.js

@@ -5,7 +5,7 @@ var React = require('react');
 var clsx = require('clsx');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Group = require('../../Group-Bkz3RO18.js');
+var Group = require('../../Group-Chtnas-J.js');
 var Text = require('../../Text-C49zj3jO.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('lodash/camelCase');

package/dist/cjs/components/Response.js

@@ -7,8 +7,8 @@ var clsx = require('clsx');
 var SVG = require('react-inlinesvg');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Button = require('../../Button-D1m2MxZA.js');
-var Group = require('../../Group-Bkz3RO18.js');
+var Button = require('../../Button-HKkjJ38v.js');
+var Group = require('../../Group-Chtnas-J.js');
 var Text = require('../../Text-C49zj3jO.js');
 require('lodash/camelCase');
 require('lodash/castArray');

package/dist/cjs/components/Select.js

@@ -10,7 +10,7 @@ var CreatableSelect = require('react-select/creatable');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var Text = require('../../Text-C49zj3jO.js');
 var Badge = require('../../Badge-BX4N91_C.js');
-var Group = require('../../Group-Bkz3RO18.js');
+var Group = require('../../Group-Chtnas-J.js');
 var Divider = require('../../Divider-ImOOytuN.js');
 require('react-inlinesvg');
 require('../hooks/useStyles/useStyles.js');

package/dist/cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js

@@ -113,6 +113,7 @@ function useDevicePropsGenerator(componentProps, appearanceConfig) {
             },
         };
         return new Proxy(propsGenerator, generatorProxyHandler);
+        // TODO: componentProps(react) and appearanceConfig(not memoized) is always new. maybe better check Object.values?
     }, [componentProps, appearanceConfig, deviceCurrentMainType]);
     return devicePropsGenerator;
 }

package/dist/components/Accordion.js

@@ -36,25 +36,27 @@ var accordionItemConfig = {
     },
 };
 function AccordionItem(props) {
-    var id = props.id, children = props.children, isExpanded = props.isExpanded, afterContent = props.afterContent, appearance = props.appearance, beforeContent = props.beforeContent, className = props.className, content = props.content, contentTextColor = props.contentTextColor, contentTextSize = props.contentTextSize, contentTextWeight = props.contentTextWeight, dividerDirection = props.dividerDirection, dividerFill = props.dividerFill, dividerSize = props.dividerSize, icon = props.icon, _a = props.iconFill, iconFill = _a === void 0 ? 'surfaceItemAccent' : _a, showDivider = props.showDivider, size = props.size, title = props.title, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, onClick = props.onClick;
+    var id = props.id, className = props.className, appearance = props.appearance, children = props.children, title = props.title, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, afterContent = props.afterContent, beforeContent = props.beforeContent, content = props.content, contentTextColor = props.contentTextColor, contentTextSize = props.contentTextSize, contentTextWeight = props.contentTextWeight, dividerDirection = props.dividerDirection, dividerFill = props.dividerFill, dividerSize = props.dividerSize, icon = props.icon, _a = props.iconFill, iconFill = _a === void 0 ? 'surfaceItemAccent' : _a, showDivider = props.showDivider, size = props.size, isExpanded = props.isExpanded, onClick = props.onClick;
     var onClickTitle = useCallback(function () {
         // "!isExpanded" - is next state of expanded
         var thisItemData = {
             id: id,
-            isExpanded: !isExpanded,
-            content: content,
             title: title,
+            content: content,
+            isExpanded: !isExpanded,
         };
         onClick && onClick(thisItemData);
     }, [id, title, content, isExpanded, onClick]);
     // @ts-expect-error
-    var appearanceConfig = accordionItemConfig.appearance && accordionItemConfig.appearance[appearance];
+    var appearanceConfig = accordionItemConfig.appearance &&
+        accordionItemConfig.appearance[appearance];
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var borderColorClass = propsGenerator.borderColorClass, contentBorderColorClass = propsGenerator.contentBorderColorClass, contentFillClass = propsGenerator.contentFillClass, contentFillHoverClass = propsGenerator.contentFillHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, shapeClass = propsGenerator.shapeClass, titleBorderColorClass = propsGenerator.titleBorderColorClass, titleFillClass = propsGenerator.titleFillClass, titleFillHoverClass = propsGenerator.titleFillHoverClass;
+    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, titleBorderColorClass = propsGenerator.titleBorderColorClass, titleFillClass = propsGenerator.titleFillClass, titleFillHoverClass = propsGenerator.titleFillHoverClass, contentBorderColorClass = propsGenerator.contentBorderColorClass, contentFillClass = propsGenerator.contentFillClass, contentFillHoverClass = propsGenerator.contentFillHoverClass, shapeClass = propsGenerator.shapeClass;
     // @ts-expect-error
     var styles = useStyles(props).styles;
-    return (jsxs("div", { className: clsx('accordion-item', className, borderColorClass && "border-color_".concat(borderColorClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), shapeClass && "accordion-item_shape_".concat(shapeClass), size && "accordion-item_size_".concat(size), isExpanded && 'accordion-item_state_open'), style: styles, children: [jsx(Text, { className: clsx('accordion-item__title', titleBorderColorClass && "border-color_".concat(titleBorderColorClass), titleFillClass && "fill_".concat(titleFillClass), titleFillHoverClass && "fill_hover_".concat(titleFillHoverClass), 'cursor_type_pointer'), size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, onClick: onClickTitle, children: title }), jsx("div", { className: clsx('accordion-item__icon', 'cursor_type_pointer'), onClick: onClickTitle, children: icon || jsx(Icon, { iconFill: iconFill, size: "16", SvgImage: icon16.ChevronDown }) }), beforeContent && beforeContent, showDivider && (jsx(Divider, { width: "fill", fill: dividerFill || 'surfaceTertiary', direction: dividerDirection, size: dividerSize })), isExpanded && (jsx("div", { className: clsx('accordion-item__content', contentBorderColorClass && "border-color_".concat(contentBorderColorClass), contentFillClass && "fill_".concat(contentFillClass), contentFillHoverClass && "fill_hover_".concat(contentFillHoverClass)), children: children ||
-                    (content && (jsx(Text, { size: contentTextSize, textColor: contentTextColor, textWeight: contentTextWeight, children: content }))) })), afterContent && afterContent] }));
+    return (jsxs("div", { className: clsx('accordion-item', className, borderColorClass && "border-color_".concat(borderColorClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), shapeClass && "accordion-item_shape_".concat(shapeClass), size && "accordion-item_size_".concat(size), isExpanded && 'accordion-item_state_open'), style: styles, children: [jsx(Text, { className: clsx('accordion-item__title', titleBorderColorClass && "border-color_".concat(titleBorderColorClass), titleFillClass && "fill_".concat(titleFillClass), titleFillHoverClass && "fill_hover_".concat(titleFillHoverClass), 'cursor_type_pointer'), textColor: titleTextColor, textWeight: titleTextWeight, size: titleTextSize, onClick: onClickTitle, children: title }), jsx("div", { className: clsx('accordion-item__icon', 'cursor_type_pointer'), onClick: onClickTitle, children: icon || (jsx(Icon, { iconFill: iconFill, size: "16", SvgImage: icon16.ChevronDown })) }), beforeContent && beforeContent, showDivider && (jsx(Divider, { width: "fill", direction: dividerDirection, fill: dividerFill || 'surfaceTertiary', size: dividerSize })), isExpanded && (jsx("div", { className: clsx('accordion-item__content', contentBorderColorClass &&
+                    "border-color_".concat(contentBorderColorClass), contentFillClass && "fill_".concat(contentFillClass), contentFillHoverClass && "fill_hover_".concat(contentFillHoverClass)), children: children ||
+                    (content && (jsx(Text, { textColor: contentTextColor, textWeight: contentTextWeight, size: contentTextSize, children: content }))) })), afterContent && afterContent] }));
 }
 
 var accordionConfig = {
@@ -64,7 +66,7 @@ var accordionConfig = {
     },
 };
 function Accordion(props) {
-    var children = props.children, isMultiple = props.isMultiple, appearance = props.appearance, className = props.className, _a = props.initial, initial = _a === void 0 ? [] : _a, items = props.items, onClickItem = props.onClickItem;
+    var className = props.className, appearance = props.appearance, _a = props.initial, initial = _a === void 0 ? [] : _a, children = props.children, items = props.items, isMultiple = props.isMultiple, onClickItem = props.onClickItem;
     var _b = useState(function () { return castArray(initial); }), expandedItems = _b[0], setExpandedItems = _b[1];
     var onClickAccordionItem = useCallback(function (targetItem) {
         setExpandedItems(function (prevState) {
@@ -92,7 +94,7 @@ function Accordion(props) {
     }, [isMultiple, onClickItem]);
     var accordionItemsList = useMemo(function () {
         if (items) {
-            return items.map(function (item, i) { return (jsx(AccordionItem, { content: item.content, id: item.id, title: item.title, isExpanded: expandedItems.includes(item.id), onClick: onClickAccordionItem }, "accordionItem_".concat(item.id || i + 1))); });
+            return items.map(function (item, i) { return (jsx(AccordionItem, { id: item.id, title: item.title, content: item.content, isExpanded: expandedItems.includes(item.id), onClick: onClickAccordionItem }, "accordionItem_".concat(item.id || i + 1))); });
         }
         if (children) {
             // @ts-ignore
@@ -110,15 +112,9 @@ function Accordion(props) {
         }
         return [];
     }, [children, items, expandedItems, onClickAccordionItem]);
-    // @ts-expect-error
     var appearanceConfig = accordionConfig.appearance && accordionConfig.appearance[appearance];
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var borderColorClass = propsGenerator.borderColorClass, directionClass = propsGenerator.directionClass, fillClass = propsGenerator.fillClass, shapeClass = propsGenerator.shapeClass, widthClass = propsGenerator.widthClass;
-    /*
-     * paddingHorizontalWrapper="16px"
-     * paddingHorizontal - styles  (horizontal will be parsed to left/right)
-     * wrapper - target
-     */
+    var directionClass = propsGenerator.directionClass, fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, shapeClass = propsGenerator.shapeClass, widthClass = propsGenerator.widthClass;
     // @ts-expect-error
     var _c = useStyles(props), accordionStyles = _c.styles, accordionWrapperStyles = _c.wrapper;
     return (jsx("div", { className: clsx(className, 'accordion', borderColorClass && "border-color_".concat(borderColorClass), directionClass && "accordion_direction_".concat(directionClass), fillClass && "fill_".concat(fillClass), shapeClass && "accordion_shape_".concat(shapeClass), widthClass && "width_".concat(widthClass)), style: accordionStyles, children: jsx("div", { className: "accordion__wrapper", style: accordionWrapperStyles, children: accordionItemsList }) }));

package/dist/components/Button.js

@@ -1,4 +1,4 @@
-export { B as Button, a as buttonAppearance, b as buttonConfig } from '../Button-DZ3z7f-A.js';
+export { B as Button, a as buttonAppearance, b as buttonConfig } from '../Button-BtAUGGPc.js';
 import '../tslib.es6-5FtW-kfi.js';
 import 'react/jsx-runtime';
 import 'react';

package/dist/components/Cell.js

@@ -32,15 +32,15 @@ var cellConfig = {
     },
 };
 function Cell(props) {
-    var isActive = props.isActive, _a = props.isDisabled, isDisabled = _a === void 0 ? false : _a, isEqual = props.isEqual, after = props.after, appearance = props.appearance, before = props.before, className = props.className, mode = props.mode, reverse = props.reverse, set = props.set, showTitleLabel = props.showTitleLabel, showValueLabel = props.showValueLabel, size = props.size, title = props.title, titleIcon = props.titleIcon, titleIconFill = props.titleIconFill, titleIconFillHover = props.titleIconFillHover, titleIconFillSize = props.titleIconFillSize, titleIconItemFill = props.titleIconItemFill, titleIconShape = props.titleIconShape, titleIconSrc = props.titleIconSrc, titleLabel = props.titleLabel, titleLabelAppearance = props.titleLabelAppearance, titleLabelShape = props.titleLabelShape, titleLabelSize = props.titleLabelSize, 
+    var className = props.className, appearance = props.appearance, title = props.title, titleIcon = props.titleIcon, titleIconFill = props.titleIconFill, titleIconFillHover = props.titleIconFillHover, titleIconFillSize = props.titleIconFillSize, titleIconItemFill = props.titleIconItemFill, titleIconShape = props.titleIconShape, titleIconSrc = props.titleIconSrc, titleLabel = props.titleLabel, titleLabelAppearance = props.titleLabelAppearance, titleLabelShape = props.titleLabelShape, titleLabelSize = props.titleLabelSize, 
     // titleLabelTextSize,
     titleTag = props.titleTag, titleTextColor = props.titleTextColor, 
     // titleTextSize,
-    titleTextTruncate = props.titleTextTruncate, titleTextWeight = props.titleTextWeight, titleTextWrap = props.titleTextWrap, value = props.value, valueIcon = props.valueIcon, valueIconFill = props.valueIconFill, valueIconFillHover = props.valueIconFillHover, valueIconFillSize = props.valueIconFillSize, valueIconItemFill = props.valueIconItemFill, valueIconShape = props.valueIconShape, valueIconSrc = props.valueIconSrc, valueLabel = props.valueLabel, valueLabelAppearance = props.valueLabelAppearance, valueLabelShape = props.valueLabelShape, valueLabelSize = props.valueLabelSize, 
+    titleTextTruncate = props.titleTextTruncate, titleTextWeight = props.titleTextWeight, titleTextWrap = props.titleTextWrap, mode = props.mode, reverse = props.reverse, showTitleLabel = props.showTitleLabel, showValueLabel = props.showValueLabel, size = props.size, value = props.value, valueIcon = props.valueIcon, valueIconFill = props.valueIconFill, valueIconFillHover = props.valueIconFillHover, valueIconFillSize = props.valueIconFillSize, valueIconItemFill = props.valueIconItemFill, valueIconShape = props.valueIconShape, valueIconSrc = props.valueIconSrc, valueLabel = props.valueLabel, valueLabelAppearance = props.valueLabelAppearance, valueLabelShape = props.valueLabelShape, valueLabelSize = props.valueLabelSize, 
     // valueLabelTextSize,
     valueTag = props.valueTag, valueTextAlign = props.valueTextAlign, valueTextColor = props.valueTextColor, 
     // valueTextSize,
-    valueTextTruncate = props.valueTextTruncate, valueTextWeight = props.valueTextWeight, valueTextWrap = props.valueTextWrap, zeroGap = props.zeroGap, zeroPadding = props.zeroPadding, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
+    valueTextTruncate = props.valueTextTruncate, valueTextWeight = props.valueTextWeight, valueTextWrap = props.valueTextWrap, zeroGap = props.zeroGap, zeroPadding = props.zeroPadding, before = props.before, after = props.after, isActive = props.isActive, _a = props.isDisabled, isDisabled = _a === void 0 ? false : _a, isEqual = props.isEqual, set = props.set, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
     // @ts-expect-error
     var appearanceConfig = cellConfig.appearance && cellConfig.appearance[appearance];
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
@@ -54,7 +54,11 @@ function Cell(props) {
     /* eslint-enable perfectionist/sort-objects */
     // @ts-expect-error
     var _b = useStyles(props), dataStyles = _b.data, cellStyles = _b.styles;
-    return (jsxs("div", { className: clsx(className, 'cell', mode && "cell_mode_".concat(mode), size && "cell_size_".concat(size), set && "cell_set_".concat(set), bgFillClass && "fill_".concat(bgFillClass), bgFillHoverClass && "fill_hover_".concat(bgFillHoverClass), isActive && bgFillActiveClass && "fill_active_".concat(bgFillActiveClass), isDisabled && bgFillDisabledClass && "fill_disabled_".concat(bgFillDisabledClass), bgShapeClass && "cell_shape_".concat(bgShapeClass), widthClass && !cellStyles.width && "width_".concat(widthClass), zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap', reverse && 'cell_reverse'), style: cellStyles, onClick: onClick, onMouseEnter: onMouseEnter, children: [before && jsx("div", { className: "cell__before", children: before }), jsxs("div", { className: clsx('cell__wrapper', directionClass && "cell__wrapper_direction_".concat(directionClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), isActive && fillActiveClass && "fill_active_".concat(fillActiveClass), isDisabled && fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), shapeClass && "cell__wrapper_shape_".concat(shapeClass), isEqual && 'cell__wrapper-equal'), children: [title && (jsxs("div", { className: "cell__data", style: dataStyles, children: [jsx(Text, { className: "cell__title", size: titleTextSize, tag: titleTag, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title }), (titleIcon || titleIconSrc) && (jsx(Icon, { className: "cell__icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), showTitleLabel && (jsx(Label, { labelTextSize: titleLabelTextSize, appearance: titleLabelAppearance, label: titleLabel, shape: titleLabelShape, size: titleLabelSize }))] })), value && (jsxs("div", { className: "cell__data", style: dataStyles, children: [jsx(Text, { className: "cell__value", size: valueTextSize, tag: valueTag, textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, children: value }), (valueIcon || valueIconSrc) && (jsx(Icon, { className: "cell__icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), showValueLabel && (jsx(Label, { labelTextSize: valueLabelTextSize, appearance: valueLabelAppearance, label: valueLabel, shape: valueLabelShape, size: valueLabelSize }))] }))] }), after && jsx("div", { className: "cell__after", children: after })] }));
+    return (jsxs("div", { className: clsx(className, 'cell', mode && "cell_mode_".concat(mode), size && "cell_size_".concat(size), set && "cell_set_".concat(set), bgFillClass && "fill_".concat(bgFillClass), bgFillHoverClass && "fill_hover_".concat(bgFillHoverClass), isActive && bgFillActiveClass && "fill_active_".concat(bgFillActiveClass), isDisabled &&
+            bgFillDisabledClass &&
+            "fill_disabled_".concat(bgFillDisabledClass), bgShapeClass && "cell_shape_".concat(bgShapeClass), widthClass && !(cellStyles === null || cellStyles === void 0 ? void 0 : cellStyles.width) && "width_".concat(widthClass), zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap', reverse && 'cell_reverse'), style: cellStyles, onClick: onClick, onMouseEnter: onMouseEnter, children: [before && jsx("div", { className: "cell__before", children: before }), jsxs("div", { className: clsx('cell__wrapper', directionClass && "cell__wrapper_direction_".concat(directionClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), isActive && fillActiveClass && "fill_active_".concat(fillActiveClass), isDisabled &&
+                    fillDisabledClass &&
+                    "fill_disabled_".concat(fillDisabledClass), shapeClass && "cell__wrapper_shape_".concat(shapeClass), isEqual && 'cell__wrapper-equal'), children: [title && (jsxs("div", { className: "cell__data", style: dataStyles, children: [jsx(Text, { className: "cell__title", textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, size: titleTextSize, tag: titleTag, children: title }), (titleIcon || titleIconSrc) && (jsx(Icon, { className: "cell__icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), showTitleLabel && (jsx(Label, { appearance: titleLabelAppearance, label: titleLabel, labelTextSize: titleLabelTextSize, shape: titleLabelShape, size: titleLabelSize }))] })), value && (jsxs("div", { className: "cell__data", style: dataStyles, children: [jsx(Text, { className: "cell__value", textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, size: valueTextSize, tag: valueTag, children: value }), (valueIcon || valueIconSrc) && (jsx(Icon, { className: "cell__icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), showValueLabel && (jsx(Label, { appearance: valueLabelAppearance, label: valueLabel, labelTextSize: valueLabelTextSize, shape: valueLabelShape, size: valueLabelSize }))] }))] }), after && jsx("div", { className: "cell__after", children: after })] }));
 }
 
 export { Cell, cellAppearance, cellConfig };

package/dist/components/CookiesWarning.js

@@ -3,8 +3,8 @@ import { useRef, useMemo, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
 import Cookies from 'js-cookie';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { B as Button } from '../Button-DZ3z7f-A.js';
-import { G as Group } from '../Group-BKJmVwPZ.js';
+import { B as Button } from '../Button-BtAUGGPc.js';
+import { G as Group } from '../Group-DiMnEfge.js';
 import { T as Text } from '../Text-C6NSmetx.js';
 import '../tslib.es6-5FtW-kfi.js';
 import 'lodash/camelCase';

package/dist/components/DatePicker.js

@@ -6,7 +6,7 @@ import { ru } from 'date-fns/locale';
 import DatePicker from 'react-datepicker';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Button } from '../Button-DZ3z7f-A.js';
+import { B as Button } from '../Button-BtAUGGPc.js';
 import { I as Icon } from '../Icon-htF_V35Y.js';
 import { I as Input } from '../Input-COFdaiTe.js';
 import { L as Label } from '../Label-Dpeq55TV.js';

package/dist/components/Group.js

@@ -1,4 +1,4 @@
-export { G as Group, a as groupAppearance, g as groupConfig } from '../Group-BKJmVwPZ.js';
+export { G as Group, a as groupAppearance, g as groupConfig } from '../Group-DiMnEfge.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

package/dist/components/Panel.js

@@ -3,7 +3,7 @@ import React from 'react';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { G as Group } from '../Group-BKJmVwPZ.js';
+import { G as Group } from '../Group-DiMnEfge.js';
 import { T as Text } from '../Text-C6NSmetx.js';
 import '../tslib.es6-5FtW-kfi.js';
 import 'lodash/camelCase';

package/dist/components/Response.js

@@ -5,8 +5,8 @@ import clsx from 'clsx';
 import SVG from 'react-inlinesvg';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Button } from '../Button-DZ3z7f-A.js';
-import { G as Group } from '../Group-BKJmVwPZ.js';
+import { B as Button } from '../Button-BtAUGGPc.js';
+import { G as Group } from '../Group-DiMnEfge.js';
 import { T as Text } from '../Text-C6NSmetx.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';

package/dist/components/Select.js

@@ -8,7 +8,7 @@ import CreatableSelect from 'react-select/creatable';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { T as Text } from '../Text-C6NSmetx.js';
 import { B as Badge } from '../Badge-CGHosmYx.js';
-import { G as Group } from '../Group-BKJmVwPZ.js';
+import { G as Group } from '../Group-DiMnEfge.js';
 import { D as Divider } from '../Divider-BQcBkzt1.js';
 import 'react-inlinesvg';
 import '../hooks/useStyles/useStyles.js';

package/dist/css/components/Accordion/Accordion.css

@@ -46,16 +46,12 @@
   }
 }
 .accordion-item {
-  min-width: 170px;
   display: flex;
   flex-flow: row wrap;
   align-items: center;
   gap: 14px;
   &__title {
     flex: 1;
-    &.text {
-      padding: var(--accordion-item-padding, 0);
-    }
   }
   &__icon {
     align-self: flex-start;
@@ -75,9 +71,9 @@
 }
 .accordion-item {
   &_size {
-    @each $size in xs, s, m, l, xl, xxl {
+    @each $size in xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
-        padding: var(--accordion-item-size-$(size)-padding);
+        padding: var(--accordion-item-$(size)-padding);
       }
     }
   }
@@ -90,6 +86,7 @@
   }
 }
 :root {
-  --accordion-item-size-xs-padding: 10px 8px;
-  --accordion-item-size-l-padding: 14px 12px;
+  --accordion-item-shape-rounded: 12px;
+  --accordion-item-xs-padding: 10px 8px;
+  --accordion-item-l-padding: 14px 12px;
 }

package/dist/css/components/Accordion/Accordion.tokens.css

@@ -1,4 +1,5 @@
 :root {
   --accordion-item-shape-rounded: 12px;
+  --accordion-item-xs-padding: 10px 8px;
+  --accordion-item-l-padding: 14px 12px;
 }
-

package/dist/css/components/Chips/Chips.css

@@ -1,44 +1,20 @@
 .chips {
   display: inline-flex;
-  &__label {
-    white-space: var(--chips-label-white-space, nowrap);
-  }
   &__inner {
     display: flex;
     align-items: center;
-    gap: 4px;
   }
 }
 
 .chips {
-  &&_size {
-    &_xxs {
-      padding: var(--chips-size-xxs-padding, 2px 6px);
-      @mixin text-s;
-    }
-    &_xs {
-      padding: var(--chips-size-xs-padding, 2px 6px);
-      @mixin text-s;
-    }
-    &_s {
-      padding: var(--chips-size-s-padding, 2px 6px);
-      @mixin text-s;
-    }
-    &_m {
-      padding: var(--chips-size-m-padding, 2px 6px);
-      @mixin text-m;
-    }
-    &_l {
-      padding: var(--chips-size-l-padding, 2px 6px);
-      @mixin text-l;
-    }
-    &_xl {
-      padding: var(--chips-size-xl-padding, 2px 6px);
-      @mixin text-l;
-    }
-    &_xxl {
-      padding: var(--chips-size-xxl-padding, 6px 12px);
-      @mixin text-xxl;
+  @each $size in xxl, xl, l, m, s, xs, xxs {
+    &_size_$(size) {
+      ^&__inner {
+        min-width: var(--chips-$(size)-min-width);
+        min-height: var(--chips-$(size)-min-height);
+        padding: var(--chips-$(size)-padding);
+        gap: var(--chips-$(size)-gap);
+      }
     }
   }
 }
@@ -47,14 +23,52 @@
   &_shape {
     &_rounded {
       border-radius: var(--chips-shape-rounded-default, 6px);
-      @each $size in xxs, xs, s, m, l, xl, xxl {
-        &.chips_size_$(size) {
-          border-radius: var(--chips-size-$(size)-shape-rounded);
+      @each $size in xxl, xl, l, m, s, xs, xxs {
+        &^^&_size_$(size) {
+          border-radius: var(--chips-$(size)-shape-rounded, 6px);
         }
       }
     }
     &_circular {
-      border-radius: 50%;
+      border-radius: 20px;
     }
   }
 }
+
+:root {
+  /* Size XXL */
+  --chips-xxl-gap: 0.5m;
+  --chips-xxl-padding: 2m 2m;
+  --chips-xxl-min-width: 48px;
+  --chips-xxl-min-height: 48px;
+  /* Size XL */
+  --chips-xl-gap: 0.5m;
+  --chips-xl-padding: 1m 1m;
+  --chips-xl-min-width: 40px;
+  --chips-xl-min-height: 40px;
+  /* Size L */
+  --chips-l-gap: 0.5m;
+  --chips-l-padding: 0.5m 0.5m;
+  --chips-l-min-width: 32px;
+  --chips-l-min-height: 32px;
+  /* Size M */
+  --chips-m-gap: 0.5m;
+  --chips-m-padding: 0.75m 1.25m;
+  --chips-m-min-width: 28px;
+  --chips-m-min-height: 28px;
+  /* Size S */
+  --chips-s-gap: 0.5m;
+  --chips-s-padding: 0.25m 0.5m;
+  --chips-s-min-width: 24px;
+  --chips-s-min-height: 24px;
+  /* Size XS */
+  --chips-xs-gap: 0.5m;
+  --chips-xs-padding: 0.5m 0.5m;
+  --chips-xs-min-width: 20px;
+  --chips-xs-min-height: 20px;
+  /* Size XXS */
+  --chips-xxs-gap: 0.5m;
+  --chips-xxs-padding: 0.25m 0.25m;
+  --chips-xxs-min-width: 16px;
+  --chips-xxs-min-height: 16px;
+}

package/dist/css/components/Chips/Chips.tokens.css

@@ -1,9 +1,37 @@
 :root {
-  --chips-size-xxs-padding: 0px 8px;
-  --chips-size-xs-padding: 1px 10px;
-  --chips-size-s-padding: 2px 10px;
-  --chips-size-m-padding: 4px 10px;
-  --chips-size-l-padding: 5px 10px;
-  --chips-size-xl-padding: 9px 10px;
-  --chips-size-xxl-padding: 13px 12px;
+  /* Size XXL */
+  --chips-xxl-gap: 0.5m;
+  --chips-xxl-padding: 2m 2m;
+  --chips-xxl-min-width: 48px;
+  --chips-xxl-min-height: 48px;
+  /* Size XL */
+  --chips-xl-gap: 0.5m;
+  --chips-xl-padding: 1m 1m;
+  --chips-xl-min-width: 40px;
+  --chips-xl-min-height: 40px;
+  /* Size L */
+  --chips-l-gap: 0.5m;
+  --chips-l-padding: 0.5m 0.5m;
+  --chips-l-min-width: 32px;
+  --chips-l-min-height: 32px;
+  /* Size M */
+  --chips-m-gap: 0.5m;
+  --chips-m-padding: 0.75m 1.25m;
+  --chips-m-min-width: 28px;
+  --chips-m-min-height: 28px;
+  /* Size S */
+  --chips-s-gap: 0.5m;
+  --chips-s-padding: 0.25m 0.5m;
+  --chips-s-min-width: 24px;
+  --chips-s-min-height: 24px;
+  /* Size XS */
+  --chips-xs-gap: 0.5m;
+  --chips-xs-padding: 0.5m 0.5m;
+  --chips-xs-min-width: 20px;
+  --chips-xs-min-height: 20px;
+  /* Size XXS */
+  --chips-xxs-gap: 0.5m;
+  --chips-xxs-padding: 0.25m 0.25m;
+  --chips-xxs-min-width: 16px;
+  --chips-xxs-min-height: 16px;
 }

package/dist/css/components/Select/Select.css

@@ -371,3 +371,28 @@
     }
   }
 }
+
+:root {
+  --select-size-xxl-padding: 15px 25px;
+  --select-size-xl-padding: 9px 20px;
+  --select-size-xs-padding: 0px 8px;
+  --select-size-m-padding: 5px 12px;
+  --select-size-s-padding: 0 4px;
+  --select-size-l-padding: 7px 15px;
+
+  --select-menu-border-radius: 12px;
+  --select-menu-margin: 0;
+
+  --select-multi-value-padding: 2px 6px;
+
+  --select-control-shape-rounded: 8px;
+
+  --select-success-border: var(--color-surface-border-tertiary);
+
+  --select-menu-list-item-size-xxl-padding: 18px 25px;
+  --select-menu-list-item-size-xl-padding: 14px 20px;
+  --select-menu-list-item-size-l-padding: 10px 12px;
+  --select-menu-list-item-size-m-padding: 8px 12px;
+  --select-menu-list-item-size-s-padding: 6px 10px;
+  --select-menu-list-item-size-xs-padding: 2px 8px;
+}

package/dist/css/components/Select/Select.tokens.css

@@ -1,15 +1,10 @@
 :root {
+  --select-size-xxl-padding: 15px 25px;
+  --select-size-xl-padding: 9px 20px;
   --select-size-xs-padding: 0px 8px;
-  --select-size-s-padding: 3px 10px;
   --select-size-m-padding: 5px 12px;
+  --select-size-s-padding: 0 4px;
   --select-size-l-padding: 7px 15px;
-  --select-size-xl-padding: 11px 20px;
-  --select-size-xxl-padding: 15px 25px;
-
-  --select-size-tiny-padding: 0px 8px;
-  --select-size-compact-padding: 3px 10px;
-  --select-size-normal-padding: 5px 12px;
-  --select-size-large-padding: 7px 15px;
 
   --select-menu-border-radius: 12px;
   --select-menu-margin: 0;
@@ -20,10 +15,10 @@
 
   --select-success-border: var(--color-surface-border-tertiary);
 
-  --select-menu-list-item-size-xs-padding: 2px 8px;
-  --select-menu-list-item-size-s-padding: 6px 10px;
-  --select-menu-list-item-size-m-padding: 8px 12px;
-  --select-menu-list-item-size-l-padding: 10px 12px;
-  --select-menu-list-item-size-xl-padding: 14px 20px;
   --select-menu-list-item-size-xxl-padding: 18px 25px;
+  --select-menu-list-item-size-xl-padding: 14px 20px;
+  --select-menu-list-item-size-l-padding: 10px 12px;
+  --select-menu-list-item-size-m-padding: 8px 12px;
+  --select-menu-list-item-size-s-padding: 6px 10px;
+  --select-menu-list-item-size-xs-padding: 2px 8px;
 }

package/dist/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js

@@ -111,6 +111,7 @@ function useDevicePropsGenerator(componentProps, appearanceConfig) {
             },
         };
         return new Proxy(propsGenerator, generatorProxyHandler);
+        // TODO: componentProps(react) and appearanceConfig(not memoized) is always new. maybe better check Object.values?
     }, [componentProps, appearanceConfig, deviceCurrentMainType]);
     return devicePropsGenerator;
 }

package/dist/stories/Overview.mdx

@@ -1,11 +1,11 @@
 import { Meta, Story } from '@storybook/blocks'
 
-import * as TooltipStories from '../stories/Tooltip.stories.tsx'
+import * as TitleStories from '../stories/Title.stories.tsx'
 
-<Meta title="Atoms / Tooltip / Overview" />
+<Meta title="Atoms / Title / Overview" />
 
-# Tooltip
+# Title
 
-`Tooltip` - это небольшой фрагмент контекстной информации, который появляется, когда пользователи наводят курсор мыши на элемент пользовательского интерфейса.
+`Title` отображает заголовки.
 
-<Story of={TooltipStories.surfacePrimary} />
+<Story of={TitleStories.SizeH3} />

package/dist/stories/Playground.mdx

@@ -1,10 +1,10 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks'
 
-import * as TooltipStories from '../stories/Tooltip.stories.tsx'
+import * as TitleStories from '../stories/Title.stories.tsx'
 
-<Meta title="Atoms / Tooltip / Playground" />
+<Meta title="Atoms / Title / Playground" />
 
 # Playground
 
-<Canvas sourceState="shown" of={TooltipStories.surfacePrimary} />
-<Controls of={TooltipStories.surfacePrimary} />
+<Canvas sourceState="shown" of={TitleStories.SizeH4} />
+<Controls of={TitleStories.SizeH4} />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.3.32",
+  "version": "1.3.36",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",

package/dist/Group-BKJmVwPZ.js

@@ -1,34 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import React from 'react';
-import clsx from 'clsx';
-import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { useStyles } from './hooks/useStyles/useStyles.js';
-
-var groupAppearance = {
-    dev: {
-        borderWidth: 1,
-        borderColor: 'surfaceBorderPrimary',
-        direction: 'horizontal',
-        fill: 'surfacePrimary',
-        fillHover: 'surfacePrimaryHover',
-    },
-};
-
-var groupConfig = {
-    appearance: groupAppearance,
-    setAppearance: function (newComponent) {
-        groupConfig.appearance = newComponent;
-    },
-};
-var Group = React.forwardRef(function Group(props, ref) {
-    var id = props.id, children = props.children, appearance = props.appearance, className = props.className, dataTestId = props.dataTestId, dataTour = props.dataTour, horizontalScroll = props.horizontalScroll, htmlFor = props.htmlFor, name = props.name, set = props.set, style = props.style, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, onClick = props.onClick;
-    // @ts-expect-error
-    var appearanceConfig = groupConfig.appearance && groupConfig.appearance[appearance];
-    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, columnsClass = propsGenerator.columnsClass, contentAlignClass = propsGenerator.contentAlignClass, directionClass = propsGenerator.directionClass, elevationClass = propsGenerator.elevationClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, flexGrowClass = propsGenerator.flexGrowClass, heightClass = propsGenerator.heightClass, iconFillHoverClass = propsGenerator.iconFillHoverClass, justifyContentClass = propsGenerator.justifyContentClass, shapeClass = propsGenerator.shapeClass, stackingClass = propsGenerator.stackingClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorHoverClass = propsGenerator.textColorHoverClass, widthClass = propsGenerator.widthClass, wrapClass = propsGenerator.wrapClass;
-    // @ts-expect-error
-    var _b = useStyles(props), groupStyles = _b.styles, groupWrapperStyles = _b.wrapper;
-    return (jsx(Tag, { className: clsx(className, 'group', widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), columnsClass && "group_columns_".concat(columnsClass), contentAlignClass && "group_content-align_".concat(contentAlignClass), alignDirectionClass && "align_".concat(alignDirectionClass), directionClass && "group_direction_".concat(directionClass), alignClass && "align_".concat(alignClass), textColorClass && "group_text-color_".concat(textColorClass), textColorActiveClass && "group_text-color_active_".concat(textColorActiveClass), textColorHoverClass && "group_text-color_hover_".concat(textColorHoverClass), iconFillHoverClass && "group_icon_fill_hover_".concat(iconFillHoverClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), set && "group_set_".concat(set), horizontalScroll && 'group_type_horizontal_scroll', stackingClass && "group_stacking_".concat(stackingClass), wrapClass && "group_wrap_".concat(wrapClass), flexGrowClass && "flex-grow_".concat(flexGrowClass), shapeClass && "group_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), elevationClass && "elevation_".concat(elevationClass), justifyContentClass && "justify-content_".concat(justifyContentClass), onClick && 'cursor_type_pointer'), ref: ref, name: name, "data-testid": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, id: id, style: Object.assign({}, groupStyles, style), onClick: onClick, children: horizontalScroll ? (jsx("div", { className: "group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
-});
-
-export { Group as G, groupAppearance as a, groupConfig as g };

package/dist/Group-Bkz3RO18.js

@@ -1,38 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var clsx = require('clsx');
-var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-
-var groupAppearance = {
-    dev: {
-        borderWidth: 1,
-        borderColor: 'surfaceBorderPrimary',
-        direction: 'horizontal',
-        fill: 'surfacePrimary',
-        fillHover: 'surfacePrimaryHover',
-    },
-};
-
-var groupConfig = {
-    appearance: groupAppearance,
-    setAppearance: function (newComponent) {
-        groupConfig.appearance = newComponent;
-    },
-};
-var Group = React.forwardRef(function Group(props, ref) {
-    var id = props.id, children = props.children, appearance = props.appearance, className = props.className, dataTestId = props.dataTestId, dataTour = props.dataTour, horizontalScroll = props.horizontalScroll, htmlFor = props.htmlFor, name = props.name, set = props.set, style = props.style, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, onClick = props.onClick;
-    // @ts-expect-error
-    var appearanceConfig = groupConfig.appearance && groupConfig.appearance[appearance];
-    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, columnsClass = propsGenerator.columnsClass, contentAlignClass = propsGenerator.contentAlignClass, directionClass = propsGenerator.directionClass, elevationClass = propsGenerator.elevationClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, flexGrowClass = propsGenerator.flexGrowClass, heightClass = propsGenerator.heightClass, iconFillHoverClass = propsGenerator.iconFillHoverClass, justifyContentClass = propsGenerator.justifyContentClass, shapeClass = propsGenerator.shapeClass, stackingClass = propsGenerator.stackingClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorHoverClass = propsGenerator.textColorHoverClass, widthClass = propsGenerator.widthClass, wrapClass = propsGenerator.wrapClass;
-    // @ts-expect-error
-    var _b = useStyles.useStyles(props), groupStyles = _b.styles, groupWrapperStyles = _b.wrapper;
-    return (jsxRuntime.jsx(Tag, { className: clsx(className, 'group', widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), columnsClass && "group_columns_".concat(columnsClass), contentAlignClass && "group_content-align_".concat(contentAlignClass), alignDirectionClass && "align_".concat(alignDirectionClass), directionClass && "group_direction_".concat(directionClass), alignClass && "align_".concat(alignClass), textColorClass && "group_text-color_".concat(textColorClass), textColorActiveClass && "group_text-color_active_".concat(textColorActiveClass), textColorHoverClass && "group_text-color_hover_".concat(textColorHoverClass), iconFillHoverClass && "group_icon_fill_hover_".concat(iconFillHoverClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), set && "group_set_".concat(set), horizontalScroll && 'group_type_horizontal_scroll', stackingClass && "group_stacking_".concat(stackingClass), wrapClass && "group_wrap_".concat(wrapClass), flexGrowClass && "flex-grow_".concat(flexGrowClass), shapeClass && "group_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), elevationClass && "elevation_".concat(elevationClass), justifyContentClass && "justify-content_".concat(justifyContentClass), onClick && 'cursor_type_pointer'), ref: ref, name: name, "data-testid": dataTestId, "data-tour": dataTour, htmlFor: htmlFor, id: id, style: Object.assign({}, groupStyles, style), onClick: onClick, children: horizontalScroll ? (jsxRuntime.jsx("div", { className: "group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
-});
-
-exports.Group = Group;
-exports.groupAppearance = groupAppearance;
-exports.groupConfig = groupConfig;

package/dist/css/styles/column-gap/column-gap.css

@@ -1,7 +0,0 @@
-.column-gap {
-  @each $val in 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200 {
-    &_$(val) {
-      column-gap: $(val)px;
-    }
-  }
-}

package/dist/css/styles/row-gap/row-gap.css

@@ -1,7 +0,0 @@
-.row-gap {
-  @each $val in 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200 {
-    &_$(val) {
-      row-gap: $(val)px;
-    }
-  }
-}