@itcase/ui 1.8.0 → 1.8.1

package/dist/components/Pagination.js

@@ -5,7 +5,8 @@ import clsx from 'clsx';
 import ceil from 'lodash/ceil';
 import ReactPaginate from 'react-paginate';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { D as Dropdown, a as DropdownItem } from '../DropdownItem-f29l8dds.js';
+import { useStyles } from '../hooks/useStyles/useStyles.js';
+import { D as Dropdown, a as DropdownItem } from '../DropdownItem-Cl1pYnVf.js';
 import { I as Icon } from '../Icon-BF7i3XdQ.js';
 import { T as Text } from '../Text-aaWArShm.js';
 import 'lodash/camelCase';
@@ -18,7 +19,6 @@ import '../context/UIContext.js';
 import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
-import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
 import '../Divider-CUFKsm-9.js';
@@ -27,8 +27,8 @@ import '../Link-Cn7hiWmM.js';
 import '../Tooltip-DP32J5V6.js';
 import '../Title--_epIXkC.js';
 
-var paginationAppearance = {
-    default: {
+var paginationAppearanceSurface = {
+    surfacePrimary: {
         fill: 'surfacePrimary',
         fillHover: 'surfaceSecondary',
         gap: '8',
@@ -37,7 +37,7 @@ var paginationAppearance = {
         pageCountDescTextColor: 'surfaceTextPrimary',
         pageCountDescTextSize: 'm',
         pageCountDropdownAlignment: 'topCenter',
-        pageCountDropdownElevation: '8',
+        pageCountDropdownElevation: 8,
         pageCountDropdownFill: 'surfacePrimary',
         pageCountDropdownItemDividerFill: 'surfaceSecondary',
         pageCountDropdownItemDividerSize: 'xxs',
@@ -52,7 +52,6 @@ var paginationAppearance = {
         pageCountDropdownItemShowDivider: true,
         pageCountDropdownItemSize: 'l',
         pageCountDropdownItemWidth: 'hug',
-        pageCountDropdownSet: 'default',
         pageCountDropdownShape: 'rounded',
         pageCountInputIconColor: 'surfaceItemPrimary',
         pageCountInputIconFillSize: '24',
@@ -62,6 +61,8 @@ var paginationAppearance = {
     },
 };
 
+var paginationAppearance = __assign({}, paginationAppearanceSurface);
+
 var paginationConfig = {
     appearance: paginationAppearance,
     setAppearance: function (appearanceConfig) {
@@ -69,7 +70,7 @@ var paginationConfig = {
     },
 };
 function Pagination(props) {
-    var className = props.className, appearance = props.appearance, _a = props.allItemsCount, allItemsCount = _a === void 0 ? 0 : _a, marginPagesDisplayed = props.marginPagesDisplayed, nextLabel = props.nextLabel, _b = props.pageCountArray, pageCountArray = _b === void 0 ? [10, 20, 50, 100] : _b, pageCountDesc = props.pageCountDesc, pageCountDescTextColor = props.pageCountDescTextColor, pageCountDescTextSize = props.pageCountDescTextSize, pageCountDropdownAlignment = props.pageCountDropdownAlignment, pageCountDropdownElevation = props.pageCountDropdownElevation, pageCountDropdownFill = props.pageCountDropdownFill, pageCountDropdownItemDividerDirection = props.pageCountDropdownItemDividerDirection, pageCountDropdownItemDividerFill = props.pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize = props.pageCountDropdownItemDividerSize, pageCountDropdownItemFill = props.pageCountDropdownItemFill, pageCountDropdownItemFillActive = props.pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover = props.pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover = props.pageCountDropdownItemFillHover, pageCountDropdownItemLabelAlign = props.pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor = props.pageCountDropdownItemLabelColor, _c = props.pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActive = _c === void 0 ? '' : _c, pageCountDropdownItemLabelSize = props.pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap = props.pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider = props.pageCountDropdownItemShowDivider, pageCountDropdownItemSize = props.pageCountDropdownItemSize, pageCountDropdownItemWidth = props.pageCountDropdownItemWidth, pageCountDropdownSet = props.pageCountDropdownSet, pageCountDropdownShape = props.pageCountDropdownShape, pageCountInputIcon = props.pageCountInputIcon, pageCountInputIconColor = props.pageCountInputIconColor, pageCountInputIconFillSize = props.pageCountInputIconFillSize, pageCountInputIconSrc = props.pageCountInputIconSrc, pageCountInputTextColor = props.pageCountInputTextColor, pageCountInputTextSize = props.pageCountInputTextSize, _d = props.pageNumber, pageNumber = _d === void 0 ? 0 : _d, pageRangeDisplayed = props.pageRangeDisplayed, _e = props.perPageCount, perPageCount = _e === void 0 ? 0 : _e, previousLabel = props.previousLabel, isPageCount = props.isPageCount, _f = props.isPageCountDropdownReversed, isPageCountDropdownReversed = _f === void 0 ? false : _f, onChangePage = props.onChangePage, onChangePerPageCount = props.onChangePerPageCount, 
+    var className = props.className, appearance = props.appearance, _a = props.allItemsCount, allItemsCount = _a === void 0 ? 0 : _a, dataTestId = props.dataTestId, dataTour = props.dataTour, nextLabel = props.nextLabel, _b = props.pageCountArray, pageCountArray = _b === void 0 ? [10, 20, 50, 100] : _b, pageCountDropdownItemDividerDirection = props.pageCountDropdownItemDividerDirection, _c = props.pageCountDesc, pageCountDesc = _c === void 0 ? 'кол-во строк' : _c, pageCountInputIconSrc = props.pageCountInputIconSrc, _d = props.pageNumber, pageNumber = _d === void 0 ? 0 : _d, _e = props.perPageCount, perPageCount = _e === void 0 ? 0 : _e, previousLabel = props.previousLabel, isPageCount = props.isPageCount, _f = props.isPageCountDropdownReversed, isPageCountDropdownReversed = _f === void 0 ? false : _f, onChangePage = props.onChangePage, onChangePerPageCount = props.onChangePerPageCount, 
     /**
      * @deprecated The method should not be used
      */
@@ -131,49 +132,16 @@ function Pagination(props) {
         return (__assign(__assign({}, resultConfig), (_a = paginationConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
     }, {});
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var justifyContentClass = propsGenerator.justifyContentClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, gapClass = propsGenerator.gapClass;
-    return (jsxs("div", { className: "pagination", children: [jsx(ReactPaginate, { disabledClassName: "pagination__item_state_disabled cursor_type_default", disabledLinkClassName: "pagination__item_state_disabled", activeClassName: "pagination__item_state_active cursor_type_default", activeLinkClassName: "pagination__item-link_state_active", breakClassName: "pagination__item pagination__item_break", 
-                // break element
-                breakLabel: "...", breakLinkClassName: "pagination__item-link", containerClassName: clsx(className, 'pagination__container', justifyContentClass &&
+    var justifyContentClass = propsGenerator.justifyContentClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, marginPagesDisplayed = propsGenerator.marginPagesDisplayed, pageCountDescTextColor = propsGenerator.pageCountDescTextColor, pageCountDescTextSize = propsGenerator.pageCountDescTextSize, pageCountDropdownAlignment = propsGenerator.pageCountDropdownAlignment, pageCountDropdownElevation = propsGenerator.pageCountDropdownElevation, pageCountDropdownFill = propsGenerator.pageCountDropdownFill, pageCountDropdownItemDividerFill = propsGenerator.pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize = propsGenerator.pageCountDropdownItemDividerSize, pageCountDropdownItemFill = propsGenerator.pageCountDropdownItemFill, pageCountDropdownItemFillActive = propsGenerator.pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover = propsGenerator.pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover = propsGenerator.pageCountDropdownItemFillHover, pageCountDropdownItemLabelAlign = propsGenerator.pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor = propsGenerator.pageCountDropdownItemLabelColor, pageCountDropdownItemLabelColorActive = propsGenerator.pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelSize = propsGenerator.pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap = propsGenerator.pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider = propsGenerator.pageCountDropdownItemShowDivider, pageCountDropdownItemSize = propsGenerator.pageCountDropdownItemSize, pageCountDropdownItemWidth = propsGenerator.pageCountDropdownItemWidth, pageCountDropdownShape = propsGenerator.pageCountDropdownShape, pageCountInputIcon = propsGenerator.pageCountInputIcon, pageCountInputIconColor = propsGenerator.pageCountInputIconColor, pageCountInputIconFillSize = propsGenerator.pageCountInputIconFillSize, pageCountInputTextColor = propsGenerator.pageCountInputTextColor, pageCountInputTextSize = propsGenerator.pageCountInputTextSize, pageRangeDisplayed = propsGenerator.pageRangeDisplayed;
+    var paginationStyles = useStyles(props).styles;
+    return (jsxs("div", { className: "pagination", "data-testid": dataTestId, "data-tour": dataTour, style: paginationStyles, children: [jsx(ReactPaginate, { disabledClassName: "pagination__item_state_disabled cursor_type_default", disabledLinkClassName: "pagination__item_state_disabled", activeClassName: "pagination__item_state_active cursor_type_default", activeLinkClassName: "pagination__item-link_state_active", breakClassName: "pagination__item pagination__item_break", breakLabel: "...", breakLinkClassName: "pagination__item-link", containerClassName: clsx(className, 'pagination__container', justifyContentClass &&
                     "pagination_justify-content_".concat(justifyContentClass)), 
                 // pages settings
-                forcePage: paginationPageIndex, marginPagesDisplayed: marginPagesDisplayed || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.marginPagesDisplayed), nextClassName: "pagination__item pagination__item_next", 
+                forcePage: paginationPageIndex, marginPagesDisplayed: marginPagesDisplayed, nextClassName: "pagination__item pagination__item_next", 
                 // next button
-                nextLabel: nextLabel, nextLinkClassName: "pagination__item-link", 
-                // page item
-                pageClassName: "pagination__item", pageCount: paginationPagesCount, pageLinkClassName: "pagination__item-link", pageRangeDisplayed: pageRangeDisplayed || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageRangeDisplayed), previousClassName: "pagination__item pagination__item_previous", 
-                // previous button
-                previousLabel: previousLabel, previousLinkClassName: "pagination__item-link", onPageChange: _onChangePage }), isPageCount && (jsxs("div", { className: clsx(className, 'pagination__count', gapClass && "gap_".concat(gapClass)), children: [jsx(Text, { size: pageCountDescTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDescTextSize), textColor: pageCountDescTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDescTextColor), children: pageCountDesc || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDesc) }), jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), onClick: onClickCommandMenuButton, children: [jsx(Text, { size: pageCountInputTextSize ||
-                                    (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountInputTextSize), textColor: pageCountInputTextColor ||
-                                    (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountInputTextColor), children: activeDropdownItem }), jsx(Icon, { fillSize: pageCountInputIconFillSize ||
-                                    (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountInputIconFillSize), iconFill: pageCountInputIconColor ||
-                                    (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountInputIconColor), imageSrc: pageCountInputIconSrc, SvgImage: pageCountInputIcon }), jsx(Dropdown, { alignment: pageCountDropdownAlignment ||
-                                    (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownAlignment), fill: pageCountDropdownFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownFill), elevation: pageCountDropdownElevation ||
-                                    (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownElevation), shape: pageCountDropdownShape ||
-                                    (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownShape), isOpen: isOpenDropdown, set: pageCountDropdownSet || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownSet), setIsOpen: setIsOpenDropdown, children: pageCountDropdownArray.map(function (item, index) {
-                                    return activeDropdownItem === item ? (jsx(DropdownItem, { width: pageCountDropdownItemWidth ||
-                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemWidth), size: pageCountDropdownItemSize ||
-                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemSize), fill: pageCountDropdownItemFill ||
-                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemFill), fillActive: pageCountDropdownItemFillActive ||
-                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemFillActive), fillActiveHover: pageCountDropdownItemFillActiveHover ||
-                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemFillActiveHover), fillHover: pageCountDropdownItemFillHover ||
-                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemFillHover), label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign ||
-                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemLabelAlign), labelTextColor: pageCountDropdownItemLabelColor ||
-                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemLabelColor), labelTextColorActive: pageCountDropdownItemLabelColorActive ||
-                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemLabelColorActive), labelTextSize: pageCountDropdownItemLabelSize ||
-                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemLabelSize), labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill ||
-                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemDividerFill), dividerSize: pageCountDropdownItemDividerSize ||
-                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemDividerSize), showDivider: index < pageCountArray.length - 1 &&
-                                            (pageCountDropdownItemShowDivider ||
-                                                (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemShowDivider)), isActive: true, onClick: function (event) { return handleDropdownItemClick(event, item); } }, item)) : (jsx(DropdownItem, { width: pageCountDropdownItemWidth ||
-                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemWidth), size: pageCountDropdownItemSize ||
-                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemSize), fill: pageCountDropdownItemFill, fillHover: pageCountDropdownItemFillHover ||
-                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemFillHover), label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign ||
-                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemLabelAlign), labelTextColor: pageCountDropdownItemLabelColor ||
-                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemLabelColor), labelTextColorActive: pageCountDropdownItemLabelColorActive ||
-                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemLabelColorActive), labelTextSize: pageCountDropdownItemLabelSize ||
-                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemLabelSize), labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize ||
-                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemDividerSize), showDivider: index < pageCountArray.length - 1 &&
+                nextLabel: nextLabel, nextLinkClassName: "pagination__item-link", pageClassName: "pagination__item", pageCount: paginationPagesCount, pageLinkClassName: "pagination__item-link", pageRangeDisplayed: pageRangeDisplayed, previousClassName: "pagination__item pagination__item_previous", previousLabel: previousLabel, previousLinkClassName: "pagination__item-link", onPageChange: _onChangePage }), isPageCount && (jsxs("div", { className: clsx(className, 'pagination__count'), children: [jsx(Text, { className: "pagination__count-text", size: pageCountDescTextSize, textColor: pageCountDescTextColor, children: pageCountDesc }), jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), onClick: onClickCommandMenuButton, children: [jsx(Text, { size: pageCountInputTextSize, textColor: pageCountInputTextColor, children: activeDropdownItem }), jsx(Icon, { fillSize: pageCountInputIconFillSize, iconFill: pageCountInputIconColor, imageSrc: pageCountInputIconSrc, SvgImage: pageCountInputIcon }), jsx(Dropdown, { alignment: pageCountDropdownAlignment, fill: pageCountDropdownFill, elevation: pageCountDropdownElevation, shape: pageCountDropdownShape, isOpen: isOpenDropdown, setIsOpen: setIsOpenDropdown, children: pageCountDropdownArray.map(function (item, index) {
+                                    return activeDropdownItem === item ? (jsx(DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillActive: pageCountDropdownItemFillActive, fillActiveHover: pageCountDropdownItemFillActiveHover, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountArray.length - 1 &&
+                                            pageCountDropdownItemShowDivider, isActive: true, onClick: function (event) { return handleDropdownItemClick(event, item); } }, item)) : (jsx(DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountArray.length - 1 &&
                                             pageCountDropdownItemShowDivider, isActive: false, onClick: function (event) { return handleDropdownItemClick(event, item); } }, item));
                                 }) })] })] }))] }));
 }

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-K5n8BI_w.js';
+import { B as Button } from '../Button-DHOZJDHv.js';
 import { G as Group } from '../Group-C8NUU6k5.js';
 import { T as Text } from '../Text-aaWArShm.js';
 import 'lodash/camelCase';
@@ -24,7 +24,7 @@ import '../Icon-BF7i3XdQ.js';
 import '../Link-Cn7hiWmM.js';
 import '../Tooltip-DP32J5V6.js';
 import '../Title--_epIXkC.js';
-import '../Loader-BnhUh-g6.js';
+import '../Loader-Dquhwxz4.js';
 
 var img$6 = "data:image/svg+xml,%3csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='90' cy='90' r='90' fill='%23D9D9D9'/%3e%3cpath d='M93.2275 101.842H84.0659C83.8263 99.1898 83.976 96.839 84.515 94.7895C85.1138 92.74 86.2216 90.8111 87.8383 89.0027C89.515 87.1341 91.7904 85.2051 94.6647 83.2159C96.5808 81.8898 97.9581 80.5637 98.7964 79.2375C99.6946 77.9114 100.144 76.4345 100.144 74.807C100.144 72.2753 99.2156 70.1957 97.3593 68.5682C95.503 66.9406 93.0778 66.1269 90.0838 66.1269C87.3892 66.1269 84.7246 66.9105 82.0898 68.4777C79.4551 69.9847 77.0299 72.3959 74.8144 75.7112L67 67.9352C70.0539 64.0774 73.5868 61.1237 77.5988 59.0742C81.6707 57.0247 85.9521 56 90.4431 56C94.5749 56 98.2575 56.8439 101.491 58.5317C104.725 60.1592 107.269 62.3896 109.126 65.2227C111.042 67.9955 112 71.1601 112 74.7166C112 78.0922 111.042 81.1062 109.126 83.7584C107.269 86.4107 104.455 88.8821 100.683 91.1727C97.7485 92.8605 95.7725 94.4881 94.7545 96.0553C93.7365 97.6226 93.2275 99.5515 93.2275 101.842ZM96.1916 115.767C96.1916 117.756 95.4731 119.474 94.0359 120.92C92.5988 122.307 90.8323 123 88.7365 123C86.6407 123 84.8743 122.307 83.4371 120.92C82 119.474 81.2814 117.756 81.2814 115.767C81.2814 113.717 82 111.999 83.4371 110.613C84.8743 109.166 86.6407 108.443 88.7365 108.443C90.8323 108.443 92.5988 109.166 94.0359 110.613C95.4731 111.999 96.1916 113.717 96.1916 115.767Z' fill='%23747474'/%3e%3c/svg%3e";
 

package/dist/context/Notifications.js

@@ -12,11 +12,13 @@ var STATUSES = {
     warning: 'warning',
 };
 var NotificationsContext = createContext([]);
+/* eslint-disable @typescript-eslint/no-unused-vars */
 var NotificationsAPIContext = createContext({
     hideNotifications: function () { },
-    showNotification: function () { },
+    showNotification: function (notification, onClose) { },
     notificationStatuses: STATUSES,
 });
+/* eslint-enable @typescript-eslint/no-unused-vars */
 function NotificationsProvider(props) {
     var _a = props.initialNotificationsList, initialNotificationsList = _a === void 0 ? [] : _a, isLogRequestsErrors = props.isLogRequestsErrors, children = props.children;
     var _b = useState(function () {

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

@@ -1,26 +1,14 @@
 .choice__item {
-  min-width: 30px;
+  margin: 2px 0;
   position: relative;
   display: flex;
-  /* &:hover {
-    background: var(--choice-item-background-hover);
-  } */
   &:not(:last-child) {
-    border-right: var(--chioce-item-border-right, 1px solid var(--choice-border-color));
+    border-right: var(--chioce-item-border-right);
   }
   &_state_disabled {
-    background: var(--choice-item-state-disabled-background, #ececec);
+    background: var(--choice-item-state-disabled-background);
     &:hover {
-      background: var(--choice-item-state-disabled-background, #ececec);
-    }
-  }
-  &_active {
-    background: var(--choice-item-background-active);
-    &_state_disabled {
-      background: var(--choice-item-active-state-disabled-background, #ccc);
-      &:hover {
-        background: var(--choice-item-active-state-disabled-background, #ccc);
-      }
+      background: var(--choice-item-state-disabled-background);
     }
   }
   & input {
@@ -39,6 +27,7 @@
     text-align: center;
     position: relative;
     display: flex;
+    align-items: center;
     z-index: 3;
     transition: color 0.5s ease;
     cursor: pointer;
@@ -47,17 +36,28 @@
     padding: var(--choice-item-icon-padding);
   }
 }
-
+.choice__item {
+  &_shape {
+    &_rounded {
+      border-radius: var(--choice-item-shape-rounded);
+      overflow: hidden;
+    }
+    &_circular {
+      border-radius: 50%;
+    }
+  }
+}
 .choice {
+  padding: 0 2px;
   position: relative;
   display: flex;
-  align-items: center;
-  &__wrapper {
-    position: relative;
-    display: flex;
+  &__before {
+    margin: 2px 0;
+  }
+  &__after {
+    margin: 2px 0;
   }
 }
-
 .choice {
   &_set {
     &_form {
@@ -74,25 +74,24 @@
     }
   }
 }
-
 .choice {
   &_shape {
     &_rounded {
       border-radius: var(--choice-shape-rounded);
-      overflow: hidden;
     }
     &_circular {
       border-radius: 50%;
     }
   }
 }
-
 .choice {
   &_size {
     @each $size in xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
+        height: var(--choice-size-$(size)-height);
         ^^&__item {
           &-label {
+            height: var(--choice-item-size-$(size)-height);
             padding: var(--choice-item-size-$(size)-padding);
           }
         }
@@ -100,7 +99,6 @@
     }
   }
 }
-
 .choice {
   &_wrap {
     &_wrap {
@@ -114,22 +112,16 @@
     }
   }
 }
-
 :root {
-  --choice-item-size-xs-padding: 1px 8px;
-  --choice-item-size-s-padding: 5px 10px;
-  --choice-item-size-m-padding: 7px 12px;
-  --choice-item-size-l-padding: 9px 15px;
-  --choice-item-size-xl-padding: 13px 20px;
-  --choice-item-size-xxl-padding: 17px 25px;
-  --choice-item-size-tiny-padding: 1px 8px;
-  --choice-item-size-compact-padding: 5px 10px;
-  --choice-item-size-normal-padding: 7px 12px;
-  --choice-item-size-large-padding: 9px 15px;
 
-  --choice-item-background-hover: var(--color-surface-secondary);
-  --choice-item-background-active: var(--color-surface-active);
-  --choice-border-color: var(--color-surface-border-tertiary);
+  --choice-size-s-height: 28px;;
+  --choice-size-m-height: 36px;
+
+  --choice-item-size-s-padding: 0px 10px;
+  --choice-item-size-m-padding: 0px 12px;
 
   --choice-item-icon-padding: 0;
+
+  --choice-shape-rounded: 8px;
+  --choice-item-shape-rounded: 8px;
 }

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

@@ -1,26 +1,14 @@
 .choice__item {
-  min-width: 30px;
+  margin: 2px 0;
   position: relative;
   display: flex;
-  /* &:hover {
-    background: var(--choice-item-background-hover);
-  } */
   &:not(:last-child) {
-    border-right: var(--chioce-item-border-right, 1px solid var(--choice-border-color));
+    border-right: var(--chioce-item-border-right);
   }
   &_state_disabled {
-    background: var(--choice-item-state-disabled-background, #ececec);
+    background: var(--choice-item-state-disabled-background);
     &:hover {
-      background: var(--choice-item-state-disabled-background, #ececec);
-    }
-  }
-  &_active {
-    background: var(--choice-item-background-active);
-    &_state_disabled {
-      background: var(--choice-item-active-state-disabled-background, #ccc);
-      &:hover {
-        background: var(--choice-item-active-state-disabled-background, #ccc);
-      }
+      background: var(--choice-item-state-disabled-background);
     }
   }
   & input {
@@ -39,6 +27,7 @@
     text-align: center;
     position: relative;
     display: flex;
+    align-items: center;
     z-index: 3;
     transition: color 0.5s ease;
     cursor: pointer;

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

@@ -0,0 +1,11 @@
+.choice__item {
+  &_shape {
+    &_rounded {
+      border-radius: var(--choice-item-shape-rounded);
+      overflow: hidden;
+    }
+    &_circular {
+      border-radius: 50%;
+    }
+  }
+}

package/dist/css/components/DatePicker/DatePicker.css

@@ -1126,7 +1126,7 @@ h2.react-datepicker__current-month {
       align-items: center;
       gap: 12px;
       & .input {
-        min-width: var(--date-picker-input-min-width, 256px);
+        min-width: var(--date-picker-input-min-width);
       }
     }
     &-time-container {
@@ -1171,7 +1171,7 @@ h2.react-datepicker__current-month {
       & .input {
         cursor: pointer;
         &.input_size_l {
-          padding: var(--input-container-padding);
+          padding: var(--date-picker-input-container-padding);
         }
       }
     }
@@ -1217,11 +1217,8 @@ h2.react-datepicker__current-month {
   }
 }
 :root {
-  --input-container-padding: 9px 15px;
-
-  --date-picker-input-min-width: 220px;
+  --date-picker-input-container-padding: 9px 15px;
   --date-picker-day-border-radius: 8px;
-
   --date-picker-day-width: 35px;
   --date-picker-day-height: 35px;
 

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

@@ -1,6 +1,9 @@
 .dropdown {
   position: relative;
   display: flex;
+  &__wrapper {
+    width: 100%;
+  }
 }
 .dropdown {
   &_animation {
@@ -17,29 +20,15 @@
   }
 }
 .dropdown {
-  &_set {
-    &_default {
-      ^^&__wrapper {
-        padding: var(--dropdown-default-padding);
-        display: flex;
-        flex-direction: column;
-        gap: var(--dropdown-default-gap);
-      }
-    }
-    &_normal {
-      ^^&__wrapper {
-        padding: var(--dropdown-normal-padding);
-        display: flex;
-        flex-direction: column;
-        gap: var(--dropdown-normal-gap);
-      }
-    }
-    &_compact {
-      ^^&__wrapper {
-        padding: var(--dropdown-compact-padding);
-        display: flex;
-        flex-direction: column;
-        gap: var(--dropdown-compact-gap);
+  &_size {
+    @each $size in xxl, xl, l, m, s, xs, xxs {
+      &_$(size) {
+        ^^&__wrapper {
+          padding: var(--dropdown-$(size)-padding);
+          display: flex;
+          flex-direction: column;
+          gap: var(--dropdown-$(size)-gap);
+        }
       }
     }
   }
@@ -57,13 +46,15 @@
 }
 .dropdown {
   &_state_close {
-    visibility: hidden;
+    /* visibility: hidden; */
+    display: none;
     opacity: 0%;
   }
 }
 .dropdown {
   &&_state_open {
-    visibility: visible;
+    /* visibility: visible; */
+    display: block;
     opacity: 100%;
   }
 }

package/dist/css/components/Grid/Grid.css

@@ -38,9 +38,9 @@
   }
 }
 .grid {
-  @each $val in auto, normal, stretch, center, start, end, space-around, space-between, space-evenly,
-    safe center, unsafe center, self-start, self-end, first, baseline, first, baseline,
-    last baseline {
+  @each $val in auto, normal, stretch, center, start, end, space-around,
+    space-between, space-evenly, safe center, unsafe center, self-start,
+    self-end, first, baseline, first, baseline, last baseline {
     &_align-content_$(val) {
       align-content: $(val);
     }
@@ -50,7 +50,18 @@
   }
 }
 .grid {
-  @each $val in 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200 {
+  @each $val in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18,
+    19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37,
+    38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56,
+    57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75,
+    76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94,
+    95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110,
+    111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125,
+    126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140,
+    141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155,
+    156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170,
+    171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 185,
+    186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196, 197, 198, 199, 200 {
     &_columns_$(val) {
       grid-template-columns: repeat($(val), 1fr);
       & > ^&__wrapper {
@@ -101,7 +112,18 @@
   }
 }
 .grid {
-  @each $val in 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200 {
+  @each $val in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18,
+    19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37,
+    38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56,
+    57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75,
+    76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94,
+    95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110,
+    111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125,
+    126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140,
+    141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155,
+    156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170,
+    171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 185,
+    186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196, 197, 198, 199, 200 {
     &_rows_$(val) {
       grid-template-columns: repeat($(val), 1fr);
       & > ^&__wrapper {
@@ -178,7 +200,19 @@
 }
 .grid {
   &__item {
-    @each $val in -1,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200 {
+    @each $val in -1, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17,
+      18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35,
+      36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53,
+      54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71,
+      72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89,
+      90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106,
+      107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121,
+      122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136,
+      137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151,
+      152, 153, 154, 155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166,
+      167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181,
+      182, 183, 184, 185, 186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196,
+      197, 198, 199, 200 {
       &_column {
         &-start_$(val) {
           grid-column-start: $(val);
@@ -195,7 +229,10 @@
 }
 .grid {
   &__item {
-    @each $val in auto, legacy, normal, stretch, center, start, end, left, right, space-around, space-between, space-evenly, safe, center, unsafe center, self-start, self-end, left, right, baseline, first baseline, last baseline {
+    @each $val in auto, legacy, normal, stretch, center, start, end, left,
+      right, space-around, space-between, space-evenly, safe, center,
+      unsafe center, self-start, self-end, left, right, baseline,
+      first baseline, last baseline {
       &_justify-self_$(val) {
         justify-self: $(val);
       }
@@ -204,7 +241,8 @@
 }
 .grid {
   &__item {
-    @each $val in -1, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24 {
+    @each $val in -1, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17,
+      18, 19, 20, 21, 22, 23, 24 {
       &_row {
         &-start_$(val) {
           grid-row-start: $(val);
@@ -224,4 +262,8 @@
     display: grid;
     transition: var(--grid-row-transition);
   }
+}
+:root {
+  --grid-row-transition: all 0.2s ease 0s;
+  --grid-item-transition: all 0.2s ease 0s;
 }

package/dist/css/components/Grid/css/__item/grid__item_column.css

@@ -1,6 +1,18 @@
 .grid {
   &__item {
-    @each $val in -1,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200 {
+    @each $val in -1, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17,
+      18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35,
+      36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53,
+      54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71,
+      72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89,
+      90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106,
+      107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121,
+      122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136,
+      137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151,
+      152, 153, 154, 155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166,
+      167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181,
+      182, 183, 184, 185, 186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196,
+      197, 198, 199, 200 {
       &_column {
         &-start_$(val) {
           grid-column-start: $(val);

package/dist/css/components/Grid/css/__item/grid__item_justify-self.css

@@ -1,6 +1,9 @@
 .grid {
   &__item {
-    @each $val in auto, legacy, normal, stretch, center, start, end, left, right, space-around, space-between, space-evenly, safe, center, unsafe center, self-start, self-end, left, right, baseline, first baseline, last baseline {
+    @each $val in auto, legacy, normal, stretch, center, start, end, left,
+      right, space-around, space-between, space-evenly, safe, center,
+      unsafe center, self-start, self-end, left, right, baseline,
+      first baseline, last baseline {
       &_justify-self_$(val) {
         justify-self: $(val);
       }

package/dist/css/components/Grid/css/__item/grid__item_row.css

@@ -1,6 +1,7 @@
 .grid {
   &__item {
-    @each $val in -1, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24 {
+    @each $val in -1, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17,
+      18, 19, 20, 21, 22, 23, 24 {
       &_row {
         &-start_$(val) {
           grid-row-start: $(val);

package/dist/css/components/Input/Input.css

@@ -19,10 +19,13 @@
   &:focus {
     outline: none;
   }
+
+  /*
   &:hover {
     background: var(--input-state-hover-background);
     border: solid 1px var(--input-state-hover-border);
   }
+  */
 }
 .input {
   &_shape {