@itcase/ui 1.4.7 → 1.4.9

package/dist/{DropdownItem-mr__S8vt.js → DropdownItem-B3E-_Cwp.js}

@@ -8,7 +8,7 @@ import { a as Link } from './Link-DaKqf1pb.js';
 import { T as Text } from './Text-C6NSmetx.js';
 
 function Dropdown(props) {
-    var children = props.children, isOpen = props.isOpen, after = props.after, _a = props.animationClose, animationClose = _a === void 0 ? 'dropdown_animation_close' : _a, _b = props.animationOpen, animationOpen = _b === void 0 ? 'dropdown_animation_open' : _b, before = props.before, className = props.className, _c = props.set, set = _c === void 0 ? 'normal' : _c, setIsOpen = props.setIsOpen;
+    var className = props.className, _a = props.animationClose, animationClose = _a === void 0 ? 'dropdown_animation_close' : _a, _b = props.animationOpen, animationOpen = _b === void 0 ? 'dropdown_animation_open' : _b, before = props.before, after = props.after, isOpen = props.isOpen, _c = props.set, set = _c === void 0 ? 'normal' : _c, setIsOpen = props.setIsOpen, children = props.children;
     var dropdownRef = useRef(null);
     // const [isOpen, setIsOpen] = useState(false)
     var _d = useState({
@@ -28,7 +28,7 @@ function Dropdown(props) {
                 className: isOpen ? animationOpen : animationClose,
             }); });
         }
-    }, [isOpen]);
+    }, [isOpen, animationOpen, animationClose]);
     // Close dropdown by click outside
     useEffect(function () {
         // Add a handler to keep track of the click target.
@@ -55,7 +55,7 @@ function Dropdown(props) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     var propsGenerator = useDevicePropsGenerator(props);
-    var alignmentClass = propsGenerator.alignmentClass, elevationClass = propsGenerator.elevationClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, shapeClass = propsGenerator.shapeClass;
+    var alignmentClass = propsGenerator.alignmentClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, elevationClass = propsGenerator.elevationClass, shapeClass = propsGenerator.shapeClass;
     // @ts-expect-error
     var styles = useStyles(props).styles;
     return (jsxs("div", { className: clsx(className, 'dropdown', alignmentClass && "alignment_".concat(alignmentClass), set && "dropdown_set_".concat(set), shapeClass && "dropdown_shape_".concat(shapeClass), elevationClass && "elevation_".concat(elevationClass), isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className), ref: dropdownRef, style: styles, children: [before, children && (jsx("div", { className: clsx('dropdown__wrapper', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), 
@@ -74,7 +74,7 @@ var dropdownItemConfig = {
     },
 };
 function DropdownItem(props) {
-    var className = props.className, appearance = props.appearance, children = props.children, label = props.label, labelTextAlign = props.labelTextAlign, labelTextColor = props.labelTextColor, labelTextColorActive = props.labelTextColorActive, labelTextColorHover = props.labelTextColorHover, labelTextGradient = props.labelTextGradient, labelTextSize = props.labelTextSize, labelTextStyle = props.labelTextStyle, labelTextWeight = props.labelTextWeight, labelTextWrap = props.labelTextWrap, desc = props.desc, descTextColor = props.descTextColor, descTextColorHover = props.descTextColorHover, descTextGradient = props.descTextGradient, descTextSize = props.descTextSize, descTextStyle = props.descTextStyle, descTextWeight = props.descTextWeight, descTextWrap = props.descTextWrap, dividerDirection = props.dividerDirection, dividerFill = props.dividerFill, dividerSize = props.dividerSize, href = props.href, link = props.link, linkFill = props.linkFill, rel = props.rel, showDivider = props.showDivider, target = props.target, underline = props.underline, before = props.before, after = props.after, isActive = props.isActive, isHover = props.isHover, set = props.set, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
+    var className = props.className, appearance = props.appearance, label = props.label, labelTextAlign = props.labelTextAlign, labelTextColor = props.labelTextColor, labelTextColorActive = props.labelTextColorActive, labelTextColorHover = props.labelTextColorHover, labelTextGradient = props.labelTextGradient, labelTextSize = props.labelTextSize, labelTextStyle = props.labelTextStyle, labelTextWeight = props.labelTextWeight, labelTextWrap = props.labelTextWrap, desc = props.desc, descTextColor = props.descTextColor, descTextColorHover = props.descTextColorHover, descTextGradient = props.descTextGradient, descTextSize = props.descTextSize, descTextStyle = props.descTextStyle, descTextWeight = props.descTextWeight, descTextWrap = props.descTextWrap, dividerDirection = props.dividerDirection, dividerFill = props.dividerFill, dividerSize = props.dividerSize, href = props.href, link = props.link, linkFill = props.linkFill, rel = props.rel, showDivider = props.showDivider, target = props.target, underline = props.underline, before = props.before, after = props.after, isActive = props.isActive, isHover = props.isHover, set = props.set, onClick = props.onClick, onMouseEnter = props.onMouseEnter, children = props.children;
     // prettier-ignore
     var appearanceConfig = (dropdownItemConfig.appearance && dropdownItemConfig.appearance[appearance]);
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
@@ -82,7 +82,7 @@ function DropdownItem(props) {
     // @ts-expect-error
     var dropdownItem = useStyles(props).styles;
     return (jsxs("div", { className: clsx('dropdown__item', isActive && 'dropdown__item_state_active', isHover && 'dropdown__item_state_hover', directionClass && "dropdown__item_direction_".concat(directionClass), className, fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), fillActiveClass && "fill_active_".concat(fillActiveClass), fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), sizeClass && "dropdown__item_size_".concat(sizeClass), shapeClass && "dropdown__item_shape_".concat(shapeClass), typeClass && "dropdown__item_type_".concat(typeClass), widthClass && "dropdown__item_width_".concat(widthClass), onClick && 'cursor_type_pointer', set && "dropdown__item_set_".concat(set), justifyContentClass &&
-            "dropdown__item_justify-content_".concat(justifyContentClass)), style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [jsx("div", { className: "dropdown__item-wrapper", children: jsx(Link, { className: clsx('dropdown__item-link', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass)), fill: linkFill, href: link || href, rel: rel, target: target, underline: underline, children: jsxs(React.Fragment, { children: [before, children || (jsxs(React.Fragment, { children: [label && (jsx(Text, { className: "dropdown__item-label", textAlign: labelTextAlign, textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textColorActive: isActive ? labelTextColorActive : undefined, textColorGradient: labelTextGradient, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), children: label })), desc && (jsx(Text, { className: "dropdown__item-desc", textColor: descTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextColor), textColorGradient: descTextGradient, textColorHover: descTextColorHover, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, size: descTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextSize), children: desc }))] })), after] }) }) }), showDivider && (jsx(Divider, { width: "fill", direction: dividerDirection, fill: dividerFill || 'surfaceTertiary', size: dividerSize }))] }));
+            "dropdown__item_justify-content_".concat(justifyContentClass)), style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [jsx("div", { className: "dropdown__item-wrapper", children: jsx(Link, { className: clsx('dropdown__item-link', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass)), fill: linkFill, href: link || href, rel: rel, target: target, underline: underline, children: jsxs(React.Fragment, { children: [before, children || (jsxs(React.Fragment, { children: [label && (jsx(Text, { className: "dropdown__item-label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textAlign: labelTextAlign, textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textColorActive: isActive ? labelTextColorActive : undefined, textColorGradient: labelTextGradient, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })), desc && (jsx(Text, { className: "dropdown__item-desc", size: descTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextSize), textColor: descTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextColor), textColorGradient: descTextGradient, textColorHover: descTextColorHover, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, children: desc }))] })), after] }) }) }), showDivider && (jsx(Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill || 'surfaceTertiary' }))] }));
 }
 
 export { Dropdown as D, DropdownItem as a, dropdownItemConfig as b, dropdownItemAppearance as d };

package/dist/{DropdownItem-NllzSt5M.js → DropdownItem-Qg-_2YWD.js}

@@ -10,7 +10,7 @@ var Link = require('./Link-BnqN6ysn.js');
 var Text = require('./Text-C49zj3jO.js');
 
 function Dropdown(props) {
-    var children = props.children, isOpen = props.isOpen, after = props.after, _a = props.animationClose, animationClose = _a === void 0 ? 'dropdown_animation_close' : _a, _b = props.animationOpen, animationOpen = _b === void 0 ? 'dropdown_animation_open' : _b, before = props.before, className = props.className, _c = props.set, set = _c === void 0 ? 'normal' : _c, setIsOpen = props.setIsOpen;
+    var className = props.className, _a = props.animationClose, animationClose = _a === void 0 ? 'dropdown_animation_close' : _a, _b = props.animationOpen, animationOpen = _b === void 0 ? 'dropdown_animation_open' : _b, before = props.before, after = props.after, isOpen = props.isOpen, _c = props.set, set = _c === void 0 ? 'normal' : _c, setIsOpen = props.setIsOpen, children = props.children;
     var dropdownRef = React.useRef(null);
     // const [isOpen, setIsOpen] = useState(false)
     var _d = React.useState({
@@ -30,7 +30,7 @@ function Dropdown(props) {
                 className: isOpen ? animationOpen : animationClose,
             }); });
         }
-    }, [isOpen]);
+    }, [isOpen, animationOpen, animationClose]);
     // Close dropdown by click outside
     React.useEffect(function () {
         // Add a handler to keep track of the click target.
@@ -57,7 +57,7 @@ function Dropdown(props) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
-    var alignmentClass = propsGenerator.alignmentClass, elevationClass = propsGenerator.elevationClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, shapeClass = propsGenerator.shapeClass;
+    var alignmentClass = propsGenerator.alignmentClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, elevationClass = propsGenerator.elevationClass, shapeClass = propsGenerator.shapeClass;
     // @ts-expect-error
     var styles = useStyles.useStyles(props).styles;
     return (jsxRuntime.jsxs("div", { className: clsx(className, 'dropdown', alignmentClass && "alignment_".concat(alignmentClass), set && "dropdown_set_".concat(set), shapeClass && "dropdown_shape_".concat(shapeClass), elevationClass && "elevation_".concat(elevationClass), isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className), ref: dropdownRef, style: styles, children: [before, children && (jsxRuntime.jsx("div", { className: clsx('dropdown__wrapper', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), 
@@ -76,7 +76,7 @@ var dropdownItemConfig = {
     },
 };
 function DropdownItem(props) {
-    var className = props.className, appearance = props.appearance, children = props.children, label = props.label, labelTextAlign = props.labelTextAlign, labelTextColor = props.labelTextColor, labelTextColorActive = props.labelTextColorActive, labelTextColorHover = props.labelTextColorHover, labelTextGradient = props.labelTextGradient, labelTextSize = props.labelTextSize, labelTextStyle = props.labelTextStyle, labelTextWeight = props.labelTextWeight, labelTextWrap = props.labelTextWrap, desc = props.desc, descTextColor = props.descTextColor, descTextColorHover = props.descTextColorHover, descTextGradient = props.descTextGradient, descTextSize = props.descTextSize, descTextStyle = props.descTextStyle, descTextWeight = props.descTextWeight, descTextWrap = props.descTextWrap, dividerDirection = props.dividerDirection, dividerFill = props.dividerFill, dividerSize = props.dividerSize, href = props.href, link = props.link, linkFill = props.linkFill, rel = props.rel, showDivider = props.showDivider, target = props.target, underline = props.underline, before = props.before, after = props.after, isActive = props.isActive, isHover = props.isHover, set = props.set, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
+    var className = props.className, appearance = props.appearance, label = props.label, labelTextAlign = props.labelTextAlign, labelTextColor = props.labelTextColor, labelTextColorActive = props.labelTextColorActive, labelTextColorHover = props.labelTextColorHover, labelTextGradient = props.labelTextGradient, labelTextSize = props.labelTextSize, labelTextStyle = props.labelTextStyle, labelTextWeight = props.labelTextWeight, labelTextWrap = props.labelTextWrap, desc = props.desc, descTextColor = props.descTextColor, descTextColorHover = props.descTextColorHover, descTextGradient = props.descTextGradient, descTextSize = props.descTextSize, descTextStyle = props.descTextStyle, descTextWeight = props.descTextWeight, descTextWrap = props.descTextWrap, dividerDirection = props.dividerDirection, dividerFill = props.dividerFill, dividerSize = props.dividerSize, href = props.href, link = props.link, linkFill = props.linkFill, rel = props.rel, showDivider = props.showDivider, target = props.target, underline = props.underline, before = props.before, after = props.after, isActive = props.isActive, isHover = props.isHover, set = props.set, onClick = props.onClick, onMouseEnter = props.onMouseEnter, children = props.children;
     // prettier-ignore
     var appearanceConfig = (dropdownItemConfig.appearance && dropdownItemConfig.appearance[appearance]);
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
@@ -84,7 +84,7 @@ function DropdownItem(props) {
     // @ts-expect-error
     var dropdownItem = useStyles.useStyles(props).styles;
     return (jsxRuntime.jsxs("div", { className: clsx('dropdown__item', isActive && 'dropdown__item_state_active', isHover && 'dropdown__item_state_hover', directionClass && "dropdown__item_direction_".concat(directionClass), className, fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), fillActiveClass && "fill_active_".concat(fillActiveClass), fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), sizeClass && "dropdown__item_size_".concat(sizeClass), shapeClass && "dropdown__item_shape_".concat(shapeClass), typeClass && "dropdown__item_type_".concat(typeClass), widthClass && "dropdown__item_width_".concat(widthClass), onClick && 'cursor_type_pointer', set && "dropdown__item_set_".concat(set), justifyContentClass &&
-            "dropdown__item_justify-content_".concat(justifyContentClass)), style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [jsxRuntime.jsx("div", { className: "dropdown__item-wrapper", children: jsxRuntime.jsx(Link.Link, { className: clsx('dropdown__item-link', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass)), fill: linkFill, href: link || href, rel: rel, target: target, underline: underline, children: jsxRuntime.jsxs(React.Fragment, { children: [before, children || (jsxRuntime.jsxs(React.Fragment, { children: [label && (jsxRuntime.jsx(Text.Text, { className: "dropdown__item-label", textAlign: labelTextAlign, textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textColorActive: isActive ? labelTextColorActive : undefined, textColorGradient: labelTextGradient, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "dropdown__item-desc", textColor: descTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextColor), textColorGradient: descTextGradient, textColorHover: descTextColorHover, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, size: descTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextSize), children: desc }))] })), after] }) }) }), showDivider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", direction: dividerDirection, fill: dividerFill || 'surfaceTertiary', size: dividerSize }))] }));
+            "dropdown__item_justify-content_".concat(justifyContentClass)), style: dropdownItem, onClick: onClick, onMouseEnter: onMouseEnter, children: [jsxRuntime.jsx("div", { className: "dropdown__item-wrapper", children: jsxRuntime.jsx(Link.Link, { className: clsx('dropdown__item-link', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass)), fill: linkFill, href: link || href, rel: rel, target: target, underline: underline, children: jsxRuntime.jsxs(React.Fragment, { children: [before, children || (jsxRuntime.jsxs(React.Fragment, { children: [label && (jsxRuntime.jsx(Text.Text, { className: "dropdown__item-label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textAlign: labelTextAlign, textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textColorActive: isActive ? labelTextColorActive : undefined, textColorGradient: labelTextGradient, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "dropdown__item-desc", size: descTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextSize), textColor: descTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextColor), textColorGradient: descTextGradient, textColorHover: descTextColorHover, textStyle: descTextStyle, textWeight: descTextWeight, textWrap: descTextWrap, children: desc }))] })), after] }) }) }), showDivider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill || 'surfaceTertiary' }))] }));
 }
 
 exports.Dropdown = Dropdown;

package/dist/cjs/components/Accordion.js

@@ -38,7 +38,7 @@ var accordionItemConfig = {
     },
 };
 function AccordionItem(props) {
-    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 id = props.id, className = props.className, appearance = props.appearance, size = props.size, 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, isExpanded = props.isExpanded, onClick = props.onClick, children = props.children;
     var onClickTitle = React.useCallback(function () {
         // "!isExpanded" - is next state of expanded
         var thisItemData = {
@@ -50,15 +50,14 @@ function AccordionItem(props) {
         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 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;
+    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, titleBorderColorClass = propsGenerator.titleBorderColorClass, titleFillClass = propsGenerator.titleFillClass, titleFillHoverClass = propsGenerator.titleFillHoverClass, borderColorClass = propsGenerator.borderColorClass, 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'), 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 &&
+    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, { size: "16", iconFill: iconFill, SvgImage: _default.icon16.ChevronDown })) }), beforeContent && beforeContent, showDivider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill || 'surfaceTertiary' })), 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] }));
+                    (content && (jsxRuntime.jsx(Text.Text, { size: contentTextSize, textColor: contentTextColor, textWeight: contentTextWeight, children: content }))) })), afterContent && afterContent] }));
 }
 
 var accordionConfig = {
@@ -68,7 +67,7 @@ var accordionConfig = {
     },
 };
 function Accordion(props) {
-    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 className = props.className, appearance = props.appearance, _a = props.initial, initial = _a === void 0 ? [] : _a, items = props.items, isMultiple = props.isMultiple, onClickItem = props.onClickItem, children = props.children;
     var _b = React.useState(function () { return castArray(initial); }), expandedItems = _b[0], setExpandedItems = _b[1];
     var onClickAccordionItem = React.useCallback(function (targetItem) {
         setExpandedItems(function (prevState) {

package/dist/cjs/components/Avatar.js

@@ -34,7 +34,7 @@ var avatarConfig = {
     },
 };
 function Avatar(props) {
-    var className = props.className, type = props.type, appearance = props.appearance, _a = props.size, size = _a === void 0 ? '96' : _a, Dot = props.Dot, _b = props.firstName, firstName = _b === void 0 ? '' : _b, icon = props.icon, mode = props.mode, _c = props.secondName, secondName = _c === void 0 ? '' : _c, src = props.src, before = props.before, after = props.after, onClick = props.onClick;
+    var className = props.className, type = props.type, appearance = props.appearance, _a = props.size, size = _a === void 0 ? '96' : _a, src = props.src, Dot = props.Dot, _b = props.firstName, firstName = _b === void 0 ? '' : _b, icon = props.icon, mode = props.mode, _c = props.secondName, secondName = _c === void 0 ? '' : _c, before = props.before, after = props.after, onClick = props.onClick;
     var avatarChars = React.useMemo(function () {
         var firstChar = ((firstName === null || firstName === void 0 ? void 0 : firstName[0]) || '').toUpperCase();
         var secondChar = ((secondName === null || secondName === void 0 ? void 0 : secondName[0]) || '').toUpperCase();
@@ -46,7 +46,7 @@ function Avatar(props) {
     }, {});
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, _d = propsGenerator.textColor, textColor = _d === void 0 ? 'surfaceTextTertiary' : _d, _e = propsGenerator.textSize, textSize = _e === void 0 ? 'l' : _e, _f = propsGenerator.textWeight, textWeight = _f === void 0 ? '600' : _f, iconFill = propsGenerator.iconFill, iconFillHover = propsGenerator.iconFillHover, iconFillSize = propsGenerator.iconFillSize, iconItemFill = propsGenerator.iconItemFill, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, iconSrc = propsGenerator.iconSrc, shapeClass = propsGenerator.shapeClass;
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'avatar', shapeClass && "avatar_shape_".concat(shapeClass), mode && "avatar_mode_".concat(mode), size && "avatar_size_".concat(size), type && "avatar_type_".concat(type), Dot && 'avatar_status', onClick && 'cursor_type_pointer'), onClick: onClick, children: jsxRuntime.jsxs("div", { className: clsx('avatar__wrapper', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), children: [before, src ? (jsxRuntime.jsx(Image.Image, { className: "avatar__image", shape: "geometric", src: src })) : (jsxRuntime.jsx(Text.Text, { className: "avatar__name", size: textSize, textColor: textColor, textWeight: textWeight, children: avatarChars })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "avatar__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), Dot, after] }) }));
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'avatar', shapeClass && "avatar_shape_".concat(shapeClass), mode && "avatar_mode_".concat(mode), size && "avatar_size_".concat(size), type && "avatar_type_".concat(type), Dot && 'avatar_status', onClick && 'cursor_type_pointer'), onClick: onClick, children: jsxRuntime.jsxs("div", { className: clsx('avatar__wrapper', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), children: [before, src ? (jsxRuntime.jsx(Image.Image, { className: "avatar__image", src: src, shape: "geometric" })) : (jsxRuntime.jsx(Text.Text, { className: "avatar__name", size: textSize, textColor: textColor, textWeight: textWeight, children: avatarChars })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "avatar__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), Dot, after] }) }));
 }
 
 exports.Avatar = Avatar;

package/dist/cjs/components/Chips.js

@@ -113,14 +113,14 @@ function Chips(props) {
         return appearanceProps;
     }, [appearance, isDisabled]);
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextActiveColor = propsGenerator.labelTextActiveColor, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, cursorClass = propsGenerator.cursorClass, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass;
-    console.log(isDisabled);
-    console.log(fillClass);
+    var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextActiveColor = propsGenerator.labelTextActiveColor, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, cursorClass = propsGenerator.cursorClass, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass;
     // @ts-expect-error
     var chipsStyles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'chips', isActive && 'chips_state_active', isActive
-            ? fillActiveClass && "fill_active_".concat(fillActiveClass)
-            : fillClass && "fill_".concat(fillClass), fillHoverClass && !isDisabled && "fill_hover_".concat(fillHoverClass), shapeClass && "chips_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), sizeClass && "chips_size_".concat(sizeClass), alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass), isDisabled && "chips_state_disabled", cursorClass && "cursor_".concat(cursorClass), onClick && 'cursor_type_pointer'), "data-testid": dataTestId && "".concat(dataTestId, "Button"), "data-tour": dataTour, style: chipsStyles, onClick: !isDisabled ? onClick : undefined, children: jsxRuntime.jsxs("div", { className: "chips__inner", children: [(iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "chips__icon_before", size: iconBeforeSize, fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), typeof label === 'string' ? (jsxRuntime.jsx(Text.Text, { className: "chips__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })) : (jsxRuntime.jsx("div", { className: "chips__label", children: label })), children, (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "chips__icon_after", size: iconAfterSize, fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] }) }));
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'chips', isActive && 'chips_state_active', fillClass && !isActive
+            ? "fill_".concat(fillClass)
+            : "fill_active_".concat(fillActiveClass), fillHoverClass && !isDisabled && !isActive
+            ? "fill_hover_".concat(fillHoverClass)
+            : "fill_active_hover_".concat(fillActiveHoverClass), shapeClass && "chips_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), sizeClass && "chips_size_".concat(sizeClass), alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass), isDisabled && "chips_state_disabled", cursorClass && "cursor_".concat(cursorClass), onClick && 'cursor_type_pointer'), "data-testid": dataTestId && "".concat(dataTestId, "Button"), "data-tour": dataTour, style: chipsStyles, onClick: !isDisabled ? onClick : undefined, children: jsxRuntime.jsxs("div", { className: "chips__inner", children: [(iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "chips__icon_before", size: iconBeforeSize, fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), typeof label === 'string' ? (jsxRuntime.jsx(Text.Text, { className: "chips__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })) : (jsxRuntime.jsx("div", { className: "chips__label", children: label })), children, (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "chips__icon_after", size: iconAfterSize, fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] }) }));
 }
 
 exports.Chips = Chips;

package/dist/cjs/components/Choice.js

@@ -3,22 +3,22 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
+var useStyles = require('../hooks/useStyles/useStyles.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var Icon = require('../../Icon-BcBOnVKH.js');
 var Loader = require('../../Loader-DdKHrLnw.js');
 var Text = require('../../Text-C49zj3jO.js');
-require('../../tslib.es6-CCZ3TN_7.js');
 require('lodash/camelCase');
-require('lodash/castArray');
+require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../context/UIContext.js');
+require('../../tslib.es6-CCZ3TN_7.js');
 require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
 require('../utils/setViewportProperty.js');
-require('react-inlinesvg');
-require('../hooks/useStyles/useStyles.js');
-require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
+require('lodash/castArray');
+require('react-inlinesvg');
 require('../../Link-BnqN6ysn.js');
 require('../../Tooltip-DRta8lK_.js');
 require('../../Title-BLGDdlnX.js');
@@ -54,7 +54,7 @@ var choiceConfig = {
     },
 };
 function Choice(props) {
-    var className = props.className, type = props.type, name = props.name, appearance = props.appearance, _a = props.size, size = _a === void 0 ? 'normal' : _a, labelTextActiveColor = props.labelTextActiveColor, labelTextColor = props.labelTextColor, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, iconFillDisabled = props.iconFillDisabled, labelTextActiveColorDisabled = props.labelTextActiveColorDisabled, labelTextColorDisabled = props.labelTextColorDisabled, _b = props.active, active = _b === void 0 ? { value: undefined } : _b, activeIcon = props.activeIcon, activeIconItemFill = props.activeIconItemFill, icon = props.icon, iconItemFill = props.iconItemFill, iconSize = props.iconSize, _c = props.options, options = _c === void 0 ? [] : _c, before = props.before, after = props.after, _d = props.isCheckbox, isCheckbox = _d === void 0 ? false : _d, _e = props.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = props.isLoading, isLoading = _f === void 0 ? false : _f, set = props.set, setActiveSegment = props.setActiveSegment;
+    var id = props.id, className = props.className, type = props.type, name = props.name, appearance = props.appearance, _a = props.size, size = _a === void 0 ? 'normal' : _a, labelTextActiveColor = props.labelTextActiveColor, labelTextColor = props.labelTextColor, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, iconFillDisabled = props.iconFillDisabled, labelTextActiveColorDisabled = props.labelTextActiveColorDisabled, labelTextColorDisabled = props.labelTextColorDisabled, _b = props.active, active = _b === void 0 ? { value: undefined } : _b, activeIcon = props.activeIcon, activeIconItemFill = props.activeIconItemFill, dataTestId = props.dataTestId, dataTour = props.dataTour, icon = props.icon, iconItemFill = props.iconItemFill, iconSize = props.iconSize, _c = props.options, options = _c === void 0 ? [] : _c, before = props.before, after = props.after, _d = props.isCheckbox, isCheckbox = _d === void 0 ? false : _d, _e = props.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = props.isLoading, isLoading = _f === void 0 ? false : _f, set = props.set, setActiveSegment = props.setActiveSegment;
     var controlRef = React.useRef(null);
     var optionsRefs = React.useMemo(function () {
         return new Map(options.map(function (item) { return [item.value, React.createRef()]; }));
@@ -65,8 +65,10 @@ function Choice(props) {
     }, [isCheckbox, setActiveSegment]);
     var appearanceConfig = choiceConfig.appearance && choiceConfig.appearance[appearance];
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var fillActiveClass = propsGenerator.fillActiveClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, fillActiveDisabledClass = propsGenerator.fillActiveDisabledClass, fillDisabledClass = propsGenerator.fillDisabledClass, columnGapClass = propsGenerator.columnGapClass, gapClass = propsGenerator.gapClass, rowGapClass = propsGenerator.rowGapClass, shapeClass = propsGenerator.shapeClass, wrapClass = propsGenerator.wrapClass;
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'choice', shapeClass && "choice_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), set && "choice_set_".concat(set), size && "choice_size_".concat(size), type && "choice_type_".concat(type)), ref: controlRef, children: isLoading ? (jsxRuntime.jsx(Loader.Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent", set: "simple" })) : (jsxRuntime.jsx("div", { className: clsx(className, 'choice__wrapper', gapClass && "gap_".concat(gapClass), rowGapClass && "row-gap_".concat(rowGapClass), columnGapClass && "column-gap_".concat(columnGapClass), wrapClass && "choice_wrap_".concat(wrapClass)), children: options.map(function (item) {
+    var fillActiveClass = propsGenerator.fillActiveClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, fillActiveDisabledClass = propsGenerator.fillActiveDisabledClass, fillDisabledClass = propsGenerator.fillDisabledClass, shapeClass = propsGenerator.shapeClass, wrapClass = propsGenerator.wrapClass;
+    // @ts-expect-error
+    var styles = useStyles.useStyles(props).styles;
+    return (jsxRuntime.jsx("div", { id: id, className: clsx(className, 'choice', shapeClass && "choice_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), set && "choice_set_".concat(set), size && "choice_size_".concat(size), type && "choice_type_".concat(type), wrapClass && "choice_wrap_".concat(wrapClass)), "data-testid": dataTestId && "".concat(dataTestId, "Button"), "data-tour": dataTour, ref: controlRef, style: styles, children: isLoading ? (jsxRuntime.jsx(Loader.Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent", set: "simple" })) : (jsxRuntime.jsx(React.Fragment, { children: options.map(function (item) {
                 // prettier-ignore
                 var isActive = typeof active === 'object'
                     ? String(item.value) === String(active.value)

package/dist/cjs/components/Dot.js

@@ -17,9 +17,9 @@ require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
 
 function Dot(props) {
-    var children = props.children, className = props.className;
+    var className = props.className, children = props.children;
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
-    var borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, fillClass = propsGenerator.fillClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass;
+    var fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass;
     // @ts-expect-error
     var styles = useStyles.useStyles(props).styles;
     return (jsxRuntime.jsx("div", { className: clsx(className, 'dot', borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), fillClass && "fill_".concat(fillClass), shapeClass && "dot_shape_".concat(shapeClass), sizeClass && "dot_size_".concat(sizeClass)), style: styles, children: children }));

package/dist/cjs/components/Dropdown.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var DropdownItem = require('../../DropdownItem-NllzSt5M.js');
+var DropdownItem = require('../../DropdownItem-Qg-_2YWD.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');

package/dist/cjs/components/Pagination.js

@@ -6,7 +6,7 @@ var clsx = require('clsx');
 var ceil = require('lodash/ceil');
 var ReactPaginate = require('react-paginate');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var DropdownItem = require('../../DropdownItem-NllzSt5M.js');
+var DropdownItem = require('../../DropdownItem-Qg-_2YWD.js');
 var Icon = require('../../Icon-BcBOnVKH.js');
 var Text = require('../../Text-C49zj3jO.js');
 require('../../tslib.es6-CCZ3TN_7.js');

package/dist/components/Accordion.js

@@ -36,7 +36,7 @@ var accordionItemConfig = {
     },
 };
 function AccordionItem(props) {
-    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 id = props.id, className = props.className, appearance = props.appearance, size = props.size, 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, isExpanded = props.isExpanded, onClick = props.onClick, children = props.children;
     var onClickTitle = useCallback(function () {
         // "!isExpanded" - is next state of expanded
         var thisItemData = {
@@ -48,15 +48,14 @@ function AccordionItem(props) {
         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 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;
+    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, titleBorderColorClass = propsGenerator.titleBorderColorClass, titleFillClass = propsGenerator.titleFillClass, titleFillHoverClass = propsGenerator.titleFillHoverClass, borderColorClass = propsGenerator.borderColorClass, 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'), 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 &&
+    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, { size: "16", iconFill: iconFill, SvgImage: icon16.ChevronDown })) }), beforeContent && beforeContent, showDivider && (jsx(Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill || 'surfaceTertiary' })), 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] }));
+                    (content && (jsx(Text, { size: contentTextSize, textColor: contentTextColor, textWeight: contentTextWeight, children: content }))) })), afterContent && afterContent] }));
 }
 
 var accordionConfig = {
@@ -66,7 +65,7 @@ var accordionConfig = {
     },
 };
 function Accordion(props) {
-    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 className = props.className, appearance = props.appearance, _a = props.initial, initial = _a === void 0 ? [] : _a, items = props.items, isMultiple = props.isMultiple, onClickItem = props.onClickItem, children = props.children;
     var _b = useState(function () { return castArray(initial); }), expandedItems = _b[0], setExpandedItems = _b[1];
     var onClickAccordionItem = useCallback(function (targetItem) {
         setExpandedItems(function (prevState) {

package/dist/components/Avatar.js

@@ -32,7 +32,7 @@ var avatarConfig = {
     },
 };
 function Avatar(props) {
-    var className = props.className, type = props.type, appearance = props.appearance, _a = props.size, size = _a === void 0 ? '96' : _a, Dot = props.Dot, _b = props.firstName, firstName = _b === void 0 ? '' : _b, icon = props.icon, mode = props.mode, _c = props.secondName, secondName = _c === void 0 ? '' : _c, src = props.src, before = props.before, after = props.after, onClick = props.onClick;
+    var className = props.className, type = props.type, appearance = props.appearance, _a = props.size, size = _a === void 0 ? '96' : _a, src = props.src, Dot = props.Dot, _b = props.firstName, firstName = _b === void 0 ? '' : _b, icon = props.icon, mode = props.mode, _c = props.secondName, secondName = _c === void 0 ? '' : _c, before = props.before, after = props.after, onClick = props.onClick;
     var avatarChars = useMemo(function () {
         var firstChar = ((firstName === null || firstName === void 0 ? void 0 : firstName[0]) || '').toUpperCase();
         var secondChar = ((secondName === null || secondName === void 0 ? void 0 : secondName[0]) || '').toUpperCase();
@@ -44,7 +44,7 @@ function Avatar(props) {
     }, {});
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, _d = propsGenerator.textColor, textColor = _d === void 0 ? 'surfaceTextTertiary' : _d, _e = propsGenerator.textSize, textSize = _e === void 0 ? 'l' : _e, _f = propsGenerator.textWeight, textWeight = _f === void 0 ? '600' : _f, iconFill = propsGenerator.iconFill, iconFillHover = propsGenerator.iconFillHover, iconFillSize = propsGenerator.iconFillSize, iconItemFill = propsGenerator.iconItemFill, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, iconSrc = propsGenerator.iconSrc, shapeClass = propsGenerator.shapeClass;
-    return (jsx("div", { className: clsx(className, 'avatar', shapeClass && "avatar_shape_".concat(shapeClass), mode && "avatar_mode_".concat(mode), size && "avatar_size_".concat(size), type && "avatar_type_".concat(type), Dot && 'avatar_status', onClick && 'cursor_type_pointer'), onClick: onClick, children: jsxs("div", { className: clsx('avatar__wrapper', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), children: [before, src ? (jsx(Image, { className: "avatar__image", shape: "geometric", src: src })) : (jsx(Text, { className: "avatar__name", size: textSize, textColor: textColor, textWeight: textWeight, children: avatarChars })), (icon || iconSrc) && (jsx(Icon, { className: "avatar__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), Dot, after] }) }));
+    return (jsx("div", { className: clsx(className, 'avatar', shapeClass && "avatar_shape_".concat(shapeClass), mode && "avatar_mode_".concat(mode), size && "avatar_size_".concat(size), type && "avatar_type_".concat(type), Dot && 'avatar_status', onClick && 'cursor_type_pointer'), onClick: onClick, children: jsxs("div", { className: clsx('avatar__wrapper', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), children: [before, src ? (jsx(Image, { className: "avatar__image", src: src, shape: "geometric" })) : (jsx(Text, { className: "avatar__name", size: textSize, textColor: textColor, textWeight: textWeight, children: avatarChars })), (icon || iconSrc) && (jsx(Icon, { className: "avatar__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), Dot, after] }) }));
 }
 
 export { Avatar, avatarAppearance, avatarConfig };

package/dist/components/Chips.js

@@ -111,14 +111,14 @@ function Chips(props) {
         return appearanceProps;
     }, [appearance, isDisabled]);
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextActiveColor = propsGenerator.labelTextActiveColor, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, cursorClass = propsGenerator.cursorClass, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass;
-    console.log(isDisabled);
-    console.log(fillClass);
+    var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextActiveColor = propsGenerator.labelTextActiveColor, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, cursorClass = propsGenerator.cursorClass, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass;
     // @ts-expect-error
     var chipsStyles = useStyles(props).styles;
-    return (jsx("div", { className: clsx(className, 'chips', isActive && 'chips_state_active', isActive
-            ? fillActiveClass && "fill_active_".concat(fillActiveClass)
-            : fillClass && "fill_".concat(fillClass), fillHoverClass && !isDisabled && "fill_hover_".concat(fillHoverClass), shapeClass && "chips_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), sizeClass && "chips_size_".concat(sizeClass), alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass), isDisabled && "chips_state_disabled", cursorClass && "cursor_".concat(cursorClass), onClick && 'cursor_type_pointer'), "data-testid": dataTestId && "".concat(dataTestId, "Button"), "data-tour": dataTour, style: chipsStyles, onClick: !isDisabled ? onClick : undefined, children: jsxs("div", { className: "chips__inner", children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { className: "chips__icon_before", size: iconBeforeSize, fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), typeof label === 'string' ? (jsx(Text, { className: "chips__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })) : (jsx("div", { className: "chips__label", children: label })), children, (iconAfter || iconAfterSrc) && (jsx(Icon, { className: "chips__icon_after", size: iconAfterSize, fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] }) }));
+    return (jsx("div", { className: clsx(className, 'chips', isActive && 'chips_state_active', fillClass && !isActive
+            ? "fill_".concat(fillClass)
+            : "fill_active_".concat(fillActiveClass), fillHoverClass && !isDisabled && !isActive
+            ? "fill_hover_".concat(fillHoverClass)
+            : "fill_active_hover_".concat(fillActiveHoverClass), shapeClass && "chips_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), sizeClass && "chips_size_".concat(sizeClass), alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass), isDisabled && "chips_state_disabled", cursorClass && "cursor_".concat(cursorClass), onClick && 'cursor_type_pointer'), "data-testid": dataTestId && "".concat(dataTestId, "Button"), "data-tour": dataTour, style: chipsStyles, onClick: !isDisabled ? onClick : undefined, children: jsxs("div", { className: "chips__inner", children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { className: "chips__icon_before", size: iconBeforeSize, fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), typeof label === 'string' ? (jsx(Text, { className: "chips__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })) : (jsx("div", { className: "chips__label", children: label })), children, (iconAfter || iconAfterSrc) && (jsx(Icon, { className: "chips__icon_after", size: iconAfterSize, fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] }) }));
 }
 
 export { Chips, chipsAppearance, chipsConfig };

package/dist/components/Choice.js

@@ -1,22 +1,22 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useRef, useMemo, createRef, useCallback } from 'react';
+import React, { useRef, useMemo, createRef, useCallback } from 'react';
 import clsx from 'clsx';
+import { useStyles } from '../hooks/useStyles/useStyles.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { I as Icon } from '../Icon-OJ_3E3eM.js';
 import { L as Loader } from '../Loader-VK3q7PBN.js';
 import { T as Text } from '../Text-C6NSmetx.js';
-import '../tslib.es6-5FtW-kfi.js';
 import 'lodash/camelCase';
-import 'lodash/castArray';
+import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../context/UIContext.js';
+import '../tslib.es6-5FtW-kfi.js';
 import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
-import 'react-inlinesvg';
-import '../hooks/useStyles/useStyles.js';
-import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
+import 'lodash/castArray';
+import 'react-inlinesvg';
 import '../Link-DaKqf1pb.js';
 import '../Tooltip-5lQyt5-Y.js';
 import '../Title-Byi9vhDt.js';
@@ -52,7 +52,7 @@ var choiceConfig = {
     },
 };
 function Choice(props) {
-    var className = props.className, type = props.type, name = props.name, appearance = props.appearance, _a = props.size, size = _a === void 0 ? 'normal' : _a, labelTextActiveColor = props.labelTextActiveColor, labelTextColor = props.labelTextColor, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, iconFillDisabled = props.iconFillDisabled, labelTextActiveColorDisabled = props.labelTextActiveColorDisabled, labelTextColorDisabled = props.labelTextColorDisabled, _b = props.active, active = _b === void 0 ? { value: undefined } : _b, activeIcon = props.activeIcon, activeIconItemFill = props.activeIconItemFill, icon = props.icon, iconItemFill = props.iconItemFill, iconSize = props.iconSize, _c = props.options, options = _c === void 0 ? [] : _c, before = props.before, after = props.after, _d = props.isCheckbox, isCheckbox = _d === void 0 ? false : _d, _e = props.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = props.isLoading, isLoading = _f === void 0 ? false : _f, set = props.set, setActiveSegment = props.setActiveSegment;
+    var id = props.id, className = props.className, type = props.type, name = props.name, appearance = props.appearance, _a = props.size, size = _a === void 0 ? 'normal' : _a, labelTextActiveColor = props.labelTextActiveColor, labelTextColor = props.labelTextColor, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, iconFillDisabled = props.iconFillDisabled, labelTextActiveColorDisabled = props.labelTextActiveColorDisabled, labelTextColorDisabled = props.labelTextColorDisabled, _b = props.active, active = _b === void 0 ? { value: undefined } : _b, activeIcon = props.activeIcon, activeIconItemFill = props.activeIconItemFill, dataTestId = props.dataTestId, dataTour = props.dataTour, icon = props.icon, iconItemFill = props.iconItemFill, iconSize = props.iconSize, _c = props.options, options = _c === void 0 ? [] : _c, before = props.before, after = props.after, _d = props.isCheckbox, isCheckbox = _d === void 0 ? false : _d, _e = props.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = props.isLoading, isLoading = _f === void 0 ? false : _f, set = props.set, setActiveSegment = props.setActiveSegment;
     var controlRef = useRef(null);
     var optionsRefs = useMemo(function () {
         return new Map(options.map(function (item) { return [item.value, createRef()]; }));
@@ -63,8 +63,10 @@ function Choice(props) {
     }, [isCheckbox, setActiveSegment]);
     var appearanceConfig = choiceConfig.appearance && choiceConfig.appearance[appearance];
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var fillActiveClass = propsGenerator.fillActiveClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, fillActiveDisabledClass = propsGenerator.fillActiveDisabledClass, fillDisabledClass = propsGenerator.fillDisabledClass, columnGapClass = propsGenerator.columnGapClass, gapClass = propsGenerator.gapClass, rowGapClass = propsGenerator.rowGapClass, shapeClass = propsGenerator.shapeClass, wrapClass = propsGenerator.wrapClass;
-    return (jsx("div", { className: clsx(className, 'choice', shapeClass && "choice_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), set && "choice_set_".concat(set), size && "choice_size_".concat(size), type && "choice_type_".concat(type)), ref: controlRef, children: isLoading ? (jsx(Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent", set: "simple" })) : (jsx("div", { className: clsx(className, 'choice__wrapper', gapClass && "gap_".concat(gapClass), rowGapClass && "row-gap_".concat(rowGapClass), columnGapClass && "column-gap_".concat(columnGapClass), wrapClass && "choice_wrap_".concat(wrapClass)), children: options.map(function (item) {
+    var fillActiveClass = propsGenerator.fillActiveClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, fillActiveDisabledClass = propsGenerator.fillActiveDisabledClass, fillDisabledClass = propsGenerator.fillDisabledClass, shapeClass = propsGenerator.shapeClass, wrapClass = propsGenerator.wrapClass;
+    // @ts-expect-error
+    var styles = useStyles(props).styles;
+    return (jsx("div", { id: id, className: clsx(className, 'choice', shapeClass && "choice_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), set && "choice_set_".concat(set), size && "choice_size_".concat(size), type && "choice_type_".concat(type), wrapClass && "choice_wrap_".concat(wrapClass)), "data-testid": dataTestId && "".concat(dataTestId, "Button"), "data-tour": dataTour, ref: controlRef, style: styles, children: isLoading ? (jsx(Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent", set: "simple" })) : (jsx(React.Fragment, { children: options.map(function (item) {
                 // prettier-ignore
                 var isActive = typeof active === 'object'
                     ? String(item.value) === String(active.value)

package/dist/components/Dot.js

@@ -15,9 +15,9 @@ import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
 
 function Dot(props) {
-    var children = props.children, className = props.className;
+    var className = props.className, children = props.children;
     var propsGenerator = useDevicePropsGenerator(props);
-    var borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, fillClass = propsGenerator.fillClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass;
+    var fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass;
     // @ts-expect-error
     var styles = useStyles(props).styles;
     return (jsx("div", { className: clsx(className, 'dot', borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), fillClass && "fill_".concat(fillClass), shapeClass && "dot_shape_".concat(shapeClass), sizeClass && "dot_size_".concat(sizeClass)), style: styles, children: children }));

package/dist/components/Dropdown.js

@@ -1,4 +1,4 @@
-export { D as Dropdown, a as DropdownItem, d as dropdownItemAppearance, b as dropdownItemConfig } from '../DropdownItem-mr__S8vt.js';
+export { D as Dropdown, a as DropdownItem, d as dropdownItemAppearance, b as dropdownItemConfig } from '../DropdownItem-B3E-_Cwp.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

package/dist/components/Pagination.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import ceil from 'lodash/ceil';
 import ReactPaginate from 'react-paginate';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { D as Dropdown, a as DropdownItem } from '../DropdownItem-mr__S8vt.js';
+import { D as Dropdown, a as DropdownItem } from '../DropdownItem-B3E-_Cwp.js';
 import { I as Icon } from '../Icon-OJ_3E3eM.js';
 import { T as Text } from '../Text-C6NSmetx.js';
 import '../tslib.es6-5FtW-kfi.js';

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

@@ -71,14 +71,15 @@
     }
   }
 }
+/* stylelint-disable prettier/prettier */
 .avatar {
   &_size {
     @each $size in 14, 16, 20, 24, 32, 40, 48, 56, 60, 64, 72, 80, 96, 112, 144,
       240 {
       &_$(size) {
         ^^&__wrapper {
-          width: $(size) px;
-          height: $(size) px;
+          width: $(size)px;
+          height: $(size)px;
           display: flex;
           justify-content: center;
           align-items: center;

package/dist/css/mixins/mixin_fill-gradient.css

@@ -1,23 +1,47 @@
 @define-mixin fill-gradient_surface-primary-left {
-  background: linear-gradient(to left, hsla(0, 0%, 0%, 0) 0%, hsla(0,0%,0%,0.65) 100%);
+  background: linear-gradient(
+    to left,
+    hsl(0, 0%, 0%, 0) 0%,
+    hsl(0, 0%, 0%, 0.65) 100%
+  );
 }
 
 @define-mixin fill-gradient_surface-primary-top {
-  background: linear-gradient(to top, hsla(0, 0%, 0%, 0) 0%, hsla(0,0%,0%,0.65) 100%);
+  background: linear-gradient(
+    to top,
+    hsl(0, 0%, 0%, 0) 0%,
+    hsl(0, 0%, 0%, 0.65) 100%
+  );
 }
 
 @define-mixin fill-gradient_surface-primary-right {
-  background: linear-gradient(to left, hsla(0, 0%, 0%, 0.65) 0%, hsla(0, 0%, 0%, 0) 100%);
+  background: linear-gradient(
+    to left,
+    hsl(0, 0%, 0%, 0.65) 0%,
+    hsl(0, 0%, 0%, 0) 100%
+  );
 }
 
 @define-mixin fill-gradient_surface-primary-bottom {
-  background: linear-gradient(to top, hsla(0, 0%, 0%, 0.65) 0%, hsla(0, 0%, 0%, 0) 100%);
+  background: linear-gradient(
+    to top,
+    hsl(0, 0%, 0%, 0.65) 0%,
+    hsl(0, 0%, 0%, 0) 100%
+  );
 }
 
 @define-mixin fill-gradient_surface-primary-diagonal-left {
-  background: linear-gradient(to bottom, hsla(0, 0%, 0%, 0) 0%, hsla(0,0%,0%,0.65) 100%);
+  background: linear-gradient(
+    to bottom,
+    hsl(0, 0%, 0%, 0) 0%,
+    hsl(0, 0%, 0%, 0.65) 100%
+  );
 }
 
 @define-mixin fill-gradient_surface-primary-diagonal-right {
-  background: linear-gradient(to bottom, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0.65) 100%);
+  background: linear-gradient(
+    to bottom,
+    hsl(0, 0%, 0%, 0) 0%,
+    hsl(0, 0%, 0%, 0.65) 100%
+  );
 }