@itcase/ui 1.8.1 → 1.8.3

package/dist/components/Tab.js

@@ -1,13 +1,13 @@
-import { _ as __assign } from '../tslib.es6-Bwu1Cn-t.js';
+import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Badge } from '../Badge-BY030Mwm.js';
-import { D as Divider } from '../Divider-CUFKsm-9.js';
-import { L as Link } from '../Link-Cn7hiWmM.js';
-import { T as Text } from '../Text-aaWArShm.js';
+import { B as Badge } from '../Badge_es_Bx0NsdST.js';
+import { D as Divider } from '../Divider_es_CWsDM2Rm.js';
+import { L as Link } from '../Link_es_DkW06IM-.js';
+import { T as Text } from '../Text_es_FJGduy7Z.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
@@ -20,110 +20,90 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Icon-BF7i3XdQ.js';
+import '../Icon_es_BBmoZ7_3.js';
 import 'react-inlinesvg';
-import '../Tooltip-DP32J5V6.js';
-import '../Title--_epIXkC.js';
+import '../Tooltip_es_H976MIb7.js';
+import '../Title_es_ke3YylFm.js';
 
-var tabAppearance = {
-    accent: {
-        fill: 'accentPrimary',
-        fillHover: 'accentPrimaryHover',
-        labelColor: 'accentTextPrimary',
-        labelColorActive: 'accentTextPrimary',
-        dividerFillDisabled: 'accentDisabled',
-        fillDisabled: 'surfaceDisabled',
-        labelColorDisabled: 'surfaceTextDisabled',
-        dividerFill: 'surfaceTertiary',
-        dividerFillActive: 'surfacePrimary',
-        dividerFillHover: 'surfaceTertiary',
+var tabAppearanceSize = {
+    sizeL: {
+        size: 'l',
+        labelTextSize: 's',
+        dividerSize: 's',
+        badgeSize: 'xs',
+        badgeTextSize: 'xxs',
     },
-    primary: {
-        fill: 'primaryPrimary',
-        fillHover: 'primaryPrimaryHover',
-        labelColor: 'primaryTextPrimary',
-        labelColorActive: 'primaryTextPrimary',
-        dividerFillDisabled: 'accentDisabled',
-        fillDisabled: 'surfaceDisabled',
-        labelColorDisabled: 'surfaceTextDisabled',
-        dividerFill: 'surfaceTertiary',
-        dividerFillActive: 'accentPrimary',
-        dividerFillHover: 'surfaceTertiary',
+};
+
+var tabAppearanceStyle = {
+    full: {
+    /* border / fill */
     },
-    secondary: {
-        fill: 'secondaryPrimary',
-        fillHover: 'secondaryPrimaryHover',
-        labelColor: 'secondaryTextPrimary',
-        labelColorActive: 'secondaryTextPrimary',
-        dividerFillDisabled: 'accentDisabled',
-        fillDisabled: 'surfaceDisabled',
-        labelColorDisabled: 'surfaceTextDisabled',
-        dividerFill: 'surfaceTertiary',
-        dividerFillActive: 'accentPrimary',
-        dividerFillHover: 'surfaceTertiary',
+    ghost: {
+        fill: 'none',
+        borderWidth: '0',
+    },
+    outlined: {
+        fill: 'none',
     },
+    solid: {
+        borderWidth: '0',
+    },
+};
+
+var tabAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
-        fillHover: 'surfacePrimaryHover',
+        fillDisabled: 'surfaceDisabled',
         labelColor: 'surfaceTextPrimary',
         labelColorActive: 'surfaceTextAccent',
+        labelColorDisabled: 'surfaceTextDisabled',
         dividerFillDisabled: 'accentDisabled',
+        dividerFill: 'surfaceTertiary',
+        dividerFillActive: 'accentPrimary',
+        dividerFillHover: 'accentPrimary',
+        badgeAppearance: 'accentPrimary',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
         fillDisabled: 'surfaceDisabled',
+        fillHover: 'surfaceTertiaryHover',
+        labelColor: 'surfaceTextInverse',
+        labelColorActive: 'surfaceTextInverse',
         labelColorDisabled: 'surfaceTextDisabled',
+        dividerFillDisabled: 'accentDisabled',
         dividerFill: 'surfaceTertiary',
         dividerFillActive: 'accentPrimary',
         dividerFillHover: 'surfaceTertiary',
     },
     surfaceSecondary: {
         fill: 'surfaceSecondary',
+        fillDisabled: 'surfaceDisabled',
         fillHover: 'surfaceSecondaryHover',
         labelColor: 'surfaceTextPrimary',
         labelColorActive: 'surfaceTextAccent',
-        dividerFillDisabled: 'accentDisabled',
-        fillDisabled: 'surfaceDisabled',
         labelColorDisabled: 'surfaceTextDisabled',
+        dividerFillDisabled: 'accentDisabled',
         dividerFill: 'surfaceTertiary',
         dividerFillActive: 'accentPrimary',
         dividerFillHover: 'surfaceTertiary',
     },
     surfaceTertiary: {
         fill: 'surfaceTertiary',
-        fillHover: 'surfaceTertiaryHover',
-        labelColor: 'surfaceTextPrimary',
-        labelColorActive: 'surfaceTextAccent',
-        dividerFillDisabled: 'accentDisabled',
         fillDisabled: 'surfaceDisabled',
-        labelColorDisabled: 'surfaceTextDisabled',
-        dividerFill: 'surfaceTertiary',
-        dividerFillActive: 'accentPrimary',
-        dividerFillHover: 'surfaceTertiary',
-    },
-    surfaceQuaternary: {
-        fill: 'surfaceQuaternary',
         fillHover: 'surfaceTertiaryHover',
-        labelColor: 'surfaceTextInverse',
-        labelColorActive: 'surfaceTextInverse',
-        dividerFillDisabled: 'accentDisabled',
-        fillDisabled: 'surfaceDisabled',
-        labelColorDisabled: 'surfaceTextDisabled',
-        dividerFill: 'surfaceTertiary',
-        dividerFillActive: 'accentPrimary',
-        dividerFillHover: 'surfaceTertiary',
-    },
-    any: {
-        fill: 'surfacePrimary',
-        fillHover: 'surfaceTertiary',
         labelColor: 'surfaceTextPrimary',
         labelColorActive: 'surfaceTextAccent',
-        dividerFillDisabled: 'accentDisabled',
-        fillDisabled: 'surfaceDisabled',
         labelColorDisabled: 'surfaceTextDisabled',
+        dividerFillDisabled: 'accentDisabled',
         dividerFill: 'surfaceTertiary',
         dividerFillActive: 'accentPrimary',
         dividerFillHover: 'surfaceTertiary',
     },
 };
 
+var tabAppearance = __assign(__assign(__assign({}, tabAppearanceSurface), tabAppearanceSize), tabAppearanceStyle);
+
 var tabConfig = {
     appearance: tabAppearance,
     setAppearance: function (appearanceConfig) {

package/dist/components/Text.js

@@ -1,5 +1,5 @@
-export { T as Text, a as textAppearance, t as textConfig } from '../Text-aaWArShm.js';
-import '../tslib.es6-Bwu1Cn-t.js';
+export { T as Text, a as textAppearance, t as textConfig } from '../Text_es_FJGduy7Z.js';
+import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';

package/dist/components/Textarea.js

@@ -1,4 +1,4 @@
-import { _ as __assign } from '../tslib.es6-Bwu1Cn-t.js';
+import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
@@ -14,87 +14,169 @@ import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
 
-var textareaAppearance = {
-    dev: {
-        size: 'm',
+var textareaAppearanceDefault = {
+    defaultPrimary: {
+        fill: 'surfaceSecondary',
         borderColor: 'surfaceBorderTertiary',
         borderHover: 'surfaceBorderQuaternary',
-        textColor: 'surfaceTextPrimary',
-        textSize: 'm',
+        iconBeforeFill: 'surfaceItemQuaternary',
+        iconClearFill: 'surfaceItemPrimary',
+    },
+    defaultSecondary: {
+        fill: 'surfacePrimary',
+        borderColor: 'surfaceBorderTertiary',
+        borderHover: 'surfaceBorderQuaternary',
+        iconBeforeFill: 'surfaceItemQuaternary',
+        iconClearFill: 'surfaceItemPrimary',
         placeholderTextColor: 'surfaceTextSecondary',
-        shape: 'rounded',
     },
 };
-var textareaState = {
-    filled: {
-        borderColor: 'surfaceBorderQuaternary',
-        textColor: 'surfaceTextPrimary',
+
+var textareaAppearanceDisabled = {
+    disabledPrimary: {
+        fill: 'surfaceFillDisabled',
+        borderColor: 'errorBorderQuaternary',
+        borderHover: 'errorBorderQuaternary',
+        textColor: 'surfaceTextQuaternary',
+        iconBeforeFill: 'errorItemQuaternary',
+        iconClearFill: 'errorItemPrimary',
+        placeholderTextColor: 'surfaceTextQuaternary',
+    },
+    disabledSecondary: {
+        fill: 'surfaceSecondary',
+        borderColor: 'surfaceBorderTertiary',
+        borderHover: 'surfaceBorderQuaternary',
+        iconBeforeFill: 'surfaceItemQuaternary',
+        iconClearFill: 'surfaceItemPrimary',
+        placeholderTextColor: 'surfaceTextSecondary',
     },
-    disabled: {
-        borderColor: 'surfaceBorderDisabled',
+};
+
+var textareaAppearanceError = {
+    errorPrimary: {
+        fill: 'errorTertiary',
+        borderColor: 'errorBorderQuaternary',
+        borderHover: 'errorBorderQuaternary',
         textColor: 'surfaceTextPrimary',
-        placeholderTextColor: 'surfaceTextDisabled',
+        iconBeforeFill: 'errorItemQuaternary',
+        iconClearFill: 'errorItemPrimary',
+        placeholderTextColor: 'surfaceTextQuaternary',
     },
-    error: {
-        borderColor: 'errorBorderPrimary',
-        placeholderTextColor: 'secondaryTextSecondary',
+    errorSecondary: {
+        fill: 'errorSecondary',
+        borderColor: 'errorBorderTertiary',
+        borderHover: 'errorBorderQuaternary',
+        iconBeforeFill: 'errorItemQuaternary',
+        iconClearFill: 'errorItemPrimary',
+        placeholderTextColor: 'errorTextSecondary',
     },
-    errorFilled: {
-        borderColor: 'errorBorderPrimary',
+};
+
+var textareaAppearanceRequire = {
+    requirePrimary: {
+        fill: 'warningTertiary',
+        borderColor: 'warningBorderQuaternary',
+        borderHover: 'warningBorderQuaternary',
         textColor: 'surfaceTextPrimary',
+        iconBeforeFill: 'warningItemQuaternary',
+        iconClearFill: 'warningItemPrimary',
+        placeholderTextColor: 'surfaceTextQuaternary',
     },
-    success: {
-        borderColor: 'successBorderPrimary',
-        textColor: 'surfaceTextPrimary',
+    requireSecondary: {
+        fill: 'surfaceSecondary',
+        borderColor: 'surfaceBorderTertiary',
+        borderHover: 'surfaceBorderQuaternary',
+        iconBeforeFill: 'surfaceItemQuaternary',
+        iconClearFill: 'surfaceItemPrimary',
+        placeholderTextColor: 'surfaceTextSecondary',
     },
-    active: {
-        borderColor: 'surfaceBorderActive',
-        placeholderTextColor: 'secondaryTextSecondary',
+};
+
+var textareaAppearanceSize = {
+    sizeXXL: {
+        size: 'xxl',
+        textSize: 'l',
     },
-    activeFilled: {
-        borderColor: 'surfaceBorderActive',
-        textColor: 'surfaceTextPrimary',
+    sizeXL: {
+        size: 'xl',
+        textSize: 's',
     },
-    normal: {
-        borderColor: 'surfaceBorderQuaternary',
-        placeholderTextColor: 'secondaryTextSecondary',
+    sizeL: {
+        size: 'l',
+        textSize: 's',
     },
-    readonly: {
-        borderColor: 'surfaceBorderDisabled',
-        textColor: 'surfaceTextPrimary',
+    sizeM: {
+        size: 'm',
+        textSize: 'm',
+    },
+    sizeS: {
+        size: 's',
+        textSize: 's',
+    },
+    sizeXS: {
+        size: 'xs',
+        textSize: 's',
+    },
+    sizeXXS: {
+        size: 'xxs',
+        textSize: 's',
+    },
+};
+
+var textareaAppearanceStyle = {
+    full: {
+    /* border / fill */
+    },
+    ghost: {
+        fill: 'none',
+        borderWidth: '0',
     },
-    require: {
-        borderColor: 'surfaceBorderActive',
+    outlined: {
+        fill: 'none',
+    },
+    solid: {
+        borderWidth: '0',
+    },
+};
+
+var textareaAppearanceSuccess = {
+    successPrimary: {
+        fill: 'successTertiary',
+        borderColor: 'successBorderQuaternary',
+        borderHover: 'successBorderQuaternary',
         textColor: 'surfaceTextPrimary',
+        iconBeforeFill: 'successItemQuaternary',
+        iconClearFill: 'successItemPrimary',
+        placeholderTextColor: 'surfaceTextQuaternary',
+    },
+    successSecondary: {
+        fill: 'surfaceSecondary',
+        borderColor: 'surfaceBorderTertiary',
+        borderHover: 'surfaceBorderQuaternary',
+        iconBeforeFill: 'surfaceItemQuaternary',
+        iconClearFill: 'surfaceItemPrimary',
+        placeholderTextColor: 'surfaceTextSecondary',
     },
 };
 
+var textareaAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign({}, textareaAppearanceDefault), textareaAppearanceError), textareaAppearanceSuccess), textareaAppearanceRequire), textareaAppearanceDisabled), textareaAppearanceSize), textareaAppearanceStyle);
+
 var textareaConfig = {
     appearance: textareaAppearance,
-    state: textareaState,
     setAppearance: function (appearanceConfig) {
         textareaConfig.appearance = appearanceConfig;
     },
-    setState: function (newComponent) {
-        textareaConfig.state = newComponent;
-    },
 };
 function Textarea(props) {
-    var id = props.id, className = props.className, appearance = props.appearance, disabled = props.disabled, placeholder = props.placeholder, 
-    // state,
-    value = props.value, onBlur = props.onBlur, onChange = props.onChange, onKeyDown = props.onKeyDown;
-    // const stateConfig = useMemo(
-    //   () => state && textareaConfig.state && textareaConfig.state[state],
-    //   [state, textareaConfig],
-    // )
+    var id = props.id, className = props.className, appearance = props.appearance, isDisabled = props.isDisabled, placeholder = props.placeholder, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onKeyDown = props.onKeyDown;
     var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
         var _a;
         return (__assign(__assign({}, resultConfig), (_a = textareaConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
     }, {});
     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 }));
+    var fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, borderHoverClass = propsGenerator.borderHoverClass, borderWidthClass = propsGenerator.borderWidthClass, textColorClass = propsGenerator.textColorClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, caretClass = propsGenerator.caretClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
+    return (jsx("div", { className: clsx('textarea', className, sizeClass && "textarea_size_".concat(sizeClass), shapeClass && "textarea_shape_".concat(shapeClass)), children: jsx("textarea", { id: id, className: clsx('textarea__input', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), fillClass && "fill_".concat(fillClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderHoverClass && "border-color_hover_".concat(borderHoverClass), placeholderTextColorClass &&
+                "placeholder-text-color_".concat(placeholderTextColorClass), textSizeClass && "text_size_".concat(textSizeClass), textColorClass && "text-color_".concat(textColorClass), textWeightClass && "text-weight_".concat(textWeightClass), widthClass && "width_".concat(widthClass)), disabled: isDisabled && 'disabled', placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onKeyDown: onKeyDown }) }));
 }
 
-export { Textarea, textareaAppearance, textareaConfig, textareaState };
+export { Textarea, textareaAppearance, textareaConfig };

package/dist/components/Tile.js

@@ -1,11 +1,11 @@
-import { _ as __assign } from '../tslib.es6-Bwu1Cn-t.js';
+import { _ as __assign } from '../tslib.es6_es_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-BY030Mwm.js';
-import { T as Text } from '../Text-aaWArShm.js';
-import { T as Title } from '../Title--_epIXkC.js';
+import { B as Badge } from '../Badge_es_Bx0NsdST.js';
+import { T as Text } from '../Text_es_FJGduy7Z.js';
+import { T as Title } from '../Title_es_ke3YylFm.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -19,10 +19,10 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Icon-BF7i3XdQ.js';
+import '../Icon_es_BBmoZ7_3.js';
 import 'react-inlinesvg';
-import '../Link-Cn7hiWmM.js';
-import '../Tooltip-DP32J5V6.js';
+import '../Link_es_DkW06IM-.js';
+import '../Tooltip_es_H976MIb7.js';
 
 var tileAppearance = {
     dev: {},

package/dist/components/Title.js

@@ -1,5 +1,5 @@
-export { T as Title, a as titleAppearance, t as titleConfig } from '../Title--_epIXkC.js';
-import '../tslib.es6-Bwu1Cn-t.js';
+export { T as Title, a as titleAppearance, t as titleConfig } from '../Title_es_ke3YylFm.js';
+import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

package/dist/components/Tooltip.js

@@ -1,5 +1,5 @@
-export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Tooltip-DP32J5V6.js';
-import '../tslib.es6-Bwu1Cn-t.js';
+export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Tooltip_es_H976MIb7.js';
+import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -17,5 +17,5 @@ import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Text-aaWArShm.js';
-import '../Title--_epIXkC.js';
+import '../Text_es_FJGduy7Z.js';
+import '../Title_es_ke3YylFm.js';

package/dist/components/Video.js

@@ -6,7 +6,7 @@ import 'lodash/camelCase';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../context/Notifications.js';
-import '../tslib.es6-Bwu1Cn-t.js';
+import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'uuid';
 import '@itcase/common';
 import '../context/UIContext.js';

package/dist/context/Notifications.js

@@ -1,5 +1,5 @@
 'use client';
-import { a as __spreadArray } from '../tslib.es6-Bwu1Cn-t.js';
+import { a as __spreadArray } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { jsx } from 'react/jsx-runtime';
 import { createContext, useState, useCallback, useMemo, useEffect, useContext } from 'react';
 import { v4 } from 'uuid';
@@ -14,7 +14,7 @@ var STATUSES = {
 var NotificationsContext = createContext([]);
 /* eslint-disable @typescript-eslint/no-unused-vars */
 var NotificationsAPIContext = createContext({
-    hideNotifications: function () { },
+    hideNotifications: function (targetId) { },
     showNotification: function (notification, onClose) { },
     notificationStatuses: STATUSES,
 });

package/dist/context/UIContext.js

@@ -1,5 +1,5 @@
 'use client';
-import { b as __rest, _ as __assign } from '../tslib.es6-Bwu1Cn-t.js';
+import { b as __rest, _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { jsx } from 'react/jsx-runtime';
 import { createContext, memo, useMemo, useEffect, useContext } from 'react';
 import camelCase from 'lodash/camelCase';
@@ -8,9 +8,9 @@ import { setViewportProperty } from '../utils/setViewportProperty.js';
 import 'react-responsive';
 
 var UserDeviceContext = createContext({
-    isDesktop: false,
     isMobile: false,
     isTablet: false,
+    isDesktop: false,
 });
 var UIProvider = memo(function UIProvider(props) {
     var _a = props.userDeviceState, userDeviceState = _a === void 0 ? {} : _a, children = props.children;
@@ -22,9 +22,9 @@ var UIProvider = memo(function UIProvider(props) {
      * We will need to look at how to change this behavior.
      */
     var allDevicesTypes = useMediaQueries(userDeviceState);
-    var isDesktop = allDevicesTypes.isDesktop, isMobile = allDevicesTypes.isMobile, isTablet = allDevicesTypes.isTablet, fullNamedDeviceTypes = __rest(allDevicesTypes
+    var isMobile = allDevicesTypes.isMobile, isTablet = allDevicesTypes.isTablet, isDesktop = allDevicesTypes.isDesktop, fullNamedDeviceTypes = __rest(allDevicesTypes
     // prettier-ignore
-    , ["isDesktop", "isMobile", "isTablet"]);
+    , ["isMobile", "isTablet", "isDesktop"]);
     // prettier-ignore
     var deviceCurrentMainType = ((isMobile && 'mobile') ||
         (isTablet && 'tablet') ||

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

@@ -91,4 +91,6 @@
   --accordion-item-shape-rounded: 12px;
   --accordion-item-xs-padding: 10px 8px;
   --accordion-item-l-padding: 14px 12px;
+  --accordion-border-radius: 0;
+  --accordion-shape-rounded: 0;
 }

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

@@ -23,20 +23,18 @@
   }
 }
 .avatar {
-  &&_mode {
-    &_skeleton {
-      ^^&__wrapper {
-        background-image: linear-gradient(
-          90deg,
-          var(--color-surface-secondary),
-          var(--color-surface-tertiary),
-          var(--color-surface-secondary)
-        );
-        background-size: 200%;
-        animation: avatarSkeleton 3s infinite linear;
-        ^^^&__name {
-          color: transparent;
-        }
+  &&_skeleton {
+    ^&__wrapper {
+      background-image: linear-gradient(
+        90deg,
+        var(--color-surface-secondary),
+        var(--color-surface-tertiary),
+        var(--color-surface-secondary)
+      );
+      background-size: 200%;
+      animation: avatarSkeleton 3s infinite linear;
+      & * {
+        opacity: 0%;
       }
     }
   }
@@ -109,4 +107,7 @@
 :root {
   --avatar-icon-right: -4px;
   --avatar-icon-bottom: -3px;
+  --avatar-shape-rounded: 0;
+  --avatar-dot-position-right: 0;
+  --avatar-dot-position-bottom: 0;
 }

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

@@ -135,4 +135,5 @@
   --badge-size-xxs-gap: 0px;
   --badge-type-icon-size-xxs-max-width: 12px;
   --badge-type-icon-size-xxs-max-height: 12px;
+  --badge-shape-rounded: 0;
 }

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

@@ -116,36 +116,42 @@
 :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-padding: 0.75m 1.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;