@itcase/ui 1.8.38 → 1.8.40

package/dist/components/Response.js

@@ -3,24 +3,26 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import clsx from 'clsx';
 import SVG from 'react-inlinesvg';
+import { urlWithAssetPrefix } from '../hoc/urlWithAssetPrefix.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Button } from '../Button_es_BigB2Wz6.js';
+import { B as Button } from '../Button_es_BiIuX0ER.js';
 import { G as Group } from '../Group_es_CYW2Hquh.js';
 import { T as Text } from '../Text_es_BfLRfj-5.js';
+import '@itcase/common';
+import '../context/UrlAssetPrefix.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
 import '../context/Notifications.js';
 import 'uuid';
-import '@itcase/common';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Tooltip_es_ltCY-w4M.js';
+import '../Tooltip_es_Y2aoFQW7.js';
 import '../Link_es_DxtZLeKY.js';
 import '../Loader_es_GYOr0UTX.js';
 
@@ -142,7 +144,7 @@ var responseConfig = {
         responseConfig.appearance = appearanceConfig;
     },
 };
-function Response(props) {
+var Response = urlWithAssetPrefix(function Response(props) {
     var className = props.className, appearance = props.appearance, width = props.width, height = props.height, title = props.title, desc = props.desc, primaryButton = props.primaryButton, onClickSecondaryButton = props.onClickSecondaryButton, secondaryButton = props.secondaryButton, before = props.before, after = props.after, isSkeleton = props.isSkeleton;
     var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
         var _a;
@@ -150,6 +152,7 @@ function Response(props) {
     }, {});
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, titleTextWeight = propsGenerator.titleTextWeight, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWeight = propsGenerator.descTextWeight, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, onClickPrimaryButton = propsGenerator.onClickPrimaryButton, primaryButtonAfter = propsGenerator.primaryButtonAfter, primaryButtonAppearance = propsGenerator.primaryButtonAppearance, primaryButtonBefore = propsGenerator.primaryButtonBefore, primaryButtonFill = propsGenerator.primaryButtonFill, primaryButtonFillHover = propsGenerator.primaryButtonFillHover, primaryButtonLabel = propsGenerator.primaryButtonLabel, primaryButtonLabelTextColor = propsGenerator.primaryButtonLabelTextColor, primaryButtonLabelTextSize = propsGenerator.primaryButtonLabelTextSize, primaryButtonShape = propsGenerator.primaryButtonShape, primaryButtonSize = propsGenerator.primaryButtonSize, primaryButtonWidth = propsGenerator.primaryButtonWidth, secondaryButtonAfter = propsGenerator.secondaryButtonAfter, secondaryButtonAppearance = propsGenerator.secondaryButtonAppearance, secondaryButtonBefore = propsGenerator.secondaryButtonBefore, secondaryButtonFill = propsGenerator.secondaryButtonFill, secondaryButtonFillHover = propsGenerator.secondaryButtonFillHover, secondaryButtonLabel = propsGenerator.secondaryButtonLabel, secondaryButtonLabelTextColor = propsGenerator.secondaryButtonLabelTextColor, secondaryButtonLabelTextSize = propsGenerator.secondaryButtonLabelTextSize, secondaryButtonShape = propsGenerator.secondaryButtonShape, secondaryButtonSize = propsGenerator.secondaryButtonSize, secondaryButtonWidth = propsGenerator.secondaryButtonWidth, dataTestId = propsGenerator.dataTestId, dataTour = propsGenerator.dataTour, imageSrc = propsGenerator.imageSrc, shapeClass = propsGenerator.shapeClass, svgFillClass = propsGenerator.svgFillClass, SvgImage = propsGenerator.SvgImage, svgPathFillClass = propsGenerator.svgPathFillClass, svgSrc = propsGenerator.svgSrc;
+    // TODO: use Icon instead?
     var ImageComponent = useMemo(function () {
         var src = imageSrc || svgSrc;
         var Image = SvgImage;
@@ -183,7 +186,7 @@ function Response(props) {
                 secondaryButtonLabel ||
                 secondaryButton ||
                 appearanceConfig) && (jsxs(Group, { className: "response__button", width: "fill", children: [primaryButtonLabel ? (jsx(Button, { className: "response__button-item", appearance: primaryButtonAppearance, width: primaryButtonWidth || 'fill', size: primaryButtonSize, fill: primaryButtonFill, fillHover: primaryButtonFillHover, label: primaryButtonLabel, labelTextColor: primaryButtonLabelTextColor, labelTextSize: primaryButtonLabelTextSize, shape: primaryButtonShape, before: primaryButtonBefore, after: primaryButtonAfter, onClick: onClickPrimaryButton })) : (primaryButton), secondaryButtonLabel ? (jsx(Button, { className: "response__button-item", appearance: secondaryButtonAppearance, width: secondaryButtonWidth || 'fill', size: secondaryButtonSize, fill: secondaryButtonFill, fillHover: secondaryButtonFillHover, label: secondaryButtonLabel, labelTextColor: secondaryButtonLabelTextColor, labelTextSize: secondaryButtonLabelTextSize, shape: secondaryButtonShape, before: secondaryButtonBefore, after: secondaryButtonAfter, onClick: onClickSecondaryButton })) : (secondaryButton)] })), after] }));
-}
+});
 var removeFillStroke = function (code) {
     return code
         .replace(/fill=".*?"/g, 'fill=""')

package/dist/components/SVGContent.js

@@ -1,16 +1,18 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import SVG from 'react-inlinesvg';
+import { urlWithAssetPrefix } from '../hoc/urlWithAssetPrefix.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react';
+import '@itcase/common';
+import '../context/UrlAssetPrefix.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
 import '../context/Notifications.js';
 import 'uuid';
-import '@itcase/common';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
@@ -18,13 +20,13 @@ import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
 
-function SVGContent(props) {
+var SVGContent = urlWithAssetPrefix(function SVGContent(props) {
     var className = props.className, src = props.src, SvgImage = props.SvgImage;
     var propsGenerator = useDevicePropsGenerator(props);
     var svgFillClass = propsGenerator.svgFillClass, svgFillHoverClass = propsGenerator.svgFillHoverClass;
     // @ts-expect-error
     var svgContentStyles = useStyles(props).styles;
     return (jsxs("div", { className: clsx(className, 'svg-content', svgFillClass && "svg_fill_".concat(svgFillClass), svgFillHoverClass && "svg_fill_hover_".concat(svgFillHoverClass)), style: svgContentStyles, children: [src && jsx(SVG, { src: src }), SvgImage && jsx(SvgImage, {})] }));
-}
+});
 
 export { SVGContent };

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_ltCY-w4M.js';
+import { I as Icon } from '../Tooltip_es_Y2aoFQW7.js';
 import { T as Text } from '../Text_es_BfLRfj-5.js';
 import { S as Scrollbar } from '../Scrollbar_es_CThJeCLF.js';
 import 'lodash/camelCase';
@@ -21,6 +21,8 @@ import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
 import 'react-inlinesvg';
+import '../hoc/urlWithAssetPrefix.js';
+import '../context/UrlAssetPrefix.js';
 import '../Link_es_DxtZLeKY.js';
 import 'react-scrollbars-custom';
 

package/dist/components/Segmented.js

@@ -2,7 +2,7 @@ import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useRef, useMemo, createRef, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
-import { I as Icon } from '../Tooltip_es_ltCY-w4M.js';
+import { I as Icon } from '../Tooltip_es_Y2aoFQW7.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { T as Text } from '../Text_es_BfLRfj-5.js';
 import '../hooks/useStyles/useStyles.js';
@@ -18,6 +18,8 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/styleAttributes.js';
 import 'react-inlinesvg';
+import '../hoc/urlWithAssetPrefix.js';
+import '../context/UrlAssetPrefix.js';
 import '../Link_es_DxtZLeKY.js';
 import 'lodash/castArray';
 

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_ltCY-w4M.js';
+import { I as Icon, B as Badge } from '../Tooltip_es_Y2aoFQW7.js';
 import React, { useRef, useCallback, useEffect, useMemo } from 'react';
 import clsx from 'clsx';
 import CreatableSelect from 'react-select/creatable';
@@ -22,6 +22,8 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/styleAttributes.js';
 import 'react-inlinesvg';
+import '../hoc/urlWithAssetPrefix.js';
+import '../context/UrlAssetPrefix.js';
 import '../Link_es_DxtZLeKY.js';
 import 'lodash/castArray';
 
@@ -49,7 +51,7 @@ var selectAppearanceDefault = {
         noOptionsText: 'Ничего не найдено...',
         noOptionsTextColor: 'surfaceTextPrimary',
         optionFill: 'surfacePrimary',
-        optionFillHover: 'surfaceHover',
+        optionFillHover: 'surfaceSecondary',
         optionTextColor: 'surfaceTextPrimary',
         placeholder: 'Выбрать...',
         placeholderTextColor: 'surfaceTextQuaternary',
@@ -225,7 +227,7 @@ var SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
         return {};
     }, [appearance]);
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, elevation = propsGenerator.elevation, badgeTextSize = propsGenerator.badgeTextSize, clearIconFill = propsGenerator.clearIconFill, dividerFill = propsGenerator.dividerFill, dropdownFillHover = propsGenerator.dropdownFillHover, dropdownIconFill = propsGenerator.dropdownIconFill, dropdownIconShape = propsGenerator.dropdownIconShape, headingFillClass = propsGenerator.headingFillClass, headingFillHoverClass = propsGenerator.headingFillHoverClass, headingTextColorClass = propsGenerator.headingTextColorClass, headingTextSizeClass = propsGenerator.headingTextSizeClass, headingTextWeightClass = propsGenerator.headingTextWeightClass, inputBorderColorClass = propsGenerator.inputBorderColorClass, inputBorderColorHoverClass = propsGenerator.inputBorderColorHoverClass, inputCaretColorClass = propsGenerator.inputCaretColorClass, inputFillClass = propsGenerator.inputFillClass, inputShapeClass = propsGenerator.inputShapeClass, inputTextColorClass = propsGenerator.inputTextColorClass, inputTextSizeClass = propsGenerator.inputTextSizeClass, multipleItemFill = propsGenerator.multipleItemFill, multipleItemFillHover = propsGenerator.multipleItemFillHover, multipleItemIcon = propsGenerator.multipleItemIcon, multipleItemIconFill = propsGenerator.multipleItemIconFill, multipleItemTextColorClass = propsGenerator.multipleItemTextColorClass, multipleItemTextSizeClass = propsGenerator.multipleItemTextSizeClass, noOptionsTextColorClass = propsGenerator.noOptionsTextColorClass, noOptionsTextSizeClass = propsGenerator.noOptionsTextSizeClass, optionBorderClass = propsGenerator.optionBorderClass, optionBorderTypeClass = propsGenerator.optionBorderTypeClass, optionFillClass = propsGenerator.optionFillClass, optionFillHoverClass = propsGenerator.optionFillHoverClass, optionShapeClass = propsGenerator.optionShapeClass, optionTextColorClass = propsGenerator.optionTextColorClass, optionTextSizeClass = propsGenerator.optionTextSizeClass, placeholderTextColor = propsGenerator.placeholderTextColor, placeholderTextSize = propsGenerator.placeholderTextSize, shapeClass = propsGenerator.shapeClass, widthClass = propsGenerator.widthClass, sizeClass = propsGenerator.sizeClass;
+    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, elevation = propsGenerator.elevation, badgeTextSize = propsGenerator.badgeTextSize, clearIconFill = propsGenerator.clearIconFill, dividerFill = propsGenerator.dividerFill, dropdownFillHover = propsGenerator.dropdownFillHover, dropdownIconFill = propsGenerator.dropdownIconFill, dropdownIconShape = propsGenerator.dropdownIconShape, headingFillClass = propsGenerator.headingFillClass, headingFillHoverClass = propsGenerator.headingFillHoverClass, headingTextColorClass = propsGenerator.headingTextColorClass, headingTextSizeClass = propsGenerator.headingTextSizeClass, headingTextWeightClass = propsGenerator.headingTextWeightClass, inputBorderColorClass = propsGenerator.inputBorderColorClass, inputBorderColorHoverClass = propsGenerator.inputBorderColorHoverClass, inputCaretColorClass = propsGenerator.inputCaretColorClass, inputFillClass = propsGenerator.inputFillClass, inputShapeClass = propsGenerator.inputShapeClass, inputTextColorClass = propsGenerator.inputTextColorClass, inputTextSizeClass = propsGenerator.inputTextSizeClass, multipleItemFill = propsGenerator.multipleItemFill, multipleItemFillHover = propsGenerator.multipleItemFillHover, multipleItemIcon = propsGenerator.multipleItemIcon, multipleItemIconFill = propsGenerator.multipleItemIconFill, multipleItemTextColorClass = propsGenerator.multipleItemTextColorClass, multipleItemTextSizeClass = propsGenerator.multipleItemTextSizeClass, noOptionsTextColorClass = propsGenerator.noOptionsTextColorClass, noOptionsTextSizeClass = propsGenerator.noOptionsTextSizeClass, optionBorderClass = propsGenerator.optionBorderClass, optionBorderTypeClass = propsGenerator.optionBorderTypeClass, optionFillClass = propsGenerator.optionFillClass, optionFillHoverClass = propsGenerator.optionFillHoverClass, optionShapeClass = propsGenerator.optionShapeClass, optionTextColorClass = propsGenerator.optionTextColorClass, optionTextSizeClass = propsGenerator.optionTextSizeClass, placeholderTextColor = propsGenerator.placeholderTextColor, placeholderTextSize = propsGenerator.placeholderTextSize, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
     return (jsx(SelectComponent, { className: clsx(className, 'select', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), shapeClass && "select_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), sizeClass && "select_size_".concat(sizeClass), hideValueContainer && 'select_state_hide-value-container', set && "select_set_".concat(set), widthClass && "select_width_".concat(widthClass)), elevation: elevation, isDisabled: isDisabled, badgeAppearance: badgeAppearance, badgeSize: badgeSize, badgeTextSize: badgeTextSize, classNamePrefix: "select", clearIcon: clearIcon, clearIconFill: clearIconFill, components: {
             IndicatorSeparator: function () { return null; },
             ClearIndicator: SelectClearIndicator,

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_ltCY-w4M.js';
+import { b as Title } from '../Tooltip_es_Y2aoFQW7.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -20,6 +20,8 @@ import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
 import '../Text_es_BfLRfj-5.js';
 import 'react-inlinesvg';
+import '../hoc/urlWithAssetPrefix.js';
+import '../context/UrlAssetPrefix.js';
 import '../Link_es_DxtZLeKY.js';
 
 function Swiper(props) {

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_ltCY-w4M.js';
+import { B as Badge, I as Icon } from '../Tooltip_es_Y2aoFQW7.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';
@@ -21,6 +21,8 @@ import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
 import 'react-inlinesvg';
+import '../hoc/urlWithAssetPrefix.js';
+import '../context/UrlAssetPrefix.js';
 
 var tabAppearanceError = {
     errorPrimary: {

package/dist/components/Textarea.js

@@ -51,7 +51,7 @@ var textareaAppearanceDefault = {
 
 var textareaAppearanceDisabled = {
     disabledPrimary: {
-        fill: 'surfaceFillDisabled',
+        fill: 'surfaceDisabled',
         borderColor: 'errorBorderQuaternary',
         borderHover: 'errorBorderQuaternary',
         textColor: 'surfaceTextQuaternary',

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_ltCY-w4M.js';
+import { b as Title, B as Badge, I as Icon } from '../Tooltip_es_Y2aoFQW7.js';
 import { T as Text } from '../Text_es_BfLRfj-5.js';
 import 'react';
 import 'lodash/camelCase';
@@ -19,6 +19,8 @@ import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
 import 'react-inlinesvg';
+import '../hoc/urlWithAssetPrefix.js';
+import '../context/UrlAssetPrefix.js';
 import '../Link_es_DxtZLeKY.js';
 
 var tileAppearanceSize = {

package/dist/components/Title.js

@@ -1,4 +1,4 @@
-export { b as Title, d as titleAppearance, c as titleConfig } from '../Tooltip_es_ltCY-w4M.js';
+export { b as Title, d as titleAppearance, c as titleConfig } from '../Tooltip_es_Y2aoFQW7.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';
@@ -19,4 +19,6 @@ import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
 import '../Text_es_BfLRfj-5.js';
 import 'react-inlinesvg';
+import '../hoc/urlWithAssetPrefix.js';
+import '../context/UrlAssetPrefix.js';
 import '../Link_es_DxtZLeKY.js';

package/dist/components/Tooltip.js

@@ -1,4 +1,4 @@
-export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Tooltip_es_ltCY-w4M.js';
+export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Tooltip_es_Y2aoFQW7.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';
@@ -19,4 +19,6 @@ import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
 import '../Text_es_BfLRfj-5.js';
 import 'react-inlinesvg';
+import '../hoc/urlWithAssetPrefix.js';
+import '../context/UrlAssetPrefix.js';
 import '../Link_es_DxtZLeKY.js';

package/dist/context/UrlAssetPrefix.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useMemo } from 'react';
+
+var UrlAssetPrefixContext = createContext({
+    assetPrefix: undefined,
+    ignorePathsList: undefined,
+});
+function UrlAssetPrefixProvider(props) {
+    var assetPrefix = props.assetPrefix, ignorePathsList = props.ignorePathsList, children = props.children;
+    var value = useMemo(function () { return ({ assetPrefix: assetPrefix, ignorePathsList: ignorePathsList }); }, [assetPrefix, ignorePathsList]);
+    return (jsx(UrlAssetPrefixContext.Provider, { value: value, children: children }));
+}
+
+export { UrlAssetPrefixContext, UrlAssetPrefixProvider };

package/dist/css/components/Dropdown/Dropdown.css

@@ -109,6 +109,30 @@
     }
   }
 }
+.dropdown__item {
+  &&_skeleton {
+    background-size: 200% !important;
+    border: none;
+    animation: dropdownItemSkeleton 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 dropdownItemSkeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}
 :root {
   --dropdown-item-transition: all 0.2s ease 0s;
 

package/dist/css/components/Pagination/Pagination.css

@@ -30,8 +30,6 @@
   @each $size in xxl, xl, l, m, s, xs, xxs {
     &_size_$(size) {
       ^&__input {
-        min-width: var(--pagination-input-size-$(size)-min-width);
-        min-height: var(--pagination-input-size-$(size)-min-height);
         padding: var(--pagination-input-size-$(size)-padding);
         gap: var(--pagination-input-size-$(size)-gap);
       }
@@ -48,13 +46,34 @@
     }
   }
 }
+.pagination {
+  &&_skeleton {
+    background-size: 200% !important;
+    border: none;
+    animation: paginationSkeleton 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 paginationSkeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}
 .pagination {
   &__container {
     margin: var(--paginator-margin);
     ^&__item {
-      width: var(--paginator-item-width);
-      height: var(--paginator-item-height);
-      background: var(--paginator-item-default-fill);
       border: var(
         --paginator-item-border,
         solid 1px var(--paginator-item-default-border)
@@ -63,9 +82,6 @@
       display: flex;
       transition: var(--paginator-item-transition);
       cursor: pointer;
-      &:hover {
-        background: var(--paginator-item-default-fill-hover);
-      }
       &_break {
         display: flex;
         ^&-link {
@@ -76,31 +92,37 @@
       &-link {
         width: 100%;
         height: 100%;
-        color: var(--paginator-item-default-text);
         display: flex;
         justify-content: center;
         align-items: center;
-        @mixin text-m;
-      }
-    }
-  }
-}
-.pagination {
-  &__item {
-    border: solid 1px var(--paginator-item-active-border);
-    &&_state {
-      &_active {
-        background: var(--paginator-item-active-fill);
-        &:hover {
-          background: var(--paginator-item-active-fill-hover);
-        }
-        ^^&-link {
-          color: var(--paginator-item-active-text);
+
+        &_size {
+          @each $size in xs, s, m, l {
+            &_$(size) {
+              @mixin text-$(size);
+            }
+          }
         }
       }
     }
   }
 }
+/* .pagination { */
+/*  &__item { */
+/*    border: solid 1px var(--paginator-item-active-border); */
+/*    &&_state { */
+/*      &_active { */
+/*        background: var(--paginator-item-active-fill); */
+/*        &:hover { */
+/*          background: var(--paginator-item-active-fill-hover); */
+/*        } */
+/*        ^^&-link { */
+/*          color: var(--paginator-item-active-text); */
+/*        } */
+/*      } */
+/*    } */
+/*  } */
+/* } */
 .pagination {
   &__item {
     &&_state {
@@ -121,11 +143,34 @@
     }
   }
 }
+.pagination__item {
+  @each $size in l, m, s, xs {
+    &_size_$(size) {
+      width: var(--paginator-item-$(size)-width) !important;
+      height: var(--paginator-item-$(size)-height) !important;
+    }
+  }
+}
 :root {
   --paginator-margin: 0;
 
-  --paginator-item-width: 32px;
-  --paginator-item-height: 32px;
+  --paginator-item-l-width: 40px;
+  --paginator-item-l-height: 40px;
+
+  --paginator-item-m-width: 32px;
+  --paginator-item-m-height: 32px;
+
+  --paginator-item-s-width: 24px;
+  --paginator-item-s-height: 24px;
+
+  --paginator-item-xs-width: 20px;
+  --paginator-item-xs-height: 20px;
+
+  --paginator-item-l-padding: 0 12px;
+  --paginator-item-m-padding: 0 12px;
+  --paginator-item-s-padding: 0 8px;
+  --paginator-item-xs-padding: 0 6px;
+
   --paginator-item-border: none;
   --paginator-item-border-radius: 50%;
   --pagination-input-color: none;
@@ -151,8 +196,15 @@
   --paginator-item-disabled-text: var(--color-surface-text-primary);
   --paginator-item-disabled-icon: var(--color-surface-item-disabled);
 
-  --pagination-input-size-m-padding: 0 12px;
+  --pagination-input-size-l-padding: 10px 12px;
+  --pagination-input-size-l-gap: 4px;
+
+  --pagination-input-size-m-padding: 7px 12px;
   --pagination-input-size-m-gap: 4px;
-  --pagination-input-size-m-min-height: 32px;
-  --pagination-input-size-m-min-width: 64px;
+
+  --pagination-input-size-s-padding: 4px 8px;
+  --pagination-input-size-s-gap: 2px;
+
+  --pagination-input-size-xs-padding: 2px 6px;
+  --pagination-input-size-xs-gap: 2px;
 }

package/dist/css/components/Pagination/css/__item/pagination__item.css

@@ -2,9 +2,6 @@
   &__container {
     margin: var(--paginator-margin);
     ^&__item {
-      width: var(--paginator-item-width);
-      height: var(--paginator-item-height);
-      background: var(--paginator-item-default-fill);
       border: var(
         --paginator-item-border,
         solid 1px var(--paginator-item-default-border)
@@ -13,9 +10,6 @@
       display: flex;
       transition: var(--paginator-item-transition);
       cursor: pointer;
-      &:hover {
-        background: var(--paginator-item-default-fill-hover);
-      }
       &_break {
         display: flex;
         ^&-link {
@@ -26,11 +20,17 @@
       &-link {
         width: 100%;
         height: 100%;
-        color: var(--paginator-item-default-text);
         display: flex;
         justify-content: center;
         align-items: center;
-        @mixin text-m;
+
+        &_size {
+          @each $size in xs, s, m, l {
+            &_$(size) {
+              @mixin text-$(size);
+            }
+          }
+        }
       }
     }
   }

package/dist/css/components/Pagination/css/__item/pagination__item_size.css

@@ -0,0 +1,8 @@
+.pagination__item {
+  @each $size in l, m, s, xs {
+    &_size_$(size) {
+      width: var(--paginator-item-$(size)-width) !important;
+      height: var(--paginator-item-$(size)-height) !important;
+    }
+  }
+}

package/dist/css/components/Pagination/css/__item/pagination__item_state_active.css

@@ -1,16 +1,16 @@
-.pagination {
-  &__item {
-    border: solid 1px var(--paginator-item-active-border);
-    &&_state {
-      &_active {
-        background: var(--paginator-item-active-fill);
-        &:hover {
-          background: var(--paginator-item-active-fill-hover);
-        }
-        ^^&-link {
-          color: var(--paginator-item-active-text);
-        }
-      }
-    }
-  }
-}
+/* .pagination { */
+/*  &__item { */
+/*    border: solid 1px var(--paginator-item-active-border); */
+/*    &&_state { */
+/*      &_active { */
+/*        background: var(--paginator-item-active-fill); */
+/*        &:hover { */
+/*          background: var(--paginator-item-active-fill-hover); */
+/*        } */
+/*        ^^&-link { */
+/*          color: var(--paginator-item-active-text); */
+/*        } */
+/*      } */
+/*    } */
+/*  } */
+/* } */

package/dist/css/components/Radio/Radio.css

@@ -4,8 +4,6 @@
   grid-template-rows: auto auto;
   column-gap: 4px;
   &__item {
-    min-width: 16px;
-    min-height: 16px;
     font-size: 0;
     line-height: 0;
     margin: 2px 0 0 0;
@@ -15,8 +13,7 @@
     cursor: pointer;
     grid-row-start: span 2;
     ^&__input {
-      width: 100%;
-      height: 100%;
+      inset: 0;
       font-size: 0;
       line-height: 0;
       margin: 0;
@@ -54,8 +51,50 @@
     }
   }
 }
-
+.radio {
+  @each $size in m, xs, xxs {
+    &_size_$(size) {
+      ^&__item {
+        min-width: var(--radio-$(size)-min-width);
+        min-height: var(--radio-$(size)-min-height);
+      }
+    }
+  }
+}
+.radio {
+  &&_skeleton {
+    background-size: 200% !important;
+    border: none;
+    animation: radioSkeleton 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 radioSkeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}
 :root {
+  --radio-m-min-width: 16px;
+  --radio-m-min-height: 16px;
+
+  --radio-xs-min-width: 12px;
+  --radio-xs-min-height: 12px;
+
+  --radio-xxs-min-width: 10px;
+  --radio-xxs-min-height: 10px;
+
   --radio-state-border-hover: var(--color-surface-border-tertiary);
   --radio-success-border: var(--color-surface-border-tertiary);
   --radio-shape-rounded: 0;

package/dist/css/components/Select/Select.css

@@ -171,6 +171,7 @@
         color: var(--color-surface-text-primary);
       }
       ^^&__dropdown-indicator {
+        display: flex;
       }
     }
   }

package/dist/css/components/Select/css/__indicators/select__indicators.css

@@ -14,6 +14,7 @@
         color: var(--color-surface-text-primary);
       }
       ^^&__dropdown-indicator {
+        display: flex;
       }
     }
   }