@itcase/ui 1.8.29 → 1.8.31

package/dist/components/MenuItem.js

@@ -4,7 +4,7 @@ import React from 'react';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { I as Icon } from '../Tooltip_es_frBCZDrO.js';
+import { I as Icon } from '../Tooltip_es_BPMRrd2L.js';
 import { L as Link } from '../Link_es_DxtZLeKY.js';
 import { T as Text } from '../Text_es_BfLRfj-5.js';
 import 'lodash/camelCase';
@@ -22,102 +22,76 @@ import '../hooks/useStyles/styleAttributes.js';
 import 'react-inlinesvg';
 
 var menuItemAppearanceAccent = {
-    accent: {
-        fill: 'accentPrimary',
-        fillHover: 'accentPrimaryHover',
-    },
     accentPrimary: {
         fill: 'accentPrimary',
         fillHover: 'accentPrimaryHover',
-        borderColor: 'accentBorderPrimary',
+        labelTextColor: 'accentTextPrimary',
+        iconAfterFillIcon: 'accentItemPrimary',
+        iconBeforeFillIcon: 'accentItemPrimary',
     },
     accentSecondary: {
         fill: 'accentPrimary',
         fillHover: 'accentPrimaryHover',
         labelTextColor: 'accentTextSecondary',
         labelTextColorHover: 'accentTextSecondary',
-        borderColor: 'accentBorderPrimary',
-        loaderFill: 'accentPrimary',
-        loaderItemFill: 'accentItemPrimary',
+        iconAfterFillIcon: 'accentItemSecondary',
+        iconBeforeFillIcon: 'accentItemSecondary',
     },
 };
 
 var menuItemAppearanceError = {
-    error: {
+    errorPrimary: {
         fill: 'errorPrimary',
         fillHover: 'errorPrimaryHover',
         labelTextColor: 'errorTextPrimary',
         labelTextColorHover: 'errorTextPrimary',
-        loaderFill: 'errorPrimary',
-        loaderItemFill: 'errorItemPrimary',
-    },
-};
-
-var menuItemAppearancePrimary = {
-    primary: {
-        fill: 'primaryPrimary',
-        fillHover: 'primaryPrimaryHover',
-        labelTextColor: 'primaryTextPrimary',
+        iconAfterFillIcon: 'errorItemPrimary',
+        iconBeforeFillIcon: 'errorItemPrimary',
     },
 };
 
 var menuItemAppearanceSize = {
     sizeXXL: {
         size: 'xxl',
-        labelTextSize: 'xxl',
-        iconAfterFillSize: '48',
-        iconAfterSize: '48',
-        iconBeforeFillSize: '48',
-        iconBeforeSize: '14',
+        labelTextSize: 'l',
+        iconAfterSize: '20',
+        iconBeforeSize: '20',
     },
     sizeXL: {
         size: 'xl',
         labelTextSize: 'l',
-        iconAfterFillSize: '40',
-        iconAfterSize: '40',
-        iconBeforeFillSize: '40',
-        iconBeforeSize: '40',
+        iconAfterSize: '20',
+        iconBeforeSize: '20',
     },
     sizeL: {
         size: 'l',
-        labelTextSize: 'l',
-        descTextSize: 'm',
-        iconAfterFillSize: '32',
-        iconAfterSize: '32',
-        iconBeforeFillSize: '32',
-        iconBeforeSize: '32',
+        labelTextSize: 's',
+        iconAfterSize: '16',
+        iconBeforeSize: '16',
     },
     sizeM: {
         size: 'm',
-        labelTextSize: 'm',
-        iconAfterFillSize: '28',
-        iconAfterSize: '28',
-        iconBeforeFillSize: '28',
-        iconBeforeSize: '28',
+        labelTextSize: 's',
+        iconAfterSize: '16',
+        iconBeforeSize: '16',
     },
     sizeS: {
         size: 's',
-        labelTextSize: 's',
-        iconAfterFillSize: '24',
-        iconAfterSize: '24',
-        iconBeforeFillSize: '24',
-        iconBeforeSize: '24',
+        labelTextSize: 'xs',
+        iconAfterSize: '12',
+        iconBeforeSize: '12',
     },
     sizeXS: {
         size: 'xs',
         labelTextSize: 'xs',
-        iconAfterFillSize: '20',
-        iconAfterSize: '20',
-        iconBeforeFillSize: '20',
-        iconBeforeSize: '20',
+        iconAfterSize: '12',
+        iconBeforeSize: '12',
     },
     sizeXXS: {
         size: 'xxs',
-        labelTextSize: 'xs',
-        iconAfterFillSize: '16',
-        iconAfterSize: '16',
-        iconBeforeFillSize: '16',
-        iconBeforeSize: '16',
+        labelTextSize: 'xxs',
+        iconAfterSize: '12',
+        iconBeforeSize: '12',
     },
 };
 
@@ -128,9 +102,7 @@ var menuItemAppearanceStyle = {
     outlined: {
         fill: 'none',
     },
-    full: {
-        borderColor: 'none',
-    },
+    full: {},
     ghost: {
         fill: 'none',
         borderColor: 'none',
@@ -140,18 +112,11 @@ var menuItemAppearanceStyle = {
 var menuItemAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
-        fillActive: 'surfaceSecondary',
-        fillActiveHover: 'surfaceSecondary',
-        fillHover: 'surfaceSecondary',
+        fillHover: 'surfacePrimaryHover',
         labelTextColor: 'surfaceTextPrimary',
         iconAfterFillIcon: 'surfaceItemPrimary',
         iconBeforeFillIcon: 'surfaceItemPrimary',
     },
-    surfaceQuaternary: {
-        fill: 'surfaceQuaternary',
-        fillHover: 'surfaceQuaternaryHover',
-        labelTextColor: 'surfaceTextPrimary',
-    },
     surfaceSecondary: {
         fill: 'surfaceSecondary',
         fillHover: 'surfaceSecondaryHover',
@@ -162,9 +127,14 @@ var menuItemAppearanceSurface = {
         fillHover: 'surfaceTertiaryHover',
         labelTextColor: 'surfaceTextPrimary',
     },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        fillHover: 'surfaceQuaternaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+    },
 };
 
-var menuItemAppearance = __assign(__assign(__assign(__assign(__assign(__assign({}, menuItemAppearanceSize), menuItemAppearanceStyle), menuItemAppearanceAccent), menuItemAppearanceError), menuItemAppearancePrimary), menuItemAppearanceSurface);
+var menuItemAppearance = __assign(__assign(__assign(__assign(__assign({}, menuItemAppearanceSize), menuItemAppearanceStyle), menuItemAppearanceAccent), menuItemAppearanceError), menuItemAppearanceSurface);
 
 var menuItemConfig = {
     appearance: menuItemAppearance,
@@ -179,7 +149,7 @@ function MenuItem(props) {
         return (__assign(__assign({}, resultConfig), (_a = menuItemConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
     }, {});
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var directionClass = propsGenerator.directionClass, justifyContentClass = propsGenerator.justifyContentClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelStyle = propsGenerator.labelStyle, labelTextActiveColor = propsGenerator.labelTextActiveColor, labelTextActiveColorDisabled = propsGenerator.labelTextActiveColorDisabled, labelTextActiveHoverColor = propsGenerator.labelTextActiveHoverColor, labelTextActiveHoverColorDisabled = propsGenerator.labelTextActiveHoverColorDisabled, labelTextColor = propsGenerator.labelTextColor, labelTextColorDisabled = propsGenerator.labelTextColorDisabled, labelTextHoverColor = propsGenerator.labelTextHoverColor, labelTextHoverColorDisabled = propsGenerator.labelTextHoverColorDisabled, labelTextSize = propsGenerator.labelTextSize, labelWeight = propsGenerator.labelWeight, labelWrap = propsGenerator.labelWrap, iconAfter = propsGenerator.iconAfter, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconAfterSrc = propsGenerator.iconAfterSrc, iconBadgeAppearance = propsGenerator.iconBadgeAppearance, iconBadgeShape = propsGenerator.iconBadgeShape, iconBadgeSize = propsGenerator.iconBadgeSize, iconBadgeTextColor = propsGenerator.iconBadgeTextColor, iconBadgeTextSize = propsGenerator.iconBadgeTextSize, iconBadgeValue = propsGenerator.iconBadgeValue, iconBefore = propsGenerator.iconBefore, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, iconBeforeSrc = propsGenerator.iconBeforeSrc, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, typeClass = propsGenerator.typeClass, widthClass = propsGenerator.widthClass;
+    var directionClass = propsGenerator.directionClass, justifyContentClass = propsGenerator.justifyContentClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelStyle = propsGenerator.labelStyle, labelTextActiveColor = propsGenerator.labelTextActiveColor, labelTextActiveColorDisabled = propsGenerator.labelTextActiveColorDisabled, labelTextActiveHoverColor = propsGenerator.labelTextActiveHoverColor, labelTextActiveHoverColorDisabled = propsGenerator.labelTextActiveHoverColorDisabled, labelTextColor = propsGenerator.labelTextColor, labelTextColorDisabled = propsGenerator.labelTextColorDisabled, labelTextHoverColor = propsGenerator.labelTextHoverColor, labelTextHoverColorDisabled = propsGenerator.labelTextHoverColorDisabled, labelTextSize = propsGenerator.labelTextSize, labelWeight = propsGenerator.labelWeight, labelWrap = propsGenerator.labelWrap, iconAfter = propsGenerator.iconAfter, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconAfterSrc = propsGenerator.iconAfterSrc, iconBadgeAppearance = propsGenerator.iconBadgeAppearance, iconBadgeShape = propsGenerator.iconBadgeShape, iconBadgeSize = propsGenerator.iconBadgeSize, iconBadgeTextColor = propsGenerator.iconBadgeTextColor, iconBadgeTextSize = propsGenerator.iconBadgeTextSize, iconBadgeValue = propsGenerator.iconBadgeValue, iconBefore = propsGenerator.iconBefore, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, iconBeforeSrc = propsGenerator.iconBeforeSrc, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, typeClass = propsGenerator.typeClass, widthClass = propsGenerator.widthClass, isSkeleton = propsGenerator.isSkeleton;
     // @ts-expect-error
     var menuItem = useStyles(props).styles;
     return (jsx("div", { className: clsx('menu-item', isActive && 'menu-item_state_active', isDisabled && "menu-item_state_disabled", directionClass && "menu-item_direction_".concat(directionClass), className, sizeClass && "menu-item_size_".concat(sizeClass), !isActive
@@ -187,7 +157,7 @@ function MenuItem(props) {
             : fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive
             ? fillHoverClass && "fill_hover_".concat(fillHoverClass)
             : fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), shapeClass && "menu-item_shape_".concat(shapeClass), typeClass && "menu-item_type_".concat(typeClass), widthClass && "width_".concat(widthClass), justifyContentClass &&
-            "menu-item_justify-content_".concat(justifyContentClass)), style: menuItem, onClick: onClick, onMouseEnter: onMouseEnter, children: jsxs(Link, { className: clsx('menu-item__wrapper', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass)), href: link || href, LinkComponent: LinkComponent, rel: rel, target: target, underline: underline, children: [before, children || (jsxs(React.Fragment, { children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { className: clsx('menu-item__icon_before', iconBadgeValue && 'menu-item__icon_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'menu-item__icon_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), label && (jsx(Text, { className: "menu-item__label", size: labelTextSize, textColor: isActive
+            "menu-item_justify-content_".concat(justifyContentClass), isSkeleton && "menu-item_skeleton"), style: menuItem, onClick: onClick, onMouseEnter: onMouseEnter, children: jsxs(Link, { className: clsx('menu-item__wrapper', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass)), href: link || href, LinkComponent: LinkComponent, rel: rel, target: target, underline: underline, children: [before, children || (jsxs(React.Fragment, { children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { className: clsx('menu-item__icon_before', iconBadgeValue && 'menu-item__icon_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'menu-item__icon_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), label && (jsx(Text, { className: "menu-item__label", size: labelTextSize, textColor: isActive
                                 ? !isDisabled
                                     ? labelTextActiveColor
                                     : labelTextActiveColorDisabled

package/dist/components/Modal.js

@@ -6,7 +6,7 @@ import ReactDOM from 'react-dom';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
 import { O as Overlay } from '../Overlay_es_DczPjVL9.js';
-import { b as Title } from '../Tooltip_es_frBCZDrO.js';
+import { b as Title } from '../Tooltip_es_BPMRrd2L.js';
 import { L as Loader } from '../Loader_es_B2auu_rc.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';

package/dist/components/Notification.js

@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { I as Icon } from '../Tooltip_es_frBCZDrO.js';
+import { I as Icon } from '../Tooltip_es_BPMRrd2L.js';
 import { T as Text } from '../Text_es_BfLRfj-5.js';
 import { icon20 } from '@itcase/icons/default';
 import { useNotifications, useNotificationsAPI } from '../context/Notifications.js';

package/dist/components/Pagination.js

@@ -6,8 +6,8 @@ import ceil from 'lodash/ceil';
 import ReactPaginate from 'react-paginate';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { D as Dropdown, a as DropdownItem } from '../DropdownItem_es_CVztMEm0.js';
-import { I as Icon } from '../Tooltip_es_frBCZDrO.js';
+import { D as Dropdown, a as DropdownItem } from '../DropdownItem_es_VDp5tKZr.js';
+import { I as Icon } from '../Tooltip_es_BPMRrd2L.js';
 import { T as Text } from '../Text_es_BfLRfj-5.js';
 import { icon32, icon24 } from '@itcase/icons/default';
 import 'lodash/camelCase';

package/dist/components/Response.js

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 import SVG from 'react-inlinesvg';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Button } from '../Button_es_CO_dwo-N.js';
+import { B as Button } from '../Button_es_WG0yV-rp.js';
 import { G as Group } from '../Group_es_CYW2Hquh.js';
 import { T as Text } from '../Text_es_BfLRfj-5.js';
 import 'lodash/camelCase';
@@ -20,7 +20,7 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Tooltip_es_frBCZDrO.js';
+import '../Tooltip_es_BPMRrd2L.js';
 import '../Link_es_DxtZLeKY.js';
 import '../Loader_es_B2auu_rc.js';
 

package/dist/components/Search.js

@@ -5,7 +5,7 @@ import React, { useCallback } from 'react';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { I as Icon } from '../Tooltip_es_frBCZDrO.js';
+import { I as Icon } from '../Tooltip_es_BPMRrd2L.js';
 import { T as Text } from '../Text_es_BfLRfj-5.js';
 import { S as Scrollbar } from '../Scrollbar_es_CThJeCLF.js';
 import 'lodash/camelCase';
@@ -55,9 +55,9 @@ var searchAppearanceError = {
         fill: 'errorTertiary',
         borderColor: 'errorBorderQuaternary',
         borderHover: 'errorBorderQuaternaryHover',
-        iconAfterFill: 'errorItemPrimary',
-        iconBeforeFill: 'errorItemPrimary',
-        iconClearFill: 'errorItemPrimary',
+        iconAfterFill: 'errorItemSecondary',
+        iconBeforeFill: 'errorItemSecondary',
+        iconClearFill: 'errorItemSecondary',
         inputTextColor: 'surfaceTextPrimary',
         placeholderTextColor: 'surfaceTextQuaternary',
     },

package/dist/components/Segmented.js

@@ -18,22 +18,26 @@ import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
 
-var segmentedAppearanceAccent = {
-    accent: {
-        fill: 'accentPrimary',
-        fillHover: 'accentPrimaryHover',
-    },
-    accentPrimary: {
-        fill: 'accentPrimary',
-        fillHover: 'accentPrimaryHover',
-        borderColor: 'accentBorderPrimary',
-    },
-    accentSecondary: {
-        fill: 'accentPrimary',
-        fillHover: 'accentPrimaryHover',
-        labelTextColor: 'accentTextSecondary',
-        labelTextColorHover: 'accentTextSecondary',
-        borderColor: 'accentBorderPrimary',
+var segmentedAppearanceDefault = {
+    defaultPrimary: {
+        fill: 'surfacePrimary',
+        fillActive: 'accentPrimary',
+        fillActiveHover: 'accentPrimary',
+        fillHover: 'surfaceSecondary',
+        labelTextActiveColor: 'accentTextPrimary',
+        labelTextColor: 'surfaceTextPrimary',
+        indicatorFill: 'accentPrimary',
+        shape: 'rounded',
+    },
+    defaultSecondary: {
+        fill: 'surfaceSecondary',
+        fillActive: 'accentPrimary',
+        fillActiveHover: 'accentPrimary',
+        fillHover: 'surfaceSecondary',
+        labelTextActiveColor: 'accentTextPrimary',
+        labelTextColor: 'surfaceTextPrimary',
+        indicatorFill: 'accentPrimary',
+        shape: 'rounded',
     },
 };
 
@@ -64,10 +68,6 @@ var segmentedAppearanceError = {
     },
 };
 
-var segmentedAppearanceFalse = {
-    false: {},
-};
-
 var segmentedAppearanceSize = {
     sizeL: {
         size: 'l',
@@ -116,29 +116,6 @@ var segmentedAppearanceSuccess = {
     },
 };
 
-var segmentedAppearanceSurface = {
-    surfacePrimary: {
-        fill: 'surfacePrimary',
-        fillActive: 'accentPrimary',
-        fillActiveHover: 'accentPrimary',
-        fillHover: 'surfaceSecondary',
-        labelTextActiveColor: 'accentTextPrimary',
-        labelTextColor: 'surfaceTextPrimary',
-        indicatorFill: 'accentPrimary',
-        shape: 'rounded',
-    },
-    surfaceSecondary: {
-        fill: 'surfaceSecondary',
-        fillActive: 'accentPrimary',
-        fillActiveHover: 'accentPrimary',
-        fillHover: 'surfaceSecondary',
-        labelTextActiveColor: 'accentTextPrimary',
-        labelTextColor: 'surfaceTextPrimary',
-        indicatorFill: 'accentPrimary',
-        shape: 'rounded',
-    },
-};
-
 var segmentedAppearanceWarning = {
     warning: {
         fill: 'warningPrimary',
@@ -148,7 +125,7 @@ var segmentedAppearanceWarning = {
     },
 };
 
-var segmentedAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, segmentedAppearanceFalse), segmentedAppearanceDisabled), segmentedAppearanceSize), segmentedAppearanceStyle), segmentedAppearanceAccent), segmentedAppearanceError), segmentedAppearanceSuccess), segmentedAppearanceSurface), segmentedAppearanceWarning);
+var segmentedAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign({}, segmentedAppearanceDisabled), segmentedAppearanceSize), segmentedAppearanceStyle), segmentedAppearanceError), segmentedAppearanceSuccess), segmentedAppearanceDefault), segmentedAppearanceWarning);
 
 var segmentedConfig = {
     appearance: segmentedAppearance,

package/dist/components/Select.js

@@ -1,7 +1,7 @@
 import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import Select, { components } from 'react-select';
-import { I as Icon, B as Badge } from '../Tooltip_es_frBCZDrO.js';
+import { I as Icon, B as Badge } from '../Tooltip_es_BPMRrd2L.js';
 import React, { useRef, useCallback, useEffect, useMemo } from 'react';
 import clsx from 'clsx';
 import CreatableSelect from 'react-select/creatable';

package/dist/components/Swiper.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { Swiper as Swiper$1, SwiperSlide } from 'swiper/react';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { b as Title } from '../Tooltip_es_frBCZDrO.js';
+import { b as Title } from '../Tooltip_es_BPMRrd2L.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';

package/dist/components/Tab.js

@@ -4,7 +4,7 @@ import React from 'react';
 import clsx from 'clsx';
 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 { B as Badge, I as Icon } from '../Tooltip_es_BPMRrd2L.js';
 import { D as Divider } from '../Divider_es_kY-30pft.js';
 import { L as Link } from '../Link_es_DxtZLeKY.js';
 import { T as Text } from '../Text_es_BfLRfj-5.js';

package/dist/components/Tile.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { b as Title, B as Badge, I as Icon } from '../Tooltip_es_frBCZDrO.js';
+import { b as Title, B as Badge, I as Icon } from '../Tooltip_es_BPMRrd2L.js';
 import { T as Text } from '../Text_es_BfLRfj-5.js';
 import 'react';
 import 'lodash/camelCase';

package/dist/components/Title.js

@@ -1,4 +1,4 @@
-export { b as Title, d as titleAppearance, c as titleConfig } from '../Tooltip_es_frBCZDrO.js';
+export { b as Title, d as titleAppearance, c as titleConfig } from '../Tooltip_es_BPMRrd2L.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';

package/dist/components/Tooltip.js

@@ -1,4 +1,4 @@
-export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Tooltip_es_frBCZDrO.js';
+export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Tooltip_es_BPMRrd2L.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/css/components/Choice/Choice.css

@@ -75,22 +75,6 @@
     align-items: center;
   }
 }
-.choice {
-  &_set {
-    &_form {
-      ^^&__item {
-        min-width: auto;
-        border: 1px solid var(--color-surface-border-tertiary);
-        border-radius: 6px;
-        &-label {
-          flex-direction: row-reverse;
-          align-items: center;
-          gap: 4px;
-        }
-      }
-    }
-  }
-}
 .choice {
   &_shape {
     &_rounded {
@@ -135,6 +119,30 @@
     }
   }
 }
+.choice {
+  &&_skeleton {
+    background-size: 200% !important;
+    border: none;
+    animation: choiceSkeleton 3s infinite linear !important;
+    background-image: linear-gradient(
+      90deg,
+      var(--color-surface-fill-secondary),
+      var(--color-surface-fill-tertiary),
+      var(--color-surface-fill-secondary)
+    ) !important;
+    & * {
+      opacity: 0%;
+    }
+  }
+}
+@keyframes choiceSkeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}
 :root {
   --choice-size-s-height: 28px;
   --choice-size-m-height: 36px;
@@ -155,9 +163,9 @@
 
   --choice-shape-rounded: 8px;
 
-  --choice-item-size-s-padding: 0px 10px;
-  --choice-item-size-m-padding: 0px 10px;
-  --choice-item-size-l-padding: 0px 10px;
+  --choice-item-size-s-padding: 0px 6px;
+  --choice-item-size-m-padding: 0px 12px;
+  --choice-item-size-l-padding: 0px 12px;
 
   --choice-item-icon-padding: 0;
   --choice-item-shape-rounded: 8px;

package/dist/css/components/MenuItem/MenuItem.css

@@ -1,4 +1,5 @@
 .menu-item {
+  display: flex;
   align-items: center;
   &__wrapper {
     width: 100%;
@@ -50,6 +51,9 @@
   &_size {
     @each $size in xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
+        min-height: var(--menu-item-size-$(size)-min-height);
+        padding: var(--menu-item-size-$(size)-padding);
+        gap: var(--menu-item-size-$(size)-gap);
         ^^&__wrapper {
           min-height: var(--menu-item-size-$(size)-min-height);
           padding: var(--menu-item-size-$(size)-padding);
@@ -60,17 +64,50 @@
   }
 }
 
+.menu-item {
+  &&_skeleton {
+    background-size: 200% !important;
+    border: none;
+    animation: menuItemSkeleton 3s infinite linear !important;
+    background-image: linear-gradient(
+      90deg,
+      var(--color-surface-fill-secondary),
+      var(--color-surface-fill-tertiary),
+      var(--color-surface-fill-secondary)
+    ) !important;
+    & * {
+      opacity: 0%;
+    }
+  }
+}
+
+@keyframes menuItemSkeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}
+
 :root {
-  --menu-item-size-xxs-padding: 0 4px;
-  --menu-item-size-xs-padding: 0 4px;
-  --menu-item-size-s-padding: 3px 4px;
-  --menu-item-size-m-padding: 4px 12px;
-  --menu-item-size-l-padding: 6px 6px;
-  --menu-item-size-xl-padding: 10px 8px;
-  --menu-item-size-xxl-padding: 12px 10px;
+  --menu-item-size-xxs-padding: 2px;
+  --menu-item-size-xs-padding: 4px;
+  --menu-item-size-s-padding: 6px;
+  --menu-item-size-m-padding: 6px;
+  --menu-item-size-l-padding: 8px;
+  --menu-item-size-xl-padding: 10px;
+  --menu-item-size-xxl-padding: 14px;
+
+  --menu-item-size-xxs-gap: 4px;
+  --menu-item-size-xs-gap: 4px;
+  --menu-item-size-s-gap: 6px;
+  --menu-item-size-m-gap: 6px;
+  --menu-item-size-l-gap: 8px;
+  --menu-item-size-xl-gap: 8px;
+  --menu-item-size-xxl-gap: 8px;
 
   --menu-item-size-m-min-height: 32px;
-  --menu-item-size-m-gap: 8px;
 
   --menu-item-shape-rounded: 20px;
 }

package/dist/stories/ChoiceOverview.mdx

@@ -1,6 +1,6 @@
 import { Meta, Story } from '@storybook/blocks'
 
-import * as ChoiceStories from '../stories/Choice.stories'
+import * as ChoiceStories from '../stories/ChoiceDemo.stories'
 
 <Meta title="Atoms / Choice / Overview" />
 
@@ -8,4 +8,4 @@ import * as ChoiceStories from '../stories/Choice.stories'
 
 `Choice` — это меню с вариантами выбора.
 
-<Story of={ChoiceStories.Default} />
+<Story of={ChoiceStories.Demo} />