@itcase/ui 1.4.13 → 1.5.0

package/dist/components/Textarea.js

@@ -1,11 +1,14 @@
+import { _ as __assign } from '../tslib.es6-Bwu1Cn-t.js';
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import '../tslib.es6-5FtW-kfi.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
+import '../context/Notifications.js';
+import 'uuid';
+import '@itcase/common';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
@@ -13,28 +16,24 @@ import '../utils/setViewportProperty.js';
 
 var textareaAppearance = {
     dev: {
+        size: 'm',
         borderColor: 'surfaceBorderTertiary',
         borderHover: 'surfaceBorderQuaternary',
-        placeholderTextColor: 'surfaceTextSecondary',
-        shape: 'rounded',
-        size: 'm',
         textColor: 'surfaceTextPrimary',
         textSize: 'm',
+        placeholderTextColor: 'surfaceTextSecondary',
+        shape: 'rounded',
     },
 };
 var textareaState = {
-    active: {
-        borderColor: 'surfaceBorderActive',
-        placeholderTextColor: 'secondaryTextSecondary',
-    },
-    activeFilled: {
-        borderColor: 'surfaceBorderActive',
+    filled: {
+        borderColor: 'surfaceBorderQuaternary',
         textColor: 'surfaceTextPrimary',
     },
     disabled: {
         borderColor: 'surfaceBorderDisabled',
-        placeholderTextColor: 'surfaceTextDisabled',
         textColor: 'surfaceTextPrimary',
+        placeholderTextColor: 'surfaceTextDisabled',
     },
     error: {
         borderColor: 'errorBorderPrimary',
@@ -44,8 +43,16 @@ var textareaState = {
         borderColor: 'errorBorderPrimary',
         textColor: 'surfaceTextPrimary',
     },
-    filled: {
-        borderColor: 'surfaceBorderQuaternary',
+    success: {
+        borderColor: 'successBorderPrimary',
+        textColor: 'surfaceTextPrimary',
+    },
+    active: {
+        borderColor: 'surfaceBorderActive',
+        placeholderTextColor: 'secondaryTextSecondary',
+    },
+    activeFilled: {
+        borderColor: 'surfaceBorderActive',
         textColor: 'surfaceTextPrimary',
     },
     normal: {
@@ -60,10 +67,6 @@ var textareaState = {
         borderColor: 'surfaceBorderActive',
         textColor: 'surfaceTextPrimary',
     },
-    success: {
-        borderColor: 'successBorderPrimary',
-        textColor: 'surfaceTextPrimary',
-    },
 };
 
 var textareaConfig = {
@@ -84,11 +87,14 @@ function Textarea(props) {
     //   () => state && textareaConfig.state && textareaConfig.state[state],
     //   [state, textareaConfig],
     // )
-    // @ts-expect-error
-    var appearanceConfig = textareaConfig.appearance && textareaConfig.appearance[appearance];
+    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultAppearance, appearance) {
+        var _a;
+        return (__assign(__assign({}, resultAppearance), (_a = textareaConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
+    }, {});
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     var fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, borderHoverClass = propsGenerator.borderHoverClass, textColorClass = propsGenerator.textColorClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, caretClass = propsGenerator.caretClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, shapeClass = propsGenerator.shapeClass, _a = propsGenerator.sizeClass, sizeClass = _a === void 0 ? 'm' : _a, widthClass = propsGenerator.widthClass;
-    return (jsx("textarea", { id: id, className: clsx(className, 'textarea', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), fillClass && "fill_".concat(fillClass), borderColorClass && "border-color_".concat(borderColorClass), borderHoverClass && "border-color_hover_".concat(borderHoverClass), placeholderTextColorClass && "placeholder-text-color_".concat(placeholderTextColorClass), sizeClass && "textarea_size_".concat(sizeClass), shapeClass && "textarea_shape_".concat(shapeClass), textSizeClass && "text_size_".concat(textSizeClass), textColorClass && "text-color_".concat(textColorClass), textWeightClass && "text-weight_".concat(textWeightClass), widthClass && "width_".concat(widthClass)), disabled: disabled, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onKeyDown: onKeyDown }));
+    return (jsx("textarea", { id: id, className: clsx(className, 'textarea', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), fillClass && "fill_".concat(fillClass), borderColorClass && "border-color_".concat(borderColorClass), borderHoverClass && "border-color_hover_".concat(borderHoverClass), placeholderTextColorClass &&
+            "placeholder-text-color_".concat(placeholderTextColorClass), sizeClass && "textarea_size_".concat(sizeClass), shapeClass && "textarea_shape_".concat(shapeClass), textSizeClass && "text_size_".concat(textSizeClass), textColorClass && "text-color_".concat(textColorClass), textWeightClass && "text-weight_".concat(textWeightClass), widthClass && "width_".concat(widthClass)), disabled: disabled, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onKeyDown: onKeyDown }));
 }
 
 export { Textarea, textareaAppearance, textareaConfig, textareaState };

package/dist/components/Tile.js

@@ -1,25 +1,28 @@
-import { _ as __assign } from '../tslib.es6-5FtW-kfi.js';
+import { _ as __assign } from '../tslib.es6-Bwu1Cn-t.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Badge } from '../Badge-BxT2_kz_.js';
-import { T as Text } from '../Text-C6NSmetx.js';
-import { T as Title } from '../Title-Byi9vhDt.js';
+import { B as Badge } from '../Badge-LjfcZycz.js';
+import { T as Text } from '../Text-CI2prtf6.js';
+import { T as Title } from '../Title-CaXw1KBQ.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
+import '../context/Notifications.js';
+import 'uuid';
+import '@itcase/common';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Icon-OJ_3E3eM.js';
+import '../Icon-CoBJRPlP.js';
 import 'react-inlinesvg';
-import '../Link-DaKqf1pb.js';
-import '../Tooltip-5lQyt5-Y.js';
+import '../Link-Sr03Kia9.js';
+import '../Tooltip-EOu0a93a.js';
 
 var tileAppearance = {
     dev: {},
@@ -32,17 +35,16 @@ var tileConfig = {
     },
 };
 function Tile(props) {
-    var className = props.className, type = props.type, appearance = props.appearance, direction = props.direction, children = props.children, text = props.text, title = props.title, badge = props.badge, badgeAppearance = props.badgeAppearance, reverse = props.reverse, size = props.size, before = props.before, after = props.after, onClick = props.onClick;
+    var className = props.className, type = props.type, appearance = props.appearance, direction = props.direction, size = props.size, title = props.title, text = props.text, badge = props.badge, badgeAppearance = props.badgeAppearance, reverse = props.reverse, before = props.before, after = props.after, onClick = props.onClick, children = props.children;
     var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultApperance, appearance) {
         var _a;
         return (__assign(__assign({}, resultApperance), (_a = tileConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
     }, {});
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var alignClass = propsGenerator.alignClass, _a = propsGenerator.alignDirectionClass, alignDirectionClass = _a === void 0 ? 'vertical' : _a, fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, textColor = propsGenerator.textColor, textSize = propsGenerator.textSize, textWrap = propsGenerator.textWrap, titleTextAlign = propsGenerator.titleTextAlign, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, titleTextWeight = propsGenerator.titleTextWeight, titleTextWrap = propsGenerator.titleTextWrap, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, dataTestId = propsGenerator.dataTestId, dataTour = propsGenerator.dataTour, shapeClass = propsGenerator.shapeClass;
+    var alignClass = propsGenerator.alignClass, _a = propsGenerator.alignDirectionClass, alignDirectionClass = _a === void 0 ? 'vertical' : _a, fillClass = propsGenerator.fillClass, titleTextAlign = propsGenerator.titleTextAlign, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, titleTextWeight = propsGenerator.titleTextWeight, titleTextWrap = propsGenerator.titleTextWrap, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, textColor = propsGenerator.textColor, textSize = propsGenerator.textSize, textWrap = propsGenerator.textWrap, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, dataTestId = propsGenerator.dataTestId, dataTour = propsGenerator.dataTour, shapeClass = propsGenerator.shapeClass;
     // @ts-expect-error
     var tileStyles = useStyles(props).styles;
-    return (jsx("div", { className: clsx('tile', className, fillClass && "fill_".concat(fillClass), shapeClass && "tile_shape_".concat(shapeClass), alignClass && "align_".concat(alignClass), alignDirectionClass && "align_".concat(alignDirectionClass), direction && "direction_".concat(direction), borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass &&
-            "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), reverse && 'tile_reverse', size && "tile_size_".concat(size), type && "tile_type_".concat(type), badge && "tile_state_badge"), "data-testid": dataTestId, "data-tour": dataTour, style: tileStyles, onClick: onClick, children: jsxs("div", { className: clsx('tile__wrapper', alignClass, alignDirectionClass), children: [before, title && (jsx(Title, { className: "tile__title", textAlign: titleTextAlign, textColor: titleTextColor, textWeight: titleTextWeight, textWrap: titleTextWrap, size: titleTextSize, children: title })), text && (jsx(Text, { className: "tile__text", textColor: textColor, textWrap: textWrap, size: textSize, children: text })), badge && (jsx(Badge, { className: "tile__badge", appearance: badgeAppearance, textColor: badgeTextColor, textSize: badgeTextSize, size: badgeSize, value: badge })), children, after] }) }));
+    return (jsx("div", { className: clsx('tile', className, fillClass && "fill_".concat(fillClass), shapeClass && "tile_shape_".concat(shapeClass), alignClass && "align_".concat(alignClass), alignDirectionClass && "align_".concat(alignDirectionClass), direction && "direction_".concat(direction), borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), reverse && 'tile_reverse', size && "tile_size_".concat(size), type && "tile_type_".concat(type), badge && "tile_state_badge"), "data-testid": dataTestId, "data-tour": dataTour, 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] }) }));
 }
 
 export { Tile, tileAppearance, tileConfig };

package/dist/components/Title.js

@@ -1,8 +1,11 @@
-export { T as Title, a as titleAppearance, t as titleConfig } from '../Title-Byi9vhDt.js';
-import '../tslib.es6-5FtW-kfi.js';
+export { T as Title, a as titleAppearance, t as titleConfig } from '../Title-CaXw1KBQ.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
+import '../context/Notifications.js';
+import 'uuid';
+import '@itcase/common';
 import '../context/UIContext.js';
 import 'lodash/camelCase';
 import '../hooks/useMediaQueries/useMediaQueries.js';

package/dist/components/Tooltip.js

@@ -1,5 +1,5 @@
-export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Tooltip-5lQyt5-Y.js';
-import '../tslib.es6-5FtW-kfi.js';
+export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Tooltip-EOu0a93a.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -7,6 +7,9 @@ import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
+import '../context/Notifications.js';
+import 'uuid';
+import '@itcase/common';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
@@ -14,5 +17,5 @@ import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Text-C6NSmetx.js';
-import '../Title-Byi9vhDt.js';
+import '../Text-CI2prtf6.js';
+import '../Title-CaXw1KBQ.js';

package/dist/components/Video.js

@@ -5,8 +5,11 @@ import 'react';
 import 'lodash/camelCase';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
+import '../context/Notifications.js';
+import '../tslib.es6-Bwu1Cn-t.js';
+import 'uuid';
+import '@itcase/common';
 import '../context/UIContext.js';
-import '../tslib.es6-5FtW-kfi.js';
 import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';

package/dist/context/Notifications.js

@@ -1,5 +1,5 @@
 'use client';
-import { b as __spreadArray } from '../tslib.es6-5FtW-kfi.js';
+import { a as __spreadArray } from '../tslib.es6-Bwu1Cn-t.js';
 import { jsx } from 'react/jsx-runtime';
 import { createContext, useState, useCallback, useMemo, useEffect, useContext } from 'react';
 import { v4 } from 'uuid';
@@ -13,8 +13,8 @@ var STATUSES = {
 };
 var NotificationsContext = createContext([]);
 var NotificationsAPIContext = createContext({
-    hideNotifications: function (targetId) { },
-    showNotification: function (notification, onClose) { },
+    hideNotifications: function () { },
+    showNotification: function () { },
     notificationStatuses: STATUSES,
 });
 function NotificationsProvider(props) {

package/dist/context/UIContext.js

@@ -1,5 +1,5 @@
 'use client';
-import { a as __rest, _ as __assign } from '../tslib.es6-5FtW-kfi.js';
+import { b as __rest, _ as __assign } from '../tslib.es6-Bwu1Cn-t.js';
 import { jsx } from 'react/jsx-runtime';
 import { createContext, memo, useMemo, useEffect, useContext } from 'react';
 import camelCase from 'lodash/camelCase';
@@ -13,7 +13,7 @@ var UserDeviceContext = createContext({
     isTablet: false,
 });
 var UIProvider = memo(function UIProvider(props) {
-    var children = props.children, _a = props.userDeviceState, userDeviceState = _a === void 0 ? {} : _a;
+    var _a = props.userDeviceState, userDeviceState = _a === void 0 ? {} : _a, children = props.children;
     /** NOTE:
      * Remember that the "useMediaQueries" hook works by next scenario:
      * when changing the device type(browser width), the hook will first "enable"
@@ -45,7 +45,7 @@ var UIProvider = memo(function UIProvider(props) {
         deviceCurrentType = camelCase(deviceCurrentType.replace('is', ''));
         // On server side render we doesn't known user device and we need to set special word
         return [deviceCurrentType || '_none_', deviceTypesList];
-    }, [allDevicesTypes, deviceCurrentMainType]), deviceCurrentType = _b[0], deviceTypesList = _b[1];
+    }, [allDevicesTypes, deviceCurrentMainType, fullNamedDeviceTypes]), deviceCurrentType = _b[0], deviceTypesList = _b[1];
     var deviceContextState = useMemo(function () {
         return __assign(__assign({}, allDevicesTypes), { deviceCurrentMainType: deviceCurrentMainType, deviceCurrentType: deviceCurrentType, deviceTypesList: deviceTypesList });
     }, [

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

@@ -1,5 +1,5 @@
 .accordion {
-  border-radius: var(--accordion-border-radius, 12px);
+  border-radius: var(--accordion-border-radius);
   &__wrapper {
     width: 100%;
     max-width: var(--max);
@@ -33,13 +33,15 @@
 .accordion {
   &_shape {
     &_rounded {
-      border-radius: var(--accordion-shape-rounded, 6px);
+      border-radius: var(--accordion-shape-rounded);
       ^^&-item {
         &:first-child {
-          border-radius: var(--accordion-shape-rounded, 6px) var(--accordion-shape-rounded, 6px) 0 0;
+          border-radius: var(--accordion-shape-rounded)
+            var(--accordion-shape-rounded) 0 0;
         }
         &:last-child {
-          border-radius: 0 0 var(--accordion-shape-rounded, 6px) var(--accordion-shape-rounded, 6px);
+          border-radius: 0 0 var(--accordion-shape-rounded)
+            var(--accordion-shape-rounded);
         }
       }
     }
@@ -65,7 +67,7 @@
 .accordion-item {
   &_shape {
     &_rounded {
-      border-radius: var(--accordion-item-shape-rounded, 100px);
+      border-radius: var(--accordion-item-shape-rounded);
     }
   }
 }

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

@@ -10,8 +10,8 @@
     }
     ^&__icon {
       position: absolute;
-      right: var(--avatar-icon-right, 0);
-      bottom: var(--avatar-icon-bottom, 0);
+      right: var(--avatar-icon-right);
+      bottom: var(--avatar-icon-bottom);
     }
   }
   div&__dropdown {
@@ -66,7 +66,7 @@
     &_rounded {
       ^^&__image,
       ^^&__wrapper {
-        border-radius: var(--avatar-shape-rounded, 10px);
+        border-radius: var(--avatar-shape-rounded);
       }
     }
   }
@@ -101,8 +101,8 @@
     position: relative;
     & .dot {
       position: absolute;
-      right: var(--avatar-dot-position-right, -4px);
-      bottom: var(--avatar-dot-position-bottom, -2px);
+      right: var(--avatar-dot-position-right);
+      bottom: var(--avatar-dot-position-bottom);
     }
   }
 }

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

@@ -2,7 +2,7 @@
   display: grid;
   grid-template-columns: auto 1fr;
   grid-template-rows: auto auto;
-  gap: var(--checkbox-row-gap, 0) var(--checkbox-column-gap, 4px);
+  gap: var(--checkbox-row-gap) var(--checkbox-column-gap);
   &__item {
     min-width: 16px;
     min-height: 16px;

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

@@ -14,7 +14,8 @@
 }
 .checkmark {
   &_size {
-    @each $size, $scale in (xxl, xl, l, m, s, xs, xxs), (1.2, 1, 0.8, 0.7, 0.7, 0.7, 0.8) {
+    @each $size, $scale in (xxl, xl, l, m, s, xs, xxs),
+      (1.2, 1, 0.8, 0.7, 0.7, 0.7, 0.8) {
       &_$(size) {
         width: var(--checkmark-$(size)-width);
         height: var(--checkmark-$(size)-height);
@@ -25,3 +26,25 @@
     }
   }
 }
+:root {
+  --checkmark-xxl-width: 64px;
+  --checkmark-xxl-height: 64px;
+
+  --checkmark-xl-width: 56px;
+  --checkmark-xl-height: 56px;
+
+  --checkmark-l-width: 48px;
+  --checkmark-l-height: 48px;
+
+  --checkmark-m-width: 40px;
+  --checkmark-m-height: 40px;
+
+  --checkmark-s-width: 32px;
+  --checkmark-s-height: 32px;
+
+  --checkmark-xs-width: 24px;
+  --checkmark-xs-height: 24px;
+
+  --checkmark-xxs-width: 16px;
+  --checkmark-xxs-height: 16px;
+}

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

@@ -22,10 +22,10 @@
 .chips {
   &_shape {
     &_rounded {
-      border-radius: var(--chips-shape-rounded-default, 6px);
+      border-radius: var(--chips-shape-rounded-default);
       @each $size in xxl, xl, l, m, s, xs, xxs {
         &^^&_size_$(size) {
-          border-radius: var(--chips-$(size)-shape-rounded, 6px);
+          border-radius: var(--chips-$(size)-shape-rounded);
         }
       }
     }

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

@@ -78,7 +78,7 @@
 .choice {
   &_shape {
     &_rounded {
-      border-radius: var(--choice-shape-rounded, 8px);
+      border-radius: var(--choice-shape-rounded);
       overflow: hidden;
     }
     &_circular {
@@ -89,11 +89,11 @@
 
 .choice {
   &_size {
-    @each $size in xs, s, m, l, xl, xxl, tiny, compact, normal, large {
+    @each $size in xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
         ^^&__item {
           &-label {
-            padding: var(--choice-item-size-$(size)-padding, 9px 16px);
+            padding: var(--choice-item-size-$(size)-padding);
           }
         }
       }

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

@@ -6,9 +6,20 @@
     justify-content: space-between;
   }
 }
+.code {
+  &_size {
+    @each $size in xxl, xl, l, m, s, xs, xxs {
+      &_$(size) {
+        ^^&__wrapper {
+          gap: var(--code-size-$(size)-gap);
+        }
+      }
+    }
+  }
+}
 .code__input {
   &_size {
-    @each $size in normal, compact {
+    @each $size in xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
         min-width: var(--code-input-size-$(size)-width);
         min-height: var(--code-input-size-$(size)-height);
@@ -30,10 +41,23 @@
 .code__input {
   &_shape {
     &_rounded {
-      border-radius: var(--code-input-shape-rounded, 8px);
+      border-radius: var(--code-input-shape-rounded);
     }
     &_circular {
       border-radius: 50%;
     }
   }
 }
+: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;
+
+  --code-input-size-l-width: 56px;
+  --code-input-size-l-height: 56px;
+
+  --code-size-l-gap: 8px;
+}

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

@@ -825,9 +825,7 @@ h2.react-datepicker__current-month {
               outline: none;
             }
             &--disabled {
-              background: var(
-                --date-picker-day-outside-background
-              ) !important;
+              background: var(--date-picker-day-outside-background) !important;
               cursor: default !important;
               & .button__label {
                 color: var(--date-picker-day-outside-text-color) !important;
@@ -851,9 +849,7 @@ h2.react-datepicker__current-month {
               &:hover {
                 background: var(--date-picker-day-selected-background-hover);
                 & .button__label {
-                  color: var(
-                    --date-picker-day-selected-text-color
-                  ) !important;
+                  color: var(--date-picker-day-selected-text-color) !important;
                 }
               }
               & .button__label {
@@ -877,9 +873,7 @@ h2.react-datepicker__current-month {
                   --date-picker-day-range-start-border-radius
                 ) !important;
                 &:hover {
-                  background: var(
-                    --date-picker-day-selected-background-hover
-                  );
+                  background: var(--date-picker-day-selected-background-hover);
                   border-radius: var(
                     --date-picker-day-range-start-border-radius
                   ) !important;
@@ -938,9 +932,7 @@ h2.react-datepicker__current-month {
                 background: var(--date-picker-day-selected-background);
                 border-radius: 0;
                 &:hover {
-                  background: var(
-                    --date-picker-day-selected-background-hover
-                  );
+                  background: var(--date-picker-day-selected-background-hover);
                   & .button__label {
                     color: var(
                       --date-picker-day-selected-text-color
@@ -1033,9 +1025,7 @@ h2.react-datepicker__current-month {
                 background: var(--date-picker-day-selected-background);
                 border-radius: 0;
                 &:hover {
-                  background: var(
-                    --date-picker-day-selected-background-hover
-                  );
+                  background: var(--date-picker-day-selected-background-hover);
                   & .button__label {
                     color: var(
                       --date-picker-day-selected-text-color
@@ -1079,9 +1069,7 @@ h2.react-datepicker__current-month {
               }
             }
             &--outside-month {
-              background: var(
-                --date-picker-day-outside-background
-              ) !important;
+              background: var(--date-picker-day-outside-background) !important;
               cursor: default !important;
               & .button__label {
                 color: var(--date-picker-day-outside-text-color) !important;
@@ -1198,27 +1186,29 @@ h2.react-datepicker__current-month {
 .datepicker {
   width: 100%;
   border-radius: var(--date-picker-day-border-radius);
-  & .input {
+  &__input {
     border-radius: var(--date-picker-day-border-radius);
   }
 }
-.datepicker_type_multiple-months {
-  & .react-datepicker {
-    &__month-container {
-      &:nth-last-child(2) {
-        & .react-datepicker__header--div {
-          & .react-datepicker__icon {
-            &:last-child {
-              display: none;
+.datepicker {
+  &_type_multiple-months {
+    & .react-datepicker {
+      &__month-container {
+        &:nth-last-child(2) {
+          & .react-datepicker__header--div {
+            & .react-datepicker__icon {
+              &:last-child {
+                display: none;
+              }
             }
           }
         }
-      }
-      &:last-child {
-        & .react-datepicker__header--div {
-          & .react-datepicker__icon {
-            &:first-child {
-              display: none;
+        &:last-child {
+          & .react-datepicker__header--div {
+            & .react-datepicker__icon {
+              &:first-child {
+                display: none;
+              }
             }
           }
         }

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

@@ -5,7 +5,7 @@
 }
 .divider {
   &_size {
-    @each $size in xs, s, m, l, xl {
+    @each $size in xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
         height: var(--divider-$(size)-height);
         min-height: var(--divider-$(size)-height);
@@ -15,7 +15,7 @@
   &_direction {
     &_horizontal {
       &^^&_size {
-        @each $size in xs, s, m, l, xl {
+        @each $size in xxl, xl, l, m, s, xs, xxs {
           &_$(size) {
             height: var(--divider-$(size)-height);
             min-height: var(--divider-$(size)-height);
@@ -25,7 +25,7 @@
     }
     &_vertical {
       &^^&_size {
-        @each $size in xs, s, m, l, xl {
+        @each $size in xxl, xl, l, m, s, xs, xxs {
           &_$(size) {
             width: var(--divider-$(size)-width);
             height: auto;

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

@@ -2,12 +2,12 @@
 }
 .dot {
   &_size {
-    @each $size in xs, s, m, l {
+    @each $size in xxl, xl, l, m, s, xs, xxs {
       &_$(size) {
-        min-width: var(--dot-size-$(size)-width, 16px);
-        min-height: var(--dot-size-$(size)-height, 16px);
-        max-width: var(--dot-size-$(size)-width, 16px);
-        max-height: var(--dot-size-$(size)-height, 16px);
+        min-width: var(--dot-size-$(size)-width);
+        min-height: var(--dot-size-$(size)-height);
+        max-width: var(--dot-size-$(size)-width);
+        max-height: var(--dot-size-$(size)-height);
       }
     }
   }
@@ -15,7 +15,7 @@
 .dot {
   &_shape {
     &_rounded {
-      border-radius: var(--dot-shape-rounded, 12px);
+      border-radius: var(--dot-shape-rounded);
     }
     &_circular {
       border-radius: 50%;

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

@@ -29,7 +29,10 @@
   display: flex;
   flex-flow: column nowrap;
   &__overlay {
-    background: var(--drawer-overlay-background, rgba(116, 116, 116, 0.5)) !important;
+    background: var(
+      --drawer-overlay-background,
+      rgba(116, 116, 116, 0.5)
+    ) !important;
     opacity: 100% !important;
     backdrop-filter: var(--drawer-overlay-filter, blur(10px)) !important;
   }