@itcase/ui 1.8.42 → 1.8.44

package/dist/components/Checkmark.js

@@ -1,8 +1,9 @@
-import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
+import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
+import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -98,10 +99,7 @@ var checkmarkConfig = {
 };
 function Checkmark(props) {
     var className = props.className, appearance = props.appearance, _a = props.isDisabled, isDisabled = _a === void 0 ? false : _a, isChecked = props.isChecked, onClick = props.onClick;
-    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
-        var _a;
-        return (__assign(__assign({}, resultConfig), (_a = checkmarkConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
-    }, {});
+    var appearanceConfig = useAppearanceConfig(appearance, checkmarkConfig);
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     var fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorActiveClass = propsGenerator.borderColorActiveClass, borderColorActiveHoverClass = propsGenerator.borderColorActiveHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderWidthClass = propsGenerator.borderWidthClass, checkmarkFillClass = propsGenerator.checkmarkFillClass, sizeClass = propsGenerator.sizeClass;
     // @ts-expect-error

package/dist/components/Chips.js

@@ -1,4 +1,4 @@
-export { C as Chips, b as ChipsGroup, a as chipsAppearance, c as chipsConfig } from '../ChipsGroup_es_CWq3TR_1.js';
+export { C as Chips, b as ChipsGroup, a as chipsAppearance, c as chipsConfig } from '../ChipsGroup_es_C1Qi_5A1.js';
 import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
@@ -18,9 +18,9 @@ import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Tooltip_es_Y2aoFQW7.js';
-import '../Text_es_BfLRfj-5.js';
+import '../Icon_es_k9bHSLyL.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_DxtZLeKY.js';
+import '../Link_es_BnUIX0QT.js';
+import '../Text_es_Ffjr5J1k.js';

package/dist/components/Choice.js

@@ -1,12 +1,13 @@
-import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useRef, useMemo, createRef, useCallback } from 'react';
 import clsx from 'clsx';
+import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { I as Icon } from '../Tooltip_es_Y2aoFQW7.js';
-import { L as Loader } from '../Loader_es_GYOr0UTX.js';
-import { T as Text } from '../Text_es_BfLRfj-5.js';
+import { I as Icon } from '../Icon_es_k9bHSLyL.js';
+import { L as Loader } from '../Loader_es_BDb87cdb.js';
+import { T as Text } from '../Text_es_Ffjr5J1k.js';
+import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
@@ -22,7 +23,7 @@ import '../hooks/useStyles/styleAttributes.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_DxtZLeKY.js';
+import '../Link_es_BnUIX0QT.js';
 
 var choiceAppearanceDefault = {
     defaultPrimary: {
@@ -167,10 +168,7 @@ function Choice(props) {
         var isChecked = isCheckbox ? event.target.checked : true;
         setActiveSegment && setActiveSegment(item, isChecked);
     }, [isCheckbox, setActiveSegment]);
-    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
-        var _a;
-        return (__assign(__assign({}, resultConfig), (_a = choiceConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
-    }, {});
+    var appearanceConfig = useAppearanceConfig(appearance, choiceConfig);
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     var size = propsGenerator.size, fillClass = propsGenerator.fillClass, fillItemActiveClass = propsGenerator.fillItemActiveClass, fillItemActiveDisabledClass = propsGenerator.fillItemActiveDisabledClass, fillItemActiveHoverClass = propsGenerator.fillItemActiveHoverClass, fillItemClass = propsGenerator.fillItemClass, fillItemDisabledClass = propsGenerator.fillItemDisabledClass, fillItemHoverClass = propsGenerator.fillItemHoverClass, labelTextActiveColor = propsGenerator.labelTextActiveColor, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, iconAfterFillDisabled = propsGenerator.iconAfterFillDisabled, iconBeforeFillDisabled = propsGenerator.iconBeforeFillDisabled, iconFillDisabled = propsGenerator.iconFillDisabled, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillActive = propsGenerator.iconAfterFillActive, iconAfterSize = propsGenerator.iconAfterSize, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillActive = propsGenerator.iconBeforeFillActive, iconBeforeSize = propsGenerator.iconBeforeSize, iconFill = propsGenerator.iconFill, iconFillActive = propsGenerator.iconFillActive, iconSize = propsGenerator.iconSize, shapeClass = propsGenerator.shapeClass, shapeItemClass = propsGenerator.shapeItemClass, wrapClass = propsGenerator.wrapClass;
     var styles = useStyles(props).styles;

package/dist/components/Code.js

@@ -3,6 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import clsx from 'clsx';
 import OtpInput from 'react-otp-input';
+import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -114,10 +115,7 @@ var codeConfig = {
 function Code(props) {
     var className = props.className, appearance = props.appearance, inputAutoFocus = props.inputAutoFocus, _a = props.inputCount, inputCount = _a === void 0 ? 6 : _a, inputPlaceholder = props.inputPlaceholder, _b = props.inputType, inputType = _b === void 0 ? 'number' : _b, separatorComponent = props.separatorComponent, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus;
     var _c = useState(''), otp = _c[0], setOtp = _c[1];
-    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
-        var _a;
-        return (__assign(__assign({}, resultConfig), (_a = codeConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
-    }, {});
+    var appearanceConfig = useAppearanceConfig(appearance, codeConfig);
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     var inputBorderColorClass = propsGenerator.inputBorderColorClass, inputBorderColorHoverClass = propsGenerator.inputBorderColorHoverClass, inputBorderFocusColorClass = propsGenerator.inputBorderFocusColorClass, inputBorderWidthClass = propsGenerator.inputBorderWidthClass, inputCaretColorClass = propsGenerator.inputCaretColorClass, inputFillClass = propsGenerator.inputFillClass, inputFillHoverClass = propsGenerator.inputFillHoverClass, inputPlaceholderTextColorClass = propsGenerator.inputPlaceholderTextColorClass, inputShapeClass = propsGenerator.inputShapeClass, inputSizeClass = propsGenerator.inputSizeClass, inputTextColorClass = propsGenerator.inputTextColorClass, inputTextSizeClass = propsGenerator.inputTextSizeClass, inputTextWeightClass = propsGenerator.inputTextWeightClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
     // NOTE: too many dependencies for "useCallback" and possible too many checks
@@ -125,7 +123,7 @@ function Code(props) {
         return (jsx("input", __assign({}, otpInputProps, { className: clsx('code__input', inputCaretColorClass && "caret-color_".concat(inputCaretColorClass), inputFillClass && "fill_".concat(inputFillClass), inputFillHoverClass && "fill_hover_".concat(inputFillHoverClass), inputPlaceholderTextColorClass &&
                 "placeholder-text-color_".concat(inputPlaceholderTextColorClass), inputShapeClass && "code__input_shape_".concat(inputShapeClass), inputTextSizeClass && "text_size_".concat(inputTextSizeClass), inputTextColorClass && "text-color_".concat(inputTextColorClass), inputTextWeightClass && "text-weight_".concat(inputTextWeightClass), inputBorderWidthClass && "border-width_".concat(inputBorderWidthClass), inputBorderColorClass && "border-color_".concat(inputBorderColorClass), inputBorderColorHoverClass &&
                 "border-color_hover_".concat(inputBorderColorHoverClass), inputBorderFocusColorClass &&
-                "border-color_focus_".concat(inputBorderFocusColorClass), inputSizeClass && "code__input_size_".concat(inputSizeClass), widthClass && "width_".concat(widthClass), isSkeleton && "code__input_skeleton"), placeholder: inputPlaceholder, name: "code-".concat(index), autoComplete: "one-time-code", onBlur: function (event) {
+                "border-color_focus_".concat(inputBorderFocusColorClass), inputSizeClass && "code__input_size_".concat(inputSizeClass), widthClass && "width_".concat(widthClass), isSkeleton && "code__input_skeleton"), name: "code-".concat(index), autoComplete: "one-time-code", placeholder: inputPlaceholder, onBlur: function (event) {
                 onBlur && onBlur(event);
                 otpInputProps.onBlur(event);
             }, onFocus: function (event) {

package/dist/components/CookiesWarning.js

@@ -1,11 +1,12 @@
-import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRef, useMemo, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
 import Cookies from 'js-cookie';
+import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { B as Button } from '../Button_es_DhCLxWhq.js';
-import { T as Text } from '../Text_es_BfLRfj-5.js';
+import { B as Button } from '../Button_es_XnWb2XF3.js';
+import { T as Text } from '../Text_es_Ffjr5J1k.js';
+import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
@@ -16,15 +17,15 @@ import '../context/UIContext.js';
 import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
-import '../Tooltip_es_Y2aoFQW7.js';
-import '../hooks/useStyles/useStyles.js';
-import 'lodash/maxBy';
-import '../hooks/useStyles/styleAttributes.js';
+import '../Icon_es_k9bHSLyL.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_DxtZLeKY.js';
-import '../Loader_es_GYOr0UTX.js';
+import '../hooks/useStyles/useStyles.js';
+import 'lodash/maxBy';
+import '../hooks/useStyles/styleAttributes.js';
+import '../Link_es_BnUIX0QT.js';
+import '../Loader_es_BDb87cdb.js';
 
 var cookiesWarningAppearanceDefault = {
     defaultPrimary: {
@@ -69,12 +70,9 @@ function CookiesWarning(props) {
             window.removeEventListener('scroll', closeCookiesWarning, true);
         }
     }, [isOpen]);
-    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
-        var _a;
-        return (__assign(__assign({}, resultConfig), (_a = cookiesWarningConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
-    }, {});
+    var appearanceConfig = useAppearanceConfig(appearance, cookiesWarningConfig);
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var fillClass = propsGenerator.fillClass, messageTextSize = propsGenerator.messageTextSize, messageTextColor = propsGenerator.messageTextColor, buttonAppearance = propsGenerator.buttonAppearance, buttonFill = propsGenerator.buttonFill, buttonFillHover = propsGenerator.buttonFillHover, buttonLabel = propsGenerator.buttonLabel, buttonLabelSize = propsGenerator.buttonLabelSize, buttonLabelTextColor = propsGenerator.buttonLabelTextColor, buttonShape = propsGenerator.buttonShape, buttonSize = propsGenerator.buttonSize, elevationClass = propsGenerator.elevationClass, buttonWidth = propsGenerator.buttonWidth;
+    var fillClass = propsGenerator.fillClass, messageTextColor = propsGenerator.messageTextColor, messageTextSize = propsGenerator.messageTextSize, buttonAppearance = propsGenerator.buttonAppearance, buttonFill = propsGenerator.buttonFill, buttonFillHover = propsGenerator.buttonFillHover, buttonLabel = propsGenerator.buttonLabel, buttonLabelSize = propsGenerator.buttonLabelSize, buttonLabelTextColor = propsGenerator.buttonLabelTextColor, buttonShape = propsGenerator.buttonShape, buttonSize = propsGenerator.buttonSize, buttonWidth = propsGenerator.buttonWidth, elevationClass = propsGenerator.elevationClass;
     return (isOpen && (jsx("div", { className: clsx('cookies-warning', className, fillClass && "fill_".concat(fillClass), elevationClass && "elevation_".concat(elevationClass)), ref: cookiesWarningRef, children: jsxs("div", { className: "cookies-warning__inner", children: [jsx(Text, { size: messageTextSize, textColor: messageTextColor, children: message }), jsx(Button, { appearance: buttonAppearance, width: buttonWidth, size: buttonSize, fill: buttonFill, fillHover: buttonFillHover, labelTextColor: buttonLabelTextColor, labelTextSize: buttonLabelSize, shape: buttonShape, onClick: closeCookiesWarning, children: buttonLabel })] }) })));
 }
 

package/dist/components/Dadata.js

@@ -3,7 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import clsx from 'clsx';
 import { PartySuggestions } from 'react-dadata';
-import { I as Input } from '../Input_es_D9Y1Rj5Y.js';
+import { I as Input } from '../Input_es_D2mNCqiH.js';
+import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';

package/dist/components/DatePeriod.js

@@ -1,11 +1,12 @@
-import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useCallback } from 'react';
 import clsx from 'clsx';
 import { DATE_PERIOD_INTERVALS } from '@itcase/common';
-import { D as DatePickerInput } from '../DatePicker_es_DYs71cnU.js';
+import { D as DatePickerInput } from '../DatePicker_es_BuC8mEcK.js';
+import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_CWq3TR_1.js';
+import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_C1Qi_5A1.js';
+import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import 'date-fns/locale';
 import 'react-datepicker';
 import '../hooks/useStyles/useStyles.js';
@@ -19,19 +20,18 @@ import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Button_es_DhCLxWhq.js';
-import '../Tooltip_es_Y2aoFQW7.js';
-import '../Text_es_BfLRfj-5.js';
+import '../Button_es_XnWb2XF3.js';
+import '../Icon_es_k9bHSLyL.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_DxtZLeKY.js';
-import '../Loader_es_GYOr0UTX.js';
-import '../Input_es_D9Y1Rj5Y.js';
-import '../Label_es_CIDBUVgO.js';
+import '../Link_es_BnUIX0QT.js';
+import '../Text_es_Ffjr5J1k.js';
+import '../Loader_es_BDb87cdb.js';
+import '../Input_es_D2mNCqiH.js';
+import '../Label_es_HXrap3A4.js';
 import '@itcase/icons/default';
 import 'lodash/castArray';
-import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 
 var datePeriodAppearanceSize = {
     sizeL: {
@@ -79,10 +79,7 @@ var datePeriodConfig = {
 };
 function DatePeriod(props) {
     var className = props.className, appearance = props.appearance, _a = props.datePeriodIntervalsList, datePeriodIntervalsList = _a === void 0 ? Object.values(DATE_PERIOD_INTERVALS) : _a, datePeriodValueEnd = props.datePeriodValueEnd, datePeriodValueStart = props.datePeriodValueStart, monthsShown = props.monthsShown, isSkeleton = props.isSkeleton, onChangeDatePeriod = props.onChangeDatePeriod, 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 = datePeriodConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
-    }, {});
+    var appearanceConfig = useAppearanceConfig(appearance, datePeriodConfig);
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     var _b = propsGenerator, fillClass = _b.fillClass, chipsAppearance = _b.chipsAppearance, chipsAppearanceSize = _b.chipsAppearanceSize, chipsShape = _b.chipsShape, datePickerAppearance = _b.datePickerAppearance, datePickerAppearanceSize = _b.datePickerAppearanceSize, datePickerInputAppearance = _b.datePickerInputAppearance, datePickerInputFillHover = _b.datePickerInputFillHover, datePickerInputSize = _b.datePickerInputSize, datePickerInputTextSize = _b.datePickerInputTextSize, shapeClass = _b.shapeClass, sizeClass = _b.sizeClass;
     var onClickPeriodChips = useCallback(function (selectedPeriodItem) {

package/dist/components/DatePicker.js

@@ -1,10 +1,11 @@
-export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../DatePicker_es_DYs71cnU.js';
+export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../DatePicker_es_BuC8mEcK.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
 import 'date-fns/locale';
 import 'react-datepicker';
+import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -19,14 +20,14 @@ import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Button_es_DhCLxWhq.js';
-import '../Tooltip_es_Y2aoFQW7.js';
-import '../Text_es_BfLRfj-5.js';
+import '../Button_es_XnWb2XF3.js';
+import '../Icon_es_k9bHSLyL.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_DxtZLeKY.js';
-import '../Loader_es_GYOr0UTX.js';
-import '../Input_es_D9Y1Rj5Y.js';
-import '../Label_es_CIDBUVgO.js';
+import '../Link_es_BnUIX0QT.js';
+import '../Text_es_Ffjr5J1k.js';
+import '../Loader_es_BDb87cdb.js';
+import '../Input_es_D2mNCqiH.js';
+import '../Label_es_HXrap3A4.js';
 import '@itcase/icons/default';

package/dist/components/Divider.js

@@ -1,9 +1,10 @@
-export { D as Divider, a as dividerAppearance, d as dividerConfig } from '../Divider_es_kY-30pft.js';
-import '../tslib.es6_es_Bwu1Cn-t.js';
+export { D as Divider, a as dividerAppearance, d as dividerConfig } from '../Divider_es_CiRU0sTz.js';
 import 'react/jsx-runtime';
 import 'clsx';
-import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
+import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react';
+import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';

package/dist/components/Drawer.js

@@ -1,28 +1,29 @@
-import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useEffect } from 'react';
 import clsx from 'clsx';
 import ReactDrawer from 'react-modern-drawer';
-import { I as Icon, b as Title } from '../Tooltip_es_Y2aoFQW7.js';
-import { T as Text } from '../Text_es_BfLRfj-5.js';
+import { I as Icon, b as Title } from '../Icon_es_k9bHSLyL.js';
+import { T as Text } from '../Text_es_Ffjr5J1k.js';
+import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { icons24 } from '@itcase/icons/default';
+import 'react-inlinesvg';
+import '../hoc/urlWithAssetPrefix.js';
+import '@itcase/common';
+import '../context/UrlAssetPrefix.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/camelCase';
 import 'lodash/maxBy';
 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 '../hooks/useStyles/styleAttributes.js';
-import 'react-inlinesvg';
-import '../hoc/urlWithAssetPrefix.js';
-import '../context/UrlAssetPrefix.js';
-import '../Link_es_DxtZLeKY.js';
+import '../Link_es_BnUIX0QT.js';
 import 'lodash/castArray';
 
 var drawerAppearanceSurface = {
@@ -65,14 +66,11 @@ var drawerConfig = {
     },
 };
 function Drawer(props) {
-    var className = props.className, type = props.type, close = props.close, appearance = props.appearance, dataTestId = props.dataTestId, dataTour = props.dataTour, title = props.title, desc = props.desc, enableOverlay = props.enableOverlay, before = props.before, after = props.after, isOpenModal = props.isOpenModal, onClickClose = props.onClickClose, onClose = props.onClose, children = props.children;
+    var className = props.className, type = props.type, appearance = props.appearance, title = props.title, desc = props.desc, dataTestId = props.dataTestId, dataTour = props.dataTour, enableOverlay = props.enableOverlay, before = props.before, after = props.after, close = props.close, isOpenModal = props.isOpenModal, onClickClose = props.onClickClose, onClose = props.onClose, children = props.children;
     var prevIsOpenModalRef = useRef(null);
-    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
-        var _a;
-        return (__assign(__assign({}, resultConfig), (_a = drawerConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
-    }, {});
+    var appearanceConfig = useAppearanceConfig(appearance, drawerConfig);
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var direction = propsGenerator.direction, size = propsGenerator.size, titleTextSize = propsGenerator.titleTextSize, titleTextColor = propsGenerator.titleTextColor, closeIcon = propsGenerator.closeIcon, closeIconSrc = propsGenerator.closeIconSrc, closeIconFill = propsGenerator.closeIconFill, closeIconFillSize = propsGenerator.closeIconFillSize, closeIconFillIcon = propsGenerator.closeIconFillIcon, closeIconSize = propsGenerator.closeIconSize, closeIconShape = propsGenerator.closeIconShape, descTextSize = propsGenerator.descTextSize, descTextColor = propsGenerator.descTextColor;
+    var direction = propsGenerator.direction, size = propsGenerator.size, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, closeIcon = propsGenerator.closeIcon, closeIconFill = propsGenerator.closeIconFill, closeIconFillIcon = propsGenerator.closeIconFillIcon, closeIconFillSize = propsGenerator.closeIconFillSize, closeIconShape = propsGenerator.closeIconShape, closeIconSize = propsGenerator.closeIconSize, closeIconSrc = propsGenerator.closeIconSrc;
     useEffect(function () {
         if (onClose && prevIsOpenModalRef.current === true && !isOpenModal) {
             onClose();

package/dist/components/Dropdown.js

@@ -1,4 +1,4 @@
-export { D as Dropdown, a as DropdownItem, d as dropdownItemAppearance, b as dropdownItemConfig } from '../DropdownItem_es_JVT4f6Nb.js';
+export { D as Dropdown, a as DropdownItem, d as dropdownItemAppearance, b as dropdownItemConfig } from '../DropdownItem_es_BBxfR35q.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -17,10 +17,11 @@ import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Tooltip_es_Y2aoFQW7.js';
-import '../Text_es_BfLRfj-5.js';
+import '../Icon_es_k9bHSLyL.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_DxtZLeKY.js';
-import '../Divider_es_kY-30pft.js';
+import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
+import '../Link_es_BnUIX0QT.js';
+import '../Text_es_Ffjr5J1k.js';
+import '../Divider_es_CiRU0sTz.js';

package/dist/components/Group.js

@@ -1,8 +1,9 @@
-export { G as Group, a as groupAppearance, g as groupConfig } from '../Group_es_CYW2Hquh.js';
-import '../tslib.es6_es_Bwu1Cn-t.js';
+export { G as Group, a as groupAppearance, g as groupConfig } from '../Group_es_DSZxyI1e.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
+import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
+import '../tslib.es6_es_Bwu1Cn-t.js';
 import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';

package/dist/components/HeroTitle.js

@@ -1,10 +1,11 @@
-import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import clsx from 'clsx';
+import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { I as Icon } from '../Tooltip_es_Y2aoFQW7.js';
+import { I as Icon } from '../Icon_es_k9bHSLyL.js';
+import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
@@ -17,11 +18,11 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Text_es_BfLRfj-5.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_DxtZLeKY.js';
+import '../Link_es_BnUIX0QT.js';
+import '../Text_es_Ffjr5J1k.js';
 
 var heroTitleAppearanceSize = {
     sizeH1: {
@@ -60,10 +61,7 @@ var heroTitleConfig = {
 };
 function HeroTitle(props) {
     var className = props.className, appearance = props.appearance, text = props.text, afterWrapper = props.afterWrapper, beforeWrapper = props.beforeWrapper, dataTour = props.dataTour, _a = props.tag, tag = _a === void 0 ? 'span' : _a, before = props.before, after = props.after, isSkeleton = props.isSkeleton, onClick = props.onClick, children = props.children;
-    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
-        var _a;
-        return (__assign(__assign({}, resultConfig), (_a = heroTitleConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
-    }, {});
+    var appearanceConfig = useAppearanceConfig(appearance, heroTitleConfig);
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     var directionClass = propsGenerator.directionClass, size = propsGenerator.size, fillClass = propsGenerator.fillClass, textAlignClass = propsGenerator.textAlignClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorGradientClass = propsGenerator.textColorGradientClass, textColorHoverClass = propsGenerator.textColorHoverClass, textStyleClass = propsGenerator.textStyleClass, textTruncateClass = propsGenerator.textTruncateClass, textWeightClass = propsGenerator.textWeightClass, textWrap = propsGenerator.textWrap, dataTestId = propsGenerator.dataTestId, heightClass = propsGenerator.heightClass, iconAfter = propsGenerator.iconAfter, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconAfterSrc = propsGenerator.iconAfterSrc, iconBadgeAppearance = propsGenerator.iconBadgeAppearance, iconBadgeShape = propsGenerator.iconBadgeShape, iconBadgeSize = propsGenerator.iconBadgeSize, iconBadgeTextColor = propsGenerator.iconBadgeTextColor, iconBadgeTextSize = propsGenerator.iconBadgeTextSize, iconBadgeValue = propsGenerator.iconBadgeValue, iconBefore = propsGenerator.iconBefore, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, iconBeforeSrc = propsGenerator.iconBeforeSrc, svgFillClass = propsGenerator.svgFillClass, svgFillHoverClass = propsGenerator.svgFillHoverClass, typeClass = propsGenerator.typeClass, widthClass = propsGenerator.widthClass, wrapperDirectionClass = propsGenerator.wrapperDirectionClass;
     // @ts-expect-error

package/dist/components/Icon.js

@@ -1,15 +1,19 @@
-export { I as Icon, e as iconAppearance, i as iconConfig } from '../Tooltip_es_Y2aoFQW7.js';
+export { I as Icon, e as iconAppearance, i as iconConfig } from '../Icon_es_k9bHSLyL.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
+import 'react-inlinesvg';
+import '../hoc/urlWithAssetPrefix.js';
+import '@itcase/common';
+import '../context/UrlAssetPrefix.js';
+import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 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';
@@ -17,8 +21,5 @@ import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Text_es_BfLRfj-5.js';
-import 'react-inlinesvg';
-import '../hoc/urlWithAssetPrefix.js';
-import '../context/UrlAssetPrefix.js';
-import '../Link_es_DxtZLeKY.js';
+import '../Link_es_BnUIX0QT.js';
+import '../Text_es_Ffjr5J1k.js';

package/dist/components/Input.js

@@ -1,8 +1,9 @@
-export { I as Input, a as inputAppearance, i as inputConfig } from '../Input_es_D9Y1Rj5Y.js';
-import '../tslib.es6_es_Bwu1Cn-t.js';
+export { I as Input, a as inputAppearance, i as inputConfig } from '../Input_es_D2mNCqiH.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
+import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
+import '../tslib.es6_es_Bwu1Cn-t.js';
 import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';

package/dist/components/InputPassword.js

@@ -2,8 +2,9 @@ import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useMemo, useCallback } from 'react';
 import clsx from 'clsx';
+import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { I as Icon } from '../Tooltip_es_Y2aoFQW7.js';
+import { I as Icon } from '../Icon_es_k9bHSLyL.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
@@ -14,14 +15,14 @@ import '../context/UIContext.js';
 import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
-import '../hooks/useStyles/useStyles.js';
-import 'lodash/maxBy';
-import '../hooks/useStyles/styleAttributes.js';
-import '../Text_es_BfLRfj-5.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_DxtZLeKY.js';
+import '../hooks/useStyles/useStyles.js';
+import 'lodash/maxBy';
+import '../hooks/useStyles/styleAttributes.js';
+import '../Link_es_BnUIX0QT.js';
+import '../Text_es_Ffjr5J1k.js';
 
 var inputPasswordAppearanceDefault = {
     defaultPrimary: {
@@ -226,10 +227,7 @@ function InputPassword(props) {
     //   () => state && inputPasswordConfig.state && inputPasswordConfig.state[state],
     //   [state, inputPasswordConfig],
     // )
-    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
-        var _a;
-        return (__assign(__assign({}, resultConfig), (_a = inputPasswordConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
-    }, {});
+    var appearanceConfig = useAppearanceConfig(appearance, inputPasswordConfig);
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     var fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, borderWidthClass = propsGenerator.borderWidthClass, textColorClass = propsGenerator.textColorClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, caretClass = propsGenerator.caretClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, shapeClass = propsGenerator.shapeClass, _b = propsGenerator.sizeClass, sizeClass = _b === void 0 ? 'm' : _b, widthClass = propsGenerator.widthClass;
     return (jsxs("div", { className: "input-password", children: [jsx("input", { id: String(id), className: clsx(className, 'input-password__input', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), fillClass && "fill_".concat(fillClass), shapeClass && "input-password__input_shape_".concat(shapeClass), textSizeClass && "text_size_".concat(textSizeClass), textWeightClass && "text-weight_".concat(textWeightClass), widthClass && "width_".concat(widthClass), borderWidthClass && "border-width_".concat(borderWidthClass), sizeClass && "input-password__input_size_".concat(sizeClass), borderColorClass && "border-color_".concat(borderColorClass), placeholderTextColorClass &&

package/dist/components/Label.js

@@ -1,8 +1,9 @@
-export { L as Label, a as labelAppearance, l as labelConfig } from '../Label_es_CIDBUVgO.js';
-import '../tslib.es6_es_Bwu1Cn-t.js';
+export { L as Label, a as labelAppearance, l as labelConfig } from '../Label_es_HXrap3A4.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
+import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
+import '../tslib.es6_es_Bwu1Cn-t.js';
 import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -17,9 +18,9 @@ import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Tooltip_es_Y2aoFQW7.js';
-import '../Text_es_BfLRfj-5.js';
+import '../Icon_es_k9bHSLyL.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_DxtZLeKY.js';
+import '../Link_es_BnUIX0QT.js';
+import '../Text_es_Ffjr5J1k.js';

package/dist/components/Link.js

@@ -1,8 +1,9 @@
-export { L as Link, a as LinkWrapper, b as linkAppearance, l as linkConfig } from '../Link_es_DxtZLeKY.js';
+export { L as Link, a as LinkWrapper, b as linkAppearance, l as linkConfig } from '../Link_es_BnUIX0QT.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
+import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';

package/dist/components/List.js

@@ -1,9 +1,10 @@
-import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
+import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { L as Link } from '../Link_es_DxtZLeKY.js';
+import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
+import { L as Link } from '../Link_es_BnUIX0QT.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -222,10 +223,7 @@ var listConfig = {
     appearance: listAppearance};
 function List(props) {
     var className = props.className, type = props.type, appearance = props.appearance, style = props.style, children = props.children;
-    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
-        var _a;
-        return (__assign(__assign({}, resultConfig), (_a = listConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
-    }, {});
+    var appearanceConfig = useAppearanceConfig(appearance, listConfig);
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     var directionClass = propsGenerator.directionClass, bulletFillClass = propsGenerator.bulletFillClass, bulletSizeClass = propsGenerator.bulletSizeClass, bulletTextColorClass = propsGenerator.bulletTextColorClass, sizeClass = propsGenerator.sizeClass;
     // @ts-expect-error

package/dist/components/Loader.js

@@ -1,9 +1,10 @@
-export { L as Loader, a as loaderAppearance, l as loaderConfig } from '../Loader_es_GYOr0UTX.js';
-import '../tslib.es6_es_Bwu1Cn-t.js';
+export { L as Loader, a as loaderAppearance, l as loaderConfig } from '../Loader_es_BDb87cdb.js';
 import 'react/jsx-runtime';
 import 'clsx';
-import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
+import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react';
+import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
@@ -17,4 +18,4 @@ import '../utils/setViewportProperty.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Text_es_BfLRfj-5.js';
+import '../Text_es_Ffjr5J1k.js';