@itcase/ui 1.8.30 → 1.8.32

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_B0nm9irO.js';
 import React, { useRef, useCallback, useEffect, useMemo } from 'react';
 import clsx from 'clsx';
 import CreatableSelect from 'react-select/creatable';

package/dist/components/Swiper/stories/__mock__.js

@@ -0,0 +1,14 @@
+import { jsxs } from 'react/jsx-runtime';
+
+var slidesMock = Array.from({ length: 10 }, function (_, index) { return (jsxs("div", { style: {
+        width: '100%',
+        height: 'auto',
+        justifyContent: 'center',
+        alignItems: 'center',
+        fontSize: 24,
+        fontWeight: 'bold',
+        display: 'flex',
+        background: "hsl(".concat(index * 60, ", 70%, 80%)"),
+    }, children: ["Slide ", index + 1] }, index)); });
+
+export { slidesMock };

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_B0nm9irO.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';

package/dist/components/Tab/stories/__mock__.js

@@ -1,11 +1,11 @@
-import { icon16 } from '@itcase/icons/default';
+import { icons16 } from '@itcase/icons/default';
 
 var tabListMock = {
     tabList: [
         { key: 1, label: 'Tab 1', isActive: true },
         { key: 2, label: 'Tab 2', isActive: false },
         { key: 3, label: 'Tab 3', badgeValue: 3, isActive: false },
-        { key: 4, label: 'Tab 4', icon: icon16.Placeholder, isActive: false },
+        { key: 4, label: 'Tab 4', icon: icons16.Placeholder, isActive: false },
     ],
 };
 

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_B0nm9irO.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_B0nm9irO.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_B0nm9irO.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_B0nm9irO.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';

package/dist/css/components/Choice/Choice.css

@@ -8,12 +8,6 @@
     border-right: var(--chioce-item-border-right);
   }
   */
-  &_state_disabled {
-    background: var(--choice-item-state-disabled-background);
-    &:hover {
-      background: var(--choice-item-state-disabled-background);
-    }
-  }
   & input {
     width: 100%;
     height: 100%;
@@ -35,9 +29,6 @@
     transition: color 0.5s ease;
     cursor: pointer;
   }
-  &-icon {
-    padding: var(--choice-item-icon-padding);
-  }
 }
 .choice__item {
   &_shape {
@@ -54,8 +45,11 @@
   &_size {
     @each $size in xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
-        min-height: var(--choice-size-$(size)-min-height);
+        min-height: var(--choice-item-size-$(size)-min-height);
         padding: var(--choice-item-size-$(size)-padding);
+        ^^&-label {
+          gap: var(--choice-item-size-$(size)-gap);
+        }
       }
     }
   }
@@ -75,22 +69,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,30 +113,55 @@
     }
   }
 }
+.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;
-  --choice-size-l-height: 40px;
-
   --choice-size-s-min-height: 28px;
-  --choice-size-m-min-height: 36px;
-  --choice-size-l-min-height: 40px;
-
   --choice-size-s-row-gap: 12px;
   --choice-size-s-column-gap: 12px;
 
   --choice-size-m-row-gap: 12px;
   --choice-size-m-column-gap: 12px;
+  --choice-size-m-height: 36px;
+  --choice-size-m-min-height: 36px;
 
+  --choice-size-l-height: 40px;
+  --choice-size-l-min-height: 40px;
   --choice-size-l-row-gap: 12px;
   --choice-size-l-column-gap: 12px;
 
-  --choice-shape-rounded: 8px;
+  --choice-item-size-s-padding: 0px 6px;
+  --choice-item-size-s-min-height: 24px;
+  --choice-item-size-s-gap: 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-m-padding: 0px 12px;
+  --choice-item-size-m-min-height: 32px;
+  --choice-item-size-m-gap: 8px;
 
-  --choice-item-icon-padding: 0;
-  --choice-item-shape-rounded: 8px;
+  --choice-item-size-l-padding: 0px 12px;
+  --choice-item-size-l-min-height: 36px;
+  --choice-item-size-l-gap: 8px;
 }

package/dist/css/components/Choice/css/__item/choice__item.css

@@ -8,12 +8,6 @@
     border-right: var(--chioce-item-border-right);
   }
   */
-  &_state_disabled {
-    background: var(--choice-item-state-disabled-background);
-    &:hover {
-      background: var(--choice-item-state-disabled-background);
-    }
-  }
   & input {
     width: 100%;
     height: 100%;
@@ -35,7 +29,4 @@
     transition: color 0.5s ease;
     cursor: pointer;
   }
-  &-icon {
-    padding: var(--choice-item-icon-padding);
-  }
 }

package/dist/css/components/Choice/css/__item/choice__item_size.css

@@ -2,8 +2,11 @@
   &_size {
     @each $size in xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
-        min-height: var(--choice-size-$(size)-min-height);
+        min-height: var(--choice-item-size-$(size)-min-height);
         padding: var(--choice-item-size-$(size)-padding);
+        ^^&-label {
+          gap: var(--choice-item-size-$(size)-gap);
+        }
       }
     }
   }

package/dist/css/components/Code/Code.css

@@ -1,5 +1,4 @@
 .code {
-  width: 100%;
   &__wrapper {
     width: 100%;
     display: flex;
@@ -40,7 +39,6 @@
 .code__input {
   border: none;
   outline: none;
-
   &:focus {
     outline: none;
   }
@@ -78,11 +76,11 @@
   }
 }
 :root {
-  --code-input-shape-rounded: 0;
   --code-input-size-l-width: 56px;
-  --code-input-size-l-height: 48px;
-  --code-input-size-l-gap: 8px;
+  --code-input-size-l-height: 56px;
+  --code-size-l-gap: 8px;
+
   --code-input-size-m-width: 48px;
-  --code-input-size-m-height: 40px;
-  --code-input-size-m-gap: 6px;
+  --code-input-size-m-height: 48px;
+  --code-size-m-gap: 6px;
 }

package/dist/css/components/{DadataHintField/DadataHintField.css → Dadata/Dadata.css}

@@ -3,13 +3,13 @@
     width: 100%;
     ^&__input {
       height: auto;
-      color: var(--react-dadata-color);
-      padding: var(--react-dadata-padding);
-      border: 1px solid var(--react-dadata-border);
-      border-radius: var(--react-dadata-border-radius);
+      color: var(--dadata-color);
+      padding: var(--dadata-padding);
+      border: 1px solid var(--dadata-border);
+      border-radius: var(--dadata-border-radius);
       box-shadow: none;
       &:hover {
-        border: solid 1px var(--react-dadata-hover-border);
+        border: solid 1px var(--dadata-hover-border);
       }
     }
   }
@@ -19,7 +19,7 @@
   &__suggestion {
     position: relative !important;
     &:hover {
-      background: var(--react-dadata-suggestion-hover-color, --color-accent-tertiary);
+      background: var(--dadata-suggestion-hover-color, --color-accent-tertiary);
     }
   }
   &--highlighted {
@@ -27,13 +27,13 @@
   }
   & .input_state {
     &_error {
-      border: solid 1px var(--react-dadata-error-border);
+      border: solid 1px var(--dadata-error-border);
       &:hover {
-        border: solid 1px var(--react-dadata-error-border);
+        border: solid 1px var(--dadata-error-border);
       }
     }
     &_focus {
-      border: solid 1px var(--react-dadata-focus-border);
+      border: solid 1px var(--dadata-focus-border);
     }
   }
 }

package/dist/css/components/HTMLContent/HTMLContent.css

@@ -2,43 +2,43 @@
   & h1 {
     width: 100%;
     color: var(--html-content-title-h1-color);
-    padding: var(--html-content-title-h1-padding, 0);
-    margin: var(--html-content-title-h1-margin, 0);
+    padding: var(--html-content-title-h1-padding);
+    margin: var(--html-content-title-h1-margin);
     @mixin h1;
   }
   & h2 {
     width: 100%;
     color: var(--html-content-title-h2-color);
-    padding: var(--html-content-title-h2-padding, 0);
-    margin: var(--html-content-title-h2-margin, 0);
+    padding: var(--html-content-title-h2-padding);
+    margin: var(--html-content-title-h2-margin);
     @mixin h2;
   }
   & h3 {
     width: 100%;
     color: var(--html-content-title-h3-color);
-    padding: var(--html-content-title-h3-padding, 0);
-    margin: var(--html-content-title-h3-margin, 0);
+    padding: var(--html-content-title-h3-padding);
+    margin: var(--html-content-title-h3-margin);
     @mixin h3;
   }
   & h4 {
     width: 100%;
     color: var(--html-content-title-h4-color);
-    padding: var(--html-content-title-h4-padding, 0);
-    margin: var(--html-content-title-h4-margin, 0);
+    padding: var(--html-content-title-h4-padding);
+    margin: var(--html-content-title-h4-margin);
     @mixin h4;
   }
   & h5 {
     width: 100%;
     color: var(--html-content-title-h5-color);
-    padding: var(--html-content-title-h5-padding, 0);
-    margin: var(--html-content-title-h5-margin, 0);
+    padding: var(--html-content-title-h5-padding);
+    margin: var(--html-content-title-h5-margin);
     @mixin h5;
   }
   & h6 {
     width: 100%;
     color: var(--html-content-title-h6-color);
-    padding: var(--html-content-title-h6-padding, 0);
-    margin: var(--html-content-title-h6-margin, 0);
+    padding: var(--html-content-title-h6-padding);
+    margin: var(--html-content-title-h6-margin);
     @mixin h6;
   }
 }
@@ -64,22 +64,47 @@
       }
     }
   }
+  & ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    & li {
+      padding: 0 0 16px 24px;
+    }
+    & > li {
+      gap: 32px;
+      padding: 0 0 16px 0;
+      margin: 0;
+      display: block;
+      @mixin p;
+    }
+  }
 }
 .html-content {
   & table {
-    margin: var(--html-content-table-margin, 0);
+    margin: var(--html-content-table-margin);
     @media (--mobile) {
-      margin: var(--html-content-table-margin-mobile, 0);
+      margin: var(--html-content-table-margin-mobile);
       display: flex;
     }
     & tr {
-      display: flex;
       flex-wrap: wrap;
+      @media (--mobile) {
+        display: flex;
+      }
+      & th {
+        padding: var(--html-content-table-th-padding);
+        @media (--mobile) {
+          padding: var(--html-content-table-th-padding-mobile);
+        }
+        @mixin p;
+      }
       & td {
-        padding: var(--html-content-table-td-padding, 0);
+        padding: var(--html-content-table-td-padding);
         @media (--mobile) {
-          padding: var(--html-content-table-td-padding-mobile, 0);
+          padding: var(--html-content-table-td-padding-mobile);
         }
+        @mixin p;
       }
     }
   }
@@ -87,13 +112,55 @@
 .html-content {
   & p {
     color: var(--html-content-p-color);
-    margin: var(--html-content-p-margin, 0);
+    margin: var(--html-content-p-margin);
     @mixin p;
   }
   & a {
     color: var(--html-content-link-color);
     text-decoration: none;
+    @mixin p;
   }
 }
 .html-content {
 }
+:root {
+  --html-content-p-color: 0;
+  --html-content-p-margin: 0;
+  --html-content-link-color: 0;
+
+  /* h1 */
+  --html-content-title-h1-color: 0;
+  --html-content-title-h1-padding: 0;
+  --html-content-title-h1-margin: 0;
+
+  /* h2 */
+  --html-content-title-h2-color: 0;
+  --html-content-title-h2-padding: 0;
+  --html-content-title-h2-margin: 0;
+
+  /* h3 */
+  --html-content-title-h3-color: 0;
+  --html-content-title-h3-padding: 0;
+  --html-content-title-h3-margin: 0;
+
+  /* h4 */
+  --html-content-title-h4-color: 0;
+  --html-content-title-h4-padding: 0;
+  --html-content-title-h4-margin: 0;
+
+  /* h5 */
+  --html-content-title-h5-color: 0;
+  --html-content-title-h5-padding: 0;
+  --html-content-title-h5-margin: 0;
+
+  /* h6 */
+  --html-content-title-h6-color: 0;
+  --html-content-title-h6-padding: 0;
+  --html-content-title-h6-margin: 0;
+
+  /* Table */
+  --html-content-table-margin: 0;
+  --html-content-table-margin-mobile: 0;
+  --html-content-table-td-padding: 0;
+  --html-content-table-td-padding-mobile: 0;
+}

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