@itcase/ui 1.8.30 → 1.8.31

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

package/dist/stories/ChoicePlayground.mdx

@@ -1,10 +1,10 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks'
 
-import * as ChoiceStories from '../stories/Choice.stories'
+import * as ChoiceStories from '../stories/ChoiceDemo.stories'
 
 <Meta title="Atoms / Choice / Playground" />
 
 # Playground
 
-<Canvas sourceState="shown" of={ChoiceStories.Default} />
-<Controls of={ChoiceStories.Default} />
+<Canvas sourceState="shown" of={ChoiceStories.Demo} />
+<Controls of={ChoiceStories.Demo} />

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

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

package/dist/types/components/Breadcrumbs/stories/__mock__/index.d.ts

@@ -4,7 +4,7 @@ declare const breadcrumbsListMock: {
         key: number;
         text: string;
         href: string;
-        icon: string;
+        icon: any;
     }[];
 };
 export { breadcrumbsListMock };

package/dist/types/components/Cell/stories/__mock__/index.d.ts

@@ -1,9 +1,9 @@
 declare const cellMock: {
     title: string;
-    titleIcon: string;
+    titleIcon: any;
     titleLabel: string;
     value: string;
-    valueIcon: string;
+    valueIcon: any;
     valueLabel: string;
 };
 export { cellMock };

package/dist/types/components/Choice/Choice.interface.d.ts

@@ -56,6 +56,7 @@ interface ChoiceProps extends ChoiceThemeColor, StyleAttributes {
     isCheckbox?: boolean;
     isDisabled?: boolean;
     isLoading?: boolean;
+    isSkeleton?: boolean;
     set?: string;
     setActiveSegment?: (item: any, isChecked?: boolean) => void;
 }

package/dist/types/components/Choice/appearance/choiceDefault.d.ts

@@ -0,0 +1,10 @@
+declare const choiceAppearanceDefault: {
+    defaultPrimary: {
+        fill: string;
+        labelTextColor: string;
+        borderColor: string;
+        iconAfterFill: string;
+        iconBeforeFill: string;
+    };
+};
+export { choiceAppearanceDefault };

package/dist/types/components/Choice/appearance/choiceDisabled.d.ts

@@ -0,0 +1,10 @@
+declare const choiceAppearanceDisabled: {
+    disabledPrimary: {
+        fill: string;
+        labelTextColor: string;
+        borderColor: string;
+        iconAfterFill: string;
+        iconBeforeFill: string;
+    };
+};
+export { choiceAppearanceDisabled };

package/dist/types/components/Choice/appearance/choiceError.d.ts

@@ -0,0 +1,10 @@
+declare const choiceAppearanceError: {
+    errorPrimary: {
+        fill: string;
+        labelTextColor: string;
+        borderColor: string;
+        iconAfterFill: string;
+        iconBeforeFill: string;
+    };
+};
+export { choiceAppearanceError };

package/dist/types/components/Choice/appearance/choiceRequire.d.ts

@@ -0,0 +1,11 @@
+declare const choiceAppearanceRequire: {
+    requirePrimary: {
+        fill: string;
+        fillItemActive: string;
+        labelTextColor: string;
+        borderColor: string;
+        iconAfterFill: string;
+        iconBeforeFill: string;
+    };
+};
+export { choiceAppearanceRequire };

package/dist/types/components/Choice/appearance/choiceStyle.d.ts

@@ -1,13 +1,15 @@
 declare const choiceAppearanceStyle: {
-    solid: {
+    full: {
         borderColor: string;
     };
-    outlined: {
+    ghost: {
         fill: string;
+        borderColor: string;
     };
-    full: {};
-    ghost: {
+    outlined: {
         fill: string;
+    };
+    solid: {
         borderColor: string;
     };
 };

package/dist/types/components/Choice/appearance/choiceSuccess.d.ts

@@ -0,0 +1,11 @@
+declare const choiceAppearanceSuccess: {
+    successPrimary: {
+        fill: string;
+        fillItemActive: string;
+        labelTextColor: string;
+        borderColor: string;
+        iconAfterFill: string;
+        iconBeforeFill: string;
+    };
+};
+export { choiceAppearanceSuccess };

package/dist/types/components/Choice/stories/__mock__/index.d.ts

@@ -0,0 +1,4 @@
+export declare const options: {
+    label: string;
+    value: number;
+}[];

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

@@ -21,16 +21,16 @@ export declare const datePickerAppearance: {
         daySize: string;
         dayTextSize: string;
         iconFillSize: number;
-        iconLeft: string;
-        iconRight: string;
+        iconLeft: any;
+        iconRight: any;
     };
     sizeM: {
         size: string;
         daySize: string;
         dayTextSize: string;
         iconFillSize: number;
-        iconLeft: string;
-        iconRight: string;
+        iconLeft: any;
+        iconRight: any;
         iconSize: number;
         monthTextSize: string;
         yearTextSize: string;
@@ -40,8 +40,8 @@ export declare const datePickerAppearance: {
         daySize: string;
         dayTextSize: string;
         iconFillSize: number;
-        iconLeft: string;
-        iconRight: string;
+        iconLeft: any;
+        iconRight: any;
     };
     surfacePrimary: {
         dayTextColor: string;

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

@@ -4,16 +4,16 @@ declare const datePickerSize: {
         daySize: string;
         dayTextSize: string;
         iconFillSize: number;
-        iconLeft: string;
-        iconRight: string;
+        iconLeft: any;
+        iconRight: any;
     };
     sizeM: {
         size: string;
         daySize: string;
         dayTextSize: string;
         iconFillSize: number;
-        iconLeft: string;
-        iconRight: string;
+        iconLeft: any;
+        iconRight: any;
         iconSize: number;
         monthTextSize: string;
         yearTextSize: string;
@@ -23,8 +23,8 @@ declare const datePickerSize: {
         daySize: string;
         dayTextSize: string;
         iconFillSize: number;
-        iconLeft: string;
-        iconRight: string;
+        iconLeft: any;
+        iconRight: any;
     };
 };
 export { datePickerSize };

package/dist/types/components/Drawer/appearance/drawerSurface.d.ts

@@ -7,7 +7,7 @@ declare const drawerAppearanceSurface: {
         descTextColor: string;
         descTextSize: string;
         iconSize: number;
-        closeIcon: string;
+        closeIcon: any;
         closeIconFillIcon: string;
     };
     surfaceQuaternary: {

package/dist/types/components/Icon/appearance/iconDanger.d.ts

@@ -5,5 +5,11 @@ declare const iconAppearanceDanger: {
         labelTextColor: string;
         labelTextColorHover: string;
     };
+    dangerPrimary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+        labelTextColorHover: string;
+    };
 };
 export { iconAppearanceDanger };

package/dist/types/components/Icon/appearance/iconError.d.ts

@@ -5,5 +5,11 @@ declare const iconAppearanceError: {
         labelTextColor: string;
         labelTextColorHover: string;
     };
+    errorPrimary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+        labelTextColorHover: string;
+    };
 };
 export { iconAppearanceError };

package/dist/types/components/Icon/appearance/iconPrimary.d.ts

@@ -4,5 +4,10 @@ declare const iconAppearancePrimary: {
         fillHover: string;
         labelTextColor: string;
     };
+    primaryPrimary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+    };
 };
 export { iconAppearancePrimary };

package/dist/types/components/Icon/appearance/iconSecondary.d.ts

@@ -4,5 +4,10 @@ declare const iconAppearanceSecondary: {
         fillHover: string;
         labelTextColor: string;
     };
+    secondaryPrimary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+    };
 };
 export { iconAppearanceSecondary };

package/dist/types/components/Icon/appearance/iconStyle.d.ts

@@ -1,14 +1,15 @@
 declare const iconAppearanceStyle: {
-    solid: {
+    full: {
         borderColor: string;
     };
-    outlined: {
+    ghost: {
         fill: string;
+        borderColor: string;
     };
-    full: {};
-    ghost: {
+    outlined: {
         fill: string;
-        fillHover: string;
+    };
+    solid: {
         borderColor: string;
     };
 };

package/dist/types/components/Icon/appearance/iconWarning.d.ts

@@ -5,5 +5,11 @@ declare const iconAppearanceWarning: {
         labelTextColor: string;
         labelTextColorHover: string;
     };
+    warningPrimary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+        labelTextColorHover: string;
+    };
 };
 export { iconAppearanceWarning };

package/dist/types/components/Label/appearance/labelAccent.d.ts

@@ -4,7 +4,7 @@ declare const labelAppearanceAccent: {
         labelTextColor: string;
         labelTextColorHover: string;
     };
-    accentMuted: {
+    accentMutedPrimary: {
         fill: string;
         labelTextColor: string;
         labelTextColorHover: string;