@itcase/ui 1.3.24 → 1.3.26

package/dist/components/CookiesWarning.js

@@ -3,33 +3,34 @@ import { useRef, useMemo, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
 import Cookies from 'js-cookie';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
-import { B as Button } from '../Button-Bn8Mjoeh.js';
-import { G as Group } from '../Group-CIIZoSm5.js';
-import { T as Text } from '../Text-D9sEeRE4.js';
-import '../tslib.es6-5FtW-kfi.js';
+import { B as Button } from '../Button-BSzqA8CB.js';
+import { G as Group } from '../Group-B9L2NTgM.js';
+import { T as Text } from '../Text-JayJa3hj.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Icon-DotE-03d.js';
+import '../Icon-BZa8B7te.js';
 import 'react-inlinesvg';
-import '../Link-C53o3P6_.js';
-import '../Tooltip-BsbXMzGd.js';
-import '../Title-Cl95USIn.js';
-import '../Loader-Cm98w6lJ.js';
+import '../Link-DN2LhPjD.js';
+import '../Tooltip-1Jbub0K6.js';
+import '../Title-CHgrIarR.js';
+import '../Loader-K_DJmah6.js';
 
 function CookiesWarning(props) {
-    var _a = props.isHideOnScroll, isHideOnScroll = _a === undefined ? false : _a, buttonFill = props.buttonFill, buttonFillHover = props.buttonFillHover, _b = props.buttonLabel, buttonLabel = _b === undefined ? 'I agree' : _b, buttonLabelSize = props.buttonLabelSize, buttonLabelTextColor = props.buttonLabelTextColor, buttonShape = props.buttonShape, buttonSize = props.buttonSize, buttonWidth = props.buttonWidth, className = props.className, _c = props.message, message = _c === undefined ? '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».' : _c, textColor = props.textColor, textSize = props.textSize;
+    var _a = props.isHideOnScroll, isHideOnScroll = _a === void 0 ? false : _a, 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, buttonWidth = props.buttonWidth, className = props.className, _c = props.message, message = _c === 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».' : _c, textColor = props.textColor, textSize = props.textSize;
     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 === undefined ? undefined : _a.classList.add('cookies-warning_state_hidden');
+        (_a = cookiesWarningRef.current) === null || _a === void 0 ? void 0 : _a.classList.add('cookies-warning_state_hidden');
         Cookies.set('cookies-warning', 'close');
     }, []);
     useEffect(function () {

package/dist/components/DadataHintField.js

@@ -1,15 +1,16 @@
-import { _ as __assign, a as __rest } from '../tslib.es6-5FtW-kfi.js';
+import { _ as __assign, b as __rest } from '../tslib.es6-Bwu1Cn-t.js';
 import { jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import clsx from 'clsx';
 import { PartySuggestions } from 'react-dadata';
-import { I as Input } from '../Input-Ck5IbuH6.js';
+import { I as Input } from '../Input-BrV5_NoV.js';
 import '../hooks/useDeviceTargetClassGenerator.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 
 function DadataHintField(props) {
     var delay = props.delay, input = props.input, inputProps = props.inputProps, meta = props.meta, setValue = props.setValue, token = props.token;

package/dist/components/DatePicker.js

@@ -1,4 +1,4 @@
-import { _ as __assign } from '../tslib.es6-5FtW-kfi.js';
+import { _ as __assign } from '../tslib.es6-Bwu1Cn-t.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useMemo, useCallback, useRef, useState, useEffect } from 'react';
 import clsx from 'clsx';
@@ -6,24 +6,25 @@ import { ru } from 'date-fns/locale';
 import DatePicker from 'react-datepicker';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { B as Button } from '../Button-Bn8Mjoeh.js';
-import { I as Icon } from '../Icon-DotE-03d.js';
-import { I as Input } from '../Input-Ck5IbuH6.js';
-import { L as Label } from '../Label-9O3dQlUa.js';
-import { T as Text } from '../Text-D9sEeRE4.js';
+import { B as Button } from '../Button-BSzqA8CB.js';
+import { I as Icon } from '../Icon-BZa8B7te.js';
+import { I as Input } from '../Input-BrV5_NoV.js';
+import { L as Label } from '../Label-DQyB2ThM.js';
+import { T as Text } from '../Text-JayJa3hj.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-C53o3P6_.js';
-import '../Loader-Cm98w6lJ.js';
+import '../Link-DN2LhPjD.js';
+import '../Loader-K_DJmah6.js';
 import 'react-inlinesvg';
-import '../Tooltip-BsbXMzGd.js';
-import '../Title-Cl95USIn.js';
+import '../Tooltip-1Jbub0K6.js';
+import '../Title-CHgrIarR.js';
 
 var datePickerAppearance = {
     dev: {},
@@ -36,7 +37,7 @@ var datePickerConfig = {
     },
 };
 function DatePickerInput(props) {
-    var appearance = props.appearance, className = props.className, clearIcon = props.clearIcon, clearIconFill = props.clearIconFill, clearIconFillHover = props.clearIconFillHover, clearIconFillSize = props.clearIconFillSize, clearIconItemFill = props.clearIconItemFill, clearIconItemFillHover = props.clearIconItemFillHover, clearIconShape = props.clearIconShape, clearIconSize = props.clearIconSize, clearIconSrc = props.clearIconSrc, clearLabel = props.clearLabel, clearLabelTextColor = props.clearLabelTextColor, clearLabelTextColorHover = props.clearLabelTextColorHover, clearLabelTextSize = props.clearLabelTextSize, _a = props.datePickerProps, datePickerProps = _a === undefined ? {} : _a, endValue = props.endValue, inputProps = props.inputProps, labelTextSize = props.labelTextSize, value = props.value, onChange = props.onChange;
+    var appearance = props.appearance, className = props.className, clearIcon = props.clearIcon, clearIconFill = props.clearIconFill, clearIconFillHover = props.clearIconFillHover, clearIconFillSize = props.clearIconFillSize, clearIconItemFill = props.clearIconItemFill, clearIconItemFillHover = props.clearIconItemFillHover, clearIconShape = props.clearIconShape, clearIconSize = props.clearIconSize, clearIconSrc = props.clearIconSrc, clearLabel = props.clearLabel, clearLabelTextColor = props.clearLabelTextColor, clearLabelTextColorHover = props.clearLabelTextColorHover, clearLabelTextSize = props.clearLabelTextSize, _a = props.datePickerProps, datePickerProps = _a === void 0 ? {} : _a, endValue = props.endValue, inputProps = props.inputProps, labelTextSize = props.labelTextSize, value = props.value, onChange = props.onChange;
     var datepickerRef = useRef(null);
     var start = useMemo(function () {
         if (value) {
@@ -68,7 +69,7 @@ function DatePickerInput(props) {
         setEndDate(newEndDate);
     }, [onChange]);
     var renderDayContents = useCallback(function (day, date) {
-        return (jsx(Button, { className: "react-datepicker__day-button", labelTextColor: datePickerProps.dayTextColor || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.datePicker.dayTextColor), labelTextSize: datePickerProps.dayTextSize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.datePicker.dayTextSize), label: date.getDate().toString(), shape: datePickerProps.dayTextShape || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.datePicker.dayTextShape), size: datePickerProps.daySize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.datePicker.daySize) }));
+        return (jsx(Button, { className: "react-datepicker__day-button", labelTextColor: datePickerProps.dayTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.dayTextColor), labelTextSize: datePickerProps.dayTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.dayTextSize), label: date.getDate().toString(), shape: datePickerProps.dayTextShape || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.dayTextShape), size: datePickerProps.daySize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.daySize) }));
     }, [
         datePickerProps.daySize,
         datePickerProps.dayTextColor,
@@ -77,7 +78,7 @@ function DatePickerInput(props) {
     ]);
     var renderCustomHeader = useCallback(function (_a) {
         var decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, monthDate = _a.monthDate;
-        return (jsxs("div", { className: "react-datepicker__header--div", children: [datePickerProps.iconLeft && (jsx(Icon, { className: "react-datepicker__icon", fill: datePickerProps.iconFill || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.datePicker.iconFill), fillHover: datePickerProps.iconFillHover || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.datePicker.iconFillHover), fillSize: datePickerProps.iconFillSize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.datePicker.iconFillSize), iconFill: datePickerProps.iconItemFill || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.datePicker.iconItemFill), shape: datePickerProps.iconShape || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.datePicker.iconShape), size: datePickerProps.iconSize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.datePicker.iconSize), SvgImage: datePickerProps.iconLeft || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.datePicker.iconLeft), onClick: decreaseMonth })), jsxs("div", { className: "react-datepicker__data", children: [jsx(Text, { className: "react-datepicker__month", size: datePickerProps.monthTextSize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.datePicker.monthTextSize), textColor: datePickerProps.monthTextColor || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.datePicker.monthTextColor), textWeight: datePickerProps.monthTextWeight || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.datePicker.monthTextWeight), children: monthDate.toLocaleString('ru-RU', { month: 'long' }) }), jsx(Text, { className: "react-datepicker__year", size: datePickerProps.yearTextSize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.datePicker.yearTextSize), textColor: datePickerProps.yearTextColor || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.datePicker.yearTextColor), textWeight: datePickerProps.yearTextWeight || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.datePicker.yearTextWeight), children: monthDate.toLocaleString('ru-RU', { year: 'numeric' }) })] }), datePickerProps.iconRight && (jsx(Icon, { className: "react-datepicker__icon", fill: datePickerProps.iconFill || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.datePicker.iconFill), fillHover: datePickerProps.iconFillHover || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.datePicker.iconFillHover), fillSize: datePickerProps.iconFillSize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.datePicker.iconFillSize), iconFill: datePickerProps.iconItemFill || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.datePicker.iconItemFill), shape: datePickerProps.iconShape || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.datePicker.iconShape), size: datePickerProps.iconSize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.datePicker.iconSize), SvgImage: datePickerProps.iconRight || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.datePicker.iconRight), onClick: increaseMonth }))] }));
+        return (jsxs("div", { className: "react-datepicker__header--div", children: [datePickerProps.iconLeft && (jsx(Icon, { className: "react-datepicker__icon", fill: datePickerProps.iconFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconFill), fillHover: datePickerProps.iconFillHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconFillHover), fillSize: datePickerProps.iconFillSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconFillSize), iconFill: datePickerProps.iconItemFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconItemFill), shape: datePickerProps.iconShape || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconShape), size: datePickerProps.iconSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconSize), SvgImage: datePickerProps.iconLeft || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconLeft), onClick: decreaseMonth })), jsxs("div", { className: "react-datepicker__data", children: [jsx(Text, { className: "react-datepicker__month", size: datePickerProps.monthTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.monthTextSize), textColor: datePickerProps.monthTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.monthTextColor), textWeight: datePickerProps.monthTextWeight || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.monthTextWeight), children: monthDate.toLocaleString('ru-RU', { month: 'long' }) }), jsx(Text, { className: "react-datepicker__year", size: datePickerProps.yearTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.yearTextSize), textColor: datePickerProps.yearTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.yearTextColor), textWeight: datePickerProps.yearTextWeight || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.yearTextWeight), children: monthDate.toLocaleString('ru-RU', { year: 'numeric' }) })] }), datePickerProps.iconRight && (jsx(Icon, { className: "react-datepicker__icon", fill: datePickerProps.iconFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconFill), fillHover: datePickerProps.iconFillHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconFillHover), fillSize: datePickerProps.iconFillSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconFillSize), iconFill: datePickerProps.iconItemFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconItemFill), shape: datePickerProps.iconShape || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconShape), size: datePickerProps.iconSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconSize), SvgImage: datePickerProps.iconRight || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.datePicker.iconRight), onClick: increaseMonth }))] }));
     }, [
         datePickerProps.iconFill,
         datePickerProps.iconFillHover,
@@ -106,7 +107,7 @@ function DatePickerInput(props) {
     var widthClass = classGenerator.widthClass;
     // @ts-expect-error
     var datePickerStyles = useStyles(props).styles;
-    return (jsx("div", { className: clsx(className, 'datepicker', (datePickerProps === null || datePickerProps === undefined ? undefined : datePickerProps.monthsShown) && 'datepicker_type_multiple-months', (datePickerProps === null || datePickerProps === undefined ? undefined : datePickerProps.customTimeInput) && 'datepicker_type_button', widthClass && "datepicker_width_".concat(widthClass)), style: datePickerStyles, children: jsx(DatePicker, __assign({ ref: datepickerRef, endDate: (datePickerProps === null || datePickerProps === undefined ? undefined : datePickerProps.selectsRange) ? endDate : undefined, locale: ru, minDate: (datePickerProps === null || datePickerProps === undefined ? undefined : datePickerProps.disablePastDays) ? new Date() : undefined, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: startDate, startDate: startDate, customInput: jsx(DatePickerCustomInput, { labelTextSize: labelTextSize, clearIcon: clearIcon, clearIconFill: clearIconFill, clearIconFillHover: clearIconFillHover, clearIconFillSize: clearIconFillSize, clearIconItemFill: clearIconItemFill, clearIconItemFillHover: clearIconItemFillHover, clearIconShape: clearIconShape, clearIconSize: clearIconSize, clearIconSrc: clearIconSrc, clearLabel: clearLabel, clearLabelTextColor: clearLabelTextColor, clearLabelTextColorHover: clearLabelTextColorHover, clearLabelTextSize: clearLabelTextSize, datePickerAppearance: appearance, datepickerRef: datepickerRef, inputIcon: datePickerProps.inputIcon, inputIconFill: datePickerProps.inputIconFill, inputIconFillHover: datePickerProps.inputIconFillHover, inputIconFillSize: datePickerProps.inputIconFillSize, inputIconItemFill: datePickerProps.inputIconItemFill, inputIconShape: datePickerProps.inputIconShape, inputIconSize: datePickerProps.inputIconSize, inputIconSrc: datePickerProps.inputIconSrc, inputProps: inputProps, isClearable: datePickerProps.isClearable }), popperClassName: (datePickerProps === null || datePickerProps === undefined ? undefined : datePickerProps.popper) && "react-datepicker-popper-".concat(datePickerProps.popper), onChange: (datePickerProps === null || datePickerProps === undefined ? undefined : datePickerProps.selectsRange) ? handleChange : onChange }, datePickerProps, { 
+    return (jsx("div", { className: clsx(className, 'datepicker', (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.monthsShown) && 'datepicker_type_multiple-months', (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.customTimeInput) && 'datepicker_type_button', widthClass && "datepicker_width_".concat(widthClass)), style: datePickerStyles, children: jsx(DatePicker, __assign({ ref: datepickerRef, endDate: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectsRange) ? endDate : undefined, locale: ru, minDate: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.disablePastDays) ? new Date() : undefined, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: startDate, startDate: startDate, customInput: jsx(DatePickerCustomInput, { labelTextSize: labelTextSize, clearIcon: clearIcon, clearIconFill: clearIconFill, clearIconFillHover: clearIconFillHover, clearIconFillSize: clearIconFillSize, clearIconItemFill: clearIconItemFill, clearIconItemFillHover: clearIconItemFillHover, clearIconShape: clearIconShape, clearIconSize: clearIconSize, clearIconSrc: clearIconSrc, clearLabel: clearLabel, clearLabelTextColor: clearLabelTextColor, clearLabelTextColorHover: clearLabelTextColorHover, clearLabelTextSize: clearLabelTextSize, datePickerAppearance: appearance, datepickerRef: datepickerRef, inputIcon: datePickerProps.inputIcon, inputIconFill: datePickerProps.inputIconFill, inputIconFillHover: datePickerProps.inputIconFillHover, inputIconFillSize: datePickerProps.inputIconFillSize, inputIconItemFill: datePickerProps.inputIconItemFill, inputIconShape: datePickerProps.inputIconShape, inputIconSize: datePickerProps.inputIconSize, inputIconSrc: datePickerProps.inputIconSrc, inputProps: inputProps, isClearable: datePickerProps.isClearable }), popperClassName: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.popper) && "react-datepicker-popper-".concat(datePickerProps.popper), onChange: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectsRange) ? handleChange : onChange }, datePickerProps, { 
             // Important for use custom clear button
             isClearable: false })) }));
 }
@@ -120,7 +121,7 @@ var DatePickerCustomInput = React.forwardRef(function (props, ref) {
         }
         return '';
     }, [value]);
-    var inputAppearanceProps = (_a = datePickerConfig.appearance[datePickerAppearance]) === null || _a === undefined ? undefined : _a.input;
+    var inputAppearanceProps = (_a = datePickerConfig.appearance[datePickerAppearance]) === null || _a === void 0 ? void 0 : _a.input;
     return (jsxs(React.Fragment, { children: [jsx(Input, __assign({}, inputAppearanceProps, props, inputProps, { ref: ref, autocomplete: "off", value: multipleValue })), inputIcon && jsx(DatePickerInputIcon, __assign({}, props)), isClearable && jsx(DatePickerClearButton, __assign({}, props))] }));
 });
 DatePickerCustomInput.displayName = 'DatePickerCustomInput';
@@ -128,8 +129,8 @@ function DatePickerClearButton(props) {
     var clearIcon = props.clearIcon, clearIconFill = props.clearIconFill, clearIconFillHover = props.clearIconFillHover, clearIconFillSize = props.clearIconFillSize, clearIconItemFill = props.clearIconItemFill, clearIconItemFillHover = props.clearIconItemFillHover, clearIconShape = props.clearIconShape, clearIconSize = props.clearIconSize, clearIconSrc = props.clearIconSrc, clearLabel = props.clearLabel, clearLabelTextColor = props.clearLabelTextColor, clearLabelTextColorHover = props.clearLabelTextColorHover, clearLabelTextSize = props.clearLabelTextSize, datepickerRef = props.datepickerRef;
     var onClick = useCallback(function (event) {
         var _a, _b;
-        (_a = datepickerRef === null || datepickerRef === undefined ? undefined : datepickerRef.current) === null || _a === undefined ? undefined : _a.onClearClick(event);
-        (_b = datepickerRef === null || datepickerRef === undefined ? undefined : datepickerRef.current) === null || _b === undefined ? undefined : _b.handleFocus(event);
+        (_a = datepickerRef === null || datepickerRef === void 0 ? void 0 : datepickerRef.current) === null || _a === void 0 ? void 0 : _a.onClearClick(event);
+        (_b = datepickerRef === null || datepickerRef === void 0 ? void 0 : datepickerRef.current) === null || _b === void 0 ? void 0 : _b.handleFocus(event);
     }, []);
     return (jsxs(React.Fragment, { children: [clearLabel && (jsx(Label, { className: clsx('react-datepicker__clear-label', 'cursor_type_pointer'), labelTextColor: clearLabelTextColor, labelTextSize: clearLabelTextSize, label: clearLabel, labelTextColorHover: clearLabelTextColorHover, onClick: onClick })), (clearIcon || clearIconSrc) && (jsx(Icon, { className: clsx('react-datepicker__clear-icon', 'cursor_type_pointer'), fill: clearIconFill, fillHover: clearIconFillHover, fillSize: clearIconFillSize, iconFill: clearIconItemFill, iconFillHover: clearIconItemFillHover, imageSrc: clearIconSrc, shape: clearIconShape, size: clearIconSize, SvgImage: clearIcon, onClick: onClick }))] }));
 }

package/dist/components/Divider.js

@@ -2,13 +2,14 @@ export { D as Divider, a as dividerAppearance, d as dividerConfig } from '../Div
 import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useDeviceTargetClassGenerator.js';
-import '../tslib.es6-5FtW-kfi.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';

package/dist/components/Dot.js

@@ -2,13 +2,14 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
-import '../tslib.es6-5FtW-kfi.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';

package/dist/components/Dropdown.js

@@ -1,18 +1,19 @@
-export { D as Dropdown, a as DropdownItem, d as dropdownItemAppearance, b as dropdownItemConfig } from '../DropdownItem-CExjlJjQ.js';
+export { D as Dropdown, a as DropdownItem, d as dropdownItemAppearance, b as dropdownItemConfig } from '../DropdownItem-Bq-oPnWX.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
 import '../hooks/useDeviceTargetClassGenerator.js';
-import '../tslib.es6-5FtW-kfi.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import '../Divider-DBvDCUqP.js';
-import '../Link-C53o3P6_.js';
-import '../Text-D9sEeRE4.js';
+import '../Link-DN2LhPjD.js';
+import '../Text-JayJa3hj.js';

package/dist/components/Flex.js

@@ -2,19 +2,20 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
-import '../tslib.es6-5FtW-kfi.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 
 function Flex(props) {
-    var id = props.id, children = props.children, className = props.className, _a = props.tag, Tag = _a === undefined ? 'div' : _a, type = props.type, style = props.style, onClick = props.onClick;
+    var id = props.id, children = props.children, className = props.className, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, type = props.type, style = props.style, onClick = props.onClick;
     var classGenerator = useDeviceTargetClassGenerator(props);
     var alignContentClass = classGenerator.alignContentClass, alignItemsClass = classGenerator.alignItemsClass, borderColorClass = classGenerator.borderColorClass, borderTypeClass = classGenerator.borderTypeClass, directionClass = classGenerator.directionClass, fillClass = classGenerator.fillClass, flowClass = classGenerator.flowClass, justifyContentClass = classGenerator.justifyContentClass, positionClass = classGenerator.positionClass, shapeClass = classGenerator.shapeClass, widthClass = classGenerator.widthClass, wrapClass = classGenerator.wrapClass;
     // @ts-expect-error
@@ -23,7 +24,7 @@ function Flex(props) {
 }
 
 function FlexItem(props) {
-    var children = props.children, className = props.className, htmlFor = props.htmlFor, _a = props.tag, Tag = _a === undefined ? 'div' : _a, style = props.style;
+    var children = props.children, className = props.className, htmlFor = props.htmlFor, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, style = props.style;
     var classGenerator = useDeviceTargetClassGenerator(props);
     var alignItemsClass = classGenerator.alignItemsClass, alignSelfClass = classGenerator.alignSelfClass, directionClass = classGenerator.directionClass, fillClass = classGenerator.fillClass, fillHoverClass = classGenerator.fillHoverClass, growClass = classGenerator.growClass, justifyContentClass = classGenerator.justifyContentClass, positionClass = classGenerator.positionClass, shapeClass = classGenerator.shapeClass, widthClass = classGenerator.widthClass, wrapClass = classGenerator.wrapClass;
     // @ts-expect-error

package/dist/components/Grid.js

@@ -2,19 +2,20 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
-import '../tslib.es6-5FtW-kfi.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 
 function Grid(props) {
-    var id = props.id, children = props.children, after = props.after, before = props.before, className = props.className, dataTour = props.dataTour, horizontalResizing = props.horizontalResizing, horizontalScroll = props.horizontalScroll, _a = props.tag, Tag = _a === undefined ? 'div' : _a, type = props.type, useGridSystem = props.useGridSystem, verticalResizing = props.verticalResizing, onClick = props.onClick, onDoubleClick = props.onDoubleClick;
+    var id = props.id, children = props.children, after = props.after, before = props.before, className = props.className, dataTour = props.dataTour, horizontalResizing = props.horizontalResizing, horizontalScroll = props.horizontalScroll, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, type = props.type, useGridSystem = props.useGridSystem, verticalResizing = props.verticalResizing, onClick = props.onClick, onDoubleClick = props.onDoubleClick;
     var classGenerator = useDeviceTargetClassGenerator(props);
     var alignContentClass = classGenerator.alignContentClass, alignItemsClass = classGenerator.alignItemsClass, borderColorClass = classGenerator.borderColorClass, columnGapClass = classGenerator.columnGapClass, columnsClass = classGenerator.columnsClass, fillClass = classGenerator.fillClass, justifyContentClass = classGenerator.justifyContentClass, justifyItemsClass = classGenerator.justifyItemsClass, rowGapClass = classGenerator.rowGapClass, rowsClass = classGenerator.rowsClass;
     // @ts-expect-error
@@ -32,7 +33,7 @@ function GridItem(props) {
 }
 
 function GridRow(props) {
-    var id = props.id, children = props.children, className = props.className, dataTour = props.dataTour, htmlFor = props.htmlFor, style = props.style, _a = props.tag, Tag = _a === undefined ? 'div' : _a, onClick = props.onClick;
+    var id = props.id, children = props.children, className = props.className, dataTour = props.dataTour, htmlFor = props.htmlFor, style = props.style, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, onClick = props.onClick;
     var classGenerator = useDeviceTargetClassGenerator(props);
     var borderColorClass = classGenerator.borderColorClass, fillClass = classGenerator.fillClass, fillHoverClass = classGenerator.fillHoverClass;
     // @ts-expect-error

package/dist/components/Group.js

@@ -1,14 +1,15 @@
-export { G as Group, a as groupAppearance, g as groupConfig } from '../Group-CIIZoSm5.js';
+export { G as Group, a as groupAppearance, g as groupConfig } from '../Group-B9L2NTgM.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
 import '../hooks/useDeviceTargetClassGenerator.js';
-import '../tslib.es6-5FtW-kfi.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';

package/dist/components/HTMLContent.js

@@ -2,13 +2,14 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
-import '../tslib.es6-5FtW-kfi.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';

package/dist/components/HeroTitle.js

@@ -6,7 +6,8 @@ import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGene
 import { useStyles } from '../hooks/useStyles.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../tslib.es6-5FtW-kfi.js';
+import '../utils/setViewportProperty.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/maxBy';
@@ -26,7 +27,7 @@ var heroTitleConfig = {
     },
 };
 function HeroTitle(props) {
-    var children = props.children, after = props.after, afterWrapper = props.afterWrapper, appearance = props.appearance, before = props.before, beforeWrapper = props.beforeWrapper, className = props.className, dataTour = props.dataTour, mode = props.mode, _a = props.size, size = _a === undefined ? 'h3' : _a, sizeDesktop = props.sizeDesktop, sizeMobile = props.sizeMobile, sizeTablet = props.sizeTablet, _b = props.tag, tag = _b === undefined ? 'span' : _b, text = props.text, textWrap = props.textWrap, onClick = props.onClick;
+    var children = props.children, after = props.after, afterWrapper = props.afterWrapper, appearance = props.appearance, before = props.before, beforeWrapper = props.beforeWrapper, className = props.className, dataTour = props.dataTour, mode = props.mode, _a = props.size, size = _a === void 0 ? 'h3' : _a, sizeDesktop = props.sizeDesktop, sizeMobile = props.sizeMobile, sizeTablet = props.sizeTablet, _b = props.tag, tag = _b === void 0 ? 'span' : _b, text = props.text, textWrap = props.textWrap, onClick = props.onClick;
     var _c = useUserDeviceContext(), isMobile = _c.isMobile, isTablet = _c.isTablet, isDesktop = _c.isDesktop;
     // @ts-expect-error
     var appearanceConfig = heroTitleConfig.appearance && heroTitleConfig.appearance[appearance];

package/dist/components/Icon.js

@@ -1,5 +1,5 @@
-export { I as Icon, a as iconAppearance, i as iconConfig } from '../Icon-DotE-03d.js';
-import '../tslib.es6-5FtW-kfi.js';
+export { I as Icon, a as iconAppearance, i as iconConfig } from '../Icon-BZa8B7te.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -10,11 +10,12 @@ import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-C53o3P6_.js';
-import '../Tooltip-BsbXMzGd.js';
-import '../Text-D9sEeRE4.js';
-import '../Title-Cl95USIn.js';
+import '../Link-DN2LhPjD.js';
+import '../Tooltip-1Jbub0K6.js';
+import '../Text-JayJa3hj.js';
+import '../Title-CHgrIarR.js';

package/dist/components/Image.js

@@ -2,13 +2,14 @@ export { I as Image } from '../Image-D-QHhsrC.js';
 import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useDeviceTargetClassGenerator.js';
-import '../tslib.es6-5FtW-kfi.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';

package/dist/components/Input.js

@@ -1,11 +1,12 @@
-export { I as Input, a as inputAppearance, i as inputConfig, b as inputState } from '../Input-Ck5IbuH6.js';
+export { I as Input, a as inputAppearance, i as inputConfig, b as inputState } from '../Input-BrV5_NoV.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
 import '../hooks/useDeviceTargetClassGenerator.js';
-import '../tslib.es6-5FtW-kfi.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';

package/dist/components/InputMask.js

@@ -2,12 +2,13 @@ import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
-import '../tslib.es6-5FtW-kfi.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 
 var inputMaskConfig = {
     appearance: undefined,
@@ -24,7 +25,7 @@ var Input = React.forwardRef(function Input(props, ref) {
     // state,
     _a = props.type, 
     // state,
-    type = _a === undefined ? 'text' : _a, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
+    type = _a === void 0 ? 'text' : _a, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
     // @ts-expect-error
     var appearanceConfig = inputMaskConfig.appearance && inputMaskConfig.appearance[appearance];
     // const stateConfig = useMemo(

package/dist/components/InputPassword.js

@@ -2,22 +2,23 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useMemo, useCallback } from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
-import { I as Icon } from '../Icon-DotE-03d.js';
-import '../tslib.es6-5FtW-kfi.js';
+import { I as Icon } from '../Icon-BZa8B7te.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 import 'react-inlinesvg';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-C53o3P6_.js';
-import '../Tooltip-BsbXMzGd.js';
-import '../Text-D9sEeRE4.js';
-import '../Title-Cl95USIn.js';
+import '../Link-DN2LhPjD.js';
+import '../Tooltip-1Jbub0K6.js';
+import '../Text-JayJa3hj.js';
+import '../Title-CHgrIarR.js';
 
 var InputPasswordAppearance = {
     dev: {

package/dist/components/Label.js

@@ -1,18 +1,19 @@
-export { L as Label, a as labelAppearance, l as labelConfig } from '../Label-9O3dQlUa.js';
+export { L as Label, a as labelAppearance, l as labelConfig } from '../Label-DQyB2ThM.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
 import '../hooks/useDeviceTargetClassGenerator.js';
-import '../tslib.es6-5FtW-kfi.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Text-D9sEeRE4.js';
-import '../Tooltip-BsbXMzGd.js';
-import '../Title-Cl95USIn.js';
+import '../Text-JayJa3hj.js';
+import '../Tooltip-1Jbub0K6.js';
+import '../Title-CHgrIarR.js';

package/dist/components/Link.js

@@ -1,5 +1,5 @@
-export { L as Link, a as LinkWrapper, l as linkConfig } from '../Link-C53o3P6_.js';
-import '../tslib.es6-5FtW-kfi.js';
+export { a as Link, L as LinkWrapper, l as linkConfig } from '../Link-DN2LhPjD.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -9,6 +9,7 @@ import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';

package/dist/components/List.js

@@ -2,14 +2,15 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { L as Link } from '../Link-C53o3P6_.js';
-import '../tslib.es6-5FtW-kfi.js';
+import { a as Link } from '../Link-DN2LhPjD.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';

package/dist/components/Loader.js

@@ -1,16 +1,17 @@
-export { L as Loader, a as loaderAppearance, l as loaderConfig } from '../Loader-Cm98w6lJ.js';
+export { L as Loader, a as loaderAppearance, l as loaderConfig } from '../Loader-K_DJmah6.js';
 import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useDeviceTargetClassGenerator.js';
-import '../tslib.es6-5FtW-kfi.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Text-D9sEeRE4.js';
+import '../Text-JayJa3hj.js';

package/dist/components/Logo.js

@@ -2,14 +2,15 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { a as LinkWrapper } from '../Link-C53o3P6_.js';
-import '../tslib.es6-5FtW-kfi.js';
+import { L as LinkWrapper } from '../Link-DN2LhPjD.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
@@ -28,7 +29,7 @@ function Logo(props) {
     var alignClass = classGenerator.alignClass, alignDirectionClass = classGenerator.alignDirectionClass, alignItemsClass = classGenerator.alignItemsClass, widthClass = classGenerator.widthClass;
     // @ts-expect-error
     var logo = useStyles(props).styles;
-    return (jsx("div", { className: clsx(className, 'logo', alignClass && "align_".concat(alignClass), alignDirectionClass && "align_".concat(alignDirectionClass), alignItemsClass && "logo_align-items_".concat(alignItemsClass), alt, title, mode && "logo_mode_".concat(mode), (size || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.size)) && "logo_size_".concat(size || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.size)), widthClass && "width_".concat(widthClass)), style: logo, children: link || href ? (jsx(LinkWrapper, { className: "logo__link", href: link || href, children: jsx("img", { className: "logo__image", alt: alt || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.alt) || title || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.title), src: src || source || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.src) || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.source), title: title || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.title) || alt || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.alt) }) })) : (jsx("img", { className: "logo__image", alt: alt || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.alt) || title || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.title), src: src || source || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.src) || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.source), title: title || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.title) || alt || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.alt) })) }));
+    return (jsx("div", { className: clsx(className, 'logo', alignClass && "align_".concat(alignClass), alignDirectionClass && "align_".concat(alignDirectionClass), alignItemsClass && "logo_align-items_".concat(alignItemsClass), alt, title, mode && "logo_mode_".concat(mode), (size || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.size)) && "logo_size_".concat(size || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.size)), widthClass && "width_".concat(widthClass)), style: logo, children: link || href ? (jsx(LinkWrapper, { className: "logo__link", href: link || href, children: jsx("img", { className: "logo__image", alt: alt || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.alt) || title || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.title), src: src || source || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.src) || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.source), title: title || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.title) || alt || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.alt) }) })) : (jsx("img", { className: "logo__image", alt: alt || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.alt) || title || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.title), src: src || source || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.src) || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.source), title: title || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.title) || alt || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.alt) })) }));
 }
 
 export { Logo, logoConfig };