@itcase/ui 1.1.9 → 1.1.11

package/dist/cjs/Input-BqKlyvEt.js

@@ -0,0 +1,141 @@
+'use strict';
+
+var jsxRuntime = require('./jsx-runtime-BBxmckJR.js');
+var React = require('react');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+var inputConfig = {
+    state: undefined,
+    setState: function (newComponent) {
+        inputConfig.state = newComponent;
+    },
+    appearance: undefined,
+    setAppearance: function (newComponent) {
+        inputConfig.appearance = newComponent;
+    },
+};
+var Input = React__default.default.forwardRef(function Input(props, ref) {
+    var appearance = props.appearance, state = props.state, index = props.index, id = props.id, dataTestId = props.dataTestId, type = props.type, className = props.className, name = props.name, placeholder = props.placeholder, isDisabled = props.isDisabled, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_disabled_',
+        propsKey: 'fillDisabled',
+    });
+    var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'input_size_',
+        propsKey: 'size',
+    });
+    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'input_shape_',
+        propsKey: 'shape',
+    });
+    var textSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'text_size_',
+        propsKey: 'textSize',
+    });
+    var textColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'text-color_',
+        propsKey: 'textColor',
+    });
+    var textColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'text-color_disabled_',
+        propsKey: 'textColor',
+    });
+    var caretClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'caret-color_',
+        propsKey: 'caret',
+    });
+    var placeholderTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'placeholder-text-color_',
+        propsKey: 'placeholderTextColor',
+    });
+    var placeholderTextColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'placeholder-text-color_disabled_',
+        propsKey: 'placeholderTextColorDisabled',
+    });
+    var weightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'text-weight_',
+        propsKey: 'textWeight',
+    });
+    var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-width_',
+        propsKey: 'borderWidth',
+    });
+    var borderWidthDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-width_disabled_',
+        propsKey: 'borderWidthDisabled',
+    });
+    var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var borderColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-color_disabled_',
+        propsKey: 'borderColorDisabled',
+    });
+    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    var appearanceConfig = React.useMemo(function () { return appearance && inputConfig.appearance && inputConfig.appearance[appearance]; }, [appearance, inputConfig]);
+    var stateConfig = React.useMemo(function () { return state && inputConfig.state && inputConfig.state[state]; }, [state, inputConfig]);
+    return (jsxRuntime.jsxRuntimeExports.jsx("input", { className: clsx__default.default(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, !isDisabled ? fillClass : fillDisabledClass, shapeClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
+                "input_shape_".concat(appearanceConfig.shape).replace(/([A-Z])/g, '-$1').toLowerCase()), textSizeClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textSize) &&
+                "text_size_".concat(appearanceConfig.textSize).replace(/([A-Z])/g, '-$1').toLowerCase()), weightClass, widthClass, !isDisabled ? borderWidthClass : borderWidthDisabledClass, sizeClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.size) &&
+                "input_size_".concat(appearanceConfig.size).replace(/([A-Z])/g, '-$1').toLowerCase()), borderColorClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderColor) &&
+                "border-color_".concat(appearanceConfig.borderColor)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()), placeholderTextColorClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.placeholderTextColor) &&
+                "placeholder-text-color_".concat(appearanceConfig.placeholderTextColor)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()), textColorClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor) &&
+                "text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()), !isDisabled
+            ? borderColorClass ||
+                ((stateConfig === null || stateConfig === void 0 ? void 0 : stateConfig.borderColor) &&
+                    "border-color_".concat(stateConfig.borderColor).replace(/([A-Z])/g, '-$1').toLowerCase())
+            : borderColorDisabledClass ||
+                ((stateConfig === null || stateConfig === void 0 ? void 0 : stateConfig.borderColor) &&
+                    "border-color_disabled_".concat(stateConfig.borderColor)
+                        .replace(/([A-Z])/g, '-$1')
+                        .toLowerCase()), !isDisabled
+            ? placeholderTextColorClass ||
+                ((stateConfig === null || stateConfig === void 0 ? void 0 : stateConfig.placeholderTextColor) &&
+                    "placeholder-text-color_".concat(stateConfig.placeholderTextColor)
+                        .replace(/([A-Z])/g, '-$1')
+                        .toLowerCase())
+            : placeholderTextColorDisabledClass ||
+                ((stateConfig === null || stateConfig === void 0 ? void 0 : stateConfig.placeholderTextColor) &&
+                    "placeholder-text-color_".concat(stateConfig.placeholderTextColor)
+                        .replace(/([A-Z])/g, '-$1')
+                        .toLowerCase()), !isDisabled
+            ? textColorClass ||
+                ((stateConfig === null || stateConfig === void 0 ? void 0 : stateConfig.textColor) &&
+                    "text-color_".concat(stateConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase())
+            : textColorDisabledClass ||
+                ((stateConfig === null || stateConfig === void 0 ? void 0 : stateConfig.textColor) &&
+                    "text-color_".concat(stateConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase())), "data-test-id": dataTestId || (name ? "".concat(name, "Input") : 'input'), disabled: isDisabled, id: String(id), 
+        // @ts-ignore
+        index: index, placeholder: placeholder, ref: ref, type: type, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }));
+});
+Input.defaultProps = {
+    size: 'm',
+    type: 'text',
+};
+
+exports.Input = Input;
+exports.inputConfig = inputConfig;

package/dist/cjs/InputPassword-DHgR_QTK.js

@@ -0,0 +1,117 @@
+'use strict';
+
+var jsxRuntime = require('./jsx-runtime-BBxmckJR.js');
+var React = require('react');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
+var Icon = require('./Icon-DzJtiBBk.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+var inputPasswordConfig = {
+    state: undefined,
+    setState: function (newComponent) {
+        inputPasswordConfig.state = newComponent;
+    },
+    appearance: undefined,
+    setAppearance: function (newComponent) {
+        inputPasswordConfig.appearance = newComponent;
+    },
+};
+function InputPassword(props) {
+    var appearance = props.appearance, state = props.state, id = props.id, iconFill = props.iconFill, iconRevealableHide = props.iconRevealableHide, iconRevealableShow = props.iconRevealableShow, iconFillHover = props.iconFillHover, iconShape = props.iconShape, iconSize = props.iconSize, isRevealable = props.isRevealable, className = props.className, placeholder = props.placeholder, disabled = props.disabled, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'input-password__input_size_',
+        propsKey: 'size',
+    });
+    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'input-password__input_shape_',
+        propsKey: 'shape',
+    });
+    var textSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'text_size_',
+        propsKey: 'textSize',
+    });
+    var textColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'text-color_',
+        propsKey: 'textColor',
+    });
+    var caretClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'caret-color_',
+        propsKey: 'caret',
+    });
+    var placeholderTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'placeholder-text-color_',
+        propsKey: 'placeholderTextColor',
+    });
+    var weightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'text-weight_',
+        propsKey: 'textWeight',
+    });
+    var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-width_',
+        propsKey: 'borderWidth',
+    });
+    var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    var _a = React.useState(false), isRevealed = _a[0], setIsRevealed = _a[1];
+    var inputType = React.useMemo(function () {
+        return isRevealed ? 'text' : 'password';
+    }, [isRevealed]);
+    var revealeHandler = React.useCallback(function (e) {
+        e.preventDefault();
+        setIsRevealed(function (prev) { return !prev; });
+    }, [setIsRevealed]);
+    var appearanceConfig = React.useMemo(function () {
+        return appearance && inputPasswordConfig.appearance && inputPasswordConfig.appearance[appearance];
+    }, [appearance, inputPasswordConfig]);
+    var stateConfig = React.useMemo(function () { return state && inputPasswordConfig.state && inputPasswordConfig.state[state]; }, [state, inputPasswordConfig]);
+    return (jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "input-password", children: [jsxRuntime.jsxRuntimeExports.jsx("input", { className: clsx__default.default(className, 'input-password__input', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, fillClass, placeholderTextColorClass, shapeClass ||
+                    ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
+                        "input-password__input_shape_".concat(appearanceConfig.shape)
+                            .replace(/([A-Z])/g, '-$1')
+                            .toLowerCase()), textSizeClass ||
+                    ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textSize) &&
+                        "text_size_".concat(appearanceConfig.textSize).replace(/([A-Z])/g, '-$1').toLowerCase()), weightClass, widthClass, borderWidthClass, sizeClass ||
+                    ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.size) &&
+                        "input-password__input_size_".concat(appearanceConfig.size)
+                            .replace(/([A-Z])/g, '-$1')
+                            .toLowerCase()), borderColorClass ||
+                    ((stateConfig === null || stateConfig === void 0 ? void 0 : stateConfig.borderColor) &&
+                        "border-color_".concat(stateConfig.borderColor).replace(/([A-Z])/g, '-$1').toLowerCase()) ||
+                    ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderColor) &&
+                        "border-color_".concat(appearanceConfig.borderColor)
+                            .replace(/([A-Z])/g, '-$1')
+                            .toLowerCase()), placeholderTextColorClass ||
+                    ((stateConfig === null || stateConfig === void 0 ? void 0 : stateConfig.placeholderTextColor) &&
+                        "placeholder-text-color_".concat(stateConfig.placeholderTextColor)
+                            .replace(/([A-Z])/g, '-$1')
+                            .toLowerCase()) ||
+                    ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.placeholderTextColor) &&
+                        "placeholder-text-color_".concat(appearanceConfig.placeholderTextColor)
+                            .replace(/([A-Z])/g, '-$1')
+                            .toLowerCase()), textColorClass ||
+                    ((stateConfig === null || stateConfig === void 0 ? void 0 : stateConfig.textColor) &&
+                        "text-color_".concat(stateConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase()) ||
+                    ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor) &&
+                        "text-color_".concat(appearanceConfig.textColor).replace(/([A-Z])/g, '-$1').toLowerCase())), type: inputType, id: String(id), disabled: disabled, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }), isRevealable && (jsxRuntime.jsxRuntimeExports.jsx(Icon.Icon, { className: "input-password__icon", iconFill: iconFill, iconFillHover: iconFillHover, SvgImage: isRevealed ? iconRevealableHide : iconRevealableShow, imageSrc: isRevealed ? iconRevealableHide : iconRevealableShow, shape: iconShape, size: iconSize, onClick: revealeHandler }))] }));
+}
+InputPassword.defaultProps = {
+    size: 'm',
+    type: 'text',
+};
+
+exports.InputPassword = InputPassword;
+exports.inputPasswordConfig = inputPasswordConfig;

package/dist/cjs/Label-BcwjtIk7.js

@@ -0,0 +1,92 @@
+'use strict';
+
+var jsxRuntime = require('./jsx-runtime-BBxmckJR.js');
+var React = require('react');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
+var useStyles = require('./hooks/useStyles.js');
+var Text = require('./Text-C8vlKWNN.js');
+var Tooltip = require('./Tooltip-CnnungCh.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+var labelConfig = {
+    appearance: undefined,
+    setAppearance: function (newComponent) {
+        labelConfig.appearance = newComponent;
+    },
+};
+function Label(props) {
+    var appearance = props.appearance, children = props.children, className = props.className, label = props.label, labelTextSize = props.labelTextSize, labelTextWrap = props.labelTextWrap, labelTextColor = props.labelTextColor, labelTextColorHover = props.labelTextColorHover, labelTextWeight = props.labelTextWeight, mode = props.mode, set = props.set, before = props.before, after = props.after, dataTour = props.dataTour, type = props.type, cursor = props.cursor, showTooltip = props.showTooltip, tooltipAlignment = props.tooltipAlignment, tooltipText = props.tooltipText, tooltipTextSize = props.tooltipTextSize, tooltipTitle = props.tooltipTitle, tooltipTitleSize = props.tooltipTitleSize, tooltipAppearance = props.tooltipAppearance, tooltipContent = props.tooltipContent, tooltipArrowPosition = props.tooltipArrowPosition, onClick = props.onClick;
+    var tooltipRef = React.useRef(null);
+    var onMouseEnterLabel = React.useCallback(function () {
+        var _a;
+        (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.openTooltip();
+    }, []);
+    var onMouseLeaveLabel = React.useCallback(function () {
+        var _a;
+        (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.closeTooltip();
+    }, []);
+    var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'alignDirection',
+    });
+    var alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'align',
+    });
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'label_size_',
+        propsKey: 'size',
+    });
+    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'label_shape_',
+        propsKey: 'shape',
+    });
+    var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border_type_',
+        propsKey: 'borderType',
+    });
+    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'label_width_',
+        propsKey: 'width',
+    });
+    var wrapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'word-wrap_',
+        propsKey: 'wrap',
+    });
+    // @ts-expect-error
+    var labelStyles = useStyles.useStyles(props).styles;
+    var appearanceConfig = React.useMemo(function () { return appearance && labelConfig.appearance && labelConfig.appearance[appearance]; }, [appearance, labelConfig]);
+    return (jsxRuntime.jsxRuntimeExports.jsxs("div", { className: clsx__default.default(className, 'label', fillClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
+                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
+                "fill_hover_".concat(appearanceConfig.fillHover).replace(/([A-Z])/g, '-$1').toLowerCase()), shapeClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
+                "label_shape_".concat(appearanceConfig.shape).replace(/([A-Z])/g, '-$1').toLowerCase()), borderColorClass, borderTypeClass, sizeClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.size) &&
+                "label_size_".concat(appearanceConfig.size).replace(/([A-Z])/g, '-$1').toLowerCase()), wrapClass, widthClass, alignDirectionClass, alignClass, type && "label_type_".concat(type), set && "label_set_".concat(set), mode && "label_mode_".concat(mode), onClick && (cursor || 'cursor_type_pointer')), "data-tour": dataTour, style: labelStyles, onClick: onClick, onMouseEnter: onMouseEnterLabel, onMouseLeave: onMouseLeaveLabel, children: [before, jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "label__inner", children: [typeof label === 'string' ? (jsxRuntime.jsxRuntimeExports.jsx(Text.Text, { className: "label__label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textColorHover: labelTextColorHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColorHover), textWeight: labelTextWeight || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextWeight), textWrap: labelTextWrap, children: label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label) })) : (jsxRuntime.jsxRuntimeExports.jsx("div", { className: "label__label", children: label })), children, showTooltip && (jsxRuntime.jsxRuntimeExports.jsx(Tooltip.Tooltip, { alignment: tooltipAlignment, appearance: tooltipAppearance, arrowPosition: tooltipArrowPosition, className: "label__tooltip", 
+                        // @ts-expect-error
+                        ref: tooltipRef, text: tooltipText, textSize: tooltipTextSize, title: tooltipTitle, titleSize: tooltipTitleSize, children: tooltipContent }))] }), after] }));
+}
+Label.defaultProps = {
+    label: 'Label',
+};
+
+exports.Label = Label;
+exports.labelConfig = labelConfig;

package/dist/cjs/LanguageSelector-C3i2JJCM.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var jsxRuntime = require('./jsx-runtime-BBxmckJR.js');
+var clsx = require('clsx');
+var Icon = require('./Icon-DzJtiBBk.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+function LanguageSelectorItem(props) {
+    var label = props.label, iconSize = props.iconSize, SvgImage = props.SvgImage, isActive = props.isActive, onClick = props.onClick;
+    return (jsxRuntime.jsxRuntimeExports.jsxs("div", { className: clsx__default.default('lang__item', isActive && 'lang__item_state_current'), onClick: onClick, children: [SvgImage && jsxRuntime.jsxRuntimeExports.jsx(Icon.Icon, { size: iconSize, SvgImage: SvgImage }), label] }));
+}
+function LanguageSelector(props) {
+    var currentLanguage = props.currentLanguage, _a = props.languagesItems, languagesItems = _a === void 0 ? [] : _a, className = props.className, setLanguage = props.setLanguage;
+    return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: clsx__default.default(className, 'lang'), children: languagesItems.map(function (languageItem) { return (jsxRuntime.jsxRuntimeExports.jsx(LanguageSelectorItem, { iconSize: languageItem.iconSize, isActive: currentLanguage === languageItem.value, label: languageItem.label, SvgImage: languageItem.SvgImage, onClick: function () { return setLanguage && setLanguage(languageItem.value); } }, "languageItem_".concat(languageItem.value))); }) }));
+}
+
+exports.LanguageSelector = LanguageSelector;

package/dist/cjs/{Link-BoShjCEw.js → Link-3qPujNn9.js}

@@ -1,6 +1,7 @@
 'use strict';
 
-var jsxRuntime = require('./jsx-runtime-BCmQOGxJ.js');
+var _tslib = require('./_tslib-CKiUdo7p.js');
+var jsxRuntime = require('./jsx-runtime-BBxmckJR.js');
 var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
@@ -11,61 +12,6 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefault(React);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
-
-
-exports.__assign = function() {
-    exports.__assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return exports.__assign.apply(this, arguments);
-};
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __spreadArray(to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
 var linkConfig = {
     LinkComponent: 'a',
     setLinkComponent: function (newComponent) {
@@ -74,6 +20,10 @@ var linkConfig = {
 };
 function Link(props) {
     var after = props.after, before = props.before, children = props.children, className = props.className, LinkComponent = props.LinkComponent, href = props.href, link = props.link, target = props.target, rel = props.rel, text = props.text, _a = props.underline, underline = _a === void 0 ? 'underline' : _a, onClick = props.onClick, onMouseDown = props.onMouseDown;
+    var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'link_direction_',
+        propsKey: 'direction',
+    });
     var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
         prefix: 'text_size_',
         propsKey: 'size',
@@ -104,7 +54,7 @@ function Link(props) {
     });
     // @ts-expect-error
     var styles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsxRuntimeExports.jsxs(LinkWrapper, { className: clsx__default.default(className, 'link', sizeClass, underline && "link_underline_".concat(underline), (textColorClass ||
+    return (jsxRuntime.jsxRuntimeExports.jsxs(LinkWrapper, { className: clsx__default.default(className, 'link', directionClass, sizeClass, underline && "link_underline_".concat(underline), (textColorClass ||
             textColorHoverClass ||
             textGradientClass ||
             textStyleClass ||
@@ -116,17 +66,17 @@ Link.defaultProps = {
 };
 // Wrapper with "Link" by condition
 function LinkWrapper(props) {
-    var children = props.children, Component = props.Component, DefaultComponent = props.DefaultComponent, href = props.href, target = props.target, rel = props.rel, otherProps = __rest(props, ["children", "Component", "DefaultComponent", "href", "target", "rel"]);
+    var children = props.children, Component = props.Component, DefaultComponent = props.DefaultComponent, href = props.href, target = props.target, rel = props.rel, otherProps = _tslib.__rest(props, ["children", "Component", "DefaultComponent", "href", "target", "rel"]);
     if (href) {
         // If href passed, make link-wrapper
         var LinkComponent = Component || linkConfig.LinkComponent;
         if (LinkComponent) {
-            return (jsxRuntime.jsxRuntimeExports.jsx(LinkComponent, exports.__assign({ href: href, rel: rel, target: target }, otherProps, { children: children })));
+            return (jsxRuntime.jsxRuntimeExports.jsx(LinkComponent, _tslib.__assign({ href: href, rel: rel, target: target }, otherProps, { children: children })));
         }
     }
     else if (DefaultComponent) {
         // If has default "Component" - render it
-        return jsxRuntime.jsxRuntimeExports.jsx(DefaultComponent, exports.__assign({}, otherProps, { children: children }));
+        return jsxRuntime.jsxRuntimeExports.jsx(DefaultComponent, _tslib.__assign({}, otherProps, { children: children }));
     }
     // Return children and pass current props to
     return React__default.default.Children.toArray(children)
@@ -138,5 +88,4 @@ function LinkWrapper(props) {
 
 exports.Link = Link;
 exports.LinkWrapper = LinkWrapper;
-exports.__spreadArray = __spreadArray;
 exports.linkConfig = linkConfig;

package/dist/cjs/ListItem-CvMoKXM-.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var jsxRuntime = require('./jsx-runtime-BBxmckJR.js');
+var clsx = require('clsx');
+var useStyles = require('./hooks/useStyles.js');
+var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
+var Link = require('./Link-3qPujNn9.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+function List(props) {
+    var children = props.children, className = props.className, style = props.style, type = props.type;
+    var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'list_size_',
+        propsKey: 'size',
+    });
+    var bulletSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'list_bullet-size_',
+        propsKey: 'bulletSize',
+    });
+    var bulletFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'list_bullet-fill_',
+        propsKey: 'bulletFill',
+    });
+    var bulletTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'list_bullet-text-color_',
+        propsKey: 'bulletTextColor',
+    });
+    var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'list_direction_',
+        propsKey: 'direction',
+    });
+    // @ts-expect-error
+    var ulStyles = useStyles.useStyles(props).styles;
+    return (jsxRuntime.jsxRuntimeExports.jsx("ul", { className: clsx__default.default(className, 'list', bulletSizeClass, bulletFillClass, bulletTextColorClass, directionClass, sizeClass, style && "list_style_".concat(style), type && "list_type_".concat(type)), style: ulStyles, children: children }));
+}
+
+function ListItem(props) {
+    var after = props.after, before = props.before, children = props.children, className = props.className, fill = props.fill, href = props.href, link = props.link, text = props.text, textColor = props.textColor, textStyle = props.textStyle, textWeight = props.textWeight;
+    // @ts-expect-error
+    var _a = useStyles.useStyles(props), liStyles = _a.styles, linkStyles = _a.link;
+    if (link) {
+        return (jsxRuntime.jsxRuntimeExports.jsx("li", { className: clsx__default.default(className, 'list__item', 'list__item_type_link', textStyle && "text text-style_".concat(textStyle), textWeight && "text text-weight_".concat(textWeight), textColor && "text-color_".concat(textColor.replace(/([A-Z])/g, '-$1').toLowerCase()), fill && "fill_".concat(fill.replace(/([A-Z])/g, '-$1').toLowerCase())), style: liStyles, children: jsxRuntime.jsxRuntimeExports.jsx(Link.Link, { href: link || href, className: clsx__default.default('list__item-link'), 
+                // @ts-expect-error
+                style: linkStyles, children: children || text }) }));
+    }
+    return (jsxRuntime.jsxRuntimeExports.jsxs("li", { className: clsx__default.default(className, 'list__item', textStyle && "text text-style_".concat(textStyle), textWeight && "text text-weight_".concat(textWeight), textColor && "text-color_".concat(textColor.replace(/([A-Z])/g, '-$1').toLowerCase()), fill && "fill_".concat(fill.replace(/([A-Z])/g, '-$1').toLowerCase())), style: liStyles, children: [before, children || text, after] }));
+}
+
+exports.List = List;
+exports.ListItem = ListItem;

package/dist/cjs/Loader-2vQxF_aO.js

@@ -0,0 +1,60 @@
+'use strict';
+
+var jsxRuntime = require('./jsx-runtime-BBxmckJR.js');
+var React = require('react');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
+var useStyles = require('./hooks/useStyles.js');
+var Text = require('./Text-C8vlKWNN.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+// TODO: is better to use context?
+var loaderConfig = {
+    appearance: undefined,
+    setAppearance: function (newComponent) {
+        loaderConfig.appearance = newComponent;
+    },
+};
+function Loader(props) {
+    var _a;
+    var appearance = props.appearance, className = props.className, children = props.children, set = props.set, text = props.text, textSize = props.textSize, textColor = props.textColor;
+    var itemFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'itemFill',
+    });
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    var heightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'height_',
+        propsKey: 'height',
+    });
+    var positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'position_',
+        propsKey: 'position',
+    });
+    // @ts-expect-error
+    var loader = useStyles.useStyles(props).styles;
+    var appearanceConfig = React.useMemo(function () { return appearance && loaderConfig.appearance && loaderConfig.appearance[appearance]; }, [appearance, loaderConfig]);
+    /*
+     * TODO: set temporary variables by other way
+     */
+    var temporaryFillClass = fillClass ||
+        ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
+            "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase());
+    var temporaryItemFillClass = itemFillClass ||
+        ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.itemFill) &&
+            "fill_".concat((_a = appearanceConfig.itemFill) === null || _a === void 0 ? void 0 : _a.replace(/([A-Z])/g, '-$1')).toLowerCase());
+    return (jsxRuntime.jsxRuntimeExports.jsxs("div", { className: clsx__default.default('loader', positionClass, widthClass, heightClass, temporaryFillClass, className, set && "loader_set_".concat(set)), style: loader, children: [children || (jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "loader__inner", children: [jsxRuntime.jsxRuntimeExports.jsx("span", { className: clsx__default.default('loader__item', temporaryItemFillClass) }), jsxRuntime.jsxRuntimeExports.jsx("span", { className: clsx__default.default('loader__item', temporaryItemFillClass) }), jsxRuntime.jsxRuntimeExports.jsx("span", { className: clsx__default.default('loader__item', temporaryItemFillClass) })] })), text && (jsxRuntime.jsxRuntimeExports.jsx(Text.Text, { className: "loader__text", size: textSize, textColor: textColor, children: text }))] }));
+}
+
+exports.Loader = Loader;
+exports.loaderConfig = loaderConfig;

package/dist/cjs/Logo-YADZn1N4.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var jsxRuntime = require('./jsx-runtime-BBxmckJR.js');
+var clsx = require('clsx');
+var Link = require('./Link-3qPujNn9.js');
+var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
+var useStyles = require('./hooks/useStyles.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+function Logo(props) {
+    var className = props.className, href = props.href, link = props.link, mode = props.mode, size = props.size, source = props.source, src = props.src;
+    var alignItemsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'logo_align-items_',
+        propsKey: 'alignItems',
+    });
+    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'alignDirection',
+    });
+    var alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'align',
+    });
+    // @ts-expect-error
+    var logo = useStyles.useStyles(props).styles;
+    return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: clsx__default.default(className, 'logo', alignDirectionClass, alignClass, widthClass, alignItemsClass, size && "logo_size_".concat(size), mode && "logo_mode_".concat(mode)), style: logo, children: link || href ? (jsxRuntime.jsxRuntimeExports.jsxs(Link.LinkWrapper, { href: link || href, children: [' ', jsxRuntime.jsxRuntimeExports.jsx("img", { className: "logo__image", src: src || source })] })) : (jsxRuntime.jsxRuntimeExports.jsx("img", { className: "logo__image", src: src || source })) }));
+}
+
+exports.Logo = Logo;