@itcase/ui 1.2.34 → 1.3.0

package/dist/components/Choice.js

@@ -1,24 +1,24 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useRef, useMemo, createRef, useCallback } from 'react';
 import clsx from 'clsx';
-import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { I as Icon } from '../Icon-DptCmI_y.js';
-import { L as Loader } from '../Loader-DHNcD09o.js';
-import { T as Text } from '../Text-C4Bg2Mv6.js';
+import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
+import { I as Icon } from '../Icon-CZrDqG76.js';
+import { L as Loader } from '../Loader-K_DJmah6.js';
+import { T as Text } from '../Text-JayJa3hj.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../tslib.es6-5FtW-kfi.js';
 import 'react-inlinesvg';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-CeQuavin.js';
-import '../Tooltip--c-4Qp04.js';
-import '../Title-YVzIwk68.js';
+import '../Link-_A9ZfNln.js';
+import '../Tooltip-1Jbub0K6.js';
+import '../Title-CHgrIarR.js';
 
 var choiceAppearance = {
     dev: {
@@ -48,90 +48,24 @@ var Choice = React.forwardRef(function Choice(props, ref) {
         var isChecked = isCheckbox ? event.target.checked : true;
         setActiveSegment && setActiveSegment(item, isChecked);
     }, [isCheckbox, setActiveSegment]);
-    var borderColorClass = useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: 'borderColor',
-    });
-    var borderWidthClass = useDeviceTargetClass(props, {
-        prefix: 'border-width_',
-        propsKey: 'borderWidth',
-    });
-    var borderTypeClass = useDeviceTargetClass(props, {
-        prefix: 'border_type_',
-        propsKey: 'borderType',
-    });
-    var shapeClass = useDeviceTargetClass(props, {
-        prefix: 'choice_shape_',
-        propsKey: 'shape',
-    });
-    var fillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillDisabledClass = useDeviceTargetClass(props, {
-        prefix: 'fill_disabled_',
-        propsKey: 'fillDisabled',
-    });
-    var fillHoverClass = useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'fillHover',
-    });
-    var fillActiveClass = useDeviceTargetClass(props, {
-        prefix: 'fill_active_',
-        propsKey: 'fillActive',
-    });
-    var fillActiveDisabledClass = useDeviceTargetClass(props, {
-        prefix: 'fill_active_disabled_',
-        propsKey: 'fillActiveDisabled',
-    });
-    var wrapClass = useDeviceTargetClass(props, {
-        prefix: 'choice_wrap_',
-        propsKey: 'wrap',
-    });
-    var gapClass = useDeviceTargetClass(props, {
-        prefix: 'gap_',
-        propsKey: 'gap',
-    });
-    var rowGapClass = useDeviceTargetClass(props, {
-        prefix: 'row-gap_',
-        propsKey: 'rowGap',
-    });
-    var columnGapClass = useDeviceTargetClass(props, {
-        prefix: 'column-gap_',
-        propsKey: 'columnGap',
-    });
-    var appearanceConfig = appearance && choiceConfig.appearance && choiceConfig.appearance[appearance];
-    return (jsx("div", { className: clsx(className, 'choice', shapeClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
-                "choice_shape_".concat(appearanceConfig.shape).replace(/([A-Z])/g, '-$1').toLowerCase()), borderColorClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderColor) &&
-                "border-color_".concat(appearanceConfig.borderColor)
-                    .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), borderWidthClass, borderTypeClass, set && "choice_set_".concat(set), size && "choice_size_".concat(size), type && "choice_type_".concat(type)), ref: controlRef, children: isLoading ? (jsx(Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent", set: "simple" })) : (jsx("div", { className: clsx(className, 'choice__wrapper', gapClass, rowGapClass, columnGapClass, wrapClass), children: options.map(function (item) {
+    // @ts-expect-error
+    var appearanceConfig = choiceConfig.appearance && choiceConfig.appearance[appearance];
+    var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
+    var borderColorClass = classGenerator.borderColorClass, borderTypeClass = classGenerator.borderTypeClass, borderWidthClass = classGenerator.borderWidthClass, columnGapClass = classGenerator.columnGapClass, fillActiveClass = classGenerator.fillActiveClass, fillActiveDisabledClass = classGenerator.fillActiveDisabledClass, fillClass = classGenerator.fillClass, fillDisabledClass = classGenerator.fillDisabledClass, fillHoverClass = classGenerator.fillHoverClass, gapClass = classGenerator.gapClass, rowGapClass = classGenerator.rowGapClass, shapeClass = classGenerator.shapeClass, wrapClass = classGenerator.wrapClass;
+    return (jsx("div", { className: clsx(className, 'choice', shapeClass && "choice_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), set && "choice_set_".concat(set), size && "choice_size_".concat(size), type && "choice_type_".concat(type)), ref: controlRef, children: isLoading ? (jsx(Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent", set: "simple" })) : (jsx("div", { className: clsx(className, 'choice__wrapper', gapClass && "gap_".concat(gapClass), rowGapClass && "row-gap_".concat(rowGapClass), columnGapClass && "column-gap_".concat(columnGapClass), wrapClass && "choice_wrap_".concat(wrapClass)), children: options.map(function (item) {
                 // prettier-ignore
                 var isActive = typeof active === 'object'
                     ? String(item.value) === String(active.value)
                     : String(item.value) === String(active);
                 return (jsxs("div", { className: clsx('choice__item', !isDisabled
-                        ? fillClass ||
-                            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
-                                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase())
-                        : fillDisabledClass, !isDisabled &&
-                        (fillHoverClass ||
-                            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
-                                "fill_hover_".concat(appearanceConfig.fillHover)
-                                    .replace(/([A-Z])/g, '-$1')
-                                    .toLowerCase())), !isActive && isDisabled && 'choice__item_state_disabled', isActive
+                        ? fillClass && "fill_".concat(fillClass)
+                        : fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), !isDisabled ? fillHoverClass && "fill_hover_".concat(fillHoverClass) : null, !isActive && isDisabled && 'choice__item_state_disabled', isActive
                         ? !isDisabled
-                            ? fillActiveClass ||
-                                ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillActive) &&
-                                    "fill_active_".concat(appearanceConfig.fillActive)
-                                        .replace(/([A-Z])/g, '-$1')
-                                        .toLowerCase())
-                            : fillActiveDisabledClass
+                            ? fillActiveClass && "fill_active_".concat(fillActiveClass)
+                            : fillActiveDisabledClass && "fill_active_disabled_".concat(fillActiveDisabledClass)
                         : !isDisabled
-                            ? fillClass
-                            : fillDisabledClass, isActive && isDisabled && 'choice__item_active_state_disabled', isActive && 'choice__item_active'), ref: optionsRefs.get(item.value), children: [jsx("input", { className: "choice__item-radio", name: name, checked: isActive, disabled: isDisabled, id: "".concat(name, "-").concat(item.value), type: isCheckbox ? 'checkbox' : 'radio', value: item.value, onChange: function (event) { return onChange(event, item); } }), jsxs("label", { className: clsx('choice__item-label', isDisabled && 'choice__item-label_state_disabled'), htmlFor: "".concat(name, "-").concat(item.value), children: [before, item.label && (jsx(Text, { size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textWeight: labelTextWeight, textColor: isActive
+                            ? fillClass && "fill_".concat(fillClass)
+                            : fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), isActive && isDisabled && 'choice__item_active_state_disabled', isActive && 'choice__item_active'), ref: optionsRefs.get(item.value), children: [jsx("input", { className: "choice__item-radio", name: name, checked: isActive, disabled: isDisabled, id: "".concat(name, "-").concat(item.value), type: isCheckbox ? 'checkbox' : 'radio', value: item.value, onChange: function (event) { return onChange(event, item); } }), jsxs("label", { className: clsx('choice__item-label', isDisabled && 'choice__item-label_state_disabled'), htmlFor: "".concat(name, "-").concat(item.value), children: [before, item.label && (jsx(Text, { size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textWeight: labelTextWeight, textColor: isActive
                                         ? !isDisabled
                                             ? labelTextActiveColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextActiveColor)
                                             : labelTextActiveColorDisabled
@@ -143,4 +77,4 @@ var Choice = React.forwardRef(function Choice(props, ref) {
             }) })) }));
 });
 
-export { Choice, choiceConfig };
+export { Choice, choiceAppearance, choiceConfig };

package/dist/components/Code.js

@@ -3,7 +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 { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
@@ -23,86 +23,14 @@ var codeConfig = {
 function Code(props) {
     var after = props.after, appearance = props.appearance, before = props.before, className = props.className, inputAutoFocus = props.inputAutoFocus, _a = props.inputCount, inputCount = _a === void 0 ? 6 : _a, _b = props.inputPlaceholder, inputPlaceholder = _b === void 0 ? 0 : _b, _c = props.inputType, inputType = _c === void 0 ? 'number' : _c, separatorComponent = props.separatorComponent, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus;
     var _d = useState(''), otp = _d[0], setOtp = _d[1];
-    var fillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'inputFill',
-    });
-    var fillHoverClass = useDeviceTargetClass(props, {
-        prefix: 'fill_hover_',
-        propsKey: 'inputFillHover',
-    });
-    var sizeClass = useDeviceTargetClass(props, {
-        prefix: 'code__input_size_',
-        propsKey: 'inputSize',
-    });
-    var shapeClass = useDeviceTargetClass(props, {
-        prefix: 'code__input_shape_',
-        propsKey: 'inputShape',
-    });
-    var textSizeClass = useDeviceTargetClass(props, {
-        prefix: 'text_size_',
-        propsKey: 'inputTextSize',
-    });
-    var textColorClass = useDeviceTargetClass(props, {
-        prefix: 'text-color_',
-        propsKey: 'inputTextColor',
-    });
-    var caretClass = useDeviceTargetClass(props, {
-        prefix: 'caret-color_',
-        propsKey: 'inputCaretColor',
-    });
-    var placeholderClass = useDeviceTargetClass(props, {
-        prefix: 'placeholder-text-color_',
-        propsKey: 'inputPlaceholderTextColor',
-    });
-    var weightClass = useDeviceTargetClass(props, {
-        prefix: 'text-weight_',
-        propsKey: 'inputTextWeight',
-    });
-    var borderWidthClass = useDeviceTargetClass(props, {
-        prefix: 'border-width_',
-        propsKey: 'inputBorderWidth',
-    });
-    var borderColorClass = useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: 'inputBorderColor',
-    });
-    var borderColorHoverClass = useDeviceTargetClass(props, {
-        prefix: 'border-color_hover_',
-        propsKey: 'inputBorderColorHover',
-    });
-    var borderColorFocusClass = useDeviceTargetClass(props, {
-        prefix: 'border-color_focus_',
-        propsKey: 'inputBorderFocusColor',
-    });
-    var gapClass = useDeviceTargetClass(props, {
-        prefix: 'gap_',
-        propsKey: 'gap',
-    });
-    var widthClass = useDeviceTargetClass(props, {
-        prefix: 'width_',
-        propsKey: 'width',
-    });
-    var appearanceConfig = appearance && choiceConfig.appearance && choiceConfig.appearance[appearance];
+    // @ts-expect-error
+    var appearanceConfig = codeConfig.appearance && codeConfig.appearance[appearance];
+    var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
+    var gapClass = classGenerator.gapClass, inputBorderColorClass = classGenerator.inputBorderColorClass, inputBorderColorHoverClass = classGenerator.inputBorderColorHoverClass, inputBorderFocusColorClass = classGenerator.inputBorderFocusColorClass, inputBorderWidthClass = classGenerator.inputBorderWidthClass, inputCaretColorClass = classGenerator.inputCaretColorClass, inputFillClass = classGenerator.inputFillClass, inputFillHoverClass = classGenerator.inputFillHoverClass, inputPlaceholderTextColorClass = classGenerator.inputPlaceholderTextColorClass, inputShapeClass = classGenerator.inputShapeClass, inputSizeClass = classGenerator.inputSizeClass, inputTextColorClass = classGenerator.inputTextColorClass, inputTextSizeClass = classGenerator.inputTextSizeClass, inputTextWeightClass = classGenerator.inputTextWeightClass, widthClass = classGenerator.widthClass;
     // NOTE: too many dependencies for "useCallback" and possible too many checks
     var renderInput = function (otpInputProps) {
-        return (jsx("input", __assign({}, otpInputProps, { className: clsx('code__input', caretClass, fillClass ||
-                ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
-                    "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass ||
-                ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
-                    "fill_hover_".concat(appearanceConfig.fillHover).replace(/([A-Z])/g, '-$1').toLowerCase()), placeholderClass, shapeClass ||
-                ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
-                    "code__input_shape_".concat(appearanceConfig.shape)
-                        .replace(/([A-Z])/g, '-$1')
-                        .toLowerCase()), textSizeClass ||
-                ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textSize) &&
-                    "text_size_".concat(appearanceConfig.textSize).replace(/([A-Z])/g, '-$1').toLowerCase()), textColorClass ||
-                ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor) &&
-                    "text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()), weightClass, borderWidthClass, borderColorClass ||
-                ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderColor) &&
-                    "border-color_".concat(appearanceConfig.borderColor)
-                        .replace(/([A-Z])/g, '-$1')
-                        .toLowerCase()), borderColorHoverClass, borderColorFocusClass, sizeClass), autoComplete: "one-time-code", onBlur: function (event) {
+        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)), autoComplete: "one-time-code", onBlur: function (event) {
                 onBlur && onBlur(event);
                 otpInputProps.onBlur(event);
             }, onFocus: function (event) {
@@ -113,7 +41,7 @@ function Code(props) {
     useEffect(function () {
         onChange && onChange(otp);
     }, [otp]);
-    return (jsxs("div", { className: clsx(className, 'code', widthClass), children: [before, jsx(OtpInput, { containerStyle: clsx(className, 'code__wrapper', gapClass), inputType: inputType, numInputs: inputCount, placeholder: inputPlaceholder, renderInput: renderInput, renderSeparator: separatorComponent || null, shouldAutoFocus: inputAutoFocus, value: otp, onChange: setOtp }), after] }));
+    return (jsxs("div", { className: clsx(className, 'code', widthClass), children: [before, jsx(OtpInput, { containerStyle: clsx(className, 'code__wrapper', gapClass && "gap_".concat(gapClass)), inputType: inputType, numInputs: inputCount, placeholder: inputPlaceholder, renderInput: renderInput, renderSeparator: separatorComponent || null, shouldAutoFocus: inputAutoFocus, value: otp, onChange: setOtp }), after] }));
 }
 Code.defaultProps = {
     inputBorderColor: 'surfaceBorderTertiary',
@@ -129,4 +57,4 @@ Code.defaultProps = {
     inputTextSize: 'xxl',
 };
 
-export { Code, codeConfig };
+export { Code, codeAppearance, codeConfig };

package/dist/components/CookiesWarning.js

@@ -2,10 +2,11 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRef, useMemo, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
 import Cookies from 'js-cookie';
-import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { B as Button } from '../Button-C8MATksY.js';
-import { G as Group } from '../Group-BCvs5UxK.js';
-import { T as Text } from '../Text-C4Bg2Mv6.js';
+import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
+import { B as Button } from '../Button-CX3x7Z6Q.js';
+import { G as Group } from '../Group-B9L2NTgM.js';
+import { T as Text } from '../Text-JayJa3hj.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
@@ -15,13 +16,12 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Icon-DptCmI_y.js';
-import '../tslib.es6-5FtW-kfi.js';
+import '../Icon-CZrDqG76.js';
 import 'react-inlinesvg';
-import '../Link-CeQuavin.js';
-import '../Tooltip--c-4Qp04.js';
-import '../Title-YVzIwk68.js';
-import '../Loader-DHNcD09o.js';
+import '../Link-_A9ZfNln.js';
+import '../Tooltip-1Jbub0K6.js';
+import '../Title-CHgrIarR.js';
+import '../Loader-K_DJmah6.js';
 
 function CookiesWarning(props) {
     var _a = props.isHideOnScroll, isHideOnScroll = _a === void 0 ? false : _a, buttonFill = props.buttonFill, buttonFillHover = props.buttonFillHover, _b = props.buttonLabel, buttonLabel = _b === void 0 ? 'I agree' : _b, buttonLabelSize = props.buttonLabelSize, buttonLabelTextColor = props.buttonLabelTextColor, buttonShape = props.buttonShape, buttonSize = props.buttonSize, buttonWidth = props.buttonWidth, className = props.className, _c = props.message, message = _c === void 0 ? 'The site uses cookies to collect technical information, to optimize the design and improvement of the website, and to provide certain functions. By using the website, you agree to the use of «cookies».' : _c, textColor = props.textColor, textSize = props.textSize;
@@ -46,18 +46,9 @@ function CookiesWarning(props) {
             window.removeEventListener('scroll', closeCookiesWarning, true);
         }
     }, [isOpen]);
-    var fillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var fillGradientClass = useDeviceTargetClass(props, {
-        prefix: 'fill-gradient_',
-        propsKey: 'fillGradient',
-    });
-    var gap = useDeviceTargetClass(props, {
-        propsKey: 'gap',
-    });
-    return isOpen ? (jsx("div", { className: clsx('cookies-warning', className, fillClass, fillGradientClass), ref: cookiesWarningRef, children: jsxs(Group, { className: "cookies-warning__inner", direction: "vertical", gap: gap ? gap : undefined, children: [jsx(Text, { size: textSize, textColor: textColor, children: message }), jsx(Button, { width: buttonWidth, labelTextColor: buttonLabelTextColor, labelTextSize: buttonLabelSize, fill: buttonFill, fillHover: buttonFillHover, shape: buttonShape, size: buttonSize, onClick: closeCookiesWarning, children: buttonLabel })] }) })) : null;
+    var classGenerator = useDeviceTargetClassGenerator(props);
+    var fillClass = classGenerator.fillClass, fillGradientClass = classGenerator.fillGradientClass, gapClass = classGenerator.gapClass;
+    return isOpen ? (jsx("div", { className: clsx('cookies-warning', className, fillClass && "fill_".concat(fillClass), fillGradientClass && "fill-gradient_".concat(fillGradientClass)), ref: cookiesWarningRef, children: jsxs(Group, { className: clsx('cookies-warning__inner', gapClass && "gap_".concat(gapClass)), direction: "vertical", children: [jsx(Text, { size: textSize, textColor: textColor, children: message }), jsx(Button, { width: buttonWidth, labelTextColor: buttonLabelTextColor, labelTextSize: buttonLabelSize, fill: buttonFill, fillHover: buttonFillHover, shape: buttonShape, size: buttonSize, onClick: closeCookiesWarning, children: buttonLabel })] }) })) : null;
 }
 
 export { CookiesWarning };

package/dist/components/DadataHintField.js

@@ -3,8 +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-CgjHxZmK.js';
-import '../hooks/useDeviceTargetClass.js';
+import { I as Input } from '../Input-BrV5_NoV.js';
+import '../hooks/useDeviceTargetClassGenerator.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
@@ -12,13 +12,13 @@ import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 
 function DadataHintField(props) {
-    var delay = props.delay, inputProps = props.inputProps, setValue = props.setValue, input = props.input, meta = props.meta, token = props.token;
+    var delay = props.delay, input = props.input, inputProps = props.inputProps, meta = props.meta, setValue = props.setValue, token = props.token;
     var dadataInputProps = useMemo(function () {
         return __assign(__assign({}, inputProps), { className: clsx('react-dadata__input', meta.active && 'input_state_focus', meta.error && meta.touched && "input_state_".concat(meta.error.key || 'error')), 
             // https://www.npmjs.com/package/react-dadata
             // "Свойство value игнорируется."
             // value: input.value,
-            inputValue: input.value, onFocus: input.onFocus, onBlur: input.onBlur, onChange: input.onChange });
+            inputValue: input.value, onBlur: input.onBlur, onChange: input.onChange, onFocus: input.onFocus });
     }, [
         inputProps,
         meta.active,

package/dist/components/DatePicker.js

@@ -4,13 +4,13 @@ import React, { useMemo, useCallback, useRef, useState, useEffect } from 'react'
 import clsx from 'clsx';
 import { ru } from 'date-fns/locale';
 import DatePicker from 'react-datepicker';
-import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { B as Button } from '../Button-C8MATksY.js';
-import { I as Icon } from '../Icon-DptCmI_y.js';
-import { I as Input } from '../Input-CgjHxZmK.js';
-import { L as Label } from '../Label-zOLL6ePu.js';
-import { T as Text } from '../Text-C4Bg2Mv6.js';
+import { B as Button } from '../Button-CX3x7Z6Q.js';
+import { I as Icon } from '../Icon-CZrDqG76.js';
+import { I as Input } from '../Input-BrV5_NoV.js';
+import { L as Label } from '../Label-DQyB2ThM.js';
+import { T as Text } from '../Text-JayJa3hj.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
@@ -19,11 +19,11 @@ import 'react-responsive';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-CeQuavin.js';
-import '../Loader-DHNcD09o.js';
+import '../Link-_A9ZfNln.js';
+import '../Loader-K_DJmah6.js';
 import 'react-inlinesvg';
-import '../Tooltip--c-4Qp04.js';
-import '../Title-YVzIwk68.js';
+import '../Tooltip-1Jbub0K6.js';
+import '../Title-CHgrIarR.js';
 
 var datePickerAppearance = {
     dev: {},
@@ -36,13 +36,7 @@ var datePickerConfig = {
     },
 };
 function DatePickerInput(props) {
-    var _a;
-    var appearance = props.appearance, className = props.className, clearIcon = props.clearIcon, clearIconFill = props.clearIconFill, clearIconFillHover = props.clearIconFillHover, clearIconFillSize = props.clearIconFillSize, clearIconItemFill = props.clearIconItemFill, clearIconItemFillHover = props.clearIconItemFillHover, clearIconShape = props.clearIconShape, clearIconSize = props.clearIconSize, clearIconSrc = props.clearIconSrc, clearLabel = props.clearLabel, clearLabelTextColor = props.clearLabelTextColor, clearLabelTextColorHover = props.clearLabelTextColorHover, clearLabelTextSize = props.clearLabelTextSize, _b = props.datePickerProps, datePickerProps = _b === void 0 ? {} : _b, endValue = props.endValue, inputProps = props.inputProps, labelTextSize = props.labelTextSize, value = props.value, onChange = props.onChange;
-    var appearanceConfig = appearance && datePickerConfig.appearance && datePickerConfig.appearance[appearance];
-    var widthClass = useDeviceTargetClass(props, {
-        prefix: 'datepicker_width_',
-        propsKey: 'width',
-    });
+    var appearance = props.appearance, className = props.className, clearIcon = props.clearIcon, clearIconFill = props.clearIconFill, clearIconFillHover = props.clearIconFillHover, clearIconFillSize = props.clearIconFillSize, clearIconItemFill = props.clearIconItemFill, clearIconItemFillHover = props.clearIconItemFillHover, clearIconShape = props.clearIconShape, clearIconSize = props.clearIconSize, clearIconSrc = props.clearIconSrc, clearLabel = props.clearLabel, clearLabelTextColor = props.clearLabelTextColor, clearLabelTextColorHover = props.clearLabelTextColorHover, clearLabelTextSize = props.clearLabelTextSize, _a = props.datePickerProps, datePickerProps = _a === void 0 ? {} : _a, endValue = props.endValue, inputProps = props.inputProps, labelTextSize = props.labelTextSize, value = props.value, onChange = props.onChange;
     var datepickerRef = useRef(null);
     var start = useMemo(function () {
         if (value) {
@@ -65,8 +59,8 @@ function DatePickerInput(props) {
         }
         return endValue;
     }, [endValue]);
-    var _c = useState(start), startDate = _c[0], setStartDate = _c[1];
-    var _d = useState(end), endDate = _d[0], setEndDate = _d[1];
+    var _b = useState(start), startDate = _b[0], setStartDate = _b[1];
+    var _c = useState(end), endDate = _c[0], setEndDate = _c[1];
     var handleChange = useCallback(function (_a) {
         var newStartDate = _a[0], newEndDate = _a[1];
         onChange && onChange(newStartDate, newEndDate);
@@ -107,16 +101,18 @@ function DatePickerInput(props) {
         setEndDate(end);
     }, [end]);
     // @ts-expect-error
+    var appearanceConfig = datePickerConfig.appearance && datePickerConfig.appearance[appearance];
+    var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
+    var widthClass = classGenerator.widthClass;
+    // @ts-expect-error
     var datePickerStyles = useStyles(props).styles;
-    return (jsx("div", { className: clsx(className, 'datepicker', (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.monthsShown) && 'datepicker_type_multiple-months', (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.customTimeInput) && 'datepicker_type_button', widthClass ||
-            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.width) &&
-                ((_a = "datepicker_width_".concat(appearanceConfig.datePicker.width)) === null || _a === void 0 ? void 0 : _a.replace(/([A-Z])/g, '-$1').toLowerCase()))), style: datePickerStyles, children: jsx(DatePicker, __assign({ ref: datepickerRef, endDate: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectsRange) ? endDate : undefined, locale: ru, minDate: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.disablePastDays) ? new Date() : undefined, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: startDate, startDate: startDate, customInput: jsx(DatePickerCustomInput, { datePickerAppearance: appearance, labelTextSize: labelTextSize, clearIcon: clearIcon, clearIconFill: clearIconFill, clearIconFillHover: clearIconFillHover, clearIconFillSize: clearIconFillSize, clearIconItemFill: clearIconItemFill, clearIconItemFillHover: clearIconItemFillHover, clearIconShape: clearIconShape, clearIconSize: clearIconSize, clearIconSrc: clearIconSrc, clearLabel: clearLabel, clearLabelTextColor: clearLabelTextColor, clearLabelTextColorHover: clearLabelTextColorHover, clearLabelTextSize: clearLabelTextSize, datepickerRef: datepickerRef, inputIcon: datePickerProps.inputIcon, inputIconFill: datePickerProps.inputIconFill, inputIconFillHover: datePickerProps.inputIconFillHover, inputIconFillSize: datePickerProps.inputIconFillSize, inputIconItemFill: datePickerProps.inputIconItemFill, inputIconShape: datePickerProps.inputIconShape, inputIconSize: datePickerProps.inputIconSize, inputIconSrc: datePickerProps.inputIconSrc, inputProps: inputProps, isClearable: datePickerProps.isClearable }), popperClassName: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.popper) && "react-datepicker-popper-".concat(datePickerProps.popper), onChange: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectsRange) ? handleChange : onChange }, datePickerProps, { 
+    return (jsx("div", { className: clsx(className, 'datepicker', (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.monthsShown) && 'datepicker_type_multiple-months', (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.customTimeInput) && 'datepicker_type_button', widthClass && "datepicker_width_".concat(widthClass)), style: datePickerStyles, children: jsx(DatePicker, __assign({ ref: datepickerRef, endDate: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectsRange) ? endDate : undefined, locale: ru, minDate: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.disablePastDays) ? new Date() : undefined, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: startDate, startDate: startDate, customInput: jsx(DatePickerCustomInput, { labelTextSize: labelTextSize, clearIcon: clearIcon, clearIconFill: clearIconFill, clearIconFillHover: clearIconFillHover, clearIconFillSize: clearIconFillSize, clearIconItemFill: clearIconItemFill, clearIconItemFillHover: clearIconItemFillHover, clearIconShape: clearIconShape, clearIconSize: clearIconSize, clearIconSrc: clearIconSrc, clearLabel: clearLabel, clearLabelTextColor: clearLabelTextColor, clearLabelTextColorHover: clearLabelTextColorHover, clearLabelTextSize: clearLabelTextSize, datePickerAppearance: appearance, datepickerRef: datepickerRef, inputIcon: datePickerProps.inputIcon, inputIconFill: datePickerProps.inputIconFill, inputIconFillHover: datePickerProps.inputIconFillHover, inputIconFillSize: datePickerProps.inputIconFillSize, inputIconItemFill: datePickerProps.inputIconItemFill, inputIconShape: datePickerProps.inputIconShape, inputIconSize: datePickerProps.inputIconSize, inputIconSrc: datePickerProps.inputIconSrc, inputProps: inputProps, isClearable: datePickerProps.isClearable }), popperClassName: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.popper) && "react-datepicker-popper-".concat(datePickerProps.popper), onChange: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectsRange) ? handleChange : onChange }, datePickerProps, { 
             // Important for use custom clear button
             isClearable: false })) }));
 }
 var DatePickerCustomInput = React.forwardRef(function (props, ref) {
     var _a;
-    var isClearable = props.isClearable, inputIcon = props.inputIcon, inputProps = props.inputProps, value = props.value, datePickerAppearance = props.datePickerAppearance;
+    var isClearable = props.isClearable, datePickerAppearance = props.datePickerAppearance, inputIcon = props.inputIcon, inputProps = props.inputProps, value = props.value;
     var multipleValue = useMemo(function () {
         if (value) {
             var twoDates = value.split(' - ');
@@ -144,4 +140,4 @@ function DatePickerInputIcon(props) {
 }
 DatePickerInputIcon.displayName = 'DatePickerInputIcon';
 
-export { DatePickerInput, datePickerConfig };
+export { DatePickerInput, datePickerAppearance, datePickerConfig };

package/dist/components/Divider.js

@@ -1,7 +1,8 @@
-export { D as Divider, d as dividerConfig } from '../Divider-DHIuQUsH.js';
+export { D as Divider, a as dividerAppearance, d as dividerConfig } from '../Divider-DBvDCUqP.js';
 import 'react/jsx-runtime';
 import 'clsx';
-import '../hooks/useDeviceTargetClass.js';
+import '../hooks/useDeviceTargetClassGenerator.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';

package/dist/components/Dot.js

@@ -1,7 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -14,29 +15,11 @@ import '../hooks/styleAttributes.js';
 
 function Dot(props) {
     var children = props.children, className = props.className;
-    var borderColorClass = useDeviceTargetClass(props, {
-        prefix: 'border-color_',
-        propsKey: 'borderColor',
-    });
-    var borderTypeClass = useDeviceTargetClass(props, {
-        prefix: 'border_type_',
-        propsKey: 'borderType',
-    });
-    var fillClass = useDeviceTargetClass(props, {
-        prefix: 'fill_',
-        propsKey: 'fill',
-    });
-    var shapeClass = useDeviceTargetClass(props, {
-        prefix: 'dot_shape_',
-        propsKey: 'shape',
-    });
-    var sizeClass = useDeviceTargetClass(props, {
-        prefix: 'dot_size_',
-        propsKey: 'size',
-    });
+    var classGenerator = useDeviceTargetClassGenerator(props);
+    var borderColorClass = classGenerator.borderColorClass, borderTypeClass = classGenerator.borderTypeClass, fillClass = classGenerator.fillClass, shapeClass = classGenerator.shapeClass, sizeClass = classGenerator.sizeClass;
     // @ts-expect-error
     var styles = useStyles(props).styles;
-    return (jsx("div", { className: clsx(className, 'dot', borderColorClass, borderTypeClass, fillClass, shapeClass, sizeClass), style: styles, children: children }));
+    return (jsx("div", { className: clsx(className, 'dot', borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), fillClass && "fill_".concat(fillClass), shapeClass && "dot_shape_".concat(shapeClass), sizeClass && "dot_size_".concat(sizeClass)), style: styles, children: children }));
 }
 
 export { Dot };

package/dist/components/Drawer.js

@@ -3,10 +3,10 @@ import clsx from 'clsx';
 import ReactDrawer from 'react-modern-drawer';
 
 function Drawer(props) {
-    var children = props.children, isOpenModal = props.isOpenModal, after = props.after, before = props.before, className = props.className, closeModal = props.closeModal, dataTour = props.dataTour, direction = props.direction, enableOverlay = props.enableOverlay, size = props.size, type = props.type;
-    return (jsxs(ReactDrawer, { direction: direction || 'right', enableOverlay: enableOverlay, lockBackgroundScroll: false, 
+    var children = props.children, direction = props.direction, isOpenModal = props.isOpenModal, after = props.after, before = props.before, className = props.className, closeModal = props.closeModal, dataTour = props.dataTour, enableOverlay = props.enableOverlay, size = props.size, type = props.type;
+    return (jsxs(ReactDrawer, { className: clsx('drawer', type && "drawer_type_".concat(type), className, dataTour && "data-tour-".concat(dataTour)), direction: direction || 'right', enableOverlay: enableOverlay, lockBackgroundScroll: false, 
         // @ts-expect-error
-        open: isOpenModal, overlayClassName: "drawer__overlay", size: size || 600, className: clsx('drawer', type && "drawer_type_".concat(type), className, dataTour && "data-tour-".concat(dataTour)), onClose: closeModal, children: [before && jsx("div", { className: "drawer__before", children: before }), children && jsx("div", { className: "drawer__wrapper", children: children }), after && jsx("div", { className: "drawer__after", children: after })] }));
+        open: isOpenModal, overlayClassName: "drawer__overlay", size: size || 600, onClose: closeModal, children: [before && jsx("div", { className: "drawer__before", children: before }), children && jsx("div", { className: "drawer__wrapper", children: children }), after && jsx("div", { className: "drawer__after", children: after })] }));
 }
 
 export { Drawer };

package/dist/components/Dropdown.js

@@ -1,8 +1,9 @@
-export { D as Dropdown, a as DropdownItem, d as dropdownItemConfig } from '../DropdownItem-B8IMNQww.js';
+export { D as Dropdown, a as DropdownItem, d as dropdownItemAppearance, b as dropdownItemConfig } from '../DropdownItem-BuMJdUAk.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
-import '../hooks/useDeviceTargetClass.js';
+import '../hooks/useDeviceTargetClassGenerator.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
@@ -12,7 +13,6 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Divider-DHIuQUsH.js';
-import '../Link-CeQuavin.js';
-import '../tslib.es6-5FtW-kfi.js';
-import '../Text-C4Bg2Mv6.js';
+import '../Divider-DBvDCUqP.js';
+import '../Link-_A9ZfNln.js';
+import '../Text-JayJa3hj.js';