@itcase/ui 1.8.13 → 1.8.16

package/dist/DatePicker_cjs_44YPU94X.js

@@ -0,0 +1,201 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6_cjs_CCZ3TN_7.js');
+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 useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
+var Button = require('./Button_cjs_Czh0zo65.js');
+var Tooltip = require('./Tooltip_cjs_BGBe4m0s.js');
+var Input = require('./Input_cjs_BAVggtkk.js');
+var Label = require('./Label_cjs_B7v_dYKf.js');
+var Text = require('./Text_cjs_iL1l_7V1.js');
+var _default = require('@itcase/icons/default');
+
+var datePickerSize = {
+    sizeS: {
+        size: 's',
+        daySize: 'xs',
+        dayTextSize: 'm',
+        iconFillSize: 24,
+        iconLeft: _default.icon14.ChevronLeft,
+        iconRight: _default.icon14.ChevronRight,
+    },
+    sizeM: {
+        size: 'm',
+        daySize: 'xxl',
+        dayTextSize: 'm',
+        iconFillSize: 24,
+        daySize: 'xs',
+        dayTextSize: 'm',
+        iconSize: 14,
+        monthTextSize: 'm',
+        yearTextSize: 'm',
+        iconLeft: _default.icon14.ChevronLeft,
+        iconRight: _default.icon14.ChevronRight,
+    },
+    sizeL: {
+        size: 'l',
+        daySize: 'xs',
+        dayTextSize: 'm',
+        iconFillSize: 24,
+        iconLeft: _default.icon14.ChevronLeft,
+        iconRight: _default.icon14.ChevronRight,
+    },
+};
+
+var datePickerStyle = {
+    solid: {
+        datePickerProps: {},
+        inputProps: {
+            borderWidth: '0',
+        },
+    },
+    outlined: {
+        datePickerProps: {},
+        inputProps: {
+            fill: 'none',
+        },
+    },
+    ghost: {
+        datePickerProps: {},
+        inputProps: {
+            fill: 'none',
+            borderWidth: '0',
+        },
+    },
+    full: {
+        datePickerProps: {},
+        inputProps: {},
+    },
+};
+
+var datePickerAppearanceSurface = {
+    surfacePrimary: {
+        dayTextColor: 'surfaceTextPrimary',
+        dayTextShape: 'rounded',
+        iconFillHover: 'surfaceSecondary',
+        iconItemFill: 'surfaceItemPrimary',
+        iconShape: 'circular',
+        iconItemFill: 'surfaceItemPrimary',
+        iconLeft: _default.icon14.ChevronLeft,
+        iconRight: _default.icon14.ChevronRight,
+        monthTextColor: 'surfaceTextPrimary',
+        monthTextWeight: 400,
+        placeholderTextColor: 'surfaceTextPrimary',
+        yearTextColor: 'surfaceTextPrimary',
+        yearTextWeight: 400,
+    },
+};
+
+var datePickerAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, datePickerAppearanceSurface), datePickerSize), datePickerStyle);
+
+var datePickerConfig = {
+    appearance: datePickerAppearance,
+    setAppearance: function (appearanceConfig) {
+        datePickerConfig.appearance = appearanceConfig;
+    },
+};
+function DatePickerInput(props) {
+    var _a;
+    var className = props.className, _b = props.datePickerProps, datePickerProps = _b === void 0 ? {} : _b, endValue = props.endValue, _c = props.inputProps, inputProps = _c === void 0 ? {} : _c, value = props.value, onChange = props.onChange;
+    var datepickerRef = React.useRef(null);
+    var customTimeInput = datePickerProps.customTimeInput, disablePastDays = datePickerProps.disablePastDays, monthsShown = datePickerProps.monthsShown, selectsRange = datePickerProps.selectsRange;
+    var appearanceConfig = (_a = datePickerProps.appearance) === null || _a === void 0 ? void 0 : _a.split(' ').reduce(function (resultConfig, appearanceKey) {
+        var _a;
+        return (tslib_es6.__assign(tslib_es6.__assign({}, resultConfig), (_a = datePickerConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
+    }, {});
+    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(datePickerProps, appearanceConfig);
+    var daySize = propsGenerator.daySize, dayTextColor = propsGenerator.dayTextColor, dayTextShape = propsGenerator.dayTextShape, dayTextSize = propsGenerator.dayTextSize, iconFill = propsGenerator.iconFill, iconFillHover = propsGenerator.iconFillHover, iconFillSize = propsGenerator.iconFillSize, iconItemFill = propsGenerator.iconItemFill, iconLeft = propsGenerator.iconLeft, iconRight = propsGenerator.iconRight, iconShape = propsGenerator.iconShape, monthTextColor = propsGenerator.monthTextColor, monthTextSize = propsGenerator.monthTextSize, monthTextWeight = propsGenerator.monthTextWeight, popper = propsGenerator.popper, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass, yearTextColor = propsGenerator.yearTextColor, yearTextSize = propsGenerator.yearTextSize, yearTextWeight = propsGenerator.yearTextWeight, isClearable = propsGenerator.isClearable;
+    var start = React.useMemo(function () {
+        if (value) {
+            if (typeof value === 'string') {
+                return new Date(value);
+            }
+            return value;
+        }
+        if (datePickerProps.isStartDefaultNull) {
+            return undefined;
+        }
+        return new Date();
+    }, [value, datePickerProps.isStartDefaultNull]);
+    var end = React.useMemo(function () {
+        if (!endValue) {
+            return undefined;
+        }
+        if (typeof endValue === 'string') {
+            return new Date(endValue);
+        }
+        return endValue;
+    }, [endValue]);
+    var _d = React.useState(start), startDate = _d[0], setStartDate = _d[1];
+    var _e = React.useState(end), endDate = _e[0], setEndDate = _e[1];
+    var handleChange = React.useCallback(function (_a) {
+        var newStartDate = _a[0], newEndDate = _a[1];
+        onChange && onChange(newStartDate, newEndDate);
+        setStartDate(newStartDate);
+        setEndDate(newEndDate);
+    }, [onChange]);
+    var renderDayContents = React.useCallback(function (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]);
+    var renderCustomHeader = React.useCallback(function (_a) {
+        var decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, monthDate = _a.monthDate;
+        return (jsxRuntime.jsxs("div", { className: "react-datepicker__header--div", children: [iconLeft && (jsxRuntime.jsx(Tooltip.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(Tooltip.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,
+    ]);
+    React.useEffect(function () {
+        setStartDate(start);
+    }, [start]);
+    React.useEffect(function () {
+        setEndDate(end);
+    }, [end]);
+    var datePickerStyles = useStyles.useStyles(props).styles;
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', sizeClass && "datepicker_size_".concat(sizeClass), widthClass && "datepicker_width_".concat(widthClass)), style: datePickerStyles, children: jsxRuntime.jsx(DatePicker, tslib_es6.__assign({ minDate: disablePastDays ? new Date() : undefined, customInput: jsxRuntime.jsx(DatePickerCustomInput, { datepickerRef: datepickerRef, inputProps: inputProps, isClearable: isClearable }), endDate: selectsRange ? endDate : undefined, locale: locale.ru, popperClassName: popper && "react-datepicker-popper-".concat(popper), ref: datepickerRef, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: startDate, startDate: startDate, onChange: selectsRange ? handleChange : onChange }, datePickerProps, { 
+            // Important for use custom clear button
+            isClearable: false })) }));
+}
+var DatePickerCustomInput = React.forwardRef(function (props, ref) {
+    var inputIcon = props.inputIcon, inputProps = props.inputProps, value = props.value, isClearable = props.isClearable;
+    var multipleValue = React.useMemo(function () {
+        if (value) {
+            var twoDates = value.split(' - ');
+            return twoDates[0] === twoDates[1] ? twoDates[0] : value;
+        }
+        return '';
+    }, [value]);
+    return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(Input.Input, tslib_es6.__assign({}, props, inputProps, { className: clsx(inputProps.className, 'datepicker__input'), autocomplete: "off", ref: ref, value: multipleValue })), inputIcon && jsxRuntime.jsx(DatePickerInputIcon, tslib_es6.__assign({}, inputProps)), isClearable && jsxRuntime.jsx(DatePickerClearButton, tslib_es6.__assign({}, inputProps))] }));
+});
+function DatePickerClearButton(props) {
+    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.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(Tooltip.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) {
+    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(Tooltip.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: function () { return onClick && onClick(); } }));
+}
+
+exports.DatePickerInput = DatePickerInput;
+exports.datePickerAppearance = datePickerAppearance;
+exports.datePickerConfig = datePickerConfig;

package/dist/DatePicker_es_VS_nZkhp.js

@@ -0,0 +1,197 @@
+import { _ as __assign } from './tslib.es6_es_Bwu1Cn-t.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useMemo, useCallback, useRef, useState, useEffect } from 'react';
+import clsx from 'clsx';
+import { ru } from 'date-fns/locale';
+import DatePicker from 'react-datepicker';
+import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { useStyles } from './hooks/useStyles/useStyles.js';
+import { B as Button } from './Button_es_Da8cwzG-.js';
+import { I as Icon } from './Tooltip_es_DZX2n-4A.js';
+import { I as Input } from './Input_es_CNduH28G.js';
+import { L as Label } from './Label_es_DdVH9Rr8.js';
+import { T as Text } from './Text_es_D012qJ8s.js';
+import { icon14 } from '@itcase/icons/default';
+
+var datePickerSize = {
+    sizeS: {
+        size: 's',
+        daySize: 'xs',
+        dayTextSize: 'm',
+        iconFillSize: 24,
+        iconLeft: icon14.ChevronLeft,
+        iconRight: icon14.ChevronRight,
+    },
+    sizeM: {
+        size: 'm',
+        daySize: 'xxl',
+        dayTextSize: 'm',
+        iconFillSize: 24,
+        daySize: 'xs',
+        dayTextSize: 'm',
+        iconSize: 14,
+        monthTextSize: 'm',
+        yearTextSize: 'm',
+        iconLeft: icon14.ChevronLeft,
+        iconRight: icon14.ChevronRight,
+    },
+    sizeL: {
+        size: 'l',
+        daySize: 'xs',
+        dayTextSize: 'm',
+        iconFillSize: 24,
+        iconLeft: icon14.ChevronLeft,
+        iconRight: icon14.ChevronRight,
+    },
+};
+
+var datePickerStyle = {
+    solid: {
+        datePickerProps: {},
+        inputProps: {
+            borderWidth: '0',
+        },
+    },
+    outlined: {
+        datePickerProps: {},
+        inputProps: {
+            fill: 'none',
+        },
+    },
+    ghost: {
+        datePickerProps: {},
+        inputProps: {
+            fill: 'none',
+            borderWidth: '0',
+        },
+    },
+    full: {
+        datePickerProps: {},
+        inputProps: {},
+    },
+};
+
+var datePickerAppearanceSurface = {
+    surfacePrimary: {
+        dayTextColor: 'surfaceTextPrimary',
+        dayTextShape: 'rounded',
+        iconFillHover: 'surfaceSecondary',
+        iconItemFill: 'surfaceItemPrimary',
+        iconShape: 'circular',
+        iconItemFill: 'surfaceItemPrimary',
+        iconLeft: icon14.ChevronLeft,
+        iconRight: icon14.ChevronRight,
+        monthTextColor: 'surfaceTextPrimary',
+        monthTextWeight: 400,
+        placeholderTextColor: 'surfaceTextPrimary',
+        yearTextColor: 'surfaceTextPrimary',
+        yearTextWeight: 400,
+    },
+};
+
+var datePickerAppearance = __assign(__assign(__assign({}, datePickerAppearanceSurface), datePickerSize), datePickerStyle);
+
+var datePickerConfig = {
+    appearance: datePickerAppearance,
+    setAppearance: function (appearanceConfig) {
+        datePickerConfig.appearance = appearanceConfig;
+    },
+};
+function DatePickerInput(props) {
+    var _a;
+    var className = props.className, _b = props.datePickerProps, datePickerProps = _b === void 0 ? {} : _b, endValue = props.endValue, _c = props.inputProps, inputProps = _c === void 0 ? {} : _c, value = props.value, onChange = props.onChange;
+    var datepickerRef = useRef(null);
+    var customTimeInput = datePickerProps.customTimeInput, disablePastDays = datePickerProps.disablePastDays, monthsShown = datePickerProps.monthsShown, selectsRange = datePickerProps.selectsRange;
+    var appearanceConfig = (_a = datePickerProps.appearance) === null || _a === void 0 ? void 0 : _a.split(' ').reduce(function (resultConfig, appearanceKey) {
+        var _a;
+        return (__assign(__assign({}, resultConfig), (_a = datePickerConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
+    }, {});
+    var propsGenerator = useDevicePropsGenerator(datePickerProps, appearanceConfig);
+    var daySize = propsGenerator.daySize, dayTextColor = propsGenerator.dayTextColor, dayTextShape = propsGenerator.dayTextShape, dayTextSize = propsGenerator.dayTextSize, iconFill = propsGenerator.iconFill, iconFillHover = propsGenerator.iconFillHover, iconFillSize = propsGenerator.iconFillSize, iconItemFill = propsGenerator.iconItemFill, iconLeft = propsGenerator.iconLeft, iconRight = propsGenerator.iconRight, iconShape = propsGenerator.iconShape, monthTextColor = propsGenerator.monthTextColor, monthTextSize = propsGenerator.monthTextSize, monthTextWeight = propsGenerator.monthTextWeight, popper = propsGenerator.popper, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass, yearTextColor = propsGenerator.yearTextColor, yearTextSize = propsGenerator.yearTextSize, yearTextWeight = propsGenerator.yearTextWeight, isClearable = propsGenerator.isClearable;
+    var start = useMemo(function () {
+        if (value) {
+            if (typeof value === 'string') {
+                return new Date(value);
+            }
+            return value;
+        }
+        if (datePickerProps.isStartDefaultNull) {
+            return undefined;
+        }
+        return new Date();
+    }, [value, datePickerProps.isStartDefaultNull]);
+    var end = useMemo(function () {
+        if (!endValue) {
+            return undefined;
+        }
+        if (typeof endValue === 'string') {
+            return new Date(endValue);
+        }
+        return endValue;
+    }, [endValue]);
+    var _d = useState(start), startDate = _d[0], setStartDate = _d[1];
+    var _e = useState(end), endDate = _e[0], setEndDate = _e[1];
+    var handleChange = useCallback(function (_a) {
+        var newStartDate = _a[0], newEndDate = _a[1];
+        onChange && onChange(newStartDate, newEndDate);
+        setStartDate(newStartDate);
+        setEndDate(newEndDate);
+    }, [onChange]);
+    var renderDayContents = useCallback(function (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]);
+    var renderCustomHeader = useCallback(function (_a) {
+        var decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, monthDate = _a.monthDate;
+        return (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,
+    ]);
+    useEffect(function () {
+        setStartDate(start);
+    }, [start]);
+    useEffect(function () {
+        setEndDate(end);
+    }, [end]);
+    var datePickerStyles = useStyles(props).styles;
+    return (jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', sizeClass && "datepicker_size_".concat(sizeClass), widthClass && "datepicker_width_".concat(widthClass)), style: datePickerStyles, children: jsx(DatePicker, __assign({ minDate: disablePastDays ? new Date() : undefined, customInput: jsx(DatePickerCustomInput, { datepickerRef: datepickerRef, inputProps: inputProps, isClearable: isClearable }), endDate: selectsRange ? endDate : undefined, locale: ru, popperClassName: popper && "react-datepicker-popper-".concat(popper), ref: datepickerRef, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: startDate, startDate: startDate, onChange: selectsRange ? handleChange : onChange }, datePickerProps, { 
+            // Important for use custom clear button
+            isClearable: false })) }));
+}
+var DatePickerCustomInput = React.forwardRef(function (props, ref) {
+    var inputIcon = props.inputIcon, inputProps = props.inputProps, value = props.value, isClearable = props.isClearable;
+    var multipleValue = useMemo(function () {
+        if (value) {
+            var twoDates = value.split(' - ');
+            return twoDates[0] === twoDates[1] ? twoDates[0] : value;
+        }
+        return '';
+    }, [value]);
+    return (jsxs(React.Fragment, { children: [jsx(Input, __assign({}, props, inputProps, { className: clsx(inputProps.className, 'datepicker__input'), autocomplete: "off", ref: ref, value: multipleValue })), inputIcon && jsx(DatePickerInputIcon, __assign({}, inputProps)), isClearable && jsx(DatePickerClearButton, __assign({}, inputProps))] }));
+});
+function DatePickerClearButton(props) {
+    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 (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) {
+    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'), size: inputIconSize, fill: inputIconFill, fillHover: inputIconFillHover, fillSize: inputIconFillSize, iconFill: inputIconItemFill, imageSrc: inputIconSrc, shape: inputIconShape, SvgImage: inputIcon, onClick: function () { return onClick && onClick(); } }));
+}
+
+export { DatePickerInput as D, datePickerAppearance as a, datePickerConfig as d };

package/dist/Divider_cjs_DzFVtGkF.js

@@ -0,0 +1,155 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6_cjs_CCZ3TN_7.js');
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
+
+var dividerAppearanceAccent = {
+    accent: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+    },
+    accentPrimary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+        borderColor: 'accentBorderPrimary',
+    },
+    accentSecondary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+        labelTextColor: 'accentTextSecondary',
+        labelTextColorHover: 'accentTextSecondary',
+        borderColor: 'accentBorderPrimary',
+        loaderFill: 'accentPrimary',
+        loaderItemFill: 'accentItemPrimary',
+    },
+};
+
+var dividerAppearanceError = {
+    error: {
+        fill: 'errorPrimary',
+        fillHover: 'errorPrimaryHover',
+        labelTextColor: 'errorTextPrimary',
+        labelTextColorHover: 'errorTextPrimary',
+        loaderFill: 'errorPrimary',
+        loaderItemFill: 'errorItemPrimary',
+    },
+};
+
+var dividerAppearancePrimary = {
+    primary: {
+        fill: 'primaryPrimary',
+        fillHover: 'primaryPrimaryHover',
+        labelTextColor: 'primaryTextPrimary',
+    },
+};
+
+var dividerAppearanceSecondary = {
+    secondary: {
+        fill: 'secondaryPrimary',
+        fillHover: 'secondaryPrimaryHover',
+        labelTextColor: 'secondaryTextPrimary',
+    },
+};
+
+var dividerAppearanceSize = {
+    sizeL: {
+        size: 'l',
+    },
+    sizeM: {
+        size: 'm',
+    },
+    sizeS: {
+        size: 's',
+    },
+};
+
+var dividerAppearanceStyle = {
+    full: {
+        borderColor: '0',
+    },
+    ghost: {
+        fill: 'none',
+        borderColor: '0',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    solid: {
+        borderColor: '0',
+    },
+};
+
+var dividerAppearanceSuccess = {
+    success: {
+        fill: 'successPrimary',
+        fillHover: 'successPrimaryHover',
+        labelTextColor: 'successTextSecondary',
+        labelTextColorHover: 'successTextSecondary',
+        loaderFill: 'successPrimary',
+        loaderItemFill: 'successItemPrimary',
+    },
+};
+
+var dividerAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        fillHover: 'surfacePrimaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+    surfaceQuaternary: {
+        fill: 'surfaceQuaternary',
+        fillHover: 'surfaceQuaternaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceSecondaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+        loaderFill: 'surfaceSecondary',
+        loaderItemFill: 'surfaceItemPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceTertiaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+    },
+};
+
+var dividerAppearanceWarning = {
+    warning: {
+        fill: 'warningPrimary',
+        fillHover: 'warningPrimaryHover',
+        labelTextColor: 'warningTextSecondary',
+        labelTextColorHover: 'warningTextSecondary',
+        loaderFill: 'warningPrimary',
+        loaderItemFill: 'warningItemPrimary',
+    },
+};
+
+var dividerAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, dividerAppearanceSize), dividerAppearanceStyle), dividerAppearanceAccent), dividerAppearanceError), dividerAppearancePrimary), dividerAppearanceSecondary), dividerAppearanceSuccess), dividerAppearanceSurface), dividerAppearanceWarning);
+
+var dividerConfig = {
+    appearance: dividerAppearance,
+    setAppearance: function (appearanceConfig) {
+        dividerConfig.appearance = appearanceConfig;
+    },
+};
+function Divider(props) {
+    var className = props.className, appearance = props.appearance;
+    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
+        var _a;
+        return (tslib_es6.__assign(tslib_es6.__assign({}, resultConfig), (_a = dividerConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
+    }, {});
+    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    var directionClass = propsGenerator.directionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, _a = propsGenerator.sizeClass, sizeClass = _a === void 0 ? 'xs' : _a, widthClass = propsGenerator.widthClass;
+    // @ts-expect-error
+    var hrStyles = useStyles.useStyles(props).styles;
+    return (jsxRuntime.jsx("hr", { className: clsx(className, 'divider', widthClass && "width_".concat(widthClass), directionClass && "divider_direction_".concat(directionClass), sizeClass && "divider_size_".concat(sizeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), fillActiveClass && "fill_active_".concat(fillActiveClass), fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), fillDisabledClass && "fill_disabled_".concat(fillDisabledClass)), style: hrStyles }));
+}
+
+exports.Divider = Divider;
+exports.dividerAppearance = dividerAppearance;
+exports.dividerConfig = dividerConfig;