@itcase/ui 1.9.56 → 1.9.57

package/dist/components/Choice/appearance/choiceRequire.js

@@ -0,0 +1,18 @@
+const choiceAppearanceRequire = {
+    requirePrimary: {
+        fill: 'warningTertiary',
+        fillItem: 'warningTertiary',
+        fillItemActive: 'warningSecondary',
+        fillItemHover: 'warningHoverPrimary',
+        labelTextColor: 'warningTextSecondary',
+        labelTextColorActive: 'warningTextPrimary',
+        borderColor: 'warningBorderSecondary',
+        iconAfterFill: 'warningItemSecondary',
+        iconAfterFillActive: 'warningItemTertiary',
+        iconBeforeFill: 'warningItemSecondary',
+        iconBeforeFillActive: 'warningItemTertiary',
+        iconFill: 'warningItemSecondary',
+        iconFillActive: 'warningItemTertiary',
+    },
+};
+export { choiceAppearanceRequire };

package/dist/components/Choice/appearance/choiceShape.js

@@ -0,0 +1,25 @@
+const choiceAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+    roundedL: {
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedM: {
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+};
+export { choiceAppearanceShape };

package/dist/components/Choice/appearance/choiceSize.js

@@ -0,0 +1,18 @@
+const choiceAppearanceSize = {
+    sizeL: {
+        size: 'l',
+        labelTextSize: 'm',
+        iconSize: '24',
+    },
+    sizeM: {
+        size: 'm',
+        labelTextSize: 'm',
+        iconSize: '24',
+    },
+    sizeS: {
+        size: 's',
+        labelTextSize: 's',
+        iconSize: '20',
+    },
+};
+export { choiceAppearanceSize };

package/dist/components/Choice/appearance/choiceStyle.js

@@ -0,0 +1,14 @@
+const choiceAppearanceStyle = {
+    solid: {
+        borderColor: 'none',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    full: {},
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
+    },
+};
+export { choiceAppearanceStyle };

package/dist/components/Choice/appearance/choiceSuccess.js

@@ -0,0 +1,18 @@
+const choiceAppearanceSuccess = {
+    successPrimary: {
+        fill: 'successTertiary',
+        fillItem: 'successTertiary',
+        fillItemActive: 'successSecondary',
+        fillItemHover: 'successHoverPrimary',
+        labelTextColor: 'successTextSecondary',
+        labelTextColorActive: 'successTextActivePrimary',
+        borderColor: 'successBorderSecondary',
+        iconAfterFill: 'successItemSecondary',
+        iconAfterFillActive: 'successItemTertiary',
+        iconBeforeFill: 'successItemSecondary',
+        iconBeforeFillActive: 'successItemTertiary',
+        iconFill: 'successItemSecondary',
+        iconFillActive: 'successItemTertiary',
+    },
+};
+export { choiceAppearanceSuccess };

package/dist/components/Choice/index.js

@@ -0,0 +1,2 @@
+export { Choice, choiceConfig } from './Choice';
+export { choiceAppearance } from './Choice.appearance';

package/dist/components/Code/Code.appearance.js

@@ -0,0 +1,19 @@
+import { codeAppearanceDefault } from './appearance/codeDefault';
+import { codeAppearanceDisabled } from './appearance/codeDisabled';
+import { codeAppearanceError } from './appearance/codeError';
+import { codeAppearanceRequire } from './appearance/codeRequire';
+import { codeAppearanceShape } from './appearance/codeShape';
+import { codeAppearanceSize } from './appearance/codeSize';
+import { codeAppearanceStyle } from './appearance/codeStyle';
+import { codeAppearanceSuccess } from './appearance/codeSuccess';
+const codeAppearance = {
+    ...codeAppearanceDisabled,
+    ...codeAppearanceShape,
+    ...codeAppearanceRequire,
+    ...codeAppearanceSize,
+    ...codeAppearanceDefault,
+    ...codeAppearanceStyle,
+    ...codeAppearanceError,
+    ...codeAppearanceSuccess,
+};
+export { codeAppearance };

package/dist/components/Code/Code.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Code/Code.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import clsx from 'clsx';
+import OtpInput from 'react-otp-input';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { codeAppearance } from './Code.appearance';
+const codeConfig = {
+    appearance: codeAppearance,
+    setAppearance: (appearanceConfig) => {
+        codeConfig.appearance = appearanceConfig;
+    },
+};
+function Code(props) {
+    const { appearance, className, dataTestId, dataTour, initialValue = '', inputAutoFocus, inputCount = 6, inputPlaceholder, inputType = 'number', separatorComponent, before, after, isDisabled, isSkeleton, onBlur, onChange, onFocus, } = props;
+    const [otp, setOtp] = useState(initialValue);
+    const appearanceConfig = useAppearanceConfig(appearance, codeConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { inputBorderColorClass, inputBorderColorHoverClass, inputBorderFocusColorClass, inputBorderWidthClass, inputCaretColorClass, inputFillClass, inputFillHoverClass, inputPlaceholderTextColorClass, inputSizeClass, inputTextColorClass, inputTextSizeClass, inputTextWeightClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
+    const renderInput = (otpInputProps, index) => {
+        return (_jsx("input", { ...otpInputProps, className: clsx('code__input', inputCaretColorClass && `caret-color_${inputCaretColorClass}`, inputFillClass && `fill_${inputFillClass}`, inputFillHoverClass && `fill_hover_${inputFillHoverClass}`, inputPlaceholderTextColorClass &&
+                `placeholder-text-color_${inputPlaceholderTextColorClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, inputTextSizeClass && `text_size_${inputTextSizeClass}`, inputTextColorClass && `text-color_${inputTextColorClass}`, inputTextWeightClass && `text-weight_${inputTextWeightClass}`, inputBorderWidthClass && `border-width_${inputBorderWidthClass}`, inputBorderColorClass && `border-color_${inputBorderColorClass}`, inputBorderColorHoverClass &&
+                `border-color_hover_${inputBorderColorHoverClass}`, inputBorderFocusColorClass &&
+                `border-color_focus_${inputBorderFocusColorClass}`, inputSizeClass && `code__input_size_${inputSizeClass}`, widthClass && `width_${widthClass}`, isSkeleton && `code__input_skeleton`), name: `code-${index}`, autoComplete: "one-time-code", placeholder: inputPlaceholder, onBlur: (event) => {
+                onBlur && onBlur(event);
+                otpInputProps.onBlur(event);
+            }, onFocus: (event) => {
+                onFocus && onFocus(event);
+                otpInputProps.onFocus(event);
+            } }));
+    };
+    useEffect(() => {
+        onChange && onChange(otp);
+    }, [onChange, otp]);
+    return (_jsxs("div", { className: clsx(className, 'code', widthClass, sizeClass && `code_size_${sizeClass}`), "data-testid": dataTestId, "data-tour": dataTour, children: [before, _jsx(OtpInput, { containerStyle: clsx(className, 'code__wrapper'), inputType: inputType, numInputs: inputCount, placeholder: inputPlaceholder, renderInput: renderInput, renderSeparator: separatorComponent || null, shouldAutoFocus: inputAutoFocus, value: otp, onChange: setOtp }), after] }));
+}
+export { Code, codeConfig };

package/dist/components/Code/appearance/codeDefault.js

@@ -0,0 +1,11 @@
+const codeAppearanceDefault = {
+    defaultPrimary: {
+        inputBorderColor: 'surfaceBorderTertiary',
+        inputCaretColor: 'surfaceItemPrimary',
+        inputFill: 'surfaceSecondary',
+        inputFillHover: 'surfaceSecondary',
+        inputPlaceholderTextColor: 'surfaceTextQuaternary',
+        inputTextColor: 'surfaceTextPrimary',
+    },
+};
+export { codeAppearanceDefault };

package/dist/components/Code/appearance/codeDisabled.js

@@ -0,0 +1,12 @@
+const codeAppearanceDisabled = {
+    disabledPrimary: {
+        inputBorderColor: 'surfaceBorderDisabled',
+        inputBorderColorHover: 'surfaceBorderDisabled',
+        inputCaretColor: 'surfaceItemPrimary',
+        inputFill: 'surfaceDisabled',
+        inputFillHover: 'surfaceDisabled',
+        inputPlaceholderTextColor: 'surfaceTextQuaternary',
+        inputTextColor: 'surfaceTextPrimary',
+    },
+};
+export { codeAppearanceDisabled };

package/dist/components/Code/appearance/codeError.js

@@ -0,0 +1,12 @@
+const codeAppearanceError = {
+    errorPrimary: {
+        inputBorderColor: 'errorBorderQuaternary',
+        inputBorderColorHover: 'errorBorderSecondary',
+        inputCaretColor: 'surfaceItemPrimary',
+        inputFill: 'errorTertiary',
+        inputFillHover: 'errorHoverTertiary',
+        inputPlaceholderTextColor: 'surfaceTextQuaternary',
+        inputTextColor: 'surfaceTextPrimary',
+    },
+};
+export { codeAppearanceError };

package/dist/components/Code/appearance/codeRequire.js

@@ -0,0 +1,12 @@
+const codeAppearanceRequire = {
+    requirePrimary: {
+        inputBorderColor: 'warningBorderSecondary',
+        inputBorderColorHover: 'warningBorderSecondary',
+        inputCaretColor: 'surfaceItemPrimary',
+        inputFill: 'warningTertiary',
+        inputFillHover: 'warningTertiary',
+        inputPlaceholderTextColor: 'surfaceTextQuaternary',
+        inputTextColor: 'surfaceTextPrimary',
+    },
+};
+export { codeAppearanceRequire };

package/dist/components/Code/appearance/codeShape.js

@@ -0,0 +1,25 @@
+const codeAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+    roundedL: {
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedM: {
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+};
+export { codeAppearanceShape };

package/dist/components/Code/appearance/codeSize.js

@@ -0,0 +1,13 @@
+const codeAppearanceSize = {
+    sizeL: {
+        size: 'l',
+        inputSize: 'l',
+        inputTextSize: 'xxl',
+    },
+    sizeM: {
+        size: 'm',
+        inputSize: 'm',
+        inputTextSize: 'xxl',
+    },
+};
+export { codeAppearanceSize };

package/dist/components/Code/appearance/codeStyle.js

@@ -0,0 +1,16 @@
+const codeAppearanceStyle = {
+    solid: {
+        inputBorderColor: 'none',
+    },
+    outlined: {
+        inputFill: 'none',
+    },
+    full: {
+        inputBorderColor: 'none',
+    },
+    ghost: {
+        inputBorderColor: 'none',
+        inputFill: 'none',
+    },
+};
+export { codeAppearanceStyle };

package/dist/components/Code/appearance/codeSuccess.js

@@ -0,0 +1,12 @@
+const codeAppearanceSuccess = {
+    successPrimary: {
+        inputBorderColor: 'successBorderSecondary',
+        inputBorderColorHover: 'successBorderSecondary',
+        inputCaretColor: 'surfaceItemPrimary',
+        inputFill: 'successTertiary',
+        inputFillHover: 'successHoverTertiary',
+        inputPlaceholderTextColor: 'surfaceTextQuaternary',
+        inputTextColor: 'surfaceTextPrimary',
+    },
+};
+export { codeAppearanceSuccess };

package/dist/components/Code/index.js

@@ -0,0 +1,2 @@
+export { Code, codeConfig } from './Code';
+export { codeAppearance } from './Code.appearance';

package/dist/components/CookiesWarning/CookiesWarning.appearance.js

@@ -0,0 +1,5 @@
+import { cookiesWarningAppearanceDefault } from './appearance/cookiesWarningDefault';
+const cookiesWarningAppearance = {
+    ...cookiesWarningAppearanceDefault,
+};
+export { cookiesWarningAppearance };

package/dist/components/CookiesWarning/CookiesWarning.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/CookiesWarning/CookiesWarning.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import clsx from 'clsx';
+import Cookies from 'js-cookie';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { Button } from 'src/components/Button';
+import { Text } from 'src/components/Text';
+import { cookiesWarningAppearance } from './CookiesWarning.appearance';
+const cookiesWarningConfig = {
+    appearance: cookiesWarningAppearance,
+    setAppearance: (appearanceConfig) => {
+        cookiesWarningConfig.appearance = appearanceConfig;
+    },
+};
+function CookiesWarning(props) {
+    const { appearance, className, dataTestId, dataTour, message, isHideOnScroll = false, } = props;
+    const cookiesWarningRef = useRef(null);
+    const isOpen = useMemo(() => Cookies.get('cookies-warning') !== 'close', []);
+    const closeCookiesWarning = useCallback(() => {
+        cookiesWarningRef.current?.classList.add('cookies-warning_state_hidden');
+        Cookies.set('cookies-warning', 'close');
+    }, []);
+    useEffect(() => {
+        if (isHideOnScroll) {
+            window.addEventListener('scroll', closeCookiesWarning, true);
+        }
+        return () => {
+            window.removeEventListener('scroll', closeCookiesWarning, true);
+        };
+    }, [closeCookiesWarning, isHideOnScroll]);
+    useEffect(() => {
+        if (!isOpen) {
+            window.removeEventListener('scroll', closeCookiesWarning, true);
+        }
+    }, [closeCookiesWarning, isOpen]);
+    const appearanceConfig = useAppearanceConfig(appearance, cookiesWarningConfig);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { fillClass, messageTextColor, messageTextSize, buttonAppearance, buttonFill, buttonFillHover, buttonLabel, buttonLabelSize, buttonLabelTextColor, buttonShape, buttonSize, buttonWidth, elevationClass, } = propsGenerator;
+    return (isOpen && (_jsx("div", { className: clsx('cookies-warning', className, fillClass && `fill_${fillClass}`, elevationClass && `elevation_${elevationClass}`), ref: cookiesWarningRef, "data-testid": dataTestId, "data-tour": dataTour, children: _jsxs("div", { className: "cookies-warning__inner", children: [_jsx(Text, { size: messageTextSize, textColor: messageTextColor, children: message }), _jsx(Button, { appearance: buttonAppearance, width: buttonWidth, size: buttonSize, fill: buttonFill, fillHover: buttonFillHover, labelTextColor: buttonLabelTextColor, labelTextSize: buttonLabelSize, shape: buttonShape, onClick: closeCookiesWarning, children: buttonLabel })] }) })));
+}
+export { CookiesWarning, cookiesWarningConfig };

package/dist/components/CookiesWarning/appearance/cookiesWarningDefault.js

@@ -0,0 +1,12 @@
+const cookiesWarningAppearanceDefault = {
+    defaultPrimary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentHoverPrimary',
+        messageTextColor: 'surfaceTextPrimary',
+        messageTextSize: 's',
+        elevation: '8',
+        buttonAppearance: 'accentPrimary sizeXL',
+        buttonWidth: 'fill',
+    },
+};
+export { cookiesWarningAppearanceDefault };

package/dist/components/CookiesWarning/index.js

@@ -0,0 +1,3 @@
+import { CookiesWarning, cookiesWarningConfig } from './CookiesWarning';
+import { cookiesWarningAppearance } from './CookiesWarning.appearance';
+export { CookiesWarning, cookiesWarningAppearance, cookiesWarningConfig };

package/dist/components/Dadata/Dadata.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Dadata/Dadata.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import clsx from 'clsx';
+import { PartySuggestions } from 'react-dadata';
+import { Input } from 'src/components/Input';
+function Dadata(props) {
+    const { dataTestId, dataTour, delay, input, inputProps, meta, token, setValue, } = props;
+    const dadataInputProps = useMemo(() => {
+        return {
+            ...inputProps,
+            className: clsx('react-dadata__input', meta?.active && 'input_state_focus', meta?.error &&
+                meta?.touched &&
+                `input_state_${meta.error.key || 'error'}`),
+            inputValue: input?.value,
+            onBlur: input?.onBlur,
+            onChange: input?.onChange,
+            onFocus: input?.onFocus,
+        };
+    }, [
+        inputProps,
+        meta?.active,
+        meta?.error,
+        meta?.touched,
+        input?.value,
+        input?.onFocus,
+        input?.onBlur,
+        input?.onChange,
+    ]);
+    return (_jsx(PartySuggestions, { minChars: 3, customInput: DadataCustomInput, "data-testid": dataTestId, "data-tour": dataTour, delay: delay || 750, inputProps: dadataInputProps, token: token, onChange: setValue }));
+}
+function DadataCustomInput(props) {
+    const { inputValue, ...otherProps } = props;
+    return _jsx(Input, { ...otherProps, value: inputValue });
+}
+export { Dadata };

package/dist/components/Dadata/index.js

@@ -0,0 +1 @@
+export { Dadata } from './Dadata';

package/dist/components/DatePeriod/DatePeriod.appearance.js

@@ -0,0 +1,9 @@
+import { datePeriodAppearanceShape } from './appearance/datePeriodShape';
+import { datePeriodAppearanceSize } from './appearance/datePeriodSize';
+import { datePeriodAppearanceSurface } from './appearance/datePeriodSurface';
+const datePeriodAppearance = {
+    ...datePeriodAppearanceSurface,
+    ...datePeriodAppearanceSize,
+    ...datePeriodAppearanceShape,
+};
+export { datePeriodAppearance };

package/dist/components/DatePeriod/DatePeriod.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/DatePeriod/DatePeriod.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import clsx from 'clsx';
+import { DateTime } from 'luxon';
+import { DATE_PERIOD_INTERVALS } from '@itcase/common';
+import { Chips, ChipsGroup } from 'src/components/Chips';
+import { DatePickerInput } from 'src/components/DatePicker';
+import { Select } from 'src/components/Select';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { mergeAppearanceKeys } from 'src/utils';
+import { datePeriodAppearance } from './DatePeriod.appearance';
+const datePeriodConfig = {
+    appearance: datePeriodAppearance,
+    setAppearance: (appearanceConfig) => {
+        datePeriodConfig.appearance = appearanceConfig;
+    },
+};
+function DatePeriod(props) {
+    const { appearance, className, dataTestId, dataTour, datePeriodIntervalsList = Object.values(DATE_PERIOD_INTERVALS), datePeriodSelectFirstOptions, datePeriodSelectFirstPlaceholder, datePeriodSelectFirstValue, datePeriodSelectSecondOptions, datePeriodSelectSecondPlaceholder, datePeriodSelectSecondValue, datePeriodValueEnd, datePeriodValueStart, monthsShown, popperPlacement, selectsRange = true, showWeekNumbers = true, isDisabled, isSkeleton, onChangeDatePeriod, onChangeDatePeriodFirstSelect, onChangeDatePeriodSecondSelect, onKeyDown, } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, datePeriodConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { fillClass, chipsAppearance, chipsAppearanceSize, chipsShape, datePickerAppearance, datePickerAppearanceSize, datePickerInputAppearance, datePickerInputAppearanceSize, datePickerInputFillHover, datePickerInputTextSize, selectAppearance, selectAppearanceSize, selectShape, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
+    const onClickPeriodChips = useCallback((selectedPeriodItem) => {
+        const dateStartIso = selectedPeriodItem.dateIntervalsList[0];
+        const dateEndIso = selectedPeriodItem.dateIntervalsList[1];
+        onChangeDatePeriod?.(new Date(dateStartIso), new Date(dateEndIso));
+    }, [onChangeDatePeriod]);
+    const checkIsChipsActive = useCallback((targetPeriodItem) => {
+        const dateStartIso = targetPeriodItem.dateIntervalsList[0];
+        const dateEndIso = targetPeriodItem.dateIntervalsList[1];
+        let normalizedDatePeriodValueStart = null;
+        let normalizedDatePeriodValueEnd = null;
+        if (datePeriodValueStart) {
+            normalizedDatePeriodValueStart = DateTime.fromJSDate(new Date(datePeriodValueStart)).toISODate();
+        }
+        if (datePeriodValueEnd) {
+            normalizedDatePeriodValueEnd = DateTime.fromJSDate(new Date(datePeriodValueEnd)).toISODate();
+        }
+        return (dateStartIso === normalizedDatePeriodValueStart &&
+            dateEndIso === normalizedDatePeriodValueEnd);
+    }, [datePeriodValueEnd, datePeriodValueStart]);
+    return (_jsxs("div", { className: clsx(className, 'date-period', sizeClass && `date-period_size_${sizeClass}`, isSkeleton && `date-period_skeleton`), "data-testid": dataTestId, "data-tour": dataTour, children: [_jsxs("div", { className: clsx('date-period__wrapper', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`, 'cursor_type_pointer'), children: [_jsx(ChipsGroup, { className: "date-period__choice", direction: "horizontal", children: datePeriodIntervalsList.map((datePeriodItem) => (_jsx(Chips, { appearance: mergeAppearanceKeys(chipsAppearance, chipsAppearanceSize), label: datePeriodItem.label, shape: chipsShape, isActive: checkIsChipsActive(datePeriodItem), onClick: () => onClickPeriodChips(datePeriodItem) }, datePeriodItem.value))) }), _jsx(DatePickerInput, { className: "date-period__datepicker", datePickerProps: {
+                            appearance: mergeAppearanceKeys(datePickerAppearance, datePickerAppearanceSize),
+                            dateFormat: 'dd/MM/yyyy',
+                            monthsShown: monthsShown,
+                            popperPlacement: popperPlacement,
+                            selectsRange: selectsRange,
+                            showWeekNumbers: showWeekNumbers,
+                            isClearable: false,
+                            onKeyDown: onKeyDown,
+                        }, endValue: datePeriodValueEnd, inputProps: {
+                            appearance: mergeAppearanceKeys(datePickerInputAppearance, datePickerInputAppearanceSize, 'ghost'),
+                            className: `date-period__datepicker-input date-period__datepicker-input_size_${sizeClass} `,
+                            fillHover: datePickerInputFillHover,
+                            textSize: datePickerInputTextSize,
+                            placeholder: 'Выбрать период',
+                        }, value: datePeriodValueStart, onChange: onChangeDatePeriod })] }), datePeriodSelectFirstOptions && (_jsx(Select, { appearance: mergeAppearanceKeys(selectAppearance, selectAppearanceSize), className: "date-period__select", width: "180px", minWidth: "180px", options: datePeriodSelectFirstOptions, placeholder: datePeriodSelectFirstPlaceholder, shape: selectShape, value: datePeriodSelectFirstValue, isSearchable: true, onChange: onChangeDatePeriodFirstSelect })), datePeriodSelectSecondOptions && (_jsx(Select, { appearance: mergeAppearanceKeys(selectAppearance, selectAppearanceSize), className: "date-period__select", width: "180px", minWidth: "180px", options: datePeriodSelectSecondOptions, placeholder: datePeriodSelectSecondPlaceholder, shape: selectShape, value: datePeriodSelectSecondValue, isSearchable: true, onChange: onChangeDatePeriodSecondSelect }))] }));
+}
+export { DatePeriod, datePeriodConfig };

package/dist/components/DatePeriod/appearance/datePeriodShape.js

@@ -0,0 +1,35 @@
+const datePeriodAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        chipsShape: 'rounded',
+        selectShape: 'rounded',
+        shape: 'rounded',
+    },
+    roundedXL: {
+        chipsShape: 'rounded',
+        selectShape: 'rounded',
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+    roundedL: {
+        chipsShape: 'rounded',
+        selectShape: 'rounded',
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedM: {
+        chipsShape: 'rounded',
+        selectShape: 'rounded',
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        chipsShape: 'rounded',
+        selectShape: 'rounded',
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+};
+export { datePeriodAppearanceShape };

package/dist/components/DatePeriod/appearance/datePeriodSize.js

@@ -0,0 +1,24 @@
+const datePeriodAppearanceSize = {
+    sizeL: {
+        size: 'l',
+        chipsAppearanceSize: 'sizeXL',
+        datePickerAppearanceSize: 'sizeL',
+        datePickerInputAppearanceSize: 'sizeL',
+        selectAppearanceSize: 'sizeL',
+    },
+    sizeM: {
+        size: 'm',
+        chipsAppearanceSize: 'sizeL',
+        datePickerAppearanceSize: 'sizeM',
+        datePickerInputAppearanceSize: 'sizeM',
+        selectAppearanceSize: 'sizeM',
+    },
+    sizeS: {
+        size: 's',
+        chipsAppearanceSize: 'sizeM',
+        datePickerAppearanceSize: 'sizeS',
+        datePickerInputAppearanceSize: 'sizeS',
+        selectAppearanceSize: 'sizeS',
+    },
+};
+export { datePeriodAppearanceSize };

package/dist/components/DatePeriod/appearance/datePeriodSurface.js

@@ -0,0 +1,17 @@
+const datePeriodAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        chipsAppearance: 'surfacePrimary ghost',
+        datePickerAppearance: 'surfacePrimary',
+        datePickerInputAppearance: 'defaultPrimary',
+        selectAppearance: 'defaultPrimary solid',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        chipsAppearance: 'surfacePrimary ghost',
+        datePickerAppearance: 'surfacePrimary',
+        datePickerInputAppearance: 'defaultPrimary',
+        selectAppearance: 'defaultPrimary solid',
+    },
+};
+export { datePeriodAppearanceSurface };

package/dist/components/DatePeriod/index.js

@@ -0,0 +1,2 @@
+export { DatePeriod, datePeriodConfig } from './DatePeriod';
+export { datePeriodAppearance } from './DatePeriod.appearance';

package/dist/components/DatePicker/DatePicker.appearance.js

@@ -0,0 +1,9 @@
+import { datePickerSize } from './appearance/datePickerSize';
+import { datePickerStyle } from './appearance/datePickerStyle';
+import { datePickerAppearanceSurface } from './appearance/datePickerSurface';
+const datePickerAppearance = {
+    ...datePickerAppearanceSurface,
+    ...datePickerSize,
+    ...datePickerStyle,
+};
+export { datePickerAppearance };

package/dist/components/DatePicker/DatePicker.interface.js

@@ -0,0 +1 @@
+export {};