@itcase/ui 1.1.9 → 1.1.11

package/dist/Choice-BJd9Jx4D.js

@@ -0,0 +1,98 @@
+import { j as jsxRuntimeExports } from './jsx-runtime-C2uP7l8s.js';
+import React__default, { useRef, useMemo, createRef, useCallback } from 'react';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
+import { I as Icon } from './Icon-Duj1nynQ.js';
+import { T as Text } from './Text-CxrzHFN1.js';
+
+var choiceConfig = {
+    appearance: {},
+    setAppearance: function (newComponent) {
+        choiceConfig.appearance = newComponent;
+    },
+};
+var Choice = React__default.forwardRef(function Choice(props, ref) {
+    var active = props.active, activeIcon = props.activeIcon, activeIconItemFill = props.activeIconItemFill, after = props.after, appearance = props.appearance, before = props.before, className = props.className, icon = props.icon, iconFillDisabled = props.iconFillDisabled, iconItemFill = props.iconItemFill, iconSize = props.iconSize, isDisabled = props.isDisabled, isMultiple = props.isMultiple, labelTextActiveColor = props.labelTextActiveColor, labelTextActiveColorDisabled = props.labelTextActiveColorDisabled, labelTextColor = props.labelTextColor, labelTextColorDisabled = props.labelTextColorDisabled, labelTextWeight = props.labelTextWeight, labelTextSize = props.labelTextSize, name = props.name, options = props.options, set = props.set, _a = props.size, size = _a === void 0 ? 'normal' : _a, type = props.type, setActiveSegment = props.setActiveSegment;
+    var controlRef = useRef(null);
+    var optionsRefs = useMemo(function () { return new Map(options.map(function (item) { return [item.value, createRef()]; })); }, [options]);
+    var onChange = useCallback(function (event, item) {
+        var isChecked = isMultiple ? event.target.checked : true;
+        setActiveSegment && setActiveSegment(item, isChecked);
+    }, [isMultiple, setActiveSegment]);
+    var borderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var borderWidthClass = useDeviceTargetClass(props, {
+        prefix: 'border-width_',
+        propsKey: 'borderWidth',
+    });
+    var borderTypeClass = useDeviceTargetClass(props, {
+        prefix: 'border_type_',
+        propsKey: 'borderType',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'choice_shape_',
+        propsKey: 'shape',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillDisabledClass = useDeviceTargetClass(props, {
+        prefix: 'fill_disabled_',
+        propsKey: 'fillDisabled',
+    });
+    var fillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var fillActiveClass = useDeviceTargetClass(props, {
+        prefix: 'fill_active_',
+        propsKey: 'fillActive',
+    });
+    var fillActiveDisabledClass = useDeviceTargetClass(props, {
+        prefix: 'fill_active_disabled_',
+        propsKey: 'fillActiveDisabled',
+    });
+    var appearanceConfig = useMemo(function () { return appearance && choiceConfig.appearance && choiceConfig.appearance[appearance]; }, [appearance, choiceConfig]);
+    return (jsxRuntimeExports.jsx("div", { className: clsx(className, 'choice', shapeClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
+                "choice_shape_".concat(appearanceConfig.shape).replace(/([A-Z])/g, '-$1').toLowerCase()), !isDisabled
+            ? fillClass ||
+                ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
+                    "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase())
+            : fillDisabledClass, borderColorClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderColor) &&
+                "border-color_".concat(appearanceConfig.borderColor)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()), borderWidthClass, borderTypeClass, set && "choice_set_".concat(set), size && "choice_size_".concat(size), type && "choice_type_".concat(type)), ref: controlRef, children: jsxRuntimeExports.jsx("div", { className: "choice__wrapper", children: options === null || options === void 0 ? void 0 : options.map(function (item, i) { return (jsxRuntimeExports.jsxs("div", { className: clsx('choice__item', !isDisabled &&
+                    (fillHoverClass ||
+                        ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
+                            "fill_active_".concat(appearanceConfig.fillHover)
+                                .replace(/([A-Z])/g, '-$1')
+                                .toLowerCase())), item.value !== active.value && isDisabled && 'choice__item_state_disabled', item.value === active.value
+                    ? !isDisabled
+                        ? fillActiveClass ||
+                            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillActive) &&
+                                "fill_active_".concat(appearanceConfig.fillActive)
+                                    .replace(/([A-Z])/g, '-$1')
+                                    .toLowerCase())
+                        : fillActiveDisabledClass
+                    : !isDisabled
+                        ? fillClass
+                        : fillDisabledClass, item.value === active.value && isDisabled && 'choice__item_active_state_disabled', item.value === active.value && 'choice__item_active'), ref: optionsRefs.get(item.value), children: [jsxRuntimeExports.jsx("input", { checked: item.value === active.value, className: "choice__item-radio", id: "".concat(name, "-").concat(item.value), name: name, disabled: isDisabled, type: isMultiple ? 'checkbox' : 'radio', value: item.value, onChange: function (event) { return onChange(event, item); } }), jsxRuntimeExports.jsxs("label", { className: clsx('choice__item-label', isDisabled && 'choice__item-label_state_disabled'), htmlFor: "".concat(name, "-").concat(item.value), children: [before, item.label && (jsxRuntimeExports.jsx(Text, { size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textColor: item.value === active.value
+                                    ? !isDisabled
+                                        ? labelTextActiveColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextActiveColor)
+                                        : labelTextActiveColorDisabled
+                                    : !isDisabled
+                                        ? labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor)
+                                        : labelTextColorDisabled, textWeight: labelTextWeight, children: item.label })), (icon || activeIcon) && (jsxRuntimeExports.jsx(Icon, { className: "choice__item-icon", iconFill: item.value === active.value ? (activeIconItemFill || item.activeIconItemFill) : (iconItemFill || item.iconItemFill), iconFillDisabled: isDisabled ? iconFillDisabled : undefined, iconSize: iconSize, SvgImage: item.value === active.value ? activeIcon : icon })), after] })] }, item.value)); }) }) }));
+});
+Choice.defaultProps = {
+    active: { value: undefined },
+    options: [],
+    size: 'normal',
+};
+
+export { Choice as C, choiceConfig as c };

package/dist/Code-DkWVSDOy.js

@@ -0,0 +1,273 @@
+import { _ as __assign } from './_tslib-S-VPg1Cw.js';
+import { j as jsxRuntimeExports } from './jsx-runtime-C2uP7l8s.js';
+import React__default, { useState, useEffect } from 'react';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
+
+var isStyleObject = function (obj) { return typeof obj === 'object' && obj !== null; };
+var OTPInput = function (_a) {
+    var _b = _a.value, value = _b === void 0 ? '' : _b, _c = _a.numInputs, numInputs = _c === void 0 ? 4 : _c, onChange = _a.onChange, onPaste = _a.onPaste, renderInput = _a.renderInput, _d = _a.shouldAutoFocus, shouldAutoFocus = _d === void 0 ? false : _d, _e = _a.inputType, inputType = _e === void 0 ? 'text' : _e, renderSeparator = _a.renderSeparator, placeholder = _a.placeholder, containerStyle = _a.containerStyle, inputStyle = _a.inputStyle, _f = _a.skipDefaultStyles, skipDefaultStyles = _f === void 0 ? false : _f;
+    var _g = React__default.useState(0), activeInput = _g[0], setActiveInput = _g[1];
+    var inputRefs = React__default.useRef([]);
+    var getOTPValue = function () { return (value ? value.toString().split('') : []); };
+    var isInputNum = inputType === 'number' || inputType === 'tel';
+    React__default.useEffect(function () {
+        inputRefs.current = inputRefs.current.slice(0, numInputs);
+    }, [numInputs]);
+    React__default.useEffect(function () {
+        var _a;
+        if (shouldAutoFocus) {
+            (_a = inputRefs.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [shouldAutoFocus]);
+    var getPlaceholderValue = function () {
+        if (typeof placeholder === 'string') {
+            if (placeholder.length === numInputs) {
+                return placeholder;
+            }
+            if (placeholder.length > 0) {
+                console.error('Length of the placeholder should be equal to the number of inputs.');
+            }
+        }
+        return undefined;
+    };
+    var isInputValueValid = function (value) {
+        var isTypeValid = isInputNum ? !isNaN(Number(value)) : typeof value === 'string';
+        return isTypeValid && value.trim().length === 1;
+    };
+    var handleChange = function (event) {
+        var value = event.target.value;
+        if (isInputValueValid(value)) {
+            changeCodeAtFocus(value);
+            focusInput(activeInput + 1);
+        }
+    };
+    var handleInputChange = function (event) {
+        var nativeEvent = event.nativeEvent;
+        var value = event.target.value;
+        if (!isInputValueValid(value)) {
+            // Pasting from the native autofill suggestion on a mobile device can pass
+            // the pasted string as one long input to one of the cells. This ensures
+            // that we handle the full input and not just the first character.
+            if (value.length === numInputs) {
+                var hasInvalidInput = value.split('').some(function (cellInput) { return !isInputValueValid(cellInput); });
+                if (!hasInvalidInput) {
+                    handleOTPChange(value.split(''));
+                    focusInput(numInputs - 1);
+                }
+            }
+            // @ts-expect-error - This was added previously to handle and edge case
+            // for dealing with keyCode "229 Unidentified" on Android. Check if this is
+            // still needed.
+            if (nativeEvent.data === null && nativeEvent.inputType === 'deleteContentBackward') {
+                event.preventDefault();
+                changeCodeAtFocus('');
+                focusInput(activeInput - 1);
+            }
+            // Clear the input if it's not valid value because firefox allows
+            // pasting non-numeric characters in a number type input
+            event.target.value = '';
+        }
+    };
+    var handleFocus = function (event) { return function (index) {
+        setActiveInput(index);
+        event.target.select();
+    }; };
+    var handleBlur = function () {
+        setActiveInput(activeInput - 1);
+    };
+    var handleKeyDown = function (event) {
+        var otp = getOTPValue();
+        if ([event.code, event.key].includes('Backspace')) {
+            event.preventDefault();
+            changeCodeAtFocus('');
+            focusInput(activeInput - 1);
+        }
+        else if (event.code === 'Delete') {
+            event.preventDefault();
+            changeCodeAtFocus('');
+        }
+        else if (event.code === 'ArrowLeft') {
+            event.preventDefault();
+            focusInput(activeInput - 1);
+        }
+        else if (event.code === 'ArrowRight') {
+            event.preventDefault();
+            focusInput(activeInput + 1);
+        }
+        // React does not trigger onChange when the same value is entered
+        // again. So we need to focus the next input manually in this case.
+        else if (event.key === otp[activeInput]) {
+            event.preventDefault();
+            focusInput(activeInput + 1);
+        }
+        else if (event.code === 'Spacebar' ||
+            event.code === 'Space' ||
+            event.code === 'ArrowUp' ||
+            event.code === 'ArrowDown') {
+            event.preventDefault();
+        }
+    };
+    var focusInput = function (index) {
+        var _a, _b;
+        var activeInput = Math.max(Math.min(numInputs - 1, index), 0);
+        if (inputRefs.current[activeInput]) {
+            (_a = inputRefs.current[activeInput]) === null || _a === void 0 ? void 0 : _a.focus();
+            (_b = inputRefs.current[activeInput]) === null || _b === void 0 ? void 0 : _b.select();
+            setActiveInput(activeInput);
+        }
+    };
+    var changeCodeAtFocus = function (value) {
+        var otp = getOTPValue();
+        otp[activeInput] = value[0];
+        handleOTPChange(otp);
+    };
+    var handleOTPChange = function (otp) {
+        var otpValue = otp.join('');
+        onChange(otpValue);
+    };
+    var handlePaste = function (event) {
+        var _a;
+        event.preventDefault();
+        var otp = getOTPValue();
+        var nextActiveInput = activeInput;
+        // Get pastedData in an array of max size (num of inputs - current position)
+        var pastedData = event.clipboardData
+            .getData('text/plain')
+            .slice(0, numInputs - activeInput)
+            .split('');
+        // Prevent pasting if the clipboard data contains non-numeric values for number inputs
+        if (isInputNum && pastedData.some(function (value) { return isNaN(Number(value)); })) {
+            return;
+        }
+        // Paste data from focused input onwards
+        for (var pos = 0; pos < numInputs; ++pos) {
+            if (pos >= activeInput && pastedData.length > 0) {
+                otp[pos] = (_a = pastedData.shift()) !== null && _a !== void 0 ? _a : '';
+                nextActiveInput++;
+            }
+        }
+        focusInput(nextActiveInput);
+        handleOTPChange(otp);
+    };
+    return (React__default.createElement("div", { style: Object.assign({ display: 'flex', alignItems: 'center' }, isStyleObject(containerStyle) && containerStyle), className: typeof containerStyle === 'string' ? containerStyle : undefined, onPaste: onPaste }, Array.from({ length: numInputs }, function (_, index) { return index; }).map(function (index) {
+        var _a, _b, _c;
+        return (React__default.createElement(React__default.Fragment, { key: index },
+            renderInput({
+                value: (_a = getOTPValue()[index]) !== null && _a !== void 0 ? _a : '',
+                placeholder: (_c = (_b = getPlaceholderValue()) === null || _b === void 0 ? void 0 : _b[index]) !== null && _c !== void 0 ? _c : undefined,
+                ref: function (element) { return (inputRefs.current[index] = element); },
+                onChange: handleChange,
+                onFocus: function (event) { return handleFocus(event)(index); },
+                onBlur: handleBlur,
+                onKeyDown: handleKeyDown,
+                onPaste: handlePaste,
+                autoComplete: 'off',
+                'aria-label': "Please enter OTP character ".concat(index + 1),
+                style: Object.assign(!skipDefaultStyles ? { width: '1em', textAlign: 'center' } : {}, isStyleObject(inputStyle) ? inputStyle : {}),
+                className: typeof inputStyle === 'string' ? inputStyle : undefined,
+                type: inputType,
+                inputMode: isInputNum ? 'numeric' : 'text',
+                onInput: handleInputChange,
+            }, index),
+            index < numInputs - 1 && (typeof renderSeparator === 'function' ? renderSeparator(index) : renderSeparator)));
+    })));
+};
+
+function Code(props) {
+    var className = props.className, inputPlaceholder = props.inputPlaceholder, inputAutoFocus = props.inputAutoFocus, inputCount = props.inputCount, inputType = props.inputType, before = props.before, after = props.after, separatorComponent = props.separatorComponent, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus;
+    var _a = useState(''), otp = _a[0], setOtp = _a[1];
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'inputFill',
+    });
+    var fillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'inputFillHover',
+    });
+    var sizeClass = useDeviceTargetClass(props, {
+        prefix: 'code__input_size_',
+        propsKey: 'inputSize',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'code__input_shape_',
+        propsKey: 'inputShape',
+    });
+    var textSizeClass = useDeviceTargetClass(props, {
+        prefix: 'text_size_',
+        propsKey: 'inputTextSize',
+    });
+    var textColorClass = useDeviceTargetClass(props, {
+        prefix: 'text-color_',
+        propsKey: 'inputTextColor',
+    });
+    var caretClass = useDeviceTargetClass(props, {
+        prefix: 'caret-color_',
+        propsKey: 'inputCaretColor',
+    });
+    var placeholderClass = useDeviceTargetClass(props, {
+        prefix: 'placeholder-text-color_',
+        propsKey: 'inputPlaceholderTextColor',
+    });
+    var weightClass = useDeviceTargetClass(props, {
+        prefix: 'text-weight_',
+        propsKey: 'inputTextWeight',
+    });
+    var borderWidthClass = useDeviceTargetClass(props, {
+        prefix: 'border-width_',
+        propsKey: 'inputBorderWidth',
+    });
+    var borderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'inputBorderColor',
+    });
+    var borderColorHoverClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_hover_',
+        propsKey: 'inputBorderColorHover',
+    });
+    var borderColorFocusClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_focus_',
+        propsKey: 'inputBorderFocusColor',
+    });
+    var gapClass = useDeviceTargetClass(props, {
+        prefix: 'gap_',
+        propsKey: 'gap',
+    });
+    var widthClass = useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    // NOTE: too many dependencies for "useCallback" and possible too many checks
+    var renderInput = function (otpInputProps) {
+        return (jsxRuntimeExports.jsx("input", __assign({}, otpInputProps, { autoComplete: "one-time-code", className: clsx('code__input', caretClass, fillClass, fillHoverClass, placeholderClass, shapeClass, textSizeClass, textColorClass, weightClass, borderWidthClass, borderColorClass, borderColorHoverClass, borderColorFocusClass, sizeClass, fillClass), onBlur: function (event) {
+                onBlur && onBlur(event);
+                otpInputProps.onBlur(event);
+            }, onFocus: function (event) {
+                onFocus && onFocus(event);
+                otpInputProps.onFocus(event);
+            } })));
+    };
+    useEffect(function () {
+        onChange && onChange(otp);
+    }, [otp]);
+    return (jsxRuntimeExports.jsxs("div", { className: clsx(className, 'code', widthClass), children: [before, jsxRuntimeExports.jsx(OTPInput, { containerStyle: clsx(className, 'code__wrapper', gapClass), inputType: inputType, numInputs: inputCount, placeholder: inputPlaceholder, renderInput: renderInput, renderSeparator: separatorComponent || null, shouldAutoFocus: inputAutoFocus, value: otp, onChange: setOtp }), after] }));
+}
+Code.defaultProps = {
+    inputCount: 6,
+    gap: 12,
+    inputType: 'number',
+    inputSize: 'normal',
+    inputBorderWidth: 1,
+    inputPlaceholder: 0,
+    inputBorderColor: 'surfaceBorderTertiary',
+    inputBorderColorHover: 'surfaceBorderQuaternary',
+    inputBorderFocusColor: 'surfaceBorderAccent',
+    inputFill: 'surfacePrimary',
+    inputFillHover: 'surfaceSecondary',
+    inputShape: 'rounded',
+    inputTextColor: 'surfaceTextPrimary',
+    inputTextSize: 'xxl',
+    inputCaretColor: 'surfaceItemAccent',
+};
+
+export { Code as C };

package/dist/ContextMenuItem-CpZ3pjky.js

@@ -0,0 +1,46 @@
+import { j as jsxRuntimeExports } from './jsx-runtime-C2uP7l8s.js';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
+import { D as Divider } from './Divider-Dhj6sMWd.js';
+import { I as Icon } from './Icon-Duj1nynQ.js';
+import { T as Text } from './Text-CxrzHFN1.js';
+
+function ContextMenu(props) {
+    var id = props.id, children = props.children, className = props.className, set = props.set, onClick = props.onClick;
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'context-menu_shape_',
+        propsKey: 'shape',
+    });
+    return (jsxRuntimeExports.jsx("div", { className: clsx(className, 'context-menu', set && "context-menu_set_".concat(set), shapeClass, fillClass), id: id, onClick: onClick, children: children }));
+}
+ContextMenu.defaultProps = {
+    tag: 'div',
+};
+
+function ContextMenuItem(props) {
+    var id = props.id, className = props.className, label = props.label, dividerWidth = props.dividerWidth, dividerDirection = props.dividerDirection, dividerSize = props.dividerSize, dividerFill = props.dividerFill, iconBefore = props.iconBefore, iconBeforeSize = props.iconBeforeSize, iconBeforeBgFill = props.iconBeforeBgFill, iconBeforeFill = props.iconBeforeFill, iconAfter = props.iconAfter, iconAfterSize = props.iconAfterSize, iconAfterBgFill = props.iconAfterBgFill, iconAfterFill = props.iconAfterFill, onClick = props.onClick, labelTextColor = props.labelTextColor, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight;
+    useDeviceTargetClass(props, {
+        propsKey: 'labelTextSize',
+    });
+    useDeviceTargetClass(props, {
+        propsKey: 'labelTextColor',
+    });
+    useDeviceTargetClass(props, {
+        propsKey: 'labelTextWeight',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    return (jsxRuntimeExports.jsxs("div", { className: clsx(className, 'context-menu__item', fillClass, fillHoverClass, onClick && 'cursor_type_pointer'), id: id, onClick: onClick, children: [jsxRuntimeExports.jsxs("div", { className: "context-menu__item-wrapper", children: [iconBefore && (jsxRuntimeExports.jsx(Icon, { className: "context-menu__item-icon-before", SvgImage: iconBefore, size: iconBeforeSize, bgFill: iconBeforeBgFill, fill: iconBeforeFill })), label && (jsxRuntimeExports.jsx(Text, { className: "context-menu__item-title", textColor: labelTextColor, size: labelTextSize, textWeight: labelTextWeight, children: label })), iconAfter && (jsxRuntimeExports.jsx(Icon, { className: "context-menu__item-icon-after", SvgImage: iconAfter, size: iconAfterSize, bgFill: iconAfterBgFill, fill: iconAfterFill }))] }), jsxRuntimeExports.jsx(Divider, { className: "context-menu__item-divider", width: dividerWidth, direction: dividerDirection, size: dividerSize, fill: dividerFill })] }));
+}
+
+export { ContextMenu as C, ContextMenuItem as a };

package/dist/CookiesWarning-jN2hWm12.js

@@ -0,0 +1,52 @@
+import { j as jsxRuntimeExports } from './jsx-runtime-C2uP7l8s.js';
+import { useRef, useMemo, useCallback, useEffect } from 'react';
+import clsx from 'clsx';
+import Cookies from 'js-cookie';
+import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
+import { B as Button } from './Button-BXClqM-t.js';
+import { G as Group } from './Group-C2kJKhWJ.js';
+import { T as Text } from './Text-CxrzHFN1.js';
+
+function CookiesWarning(props) {
+    var _a = props.message, message = _a === void 0 ? 'The site uses cookies to collect technical information, to optimize the design and improvement of the website, and to provide certain functions. By using the website, you agree to the use of «cookies».' : _a, className = props.className, buttonFill = props.buttonFill, buttonFillHover = props.buttonFillHover, _b = props.buttonLabel, buttonLabel = _b === void 0 ? 'I agree' : _b, buttonLabelSize = props.buttonLabelSize, buttonLabelTextColor = props.buttonLabelTextColor, buttonShape = props.buttonShape, buttonSize = props.buttonSize, textSize = props.textSize, textColor = props.textColor, buttonWidth = props.buttonWidth, _c = props.isHideOnScroll, isHideOnScroll = _c === void 0 ? false : _c;
+    var cookiesWarningRef = useRef(null);
+    var isOpen = useMemo(function () { return Cookies.get('cookies-warning') !== 'close'; }, []);
+    var closeCookiesWarning = useCallback(function () {
+        var _a;
+        (_a = cookiesWarningRef.current) === null || _a === void 0 ? void 0 : _a.classList.add('cookies-warning_state_hidden');
+        Cookies.set('cookies-warning', 'close');
+    }, []);
+    useEffect(function () {
+        if (isHideOnScroll) {
+            window.addEventListener('scroll', closeCookiesWarning, true);
+        }
+        return function () {
+            window.removeEventListener('scroll', closeCookiesWarning, true);
+        };
+    }, []); // eslint-disable-line
+    useEffect(function () {
+        // isHideOnScroll &&
+        if (!isOpen) {
+            window.removeEventListener('scroll', closeCookiesWarning, true);
+        }
+    }, [isOpen]); // eslint-disable-line
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillGradientClass = useDeviceTargetClass(props, {
+        prefix: 'fill-gradient_',
+        propsKey: 'fillGradient',
+    });
+    var gap = useDeviceTargetClass(props, {
+        propsKey: 'gap',
+    });
+    return isOpen ? (jsxRuntimeExports.jsx("div", { ref: cookiesWarningRef, className: clsx('cookies-warning', className, fillClass, fillGradientClass), children: jsxRuntimeExports.jsxs(Group, { direction: "vertical", className: "cookies-warning__inner", gap: gap ? gap : undefined, children: [jsxRuntimeExports.jsx(Text, { size: textSize, textColor: textColor, children: message }), jsxRuntimeExports.jsx(Button, { width: buttonWidth, fill: buttonFill, fillHover: buttonFillHover, shape: buttonShape, size: buttonSize, labelTextColor: buttonLabelTextColor, labelTextSize: buttonLabelSize, onClick: closeCookiesWarning, children: buttonLabel })] }) })) : null;
+}
+CookiesWarning.defaultProps = {
+    message: 'The site uses cookies to collect technical information, to optimize the design and improvement of the website, and to provide certain functions. By using the website, you agree to the use of «cookies».',
+    buttonText: 'I agree',
+    isHideOnScroll: false,
+};
+
+export { CookiesWarning as C };