@itcase/ui 1.4.0 → 1.4.2

package/dist/cjs/components/Avatar.js

@@ -34,7 +34,7 @@ var avatarConfig = {
     },
 };
 function Avatar(props) {
-    var className = props.className, type = props.type, appearance = props.appearance, Dot = props.Dot, _a = props.firstName, firstName = _a === void 0 ? '' : _a, icon = props.icon, mode = props.mode, _b = props.secondName, secondName = _b === void 0 ? '' : _b, _c = props.size, size = _c === void 0 ? '96' : _c, src = props.src, before = props.before, after = props.after, onClick = props.onClick;
+    var className = props.className, type = props.type, appearance = props.appearance, _a = props.size, size = _a === void 0 ? '96' : _a, Dot = props.Dot, _b = props.firstName, firstName = _b === void 0 ? '' : _b, icon = props.icon, mode = props.mode, _c = props.secondName, secondName = _c === void 0 ? '' : _c, src = props.src, before = props.before, after = props.after, onClick = props.onClick;
     var avatarChars = React.useMemo(function () {
         var firstChar = ((firstName === null || firstName === void 0 ? void 0 : firstName[0]) || '').toUpperCase();
         var secondChar = ((secondName === null || secondName === void 0 ? void 0 : secondName[0]) || '').toUpperCase();
@@ -46,7 +46,7 @@ function Avatar(props) {
     }, {});
     var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, _d = propsGenerator.textColor, textColor = _d === void 0 ? 'surfaceTextTertiary' : _d, _e = propsGenerator.textSize, textSize = _e === void 0 ? 'l' : _e, _f = propsGenerator.textWeight, textWeight = _f === void 0 ? '600' : _f, iconFill = propsGenerator.iconFill, iconFillHover = propsGenerator.iconFillHover, iconFillSize = propsGenerator.iconFillSize, iconItemFill = propsGenerator.iconItemFill, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, iconSrc = propsGenerator.iconSrc, shapeClass = propsGenerator.shapeClass;
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'avatar', shapeClass && "avatar_shape_".concat(shapeClass), mode && "avatar_mode_".concat(mode), size && "avatar_size_".concat(size), type && "avatar_type_".concat(type), Dot && 'avatar_status', onClick && 'cursor_type_pointer'), onClick: onClick, children: jsxRuntime.jsxs("div", { className: clsx('avatar__wrapper', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), children: [before, src ? (jsxRuntime.jsx(Image.Image, { className: "avatar__image", shape: "geometric", src: src })) : (jsxRuntime.jsx(Text.Text, { className: "avatar__name", textColor: textColor, textWeight: textWeight, size: textSize, children: avatarChars })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "avatar__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), Dot, after] }) }));
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'avatar', shapeClass && "avatar_shape_".concat(shapeClass), mode && "avatar_mode_".concat(mode), size && "avatar_size_".concat(size), type && "avatar_type_".concat(type), Dot && 'avatar_status', onClick && 'cursor_type_pointer'), onClick: onClick, children: jsxRuntime.jsxs("div", { className: clsx('avatar__wrapper', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), children: [before, src ? (jsxRuntime.jsx(Image.Image, { className: "avatar__image", shape: "geometric", src: src })) : (jsxRuntime.jsx(Text.Text, { className: "avatar__name", size: textSize, textColor: textColor, textWeight: textWeight, children: avatarChars })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "avatar__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), Dot, after] }) }));
 }
 
 exports.Avatar = Avatar;

package/dist/cjs/components/Notification.js

@@ -18,6 +18,7 @@ require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
 require('uuid');
+require('@itcase/common');
 
 var notificationItemAppearance = {
     accent: {

package/dist/cjs/context/Notifications.js

@@ -5,6 +5,7 @@ var tslib_es6 = require('../../tslib.es6-CCZ3TN_7.js');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var uuid = require('uuid');
+var common = require('@itcase/common');
 
 var STATUSES = {
     error: 'error',
@@ -15,11 +16,11 @@ var STATUSES = {
 var NotificationsContext = React.createContext([]);
 var NotificationsAPIContext = React.createContext({
     hideNotifications: function (targetId) { },
-    notificationStatuses: STATUSES,
     showNotification: function (notification, onClose) { },
+    notificationStatuses: STATUSES,
 });
 function NotificationsProvider(props) {
-    var children = props.children, _a = props.initialNotificationsList, initialNotificationsList = _a === void 0 ? [] : _a;
+    var _a = props.initialNotificationsList, initialNotificationsList = _a === void 0 ? [] : _a, isLogRequestsErrors = props.isLogRequestsErrors, children = props.children;
     var _b = React.useState(function () {
         // We need to set id to every notification item and original list also be have new id's
         return (initialNotificationsList || []).map(function (notificationItem) {
@@ -52,7 +53,9 @@ function NotificationsProvider(props) {
         var newNotificationItem = createNotification(notification, onClose);
         setNotificationsList(function (prevNotificationsList) {
             var newState = prevNotificationsList.slice();
-            var existsNotificationIndex = newState.findIndex(function (notificationItem) { return String(notificationItem.id) === String(newNotificationItem.id); });
+            var existsNotificationIndex = newState.findIndex(function (notificationItem) {
+                return String(notificationItem.id) === String(newNotificationItem.id);
+            });
             // Add new notification
             if (existsNotificationIndex === -1) {
                 return tslib_es6.__spreadArray(tslib_es6.__spreadArray([], newState, true), [newNotificationItem], false);
@@ -89,7 +92,23 @@ function NotificationsProvider(props) {
                 setTimeout(function () { return hideNotifications(notificationItem.id); }, notificationItem.closeByTime);
             }
         });
-        // eslint-disable-next-line
+        // Show notifications on all requests errors.
+        // Enable one time without disabling. Use "isLogging" on request config level
+        // to disable notifications logger.
+        if (isLogRequestsErrors) {
+            common.axiosInstanceITCase.responseErrorHandler.loggerManager = {
+                log: function (responseError) {
+                    if (responseError.message) {
+                        showNotification({
+                            title: responseError.message,
+                            status: 'error',
+                            closeByTime: 4000,
+                        });
+                    }
+                },
+            };
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return (jsxRuntime.jsx(NotificationsAPIContext.Provider, { value: notificationsAPI, children: jsxRuntime.jsx(NotificationsContext.Provider, { value: notificationsList, children: children }) }));
 }
@@ -134,11 +153,11 @@ function createNotification(notification, onClose) {
     }
     return {
         id: id,
-        closeByTime: closeByTime,
+        title: title,
         status: status,
         text: text,
         textColor: textColor,
-        title: title,
+        closeByTime: closeByTime,
         onClose: onClose,
     };
 }

package/dist/components/Avatar.js

@@ -32,7 +32,7 @@ var avatarConfig = {
     },
 };
 function Avatar(props) {
-    var className = props.className, type = props.type, appearance = props.appearance, Dot = props.Dot, _a = props.firstName, firstName = _a === void 0 ? '' : _a, icon = props.icon, mode = props.mode, _b = props.secondName, secondName = _b === void 0 ? '' : _b, _c = props.size, size = _c === void 0 ? '96' : _c, src = props.src, before = props.before, after = props.after, onClick = props.onClick;
+    var className = props.className, type = props.type, appearance = props.appearance, _a = props.size, size = _a === void 0 ? '96' : _a, Dot = props.Dot, _b = props.firstName, firstName = _b === void 0 ? '' : _b, icon = props.icon, mode = props.mode, _c = props.secondName, secondName = _c === void 0 ? '' : _c, src = props.src, before = props.before, after = props.after, onClick = props.onClick;
     var avatarChars = useMemo(function () {
         var firstChar = ((firstName === null || firstName === void 0 ? void 0 : firstName[0]) || '').toUpperCase();
         var secondChar = ((secondName === null || secondName === void 0 ? void 0 : secondName[0]) || '').toUpperCase();
@@ -44,7 +44,7 @@ function Avatar(props) {
     }, {});
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, _d = propsGenerator.textColor, textColor = _d === void 0 ? 'surfaceTextTertiary' : _d, _e = propsGenerator.textSize, textSize = _e === void 0 ? 'l' : _e, _f = propsGenerator.textWeight, textWeight = _f === void 0 ? '600' : _f, iconFill = propsGenerator.iconFill, iconFillHover = propsGenerator.iconFillHover, iconFillSize = propsGenerator.iconFillSize, iconItemFill = propsGenerator.iconItemFill, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, iconSrc = propsGenerator.iconSrc, shapeClass = propsGenerator.shapeClass;
-    return (jsx("div", { className: clsx(className, 'avatar', shapeClass && "avatar_shape_".concat(shapeClass), mode && "avatar_mode_".concat(mode), size && "avatar_size_".concat(size), type && "avatar_type_".concat(type), Dot && 'avatar_status', onClick && 'cursor_type_pointer'), onClick: onClick, children: jsxs("div", { className: clsx('avatar__wrapper', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), children: [before, src ? (jsx(Image, { className: "avatar__image", shape: "geometric", src: src })) : (jsx(Text, { className: "avatar__name", textColor: textColor, textWeight: textWeight, size: textSize, children: avatarChars })), (icon || iconSrc) && (jsx(Icon, { className: "avatar__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), Dot, after] }) }));
+    return (jsx("div", { className: clsx(className, 'avatar', shapeClass && "avatar_shape_".concat(shapeClass), mode && "avatar_mode_".concat(mode), size && "avatar_size_".concat(size), type && "avatar_type_".concat(type), Dot && 'avatar_status', onClick && 'cursor_type_pointer'), onClick: onClick, children: jsxs("div", { className: clsx('avatar__wrapper', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), children: [before, src ? (jsx(Image, { className: "avatar__image", shape: "geometric", src: src })) : (jsx(Text, { className: "avatar__name", size: textSize, textColor: textColor, textWeight: textWeight, children: avatarChars })), (icon || iconSrc) && (jsx(Icon, { className: "avatar__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon })), Dot, after] }) }));
 }
 
 export { Avatar, avatarAppearance, avatarConfig };

package/dist/components/Notification.js

@@ -16,6 +16,7 @@ import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
 import 'uuid';
+import '@itcase/common';
 
 var notificationItemAppearance = {
     accent: {

package/dist/context/Notifications.js

@@ -3,6 +3,7 @@ import { b as __spreadArray } from '../tslib.es6-5FtW-kfi.js';
 import { jsx } from 'react/jsx-runtime';
 import { createContext, useState, useCallback, useMemo, useEffect, useContext } from 'react';
 import { v4 } from 'uuid';
+import { axiosInstanceITCase } from '@itcase/common';
 
 var STATUSES = {
     error: 'error',
@@ -13,11 +14,11 @@ var STATUSES = {
 var NotificationsContext = createContext([]);
 var NotificationsAPIContext = createContext({
     hideNotifications: function (targetId) { },
-    notificationStatuses: STATUSES,
     showNotification: function (notification, onClose) { },
+    notificationStatuses: STATUSES,
 });
 function NotificationsProvider(props) {
-    var children = props.children, _a = props.initialNotificationsList, initialNotificationsList = _a === void 0 ? [] : _a;
+    var _a = props.initialNotificationsList, initialNotificationsList = _a === void 0 ? [] : _a, isLogRequestsErrors = props.isLogRequestsErrors, children = props.children;
     var _b = useState(function () {
         // We need to set id to every notification item and original list also be have new id's
         return (initialNotificationsList || []).map(function (notificationItem) {
@@ -50,7 +51,9 @@ function NotificationsProvider(props) {
         var newNotificationItem = createNotification(notification, onClose);
         setNotificationsList(function (prevNotificationsList) {
             var newState = prevNotificationsList.slice();
-            var existsNotificationIndex = newState.findIndex(function (notificationItem) { return String(notificationItem.id) === String(newNotificationItem.id); });
+            var existsNotificationIndex = newState.findIndex(function (notificationItem) {
+                return String(notificationItem.id) === String(newNotificationItem.id);
+            });
             // Add new notification
             if (existsNotificationIndex === -1) {
                 return __spreadArray(__spreadArray([], newState, true), [newNotificationItem], false);
@@ -87,7 +90,23 @@ function NotificationsProvider(props) {
                 setTimeout(function () { return hideNotifications(notificationItem.id); }, notificationItem.closeByTime);
             }
         });
-        // eslint-disable-next-line
+        // Show notifications on all requests errors.
+        // Enable one time without disabling. Use "isLogging" on request config level
+        // to disable notifications logger.
+        if (isLogRequestsErrors) {
+            axiosInstanceITCase.responseErrorHandler.loggerManager = {
+                log: function (responseError) {
+                    if (responseError.message) {
+                        showNotification({
+                            title: responseError.message,
+                            status: 'error',
+                            closeByTime: 4000,
+                        });
+                    }
+                },
+            };
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return (jsx(NotificationsAPIContext.Provider, { value: notificationsAPI, children: jsx(NotificationsContext.Provider, { value: notificationsList, children: children }) }));
 }
@@ -132,11 +151,11 @@ function createNotification(notification, onClose) {
     }
     return {
         id: id,
-        closeByTime: closeByTime,
+        title: title,
         status: status,
         text: text,
         textColor: textColor,
-        title: title,
+        closeByTime: closeByTime,
         onClose: onClose,
     };
 }

package/dist/css/components/Avatar/Avatar.css

@@ -73,8 +73,8 @@
 }
 .avatar {
   &_size {
-    @each $size in 14, 16, 20, 24, 32, 40, 48, 56, 60, 64, 72, 80, 96, 112,
-      144, 240 {
+    @each $size in 14, 16, 20, 24, 32, 40, 48, 56, 60, 64, 72, 80, 96, 112, 144,
+      240 {
       &_$(size) {
         ^^&__wrapper {
           width: $(size) px;

package/dist/types/context/Notifications.d.ts

@@ -1,15 +1,15 @@
-import type { tId } from '@itcase/common';
+import { type tId } from '@itcase/common';
 import type { iCreatedNotification, iNotificationsProviderProps } from './Notifications.interface';
 declare function NotificationsProvider(props: iNotificationsProviderProps): import("react/jsx-runtime").JSX.Element;
 declare function useNotifications(): never[];
 declare function useNotificationsAPI(): {
     hideNotifications: (targetId: tId) => void;
+    showNotification: (notification: string | iCreatedNotification, onClose?: () => void) => void;
     notificationStatuses: {
         error: string;
         info: string;
         success: string;
         warning: string;
     };
-    showNotification: (notification: string | iCreatedNotification, onClose?: () => void) => void;
 };
 export { NotificationsProvider, useNotifications, useNotificationsAPI };

package/dist/types/context/Notifications.interface.d.ts

@@ -21,5 +21,10 @@ interface iCreatedNotification {
 interface iNotificationsProviderProps {
     children: React.ReactNode;
     initialNotificationsList: iCreatedNotification[];
+    /**
+     * Used to enable displaying notifications when any error throwing
+     * while sending a request with "axiosInstanceITCase".
+     */
+    isLogRequestsErrors: boolean;
 }
 export type { iNotification, iCreatedNotification, iNotificationsProviderProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -67,9 +67,9 @@
   "scripts": {
     "build": "npm run build-js && npm run build-css",
     "build-js": "rm -rf dist && NODE_ENV=production rollup -c",
-    "build-css": "rm -rf dist/css && postcss 'src/components/**/!(css)/*.css' 'src/styles/!(.css)/**/*.css' 'src/mediaqueries/*.css' 'src/mixins/*.css' 'src/tokens/*.css' --base src --dir dist/css/ --env production",
+    "build-css": "rm -rf dist/css && postcss 'src/components/**/!(css)/!(*.tokens.css)*.css' 'src/styles/!(.css)/**/*.css' 'src/mediaqueries/*.css' 'src/mixins/*.css' 'src/tokens/*.css' --base src --dir dist/css/ --env production",
     "dev-js": "rollup -c -w",
-    "dev-css": "postcss 'src/components/**/!(css)/*.css' 'src/styles/!(.css)/**/*.css' 'src/mediaqueries/*.css' 'src/mixins/*.css' 'src/tokens/*.css' --base src --dir dist/css/ --env production -w --verbose",
+    "dev-css": "postcss 'src/components/**/!(css)/!(*.tokens.css)*.css' 'src/styles/!(.css)/**/*.css' 'src/mediaqueries/*.css' 'src/mixins/*.css' 'src/tokens/*.css' --base src --dir dist/css/ --env production -w --verbose",
     "prepare": "husky",
     "prepack": "npm run build",
     "semantic-release": "semantic-release",
@@ -91,16 +91,16 @@
   },
   "dependencies": {
     "@emotion/is-prop-valid": "^1.3.1",
-    "@itcase/common": "^1.2.19",
+    "@itcase/common": "^1.2.21",
     "@itcase/config": "^1.0.26",
-    "@itcase/icons": "^1.0.23",
+    "@itcase/icons": "^1.0.28",
     "@itcase/storybook-config": "^1.0.63",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
-    "framer-motion": "^12.6.2",
+    "framer-motion": "^12.6.3",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
-    "motion": "^12.6.2",
+    "motion": "^12.6.3",
     "rc-slider": "^11.1.8",
     "react": "^18.3.1",
     "react-dadata": "^2.27.4",
@@ -125,7 +125,7 @@
     "@babel/preset-react": "^7.26.3",
     "@commitlint/cli": "^19.8.0",
     "@commitlint/config-conventional": "^19.8.0",
-    "@itcase/lint": "^1.0.49",
+    "@itcase/lint": "^1.1.2",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.3",
     "@rollup/plugin-image": "^3.0.3",
@@ -157,13 +157,13 @@
     "prettier": "^3.5.3",
     "react-docgen-typescript": "^2.2.2",
     "react-svg": "^16.3.0",
-    "rollup": "^4.38.0",
+    "rollup": "^4.39.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.2.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-preserve-directives": "^1.1.3",
     "semantic-release": "^24.2.3",
-    "storybook": "^8.6.11",
+    "storybook": "^8.6.12",
     "stylelint": "^16.17.0",
     "typescript": "^5.8.2"
   },

package/dist/css/components/Accordion/Accordion.tokens.css

@@ -1,5 +0,0 @@
-:root {
-  --accordion-item-shape-rounded: 12px;
-  --accordion-item-xs-padding: 10px 8px;
-  --accordion-item-l-padding: 14px 12px;
-}

package/dist/css/components/Avatar/Avatar.tokens.css

@@ -1,4 +0,0 @@
-:root {
-  --avatar-icon-right: -4px;
-  --avatar-icon-bottom: -3px;
-}

package/dist/css/components/Badge/Badge.tokens.css

@@ -1,50 +0,0 @@
-:root {
-  --badge-size-xxl-padding: 1m 1.5m;
-  --badge-size-xxl-min-width: 40px;
-  --badge-size-xxl-min-height: 40px;
-  --badge-size-xxl-gap: 5px;
-  --badge-type-icon-size-xxl-max-width: 40px;
-  --badge-type-icon-size-xxl-max-height: 40px;
-
-  --badge-size-xl-padding: 0.5m 1.25m;
-  --badge-size-xl-min-width: 32px;
-  --badge-size-xl-min-height: 32px;
-  --badge-size-xl-gap: 6px;
-  --badge-type-icon-size-xl-max-width: 32px;
-  --badge-type-icon-size-xl-max-height: 32px;
-
-  --badge-size-l-padding: 0.5m 1m;
-  --badge-size-l-min-width: 28px;
-  --badge-size-l-min-height: 28px;
-  --badge-size-l-gap: 4px;
-  --badge-type-icon-size-l-max-width: 28px;
-  --badge-type-icon-size-l-max-height: 28px;
-
-  --badge-size-m-padding: 0 0.75m;
-  --badge-size-m-min-width: 24px;
-  --badge-size-m-min-height: 24px;
-  --badge-size-m-gap: 2px;
-  --badge-type-icon-size-m-max-width: 24px;
-  --badge-type-icon-size-m-max-height: 24px;
-
-  --badge-size-s-padding: 0 0.5m;
-  --badge-size-s-min-width: 20px;
-  --badge-size-s-min-height: 20px;
-  --badge-size-s-gap: 0px;
-  --badge-type-icon-size-s-max-width: 20px;
-  --badge-type-icon-size-s-max-height: 20px;
-
-  --badge-size-xs-padding: 0 0.25m;
-  --badge-size-xs-min-width: 16px;
-  --badge-size-xs-min-height: 16px;
-  --badge-size-xs-gap: 2px;
-  --badge-type-icon-size-xs-max-width: 16px;
-  --badge-type-icon-size-xs-max-height: 16px;
-
-  --badge-size-xxs-padding: 0 0.5m;
-  --badge-size-xxs-min-width: 12px;
-  --badge-size-xxs-min-height: 12px;
-  --badge-size-xxs-gap: 0px;
-  --badge-type-icon-size-xxs-max-width: 12px;
-  --badge-type-icon-size-xxs-max-height: 12px;
-}

package/dist/css/components/Button/Button.tokens.css

@@ -1,39 +0,0 @@
-:root {
-  /* MainXL */
-  --button-transition: all 0.2s ease 0s;
-  /* Size XXL */
-  --button-xxl-gap: 0.5m;
-  --button-xxl-padding: 2m 2m;
-  --button-xxl-min-width: 56px;
-  --button-xxl-min-height: 56px;
-  /* Size XL */
-  --button-xl-gap: 0.5m;
-  --button-xl-padding: 1m 1m;
-  --button-xl-min-width: 40px;
-  --button-xl-min-height: 40px;
-  /* Size L */
-  --button-l-gap: 0.5m;
-  --button-l-padding: 0.5m 0.5m;
-  --button-l-min-width: 32px;
-  --button-l-min-height: 32px;
-  /* Size M */
-  --button-m-gap: 0.5m;
-  --button-m-padding: 0.25m 0.5m;
-  --button-m-min-width: 28px;
-  --button-m-min-height: 28px;
-  /* Size S */
-  --button-s-gap: 0.5m;
-  --button-s-padding: 0.25m 0.5m;
-  --button-s-min-width: 24px;
-  --button-s-min-height: 24px;
-  /* Size XS */
-  --button-xs-gap: 0.5m;
-  --button-xs-padding: 0.5m 0.5m;
-  --button-xs-min-width: 20px;
-  --button-xs-min-height: 20px;
-  /* Size XXS */
-  --button-xxs-gap: 0.5m;
-  --button-xxs-padding: 0.25m 0.25m;
-  --button-xxs-min-width: 16px;
-  --button-xxs-min-height: 16px;
-}

package/dist/css/components/Checkbox/Checkbox.tokens.css

@@ -1,4 +0,0 @@
-:root {
-  --checkbox-column-gap: 12px;
-  --checkbox-row-gap: 4px;
-}

package/dist/css/components/Checkmark/Checkmark.tokens.css

@@ -1,22 +0,0 @@
-:root {
-  --checkmark-width--xxl: 64px;
-  --checkmark-height-xxl: 64px;
-
-  --checkmark-width-xl: 56px;
-  --checkmark-height-xl: 56px;
-
-  --checkmark-width-l: 48px;
-  --checkmark-height-l: 48px;
-
-  --checkmark-width-m: 40px;
-  --checkmark-height-m: 40px;
-
-  --checkmark-width-s: 32px;
-  --checkmark-height-s: 32px;
-
-  --checkmark-width-xs: 24px;
-  --checkmark-height-xs: 24px;
-
-  --checkmark-width-xxs: 16px;
-  --checkmark-height-xxs: 16px;
-}

package/dist/css/components/Chips/Chips.tokens.css

@@ -1,37 +0,0 @@
-:root {
-  /* Size XXL */
-  --chips-xxl-gap: 0.5m;
-  --chips-xxl-padding: 2m 2m;
-  --chips-xxl-min-width: 48px;
-  --chips-xxl-min-height: 48px;
-  /* Size XL */
-  --chips-xl-gap: 0.5m;
-  --chips-xl-padding: 1m 1m;
-  --chips-xl-min-width: 40px;
-  --chips-xl-min-height: 40px;
-  /* Size L */
-  --chips-l-gap: 0.5m;
-  --chips-l-padding: 0.5m 0.5m;
-  --chips-l-min-width: 32px;
-  --chips-l-min-height: 32px;
-  /* Size M */
-  --chips-m-gap: 0.5m;
-  --chips-m-padding: 0.75m 1.25m;
-  --chips-m-min-width: 28px;
-  --chips-m-min-height: 28px;
-  /* Size S */
-  --chips-s-gap: 0.5m;
-  --chips-s-padding: 0.25m 0.5m;
-  --chips-s-min-width: 24px;
-  --chips-s-min-height: 24px;
-  /* Size XS */
-  --chips-xs-gap: 0.5m;
-  --chips-xs-padding: 0.5m 0.5m;
-  --chips-xs-min-width: 20px;
-  --chips-xs-min-height: 20px;
-  /* Size XXS */
-  --chips-xxs-gap: 0.5m;
-  --chips-xxs-padding: 0.25m 0.25m;
-  --chips-xxs-min-width: 16px;
-  --chips-xxs-min-height: 16px;
-}

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

@@ -1,18 +0,0 @@
-: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-item-icon-padding: 0;
-}

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

@@ -1,8 +0,0 @@
-:root {
-  --code-input-size-compact-width: 36px;
-  --code-input-size-compact-height: 36px;
-  --code-input-size-compact-padding: 5px;
-  --code-input-size-normal-width: 48px;
-  --code-input-size-normal-height: 48px;
-  --code-input-size-normal-padding: 10px 12px;
-}

package/dist/css/components/DadataHintField/DadataHintField.tokens.css

@@ -1,9 +0,0 @@
-:root {
-  --react-dadata-padding: 8px 12px;
-  --react-dadata-border-radius: 6px;
-  --react-dadata-color: var(--color-surface-text-primary);
-  --react-dadata-border: var(--color-surface-border-tertiary);
-  --react-dadata-hover-border: var(--color-surface-border-quaternary);
-  --react-dadata-focus-border: var(--color-surface-border-quaternary);
-  --react-dadata-error-border: var(--color-error-border-primary);
-}

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

@@ -1,51 +0,0 @@
-:root {
-  --input-container-padding: 9px 15px;
-
-  --date-picker-input-min-width: 220px;
-  --date-picker-day-border-radius: 8px;
-
-  --date-picker-day-width: 35px;
-  --date-picker-day-height: 35px;
-
-  --date-picker-name-size: 16px;
-
-  --date-picker-name-weight: 400;
-  --date-picker-selected-weight: 400;
-
-  --date-picker-input-border-radius: 6px;
-
-  --date-picker-background: var(--color-surface-primary, #fff);
-  --date-picker-padding: 24px 12px;
-  --date-picker-box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.2);
-  --date-picker-border-radius: 12px;
-  --date-picker-border: 1px solid var(--color-surface-tertiary);
-
-  --date-picker-day-padding: 8px 0;
-  --date-picker-day-hover-background: var(--color-accent-tertiary);
-  --date-picker-day-hover-text-color: var(--color-surface-text-secondary);
-
-  --date-picker-day-range-background: var(--color-accent-tertiary);
-  --date-picker-day-range-text-color: var(--color-accent-text-secondary);
-  --date-picker-day-range-border-radius: 0;
-  --date-picker-day-range-start-border-radius: 12px 0 0 12px;
-  --date-picker-day-range-end-border-radius: 0 12px 12px 0;
-
-  --date-picker-day-today-background: var(--color-surface-secondary);
-  --date-picker-day-today-border-radius: 12px;
-  --date-picker-day-today-text-color: var(--color-surface-text-primary);
-
-  --date-picker-day-weekend-background: var(--color-surface-primary);
-  --date-picker-day-weekend-text-color: var(--color-secondary-text-secondary);
-  --date-picker-day-weekend-outside-text-color: var(
-    --color-secondary-text-disabled
-  );
-
-  --date-picker-day-selected-background: var(--color-accent-primary);
-  --date-picker-day-selected-background-hover: var(
-    --color-accent-primary-hover
-  );
-  --date-picker-day-selected-text-color: var(--color-accent-text-primary);
-
-  --date-picker-day-outside-background: var(--color-surface-primary);
-  --date-picker-day-outside-text-color: var(--color-surface-text-quaternary);
-}

package/dist/css/components/Divider/Divider.tokens.css

@@ -1,13 +0,0 @@
-:root {
-  --divider-xl-height: 5px;
-  --divider-l-height: 4px;
-  --divider-m-height: 3px;
-  --divider-s-height: 2px;
-  --divider-xs-height: 1px;
-
-  --divider-xl-width: 5px;
-  --divider-l-width: 4px;
-  --divider-m-width: 3px;
-  --divider-s-width: 2px;
-  --divider-xs-width: 1px;
-}

package/dist/css/components/Dot/Dot.tokens.css

@@ -1,10 +0,0 @@
-:root {
-  --dot-size-s-width: 12px;
-  --dot-size-s-height: 12px;
-
-  --dot-size-m-width: 16px;
-  --dot-size-m-height: 16px;
-
-  --dot-size-l-width: 20px;
-  --dot-size-l-height: 20px;
-}

package/dist/css/components/Drawer/Drawer.tokens.css

@@ -1,4 +0,0 @@
-:root {
-  --drawer-overlay-background: none;
-  --drawer-overlay-filter: blur(0);
-}

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

@@ -1,39 +0,0 @@
-:root {
-  --dropdown-item-size-xs-padding: 0;
-  --dropdown-item-size-xs-gap: 8px;
-
-  --dropdown-item-size-m-padding: 0px;
-  --dropdown-item-size-m-gap: 0px;
-
-  --dropdown-item-size-l-padding: 10px 12px;
-  --dropdown-item-size-l-gap: 12px;
-
-  --dropdown-normal-padding: 16px;
-  --dropdown-normal-gap: 16px;
-}
-
-@keyframes dropDownAnimationOpen {
-  0% {
-    visibility: hidden;
-    transform: translate3d(0, 8px, 0);
-    opacity: 0%;
-  }
-  100% {
-    visibility: visible;
-    transform: translate3d(0, 0, 0);
-    opacity: 100%;
-  }
-}
-
-@keyframes dropDownAnimationClose {
-  0% {
-    visibility: visible;
-    transform: translate3d(0, 0, 0);
-    opacity: 100%;
-  }
-  100% {
-    visibility: hidden;
-    transform: translate3d(0, 8px, 0);
-    opacity: 0%;
-  }
-}

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

@@ -1,4 +0,0 @@
-:root {
-  --grid-row-transition: all 0.2s ease 0s;
-  --grid-item-transition: all 0.2s ease 0s;
-}

package/dist/css/components/Group/Group.tokens.css

@@ -1,3 +0,0 @@
-:root {
-  --group-transition: all 0.2s ease 0s;
-}

package/dist/css/components/Icon/Icon.tokens.css

@@ -1,5 +0,0 @@
-:root {
-  --icon-transition: all 0.2s ease 0s;
-  --icon-size-24-badge-position: 12px, 12px;
-  --icon-shape-rounded: 6px;
-}

package/dist/css/components/Image/Image.tokens.css

@@ -1,3 +0,0 @@
-:root {
-  --image-shape-rounded: 6px;
-}

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

@@ -1,29 +0,0 @@
-:root {
-  --input-shape-rounded: 8px;
-
-  --input-size-xs-padding: 1px 8px;
-  --input-size-s-padding: 5px 10px;
-  --input-size-m-padding: 7px 12px;
-  --input-size-l-padding: 9px 15px;
-  --input-size-xl-padding: 13px 20px;
-  --input-size-xxl-padding: 17px 25px;
-
-  --input-size-tiny-padding: 1px 8px;
-  --input-size-compact-padding: 5px 10px;
-  --input-size-normal-padding: 7px 12px;
-  --input-size-large-padding: 9px 15px;
-
-  --input-success-border: var(--color-surface-border-tertiary);
-
-  --input-state-focus-border: var(--color-surface-border-quaternary);
-  --input-state-focus-background: none;
-  --input-state-error-border: var(--color-error-border-primary);
-  --input-state-error-background: none;
-  --input-state-required-border: var(--color-warning-text-primary);
-  --input-state-required-background: none;
-  --input-state-custom-border: var(--color-info-primary);
-  --input-state-custom-background: none;
-  --input-state-hover-border: var(--color-surface-border-quaternary);
-  --input-state-hover-background: none;
-  --input-caret-color: var(--color-accent-primary);
-}

package/dist/css/components/InputPassword/InputPassword.tokens.css

@@ -1,23 +0,0 @@
-:root {
-  --input-password-size-xs-padding: 4px 8px;
-  --input-password-size-s-padding: 5px 10px;
-  --input-password-size-m-padding: 7px 12px;
-  --input-password-size-l-padding: 9px 15px;
-  --input-password-size-xl-padding: 15px 20px;
-  --input-password-size-xxl-padding: 18px 25px;
-
-  --input-password-size-tiny-padding: 4px 8px;
-  --input-password-size-compact-padding: 5px 10px;
-  --input-password-size-normal-padding: 7px 12px;
-  --input-password-size-large-padding: 9px 15px;
-
-  --input-password-state-focus-border: var(--color-active-border-primary);
-  --input-password-state-focus-background: none;
-  --input-password-state-error-border: var(--color-error-border-primary);
-  --input-password-state-error-background: none;
-  --input-password-state-success-border: var(--color-success-border-primary);
-  --input-password-state-success-background: none;
-  --input-password-state-hover-border: var(--color-surface-border-quaternary);
-  --input-password-state-hover-background: none;
-  --input-password-caret-color: var(--color-accent-primary);
-}

package/dist/css/components/Label/Label.tokens.css

@@ -1,19 +0,0 @@
-:root {
-  --label-shape-rounded-default: 6px;
-
-  --label-size-xxl-shape-rounded: 12px;
-  --label-size-xl-shape-rounded: 6px;
-  --label-size-l-shape-rounded: 6px;
-  --label-size-m-shape-rounded: 12px;
-  --label-size-s-shape-rounded: 12px;
-  --label-size-xs-shape-rounded: 12px;
-  --label-size-xxs-shape-rounded: 12px;
-
-  --label-size-xxl-padding: 10px 10px;
-  --label-size-xl-padding: 7px 8px;
-  --label-size-l-padding: 4px 6px;
-  --label-size-m-padding: 2px 8px;
-  --label-size-s-padding: 2px 6px;
-  --label-size-xs-padding: 0px 4px;
-  --label-size-xxs-padding: 0px 4px;
-}

package/dist/css/components/Loader/Loader.tokens.css

@@ -1,3 +0,0 @@
-.loader {
-  border-radius: var(--button-size-xl-shape-rounded);
-}

package/dist/css/components/Logo/Logo.tokens.css

@@ -1,25 +0,0 @@
-:root {
-  /* --logo-size-l-width: 240px;
-  --logo-size-l-height: 90px;
-
-  --logo-size-m-width: 200px;
-  --logo-size-m-height: 75px;
-
-  --logo-size-s-width: 140px;
-  --logo-size-s-height: 52px; */
-
-  --logo-size-xl-width: 194px;
-  --logo-size-xl-height: 102px;
-
-  --logo-size-l-width: 145px;
-  --logo-size-l-height: 77px;
-
-  --logo-size-m-width: 100px;
-  --logo-size-m-height: 53px;
-
-  --logo-size-s-width: 82px;
-  --logo-size-s-height: 43px;
-
-  --logo-size-xs-width: 52px;
-  --logo-size-xs-height: 27px;
-}

package/dist/css/components/Menu/Menu.tokens.css

@@ -1,5 +0,0 @@
-:root {
-  --menu-type-border-width: fit-content;
-  --menu-type-border-border: 1px solid var(--color-surface-border-tertiary);
-  --menu-type-border-border-radius: 6px;
-}

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

@@ -1,17 +0,0 @@
-: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-shape-rounded: 20px;
-  --menu-item-set-subitem-padding-left: 36px;
-
-  --menu-item-set-filter-padding: 10px 16px;
-  --menu-item-set-filter-border-right: 1px solid
-    var(--color-surface-border-tertiary);
-  --menu-item-set-filter-active-color: var(--color-surface-item-accent);
-}

package/dist/css/components/Modal/Modal.tokens.css

@@ -1,3 +0,0 @@
-:root {
-  --modal-max-width: 450px;
-}

package/dist/css/components/Overlay/Overlay.tokens.css

@@ -1,4 +0,0 @@
-:root {
-  --overlay-fill: hsla(0, 0%, 0%, 0.4);
-  --overlay-blur: 20px;
-}

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

@@ -1,25 +0,0 @@
-:root {
-  --paginator-margin: 0;
-
-  --paginator-item-width: 32px;
-  --paginator-item-height: 32px;
-  --paginator-item-border: none;
-  --paginator-item-border-radius: 50%;
-
-  --pagination-item-state-disabled-display: none;
-
-  --paginator-item-transition: all 0.2s ease 0s;
-
-  --paginator-item-default-fill: var(--color-surface-primary);
-  --paginator-item-default-fill-hover: var(--color-surface-primary-hover);
-  --paginator-item-default-text: var(--color-surface-text-primary);
-
-  --paginator-item-active-fill: var(--color-accent-primary);
-  --paginator-item-active-fill-hover: var(--color-accent-primary);
-  --paginator-item-active-text: var(--color-accent-text-primary);
-
-  --paginator-item-disabled-fill: none;
-  --paginator-item-disabled-fill-hover: none;
-  --paginator-item-disabled-text: var(--color-surface-text-primary);
-  --paginator-item-disabled-icon: var(--color-surface-item-disabled);
-}

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

@@ -1,4 +0,0 @@
-:root {
-  --radio-state-border-hover: var(--color-surface-border-tertiary);
-  --radio-success-border: var(--color-surface-border-tertiary);
-}

package/dist/css/components/Search/Search.tokens.css

@@ -1,16 +0,0 @@
-:root {
-  --search-input-normal-padding: 8px;
-  --search-input-normal-gap: 8px;
-  --search-input-normal-line-height: 24px;
-
-  --search-input-compact-padding: 8px;
-  --search-input-compact-gap: 4px;
-
-  --search-input-l-padding: 8px 7px;
-  --search-input-l-gap: 6px;
-
-  --search-input-s-padding: 2px 7px;
-  --search-input-s-gap: 6px;
-
-  --search-shape-rounded: 8px;
-}

package/dist/css/components/Segmented/Segmented.tokens.css

@@ -1,6 +0,0 @@
-:root {
-  --segmented-item-size-normal-padding: 12px 24px;
-  --segmented-item-size-compact-padding: 6px 16px;
-
-  --segmented-item-size-s-padding: 4px 16px;
-}

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

@@ -1,24 +0,0 @@
-:root {
-  --select-xxl-padding: 15px 25px;
-  --select-xl-padding: 9px 20px;
-  --select-xs-padding: 0px 8px;
-  --select-m-padding: 5px 12px;
-  --select-s-padding: 1px 4px;
-  --select-l-padding: 7px 15px;
-
-  --select-menu-border-radius: 12px;
-  --select-menu-margin: 0;
-
-  --select-multi-value-padding: 2px 6px;
-
-  --select-control-shape-rounded: 8px;
-
-  --select-success-border: var(--color-surface-border-tertiary);
-
-  --select-menu-list-item-xxl-padding: 18px 25px;
-  --select-menu-list-item-xl-padding: 14px 20px;
-  --select-menu-list-item-l-padding: 10px 12px;
-  --select-menu-list-item-m-padding: 8px 12px;
-  --select-menu-list-item-s-padding: 6px 10px;
-  --select-menu-list-item-xs-padding: 2px 8px;
-}

package/dist/css/components/Switch/Switch.tokens.css

@@ -1,7 +0,0 @@
-:root {
-  --switch-size-normal-width: 52px;
-  --switch-size-normal-height: 32px;
-
-  --switch-size-compact-width: 40px;
-  --switch-size-compact-height: 24px;
-}

package/dist/css/components/Tab/Tab.tokens.css

@@ -1,28 +0,0 @@
-:root {
-  --tab-size-normal-padding: 12px;
-  --tab-size-normal-gap: 4px;
-
-  --tab-size-compact-padding: 12px;
-  --tab-size-compact-gap: 4px;
-
-  --tab-size-xxs-padding: 0px;
-  --tab-size-xxs-gap: 4px;
-
-  --tab-size-xs-padding: 3px;
-  --tab-size-xs-gap: 4px;
-
-  --tab-size-s-padding: 5px;
-  --tab-size-s-gap: 4px;
-
-  --tab-size-m-padding: 7px;
-  --tab-size-m-gap: 4px;
-
-  --tab-size-l-padding: 11px;
-  --tab-size-l-gap: 4px;
-
-  --tab-size-xl-padding: 15px;
-  --tab-size-xl-gap: 4px;
-
-  --tab-size-xxl-padding: 19px;
-  --tab-size-xxl-gap: 4px;
-}

package/dist/css/components/Textarea/Textarea.tokens.css

@@ -1,7 +0,0 @@
-:root {
-  --textarea-shape-rounded: 8px;
-  --textarea-size-m-padding: 8px 12px;
-  --textarea-min-height: 80px;
-  --textarea-max-height: 80px;
-  --textarea-success-border: var(--color-surface-border-tertiary);
-}

package/dist/css/components/Tile/Tile.tokens.css

@@ -1,9 +0,0 @@
-:root {
-  --tile-size-normal-padding: 24px;
-  --tile-size-normal-gap: 24px;
-  --tile-size-normal-min-width: 320px;
-
-  --tile-wrapper-flex: 1 1;
-  --tile-wrapper-group-flex: 1;
-  --tile-title-margin-right: 40px;
-}

package/dist/css/components/Tooltip/Tooltip.tokens.css

@@ -1,13 +0,0 @@
-:root {
-  --tooltip-size-m-padding: 0;
-  --tooltip-size-s-padding: 0;
-
-  --tooltip-size-m-gap: 0;
-  --tooltip-size-s-gap: 0;
-
-  --tooltip-arrow-width: 14px;
-  --tooltip-arrow-height: 14px;
-  --tooltip-arrow-radius: 2px;
-
-  --tooltip-arrow-color: var(--color-surface-primary);
-}