@itcase/ui 1.9.56 → 1.9.58

package/dist/components/Choice/Choice.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { createRef, useCallback, useMemo, useRef, } from 'react';
+import clsx from 'clsx';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+import { Icon } from 'src/components/Icon';
+import { Loader } from 'src/components/Loader';
+import { Text } from 'src/components/Text';
+import { choiceAppearance } from './Choice.appearance';
+const choiceConfig = {
+    appearance: choiceAppearance,
+    setAppearance: (appearanceConfig) => {
+        choiceConfig.appearance = appearanceConfig;
+    },
+};
+function Choice(props) {
+    const { id, appearance, className, dataTestId, dataTour, name, active = { value: undefined }, itemAfter, itemBefore, options = [], before, after, isDisabled = false, isSkeleton, isCheckbox = false, isLoading = false, setActiveSegment, } = props;
+    const controlRef = useRef(null);
+    const optionsRefs = useMemo(() => new Map(options.map((item) => [item.value, createRef()])), [options]);
+    const onChange = useCallback((event, item) => {
+        const isChecked = isCheckbox ? event.target.checked : true;
+        setActiveSegment && setActiveSegment(item, isChecked);
+    }, [isCheckbox, setActiveSegment]);
+    const appearanceConfig = useAppearanceConfig(appearance, choiceConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { size, fillClass, fillItemActiveClass, fillItemActiveDisabledClass, fillItemActiveHoverClass, fillItemClass, fillItemDisabledClass, fillItemHoverClass, labelTextColor, labelTextColorActive, labelTextColorActiveHover, labelTextColorHover, labelTextSize, labelTextWeight, labelTextWrap, borderColorClass, borderTypeClass, borderWidthClass, iconAfterFill, iconAfterFillActive, iconAfterFillDisabled, iconAfterSize, iconBeforeFill, iconBeforeFillActive, iconBeforeFillDisabled, iconBeforeSize, iconFill, iconFillActive, iconFillDisabled, iconSize, shapeClass, shapeStrengthClass, wrapClass, } = propsGenerator;
+    const { styles } = useStyles(props);
+    return (_jsxs("div", { id: id, className: clsx(className, 'choice', size && `choice_size_${size}`, fillClass && `fill_${fillClass}`, wrapClass && `choice_wrap_${wrapClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, isSkeleton && `choice_skeleton`), ref: controlRef, "data-testid": dataTestId && `${dataTestId}Choice`, "data-tour": dataTour, style: styles, children: [before && _jsx("div", { className: "choice__before", children: before }), isLoading ? (_jsx(Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemPrimary" })) : (_jsx(React.Fragment, { children: options.map((item) => {
+                    const isActive = typeof active === 'object'
+                        ? String(item.value) === String(active.value)
+                        : String(item.value) === String(active);
+                    return (_jsxs("div", { className: clsx('choice__item', size && `choice__item_size_${size}`, (item.icon || item.iconActive) && 'choice__item_icon', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, !isActive && !isDisabled
+                            ? fillItemClass && `fill_${fillItemClass}`
+                            : fillItemDisabledClass &&
+                                `fill_disabled_${fillItemDisabledClass}`, !isActive && !isDisabled
+                            ? fillItemHoverClass && `fill_hover_${fillItemHoverClass}`
+                            : fillItemActiveHoverClass &&
+                                `fill_active_hover_${fillItemActiveHoverClass}`, isActive
+                            ? !isDisabled
+                                ? fillItemActiveClass &&
+                                    `fill_active_${fillItemActiveClass}`
+                                : fillItemActiveDisabledClass &&
+                                    `fill_active_disabled_${fillItemActiveDisabledClass}`
+                            : !isDisabled
+                                ? fillItemClass && `fill_${fillItemClass}`
+                                : fillItemDisabledClass &&
+                                    `fill_disabled_${fillItemDisabledClass}`, !isActive && isDisabled && 'choice__item_state_disabled', isActive &&
+                            isDisabled &&
+                            'choice__item_active_state_disabled', isActive && 'choice__item_active'), ref: optionsRefs.get(item.value), children: [_jsx("input", { id: `${name}-${item.value}`, className: "choice__item-radio", type: isCheckbox ? 'checkbox' : 'radio', name: name, checked: isActive, disabled: isDisabled, value: item.value, onChange: (event) => onChange(event, item) }), _jsxs("label", { className: clsx('choice__item-label', isDisabled && 'choice__item-label_state_disabled'), htmlFor: `${name}-${item.value}`, children: [itemBefore, (item.iconBefore || item.iconBeforeActive) && (_jsx(Icon, { className: "choice__item-icon", iconFill: iconBeforeFill, iconFillActive: iconBeforeFillActive, iconFillDisabled: iconBeforeFillDisabled, iconSize: iconBeforeSize, SvgImage: isActive
+                                            ? item.iconBeforeActive || item.iconBefore
+                                            : item.iconBefore, isActive: isActive, isDisabled: isDisabled })), item.label && (_jsx(Text, { size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextColorActive, textColorActiveHover: labelTextColorActiveHover, textColorHover: labelTextColorHover, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: item.label })), (item.icon || item.iconActive) && (_jsx(Icon, { className: "choice__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive ? item.iconActive || item.icon : item.icon, isActive: isActive })), (item.iconAfter || item.iconAfterActive) && (_jsx(Icon, { className: "choice__item-icon", iconFill: iconAfterFill, iconFillActive: iconAfterFillActive, iconFillDisabled: iconAfterFillDisabled, iconSize: iconAfterSize, SvgImage: isActive
+                                            ? item.iconAfterActive || item.iconAfter
+                                            : item.iconAfter, isActive: isActive })), itemAfter] })] }, `${name}-${item.value}`));
+                }) })), after && _jsx("div", { className: "choice__after", children: after })] }));
+}
+export { Choice, choiceConfig };

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

@@ -0,0 +1,37 @@
+const choiceAppearanceDefault = {
+    defaultMutedPrimary: {
+        fill: 'surfaceSecondary',
+        fillItem: 'surfaceSecondary',
+        fillItemActive: 'accentTertiary',
+        fillItemActiveHover: 'accentPrimary',
+        fillItemHover: 'surfaceTertiary',
+        labelTextColor: 'surfaceTextPrimary',
+        labelTextColorActive: 'surfaceTextPrimary',
+        labelTextColorActiveHover: 'accentTextPrimary',
+        borderColor: 'surfaceBorderSecondary',
+        iconAfterFill: 'surfaceItemQuaternary',
+        iconAfterFillActive: 'surfaceItemSecondary',
+        iconBeforeFill: 'surfaceItemQuaternary',
+        iconBeforeFillActive: 'surfaceItemSecondary',
+        iconFill: 'surfaceItemQuaternary',
+        iconFillActive: 'surfaceItemSecondary',
+    },
+    defaultPrimary: {
+        fill: 'surfaceSecondary',
+        fillItem: 'surfaceSecondary',
+        fillItemActive: 'accentPrimary',
+        fillItemActiveHover: 'accentActiveHoverPrimary',
+        fillItemHover: 'surfaceTertiary',
+        labelTextColor: 'surfaceTextPrimary',
+        labelTextColorActive: 'accentTextPrimary',
+        labelTextColorActiveHover: 'accentTextPrimary',
+        borderColor: 'surfaceBorderQuaternary',
+        iconAfterFill: 'surfaceItemQuaternary',
+        iconAfterFillActive: 'surfaceItemSecondary',
+        iconBeforeFill: 'surfaceItemQuaternary',
+        iconBeforeFillActive: 'surfaceItemSecondary',
+        iconFill: 'surfaceItemQuaternary',
+        iconFillActive: 'surfaceItemSecondary',
+    },
+};
+export { choiceAppearanceDefault };

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

@@ -0,0 +1,18 @@
+const choiceAppearanceDisabled = {
+    disabledPrimary: {
+        fill: 'disabledTertiary',
+        fillItem: 'disabledTertiary',
+        fillItemActive: 'surfaceDisabled',
+        fillItemActiveHover: 'surfaceDisabled',
+        fillItemHover: 'surfaceTertiary',
+        labelTextColor: 'surfaceTextQuaternary',
+        borderColor: 'surfaceBorderPrimary',
+        iconAfterFill: 'surfaceItemPrimary',
+        iconAfterFillActive: 'disabledItemSecondary',
+        iconBeforeFill: 'surfaceItemPrimary',
+        iconBeforeFillActive: 'disabledItemSecondary',
+        iconFill: 'surfaceItemPrimary',
+        iconFillActive: 'disabledItemSecondary',
+    },
+};
+export { choiceAppearanceDisabled };

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

@@ -0,0 +1,17 @@
+const choiceAppearanceError = {
+    errorPrimary: {
+        fill: 'errorTertiary',
+        fillItem: 'errorTertiary',
+        fillItemActive: 'errorSecondary',
+        fillItemHover: 'errorHoverPrimary',
+        labelTextColor: 'errorTextSecondary',
+        borderColor: 'errorBorderQuaternary',
+        iconAfterFill: 'errorItemSecondary',
+        iconAfterFillActive: 'errorItemTertiary',
+        iconBeforeFill: 'errorItemSecondary',
+        iconBeforeFillActive: 'errorItemTertiary',
+        iconFill: 'errorItemSecondary',
+        iconFillActive: 'errorItemTertiary',
+    },
+};
+export { choiceAppearanceError };

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 };