@itcase/ui 1.3.34 → 1.3.37

package/dist/components/Tab.js

@@ -1,3 +1,4 @@
+import { _ as __assign } from '../tslib.es6-5FtW-kfi.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';
@@ -7,7 +8,6 @@ import { B as Badge } from '../Badge-CGHosmYx.js';
 import { D as Divider } from '../Divider-BQcBkzt1.js';
 import { a as Link } from '../Link-BhJ5BdyS.js';
 import { T as Text } from '../Text-C6NSmetx.js';
-import '../tslib.es6-5FtW-kfi.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
@@ -23,125 +23,123 @@ import '../Tooltip-BYgzNVYI.js';
 import '../Title-Dck3eHNM.js';
 
 var tabAppearance = {
-    any: {
-        dividerFill: 'surfaceTertiary',
-        dividerFillActive: 'accentPrimary',
+    accent: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+        labelColor: 'accentTextPrimary',
+        labelColorActive: 'accentTextPrimary',
         dividerFillDisabled: 'accentDisabled',
-        dividerFillHover: 'surfaceTertiary',
-        fill: 'surfacePrimary',
         fillDisabled: 'surfaceDisabled',
-        fillHover: 'surfaceTertiary',
-        labelColor: 'surfaceTextPrimary',
-        labelColorActive: 'surfaceTextAccent',
         labelColorDisabled: 'surfaceTextDisabled',
+        dividerFill: 'surfaceTertiary',
+        dividerFillActive: 'surfacePrimary',
+        dividerFillHover: 'surfaceTertiary',
     },
-    surfacePrimary: {
+    primary: {
+        fill: 'primaryPrimary',
+        fillHover: 'primaryPrimaryHover',
+        labelColor: 'primaryTextPrimary',
+        labelColorActive: 'primaryTextPrimary',
+        dividerFillDisabled: 'accentDisabled',
+        fillDisabled: 'surfaceDisabled',
+        labelColorDisabled: 'surfaceTextDisabled',
         dividerFill: 'surfaceTertiary',
         dividerFillActive: 'accentPrimary',
+        dividerFillHover: 'surfaceTertiary',
+    },
+    secondary: {
+        fill: 'secondaryPrimary',
+        fillHover: 'secondaryPrimaryHover',
+        labelColor: 'secondaryTextPrimary',
+        labelColorActive: 'secondaryTextPrimary',
         dividerFillDisabled: 'accentDisabled',
+        fillDisabled: 'surfaceDisabled',
+        labelColorDisabled: 'surfaceTextDisabled',
+        dividerFill: 'surfaceTertiary',
+        dividerFillActive: 'accentPrimary',
         dividerFillHover: 'surfaceTertiary',
+    },
+    surfacePrimary: {
         fill: 'surfacePrimary',
-        fillDisabled: 'surfaceDisabled',
         fillHover: 'surfacePrimaryHover',
         labelColor: 'surfaceTextPrimary',
         labelColorActive: 'surfaceTextAccent',
+        dividerFillDisabled: 'accentDisabled',
+        fillDisabled: 'surfaceDisabled',
         labelColorDisabled: 'surfaceTextDisabled',
-    },
-    surfaceSecondary: {
         dividerFill: 'surfaceTertiary',
         dividerFillActive: 'accentPrimary',
-        dividerFillDisabled: 'accentDisabled',
         dividerFillHover: 'surfaceTertiary',
+    },
+    surfaceSecondary: {
         fill: 'surfaceSecondary',
-        fillDisabled: 'surfaceDisabled',
         fillHover: 'surfaceSecondaryHover',
         labelColor: 'surfaceTextPrimary',
         labelColorActive: 'surfaceTextAccent',
+        dividerFillDisabled: 'accentDisabled',
+        fillDisabled: 'surfaceDisabled',
         labelColorDisabled: 'surfaceTextDisabled',
-    },
-    surfaceTertiary: {
         dividerFill: 'surfaceTertiary',
         dividerFillActive: 'accentPrimary',
-        dividerFillDisabled: 'accentDisabled',
         dividerFillHover: 'surfaceTertiary',
+    },
+    surfaceTertiary: {
         fill: 'surfaceTertiary',
-        fillDisabled: 'surfaceDisabled',
         fillHover: 'surfaceTertiaryHover',
         labelColor: 'surfaceTextPrimary',
         labelColorActive: 'surfaceTextAccent',
+        dividerFillDisabled: 'accentDisabled',
+        fillDisabled: 'surfaceDisabled',
         labelColorDisabled: 'surfaceTextDisabled',
-    },
-    surfaceQuaternary: {
         dividerFill: 'surfaceTertiary',
         dividerFillActive: 'accentPrimary',
-        dividerFillDisabled: 'accentDisabled',
         dividerFillHover: 'surfaceTertiary',
+    },
+    surfaceQuaternary: {
         fill: 'surfaceQuaternary',
-        fillDisabled: 'surfaceDisabled',
         fillHover: 'surfaceTertiaryHover',
         labelColor: 'surfaceTextInverse',
         labelColorActive: 'surfaceTextInverse',
-        labelColorDisabled: 'surfaceTextDisabled',
-    },
-    accent: {
-        dividerFill: 'surfaceTertiary',
-        dividerFillActive: 'surfacePrimary',
         dividerFillDisabled: 'accentDisabled',
-        dividerFillHover: 'surfaceTertiary',
-        fill: 'accentPrimary',
         fillDisabled: 'surfaceDisabled',
-        fillHover: 'accentPrimaryHover',
-        labelColor: 'accentTextPrimary',
-        labelColorActive: 'accentTextPrimary',
         labelColorDisabled: 'surfaceTextDisabled',
-    },
-    primary: {
         dividerFill: 'surfaceTertiary',
         dividerFillActive: 'accentPrimary',
-        dividerFillDisabled: 'accentDisabled',
         dividerFillHover: 'surfaceTertiary',
-        fill: 'primaryPrimary',
+    },
+    any: {
+        fill: 'surfacePrimary',
+        fillHover: 'surfaceTertiary',
+        labelColor: 'surfaceTextPrimary',
+        labelColorActive: 'surfaceTextAccent',
+        dividerFillDisabled: 'accentDisabled',
         fillDisabled: 'surfaceDisabled',
-        fillHover: 'primaryPrimaryHover',
-        labelColor: 'primaryTextPrimary',
-        labelColorActive: 'primaryTextPrimary',
         labelColorDisabled: 'surfaceTextDisabled',
-    },
-    secondary: {
         dividerFill: 'surfaceTertiary',
         dividerFillActive: 'accentPrimary',
-        dividerFillDisabled: 'accentDisabled',
         dividerFillHover: 'surfaceTertiary',
-        fill: 'secondaryPrimary',
-        fillDisabled: 'surfaceDisabled',
-        fillHover: 'secondaryPrimaryHover',
-        labelColor: 'secondaryTextPrimary',
-        labelColorActive: 'secondaryTextPrimary',
-        labelColorDisabled: 'surfaceTextDisabled',
     },
 };
 
 var tabConfig = {
     appearance: tabAppearance,
-    setAppearance: function (newComponent) {
-        tabConfig.appearance = newComponent;
+    setAppearance: function (appearanceConfig) {
+        tabConfig.appearance = appearanceConfig;
     },
 };
 function Tab(props) {
-    var children = props.children, _a = props.isActive, isActive = _a === void 0 ? false : _a, _b = props.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = props.isHover, isHover = _c === void 0 ? false : _c, after = props.after, appearance = props.appearance, badgeAppearance = props.badgeAppearance, badgeShape = props.badgeShape, badgeSize = props.badgeSize, badgeTextColor = props.badgeTextColor, badgeTextSize = props.badgeTextSize, badgeValue = props.badgeValue, before = props.before, className = props.className, dataTour = props.dataTour, _d = props.dividerDirection, dividerDirection = _d === void 0 ? 'horizontal' : _d, dividerFill = props.dividerFill, dividerFillActive = props.dividerFillActive, dividerFillActiveHover = props.dividerFillActiveHover, dividerFillDisabled = props.dividerFillDisabled, dividerFillHover = props.dividerFillHover, dividerSize = props.dividerSize, href = props.href, label = props.label, labelColor = props.labelColor, labelColorActive = props.labelColorActive, labelColorDisabled = props.labelColorDisabled, labelTextAlign = props.labelTextAlign, labelTextColorHover = props.labelTextColorHover, labelTextGradient = props.labelTextGradient, labelTextSize = props.labelTextSize, labelTextStyle = props.labelTextStyle, labelTextWeight = props.labelTextWeight, labelTextWrap = props.labelTextWrap, link = props.link, linkFill = props.linkFill, rel = props.rel, reset = props.reset, set = props.set, target = props.target, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
-    // @ts-expect-error
-    var appearanceConfig = tabConfig.appearance && tabConfig.appearance[appearance];
+    var className = props.className, appearance = props.appearance, children = props.children, label = props.label, badgeValue = props.badgeValue, dataTour = props.dataTour, href = props.href, link = props.link, rel = props.rel, reset = props.reset, target = props.target, before = props.before, after = props.after, _a = props.isActive, isActive = _a === void 0 ? false : _a, _b = props.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = props.isHover, isHover = _c === void 0 ? false : _c, set = props.set, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
+    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultAppearance, appearance) {
+        var _a;
+        return (__assign(__assign({}, resultAppearance), (_a = tabConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
+    }, {});
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, justifyContentClass = propsGenerator.justifyContentClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, typeClass = propsGenerator.typeClass, widthClass = propsGenerator.widthClass;
+    var justifyContentClass = propsGenerator.justifyContentClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelColor = propsGenerator.labelColor, labelColorActive = propsGenerator.labelColorActive, labelTextAlign = propsGenerator.labelTextAlign, labelTextColorHover = propsGenerator.labelTextColorHover, labelTextGradient = propsGenerator.labelTextGradient, labelTextSize = propsGenerator.labelTextSize, labelTextStyle = propsGenerator.labelTextStyle, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, dividerFillDisabled = propsGenerator.dividerFillDisabled, fillDisabledClass = propsGenerator.fillDisabledClass, labelColorDisabled = propsGenerator.labelColorDisabled, badgeAppearance = propsGenerator.badgeAppearance, badgeShape = propsGenerator.badgeShape, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, dividerDirection = propsGenerator.dividerDirection, dividerFill = propsGenerator.dividerFill, dividerFillActive = propsGenerator.dividerFillActive, dividerFillActiveHover = propsGenerator.dividerFillActiveHover, dividerFillHover = propsGenerator.dividerFillHover, dividerSize = propsGenerator.dividerSize, linkFill = propsGenerator.linkFill, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, typeClass = propsGenerator.typeClass, widthClass = propsGenerator.widthClass;
     // @ts-expect-error
     var tab = useStyles(props).styles;
     return (jsx("div", { className: clsx('tab', isActive && 'tab_state_active', isDisabled && 'tab_state_disabled', isHover && 'tab_state_hover', !isDisabled
             ? fillClass && "fill_".concat(fillClass)
-            : fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isDisabled ? fillHoverClass && "fill_hover_".concat(fillHoverClass) : null, className, sizeClass && "tab_size_".concat(sizeClass), fillActiveClass && "fill_active_".concat(fillActiveClass), fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), shapeClass && "tab_shape_".concat(shapeClass), typeClass && "tab_type_".concat(typeClass), widthClass && "width_".concat(widthClass), reset && 'tab-reset', set && "tab_set_".concat(set), justifyContentClass && "tab_justify-content_".concat(justifyContentClass), onClick && 'cursor_type_pointer'), "data-tour": dataTour, style: tab, onClick: onClick, onMouseEnter: onMouseEnter, children: jsx(Link, { className: clsx('tab__link', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass)), fill: linkFill, href: link || href, rel: rel, target: target, children: jsxs(React.Fragment, { children: [before, children || (jsxs(React.Fragment, { children: [jsxs("div", { className: "tab__wrapper", children: [(label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label)) && (jsx(Text, { className: "tab__label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textAlign: labelTextAlign, textColorGradient: labelTextGradient, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, textColor: isDisabled
-                                            ? labelColorDisabled || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelColorDisabled)
-                                            : labelColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelColor), textColorActive: isActive && (labelColorActive || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelColorActive)), children: label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label) })), (badgeValue || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeValue)) && (jsx(Badge, { appearance: badgeAppearance || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeAppearance), shape: badgeShape, size: badgeSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeSize), textColor: badgeTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeTextColor), textSize: badgeTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeTextSize), value: badgeValue || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.badgeValue) }))] }), jsx(Divider, { width: "fill", fill: isDisabled
-                                    ? dividerFillDisabled || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.dividerFillDisabled)
-                                    : dividerFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.dividerFill), fillHover: isHover && (dividerFillHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.dividerFillHover)), direction: dividerDirection, fillActive: isActive && (dividerFillActive || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.dividerFillActive)), fillActiveHover: dividerFillActiveHover, size: dividerSize })] })), after] }) }) }));
+            : fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isDisabled ? fillHoverClass && "fill_hover_".concat(fillHoverClass) : null, className, sizeClass && "tab_size_".concat(sizeClass), fillActiveClass && "fill_active_".concat(fillActiveClass), fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), shapeClass && "tab_shape_".concat(shapeClass), typeClass && "tab_type_".concat(typeClass), widthClass && "width_".concat(widthClass), reset && 'tab-reset', set && "tab_set_".concat(set), justifyContentClass && "tab_justify-content_".concat(justifyContentClass), onClick && 'cursor_type_pointer'), "data-tour": dataTour, style: tab, onClick: onClick, onMouseEnter: onMouseEnter, children: jsx(Link, { className: clsx('tab__link', alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass)), fill: linkFill, href: link || href, rel: rel, target: target, children: jsxs(React.Fragment, { children: [before, children || (jsxs(React.Fragment, { children: [jsxs("div", { className: "tab__wrapper", children: [label && (jsx(Text, { className: "tab__label", textAlign: labelTextAlign, textColor: isDisabled ? labelColorDisabled : labelColor, textColorActive: isActive && labelColorActive, textColorGradient: labelTextGradient, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, size: labelTextSize, children: label })), badgeValue && (jsx(Badge, { appearance: badgeAppearance, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, size: badgeSize, value: badgeValue }))] }), jsx(Divider, { width: "fill", direction: dividerDirection, fill: isDisabled ? dividerFillDisabled : dividerFill, fillActive: isActive && dividerFillActive, fillActiveHover: dividerFillActiveHover, fillHover: isHover && dividerFillHover, size: dividerSize })] })), after] }) }) }));
 }
 
 function TabGroup(props) {

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

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

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

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

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

@@ -95,3 +95,7 @@
     }
   }
 }
+:root {
+  --checkbox-column-gap: 12px;
+  --checkbox-row-gap: 4px;
+}

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

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

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

@@ -116,9 +116,20 @@
 }
 
 :root {
-  --choice-item-background-hover: var(--color-surface-secondary);
+  --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/Choice/Choice.tokens.css

@@ -10,8 +10,9 @@
   --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-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: 3px 2px;
+  --choice-item-icon-padding: 0;
 }

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

@@ -1226,3 +1226,54 @@ h2.react-datepicker__current-month {
     }
   }
 }
+: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/DatePicker/DatePicker.tokens.css

@@ -1,22 +1,26 @@
 :root {
   --input-container-padding: 9px 15px;
 
-  --date-picker-name-size: 18px;
+  --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);
+  --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-width: 40px;
-  --date-picker-day-height: 40px;
   --date-picker-day-padding: 8px 0;
-  --date-picker-day-border-radius: 6px;
   --date-picker-day-hover-background: var(--color-accent-tertiary);
   --date-picker-day-hover-text-color: var(--color-surface-text-secondary);
 
@@ -32,10 +36,14 @@
 
   --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-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-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);

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

@@ -7,8 +7,8 @@
   &_size {
     @each $size in xs, s, m, l, xl {
       &_$(size) {
-        height: var(--divider-size-$(size)-height);
-        min-height: var(--divider-size-$(size)-height);
+        height: var(--divider-$(size)-height);
+        min-height: var(--divider-$(size)-height);
       }
     }
   }
@@ -17,8 +17,8 @@
       &^^&_size {
         @each $size in xs, s, m, l, xl {
           &_$(size) {
-            height: var(--divider-size-$(size)-height);
-            min-height: var(--divider-size-$(size)-height);
+            height: var(--divider-$(size)-height);
+            min-height: var(--divider-$(size)-height);
           }
         }
       }
@@ -27,9 +27,9 @@
       &^^&_size {
         @each $size in xs, s, m, l, xl {
           &_$(size) {
-            width: var(--divider-size-$(size)-width);
+            width: var(--divider-$(size)-width);
             height: auto;
-            min-width: var(--divider-size-$(size)-height);
+            min-width: var(--divider-$(size)-height);
           }
         }
       }
@@ -50,3 +50,16 @@
     }
   }
 }
+: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/Divider/Divider.tokens.css

@@ -1,12 +1,13 @@
 :root {
-  --divider-size-xs-height: 1px;
-  --divider-size-s-height: 2px;
-  --divider-size-m-height: 3px;
-  --divider-size-l-height: 4px;
-  --divider-size-xl-height: 5px;
-  --divider-size-xs-width: 1px;
-  --divider-size-s-width: 2px;
-  --divider-size-m-width: 3px;
-  --divider-size-l-width: 4px;
-  --divider-size-xl-width: 5px;
-}
+  --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.css

@@ -25,3 +25,13 @@
     }
   }
 }
+: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.css

@@ -50,3 +50,7 @@
     }
   }
 }
+:root {
+  --drawer-overlay-background: none;
+  --drawer-overlay-filter: blur(0);
+}

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

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

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

@@ -127,3 +127,40 @@
     }
   }
 }
+: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/Dropdown/Dropdown.tokens.css

@@ -2,8 +2,14 @@
   --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 {

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

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

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

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

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

@@ -83,3 +83,32 @@
     }
   }
 }
+: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.css

@@ -66,3 +66,26 @@
     }
   }
 }
+: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.css

@@ -81,3 +81,22 @@ div.label {
     }
   }
 }
+: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;
+}