@itcase/ui 1.2.30 → 1.2.32

package/dist/components/Tile.js

@@ -2,25 +2,31 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { B as Badge } from '../Badge-BZYBmgBK.js';
-import { T as Text } from '../Text-kxGZButz.js';
-import { T as Title } from '../Title-CQ_Fr1hO.js';
+import { B as Badge } from '../Badge-DBeSKfoF.js';
+import { T as Text } from '../Text-C4Bg2Mv6.js';
+import { T as Title } from '../Title-YVzIwk68.js';
 import 'react';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../appearance/Badge.js';
-import '../appearance/Text.js';
-import '../appearance/Title.js';
 
+var tileAppearance = {
+    dev: {},
+};
+
+var tileConfig = {
+    appearance: tileAppearance,
+    setAppearance: function (newComponent) {
+        tileConfig.appearance = newComponent;
+    },
+};
 function Tile(props) {
-    var children = props.children, direction = props.direction, after = props.after, badge = props.badge, badgeAppearance = props.badgeAppearance, badgeSize = props.badgeSize, badgeTextColor = props.badgeTextColor, badgeTextSize = props.badgeTextSize, before = props.before, className = props.className, reverse = props.reverse, size = props.size, text = props.text, textColor = props.textColor, textSize = props.textSize, textWrap = props.textWrap, title = props.title, titleTextAlign = props.titleTextAlign, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, titleTextWrap = props.titleTextWrap, type = props.type, onClick = props.onClick;
+    var children = props.children, direction = props.direction, after = props.after, appearance = props.appearance, badge = props.badge, badgeAppearance = props.badgeAppearance, badgeSize = props.badgeSize, badgeTextColor = props.badgeTextColor, badgeTextSize = props.badgeTextSize, before = props.before, className = props.className, reverse = props.reverse, size = props.size, text = props.text, textColor = props.textColor, textSize = props.textSize, textWrap = props.textWrap, title = props.title, titleTextAlign = props.titleTextAlign, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, titleTextWrap = props.titleTextWrap, type = props.type, onClick = props.onClick;
     var fillClass = useDeviceTargetClass(props, {
         prefix: 'fill_',
         propsKey: 'fill',
@@ -55,11 +61,20 @@ function Tile(props) {
     });
     // @ts-expect-error
     var tileStyles = useStyles(props).styles;
-    return (jsx("div", { className: clsx('tile', className, fillClass, shapeClass, alignClass, alignDirectionClass, direction && "direction_".concat(direction), borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, reverse && 'tile_reverse', size && "tile_size_".concat(size), type && "tile_type_".concat(type), badge && "tile_state_badge"), style: tileStyles, onClick: onClick, children: jsxs("div", { className: clsx('tile__wrapper', alignClass, alignDirectionClass), children: [before, title && (jsx(Title, { className: "tile__title", size: titleTextSize, textAlign: titleTextAlign, textColor: titleTextColor, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), text && (jsx(Text, { className: "tile__text", size: textSize, textColor: textColor, textWrap: textWrap, children: text })), badge && (jsx(Badge, { className: "tile__badge", appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, value: badge })), children, after] }) }));
+    var appearanceConfig = appearance && tileConfig.appearance && tileConfig.appearance[appearance];
+    return (jsx("div", { className: clsx('tile', className, fillClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
+                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), shapeClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
+                "tile_shape_".concat(appearanceConfig.shape).replace(/([A-Z])/g, '-$1').toLowerCase()), alignClass, alignDirectionClass, direction && "direction_".concat(direction), borderColorClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderColor) &&
+                "border-color_".concat(appearanceConfig.borderColor)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()), borderColorHoverClass, borderWidthClass, borderTypeClass, reverse && 'tile_reverse', size && "tile_size_".concat(size), type && "tile_type_".concat(type), badge && "tile_state_badge"), style: tileStyles, onClick: onClick, children: jsxs("div", { className: clsx('tile__wrapper', alignClass, alignDirectionClass), children: [before, title && (jsx(Title, { className: "tile__title", size: titleTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextSize), textAlign: titleTextAlign, textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor), textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), text && (jsx(Text, { className: "tile__text", size: textSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textSize), textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), textWrap: textWrap, children: text })), badge && (jsx(Badge, { className: "tile__badge", appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, value: badge })), children, after] }) }));
 }
 Tile.defaultProps = {
     alignDirection: 'vertical',
     textTag: 'span',
 };
 
-export { Tile };
+export { Tile, tileConfig };

package/dist/components/Title.js

@@ -1,15 +1,13 @@
-export { T as Title, t as titleConfig } from '../Title-CQ_Fr1hO.js';
+export { T as Title, t as titleConfig } from '../Title-YVzIwk68.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
-import '../appearance/Title.js';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import '../hooks/useDeviceTargetClass.js';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';

package/dist/components/Tooltip.js

@@ -1,20 +1,16 @@
-export { T as Tooltip, t as tooltipConfig } from '../Tooltip-ccRCMYQM.js';
+export { T as Tooltip, t as tooltipConfig } from '../Tooltip--c-4Qp04.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
-import '../appearance/Tooltip.js';
 import '../hooks/useDeviceTargetClass.js';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Text-kxGZButz.js';
-import '../appearance/Text.js';
-import '../Title-CQ_Fr1hO.js';
-import '../appearance/Title.js';
+import '../Text-C4Bg2Mv6.js';
+import '../Title-YVzIwk68.js';

package/dist/components/Video.js

@@ -6,7 +6,6 @@ import 'lodash/camelCase';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import '../hooks/styleAttributes.js';
@@ -15,7 +14,7 @@ function Video(props) {
     var id = props.id, children = props.children, className = props.className, poster = props.poster, webm = props.webm, ogv = props.ogv, mp4 = props.mp4, type = props.type, position = props.position;
     // @ts-expect-error
     var videoStyles = useStyles(props).styles;
-    return (jsxs("div", { className: clsx('video', className, type && "video_type_".concat(type), position && "video_position_".concat(position)), id: id, style: videoStyles, children: [jsxs("video", { autoPlay: true, className: "video__wrapper", poster: poster, muted: true, loop: true, playsInline: false, children: [webm && (jsx("source", { src: webm, type: "video/webm", 
+    return (jsxs("div", { className: clsx('video', className, type && "video_type_".concat(type), position && "video_position_".concat(position)), id: id, style: videoStyles, children: [jsxs("video", { className: "video__wrapper", autoPlay: true, muted: true, loop: true, poster: poster, playsInline: false, children: [webm && (jsx("source", { src: webm, type: "video/webm", 
                         // @ts-expect-error
                         codecs: "vp8, vorbis" })), ogv && (jsx("source", { src: ogv, type: "video/ogg", 
                         // @ts-expect-error

package/dist/components/Wrapper.js

@@ -3,10 +3,9 @@ import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
 import 'react';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import 'lodash/maxBy';
@@ -14,7 +13,7 @@ import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 
 function Wrapper(props) {
-    var after = props.after, before = props.before, children = props.children, className = props.className, id = props.id, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, type = props.type;
+    var id = props.id, children = props.children, after = props.after, before = props.before, _a = props.className, className = _a === void 0 ? 'wrapper' : _a, _b = props.tag, Tag = _b === void 0 ? 'div' : _b, type = props.type;
     var alignDirectionClass = useDeviceTargetClass(props, {
         prefix: 'align_',
         propsKey: 'alignDirection',
@@ -44,12 +43,8 @@ function Wrapper(props) {
         propsKey: 'wrapperPosition',
     });
     // @ts-expect-error
-    var _b = useStyles(props), wrapperStyles = _b.styles, innerStyles = _b.inner;
-    return (jsx(Tag, { id: id, className: clsx(className, type && "".concat(className, "_type_").concat(type), fillClass, resizeHorizontalClass, resizeVerticalClass, positionClass), style: wrapperStyles, children: jsxs("div", { className: clsx("".concat(className, "__inner"), alignDirectionClass, alignClass, wrapperPositionClass), style: innerStyles, children: [before, children, after] }) }));
+    var _c = useStyles(props), innerStyles = _c.inner, wrapperStyles = _c.styles;
+    return (jsx(Tag, { className: clsx(className, type && "".concat(className, "_type_").concat(type), fillClass, resizeHorizontalClass, resizeVerticalClass, positionClass), id: id, style: wrapperStyles, children: jsxs("div", { className: clsx("".concat(className, "__inner"), alignDirectionClass, alignClass, wrapperPositionClass), style: innerStyles, children: [before, children, after] }) }));
 }
-Wrapper.defaultProps = {
-    className: 'wrapper',
-    tag: 'div',
-};
 
 export { Wrapper };

package/dist/context/Notifications.js

@@ -1,8 +1,7 @@
 'use client';
-import { b as __spreadArray } from '../tslib.es6-w7hdJ3oZ.js';
+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 PropTypes from 'prop-types';
 import { v4 } from 'uuid';
 
 var STATUSES = {
@@ -92,10 +91,6 @@ function NotificationsProvider(props) {
     }, []);
     return (jsx(NotificationsAPIContext.Provider, { value: notificationsAPI, children: jsx(NotificationsContext.Provider, { value: notificationsList, children: children }) }));
 }
-NotificationsProvider.propTypes = {
-    children: PropTypes.any,
-    initialNotificationsList: PropTypes.array,
-};
 function useNotifications() {
     return useContext(NotificationsContext);
 }

package/dist/context/UIContext.js

@@ -1,7 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { createContext, memo, useState, useMemo, useContext } from 'react';
-import PropTypes from 'prop-types';
 import { useMediaQueries } from '../hooks/useMediaQueries.js';
 import 'react-responsive';
 
@@ -27,13 +26,5 @@ var UIProvider = memo(function UIProvider(props) {
     var mediaQueriesDevices = useMediaQueries(userDeviceState);
     return (jsx(UserDeviceContext.Provider, { value: mediaQueriesDevices, children: jsx(SiteMenuContext.Provider, { value: siteMenuContextState, children: children }) }));
 });
-UIProvider.propTypes = {
-    children: PropTypes.any,
-    userDeviceState: PropTypes.shape({
-        isMobile: PropTypes.bool,
-        isTablet: PropTypes.bool,
-        isDesktop: PropTypes.bool,
-    }),
-};
 
 export { UIProvider, useSiteMenuContext, useUserDeviceContext };

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

@@ -0,0 +1,4 @@
+:root {
+  --accordion-item-shape-rounded: 12px;
+}
+

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

@@ -33,7 +33,7 @@
           var(--color-surface-secondary)
         );
         background-size: 200%;
-        animation: avatar-skeleton 3s infinite linear;
+        animation: avatarSkeleton 3s infinite linear;
         ^^^&__name {
           color: transparent;
         }
@@ -41,7 +41,7 @@
     }
   }
 }
-@keyframes avatar-skeleton {
+@keyframes avatarSkeleton {
   0% {
     background-position: 200%;
   }

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

@@ -0,0 +1,2 @@
+:root {
+}

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

@@ -0,0 +1,117 @@
+:root {
+  {/* new tokens general */}
+  --button-xxl-shape-rounded: 6px;
+  --button-xl-shape-rounded: 6px;
+  --button-l-shape-rounded: 6px;
+  --button-m-shape-rounded: 6px;
+  --button-s-shape-rounded: 6px;
+  --button-xs-shape-rounded: 6px;
+  --button-xxs-shape-rounded: 6px;
+  
+  --button-with-icon-xxl-gap: 4px;
+  --button-with-icon-xl-gap: 4px;
+  --button-with-icon-l-gap: 4px;
+  --button-with-icon-m-gap: 4px;
+  --button-with-icon-s-gap: 4px;
+  --button-with-icon-xs-gap: 4px;
+  --button-with-icon-xxs-gap: 4px;
+
+  {/* filled paddings with sizes */}
+  --button-with-icon-filled-xxl-padding: 16px;
+  --button-with-icon-filled-xl-padding: 8px 12px;
+  --button-with-icon-filled-l-padding: 4px 8px;
+  --button-with-icon-filled-m-padding: 6px 8px;
+  --button-with-icon-filled-s-padding: 4px;
+  --button-with-icon-filled-xs-padding: 2px 4px;
+  --button-with-icon-filled-xxs-padding: 1px 4px;
+
+  --button-label-filled-xxl-padding: 16px;
+  --button-label-filled-xl-padding: 8px 12px;
+  --button-label-filled-l-padding: 4px 8px;
+  --button-label-filled-m-padding: 2px 8px;
+  --button-label-filled-s-padding: 0px 4px;
+  --button-label-filled-xs-padding: 0px 4px;
+  --button-label-filled-xxs-padding: 0px 4px;
+
+  --button-icon-filled-xxl-padding: 16px;
+  --button-icon-filled-xl-padding: 8px;
+  --button-icon-filled-l-padding: 4px;
+  --button-icon-filled-m-padding: 6px;
+  --button-icon-filled-s-padding: 4px;
+  --button-icon-filled-xs-padding: 2px;
+  --button-icon-filled-xxs-padding: 1px;
+
+  --button-loader-filled-xxl-padding: 28px 50px;
+  --button-loader-filled-xl-padding: 20px 50px;
+  --button-loader-filled-l-padding: 16px 50px;
+  --button-loader-filled-m-padding: 14px 50px;
+  --button-loader-filled-s-padding: 12px 50px;
+  --button-loader-filled-xs-padding: 10px 50px;
+  --button-loader-filled-xxs-padding: 8px 50px;
+
+  {/* outlined paddings with sizes */}
+  --button-with-icon-outlined-xxl-padding: 15px;
+  --button-with-icon-outlined-xl-padding: 7px 11px;
+  --button-with-icon-outlined-l-padding: 3px 7px;
+  --button-with-icon-outlined-m-padding: 5px 7px;
+  --button-with-icon-outlined-s-padding: 3px;
+  --button-with-icon-outlined-xs-padding: 1px 3px;
+  --button-with-icon-outlined-xxs-padding: 0px 3px;
+
+  --button-label-outlined-xxl-padding: 15px;
+  --button-label-outlined-xl-padding: 7px 11px;
+  --button-label-outlined-l-padding: 3px 7px;
+  --button-label-outlined-m-padding: 1px 7px;
+  --button-label-outlined-s-padding: 0px 3px;
+  --button-label-outlined-xs-padding: 0px 3px;
+  --button-label-outlined-xxs-padding: 0px 3px;
+
+  --button-icon-outlined-xxl-padding: 15px;
+  --button-icon-outlined-xl-padding: 7px;
+  --button-icon-outlined-l-padding: 3px;
+  --button-icon-outlined-m-padding: 5px;
+  --button-icon-outlined-s-padding: 3px;
+  --button-icon-outlined-xs-padding: 1px;
+  --button-icon-outlined-xxs-padding: 0px;
+
+  --button-loader-outlined-xxl-padding: 27px 49px;
+  --button-loader-outlined-xl-padding: 19px 49px;
+  --button-loader-outlined-l-padding: 15px 49px;
+  --button-loader-outlined-m-padding: 13px 49px;
+  --button-loader-outlined-s-padding: 11px 49px;
+  --button-loader-outlined-xs-padding: 9px 49px;
+  --button-loader-outlined-xxs-padding: 7px 49px;
+
+  {/* ghost paddings with sizes */}
+  --button-with-icon-ghost-xxl-padding: 16px;
+  --button-with-icon-ghost-xl-padding: 8px 12px;
+  --button-with-icon-ghost-l-padding: 4px 8px;
+  --button-with-icon-ghost-m-padding: 6px 8px;
+  --button-with-icon-ghost-s-padding: 4px;
+  --button-with-icon-ghost-xs-padding: 2px 4px;
+  --button-with-icon-ghost-xxs-padding: 1px 4px;
+
+  --button-label-ghost-xxl-padding: 16px;
+  --button-label-ghost-xl-padding: 8px 12px;
+  --button-label-ghost-l-padding: 4px 8px;
+  --button-label-ghost-m-padding: 2px 8px;
+  --button-label-ghost-s-padding: 0px 4px;
+  --button-label-ghost-xs-padding: 0px 4px;
+  --button-label-ghost-xxs-padding: 0px 4px;
+
+  --button-icon-ghost-xxl-padding: 16px;
+  --button-icon-ghost-xl-padding: 8px;
+  --button-icon-ghost-l-padding: 4px;
+  --button-icon-ghost-m-padding: 6px;
+  --button-icon-ghost-s-padding: 4px;
+  --button-icon-ghost-xs-padding: 2px;
+  --button-icon-ghost-xxs-padding: 1px;
+
+  --button-loader-ghost-xxl-padding: 28px 50px;
+  --button-loader-ghost-xl-padding: 20px 50px;
+  --button-loader-ghost-l-padding: 16px 50px;
+  --button-loader-ghost-m-padding: 14px 50px;
+  --button-loader-ghost-s-padding: 12px 50px;
+  --button-loader-ghost-xs-padding: 10px 50px;
+  --button-loader-ghost-xxs-padding: 8px 50px;
+}

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

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

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

@@ -0,0 +1,9 @@
+:root {
+  --chips-size-xxs-padding: 0px 8px;
+  --chips-size-xs-padding: 1px 10px;
+  --chips-size-s-padding: 2px 10px;
+  --chips-size-m-padding: 4px 10px;
+  --chips-size-l-padding: 5px 10px;
+  --chips-size-xl-padding: 9px 10px;
+  --chips-size-xxl-padding: 13px 12px;
+}

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

@@ -0,0 +1,17 @@
+: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-primary-hover);
+  --choice-item-background-active: var(--color-surface-tertiary);
+
+  --choice-item-icon-padding: 3px 2px;
+}

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

@@ -0,0 +1,5 @@
+:root {
+  --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

@@ -0,0 +1,4 @@
+:root {
+  --react-dadata-padding: 7px 12px;
+  --react-dadata-border-radius: 8px;
+}

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

@@ -0,0 +1,38 @@
+:root {
+  --date-picker-input-border-radius: 6px;
+
+  --date-picker-background: var(--color-surface-primary);
+  --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-width: 40px;
+  --date-picker-day-height: 40px;
+  --date-picker-day-padding: 8px 0;
+  --date-picker-day-border-radius: 8px;
+
+  --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/Dot/Dot.tokens.css

@@ -0,0 +1,10 @@
+: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/Dropdown/Dropdown.tokens.css

@@ -0,0 +1,33 @@
+:root {
+  --dropdown-item-size-xs-padding: 0;
+  --dropdown-item-size-xs-gap: 8px;
+
+  --dropdown-item-size-l-padding: 10px 12px;
+  --dropdown-item-size-l-gap: 12px;
+}
+
+@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

@@ -0,0 +1,4 @@
+: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

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

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

@@ -12,17 +12,17 @@
   &_size {
     @each $size in 14, 16, 24, 32, 40, 48, 56, 60, 64, 72, 80, 96, 112, 144 {
       &_$(size) {
-        width: $(size) px;
-        height: $(size) px;
-        min-width: $(size) px;
-        min-height: $(size) px;
-        font-size: $(size) px;
+        width: $(size)px;
+        height: $(size)px;
+        min-width: $(size)px;
+        min-height: $(size)px;
+        font-size: $(size)px;
         display: flex;
         justify-content: center;
         align-items: center;
         & > svg {
-          width: $(size) px;
-          height: $(size) px;
+          width: $(size)px;
+          height: $(size)px;
         }
       }
     }

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

@@ -0,0 +1,3 @@
+:root {
+  --icon-size-24-badge-position: 14px, -12px;
+}

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

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

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

@@ -0,0 +1,29 @@
+: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

@@ -0,0 +1,23 @@
+: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

@@ -0,0 +1,19 @@
+: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

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

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

@@ -0,0 +1,10 @@
+: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;
+}

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

@@ -0,0 +1,5 @@
+: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

@@ -0,0 +1,9 @@
+:root {
+  --menu-item-shape-rounded: 6px;
+
+  --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);
+
+  --menu-item-set-subitem-padding-left: 32px;
+}