@itcase/ui 1.3.32 → 1.3.33

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

@@ -1,3 +1,4 @@
+import { _ as __assign } from '../tslib.es6-5FtW-kfi.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';
@@ -7,7 +8,6 @@ import { B as Badge } from '../Badge-CGHosmYx.js';
 import { D as Divider } from '../Divider-BQcBkzt1.js';
 import { a as Link } from '../Link-BhJ5BdyS.js';
 import { T as Text } from '../Text-C6NSmetx.js';
-import '../tslib.es6-5FtW-kfi.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
@@ -23,134 +23,132 @@ import '../Tooltip-BYgzNVYI.js';
 import '../Title-Dck3eHNM.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 (__assign(__assign({}, resultAppearance), (_a = tabConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
+    }, {});
     var propsGenerator = 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(props).styles;
     return (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: jsx(Link, { className: clsx('tab__link', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass)), fill: linkFill, href: link || href, rel: rel, target: target, children: jsxs(React.Fragment, { children: [before, children || (jsxs(React.Fragment, { children: [jsxs("div", { className: "tab__wrapper", children: [(label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label)) && (jsx(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)) && (jsx(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) }))] }), jsx(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: jsx(Link, { className: clsx('tab__link', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass)), fill: linkFill, href: link || href, rel: rel, target: target, children: jsxs(React.Fragment, { children: [before, children || (jsxs(React.Fragment, { children: [jsxs("div", { className: "tab__wrapper", children: [label && (jsx(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 && (jsx(Badge, { appearance: badgeAppearance, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, size: badgeSize, value: badgeValue }))] }), jsx(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(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(props), groupStyles = _a.styles, groupWrapperStyles = _a.wrapper;
-    return (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 ? (jsx("div", { className: "tab-group__wrapper group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
+    return (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 ? (jsx("div", { className: "tab-group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
 }
 
 export { Tab, TabGroup, tabAppearance, tabConfig };

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

@@ -105,3 +105,7 @@
     }
   }
 }
+:root {
+  --avatar-icon-right: -4px;
+  --avatar-icon-bottom: -3px;
+}

package/dist/css/components/Avatar/Avatar.tokens.css

@@ -1,2 +1,4 @@
 :root {
+  --avatar-icon-right: -4px;
+  --avatar-icon-bottom: -3px;
 }

package/dist/css/components/Checkbox/Checkbox.css

@@ -95,3 +95,7 @@
     }
   }
 }
+:root {
+  --checkbox-column-gap: 12px;
+  --checkbox-row-gap: 4px;
+}

package/dist/css/components/Checkbox/Checkbox.tokens.css

@@ -1,4 +1,4 @@
 :root {
-  --checkbox-column-gap: 8px;
+  --checkbox-column-gap: 12px;
   --checkbox-row-gap: 4px;
 }

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