@itcase/ui 1.2.2 → 1.2.4

package/dist/{Input-C7gBdx1m.js → Input-BSpFMsrf.js}

@@ -17,7 +17,7 @@ var inputConfig = {
     },
 };
 var Input = React.forwardRef(function Input(props, ref) {
-    var id = props.id, isDisabled = props.isDisabled, appearance = props.appearance, className = props.className, dataTestId = props.dataTestId, index = props.index, name = props.name, placeholder = props.placeholder, state = props.state, type = props.type, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
+    var id = props.id, isDisabled = props.isDisabled, appearance = props.appearance, autocomplete = props.autocomplete, className = props.className, dataTestId = props.dataTestId, index = props.index, name = props.name, placeholder = props.placeholder, state = props.state, type = props.type, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
     var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
         prefix: 'fill_',
         propsKey: 'fill',
@@ -85,9 +85,7 @@ var Input = React.forwardRef(function Input(props, ref) {
     // prettier-ignore
     var appearanceConfig = (appearance && inputConfig.appearance && inputConfig.appearance[appearance]);
     var stateConfig = state && inputConfig.state && inputConfig.state[state];
-    return (jsxRuntime.jsx("input", { "data-test-id": dataTestId || (name ? "".concat(name, "Input") : 'input'), disabled: isDisabled, id: String(id), 
-        // @ts-ignore
-        index: index, placeholder: placeholder, ref: ref, type: type, value: value, className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, !isDisabled ? fillClass : fillDisabledClass, shapeClass ||
+    return (jsxRuntime.jsx("input", { className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, !isDisabled ? fillClass : fillDisabledClass, shapeClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
                 "input_shape_".concat(appearanceConfig.shape).replace(/([A-Z])/g, '-$1').toLowerCase()), textSizeClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textSize) &&
@@ -127,7 +125,9 @@ var Input = React.forwardRef(function Input(props, ref) {
                     "text-color_".concat(stateConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase())
             : textColorDisabledClass ||
                 ((stateConfig === null || stateConfig === void 0 ? void 0 : stateConfig.textColor) &&
-                    "text-color_".concat(stateConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase())), onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
+                    "text-color_".concat(stateConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase())), ref: ref, autocomplete: autocomplete, "data-test-id": dataTestId || (name ? "".concat(name, "Input") : 'input'), disabled: isDisabled, id: String(id), 
+        // @ts-ignore
+        index: index, placeholder: placeholder, type: type, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
 });
 Input.defaultProps = {
     size: 'm',

package/dist/{Input-BQ6Plt1n.js → Input-UkM-ag48.js}

@@ -15,7 +15,7 @@ var inputConfig = {
     },
 };
 var Input = React.forwardRef(function Input(props, ref) {
-    var id = props.id, isDisabled = props.isDisabled, appearance = props.appearance, className = props.className, dataTestId = props.dataTestId, index = props.index, name = props.name, placeholder = props.placeholder, state = props.state, type = props.type, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
+    var id = props.id, isDisabled = props.isDisabled, appearance = props.appearance, autocomplete = props.autocomplete, className = props.className, dataTestId = props.dataTestId, index = props.index, name = props.name, placeholder = props.placeholder, state = props.state, type = props.type, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
     var fillClass = useDeviceTargetClass(props, {
         prefix: 'fill_',
         propsKey: 'fill',
@@ -83,9 +83,7 @@ var Input = React.forwardRef(function Input(props, ref) {
     // prettier-ignore
     var appearanceConfig = (appearance && inputConfig.appearance && inputConfig.appearance[appearance]);
     var stateConfig = state && inputConfig.state && inputConfig.state[state];
-    return (jsx("input", { "data-test-id": dataTestId || (name ? "".concat(name, "Input") : 'input'), disabled: isDisabled, id: String(id), 
-        // @ts-ignore
-        index: index, placeholder: placeholder, ref: ref, type: type, value: value, className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, !isDisabled ? fillClass : fillDisabledClass, shapeClass ||
+    return (jsx("input", { className: clsx(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, !isDisabled ? fillClass : fillDisabledClass, shapeClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
                 "input_shape_".concat(appearanceConfig.shape).replace(/([A-Z])/g, '-$1').toLowerCase()), textSizeClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textSize) &&
@@ -125,7 +123,9 @@ var Input = React.forwardRef(function Input(props, ref) {
                     "text-color_".concat(stateConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase())
             : textColorDisabledClass ||
                 ((stateConfig === null || stateConfig === void 0 ? void 0 : stateConfig.textColor) &&
-                    "text-color_".concat(stateConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase())), onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
+                    "text-color_".concat(stateConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase())), ref: ref, autocomplete: autocomplete, "data-test-id": dataTestId || (name ? "".concat(name, "Input") : 'input'), disabled: isDisabled, id: String(id), 
+        // @ts-ignore
+        index: index, placeholder: placeholder, type: type, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
 });
 Input.defaultProps = {
     size: 'm',

package/dist/cjs/components/Choice.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var tslib_es6 = require('../../tslib.es6-CKiUdo7p.js');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
@@ -19,7 +20,6 @@ require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../../Link-DQxoFKhI.js');
-require('../../tslib.es6-CKiUdo7p.js');
 require('../../Tooltip-DkTKx9n-.js');
 require('../../Title-zwP6c2U2.js');
 
@@ -30,7 +30,7 @@ var choiceConfig = {
     },
 };
 var Choice = React.forwardRef(function Choice(props, ref) {
-    var _a = props.isCheckbox, isCheckbox = _a === void 0 ? false : _a, _b = props.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, _d = props.active, active = _d === void 0 ? { value: undefined } : _d, activeIcon = props.activeIcon, activeIconItemFill = props.activeIconItemFill, after = props.after, appearance = props.appearance, before = props.before, className = props.className, icon = props.icon, iconFillDisabled = props.iconFillDisabled, iconItemFill = props.iconItemFill, iconSize = props.iconSize, labelTextActiveColor = props.labelTextActiveColor, labelTextActiveColorDisabled = props.labelTextActiveColorDisabled, labelTextColor = props.labelTextColor, labelTextColorDisabled = props.labelTextColorDisabled, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, name = props.name, _e = props.options, options = _e === void 0 ? [] : _e, set = props.set, setActiveSegment = props.setActiveSegment, _f = props.size, size = _f === void 0 ? 'normal' : _f, type = props.type;
+    var gap = props.gap, _a = props.isCheckbox, isCheckbox = _a === void 0 ? false : _a, _b = props.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, _d = props.active, active = _d === void 0 ? { value: undefined } : _d, activeIcon = props.activeIcon, activeIconItemFill = props.activeIconItemFill, after = props.after, appearance = props.appearance, before = props.before, className = props.className, icon = props.icon, iconFillDisabled = props.iconFillDisabled, iconItemFill = props.iconItemFill, iconSize = props.iconSize, labelTextActiveColor = props.labelTextActiveColor, labelTextActiveColorDisabled = props.labelTextActiveColorDisabled, labelTextColor = props.labelTextColor, labelTextColorDisabled = props.labelTextColorDisabled, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, name = props.name, _e = props.options, options = _e === void 0 ? [] : _e, set = props.set, setActiveSegment = props.setActiveSegment, _f = props.size, size = _f === void 0 ? 'normal' : _f, type = props.type;
     var controlRef = React.useRef(null);
     var optionsRefs = React.useMemo(function () { return new Map(options.map(function (item) { return [item.value, React.createRef()]; })); }, [options]);
     var onChange = React.useCallback(function (event, item) {
@@ -75,22 +75,22 @@ var Choice = React.forwardRef(function Choice(props, ref) {
     });
     // prettier-ignore
     var appearanceConfig = (appearance && choiceConfig.appearance && choiceConfig.appearance[appearance]);
-    return (jsxRuntime.jsx("div", { ref: controlRef, className: clsx(className, 'choice', shapeClass ||
+    return (jsxRuntime.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()), !isDisabled
-            ? fillClass ||
-                ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
-                    "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase())
-            : fillDisabledClass, borderColorClass ||
+                "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)), children: isLoading ? (jsxRuntime.jsx(Loader.Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent", set: "simple" })) : (jsxRuntime.jsx("div", { className: "choice__wrapper", children: options.map(function (item) { return (jsxRuntime.jsxs("div", { ref: optionsRefs.get(item.value), className: clsx('choice__item', !isDisabled &&
+                    .toLowerCase()), borderWidthClass, borderTypeClass, set && "choice_set_".concat(set), size && "choice_size_".concat(size), type && "choice_type_".concat(type)), ref: controlRef, children: isLoading ? (jsxRuntime.jsx(Loader.Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent", set: "simple" })) : (jsxRuntime.jsx("div", { className: "choice__wrapper", style: tslib_es6.__assign({}, (gap && { gap: gap })), children: options.map(function (item) { return (jsxRuntime.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_active_".concat(appearanceConfig.fillHover)
+                            "fill_hover_".concat(appearanceConfig.fillHover)
                                 .replace(/([A-Z])/g, '-$1')
-                                .toLowerCase())), item.value !== active.value && isDisabled && 'choice__item_state_disabled', item.value === active.value
+                                .toLowerCase())), item.value !== (active === null || active === void 0 ? void 0 : active.value) && isDisabled && 'choice__item_state_disabled', item.value === (active === null || active === void 0 ? void 0 : active.value)
                     ? !isDisabled
                         ? fillActiveClass ||
                             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillActive) &&
@@ -100,13 +100,13 @@ var Choice = React.forwardRef(function Choice(props, ref) {
                         : fillActiveDisabledClass
                     : !isDisabled
                         ? fillClass
-                        : fillDisabledClass, item.value === active.value && isDisabled && 'choice__item_active_state_disabled', item.value === active.value && 'choice__item_active'), children: [jsxRuntime.jsx("input", { checked: item.value === active.value, className: "choice__item-radio", disabled: isDisabled, id: "".concat(name, "-").concat(item.value), name: name, type: isCheckbox ? 'checkbox' : 'radio', value: item.value, onChange: function (event) { return onChange(event, item); } }), jsxRuntime.jsxs("label", { htmlFor: "".concat(name, "-").concat(item.value), className: clsx('choice__item-label', isDisabled && 'choice__item-label_state_disabled'), children: [before, item.label && (jsxRuntime.jsx(Text.Text, { size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textWeight: labelTextWeight, textColor: item.value === active.value
+                        : fillDisabledClass, item.value === (active === null || active === void 0 ? void 0 : active.value) && isDisabled && 'choice__item_active_state_disabled', item.value === (active === null || active === void 0 ? void 0 : active.value) && 'choice__item_active'), ref: optionsRefs.get(item.value), children: [jsxRuntime.jsx("input", { className: "choice__item-radio", name: name, checked: item.value === (active === null || active === void 0 ? void 0 : active.value), disabled: isDisabled, id: "".concat(name, "-").concat(item.value), type: isCheckbox ? 'checkbox' : 'radio', value: item.value, onChange: function (event) { return onChange(event, item); } }), jsxRuntime.jsxs("label", { className: clsx('choice__item-label', isDisabled && 'choice__item-label_state_disabled'), htmlFor: "".concat(name, "-").concat(item.value), children: [before, item.label && (jsxRuntime.jsx(Text.Text, { size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textWeight: labelTextWeight, textColor: item.value === (active === null || active === void 0 ? void 0 : active.value)
                                     ? !isDisabled
                                         ? labelTextActiveColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextActiveColor)
                                         : labelTextActiveColorDisabled
                                     : !isDisabled
                                         ? labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor)
-                                        : labelTextColorDisabled, children: item.label })), (icon || activeIcon) && (jsxRuntime.jsx(Icon.Icon, { SvgImage: item.value === active.value ? activeIcon : icon, className: "choice__item-icon", iconFillDisabled: isDisabled ? iconFillDisabled : undefined, iconSize: iconSize, iconFill: item.value === active.value
+                                        : labelTextColorDisabled, children: item.label })), (icon || activeIcon) && (jsxRuntime.jsx(Icon.Icon, { className: "choice__item-icon", iconFillDisabled: isDisabled ? iconFillDisabled : undefined, iconSize: iconSize, SvgImage: item.value === (active === null || active === void 0 ? void 0 : active.value) ? activeIcon : icon, iconFill: item.value === (active === null || active === void 0 ? void 0 : active.value)
                                     ? activeIconItemFill || item.activeIconItemFill
                                     : iconItemFill || item.iconItemFill })), after] })] }, item.value)); }) })) }));
 });

package/dist/cjs/components/DadataHintField.js

@@ -5,7 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var reactDadata = require('react-dadata');
-var Input = require('../../Input-C7gBdx1m.js');
+var Input = require('../../Input-BSpFMsrf.js');
 require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('lodash/camelCase');

package/dist/cjs/components/DatePicker.js

@@ -6,9 +6,10 @@ var React = require('react');
 var clsx = require('clsx');
 var DatePicker = require('react-datepicker');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useStyles = require('../hooks/useStyles.js');
 var Button = require('../../Button-D4y0v6YL.js');
 var Icon = require('../../Icon-Cq4hPF2D.js');
-var Input = require('../../Input-C7gBdx1m.js');
+var Input = require('../../Input-BSpFMsrf.js');
 var Label = require('../../Label-CpSzGRtr.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 require('lodash/castArray');
@@ -17,7 +18,6 @@ require('../context/UIContext.js');
 require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
@@ -1071,9 +1071,9 @@ const ru = {
 };
 
 function DatePickerInput(props) {
-    var className = props.className, value = props.value, inputProps = props.inputProps, datePickerProps = props.datePickerProps, onChange = props.onChange, endValue = props.endValue, labelTextSize = props.labelTextSize, clearLabelTextColorHover = props.clearLabelTextColorHover, clearIcon = props.clearIcon, clearIconFill = props.clearIconFill, clearIconFillHover = props.clearIconFillHover, clearIconItemFillHover = props.clearIconItemFillHover, clearIconFillSize = props.clearIconFillSize, clearIconItemFill = props.clearIconItemFill, clearIconShape = props.clearIconShape, clearIconSize = props.clearIconSize, clearIconSrc = props.clearIconSrc, clearLabel = props.clearLabel, clearLabelTextColor = props.clearLabelTextColor, clearLabelTextSize = props.clearLabelTextSize;
+    var 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, datePickerProps = props.datePickerProps, endValue = props.endValue, inputProps = props.inputProps, labelTextSize = props.labelTextSize, value = props.value, onChange = props.onChange;
     var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-        prefix: 'width_',
+        prefix: 'datepicker_width_',
         propsKey: 'width',
     });
     var datepickerRef = React.useRef(null);
@@ -1107,7 +1107,7 @@ function DatePickerInput(props) {
         setEndDate(newEndDate);
     }, [onChange]);
     var renderDayContents = React.useCallback(function (day, date) {
-        return (jsxRuntime.jsx(Button.Button, { className: "react-datepicker__day-button", label: date.getDate().toString(), labelTextColor: datePickerProps.dayTextColor, labelTextSize: datePickerProps.dayTextSize, shape: datePickerProps.dayTextShape, size: datePickerProps.daySize }));
+        return (jsxRuntime.jsx(Button.Button, { className: "react-datepicker__day-button", labelTextColor: datePickerProps.dayTextColor, labelTextSize: datePickerProps.dayTextSize, label: date.getDate().toString(), shape: datePickerProps.dayTextShape, size: datePickerProps.daySize }));
     }, [
         datePickerProps.daySize,
         datePickerProps.dayTextColor,
@@ -1115,7 +1115,7 @@ function DatePickerInput(props) {
         datePickerProps.dayTextSize,
     ]);
     var renderCustomHeader = React.useCallback(function (_a) {
-        var monthDate = _a.monthDate, decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth;
+        var decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, monthDate = _a.monthDate;
         return (jsxRuntime.jsxs("div", { className: "react-datepicker__header--div", children: [datePickerProps.iconLeft && (jsxRuntime.jsx(Icon.Icon, { className: "react-datepicker__icon", fill: datePickerProps.iconFill, fillHover: datePickerProps.iconFillHover, fillSize: datePickerProps.iconFillSize, iconFill: datePickerProps.iconItemFill, shape: datePickerProps.iconShape, size: datePickerProps.iconSize, SvgImage: datePickerProps.iconLeft, onClick: decreaseMonth })), jsxRuntime.jsxs("div", { className: "react-datepicker__data", children: [jsxRuntime.jsx(Text.Text, { className: "react-datepicker__month", size: datePickerProps.monthTextSize, textColor: datePickerProps.monthTextColor, textWeight: datePickerProps.monthTextWeight, children: monthDate.toLocaleString('ru-RU', { month: 'long' }) }), jsxRuntime.jsx(Text.Text, { className: "react-datepicker__year", size: datePickerProps.yearTextSize, textColor: datePickerProps.yearTextColor, textWeight: datePickerProps.yearTextWeight, children: monthDate.toLocaleString('ru-RU', { year: 'numeric' }) })] }), datePickerProps.iconRight && (jsxRuntime.jsx(Icon.Icon, { className: "react-datepicker__icon", fill: datePickerProps.iconFill, fillHover: datePickerProps.iconFillHover, fillSize: datePickerProps.iconFillSize, iconFill: datePickerProps.iconItemFill, shape: datePickerProps.iconShape, size: datePickerProps.iconSize, SvgImage: datePickerProps.iconRight, onClick: increaseMonth }))] }));
     }, [
         datePickerProps.iconFill,
@@ -1139,12 +1139,14 @@ function DatePickerInput(props) {
     React.useEffect(function () {
         setEndDate(end);
     }, [end]);
-    return (jsxRuntime.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), children: jsxRuntime.jsx(DatePicker, tslib_es6.__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: jsxRuntime.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, 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 }), onChange: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectsRange) ? handleChange : onChange }, datePickerProps, { 
+    // @ts-expect-error
+    var datePickerStyles = useStyles.useStyles(props).styles;
+    return (jsxRuntime.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), style: datePickerStyles, children: jsxRuntime.jsx(DatePicker, tslib_es6.__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: jsxRuntime.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, 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 isClearable = props.isClearable, value = props.value, inputProps = props.inputProps, inputIcon = props.inputIcon;
+    var isClearable = props.isClearable, inputIcon = props.inputIcon, inputProps = props.inputProps, value = props.value;
     var multipleValue = React.useMemo(function () {
         if (value) {
             var twoDates = value.split(' - ');
@@ -1152,22 +1154,22 @@ var DatePickerCustomInput = React.forwardRef(function (props, ref) {
         }
         return '';
     }, [value]);
-    return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(Input.Input, tslib_es6.__assign({}, props, inputProps, { ref: ref, value: multipleValue })), inputIcon && jsxRuntime.jsx(DatePickerInputIcon, tslib_es6.__assign({}, props)), isClearable && jsxRuntime.jsx(DatePickerClearButton, tslib_es6.__assign({}, props))] }));
+    return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(Input.Input, tslib_es6.__assign({}, props, inputProps, { ref: ref, autocomplete: "off", value: multipleValue })), inputIcon && jsxRuntime.jsx(DatePickerInputIcon, tslib_es6.__assign({}, props)), isClearable && jsxRuntime.jsx(DatePickerClearButton, tslib_es6.__assign({}, props))] }));
 });
 DatePickerCustomInput.displayName = 'DatePickerCustomInput';
 function DatePickerClearButton(props) {
-    var datepickerRef = props.datepickerRef, clearLabel = props.clearLabel, clearLabelTextSize = props.clearLabelTextSize, clearLabelTextColor = props.clearLabelTextColor, clearIconFill = props.clearIconFill, clearIconFillHover = props.clearIconFillHover, clearLabelTextColorHover = props.clearLabelTextColorHover, clearIconItemFillHover = props.clearIconItemFillHover, clearIconFillSize = props.clearIconFillSize, clearIconItemFill = props.clearIconItemFill, clearIconShape = props.clearIconShape, clearIconSize = props.clearIconSize, clearIcon = props.clearIcon, clearIconSrc = props.clearIconSrc;
+    var 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, datepickerRef = props.datepickerRef;
     var onClick = React.useCallback(function (event) {
         var _a, _b;
         (_a = datepickerRef === null || datepickerRef === void 0 ? void 0 : datepickerRef.current) === null || _a === void 0 ? void 0 : _a.onClearClick(event);
         (_b = datepickerRef === null || datepickerRef === void 0 ? void 0 : datepickerRef.current) === null || _b === void 0 ? void 0 : _b.handleFocus(event);
     }, []);
-    return (jsxRuntime.jsxs(React.Fragment, { children: [clearLabel && (jsxRuntime.jsx(Label.Label, { className: clsx('react-datepicker__clear-label', 'cursor_type_pointer'), label: clearLabel, labelTextColor: clearLabelTextColor, labelTextColorHover: clearLabelTextColorHover, labelTextSize: clearLabelTextSize, onClick: onClick })), (clearIcon || clearIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('react-datepicker__clear-icon', 'cursor_type_pointer'), fill: clearIconFill, fillHover: clearIconFillHover, fillSize: clearIconFillSize, iconFill: clearIconItemFill, iconFillHover: clearIconItemFillHover, imageSrc: clearIconSrc, shape: clearIconShape, size: clearIconSize, SvgImage: clearIcon, onClick: onClick }))] }));
+    return (jsxRuntime.jsxs(React.Fragment, { children: [clearLabel && (jsxRuntime.jsx(Label.Label, { className: clsx('react-datepicker__clear-label', 'cursor_type_pointer'), labelTextColor: clearLabelTextColor, labelTextSize: clearLabelTextSize, label: clearLabel, labelTextColorHover: clearLabelTextColorHover, onClick: onClick })), (clearIcon || clearIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('react-datepicker__clear-icon', 'cursor_type_pointer'), fill: clearIconFill, fillHover: clearIconFillHover, fillSize: clearIconFillSize, iconFill: clearIconItemFill, iconFillHover: clearIconItemFillHover, imageSrc: clearIconSrc, shape: clearIconShape, size: clearIconSize, SvgImage: clearIcon, onClick: onClick }))] }));
 }
 DatePickerClearButton.displayName = 'DatePickerClearButton';
 function DatePickerInputIcon(props) {
-    var inputIconFill = props.inputIconFill, inputIconFillHover = props.inputIconFillHover, inputIconFillSize = props.inputIconFillSize, inputIconShape = props.inputIconShape, inputIconSize = props.inputIconSize, inputIcon = props.inputIcon, inputIconSrc = props.inputIconSrc, inputIconItemFill = props.inputIconItemFill, onClick = props.onClick;
-    return (jsxRuntime.jsx(Icon.Icon, { className: clsx('react-datepicker__input-icon', 'cursor_type_pointer'), fill: inputIconFill, fillHover: inputIconFillHover, fillSize: inputIconFillSize, iconFill: inputIconItemFill, imageSrc: inputIconSrc, shape: inputIconShape, size: inputIconSize, onClick: function () { return onClick && onClick(); }, SvgImage: inputIcon }));
+    var inputIcon = props.inputIcon, inputIconFill = props.inputIconFill, inputIconFillHover = props.inputIconFillHover, inputIconFillSize = props.inputIconFillSize, inputIconItemFill = props.inputIconItemFill, inputIconShape = props.inputIconShape, inputIconSize = props.inputIconSize, inputIconSrc = props.inputIconSrc, onClick = props.onClick;
+    return (jsxRuntime.jsx(Icon.Icon, { className: clsx('react-datepicker__input-icon', 'cursor_type_pointer'), fill: inputIconFill, fillHover: inputIconFillHover, fillSize: inputIconFillSize, iconFill: inputIconItemFill, imageSrc: inputIconSrc, shape: inputIconShape, size: inputIconSize, SvgImage: inputIcon, onClick: function () { return onClick && onClick(); } }));
 }
 DatePickerInputIcon.displayName = 'DatePickerInputIcon';
 

package/dist/cjs/components/Input.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Input = require('../../Input-C7gBdx1m.js');
+var Input = require('../../Input-BSpFMsrf.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');

package/dist/components/Choice.js

@@ -1,3 +1,4 @@
+import { _ as __assign } from '../tslib.es6-S-VPg1Cw.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useRef, useMemo, createRef, useCallback } from 'react';
 import clsx from 'clsx';
@@ -17,7 +18,6 @@ import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import '../Link-Bqu5amIb.js';
-import '../tslib.es6-S-VPg1Cw.js';
 import '../Tooltip-DJufHBiQ.js';
 import '../Title-BfSFPJtJ.js';
 
@@ -28,7 +28,7 @@ var choiceConfig = {
     },
 };
 var Choice = React.forwardRef(function Choice(props, ref) {
-    var _a = props.isCheckbox, isCheckbox = _a === void 0 ? false : _a, _b = props.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, _d = props.active, active = _d === void 0 ? { value: undefined } : _d, activeIcon = props.activeIcon, activeIconItemFill = props.activeIconItemFill, after = props.after, appearance = props.appearance, before = props.before, className = props.className, icon = props.icon, iconFillDisabled = props.iconFillDisabled, iconItemFill = props.iconItemFill, iconSize = props.iconSize, labelTextActiveColor = props.labelTextActiveColor, labelTextActiveColorDisabled = props.labelTextActiveColorDisabled, labelTextColor = props.labelTextColor, labelTextColorDisabled = props.labelTextColorDisabled, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, name = props.name, _e = props.options, options = _e === void 0 ? [] : _e, set = props.set, setActiveSegment = props.setActiveSegment, _f = props.size, size = _f === void 0 ? 'normal' : _f, type = props.type;
+    var gap = props.gap, _a = props.isCheckbox, isCheckbox = _a === void 0 ? false : _a, _b = props.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, _d = props.active, active = _d === void 0 ? { value: undefined } : _d, activeIcon = props.activeIcon, activeIconItemFill = props.activeIconItemFill, after = props.after, appearance = props.appearance, before = props.before, className = props.className, icon = props.icon, iconFillDisabled = props.iconFillDisabled, iconItemFill = props.iconItemFill, iconSize = props.iconSize, labelTextActiveColor = props.labelTextActiveColor, labelTextActiveColorDisabled = props.labelTextActiveColorDisabled, labelTextColor = props.labelTextColor, labelTextColorDisabled = props.labelTextColorDisabled, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, name = props.name, _e = props.options, options = _e === void 0 ? [] : _e, set = props.set, setActiveSegment = props.setActiveSegment, _f = props.size, size = _f === void 0 ? 'normal' : _f, type = props.type;
     var controlRef = useRef(null);
     var optionsRefs = useMemo(function () { return new Map(options.map(function (item) { return [item.value, createRef()]; })); }, [options]);
     var onChange = useCallback(function (event, item) {
@@ -73,22 +73,22 @@ var Choice = React.forwardRef(function Choice(props, ref) {
     });
     // prettier-ignore
     var appearanceConfig = (appearance && choiceConfig.appearance && choiceConfig.appearance[appearance]);
-    return (jsx("div", { ref: controlRef, className: clsx(className, 'choice', shapeClass ||
+    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()), !isDisabled
-            ? fillClass ||
-                ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
-                    "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase())
-            : fillDisabledClass, borderColorClass ||
+                "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)), children: isLoading ? (jsx(Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent", set: "simple" })) : (jsx("div", { className: "choice__wrapper", children: options.map(function (item) { return (jsxs("div", { ref: optionsRefs.get(item.value), className: clsx('choice__item', !isDisabled &&
+                    .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: "choice__wrapper", style: __assign({}, (gap && { gap: gap })), children: options.map(function (item) { 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_active_".concat(appearanceConfig.fillHover)
+                            "fill_hover_".concat(appearanceConfig.fillHover)
                                 .replace(/([A-Z])/g, '-$1')
-                                .toLowerCase())), item.value !== active.value && isDisabled && 'choice__item_state_disabled', item.value === active.value
+                                .toLowerCase())), item.value !== (active === null || active === void 0 ? void 0 : active.value) && isDisabled && 'choice__item_state_disabled', item.value === (active === null || active === void 0 ? void 0 : active.value)
                     ? !isDisabled
                         ? fillActiveClass ||
                             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillActive) &&
@@ -98,13 +98,13 @@ var Choice = React.forwardRef(function Choice(props, ref) {
                         : fillActiveDisabledClass
                     : !isDisabled
                         ? fillClass
-                        : fillDisabledClass, item.value === active.value && isDisabled && 'choice__item_active_state_disabled', item.value === active.value && 'choice__item_active'), children: [jsx("input", { checked: item.value === active.value, className: "choice__item-radio", disabled: isDisabled, id: "".concat(name, "-").concat(item.value), name: name, type: isCheckbox ? 'checkbox' : 'radio', value: item.value, onChange: function (event) { return onChange(event, item); } }), jsxs("label", { htmlFor: "".concat(name, "-").concat(item.value), className: clsx('choice__item-label', isDisabled && 'choice__item-label_state_disabled'), children: [before, item.label && (jsx(Text, { size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textWeight: labelTextWeight, textColor: item.value === active.value
+                        : fillDisabledClass, item.value === (active === null || active === void 0 ? void 0 : active.value) && isDisabled && 'choice__item_active_state_disabled', item.value === (active === null || active === void 0 ? void 0 : active.value) && 'choice__item_active'), ref: optionsRefs.get(item.value), children: [jsx("input", { className: "choice__item-radio", name: name, checked: item.value === (active === null || active === void 0 ? void 0 : active.value), 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: item.value === (active === null || active === void 0 ? void 0 : active.value)
                                     ? !isDisabled
                                         ? labelTextActiveColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextActiveColor)
                                         : labelTextActiveColorDisabled
                                     : !isDisabled
                                         ? labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor)
-                                        : labelTextColorDisabled, children: item.label })), (icon || activeIcon) && (jsx(Icon, { SvgImage: item.value === active.value ? activeIcon : icon, className: "choice__item-icon", iconFillDisabled: isDisabled ? iconFillDisabled : undefined, iconSize: iconSize, iconFill: item.value === active.value
+                                        : labelTextColorDisabled, children: item.label })), (icon || activeIcon) && (jsx(Icon, { className: "choice__item-icon", iconFillDisabled: isDisabled ? iconFillDisabled : undefined, iconSize: iconSize, SvgImage: item.value === (active === null || active === void 0 ? void 0 : active.value) ? activeIcon : icon, iconFill: item.value === (active === null || active === void 0 ? void 0 : active.value)
                                     ? activeIconItemFill || item.activeIconItemFill
                                     : iconItemFill || item.iconItemFill })), after] })] }, item.value)); }) })) }));
 });

package/dist/components/DadataHintField.js

@@ -3,7 +3,7 @@ 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-BQ6Plt1n.js';
+import { I as Input } from '../Input-UkM-ag48.js';
 import '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';

package/dist/components/DatePicker.js

@@ -4,9 +4,10 @@ import React, { useMemo, useCallback, useRef, useState, useEffect } from 'react'
 import clsx from 'clsx';
 import DatePicker from 'react-datepicker';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useStyles } from '../hooks/useStyles.js';
 import { B as Button } from '../Button-BJWuO5uR.js';
 import { I as Icon } from '../Icon-fTLfvlsK.js';
-import { I as Input } from '../Input-BQ6Plt1n.js';
+import { I as Input } from '../Input-UkM-ag48.js';
 import { L as Label } from '../Label-BA_CnRBq.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'lodash/castArray';
@@ -15,7 +16,6 @@ import '../context/UIContext.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
@@ -1069,9 +1069,9 @@ const ru = {
 };
 
 function DatePickerInput(props) {
-    var className = props.className, value = props.value, inputProps = props.inputProps, datePickerProps = props.datePickerProps, onChange = props.onChange, endValue = props.endValue, labelTextSize = props.labelTextSize, clearLabelTextColorHover = props.clearLabelTextColorHover, clearIcon = props.clearIcon, clearIconFill = props.clearIconFill, clearIconFillHover = props.clearIconFillHover, clearIconItemFillHover = props.clearIconItemFillHover, clearIconFillSize = props.clearIconFillSize, clearIconItemFill = props.clearIconItemFill, clearIconShape = props.clearIconShape, clearIconSize = props.clearIconSize, clearIconSrc = props.clearIconSrc, clearLabel = props.clearLabel, clearLabelTextColor = props.clearLabelTextColor, clearLabelTextSize = props.clearLabelTextSize;
+    var 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, datePickerProps = props.datePickerProps, endValue = props.endValue, inputProps = props.inputProps, labelTextSize = props.labelTextSize, value = props.value, onChange = props.onChange;
     var widthClass = useDeviceTargetClass(props, {
-        prefix: 'width_',
+        prefix: 'datepicker_width_',
         propsKey: 'width',
     });
     var datepickerRef = useRef(null);
@@ -1105,7 +1105,7 @@ function DatePickerInput(props) {
         setEndDate(newEndDate);
     }, [onChange]);
     var renderDayContents = useCallback(function (day, date) {
-        return (jsx(Button, { className: "react-datepicker__day-button", label: date.getDate().toString(), labelTextColor: datePickerProps.dayTextColor, labelTextSize: datePickerProps.dayTextSize, shape: datePickerProps.dayTextShape, size: datePickerProps.daySize }));
+        return (jsx(Button, { className: "react-datepicker__day-button", labelTextColor: datePickerProps.dayTextColor, labelTextSize: datePickerProps.dayTextSize, label: date.getDate().toString(), shape: datePickerProps.dayTextShape, size: datePickerProps.daySize }));
     }, [
         datePickerProps.daySize,
         datePickerProps.dayTextColor,
@@ -1113,7 +1113,7 @@ function DatePickerInput(props) {
         datePickerProps.dayTextSize,
     ]);
     var renderCustomHeader = useCallback(function (_a) {
-        var monthDate = _a.monthDate, decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth;
+        var decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, monthDate = _a.monthDate;
         return (jsxs("div", { className: "react-datepicker__header--div", children: [datePickerProps.iconLeft && (jsx(Icon, { className: "react-datepicker__icon", fill: datePickerProps.iconFill, fillHover: datePickerProps.iconFillHover, fillSize: datePickerProps.iconFillSize, iconFill: datePickerProps.iconItemFill, shape: datePickerProps.iconShape, size: datePickerProps.iconSize, SvgImage: datePickerProps.iconLeft, onClick: decreaseMonth })), jsxs("div", { className: "react-datepicker__data", children: [jsx(Text, { className: "react-datepicker__month", size: datePickerProps.monthTextSize, textColor: datePickerProps.monthTextColor, textWeight: datePickerProps.monthTextWeight, children: monthDate.toLocaleString('ru-RU', { month: 'long' }) }), jsx(Text, { className: "react-datepicker__year", size: datePickerProps.yearTextSize, textColor: datePickerProps.yearTextColor, textWeight: datePickerProps.yearTextWeight, children: monthDate.toLocaleString('ru-RU', { year: 'numeric' }) })] }), datePickerProps.iconRight && (jsx(Icon, { className: "react-datepicker__icon", fill: datePickerProps.iconFill, fillHover: datePickerProps.iconFillHover, fillSize: datePickerProps.iconFillSize, iconFill: datePickerProps.iconItemFill, shape: datePickerProps.iconShape, size: datePickerProps.iconSize, SvgImage: datePickerProps.iconRight, onClick: increaseMonth }))] }));
     }, [
         datePickerProps.iconFill,
@@ -1137,12 +1137,14 @@ function DatePickerInput(props) {
     useEffect(function () {
         setEndDate(end);
     }, [end]);
-    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), 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, 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 }), onChange: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectsRange) ? handleChange : onChange }, datePickerProps, { 
+    // @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), 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, 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 isClearable = props.isClearable, value = props.value, inputProps = props.inputProps, inputIcon = props.inputIcon;
+    var isClearable = props.isClearable, inputIcon = props.inputIcon, inputProps = props.inputProps, value = props.value;
     var multipleValue = useMemo(function () {
         if (value) {
             var twoDates = value.split(' - ');
@@ -1150,22 +1152,22 @@ var DatePickerCustomInput = React.forwardRef(function (props, ref) {
         }
         return '';
     }, [value]);
-    return (jsxs(React.Fragment, { children: [jsx(Input, __assign({}, props, inputProps, { ref: ref, value: multipleValue })), inputIcon && jsx(DatePickerInputIcon, __assign({}, props)), isClearable && jsx(DatePickerClearButton, __assign({}, props))] }));
+    return (jsxs(React.Fragment, { children: [jsx(Input, __assign({}, props, inputProps, { ref: ref, autocomplete: "off", value: multipleValue })), inputIcon && jsx(DatePickerInputIcon, __assign({}, props)), isClearable && jsx(DatePickerClearButton, __assign({}, props))] }));
 });
 DatePickerCustomInput.displayName = 'DatePickerCustomInput';
 function DatePickerClearButton(props) {
-    var datepickerRef = props.datepickerRef, clearLabel = props.clearLabel, clearLabelTextSize = props.clearLabelTextSize, clearLabelTextColor = props.clearLabelTextColor, clearIconFill = props.clearIconFill, clearIconFillHover = props.clearIconFillHover, clearLabelTextColorHover = props.clearLabelTextColorHover, clearIconItemFillHover = props.clearIconItemFillHover, clearIconFillSize = props.clearIconFillSize, clearIconItemFill = props.clearIconItemFill, clearIconShape = props.clearIconShape, clearIconSize = props.clearIconSize, clearIcon = props.clearIcon, clearIconSrc = props.clearIconSrc;
+    var 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, datepickerRef = props.datepickerRef;
     var onClick = useCallback(function (event) {
         var _a, _b;
         (_a = datepickerRef === null || datepickerRef === void 0 ? void 0 : datepickerRef.current) === null || _a === void 0 ? void 0 : _a.onClearClick(event);
         (_b = datepickerRef === null || datepickerRef === void 0 ? void 0 : datepickerRef.current) === null || _b === void 0 ? void 0 : _b.handleFocus(event);
     }, []);
-    return (jsxs(React.Fragment, { children: [clearLabel && (jsx(Label, { className: clsx('react-datepicker__clear-label', 'cursor_type_pointer'), label: clearLabel, labelTextColor: clearLabelTextColor, labelTextColorHover: clearLabelTextColorHover, labelTextSize: clearLabelTextSize, onClick: onClick })), (clearIcon || clearIconSrc) && (jsx(Icon, { className: clsx('react-datepicker__clear-icon', 'cursor_type_pointer'), fill: clearIconFill, fillHover: clearIconFillHover, fillSize: clearIconFillSize, iconFill: clearIconItemFill, iconFillHover: clearIconItemFillHover, imageSrc: clearIconSrc, shape: clearIconShape, size: clearIconSize, SvgImage: clearIcon, onClick: onClick }))] }));
+    return (jsxs(React.Fragment, { children: [clearLabel && (jsx(Label, { className: clsx('react-datepicker__clear-label', 'cursor_type_pointer'), labelTextColor: clearLabelTextColor, labelTextSize: clearLabelTextSize, label: clearLabel, labelTextColorHover: clearLabelTextColorHover, onClick: onClick })), (clearIcon || clearIconSrc) && (jsx(Icon, { className: clsx('react-datepicker__clear-icon', 'cursor_type_pointer'), fill: clearIconFill, fillHover: clearIconFillHover, fillSize: clearIconFillSize, iconFill: clearIconItemFill, iconFillHover: clearIconItemFillHover, imageSrc: clearIconSrc, shape: clearIconShape, size: clearIconSize, SvgImage: clearIcon, onClick: onClick }))] }));
 }
 DatePickerClearButton.displayName = 'DatePickerClearButton';
 function DatePickerInputIcon(props) {
-    var inputIconFill = props.inputIconFill, inputIconFillHover = props.inputIconFillHover, inputIconFillSize = props.inputIconFillSize, inputIconShape = props.inputIconShape, inputIconSize = props.inputIconSize, inputIcon = props.inputIcon, inputIconSrc = props.inputIconSrc, inputIconItemFill = props.inputIconItemFill, onClick = props.onClick;
-    return (jsx(Icon, { className: clsx('react-datepicker__input-icon', 'cursor_type_pointer'), fill: inputIconFill, fillHover: inputIconFillHover, fillSize: inputIconFillSize, iconFill: inputIconItemFill, imageSrc: inputIconSrc, shape: inputIconShape, size: inputIconSize, onClick: function () { return onClick && onClick(); }, SvgImage: inputIcon }));
+    var inputIcon = props.inputIcon, inputIconFill = props.inputIconFill, inputIconFillHover = props.inputIconFillHover, inputIconFillSize = props.inputIconFillSize, inputIconItemFill = props.inputIconItemFill, inputIconShape = props.inputIconShape, inputIconSize = props.inputIconSize, inputIconSrc = props.inputIconSrc, onClick = props.onClick;
+    return (jsx(Icon, { className: clsx('react-datepicker__input-icon', 'cursor_type_pointer'), fill: inputIconFill, fillHover: inputIconFillHover, fillSize: inputIconFillSize, iconFill: inputIconItemFill, imageSrc: inputIconSrc, shape: inputIconShape, size: inputIconSize, SvgImage: inputIcon, onClick: function () { return onClick && onClick(); } }));
 }
 DatePickerInputIcon.displayName = 'DatePickerInputIcon';
 

package/dist/components/Input.js

@@ -1,4 +1,4 @@
-export { I as Input, i as inputConfig } from '../Input-BQ6Plt1n.js';
+export { I as Input, i as inputConfig } from '../Input-UkM-ag48.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

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

@@ -2,16 +2,16 @@
   min-width: 30px;
   position: relative;
   display: flex;
-  &:hover {
+  /* &:hover {
     background: var(--choice-item-background-hover);
-  }
+  } */
   &:not(:last-child) {
-    border-right: 1px solid var(--choice-border-color);
+    border-right: var(--chioce-item-border-right, 1px solid var(--choice-border-color));
   }
   &_state_disabled {
-    background: var(--choice-item-state-disabled-background, #ECECEC);
+    background: var(--choice-item-state-disabled-background, #ececec);
     &:hover {
-      background: var(--choice-item-state-disabled-background, #ECECEC);
+      background: var(--choice-item-state-disabled-background, #ececec);
     }
   }
   &_active {
@@ -48,6 +48,33 @@
   }
 }
 
+.choice {
+  position: relative;
+  display: flex;
+  align-items: center;
+  &__wrapper {
+    position: relative;
+    display: flex;
+  }
+}
+
+.choice {
+  &_set {
+    &_form {
+      ^^&__item {
+        min-width: auto;
+        border: 1px solid var(--color-surface-border-tertiary);
+        border-radius: 6px;
+        &-label {
+          flex-direction: row-reverse;
+          align-items: center;
+          gap: 4px;
+        }
+      }
+    }
+  }
+}
+
 .choice {
   &_shape {
     &_rounded {
@@ -74,18 +101,7 @@
   }
 }
 
-.choice {
-  position: relative;
-  display: flex;
-  align-items: center;
-  &__wrapper {
-    position: relative;
-    display: flex;
-  }
-}
-
 :root {
-
   --choice-item-background-hover: var(--color-surface-secondary);
 
   --choice-item-background-active: var(--color-surface-active);

package/dist/css/components/Choice/css/__item/choice__item.css

@@ -2,16 +2,16 @@
   min-width: 30px;
   position: relative;
   display: flex;
-  &:hover {
+  /* &:hover {
     background: var(--choice-item-background-hover);
-  }
+  } */
   &:not(:last-child) {
-    border-right: 1px solid var(--choice-border-color);
+    border-right: var(--chioce-item-border-right, 1px solid var(--choice-border-color));
   }
   &_state_disabled {
-    background: var(--choice-item-state-disabled-background, #ECECEC);
+    background: var(--choice-item-state-disabled-background, #ececec);
     &:hover {
-      background: var(--choice-item-state-disabled-background, #ECECEC);
+      background: var(--choice-item-state-disabled-background, #ececec);
     }
   }
   &_active {

package/dist/types/components/Accordion/Accordion.interface.d.ts

@@ -10,11 +10,11 @@ interface iAccordionItemEventData {
 interface iAccordionProps extends iStyleAttributes {
     borderColor?: tBorderColorProps;
     children?: Element | React.ReactNode;
-    className: string;
+    className?: string;
     direction?: tDirectionProps;
     fill?: tFillProps;
     height?: tHeightProps;
-    initial: any;
+    initial?: any;
     items?: {
         id: number | string;
         content?: ReactNode;
@@ -23,7 +23,7 @@ interface iAccordionProps extends iStyleAttributes {
     shape?: tShapeProps;
     style?: CSSProperties;
     width?: tWidthProps;
-    isMultiple: boolean;
+    isMultiple?: boolean;
     onClickItem?: (T: iAccordionItemEventData) => void;
 }
 interface iAccordionItemProps extends iStyleAttributes {

package/dist/types/components/Choice/Choice.interface.d.ts

@@ -19,8 +19,8 @@ interface iChoiceThemeColor {
     labelTextActiveColorDisabled?: tTextColorProps;
     labelTextColor?: tTextColorProps;
     labelTextColorDisabled?: tTextColorProps;
-    labelTextWeight?: tTextWeightProps;
     labelTextSize?: tTextSizeProps;
+    labelTextWeight?: tTextWeightProps;
     shape?: tShapeProps;
 }
 type tChoiceAppearance = {
@@ -31,29 +31,30 @@ interface iChoiceConfig {
     setAppearance: (newComponent: tChoiceAppearance) => void;
 }
 interface iChoiceProps extends iChoiceThemeColor, iStyleAttributes {
-    appearance?: tAppearanceKeysDefault;
     active: {
         value: ReactNode;
     };
     activeIcon?: ReactNode;
     activeIconItemFill?: tItemColorProps;
     after?: ReactNode;
+    appearance?: tAppearanceKeysDefault;
     before?: ReactNode;
     className?: string;
+    gap?: string;
     icon?: ReactNode;
-    isDisabled?: boolean;
-    isCheckbox?: boolean;
-    isLoading?: boolean;
     name?: string;
     options: {
-        value: string;
-        label: ReactNode;
         activeIconItemFill: tItemColorProps;
         iconItemFill: tItemColorProps;
+        label: ReactNode;
+        value: string;
     }[];
-    set?: string;
     size?: sizeOptionPropsType;
     type?: string;
+    isCheckbox?: boolean;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    set?: string;
     setActiveSegment?: (item: any, isChecked?: boolean) => void;
 }
 export type { iChoiceThemeColor, tChoiceAppearance, iChoiceConfig, iChoiceProps };

package/dist/types/components/DatePicker/DatePicker.interface.d.ts

@@ -1,13 +1,10 @@
 import { ReactNode } from 'react';
 import { DatePickerProps } from 'react-datepicker';
-import { tFillHoverProps, tFillProps, iconFillSizePropsType, iconSizePropsType, tItemColorProps, tShapeProps, tSizeProps, tTextColorHoverProps, tTextColorProps, tTextSizeProps, tTextWeightProps } from '../../types';
+import { iconFillSizePropsType, iconSizePropsType, tFillHoverProps, tFillProps, tItemColorProps, tShapeProps, tSizeProps, tTextColorHoverProps, tTextColorProps, tTextSizeProps, tTextWeightProps } from '../../types';
 import { iInputProps } from '../Input/Input.interface';
 interface IDatePickerProps extends DatePickerProps {
-    daySize?: tSizeProps;
-    monthsShown?: boolean;
-    isClearable?: boolean;
-    selectsRange?: boolean;
     customTimeInput?: ReactNode;
+    daySize?: tSizeProps;
     dayTextColor?: tTextColorProps;
     dayTextShape?: tShapeProps;
     dayTextSize?: tTextSizeProps;
@@ -28,13 +25,17 @@ interface IDatePickerProps extends DatePickerProps {
     inputIconShape?: tShapeProps;
     inputIconSize?: iconSizePropsType;
     inputIconSrc?: string;
-    isStartDefaultNull?: boolean;
+    monthsShown?: number;
     monthTextColor?: tTextColorProps;
     monthTextSize?: tTextSizeProps;
     monthTextWeight?: tTextWeightProps;
+    popper?: string;
+    selectsRange?: boolean;
     yearTextColor?: tTextColorProps;
     yearTextSize?: tTextSizeProps;
     yearTextWeight?: tTextWeightProps;
+    isClearable?: boolean;
+    isStartDefaultNull?: boolean;
 }
 export interface IDatePickerInputProps {
     className?: string;
@@ -82,9 +83,9 @@ export interface IDatePickerCustomInput {
     inputIconSize?: iconSizePropsType;
     inputIconSrc?: string;
     inputProps?: iInputProps;
-    isClearable?: boolean;
     labelTextSize?: tTextSizeProps;
     value?: string;
+    isClearable?: boolean;
 }
 export interface IDatePickerInputIcon {
     inputIcon?: any;

package/dist/types/components/Input/Input.interface.d.ts

@@ -35,6 +35,7 @@ interface iInputProps extends iInputThemeColor, iStyleAttributes {
     dataTestId?: number | string;
     id?: number | string;
     appearance?: tAppearanceKeysDefault;
+    autocomplete?: string;
     className?: string;
     index?: number | string;
     name?: string;

package/dist/types/types/componentProps/sizeInterface.d.ts

@@ -1 +1 @@
-export type sizeOptionPropsType = 'compact' | 'normal' | 'regular' | 'any';
+export type sizeOptionPropsType = 'any' | 'compact' | 'l' | 'large' | 'm' | 'normal' | 'regular' | 's' | 'tiny' | 'xl' | 'xs' | 'xxl';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",