@itcase/ui 1.8.29 → 1.8.30

package/dist/{ChipsGroup_cjs_Cm_pVx8z.js → ChipsGroup_cjs_DN9BoTKe.js}

@@ -150,9 +150,7 @@ function Chips(props) {
             ? fillClass && "fill_".concat(fillClass)
             : fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive
             ? fillHoverClass && "fill_hover_".concat(fillHoverClass)
-            : fillActiveHoverClass && "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, "Chips"), "data-tour": dataTour, style: chipsStyles, onClick: !isDisabled ? onClick : undefined, children: jsxRuntime.jsxs("div", { className: "chips__inner", children: [(iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Tooltip.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: isActive && labelTextActiveColor, textColorHover: !isDisabled && !isActive
-                        ? labelTextHoverColor
-                        : labelTextActiveHoverColor, textWeight: labelTextWeight, textWrap: labelTextWrap, children: label })) : (jsxRuntime.jsx("div", { className: "chips__label", children: label })), children, (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Tooltip.Icon, { className: "chips__icon_after", size: iconAfterSize, fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), badgeValue && (jsxRuntime.jsx(Tooltip.Badge, { className: "chips__badge", appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue }))] }) }));
+            : fillActiveHoverClass && "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, "Chips"), "data-tour": dataTour, style: chipsStyles, onClick: !isDisabled ? onClick : undefined, children: jsxRuntime.jsxs("div", { className: "chips__inner", children: [(iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Tooltip.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, textColorActiveHover: labelTextActiveHoverColor, textColorHover: labelTextHoverColor, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: label })) : (jsxRuntime.jsx("div", { className: "chips__label", children: label })), children, (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Tooltip.Icon, { className: "chips__icon_after", size: iconAfterSize, fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter })), badgeValue && (jsxRuntime.jsx(Tooltip.Badge, { className: "chips__badge", appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue }))] }) }));
 }
 
 function ChipsGroup(props) {

package/dist/{ChipsGroup_es_CLpRB95W.js → ChipsGroup_es_D9aK8Roh.js}

@@ -148,9 +148,7 @@ function Chips(props) {
             ? fillClass && "fill_".concat(fillClass)
             : fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive
             ? fillHoverClass && "fill_hover_".concat(fillHoverClass)
-            : fillActiveHoverClass && "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, "Chips"), "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: isActive && labelTextActiveColor, textColorHover: !isDisabled && !isActive
-                        ? labelTextHoverColor
-                        : labelTextActiveHoverColor, 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 })), badgeValue && (jsx(Badge, { className: "chips__badge", appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue }))] }) }));
+            : fillActiveHoverClass && "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, "Chips"), "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, textColorActiveHover: labelTextActiveHoverColor, textColorHover: labelTextHoverColor, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, 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 })), badgeValue && (jsx(Badge, { className: "chips__badge", appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue }))] }) }));
 }
 
 function ChipsGroup(props) {

package/dist/{DatePicker_cjs_0y_2FcnF.js → DatePicker_cjs_B_OWDm9X.js}

@@ -72,9 +72,6 @@ var datePickerAppearanceSurface = {
         iconFillHover: 'surfaceSecondary',
         iconItemFill: 'surfaceItemPrimary',
         iconShape: 'circular',
-        iconItemFill: 'surfaceItemPrimary',
-        iconLeft: _default.icon14.ChevronLeft,
-        iconRight: _default.icon14.ChevronRight,
         monthTextColor: 'surfaceTextPrimary',
         monthTextWeight: 400,
         placeholderTextColor: 'surfaceTextPrimary',

package/dist/{DatePicker_es_bY1aXemt.js → DatePicker_es_BCbmUdl0.js}

@@ -70,9 +70,6 @@ var datePickerAppearanceSurface = {
         iconFillHover: 'surfaceSecondary',
         iconItemFill: 'surfaceItemPrimary',
         iconShape: 'circular',
-        iconItemFill: 'surfaceItemPrimary',
-        iconLeft: icon14.ChevronLeft,
-        iconRight: icon14.ChevronRight,
         monthTextColor: 'surfaceTextPrimary',
         monthTextWeight: 400,
         placeholderTextColor: 'surfaceTextPrimary',

package/dist/cjs/components/Accordion.js

@@ -7,8 +7,8 @@ var clsx = require('clsx');
 var castArray = require('lodash/castArray');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Divider = require('../../Divider_cjs_BmCJj3TN.js');
 var Tooltip = require('../../Tooltip_cjs_pBGCcXLZ.js');
+var Divider = require('../../Divider_cjs_BmCJj3TN.js');
 var Text = require('../../Text_cjs_C9fOm0nd.js');
 var _default = require('@itcase/icons/default');
 require('lodash/camelCase');
@@ -28,42 +28,49 @@ require('../../Link_cjs_DbRGq2Yk.js');
 var accordionAppearanceSize = {
     sizeXXL: {
         size: 'xxl',
-        titleTextSize: 'xxl',
+        titleTextSize: 'h3',
+        badgeAppearanceSize: 'sizeXS',
         contentTextSize: 'xxl',
         icon: _default.icon16.ChevronDown,
     },
     sizeXL: {
         size: 'xl',
-        titleTextSize: 'l',
+        titleTextSize: 'h3',
+        badgeAppearanceSize: 'sizeXS',
         contentTextSize: 'l',
         icon: _default.icon16.ChevronDown,
     },
     sizeL: {
         size: 'l',
-        titleTextSize: 'l',
+        titleTextSize: 'h4',
+        badgeAppearanceSize: 'sizeXS',
         icon: _default.icon16.ChevronDown,
     },
     sizeM: {
         size: 'm',
-        titleTextSize: 'm',
+        titleTextSize: 'h5',
+        badgeAppearanceSize: 'sizeXS',
         contentTextSize: 'm',
         icon: _default.icon16.ChevronDown,
     },
     sizeS: {
         size: 's',
-        titleTextSize: 's',
+        titleTextSize: 'h6',
+        badgeAppearanceSize: 'sizeXS',
         contentTextSize: 's',
         icon: _default.icon16.ChevronDown,
     },
     sizeXS: {
         size: 'xs',
-        titleTextSize: 'xs',
+        titleTextSize: 'h6',
+        badgeAppearanceSize: 'sizeXS',
         contentTextSize: 'xs',
         icon: _default.icon16.ChevronDown,
     },
     sizeXXS: {
         size: 'xxs',
-        titleTextSize: 'xs',
+        titleTextSize: 'h6',
+        badgeAppearanceSize: 'sizeXS',
         contentTextSize: 'xs',
         icon: _default.icon16.ChevronDown,
     },
@@ -89,24 +96,33 @@ var accordionAppearanceSurface = {
         fillHover: 'surfacePrimaryHover',
         titleTextColor: 'surfaceTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
+        badgeAppearance: 'accentPrimary solid',
+        badgeShape: 'circular',
         iconFillIcon: 'surfaceItemPrimary',
     },
     surfaceSecondary: {
         fill: 'surfaceSecondary',
         fillHover: 'surfaceSecondaryHover',
         labelTextColor: 'surfaceTextPrimary',
-        loaderFill: 'surfaceSecondary',
-        loaderItemFill: 'surfaceItemPrimary',
+        badgeAppearance: 'accentPrimary solid',
+        badgeShape: 'circular',
+        iconFillIcon: 'surfaceItemPrimary',
     },
     surfaceTertiary: {
         fill: 'surfaceTertiary',
         fillHover: 'surfaceTertiaryHover',
         labelTextColor: 'surfaceTextPrimary',
+        badgeAppearance: 'accentPrimary solid',
+        badgeShape: 'circular',
+        iconFillIcon: 'surfaceItemPrimary',
     },
     surfaceQuaternary: {
         fill: 'surfaceQuaternary',
         fillHover: 'surfaceQuaternaryHover',
         labelTextColor: 'surfaceTextPrimary',
+        badgeAppearance: 'accentPrimary solid',
+        badgeShape: 'circular',
+        iconFillIcon: 'surfaceItemPrimary',
     },
 };
 
@@ -135,10 +151,10 @@ function AccordionItem(props) {
         return (tslib_es6.__assign(tslib_es6.__assign({}, resultConfig), (_a = accordionItemConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
     }, {});
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, titleBorderColorClass = propsGenerator.titleBorderColorClass, titleFillClass = propsGenerator.titleFillClass, titleFillHoverClass = propsGenerator.titleFillHoverClass, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, titleTextWeight = propsGenerator.titleTextWeight, _a = propsGenerator.titleWidthClass, titleWidthClass = _a === void 0 ? 'fill' : _a, borderColorClass = propsGenerator.borderColorClass, contentTextColor = propsGenerator.contentTextColor, contentTextSize = propsGenerator.contentTextSize, contentTextWeight = propsGenerator.contentTextWeight, dividerDirection = propsGenerator.dividerDirection, dividerFill = propsGenerator.dividerFill, dividerSize = propsGenerator.dividerSize, icon = propsGenerator.icon, iconFill = propsGenerator.iconFill, iconFillIcon = propsGenerator.iconFillIcon, iconFillSize = propsGenerator.iconFillSize, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, iconSrc = propsGenerator.iconSrc, shapeClass = propsGenerator.shapeClass, showDivider = propsGenerator.showDivider, sizeClass = propsGenerator.sizeClass;
+    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, titleBorderColorClass = propsGenerator.titleBorderColorClass, titleFillClass = propsGenerator.titleFillClass, titleFillHoverClass = propsGenerator.titleFillHoverClass, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, titleTextWeight = propsGenerator.titleTextWeight, titleWidthClass = propsGenerator.titleWidthClass, borderColorClass = propsGenerator.borderColorClass, badgeAppearance = propsGenerator.badgeAppearance, badgeAppearanceSize = propsGenerator.badgeAppearanceSize, badgeShape = propsGenerator.badgeShape, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, badgeValue = propsGenerator.badgeValue, contentTextColor = propsGenerator.contentTextColor, contentTextSize = propsGenerator.contentTextSize, contentTextWeight = propsGenerator.contentTextWeight, dividerDirection = propsGenerator.dividerDirection, dividerFill = propsGenerator.dividerFill, dividerSize = propsGenerator.dividerSize, icon = propsGenerator.icon, iconFill = propsGenerator.iconFill, iconFillIcon = propsGenerator.iconFillIcon, iconFillSize = propsGenerator.iconFillSize, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, iconSrc = propsGenerator.iconSrc, shapeClass = propsGenerator.shapeClass, showDivider = propsGenerator.showDivider, sizeClass = propsGenerator.sizeClass, zeroGap = propsGenerator.zeroGap, zeroPadding = propsGenerator.zeroPadding;
     // @ts-expect-error
     var styles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsxs("div", { className: clsx('accordion-item', className, borderColorClass && "border-color_".concat(borderColorClass), shapeClass && "accordion-item_shape_".concat(shapeClass), sizeClass && "accordion-item_size_".concat(sizeClass), isExpanded && 'accordion-item_state_open'), style: styles, children: [jsxRuntime.jsxs("div", { className: clsx('accordion-item__header', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), children: [jsxRuntime.jsx(Text.Text, { className: clsx('accordion-item__title', titleBorderColorClass && "border-color_".concat(titleBorderColorClass), titleFillClass && "fill_".concat(titleFillClass), titleFillHoverClass && "fill_hover_".concat(titleFillHoverClass), titleWidthClass && "width_".concat(titleWidthClass), onClickTitle && 'cursor_type_pointer'), size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, onClick: onClickTitle, children: title }), (icon || iconSrc) && (jsxRuntime.jsx(Tooltip.Icon, { className: clsx('accordion-item__icon'), fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon, onClick: onClickTitle })), beforeContent, showDivider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill || 'surfaceTertiary' }))] }), isExpanded && (jsxRuntime.jsxs("div", { className: clsx('accordion-item__content'), children: [content && (jsxRuntime.jsx("div", { className: clsx('accordion-item__content-inner', fillClass && "fill_".concat(fillClass)), children: jsxRuntime.jsx(Text.Text, { size: contentTextSize, textColor: contentTextColor, textWeight: contentTextWeight, children: content }) })), children] })), afterContent] }));
+    return (jsxRuntime.jsxs("div", { className: clsx('accordion-item', className, zeroPadding && 'accordion-item_zero-padding', zeroGap && 'accordion-item_zero-gap', borderColorClass && "border-color_".concat(borderColorClass), shapeClass && "accordion-item_shape_".concat(shapeClass), sizeClass && "accordion-item_size_".concat(sizeClass), isExpanded && 'accordion-item_state_open'), style: styles, children: [jsxRuntime.jsxs("div", { className: clsx('accordion-item__header', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), children: [jsxRuntime.jsx(Text.Text, { className: clsx('accordion-item__title', titleBorderColorClass && "border-color_".concat(titleBorderColorClass), titleFillClass && "fill_".concat(titleFillClass), titleFillHoverClass && "fill_hover_".concat(titleFillHoverClass), titleWidthClass && "width_".concat(titleWidthClass), onClickTitle && 'cursor_type_pointer'), size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, onClick: onClickTitle, children: title }), jsxRuntime.jsxs("div", { className: "accordion-item__action", children: [badgeValue && (jsxRuntime.jsx(Tooltip.Badge, { className: "accordion-item__badge", appearance: "".concat(badgeAppearance, " ").concat(badgeAppearanceSize), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (jsxRuntime.jsx(Tooltip.Icon, { className: clsx('accordion-item__icon'), fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon, onClick: onClickTitle }))] }), showDivider && (jsxRuntime.jsx(Divider.Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill || 'surfaceTertiary' }))] }), beforeContent, isExpanded && (jsxRuntime.jsxs("div", { className: clsx('accordion-item__content'), children: [content && (jsxRuntime.jsx("div", { className: clsx('accordion-item__content-inner', fillClass && "fill_".concat(fillClass)), children: jsxRuntime.jsx(Text.Text, { size: contentTextSize, textColor: contentTextColor, textWeight: contentTextWeight, children: content }) })), children] })), afterContent] }));
 }
 
 function Accordion(props) {

package/dist/cjs/components/Chips.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var ChipsGroup = require('../../ChipsGroup_cjs_Cm_pVx8z.js');
+var ChipsGroup = require('../../ChipsGroup_cjs_DN9BoTKe.js');
 require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('react/jsx-runtime');
 require('react');

package/dist/cjs/components/DatePeriod.js

@@ -6,9 +6,9 @@ var React = require('react');
 var clsx = require('clsx');
 var luxon = require('luxon');
 var common = require('@itcase/common');
-var DatePicker = require('../../DatePicker_cjs_0y_2FcnF.js');
+var DatePicker = require('../../DatePicker_cjs_B_OWDm9X.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var ChipsGroup = require('../../ChipsGroup_cjs_Cm_pVx8z.js');
+var ChipsGroup = require('../../ChipsGroup_cjs_DN9BoTKe.js');
 require('date-fns/locale');
 require('react-datepicker');
 require('../hooks/useStyles/useStyles.js');
@@ -36,13 +36,15 @@ require('lodash/castArray');
 var datePeriodAppearanceSize = {
     sizeL: {
         size: 'm',
-        datePickerAppearance: 'sizeM',
+        chipsAppearanceSize: 'sizeL',
+        datePickerAppearanceSize: 'sizeM',
         datePickerInputSize: 'l',
         datePickerInputTextSize: 'm',
     },
     sizeM: {
         size: 'm',
-        datePickerAppearance: 'sizeM',
+        chipsAppearanceSize: 'sizeL',
+        datePickerAppearanceSize: 'sizeM',
         datePickerInputSize: 'm',
         datePickerInputTextSize: 'm',
     },
@@ -51,20 +53,18 @@ var datePeriodAppearanceSize = {
 var datePeriodAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
-        chipsAppearance: 'surfacePrimary sizeL ghost',
+        chipsAppearance: 'surfacePrimary ghost',
         chipsShape: 'rounded',
         datePickerAppearance: 'surfacePrimary',
         datePickerInputAppearance: 'defaultPrimary',
-        datePickerInputFillHover: 'surfaceHover',
         shape: 'rounded',
     },
     surfaceSecondary: {
         fill: 'surfaceSecondary',
-        chipsAppearance: 'surfacePrimary sizeL ghost',
+        chipsAppearance: 'surfacePrimary ghost',
         chipsShape: 'rounded',
         datePickerAppearance: 'surfacePrimary',
         datePickerInputAppearance: 'defaultPrimary',
-        datePickerInputFillHover: 'surfaceHover',
         shape: 'rounded',
     },
 };
@@ -84,7 +84,7 @@ function DatePeriod(props) {
         return (tslib_es6.__assign(tslib_es6.__assign({}, resultConfig), (_a = datePeriodConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
     }, {});
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var _b = propsGenerator, fillClass = _b.fillClass, chipsAppearance = _b.chipsAppearance, chipsShape = _b.chipsShape, datePickerAppearance = _b.datePickerAppearance, datePickerInputAppearance = _b.datePickerInputAppearance, datePickerInputFillHover = _b.datePickerInputFillHover, datePickerInputSize = _b.datePickerInputSize, datePickerInputTextSize = _b.datePickerInputTextSize, shapeClass = _b.shapeClass, sizeClass = _b.sizeClass;
+    var _b = propsGenerator, fillClass = _b.fillClass, chipsAppearance = _b.chipsAppearance, chipsAppearanceSize = _b.chipsAppearanceSize, chipsShape = _b.chipsShape, datePickerAppearance = _b.datePickerAppearance, datePickerAppearanceSize = _b.datePickerAppearanceSize, datePickerInputAppearance = _b.datePickerInputAppearance, datePickerInputFillHover = _b.datePickerInputFillHover, datePickerInputSize = _b.datePickerInputSize, datePickerInputTextSize = _b.datePickerInputTextSize, shapeClass = _b.shapeClass, sizeClass = _b.sizeClass;
     var onClickPeriodChips = React.useCallback(function (selectedPeriodItem) {
         var dateStartIso = selectedPeriodItem.dateIntervalsList[0];
         var dateEndIso = selectedPeriodItem.dateIntervalsList[1];
@@ -107,8 +107,8 @@ function DatePeriod(props) {
         return (dateStartIso === datePeriodValueStart &&
             dateEndIso === datePeriodValueEnd);
     }, [datePeriodValueEnd, datePeriodValueStart]);
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'date-period', shapeClass && "date-period_shape_".concat(shapeClass), sizeClass && "date-period_size_".concat(sizeClass), isSkeleton && "date-period_skeleton", fillClass && "fill_".concat(fillClass), 'cursor_type_pointer'), children: jsxRuntime.jsxs(ChipsGroup.ChipsGroup, { direction: "horizontal", children: [datePeriodIntervalsList.map(function (datePeriodItem) { return (jsxRuntime.jsx(ChipsGroup.Chips, { appearance: chipsAppearance, label: datePeriodItem.label, shape: chipsShape, isActive: checkIsChipsActive(datePeriodItem), onClick: function () { return onClickPeriodChips(datePeriodItem); } }, datePeriodItem.value)); }), jsxRuntime.jsx(DatePicker.DatePickerInput, { datePickerProps: {
-                        appearance: datePickerAppearance,
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'date-period', shapeClass && "date-period_shape_".concat(shapeClass), sizeClass && "date-period_size_".concat(sizeClass), isSkeleton && "date-period_skeleton", fillClass && "fill_".concat(fillClass), 'cursor_type_pointer'), children: jsxRuntime.jsxs(ChipsGroup.ChipsGroup, { direction: "horizontal", children: [datePeriodIntervalsList.map(function (datePeriodItem) { return (jsxRuntime.jsx(ChipsGroup.Chips, { appearance: "".concat(chipsAppearance, " ").concat(chipsAppearanceSize), label: datePeriodItem.label, shape: chipsShape, isActive: checkIsChipsActive(datePeriodItem), onClick: function () { return onClickPeriodChips(datePeriodItem); } }, datePeriodItem.value)); }), jsxRuntime.jsx(DatePicker.DatePickerInput, { datePickerProps: {
+                        appearance: "".concat(datePickerAppearance, " ").concat(datePickerAppearanceSize),
                         dateFormat: 'dd/MM/yyyy',
                         selectsRange: true,
                         showWeekNumbers: true,

package/dist/cjs/components/DatePicker.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var DatePicker = require('../../DatePicker_cjs_0y_2FcnF.js');
+var DatePicker = require('../../DatePicker_cjs_B_OWDm9X.js');
 require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('react/jsx-runtime');
 require('react');

package/dist/components/Accordion.js

@@ -5,8 +5,8 @@ import clsx from 'clsx';
 import castArray from 'lodash/castArray';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
+import { B as Badge, I as Icon } from '../Tooltip_es_frBCZDrO.js';
 import { D as Divider } from '../Divider_es_kY-30pft.js';
-import { I as Icon } from '../Tooltip_es_frBCZDrO.js';
 import { T as Text } from '../Text_es_BfLRfj-5.js';
 import { icon16 } from '@itcase/icons/default';
 import 'lodash/camelCase';
@@ -26,42 +26,49 @@ import '../Link_es_DxtZLeKY.js';
 var accordionAppearanceSize = {
     sizeXXL: {
         size: 'xxl',
-        titleTextSize: 'xxl',
+        titleTextSize: 'h3',
+        badgeAppearanceSize: 'sizeXS',
         contentTextSize: 'xxl',
         icon: icon16.ChevronDown,
     },
     sizeXL: {
         size: 'xl',
-        titleTextSize: 'l',
+        titleTextSize: 'h3',
+        badgeAppearanceSize: 'sizeXS',
         contentTextSize: 'l',
         icon: icon16.ChevronDown,
     },
     sizeL: {
         size: 'l',
-        titleTextSize: 'l',
+        titleTextSize: 'h4',
+        badgeAppearanceSize: 'sizeXS',
         icon: icon16.ChevronDown,
     },
     sizeM: {
         size: 'm',
-        titleTextSize: 'm',
+        titleTextSize: 'h5',
+        badgeAppearanceSize: 'sizeXS',
         contentTextSize: 'm',
         icon: icon16.ChevronDown,
     },
     sizeS: {
         size: 's',
-        titleTextSize: 's',
+        titleTextSize: 'h6',
+        badgeAppearanceSize: 'sizeXS',
         contentTextSize: 's',
         icon: icon16.ChevronDown,
     },
     sizeXS: {
         size: 'xs',
-        titleTextSize: 'xs',
+        titleTextSize: 'h6',
+        badgeAppearanceSize: 'sizeXS',
         contentTextSize: 'xs',
         icon: icon16.ChevronDown,
     },
     sizeXXS: {
         size: 'xxs',
-        titleTextSize: 'xs',
+        titleTextSize: 'h6',
+        badgeAppearanceSize: 'sizeXS',
         contentTextSize: 'xs',
         icon: icon16.ChevronDown,
     },
@@ -87,24 +94,33 @@ var accordionAppearanceSurface = {
         fillHover: 'surfacePrimaryHover',
         titleTextColor: 'surfaceTextPrimary',
         labelTextColor: 'surfaceTextPrimary',
+        badgeAppearance: 'accentPrimary solid',
+        badgeShape: 'circular',
         iconFillIcon: 'surfaceItemPrimary',
     },
     surfaceSecondary: {
         fill: 'surfaceSecondary',
         fillHover: 'surfaceSecondaryHover',
         labelTextColor: 'surfaceTextPrimary',
-        loaderFill: 'surfaceSecondary',
-        loaderItemFill: 'surfaceItemPrimary',
+        badgeAppearance: 'accentPrimary solid',
+        badgeShape: 'circular',
+        iconFillIcon: 'surfaceItemPrimary',
     },
     surfaceTertiary: {
         fill: 'surfaceTertiary',
         fillHover: 'surfaceTertiaryHover',
         labelTextColor: 'surfaceTextPrimary',
+        badgeAppearance: 'accentPrimary solid',
+        badgeShape: 'circular',
+        iconFillIcon: 'surfaceItemPrimary',
     },
     surfaceQuaternary: {
         fill: 'surfaceQuaternary',
         fillHover: 'surfaceQuaternaryHover',
         labelTextColor: 'surfaceTextPrimary',
+        badgeAppearance: 'accentPrimary solid',
+        badgeShape: 'circular',
+        iconFillIcon: 'surfaceItemPrimary',
     },
 };
 
@@ -133,10 +149,10 @@ function AccordionItem(props) {
         return (__assign(__assign({}, resultConfig), (_a = accordionItemConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
     }, {});
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, titleBorderColorClass = propsGenerator.titleBorderColorClass, titleFillClass = propsGenerator.titleFillClass, titleFillHoverClass = propsGenerator.titleFillHoverClass, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, titleTextWeight = propsGenerator.titleTextWeight, _a = propsGenerator.titleWidthClass, titleWidthClass = _a === void 0 ? 'fill' : _a, borderColorClass = propsGenerator.borderColorClass, contentTextColor = propsGenerator.contentTextColor, contentTextSize = propsGenerator.contentTextSize, contentTextWeight = propsGenerator.contentTextWeight, dividerDirection = propsGenerator.dividerDirection, dividerFill = propsGenerator.dividerFill, dividerSize = propsGenerator.dividerSize, icon = propsGenerator.icon, iconFill = propsGenerator.iconFill, iconFillIcon = propsGenerator.iconFillIcon, iconFillSize = propsGenerator.iconFillSize, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, iconSrc = propsGenerator.iconSrc, shapeClass = propsGenerator.shapeClass, showDivider = propsGenerator.showDivider, sizeClass = propsGenerator.sizeClass;
+    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, titleBorderColorClass = propsGenerator.titleBorderColorClass, titleFillClass = propsGenerator.titleFillClass, titleFillHoverClass = propsGenerator.titleFillHoverClass, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, titleTextWeight = propsGenerator.titleTextWeight, titleWidthClass = propsGenerator.titleWidthClass, borderColorClass = propsGenerator.borderColorClass, badgeAppearance = propsGenerator.badgeAppearance, badgeAppearanceSize = propsGenerator.badgeAppearanceSize, badgeShape = propsGenerator.badgeShape, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, badgeValue = propsGenerator.badgeValue, contentTextColor = propsGenerator.contentTextColor, contentTextSize = propsGenerator.contentTextSize, contentTextWeight = propsGenerator.contentTextWeight, dividerDirection = propsGenerator.dividerDirection, dividerFill = propsGenerator.dividerFill, dividerSize = propsGenerator.dividerSize, icon = propsGenerator.icon, iconFill = propsGenerator.iconFill, iconFillIcon = propsGenerator.iconFillIcon, iconFillSize = propsGenerator.iconFillSize, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, iconSrc = propsGenerator.iconSrc, shapeClass = propsGenerator.shapeClass, showDivider = propsGenerator.showDivider, sizeClass = propsGenerator.sizeClass, zeroGap = propsGenerator.zeroGap, zeroPadding = propsGenerator.zeroPadding;
     // @ts-expect-error
     var styles = useStyles(props).styles;
-    return (jsxs("div", { className: clsx('accordion-item', className, borderColorClass && "border-color_".concat(borderColorClass), shapeClass && "accordion-item_shape_".concat(shapeClass), sizeClass && "accordion-item_size_".concat(sizeClass), isExpanded && 'accordion-item_state_open'), style: styles, children: [jsxs("div", { className: clsx('accordion-item__header', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), children: [jsx(Text, { className: clsx('accordion-item__title', titleBorderColorClass && "border-color_".concat(titleBorderColorClass), titleFillClass && "fill_".concat(titleFillClass), titleFillHoverClass && "fill_hover_".concat(titleFillHoverClass), titleWidthClass && "width_".concat(titleWidthClass), onClickTitle && 'cursor_type_pointer'), size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, onClick: onClickTitle, children: title }), (icon || iconSrc) && (jsx(Icon, { className: clsx('accordion-item__icon'), fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon, onClick: onClickTitle })), beforeContent, showDivider && (jsx(Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill || 'surfaceTertiary' }))] }), isExpanded && (jsxs("div", { className: clsx('accordion-item__content'), children: [content && (jsx("div", { className: clsx('accordion-item__content-inner', fillClass && "fill_".concat(fillClass)), children: jsx(Text, { size: contentTextSize, textColor: contentTextColor, textWeight: contentTextWeight, children: content }) })), children] })), afterContent] }));
+    return (jsxs("div", { className: clsx('accordion-item', className, zeroPadding && 'accordion-item_zero-padding', zeroGap && 'accordion-item_zero-gap', borderColorClass && "border-color_".concat(borderColorClass), shapeClass && "accordion-item_shape_".concat(shapeClass), sizeClass && "accordion-item_size_".concat(sizeClass), isExpanded && 'accordion-item_state_open'), style: styles, children: [jsxs("div", { className: clsx('accordion-item__header', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), children: [jsx(Text, { className: clsx('accordion-item__title', titleBorderColorClass && "border-color_".concat(titleBorderColorClass), titleFillClass && "fill_".concat(titleFillClass), titleFillHoverClass && "fill_hover_".concat(titleFillHoverClass), titleWidthClass && "width_".concat(titleWidthClass), onClickTitle && 'cursor_type_pointer'), size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, onClick: onClickTitle, children: title }), jsxs("div", { className: "accordion-item__action", children: [badgeValue && (jsx(Badge, { className: "accordion-item__badge", appearance: "".concat(badgeAppearance, " ").concat(badgeAppearanceSize), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (jsx(Icon, { className: clsx('accordion-item__icon'), fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon, onClick: onClickTitle }))] }), showDivider && (jsx(Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill || 'surfaceTertiary' }))] }), beforeContent, isExpanded && (jsxs("div", { className: clsx('accordion-item__content'), children: [content && (jsx("div", { className: clsx('accordion-item__content-inner', fillClass && "fill_".concat(fillClass)), children: jsx(Text, { size: contentTextSize, textColor: contentTextColor, textWeight: contentTextWeight, children: content }) })), children] })), afterContent] }));
 }
 
 function Accordion(props) {

package/dist/components/Chips.js

@@ -1,4 +1,4 @@
-export { C as Chips, b as ChipsGroup, a as chipsAppearance, c as chipsConfig } from '../ChipsGroup_es_CLpRB95W.js';
+export { C as Chips, b as ChipsGroup, a as chipsAppearance, c as chipsConfig } from '../ChipsGroup_es_D9aK8Roh.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';

package/dist/components/DatePeriod.js

@@ -4,9 +4,9 @@ import { useCallback } from 'react';
 import clsx from 'clsx';
 import { DateTime } from 'luxon';
 import { DATE_PERIOD_INTERVALS } from '@itcase/common';
-import { D as DatePickerInput } from '../DatePicker_es_bY1aXemt.js';
+import { D as DatePickerInput } from '../DatePicker_es_BCbmUdl0.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_CLpRB95W.js';
+import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_D9aK8Roh.js';
 import 'date-fns/locale';
 import 'react-datepicker';
 import '../hooks/useStyles/useStyles.js';
@@ -34,13 +34,15 @@ import 'lodash/castArray';
 var datePeriodAppearanceSize = {
     sizeL: {
         size: 'm',
-        datePickerAppearance: 'sizeM',
+        chipsAppearanceSize: 'sizeL',
+        datePickerAppearanceSize: 'sizeM',
         datePickerInputSize: 'l',
         datePickerInputTextSize: 'm',
     },
     sizeM: {
         size: 'm',
-        datePickerAppearance: 'sizeM',
+        chipsAppearanceSize: 'sizeL',
+        datePickerAppearanceSize: 'sizeM',
         datePickerInputSize: 'm',
         datePickerInputTextSize: 'm',
     },
@@ -49,20 +51,18 @@ var datePeriodAppearanceSize = {
 var datePeriodAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
-        chipsAppearance: 'surfacePrimary sizeL ghost',
+        chipsAppearance: 'surfacePrimary ghost',
         chipsShape: 'rounded',
         datePickerAppearance: 'surfacePrimary',
         datePickerInputAppearance: 'defaultPrimary',
-        datePickerInputFillHover: 'surfaceHover',
         shape: 'rounded',
     },
     surfaceSecondary: {
         fill: 'surfaceSecondary',
-        chipsAppearance: 'surfacePrimary sizeL ghost',
+        chipsAppearance: 'surfacePrimary ghost',
         chipsShape: 'rounded',
         datePickerAppearance: 'surfacePrimary',
         datePickerInputAppearance: 'defaultPrimary',
-        datePickerInputFillHover: 'surfaceHover',
         shape: 'rounded',
     },
 };
@@ -82,7 +82,7 @@ function DatePeriod(props) {
         return (__assign(__assign({}, resultConfig), (_a = datePeriodConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
     }, {});
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var _b = propsGenerator, fillClass = _b.fillClass, chipsAppearance = _b.chipsAppearance, chipsShape = _b.chipsShape, datePickerAppearance = _b.datePickerAppearance, datePickerInputAppearance = _b.datePickerInputAppearance, datePickerInputFillHover = _b.datePickerInputFillHover, datePickerInputSize = _b.datePickerInputSize, datePickerInputTextSize = _b.datePickerInputTextSize, shapeClass = _b.shapeClass, sizeClass = _b.sizeClass;
+    var _b = propsGenerator, fillClass = _b.fillClass, chipsAppearance = _b.chipsAppearance, chipsAppearanceSize = _b.chipsAppearanceSize, chipsShape = _b.chipsShape, datePickerAppearance = _b.datePickerAppearance, datePickerAppearanceSize = _b.datePickerAppearanceSize, datePickerInputAppearance = _b.datePickerInputAppearance, datePickerInputFillHover = _b.datePickerInputFillHover, datePickerInputSize = _b.datePickerInputSize, datePickerInputTextSize = _b.datePickerInputTextSize, shapeClass = _b.shapeClass, sizeClass = _b.sizeClass;
     var onClickPeriodChips = useCallback(function (selectedPeriodItem) {
         var dateStartIso = selectedPeriodItem.dateIntervalsList[0];
         var dateEndIso = selectedPeriodItem.dateIntervalsList[1];
@@ -105,8 +105,8 @@ function DatePeriod(props) {
         return (dateStartIso === datePeriodValueStart &&
             dateEndIso === datePeriodValueEnd);
     }, [datePeriodValueEnd, datePeriodValueStart]);
-    return (jsx("div", { className: clsx(className, 'date-period', shapeClass && "date-period_shape_".concat(shapeClass), sizeClass && "date-period_size_".concat(sizeClass), isSkeleton && "date-period_skeleton", fillClass && "fill_".concat(fillClass), 'cursor_type_pointer'), children: jsxs(ChipsGroup, { direction: "horizontal", children: [datePeriodIntervalsList.map(function (datePeriodItem) { return (jsx(Chips, { appearance: chipsAppearance, label: datePeriodItem.label, shape: chipsShape, isActive: checkIsChipsActive(datePeriodItem), onClick: function () { return onClickPeriodChips(datePeriodItem); } }, datePeriodItem.value)); }), jsx(DatePickerInput, { datePickerProps: {
-                        appearance: datePickerAppearance,
+    return (jsx("div", { className: clsx(className, 'date-period', shapeClass && "date-period_shape_".concat(shapeClass), sizeClass && "date-period_size_".concat(sizeClass), isSkeleton && "date-period_skeleton", fillClass && "fill_".concat(fillClass), 'cursor_type_pointer'), children: jsxs(ChipsGroup, { direction: "horizontal", children: [datePeriodIntervalsList.map(function (datePeriodItem) { return (jsx(Chips, { appearance: "".concat(chipsAppearance, " ").concat(chipsAppearanceSize), label: datePeriodItem.label, shape: chipsShape, isActive: checkIsChipsActive(datePeriodItem), onClick: function () { return onClickPeriodChips(datePeriodItem); } }, datePeriodItem.value)); }), jsx(DatePickerInput, { datePickerProps: {
+                        appearance: "".concat(datePickerAppearance, " ").concat(datePickerAppearanceSize),
                         dateFormat: 'dd/MM/yyyy',
                         selectsRange: true,
                         showWeekNumbers: true,

package/dist/components/DatePicker.js

@@ -1,4 +1,4 @@
-export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../DatePicker_es_bY1aXemt.js';
+export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../DatePicker_es_BCbmUdl0.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';

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

@@ -42,6 +42,18 @@
     }
   }
 }
+.accordion-item {
+  &&_zero-padding {
+    ^&__header {
+      padding: 0;
+    }
+  }
+  &&_zero-gap {
+    ^&__wrapper {
+      padding: 0;
+    }
+  }
+}
 .accordion-item {
   width: 100%;
   display: flex;
@@ -50,14 +62,22 @@
   &__header {
     width: 100%;
     display: flex;
+    align-items: center;
+    ^&__title {
+      position: relative;
+    }
   }
-  &__title {
-    position: relative;
-  }
-  &__icon {
-    align-self: flex-start;
-    transform-origin: 50% 50%;
-    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
+  &__action {
+    display: flex;
+    gap: 12px;
+    ^&__badge {
+      position: relative;
+    }
+    ^&__icon {
+      align-self: flex-start;
+      transform-origin: 50% 50%;
+      transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
+    }
   }
   &__content {
     width: 100%;

package/dist/css/components/Badge/Badge.css

@@ -122,7 +122,7 @@
   --badge-type-icon-size-s-max-width: 20px;
   --badge-type-icon-size-s-max-height: 20px;
 
-  --badge-size-xs-padding: 0 0.25m;
+  --badge-size-xs-padding: 0;
   --badge-size-xs-min-width: 16px;
   --badge-size-xs-min-height: 16px;
   --badge-size-xs-gap: 2px;

package/dist/types/components/Accordion/appearance/accordionSize.d.ts

@@ -2,41 +2,48 @@ declare const accordionAppearanceSize: {
     sizeXXL: {
         size: string;
         titleTextSize: string;
+        badgeAppearanceSize: string;
         contentTextSize: string;
         icon: string;
     };
     sizeXL: {
         size: string;
         titleTextSize: string;
+        badgeAppearanceSize: string;
         contentTextSize: string;
         icon: string;
     };
     sizeL: {
         size: string;
         titleTextSize: string;
+        badgeAppearanceSize: string;
         icon: string;
     };
     sizeM: {
         size: string;
         titleTextSize: string;
+        badgeAppearanceSize: string;
         contentTextSize: string;
         icon: string;
     };
     sizeS: {
         size: string;
         titleTextSize: string;
+        badgeAppearanceSize: string;
         contentTextSize: string;
         icon: string;
     };
     sizeXS: {
         size: string;
         titleTextSize: string;
+        badgeAppearanceSize: string;
         contentTextSize: string;
         icon: string;
     };
     sizeXXS: {
         size: string;
         titleTextSize: string;
+        badgeAppearanceSize: string;
         contentTextSize: string;
         icon: string;
     };

package/dist/types/components/Accordion/appearance/accordionSurface.d.ts

@@ -4,24 +4,33 @@ declare const accordionAppearanceSurface: {
         fillHover: string;
         titleTextColor: string;
         labelTextColor: string;
+        badgeAppearance: string;
+        badgeShape: string;
         iconFillIcon: string;
     };
     surfaceSecondary: {
         fill: string;
         fillHover: string;
         labelTextColor: string;
-        loaderFill: string;
-        loaderItemFill: string;
+        badgeAppearance: string;
+        badgeShape: string;
+        iconFillIcon: string;
     };
     surfaceTertiary: {
         fill: string;
         fillHover: string;
         labelTextColor: string;
+        badgeAppearance: string;
+        badgeShape: string;
+        iconFillIcon: string;
     };
     surfaceQuaternary: {
         fill: string;
         fillHover: string;
         labelTextColor: string;
+        badgeAppearance: string;
+        badgeShape: string;
+        iconFillIcon: string;
     };
 };
 export { accordionAppearanceSurface };

package/dist/types/components/DatePeriod/appearance/datePeriodSize.d.ts

@@ -1,13 +1,15 @@
 declare const datePeriodAppearanceSize: {
     sizeL: {
         size: string;
-        datePickerAppearance: string;
+        chipsAppearanceSize: string;
+        datePickerAppearanceSize: string;
         datePickerInputSize: string;
         datePickerInputTextSize: string;
     };
     sizeM: {
         size: string;
-        datePickerAppearance: string;
+        chipsAppearanceSize: string;
+        datePickerAppearanceSize: string;
         datePickerInputSize: string;
         datePickerInputTextSize: string;
     };

package/dist/types/components/DatePeriod/appearance/datePeriodSurface.d.ts

@@ -5,7 +5,6 @@ declare const datePeriodAppearanceSurface: {
         chipsShape: string;
         datePickerAppearance: string;
         datePickerInputAppearance: string;
-        datePickerInputFillHover: string;
         shape: string;
     };
     surfaceSecondary: {
@@ -14,7 +13,6 @@ declare const datePeriodAppearanceSurface: {
         chipsShape: string;
         datePickerAppearance: string;
         datePickerInputAppearance: string;
-        datePickerInputFillHover: string;
         shape: string;
     };
 };

package/dist/types/components/DatePicker/DatePicker.appearance.d.ts

@@ -49,8 +49,6 @@ export declare const datePickerAppearance: {
         iconFillHover: string;
         iconItemFill: string;
         iconShape: string;
-        iconLeft: string;
-        iconRight: string;
         monthTextColor: string;
         monthTextWeight: number;
         placeholderTextColor: string;

package/dist/types/components/DatePicker/appearance/datePickerSurface.d.ts

@@ -5,8 +5,6 @@ declare const datePickerAppearanceSurface: {
         iconFillHover: string;
         iconItemFill: string;
         iconShape: string;
-        iconLeft: string;
-        iconRight: string;
         monthTextColor: string;
         monthTextWeight: number;
         placeholderTextColor: string;

package/package.json

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