@itcase/ui 1.9.36 → 1.9.38

package/dist/{ChipsGroup_es_BOaDqAo8.js → ChipsGroup_es_wecRqt6G.js}

@@ -3,8 +3,8 @@ import clsx from 'clsx';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
 import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
-import { I as Icon, B as Badge } from './Icon_es_Banbw98_.js';
-import { T as Text } from './Text_es_DaYcLe4H.js';
+import { I as Icon, B as Badge } from './Icon_es_DNVHNKFK.js';
+import { T as Text } from './Text_es_B85LGfjW.js';
 
 const chipsAppearanceAccent = {
     accentMutedPrimary: {
@@ -18,7 +18,7 @@ const chipsAppearanceAccent = {
     accentPrimary: {
         fill: 'accentPrimary',
         fillActive: 'accentPrimary',
-        fillActiveHover: 'accentHoverPrimary',
+        fillActiveHover: 'accentActiveHoverPrimary',
         fillHover: 'accentHoverPrimary',
         labelTextActiveColor: 'accentTextPrimary',
         labelTextColor: 'accentTextPrimary',
@@ -48,11 +48,11 @@ const chipsAppearanceDanger = {
 };
 
 const chipsAppearanceDisabled = {
-    disabled: {
+    disabledPrimary: {
         fill: 'surfaceSecondary',
-        fillHover: 'surfaceSecondary',
-        labelTextActiveColor: 'surfaceTextQuaternary',
-        labelTextActiveColorHover: 'surfaceTextQuaternary',
+        fillHover: 'surfaceHoverSecondary',
+        labelTextActiveColor: 'surfaceTextActiveQuaternary',
+        labelTextActiveColorHover: 'surfaceTextActiveHoverQuaternary',
         labelTextColor: 'surfaceTextQuaternary',
         labelTextColorHover: 'surfaceTextQuaternary',
         borderColor: 'disabledBorderPrimary',
@@ -63,7 +63,7 @@ const chipsAppearanceDisabled = {
 
 const chipsAppearanceError = {
     errorMutedPrimary: {
-        fill: 'errorDisabled',
+        fill: 'errorTertiary',
         labelTextColor: 'errorTextQuaternary',
         borderColor: 'errorBorderQuaternary',
         iconAfterFillIcon: 'errorItemQuaternary',
@@ -78,10 +78,27 @@ const chipsAppearanceError = {
     },
 };
 
+const chipsAppearanceExtra = {
+    extraMutedPrimary: {
+        fill: 'extraTertiary',
+        labelTextColor: 'extraTextQuaternary',
+        borderColor: 'extraBorderSecondary',
+        iconAfterFillIcon: 'extraItemQuaternary',
+        iconBeforeFillIcon: 'extraItemQuaternary',
+    },
+    extraPrimary: {
+        fill: 'extraPrimary',
+        labelTextColor: 'extraTextPrimary',
+        borderColor: 'extraBorderSecondary',
+        iconAfterFillIcon: 'extraItemPrimary',
+        iconBeforeFillIcon: 'extraItemPrimary',
+    },
+};
+
 const chipsAppearanceInfo = {
     infoMutedPrimary: {
         fill: 'infoTertiary',
-        labelTextColor: 'infoTextPrimary',
+        labelTextColor: 'infoTextSecondary',
         borderColor: 'infoBorderSecondary',
         iconAfterFillIcon: 'infoItemPrimary',
         iconBeforeFillIcon: 'infoItemPrimary',
@@ -95,40 +112,6 @@ const chipsAppearanceInfo = {
     },
 };
 
-const chipsAppearancePrimary = {
-    primaryMutedPrimary: {
-        fill: 'primaryDisabled',
-        labelTextColor: 'primaryTextSecondary',
-        borderColor: 'primaryBorderSecondary',
-        iconAfterFillIcon: 'primaryItemSecondary',
-        iconBeforeFillIcon: 'primaryItemSecondary',
-    },
-    primaryPrimary: {
-        fill: 'primaryPrimary',
-        labelTextColor: 'primaryTextPrimary',
-        borderColor: 'primaryBorderSecondary',
-        iconAfterFillIcon: 'primaryItemPrimary',
-        iconBeforeFillIcon: 'primaryItemPrimary',
-    },
-};
-
-const chipsAppearanceSecondary = {
-    secondaryMutedPrimary: {
-        fill: 'secondaryDisabled',
-        labelTextColor: 'secondaryTextQuaternary',
-        borderColor: 'secondaryBorderSecondary',
-        iconAfterFillIcon: 'secondaryItemQuaternary',
-        iconBeforeFillIcon: 'secondaryItemQuaternary',
-    },
-    secondaryPrimary: {
-        fill: 'secondaryPrimary',
-        labelTextColor: 'secondaryTextPrimary',
-        borderColor: 'secondaryBorderSecondary',
-        iconAfterFillIcon: 'secondaryItemPrimary',
-        iconBeforeFillIcon: 'secondaryItemPrimary',
-    },
-};
-
 const chipsAppearanceShape = {
     circular: {
         shape: 'circular',
@@ -194,8 +177,25 @@ const chipsAppearanceSize = {
     sizeXXS: {
         size: 'xxs',
         labelTextSize: 'xxs',
-        iconAfterSize: '12',
-        iconBeforeSize: '12',
+        iconAfterSize: '14',
+        iconBeforeSize: '14',
+    },
+};
+
+const chipsAppearanceSpecial = {
+    specialMutedPrimary: {
+        fill: 'specialTertiary',
+        labelTextColor: 'specialTextSecondary',
+        borderColor: 'specialBorderSecondary',
+        iconAfterFillIcon: 'specialItemSecondary',
+        iconBeforeFillIcon: 'specialItemSecondary',
+    },
+    specialPrimary: {
+        fill: 'specialPrimary',
+        labelTextColor: 'specialTextPrimary',
+        borderColor: 'specialBorderSecondary',
+        iconAfterFillIcon: 'specialItemPrimary',
+        iconBeforeFillIcon: 'specialItemPrimary',
     },
 };
 
@@ -247,7 +247,6 @@ const chipsAppearanceSurface = {
         labelTextColor: 'surfaceTextPrimary',
         labelTextColorHover: 'surfaceTextPrimary',
         borderColor: 'surfaceBorderTertiary',
-        activeIconItemFill: 'surfaceItemSecondary',
         badgeAppearance: 'surfacePrimary sizeXS solid',
         iconAfterFillActiveIcon: 'accentItemPrimary',
         iconAfterFillIcon: 'surfaceItemPrimary',
@@ -301,8 +300,8 @@ const chipsAppearance = {
     ...chipsAppearanceError,
     ...chipsAppearanceInfo,
     ...chipsAppearanceDisabled,
-    ...chipsAppearancePrimary,
-    ...chipsAppearanceSecondary,
+    ...chipsAppearanceSpecial,
+    ...chipsAppearanceExtra,
     ...chipsAppearanceSuccess,
     ...chipsAppearanceSurface,
     ...chipsAppearanceWarning,
@@ -319,24 +318,23 @@ function Chips(props) {
     const { appearance, className, dataTestId, dataTour, label = '', isActive, isDisabled, isSkeleton, onClick, onClickIconAfter, onClickIconBefore, children, } = props;
     const appearanceConfig = useAppearanceConfig(appearance, chipsConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    const { alignClass, alignDirectionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelTextActiveColor, labelTextActiveColorHover, labelTextColor, labelTextColorHover, labelTextSize, labelTextWeight, labelTextWrap, borderColorClass, borderTypeClass, badgeAppearance, badgeShape, badgeSize, badgeTextColor, badgeTextSize, badgeValue, cursorClass, iconAfter, iconAfterFill, iconAfterFillActiveIcon, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBefore, iconBeforeFill, iconBeforeFillActiveIcon, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
+    const { alignClass, alignDirectionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelTextActiveColor, labelTextActiveColorHover, labelTextColor, labelTextColorHover, labelTextSize, labelTextWeight, labelTextWrap, borderColorClass, borderTypeClass, badgeAppearance, badgeShape, badgeSize, badgeTextColor, badgeTextSize, badgeValue, cursorClass, iconAfter, iconAfterActive, iconAfterFill, iconAfterFillActiveIcon, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBefore, iconBeforeActive, iconBeforeFill, iconBeforeFillActiveIcon, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
     const { styles: chipsStyles } = useStyles(props);
     return (jsx("div", { className: clsx(className, 'chips', !isActive
             ? fillClass && `fill_${fillClass}`
             : fillActiveClass && `fill_active_${fillActiveClass}`, !isActive
             ? fillHoverClass && `fill_hover_${fillHoverClass}`
-            : fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, sizeClass && `chips_size_${sizeClass}`, alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`, isActive && 'chips_state_active', isDisabled && `chips_state_disabled`, cursorClass && `cursor_${cursorClass}`, onClick && 'cursor_type_pointer', isSkeleton && `chips_skeleton`), "data-testid": dataTestId && `${dataTestId}Chips`, "data-tour": dataTour, style: chipsStyles, onClick: !isDisabled ? onClick : undefined, children: jsxs("div", { className: "chips__inner", children: [(iconBefore || iconBeforeSrc) && (jsx(Icon, { className: "chips__icon_before", size: iconBeforeSize, fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconFillActive: iconBeforeFillActiveIcon, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore, isActive: isActive, onClick: onClickIconBefore })), typeof label === 'string' ? (jsx(Text, { className: "chips__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveColorHover, textColorHover: labelTextColorHover, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: label })) : (jsx("div", { className: "chips__label", children: label })), children, (iconAfter || iconAfterSrc) && (jsx(Icon, { className: "chips__icon_after", size: iconAfterSize, fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconFillActive: iconAfterFillActiveIcon, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter, isActive: isActive, onClick: onClickIconAfter })), badgeValue && (jsx(Badge, { appearance: badgeAppearance, className: "chips__badge", size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue }))] }) }));
+            : fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, sizeClass && `chips_size_${sizeClass}`, alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`, isActive && 'chips_state_active', isDisabled && `chips_state_disabled`, cursorClass && `cursor_${cursorClass}`, onClick && 'cursor_type_pointer', isSkeleton && `chips_skeleton`), "data-testid": dataTestId && `${dataTestId}Chips`, "data-tour": dataTour, style: chipsStyles, onClick: !isDisabled ? onClick : undefined, children: jsxs("div", { className: "chips__inner", children: [(iconBefore || iconBeforeSrc || (iconBeforeActive && isActive)) && (jsx(Icon, { className: "chips__icon_before", size: iconBeforeSize, fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconFillActive: iconBeforeFillActiveIcon, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBeforeActive && isActive ? iconBeforeActive : iconBefore, isActive: isActive, onClick: onClickIconBefore })), typeof label === 'string' ? (jsx(Text, { className: "chips__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveColorHover, textColorHover: labelTextColorHover, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: label })) : (jsx("div", { className: "chips__label", children: label })), children, (iconAfter || iconAfterSrc || (iconAfterActive && isActive)) && (jsx(Icon, { className: "chips__icon_after", size: iconAfterSize, fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconFillActive: iconAfterFillActiveIcon, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfterActive && isActive ? iconAfterActive : iconAfter, isActive: isActive, onClick: onClickIconAfter })), badgeValue && (jsx(Badge, { appearance: badgeAppearance, className: "chips__badge", size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue }))] }) }));
 }
 
 function ChipsGroup(props) {
     const { className, dataTestId, dataTour, chipsList, horizontalScroll, style, onClick, children, } = props;
     const propsGenerator = useDevicePropsGenerator(props);
     const { directionClass, alignClass, alignDirectionClass, fillClass, borderColorClass, borderTypeClass, borderWidthClass, chipsAppearance, widthClass, wrapClass, } = propsGenerator;
-    // @ts-expect-error
     const { styles: groupStyles } = useStyles(props);
     return (jsx("div", { className: clsx(className, 'chips-group', 'group', widthClass && `width_${widthClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, fillClass && `fill_${fillClass}`, horizontalScroll && 'group_scroll_horizontal', wrapClass && `group_wrap_${wrapClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: children
             ? children
-            : chipsList?.map((item) => (jsx(Chips, { appearance: chipsAppearance, label: item.label, iconAfter: item.iconAfter, iconBefore: item.iconBefore, isActive: item.isActive, isDisabled: item.isDisabled, onClick: (event) => onClick(item, event) }, item.id))) }));
+            : chipsList?.map((item) => (jsx(Chips, { appearance: chipsAppearance, label: item.label, iconAfter: item.iconAfter, iconAfterActive: item.iconAfterActive, iconBefore: item.iconBefore, iconBeforeActive: item.iconBeforeActive, isActive: item.isActive, isDisabled: item.isDisabled, onClick: (event) => onClick?.(item, event) }, item.id))) }));
 }
 
 export { Chips as C, chipsAppearance as a, ChipsGroup as b, chipsConfig as c };

package/dist/{DatePicker_cjs_CHxK5Rw8.js → DatePicker_cjs_BzAzvsdV.js}

@@ -8,11 +8,11 @@ var DatePicker = require('react-datepicker');
 var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-var Button = require('./Button_cjs_BLuRWxbc.js');
-var Icon = require('./Icon_cjs_CQxDPPGY.js');
-var Input = require('./Input_cjs_BUtZUZYh.js');
-var Label = require('./Label_cjs_eckLVQqh.js');
-var Text = require('./Text_cjs_Co2XdYF-.js');
+var Button = require('./Button_cjs_Ivarkwy6.js');
+var Icon = require('./Icon_cjs_D20B2YBo.js');
+var Input = require('./Input_cjs_BQIi1N63.js');
+var Label = require('./Label_cjs_DlbcXQX4.js');
+var Text = require('./Text_cjs_erTy2pUN.js');
 var _default = require('@itcase/icons/default');
 
 const datePickerSize = {
@@ -20,7 +20,7 @@ const datePickerSize = {
         size: 'l',
         daySize: 'xs',
         dayTextSize: 'm',
-        iconFillSize: 24,
+        iconFillSize: '24',
         iconLeft: _default.icons14.Arrow.ChevronLeft,
         iconRight: _default.icons14.Arrow.ChevronRight,
     },
@@ -28,10 +28,10 @@ const datePickerSize = {
         size: 'm',
         daySize: 'xxl',
         dayTextSize: 'm',
-        iconFillSize: 24,
+        iconFillSize: '24',
         iconLeft: _default.icons14.Arrow.ChevronLeft,
         iconRight: _default.icons14.Arrow.ChevronRight,
-        iconSize: 14,
+        iconSize: '14',
         monthTextSize: 'm',
         yearTextSize: 'm',
     },
@@ -39,7 +39,7 @@ const datePickerSize = {
         size: 's',
         daySize: 'xs',
         dayTextSize: 'm',
-        iconFillSize: 24,
+        iconFillSize: '24',
         iconLeft: _default.icons14.Arrow.ChevronLeft,
         iconRight: _default.icons14.Arrow.ChevronRight,
     },
@@ -73,10 +73,9 @@ const datePickerAppearanceSurface = {
         iconItemFill: 'surfaceItemPrimary',
         iconShape: 'circular',
         monthTextColor: 'surfaceTextPrimary',
-        monthTextWeight: 400,
-        placeholderTextColor: 'surfaceTextPrimary',
+        monthTextWeight: '400',
         yearTextColor: 'surfaceTextPrimary',
-        yearTextWeight: 400,
+        yearTextWeight: '400',
     },
 };
 
@@ -87,13 +86,9 @@ const datePickerAppearance = {
 };
 
 const getWeekRange = (date) => {
-    // "getDay" return from 0(sunday) to 6 (saturday).
-    // When 0(sunday) - we set as 7(end of week from 1(monday))
     const weekDayIndex = date.getDay() || 7;
-    // Collect monday of week from selected date
     const mondayDate = new Date(date);
     mondayDate.setDate(date.getDate() - (weekDayIndex - 1));
-    // Collect sunday of week from selected date
     const sundayDate = new Date(mondayDate);
     sundayDate.setDate(mondayDate.getDate() + 6);
     return {
@@ -139,20 +134,17 @@ function DatePickerInput(props) {
     const handleChange = React.useCallback((selected) => {
         const valuesList = Array.isArray(selected) ? selected : [selected];
         const [selectedDateStart, selectedDateEnd] = valuesList;
-        // "showWeekPicker" means to select full weak by one of day
         if (selectedDateStart && showWeekPicker) {
             const { mondayDate, sundayDate } = getWeekRange(selectedDateStart);
-            // Selected date can be wednesday, but for week picker
-            // we return start and end of selected week.
-            onChange(mondayDate, sundayDate);
+            onChange?.(mondayDate, sundayDate);
         }
         else {
-            onChange(selectedDateStart, selectedDateEnd);
+            onChange?.(selectedDateStart, selectedDateEnd);
         }
     }, [showWeekPicker, onChange]);
     const handleWeekSelect = React.useCallback((startDateOfSelectedWeek) => {
         const { mondayDate, sundayDate } = getWeekRange(startDateOfSelectedWeek);
-        onChange(mondayDate, sundayDate);
+        onChange?.(mondayDate, sundayDate);
     }, [onChange]);
     const renderDayContents = React.useCallback((day, date) => {
         return (jsxRuntime.jsx(Button.Button, { className: "react-datepicker__day-button", size: daySize, label: date.getDate().toString(), labelTextColor: dayTextColor, labelTextSize: dayTextSize, shape: dayTextShape }));
@@ -173,9 +165,7 @@ function DatePickerInput(props) {
         yearTextWeight,
     ]);
     const { styles: datePickerStyles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', sizeClass && `datepicker_size_${sizeClass}`, widthClass && `datepicker_width_${widthClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: datePickerStyles, children: jsxRuntime.jsx(DatePicker, { ref: datepickerRef, minDate: disablePastDays ? new Date() : undefined, customInput: jsxRuntime.jsx(DatePickerCustomInput, { datepickerRef: datepickerRef, inputProps: inputProps, isClearable: isClearable }), endDate: selectsRange ? dateEnd : undefined, locale: locale.ru, outsideClickIgnoreClass: "react-datepicker-popper", popperClassName: popper && `react-datepicker-popper-${popper}`, popperPlacement: popperPlacement, preventOpenOnFocus: true, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: dateStart, startDate: dateStart, onChange: handleChange, onWeekSelect: showWeekNumbers ? handleWeekSelect : undefined, ...datePickerProps, 
-            // Important for use custom clear button
-            isClearable: false }) }));
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', sizeClass && `datepicker_size_${sizeClass}`, widthClass && `datepicker_width_${widthClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: datePickerStyles, children: jsxRuntime.jsx(DatePicker, { ref: datepickerRef, ...datePickerProps, minDate: disablePastDays ? new Date() : undefined, customInput: jsxRuntime.jsx(DatePickerCustomInput, { datepickerRef: datepickerRef, inputProps: inputProps, isClearable: isClearable }), endDate: selectsRange ? dateEnd : undefined, locale: locale.ru, outsideClickIgnoreClass: "react-datepicker-popper", popperClassName: popper && `react-datepicker-popper-${popper}`, popperPlacement: popperPlacement, preventOpenOnFocus: true, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: dateStart, startDate: dateStart, isClearable: false, onChange: handleChange, onWeekSelect: showWeekNumbers ? handleWeekSelect : undefined }) }));
 }
 const DatePickerCustomInput = React.forwardRef((props, ref) => {
     const { inputIcon, inputProps, value, isClearable } = props;
@@ -186,7 +176,7 @@ const DatePickerCustomInput = React.forwardRef((props, ref) => {
         }
         return '';
     }, [value]);
-    return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(Input.Input, { ...props, ...inputProps, className: clsx(inputProps.className, 'datepicker__input'), ref: ref, autocomplete: "off", value: multipleValue, isReadOnly: true }), inputIcon && jsxRuntime.jsx(DatePickerInputIcon, { ...inputProps }), isClearable && jsxRuntime.jsx(DatePickerClearButton, { ...inputProps })] }));
+    return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(Input.Input, { ...props, ...inputProps, className: clsx(inputProps?.className, 'datepicker__input'), ref: ref, autocomplete: "off", value: multipleValue }), inputIcon && jsxRuntime.jsx(DatePickerInputIcon, { ...inputProps }), isClearable && jsxRuntime.jsx(DatePickerClearButton, { ...inputProps })] }));
 });
 function DatePickerClearButton(props) {
     const { clearIcon, clearIconFill, clearIconFillHover, clearIconFillSize, clearIconItemFill, clearIconItemFillHover, clearIconShape, clearIconSize, clearIconSrc, clearLabel, clearLabelTextColor, clearLabelTextColorHover, clearLabelTextSize, datepickerRef, } = props;

package/dist/{DatePicker_es_DHGzUpHd.js → DatePicker_es_CCZmi-lN.js}

@@ -6,11 +6,11 @@ import DatePicker from 'react-datepicker';
 import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
-import { B as Button } from './Button_es_DH8hqqdN.js';
-import { I as Icon } from './Icon_es_Banbw98_.js';
-import { I as Input } from './Input_es_DaDvQ8Xp.js';
-import { L as Label } from './Label_es_DuDL0-3C.js';
-import { T as Text } from './Text_es_DaYcLe4H.js';
+import { B as Button } from './Button_es_ul2sDicM.js';
+import { I as Icon } from './Icon_es_DNVHNKFK.js';
+import { I as Input } from './Input_es_CYUPx5I_.js';
+import { L as Label } from './Label_es_CbXFs_ts.js';
+import { T as Text } from './Text_es_B85LGfjW.js';
 import { icons14 } from '@itcase/icons/default';
 
 const datePickerSize = {
@@ -18,7 +18,7 @@ const datePickerSize = {
         size: 'l',
         daySize: 'xs',
         dayTextSize: 'm',
-        iconFillSize: 24,
+        iconFillSize: '24',
         iconLeft: icons14.Arrow.ChevronLeft,
         iconRight: icons14.Arrow.ChevronRight,
     },
@@ -26,10 +26,10 @@ const datePickerSize = {
         size: 'm',
         daySize: 'xxl',
         dayTextSize: 'm',
-        iconFillSize: 24,
+        iconFillSize: '24',
         iconLeft: icons14.Arrow.ChevronLeft,
         iconRight: icons14.Arrow.ChevronRight,
-        iconSize: 14,
+        iconSize: '14',
         monthTextSize: 'm',
         yearTextSize: 'm',
     },
@@ -37,7 +37,7 @@ const datePickerSize = {
         size: 's',
         daySize: 'xs',
         dayTextSize: 'm',
-        iconFillSize: 24,
+        iconFillSize: '24',
         iconLeft: icons14.Arrow.ChevronLeft,
         iconRight: icons14.Arrow.ChevronRight,
     },
@@ -71,10 +71,9 @@ const datePickerAppearanceSurface = {
         iconItemFill: 'surfaceItemPrimary',
         iconShape: 'circular',
         monthTextColor: 'surfaceTextPrimary',
-        monthTextWeight: 400,
-        placeholderTextColor: 'surfaceTextPrimary',
+        monthTextWeight: '400',
         yearTextColor: 'surfaceTextPrimary',
-        yearTextWeight: 400,
+        yearTextWeight: '400',
     },
 };
 
@@ -85,13 +84,9 @@ const datePickerAppearance = {
 };
 
 const getWeekRange = (date) => {
-    // "getDay" return from 0(sunday) to 6 (saturday).
-    // When 0(sunday) - we set as 7(end of week from 1(monday))
     const weekDayIndex = date.getDay() || 7;
-    // Collect monday of week from selected date
     const mondayDate = new Date(date);
     mondayDate.setDate(date.getDate() - (weekDayIndex - 1));
-    // Collect sunday of week from selected date
     const sundayDate = new Date(mondayDate);
     sundayDate.setDate(mondayDate.getDate() + 6);
     return {
@@ -137,20 +132,17 @@ function DatePickerInput(props) {
     const handleChange = useCallback((selected) => {
         const valuesList = Array.isArray(selected) ? selected : [selected];
         const [selectedDateStart, selectedDateEnd] = valuesList;
-        // "showWeekPicker" means to select full weak by one of day
         if (selectedDateStart && showWeekPicker) {
             const { mondayDate, sundayDate } = getWeekRange(selectedDateStart);
-            // Selected date can be wednesday, but for week picker
-            // we return start and end of selected week.
-            onChange(mondayDate, sundayDate);
+            onChange?.(mondayDate, sundayDate);
         }
         else {
-            onChange(selectedDateStart, selectedDateEnd);
+            onChange?.(selectedDateStart, selectedDateEnd);
         }
     }, [showWeekPicker, onChange]);
     const handleWeekSelect = useCallback((startDateOfSelectedWeek) => {
         const { mondayDate, sundayDate } = getWeekRange(startDateOfSelectedWeek);
-        onChange(mondayDate, sundayDate);
+        onChange?.(mondayDate, sundayDate);
     }, [onChange]);
     const renderDayContents = useCallback((day, date) => {
         return (jsx(Button, { className: "react-datepicker__day-button", size: daySize, label: date.getDate().toString(), labelTextColor: dayTextColor, labelTextSize: dayTextSize, shape: dayTextShape }));
@@ -171,9 +163,7 @@ function DatePickerInput(props) {
         yearTextWeight,
     ]);
     const { styles: datePickerStyles } = useStyles(props);
-    return (jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', sizeClass && `datepicker_size_${sizeClass}`, widthClass && `datepicker_width_${widthClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: datePickerStyles, children: jsx(DatePicker, { ref: datepickerRef, minDate: disablePastDays ? new Date() : undefined, customInput: jsx(DatePickerCustomInput, { datepickerRef: datepickerRef, inputProps: inputProps, isClearable: isClearable }), endDate: selectsRange ? dateEnd : undefined, locale: ru, outsideClickIgnoreClass: "react-datepicker-popper", popperClassName: popper && `react-datepicker-popper-${popper}`, popperPlacement: popperPlacement, preventOpenOnFocus: true, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: dateStart, startDate: dateStart, onChange: handleChange, onWeekSelect: showWeekNumbers ? handleWeekSelect : undefined, ...datePickerProps, 
-            // Important for use custom clear button
-            isClearable: false }) }));
+    return (jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', sizeClass && `datepicker_size_${sizeClass}`, widthClass && `datepicker_width_${widthClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: datePickerStyles, children: jsx(DatePicker, { ref: datepickerRef, ...datePickerProps, minDate: disablePastDays ? new Date() : undefined, customInput: jsx(DatePickerCustomInput, { datepickerRef: datepickerRef, inputProps: inputProps, isClearable: isClearable }), endDate: selectsRange ? dateEnd : undefined, locale: ru, outsideClickIgnoreClass: "react-datepicker-popper", popperClassName: popper && `react-datepicker-popper-${popper}`, popperPlacement: popperPlacement, preventOpenOnFocus: true, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: dateStart, startDate: dateStart, isClearable: false, onChange: handleChange, onWeekSelect: showWeekNumbers ? handleWeekSelect : undefined }) }));
 }
 const DatePickerCustomInput = React.forwardRef((props, ref) => {
     const { inputIcon, inputProps, value, isClearable } = props;
@@ -184,7 +174,7 @@ const DatePickerCustomInput = React.forwardRef((props, ref) => {
         }
         return '';
     }, [value]);
-    return (jsxs(React.Fragment, { children: [jsx(Input, { ...props, ...inputProps, className: clsx(inputProps.className, 'datepicker__input'), ref: ref, autocomplete: "off", value: multipleValue, isReadOnly: true }), inputIcon && jsx(DatePickerInputIcon, { ...inputProps }), isClearable && jsx(DatePickerClearButton, { ...inputProps })] }));
+    return (jsxs(React.Fragment, { children: [jsx(Input, { ...props, ...inputProps, className: clsx(inputProps?.className, 'datepicker__input'), ref: ref, autocomplete: "off", value: multipleValue }), inputIcon && jsx(DatePickerInputIcon, { ...inputProps }), isClearable && jsx(DatePickerClearButton, { ...inputProps })] }));
 });
 function DatePickerClearButton(props) {
     const { clearIcon, clearIconFill, clearIconFillHover, clearIconFillSize, clearIconItemFill, clearIconItemFillHover, clearIconShape, clearIconSize, clearIconSrc, clearLabel, clearLabelTextColor, clearLabelTextColorHover, clearLabelTextSize, datepickerRef, } = props;

package/dist/{Divider_cjs_1fwsCxEb.js → Divider_cjs_C5Ou2Kqa.js}

@@ -18,15 +18,9 @@ const dividerAppearanceError = {
     },
 };
 
-const dividerAppearancePrimary = {
-    primaryPrimary: {
-        fill: 'primaryPrimary',
-    },
-};
-
-const dividerAppearanceSecondary = {
-    secondaryPrimary: {
-        fill: 'secondaryPrimary',
+const dividerAppearanceExtra = {
+    extraPrimary: {
+        fill: 'extraPrimary',
     },
 };
 
@@ -42,6 +36,12 @@ const dividerAppearanceSize = {
     },
 };
 
+const dividerAppearanceSpecial = {
+    specialPrimary: {
+        fill: 'specialPrimary',
+    },
+};
+
 const dividerAppearanceSuccess = {
     successPrimary: {
         fill: 'successPrimary',
@@ -52,15 +52,15 @@ const dividerAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
     },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+    },
     surfaceSecondary: {
         fill: 'surfaceSecondary',
     },
     surfaceTertiary: {
         fill: 'surfaceTertiary',
     },
-    surfaceQuaternary: {
-        fill: 'surfaceQuaternary',
-    },
 };
 
 const dividerAppearanceWarning = {
@@ -73,8 +73,8 @@ const dividerAppearance = {
     ...dividerAppearanceSize,
     ...dividerAppearanceAccent,
     ...dividerAppearanceError,
-    ...dividerAppearancePrimary,
-    ...dividerAppearanceSecondary,
+    ...dividerAppearanceSpecial,
+    ...dividerAppearanceExtra,
     ...dividerAppearanceSuccess,
     ...dividerAppearanceSurface,
     ...dividerAppearanceWarning,
@@ -91,7 +91,6 @@ function Divider(props) {
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, dividerConfig);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { directionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillDisabledClass, fillHoverClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
-    // @ts-expect-error
     const { styles: hrStyles } = useStyles.useStyles(props);
     return (jsxRuntime.jsx("hr", { className: clsx(className, 'divider', widthClass && `width_${widthClass}`, directionClass && `divider_direction_${directionClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `divider_size_${sizeClass}`, !isActive
             ? fillClass && `fill_${fillClass}`

package/dist/{Divider_es_BlOJ77zx.js → Divider_es_BR7ZO8w0.js}

@@ -16,15 +16,9 @@ const dividerAppearanceError = {
     },
 };
 
-const dividerAppearancePrimary = {
-    primaryPrimary: {
-        fill: 'primaryPrimary',
-    },
-};
-
-const dividerAppearanceSecondary = {
-    secondaryPrimary: {
-        fill: 'secondaryPrimary',
+const dividerAppearanceExtra = {
+    extraPrimary: {
+        fill: 'extraPrimary',
     },
 };
 
@@ -40,6 +34,12 @@ const dividerAppearanceSize = {
     },
 };
 
+const dividerAppearanceSpecial = {
+    specialPrimary: {
+        fill: 'specialPrimary',
+    },
+};
+
 const dividerAppearanceSuccess = {
     successPrimary: {
         fill: 'successPrimary',
@@ -50,15 +50,15 @@ const dividerAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
     },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+    },
     surfaceSecondary: {
         fill: 'surfaceSecondary',
     },
     surfaceTertiary: {
         fill: 'surfaceTertiary',
     },
-    surfaceQuaternary: {
-        fill: 'surfaceQuaternary',
-    },
 };
 
 const dividerAppearanceWarning = {
@@ -71,8 +71,8 @@ const dividerAppearance = {
     ...dividerAppearanceSize,
     ...dividerAppearanceAccent,
     ...dividerAppearanceError,
-    ...dividerAppearancePrimary,
-    ...dividerAppearanceSecondary,
+    ...dividerAppearanceSpecial,
+    ...dividerAppearanceExtra,
     ...dividerAppearanceSuccess,
     ...dividerAppearanceSurface,
     ...dividerAppearanceWarning,
@@ -89,7 +89,6 @@ function Divider(props) {
     const appearanceConfig = useAppearanceConfig(appearance, dividerConfig);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     const { directionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillDisabledClass, fillHoverClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
-    // @ts-expect-error
     const { styles: hrStyles } = useStyles(props);
     return (jsx("hr", { className: clsx(className, 'divider', widthClass && `width_${widthClass}`, directionClass && `divider_direction_${directionClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, sizeClass && `divider_size_${sizeClass}`, !isActive
             ? fillClass && `fill_${fillClass}`