@itcase/ui 1.8.122 → 1.8.124

package/dist/{ChipsGroup_es_ayPPUwQ7.js → ChipsGroup_es_BVQ7_n0k.js}

@@ -3,11 +3,10 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
-import { I as Icon, B as Badge } from './Icon_es_BrwLifge.js';
-import { T as Text } from './Text_es_CwV9rjFD.js';
-import { _ as __assign } from './tslib.es6_es_Bwu1Cn-t.js';
+import { I as Icon, B as Badge } from './Icon_es_D5eiycFI.js';
+import { T as Text } from './Text_es_CnymlElo.js';
 
-var chipsAppearanceAccent = {
+const chipsAppearanceAccent = {
     accent: {
         fill: 'accentPrimary',
         fillHover: 'accentHoverPrimary',
@@ -32,7 +31,7 @@ var chipsAppearanceAccent = {
     },
 };
 
-var chipsAppearanceDanger = {
+const chipsAppearanceDanger = {
     dangerMutedPrimary: {
         fill: 'dangerTertiary',
         labelTextColor: 'dangerTextQuaternary',
@@ -49,7 +48,7 @@ var chipsAppearanceDanger = {
     },
 };
 
-var chipsAppearanceDisabled = {
+const chipsAppearanceDisabled = {
     disabled: {
         fill: 'surfaceDisabled',
         labelTextColor: 'surfaceTextDisabled',
@@ -59,7 +58,7 @@ var chipsAppearanceDisabled = {
     },
 };
 
-var chipsAppearanceError = {
+const chipsAppearanceError = {
     errorMutedPrimary: {
         fill: 'errorDisabled',
         labelTextColor: 'errorTextQuaternary',
@@ -76,7 +75,7 @@ var chipsAppearanceError = {
     },
 };
 
-var chipsAppearanceInfo = {
+const chipsAppearanceInfo = {
     infoMutedPrimary: {
         fill: 'infoTertiary',
         labelTextColor: 'infoTextPrimary',
@@ -93,7 +92,7 @@ var chipsAppearanceInfo = {
     },
 };
 
-var chipsAppearancePrimary = {
+const chipsAppearancePrimary = {
     primaryMutedPrimary: {
         fill: 'primaryDisabled',
         labelTextColor: 'primaryTextSecondary',
@@ -110,7 +109,7 @@ var chipsAppearancePrimary = {
     },
 };
 
-var chipsAppearanceSecondary = {
+const chipsAppearanceSecondary = {
     secondaryMutedPrimary: {
         fill: 'secondaryDisabled',
         labelTextColor: 'secondaryTextQuaternary',
@@ -127,7 +126,7 @@ var chipsAppearanceSecondary = {
     },
 };
 
-var chipsAppearanceShape = {
+const chipsAppearanceShape = {
     circular: {
         shape: 'circular',
     },
@@ -152,7 +151,7 @@ var chipsAppearanceShape = {
     },
 };
 
-var chipsAppearanceSize = {
+const chipsAppearanceSize = {
     sizeXXL: {
         size: 'xxl',
         labelTextSize: 'xl',
@@ -197,7 +196,7 @@ var chipsAppearanceSize = {
     },
 };
 
-var chipsAppearanceStyle = {
+const chipsAppearanceStyle = {
     solid: {
         borderColor: 'none',
     },
@@ -211,7 +210,7 @@ var chipsAppearanceStyle = {
     },
 };
 
-var chipsAppearanceSuccess = {
+const chipsAppearanceSuccess = {
     successMutedPrimary: {
         fill: 'successTertiary',
         labelTextColor: 'successTextQuaternary',
@@ -228,7 +227,7 @@ var chipsAppearanceSuccess = {
     },
 };
 
-var chipsAppearanceSurface = {
+const chipsAppearanceSurface = {
     surfaceMutedPrimary: {
         fill: 'surfaceSecondary',
         labelTextColor: 'surfaceTextQuaternary',
@@ -274,7 +273,7 @@ var chipsAppearanceSurface = {
     },
 };
 
-var chipsAppearanceWarning = {
+const chipsAppearanceWarning = {
     warningMutedPrimary: {
         fill: 'warningTertiary',
         labelTextColor: 'warningTextSecondary',
@@ -291,36 +290,50 @@ var chipsAppearanceWarning = {
     },
 };
 
-var chipsAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, chipsAppearanceSize), chipsAppearanceStyle), chipsAppearanceAccent), chipsAppearanceDanger), chipsAppearanceError), chipsAppearanceInfo), chipsAppearanceDisabled), chipsAppearancePrimary), chipsAppearanceSecondary), chipsAppearanceSuccess), chipsAppearanceSurface), chipsAppearanceWarning), chipsAppearanceShape);
+const chipsAppearance = {
+    ...chipsAppearanceSize,
+    ...chipsAppearanceStyle,
+    ...chipsAppearanceAccent,
+    ...chipsAppearanceDanger,
+    ...chipsAppearanceError,
+    ...chipsAppearanceInfo,
+    ...chipsAppearanceDisabled,
+    ...chipsAppearancePrimary,
+    ...chipsAppearanceSecondary,
+    ...chipsAppearanceSuccess,
+    ...chipsAppearanceSurface,
+    ...chipsAppearanceWarning,
+    ...chipsAppearanceShape,
+};
 
-var chipsConfig = {
+const chipsConfig = {
     appearance: chipsAppearance,
-    setAppearance: function (appearanceConfig) {
+    setAppearance: (appearanceConfig) => {
         chipsConfig.appearance = appearanceConfig;
     },
 };
 function Chips(props) {
-    var dataTestId = props.dataTestId, dataTour = props.dataTour, className = props.className, appearance = props.appearance, _a = props.label, label = _a === void 0 ? '' : _a, isDisabled = props.isDisabled, iconAfter = props.iconAfter, iconAfterSrc = props.iconAfterSrc, iconBefore = props.iconBefore, iconBeforeSrc = props.iconBeforeSrc, isActive = props.isActive, isSkeleton = props.isSkeleton, onClick = props.onClick, onClickIconAfter = props.onClickIconAfter, onClickIconBefore = props.onClickIconBefore, children = props.children;
-    var appearanceConfig = useAppearanceConfig(appearance, chipsConfig, isDisabled);
-    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextActiveColor = propsGenerator.labelTextActiveColor, labelTextActiveHoverColor = propsGenerator.labelTextActiveHoverColor, labelTextColor = propsGenerator.labelTextColor, labelTextHoverColor = propsGenerator.labelTextHoverColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, badgeAppearance = propsGenerator.badgeAppearance, badgeShape = propsGenerator.badgeShape, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, badgeValue = propsGenerator.badgeValue, cursorClass = propsGenerator.cursorClass, iconAfterFill = propsGenerator.iconAfterFill, iconAfterFillActiveIcon = propsGenerator.iconAfterFillActiveIcon, iconAfterFillIcon = propsGenerator.iconAfterFillIcon, iconAfterFillSize = propsGenerator.iconAfterFillSize, iconAfterShape = propsGenerator.iconAfterShape, iconAfterSize = propsGenerator.iconAfterSize, iconBeforeFill = propsGenerator.iconBeforeFill, iconBeforeFillActiveIcon = propsGenerator.iconBeforeFillActiveIcon, iconBeforeFillIcon = propsGenerator.iconBeforeFillIcon, iconBeforeFillSize = propsGenerator.iconBeforeFillSize, iconBeforeShape = propsGenerator.iconBeforeShape, iconBeforeSize = propsGenerator.iconBeforeSize, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass;
-    var chipsStyles = useStyles(props).styles;
-    return (jsx("div", { "data-test-id": dataTestId && "".concat(dataTestId, "Chips"), "data-tour": dataTour, className: clsx(className, 'chips', !isActive
-            ? fillClass && "fill_".concat(fillClass)
-            : fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive
-            ? fillHoverClass && "fill_hover_".concat(fillHoverClass)
-            : fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), sizeClass && "chips_size_".concat(sizeClass), alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass), isActive && 'chips_state_active', isDisabled && "chips_state_disabled", cursorClass && "cursor_".concat(cursorClass), onClick && 'cursor_type_pointer', isSkeleton && "chips_skeleton"), 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: labelTextActiveHoverColor, textColorHover: labelTextHoverColor, 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, { className: "chips__badge", appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue }))] }) }));
+    const { dataTestId, dataTour, className, appearance, label = '', isDisabled, iconAfter, iconAfterSrc, iconBefore, iconBeforeSrc, isActive, 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, labelTextActiveHoverColor, labelTextColor, labelTextHoverColor, labelTextSize, labelTextWeight, labelTextWrap, borderColorClass, borderTypeClass, badgeAppearance, badgeShape, badgeSize, badgeTextColor, badgeTextSize, badgeValue, cursorClass, iconAfterFill, iconAfterFillActiveIcon, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconBeforeFill, iconBeforeFillActiveIcon, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
+    const { styles: chipsStyles } = useStyles(props);
+    return (jsx("div", { "data-test-id": dataTestId && `${dataTestId}Chips`, "data-tour": dataTour, 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`), 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: labelTextActiveHoverColor, textColorHover: labelTextHoverColor, 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, { className: "chips__badge", appearance: badgeAppearance, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue }))] }) }));
 }
 
 function ChipsGroup(props) {
-    var className = props.className, chipsList = props.chipsList, dataTestId = props.dataTestId, dataTour = props.dataTour, horizontalScroll = props.horizontalScroll, style = props.style, onClick = props.onClick, children = props.children;
-    var propsGenerator = useDevicePropsGenerator(props);
-    var directionClass = propsGenerator.directionClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, chipsAppearance = propsGenerator.chipsAppearance, widthClass = propsGenerator.widthClass, wrapClass = propsGenerator.wrapClass;
+    const { className, chipsList, dataTestId, dataTour, horizontalScroll, style, onClick, children, } = props;
+    const propsGenerator = useDevicePropsGenerator(props);
+    const { directionClass, alignClass, alignDirectionClass, fillClass, borderColorClass, borderTypeClass, borderWidthClass, chipsAppearance, widthClass, wrapClass, } = propsGenerator;
     // @ts-expect-error
-    var _a = useStyles(props), groupStyles = _a.styles, groupWrapperStyles = _a.wrapper;
-    return (jsx("div", { className: clsx(className, 'chips-group', 'group', widthClass && "width_".concat(widthClass), alignDirectionClass && "align_".concat(alignDirectionClass), directionClass && "group_direction_".concat(directionClass), alignClass && "align_".concat(alignClass), fillClass && "fill_".concat(fillClass), horizontalScroll && 'group_type_horizontal_scroll', wrapClass && "group_wrap_".concat(wrapClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass)), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsx("div", { className: "chips-group__wrapper", style: groupWrapperStyles, children: children
+    const { styles: groupStyles, wrapper: groupWrapperStyles } = 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_type_horizontal_scroll', wrapClass && `group_wrap_${wrapClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`), "data-test-id": dataTestId, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsx("div", { className: "chips-group__wrapper", style: groupWrapperStyles, children: children
                 ? children
-                : chipsList === null || chipsList === void 0 ? void 0 : chipsList.map(function (item) { return (jsx(Chips, { appearance: chipsAppearance, label: item.label, isDisabled: item.isDisabled, iconAfter: item.iconAfter, iconBefore: item.iconBefore, isActive: item.isActive, onClick: function () { return onClick(item); } }, item.id)); }) })) : children ? (children) : (chipsList === null || chipsList === void 0 ? void 0 : chipsList.map(function (item) { return (jsx(Chips, { appearance: chipsAppearance, label: item.label, isDisabled: item.isDisabled, iconAfter: item.iconAfter, iconBefore: item.iconBefore, isActive: item.isActive, onClick: function () { return onClick(item); } }, item.id)); })) }));
+                : chipsList?.map((item) => (jsx(Chips, { appearance: chipsAppearance, label: item.label, isDisabled: item.isDisabled, iconAfter: item.iconAfter, iconBefore: item.iconBefore, isActive: item.isActive, onClick: () => onClick(item) }, item.id))) })) : children ? (children) : (chipsList?.map((item) => (jsx(Chips, { appearance: chipsAppearance, label: item.label, isDisabled: item.isDisabled, iconAfter: item.iconAfter, iconBefore: item.iconBefore, isActive: item.isActive, onClick: () => onClick(item) }, item.id)))) }));
 }
 
 export { Chips as C, chipsAppearance as a, ChipsGroup as b, chipsConfig as c };

package/dist/DatePicker_cjs_Lzrr9Amf.js

@@ -0,0 +1,182 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var locale = require('date-fns/locale');
+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_CZz8OjWi.js');
+var Icon = require('./Icon_cjs_DpFxIFv5.js');
+var Input = require('./Input_cjs_DDi5JVAV.js');
+var Label = require('./Label_cjs_C-x9blCL.js');
+var Text = require('./Text_cjs_BDTjOTVB.js');
+var _default = require('@itcase/icons/default');
+
+const datePickerSize = {
+    sizeL: {
+        size: 'l',
+        daySize: 'xs',
+        dayTextSize: 'm',
+        iconFillSize: 24,
+        iconLeft: _default.icons14.Arrow.ChevronLeft,
+        iconRight: _default.icons14.Arrow.ChevronRight,
+    },
+    sizeM: {
+        size: 'm',
+        daySize: 'xxl',
+        dayTextSize: 'm',
+        iconFillSize: 24,
+        iconLeft: _default.icons14.Arrow.ChevronLeft,
+        iconRight: _default.icons14.Arrow.ChevronRight,
+        iconSize: 14,
+        monthTextSize: 'm',
+        yearTextSize: 'm',
+    },
+    sizeS: {
+        size: 's',
+        daySize: 'xs',
+        dayTextSize: 'm',
+        iconFillSize: 24,
+        iconLeft: _default.icons14.Arrow.ChevronLeft,
+        iconRight: _default.icons14.Arrow.ChevronRight,
+    },
+};
+
+const datePickerStyle = {
+    solid: {
+        inputProps: {
+            borderColor: 'none',
+        },
+    },
+    outlined: {
+        inputProps: {
+            fill: 'none',
+        },
+    },
+    full: {},
+    ghost: {
+        inputProps: {
+            fill: 'none',
+            borderColor: 'none',
+        },
+    },
+};
+
+const datePickerAppearanceSurface = {
+    surfacePrimary: {
+        dayTextColor: 'surfaceTextPrimary',
+        dayTextShape: 'rounded',
+        iconFillHover: 'surfaceSecondary',
+        iconItemFill: 'surfaceItemPrimary',
+        iconShape: 'circular',
+        monthTextColor: 'surfaceTextPrimary',
+        monthTextWeight: 400,
+        placeholderTextColor: 'surfaceTextPrimary',
+        yearTextColor: 'surfaceTextPrimary',
+        yearTextWeight: 400,
+    },
+};
+
+const datePickerAppearance = {
+    ...datePickerAppearanceSurface,
+    ...datePickerSize,
+    ...datePickerStyle,
+};
+
+const datePickerConfig = {
+    appearance: datePickerAppearance,
+    setAppearance: (appearanceConfig) => {
+        datePickerConfig.appearance = appearanceConfig;
+    },
+};
+function DatePickerInput(props) {
+    const { className, datePickerProps = {}, endValue, inputProps = {}, value, onChange, } = props;
+    const datepickerRef = React.useRef(null);
+    const { customTimeInput, disablePastDays, monthsShown, selectsRange } = datePickerProps;
+    const appearanceConfig = useAppearanceConfig.useAppearanceConfig(datePickerProps.appearance, datePickerConfig);
+    const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(datePickerProps, appearanceConfig);
+    const { daySize, dayTextColor, dayTextShape, dayTextSize, iconFill, iconFillHover, iconFillSize, iconItemFill, iconLeft, iconRight, iconShape, monthTextColor, monthTextSize, monthTextWeight, popper, popperPlacement, sizeClass, widthClass, yearTextColor, yearTextSize, yearTextWeight, isClearable, } = propsGenerator;
+    const [dateStart, dateEnd] = React.useMemo(() => {
+        let dateStart;
+        if (value) {
+            if (typeof value === 'string') {
+                dateStart = new Date(value);
+            }
+            else {
+                dateStart = value;
+            }
+        }
+        else {
+            dateStart = undefined;
+        }
+        let dateEnd;
+        if (endValue) {
+            if (typeof endValue === 'string') {
+                dateEnd = new Date(endValue);
+            }
+            else {
+                dateEnd = endValue;
+            }
+        }
+        else {
+            dateEnd = undefined;
+        }
+        return [dateStart, dateEnd];
+    }, [value, endValue]);
+    const handleChange = React.useCallback((valuesList) => {
+        const [newDateStart, newDateEnd] = valuesList;
+        onChange(newDateStart, newDateEnd);
+    }, [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 }));
+    }, [daySize, dayTextColor, dayTextShape, dayTextSize]);
+    const renderCustomHeader = React.useCallback(({ decreaseMonth, increaseMonth, monthDate, }) => (jsxRuntime.jsxs("div", { className: "react-datepicker__header--div", children: [iconLeft && (jsxRuntime.jsx(Icon.Icon, { className: "react-datepicker__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, shape: iconShape, SvgImage: iconLeft, onClick: decreaseMonth })), jsxRuntime.jsxs("div", { className: "react-datepicker__data", children: [jsxRuntime.jsx(Text.Text, { className: "react-datepicker__month", size: monthTextSize, textColor: monthTextColor, textWeight: monthTextWeight, children: monthDate.toLocaleString('ru-RU', { month: 'long' }) }), jsxRuntime.jsx(Text.Text, { className: "react-datepicker__year", size: yearTextSize, textColor: yearTextColor, textWeight: yearTextWeight, children: monthDate.toLocaleString('ru-RU', { year: 'numeric' }) })] }), iconRight && (jsxRuntime.jsx(Icon.Icon, { className: "react-datepicker__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, shape: iconShape, SvgImage: iconRight, onClick: increaseMonth }))] })), [
+        iconFill,
+        iconFillHover,
+        iconFillSize,
+        iconItemFill,
+        iconLeft,
+        iconRight,
+        iconShape,
+        monthTextColor,
+        monthTextSize,
+        monthTextWeight,
+        yearTextColor,
+        yearTextSize,
+        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}`), style: datePickerStyles, children: jsxRuntime.jsx(DatePicker, { minDate: disablePastDays ? new Date() : undefined, customInput: jsxRuntime.jsx(DatePickerCustomInput, { datepickerRef: datepickerRef, inputProps: inputProps, isClearable: isClearable }), endDate: selectsRange ? dateEnd : undefined, locale: locale.ru, popperClassName: popper && `react-datepicker-popper-${popper}`, popperPlacement: popperPlacement, ref: datepickerRef, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: dateStart, startDate: dateStart, onChange: selectsRange ? handleChange : onChange, ...datePickerProps, 
+            // Important for use custom clear button
+            isClearable: false }) }));
+}
+const DatePickerCustomInput = React.forwardRef((props, ref) => {
+    const { inputIcon, inputProps, value, isClearable } = props;
+    const multipleValue = React.useMemo(() => {
+        if (value) {
+            const twoDates = value.split(' - ');
+            return twoDates[0] === twoDates[1] ? twoDates[0] : value;
+        }
+        return '';
+    }, [value]);
+    return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(Input.Input, { ...props, ...inputProps, className: clsx(inputProps.className, 'datepicker__input'), autocomplete: "off", ref: ref, 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;
+    const onClick = React.useCallback((event) => {
+        datepickerRef?.current?.onClearClick(event);
+        datepickerRef?.current?.handleFocus(event);
+    }, []);
+    return (jsxRuntime.jsx(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'), size: clearIconSize, fill: clearIconFill, fillHover: clearIconFillHover, fillSize: clearIconFillSize, iconFill: clearIconItemFill, iconFillHover: clearIconItemFillHover, imageSrc: clearIconSrc, shape: clearIconShape, SvgImage: clearIcon, onClick: onClick }))) }));
+}
+function DatePickerInputIcon(props) {
+    const { inputIcon, inputIconFill, inputIconFillHover, inputIconFillSize, inputIconItemFill, inputIconShape, inputIconSize, inputIconSrc, onClick, } = props;
+    return (jsxRuntime.jsx(Icon.Icon, { className: clsx('react-datepicker__input-icon', 'cursor_type_pointer'), size: inputIconSize, fill: inputIconFill, fillHover: inputIconFillHover, fillSize: inputIconFillSize, iconFill: inputIconItemFill, imageSrc: inputIconSrc, shape: inputIconShape, SvgImage: inputIcon, onClick: () => onClick && onClick() }));
+}
+
+exports.DatePickerInput = DatePickerInput;
+exports.datePickerAppearance = datePickerAppearance;
+exports.datePickerConfig = datePickerConfig;

package/dist/DatePicker_es_D1LvY5RT.js

@@ -0,0 +1,178 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useMemo, useCallback, useRef } from 'react';
+import clsx from 'clsx';
+import { ru } from 'date-fns/locale';
+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_Cn3wtv3M.js';
+import { I as Icon } from './Icon_es_D5eiycFI.js';
+import { I as Input } from './Input_es_BnCXATnh.js';
+import { L as Label } from './Label_es_DCqpSw_F.js';
+import { T as Text } from './Text_es_CnymlElo.js';
+import { icons14 } from '@itcase/icons/default';
+
+const datePickerSize = {
+    sizeL: {
+        size: 'l',
+        daySize: 'xs',
+        dayTextSize: 'm',
+        iconFillSize: 24,
+        iconLeft: icons14.Arrow.ChevronLeft,
+        iconRight: icons14.Arrow.ChevronRight,
+    },
+    sizeM: {
+        size: 'm',
+        daySize: 'xxl',
+        dayTextSize: 'm',
+        iconFillSize: 24,
+        iconLeft: icons14.Arrow.ChevronLeft,
+        iconRight: icons14.Arrow.ChevronRight,
+        iconSize: 14,
+        monthTextSize: 'm',
+        yearTextSize: 'm',
+    },
+    sizeS: {
+        size: 's',
+        daySize: 'xs',
+        dayTextSize: 'm',
+        iconFillSize: 24,
+        iconLeft: icons14.Arrow.ChevronLeft,
+        iconRight: icons14.Arrow.ChevronRight,
+    },
+};
+
+const datePickerStyle = {
+    solid: {
+        inputProps: {
+            borderColor: 'none',
+        },
+    },
+    outlined: {
+        inputProps: {
+            fill: 'none',
+        },
+    },
+    full: {},
+    ghost: {
+        inputProps: {
+            fill: 'none',
+            borderColor: 'none',
+        },
+    },
+};
+
+const datePickerAppearanceSurface = {
+    surfacePrimary: {
+        dayTextColor: 'surfaceTextPrimary',
+        dayTextShape: 'rounded',
+        iconFillHover: 'surfaceSecondary',
+        iconItemFill: 'surfaceItemPrimary',
+        iconShape: 'circular',
+        monthTextColor: 'surfaceTextPrimary',
+        monthTextWeight: 400,
+        placeholderTextColor: 'surfaceTextPrimary',
+        yearTextColor: 'surfaceTextPrimary',
+        yearTextWeight: 400,
+    },
+};
+
+const datePickerAppearance = {
+    ...datePickerAppearanceSurface,
+    ...datePickerSize,
+    ...datePickerStyle,
+};
+
+const datePickerConfig = {
+    appearance: datePickerAppearance,
+    setAppearance: (appearanceConfig) => {
+        datePickerConfig.appearance = appearanceConfig;
+    },
+};
+function DatePickerInput(props) {
+    const { className, datePickerProps = {}, endValue, inputProps = {}, value, onChange, } = props;
+    const datepickerRef = useRef(null);
+    const { customTimeInput, disablePastDays, monthsShown, selectsRange } = datePickerProps;
+    const appearanceConfig = useAppearanceConfig(datePickerProps.appearance, datePickerConfig);
+    const propsGenerator = useDevicePropsGenerator(datePickerProps, appearanceConfig);
+    const { daySize, dayTextColor, dayTextShape, dayTextSize, iconFill, iconFillHover, iconFillSize, iconItemFill, iconLeft, iconRight, iconShape, monthTextColor, monthTextSize, monthTextWeight, popper, popperPlacement, sizeClass, widthClass, yearTextColor, yearTextSize, yearTextWeight, isClearable, } = propsGenerator;
+    const [dateStart, dateEnd] = useMemo(() => {
+        let dateStart;
+        if (value) {
+            if (typeof value === 'string') {
+                dateStart = new Date(value);
+            }
+            else {
+                dateStart = value;
+            }
+        }
+        else {
+            dateStart = undefined;
+        }
+        let dateEnd;
+        if (endValue) {
+            if (typeof endValue === 'string') {
+                dateEnd = new Date(endValue);
+            }
+            else {
+                dateEnd = endValue;
+            }
+        }
+        else {
+            dateEnd = undefined;
+        }
+        return [dateStart, dateEnd];
+    }, [value, endValue]);
+    const handleChange = useCallback((valuesList) => {
+        const [newDateStart, newDateEnd] = valuesList;
+        onChange(newDateStart, newDateEnd);
+    }, [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 }));
+    }, [daySize, dayTextColor, dayTextShape, dayTextSize]);
+    const renderCustomHeader = useCallback(({ decreaseMonth, increaseMonth, monthDate, }) => (jsxs("div", { className: "react-datepicker__header--div", children: [iconLeft && (jsx(Icon, { className: "react-datepicker__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, shape: iconShape, SvgImage: iconLeft, onClick: decreaseMonth })), jsxs("div", { className: "react-datepicker__data", children: [jsx(Text, { className: "react-datepicker__month", size: monthTextSize, textColor: monthTextColor, textWeight: monthTextWeight, children: monthDate.toLocaleString('ru-RU', { month: 'long' }) }), jsx(Text, { className: "react-datepicker__year", size: yearTextSize, textColor: yearTextColor, textWeight: yearTextWeight, children: monthDate.toLocaleString('ru-RU', { year: 'numeric' }) })] }), iconRight && (jsx(Icon, { className: "react-datepicker__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, shape: iconShape, SvgImage: iconRight, onClick: increaseMonth }))] })), [
+        iconFill,
+        iconFillHover,
+        iconFillSize,
+        iconItemFill,
+        iconLeft,
+        iconRight,
+        iconShape,
+        monthTextColor,
+        monthTextSize,
+        monthTextWeight,
+        yearTextColor,
+        yearTextSize,
+        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}`), style: datePickerStyles, children: jsx(DatePicker, { minDate: disablePastDays ? new Date() : undefined, customInput: jsx(DatePickerCustomInput, { datepickerRef: datepickerRef, inputProps: inputProps, isClearable: isClearable }), endDate: selectsRange ? dateEnd : undefined, locale: ru, popperClassName: popper && `react-datepicker-popper-${popper}`, popperPlacement: popperPlacement, ref: datepickerRef, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: dateStart, startDate: dateStart, onChange: selectsRange ? handleChange : onChange, ...datePickerProps, 
+            // Important for use custom clear button
+            isClearable: false }) }));
+}
+const DatePickerCustomInput = React.forwardRef((props, ref) => {
+    const { inputIcon, inputProps, value, isClearable } = props;
+    const multipleValue = useMemo(() => {
+        if (value) {
+            const twoDates = value.split(' - ');
+            return twoDates[0] === twoDates[1] ? twoDates[0] : value;
+        }
+        return '';
+    }, [value]);
+    return (jsxs(React.Fragment, { children: [jsx(Input, { ...props, ...inputProps, className: clsx(inputProps.className, 'datepicker__input'), autocomplete: "off", ref: ref, 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;
+    const onClick = useCallback((event) => {
+        datepickerRef?.current?.onClearClick(event);
+        datepickerRef?.current?.handleFocus(event);
+    }, []);
+    return (jsx(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'), size: clearIconSize, fill: clearIconFill, fillHover: clearIconFillHover, fillSize: clearIconFillSize, iconFill: clearIconItemFill, iconFillHover: clearIconItemFillHover, imageSrc: clearIconSrc, shape: clearIconShape, SvgImage: clearIcon, onClick: onClick }))) }));
+}
+function DatePickerInputIcon(props) {
+    const { inputIcon, inputIconFill, inputIconFillHover, inputIconFillSize, inputIconItemFill, inputIconShape, inputIconSize, inputIconSrc, onClick, } = props;
+    return (jsx(Icon, { className: clsx('react-datepicker__input-icon', 'cursor_type_pointer'), size: inputIconSize, fill: inputIconFill, fillHover: inputIconFillHover, fillSize: inputIconFillSize, iconFill: inputIconItemFill, imageSrc: inputIconSrc, shape: inputIconShape, SvgImage: inputIcon, onClick: () => onClick && onClick() }));
+}
+
+export { DatePickerInput as D, datePickerAppearance as a, datePickerConfig as d };