@itcase/ui 1.3.32 → 1.3.33

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/components/Tab.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var tslib_es6 = require('../../tslib.es6-CCZ3TN_7.js');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
@@ -9,7 +10,6 @@ var Badge = require('../../Badge-BX4N91_C.js');
 var Divider = require('../../Divider-ImOOytuN.js');
 var Link = require('../../Link-B38Hn4G2.js');
 var Text = require('../../Text-C49zj3jO.js');
-require('../../tslib.es6-CCZ3TN_7.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
@@ -25,134 +25,132 @@ require('../../Tooltip-DpBQQoNo.js');
 require('../../Title-BWWyRwLY.js');
 
 var tabAppearance = {
-    any: {
-        dividerFill: 'surfaceTertiary',
-        dividerFillActive: 'accentPrimary',
+    accent: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+        labelColor: 'accentTextPrimary',
+        labelColorActive: 'accentTextPrimary',
         dividerFillDisabled: 'accentDisabled',
-        dividerFillHover: 'surfaceTertiary',
-        fill: 'surfacePrimary',
         fillDisabled: 'surfaceDisabled',
-        fillHover: 'surfaceTertiary',
-        labelColor: 'surfaceTextPrimary',
-        labelColorActive: 'surfaceTextAccent',
         labelColorDisabled: 'surfaceTextDisabled',
+        dividerFill: 'surfaceTertiary',
+        dividerFillActive: 'surfacePrimary',
+        dividerFillHover: 'surfaceTertiary',
     },
-    surfacePrimary: {
+    primary: {
+        fill: 'primaryPrimary',
+        fillHover: 'primaryPrimaryHover',
+        labelColor: 'primaryTextPrimary',
+        labelColorActive: 'primaryTextPrimary',
+        dividerFillDisabled: 'accentDisabled',
+        fillDisabled: 'surfaceDisabled',
+        labelColorDisabled: 'surfaceTextDisabled',
         dividerFill: 'surfaceTertiary',
         dividerFillActive: 'accentPrimary',
+        dividerFillHover: 'surfaceTertiary',
+    },
+    secondary: {
+        fill: 'secondaryPrimary',
+        fillHover: 'secondaryPrimaryHover',
+        labelColor: 'secondaryTextPrimary',
+        labelColorActive: 'secondaryTextPrimary',
         dividerFillDisabled: 'accentDisabled',
+        fillDisabled: 'surfaceDisabled',
+        labelColorDisabled: 'surfaceTextDisabled',
+        dividerFill: 'surfaceTertiary',
+        dividerFillActive: 'accentPrimary',
         dividerFillHover: 'surfaceTertiary',
+    },
+    surfacePrimary: {
         fill: 'surfacePrimary',
-        fillDisabled: 'surfaceDisabled',
         fillHover: 'surfacePrimaryHover',
         labelColor: 'surfaceTextPrimary',
         labelColorActive: 'surfaceTextAccent',
+        dividerFillDisabled: 'accentDisabled',
+        fillDisabled: 'surfaceDisabled',
         labelColorDisabled: 'surfaceTextDisabled',
-    },
-    surfaceSecondary: {
         dividerFill: 'surfaceTertiary',
         dividerFillActive: 'accentPrimary',
-        dividerFillDisabled: 'accentDisabled',
         dividerFillHover: 'surfaceTertiary',
+    },
+    surfaceSecondary: {
         fill: 'surfaceSecondary',
-        fillDisabled: 'surfaceDisabled',
         fillHover: 'surfaceSecondaryHover',
         labelColor: 'surfaceTextPrimary',
         labelColorActive: 'surfaceTextAccent',
+        dividerFillDisabled: 'accentDisabled',
+        fillDisabled: 'surfaceDisabled',
         labelColorDisabled: 'surfaceTextDisabled',
-    },
-    surfaceTertiary: {
         dividerFill: 'surfaceTertiary',
         dividerFillActive: 'accentPrimary',
-        dividerFillDisabled: 'accentDisabled',
         dividerFillHover: 'surfaceTertiary',
+    },
+    surfaceTertiary: {
         fill: 'surfaceTertiary',
-        fillDisabled: 'surfaceDisabled',
         fillHover: 'surfaceTertiaryHover',
         labelColor: 'surfaceTextPrimary',
         labelColorActive: 'surfaceTextAccent',
+        dividerFillDisabled: 'accentDisabled',
+        fillDisabled: 'surfaceDisabled',
         labelColorDisabled: 'surfaceTextDisabled',
-    },
-    surfaceQuaternary: {
         dividerFill: 'surfaceTertiary',
         dividerFillActive: 'accentPrimary',
-        dividerFillDisabled: 'accentDisabled',
         dividerFillHover: 'surfaceTertiary',
+    },
+    surfaceQuaternary: {
         fill: 'surfaceQuaternary',
-        fillDisabled: 'surfaceDisabled',
         fillHover: 'surfaceTertiaryHover',
         labelColor: 'surfaceTextInverse',
         labelColorActive: 'surfaceTextInverse',
-        labelColorDisabled: 'surfaceTextDisabled',
-    },
-    accent: {
-        dividerFill: 'surfaceTertiary',
-        dividerFillActive: 'surfacePrimary',
         dividerFillDisabled: 'accentDisabled',
-        dividerFillHover: 'surfaceTertiary',
-        fill: 'accentPrimary',
         fillDisabled: 'surfaceDisabled',
-        fillHover: 'accentPrimaryHover',
-        labelColor: 'accentTextPrimary',
-        labelColorActive: 'accentTextPrimary',
         labelColorDisabled: 'surfaceTextDisabled',
-    },
-    primary: {
         dividerFill: 'surfaceTertiary',
         dividerFillActive: 'accentPrimary',
-        dividerFillDisabled: 'accentDisabled',
         dividerFillHover: 'surfaceTertiary',
-        fill: 'primaryPrimary',
+    },
+    any: {
+        fill: 'surfacePrimary',
+        fillHover: 'surfaceTertiary',
+        labelColor: 'surfaceTextPrimary',
+        labelColorActive: 'surfaceTextAccent',
+        dividerFillDisabled: 'accentDisabled',
         fillDisabled: 'surfaceDisabled',
-        fillHover: 'primaryPrimaryHover',
-        labelColor: 'primaryTextPrimary',
-        labelColorActive: 'primaryTextPrimary',
         labelColorDisabled: 'surfaceTextDisabled',
-    },
-    secondary: {
         dividerFill: 'surfaceTertiary',
         dividerFillActive: 'accentPrimary',
-        dividerFillDisabled: 'accentDisabled',
         dividerFillHover: 'surfaceTertiary',
-        fill: 'secondaryPrimary',
-        fillDisabled: 'surfaceDisabled',
-        fillHover: 'secondaryPrimaryHover',
-        labelColor: 'secondaryTextPrimary',
-        labelColorActive: 'secondaryTextPrimary',
-        labelColorDisabled: 'surfaceTextDisabled',
     },
 };
 
 var tabConfig = {
     appearance: tabAppearance,
-    setAppearance: function (newComponent) {
-        tabConfig.appearance = newComponent;
+    setAppearance: function (appearanceConfig) {
+        tabConfig.appearance = appearanceConfig;
     },
 };
 function Tab(props) {
-    var children = props.children, _a = props.isActive, isActive = _a === void 0 ? false : _a, _b = props.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = props.isHover, isHover = _c === void 0 ? false : _c, after = props.after, appearance = props.appearance, badgeAppearance = props.badgeAppearance, badgeShape = props.badgeShape, badgeSize = props.badgeSize, badgeTextColor = props.badgeTextColor, badgeTextSize = props.badgeTextSize, badgeValue = props.badgeValue, before = props.before, className = props.className, dataTour = props.dataTour, _d = props.dividerDirection, dividerDirection = _d === void 0 ? 'horizontal' : _d, dividerFill = props.dividerFill, dividerFillActive = props.dividerFillActive, dividerFillActiveHover = props.dividerFillActiveHover, dividerFillDisabled = props.dividerFillDisabled, dividerFillHover = props.dividerFillHover, dividerSize = props.dividerSize, href = props.href, label = props.label, labelColor = props.labelColor, labelColorActive = props.labelColorActive, labelColorDisabled = props.labelColorDisabled, labelTextAlign = props.labelTextAlign, labelTextColorHover = props.labelTextColorHover, labelTextGradient = props.labelTextGradient, labelTextSize = props.labelTextSize, labelTextStyle = props.labelTextStyle, labelTextWeight = props.labelTextWeight, labelTextWrap = props.labelTextWrap, link = props.link, linkFill = props.linkFill, rel = props.rel, reset = props.reset, set = props.set, target = props.target, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
-    // @ts-expect-error
-    var appearanceConfig = tabConfig.appearance && tabConfig.appearance[appearance];
+    var className = props.className, appearance = props.appearance, children = props.children, label = props.label, badgeValue = props.badgeValue, dataTour = props.dataTour, href = props.href, link = props.link, rel = props.rel, reset = props.reset, target = props.target, before = props.before, after = props.after, _a = props.isActive, isActive = _a === void 0 ? false : _a, _b = props.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = props.isHover, isHover = _c === void 0 ? false : _c, set = props.set, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
+    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultAppearance, appearance) {
+        var _a;
+        return (tslib_es6.__assign(tslib_es6.__assign({}, resultAppearance), (_a = tabConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
+    }, {});
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, justifyContentClass = propsGenerator.justifyContentClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, typeClass = propsGenerator.typeClass, widthClass = propsGenerator.widthClass;
+    var justifyContentClass = propsGenerator.justifyContentClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelColor = propsGenerator.labelColor, labelColorActive = propsGenerator.labelColorActive, labelTextAlign = propsGenerator.labelTextAlign, labelTextColorHover = propsGenerator.labelTextColorHover, labelTextGradient = propsGenerator.labelTextGradient, labelTextSize = propsGenerator.labelTextSize, labelTextStyle = propsGenerator.labelTextStyle, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, dividerFillDisabled = propsGenerator.dividerFillDisabled, fillDisabledClass = propsGenerator.fillDisabledClass, labelColorDisabled = propsGenerator.labelColorDisabled, badgeAppearance = propsGenerator.badgeAppearance, badgeShape = propsGenerator.badgeShape, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, dividerDirection = propsGenerator.dividerDirection, dividerFill = propsGenerator.dividerFill, dividerFillActive = propsGenerator.dividerFillActive, dividerFillActiveHover = propsGenerator.dividerFillActiveHover, dividerFillHover = propsGenerator.dividerFillHover, dividerSize = propsGenerator.dividerSize, linkFill = propsGenerator.linkFill, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, typeClass = propsGenerator.typeClass, widthClass = propsGenerator.widthClass;
     // @ts-expect-error
     var tab = useStyles.useStyles(props).styles;
     return (jsxRuntime.jsx("div", { className: clsx('tab', isActive && 'tab_state_active', isDisabled && 'tab_state_disabled', isHover && 'tab_state_hover', !isDisabled
             ? fillClass && "fill_".concat(fillClass)
-            : fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isDisabled ? fillHoverClass && "fill_hover_".concat(fillHoverClass) : null, className, sizeClass && "tab_size_".concat(sizeClass), fillActiveClass && "fill_active_".concat(fillActiveClass), fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), shapeClass && "tab_shape_".concat(shapeClass), typeClass && "tab_type_".concat(typeClass), widthClass && "width_".concat(widthClass), reset && 'tab-reset', set && "tab_set_".concat(set), justifyContentClass && "tab_justify-content_".concat(justifyContentClass), onClick && 'cursor_type_pointer'), "data-tour": dataTour, style: tab, onClick: onClick, onMouseEnter: onMouseEnter, children: jsxRuntime.jsx(Link.Link, { className: clsx('tab__link', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass)), fill: linkFill, href: link || href, rel: rel, target: target, children: jsxRuntime.jsxs(React.Fragment, { children: [before, children || (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { className: "tab__wrapper", children: [(label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label)) && (jsxRuntime.jsx(Text.Text, { className: "tab__label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textAlign: labelTextAlign, textColorGradient: labelTextGradient, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, textColor: isDisabled
-                                            ? labelColorDisabled || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelColorDisabled)
-                                            : labelColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelColor), textColorActive: isActive && (labelColorActive || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelColorActive)), children: label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label) })), (badgeValue || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeValue)) && (jsxRuntime.jsx(Badge.Badge, { appearance: badgeAppearance || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeAppearance), shape: badgeShape, size: badgeSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeSize), textColor: badgeTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeTextColor), textSize: badgeTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeTextSize), value: badgeValue || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeValue) }))] }), jsxRuntime.jsx(Divider.Divider, { width: "fill", fill: isDisabled
-                                    ? dividerFillDisabled || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.dividerFillDisabled)
-                                    : dividerFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.dividerFill), fillHover: isHover && (dividerFillHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.dividerFillHover)), direction: dividerDirection, fillActive: isActive && (dividerFillActive || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.dividerFillActive)), fillActiveHover: dividerFillActiveHover, size: dividerSize })] })), after] }) }) }));
+            : fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isDisabled ? fillHoverClass && "fill_hover_".concat(fillHoverClass) : null, className, sizeClass && "tab_size_".concat(sizeClass), fillActiveClass && "fill_active_".concat(fillActiveClass), fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), shapeClass && "tab_shape_".concat(shapeClass), typeClass && "tab_type_".concat(typeClass), widthClass && "width_".concat(widthClass), reset && 'tab-reset', set && "tab_set_".concat(set), justifyContentClass && "tab_justify-content_".concat(justifyContentClass), onClick && 'cursor_type_pointer'), "data-tour": dataTour, style: tab, onClick: onClick, onMouseEnter: onMouseEnter, children: jsxRuntime.jsx(Link.Link, { className: clsx('tab__link', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass)), fill: linkFill, href: link || href, rel: rel, target: target, children: jsxRuntime.jsxs(React.Fragment, { children: [before, children || (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { className: "tab__wrapper", children: [label && (jsxRuntime.jsx(Text.Text, { className: "tab__label", textAlign: labelTextAlign, textColor: isDisabled ? labelColorDisabled : labelColor, textColorActive: isActive && labelColorActive, textColorGradient: labelTextGradient, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, size: labelTextSize, children: label })), badgeValue && (jsxRuntime.jsx(Badge.Badge, { appearance: badgeAppearance, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, size: badgeSize, value: badgeValue }))] }), jsxRuntime.jsx(Divider.Divider, { width: "fill", direction: dividerDirection, fill: isDisabled ? dividerFillDisabled : dividerFill, fillActive: isActive && dividerFillActive, fillActiveHover: dividerFillActiveHover, fillHover: isHover && dividerFillHover, size: dividerSize })] })), after] }) }) }));
 }
 
 function TabGroup(props) {
-    var id = props.id, children = props.children, className = props.className, dataTour = props.dataTour, horizontalScroll = props.horizontalScroll, set = props.set, style = props.style;
+    var id = props.id, className = props.className, children = props.children, dataTour = props.dataTour, horizontalScroll = props.horizontalScroll, style = props.style, set = props.set;
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
-    var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, contentAlignClass = propsGenerator.contentAlignClass, directionClass = propsGenerator.directionClass, fillClass = propsGenerator.fillClass, widthClass = propsGenerator.widthClass, wrapClass = propsGenerator.wrapClass;
+    var directionClass = propsGenerator.directionClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, contentAlignClass = propsGenerator.contentAlignClass, widthClass = propsGenerator.widthClass, wrapClass = propsGenerator.wrapClass;
     // @ts-expect-error
     var _a = useStyles.useStyles(props), groupStyles = _a.styles, groupWrapperStyles = _a.wrapper;
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'tab-group', 'group', widthClass && "width_".concat(widthClass), contentAlignClass && "group_content-align_".concat(contentAlignClass), alignDirectionClass && "align_".concat(alignDirectionClass), directionClass && "group_direction_".concat(directionClass), alignClass && "align_".concat(alignClass), fillClass && "fill_".concat(fillClass), set && "group_set_".concat(set), horizontalScroll && 'group_type_horizontal_scroll', wrapClass && "group_wrap_".concat(wrapClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass)), "data-tour": dataTour, id: id, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsxRuntime.jsx("div", { className: "tab-group__wrapper group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
+    return (jsxRuntime.jsx("div", { id: id, className: clsx(className, 'tab-group', 'group', widthClass && "width_".concat(widthClass), contentAlignClass && "group_content-align_".concat(contentAlignClass), alignDirectionClass && "align_".concat(alignDirectionClass), directionClass && "group_direction_".concat(directionClass), alignClass && "align_".concat(alignClass), fillClass && "fill_".concat(fillClass), set && "group_set_".concat(set), horizontalScroll && 'group_type_horizontal_scroll', wrapClass && "group_wrap_".concat(wrapClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass)), "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsxRuntime.jsx("div", { className: "tab-group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
 }
 
 exports.Tab = Tab;

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