@itcase/ui 1.3.25 → 1.3.27

package/dist/cjs/components/Checkbox.js

@@ -3,7 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
-var Text = require('../../Text-COHpLTYr.js');
+var Text = require('../../Text-Beslj4Ns.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('react');
 require('lodash/camelCase');
@@ -11,6 +11,7 @@ require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../utils/setViewportProperty.js');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
@@ -48,7 +49,7 @@ var checkboxConfig = {
     },
 };
 function Checkbox(props) {
-    var id = props.id, after = props.after, appearance = props.appearance, before = props.before, checked = props.checked, className = props.className, desc = props.desc, descTextColor = props.descTextColor, descTextSize = props.descTextSize, descTextWeight = props.descTextWeight, disabled = props.disabled, label = props.label, labelTextColor = props.labelTextColor, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, _a = props.Tag, Tag = _a === undefined ? 'label' : _a, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus;
+    var id = props.id, after = props.after, appearance = props.appearance, before = props.before, checked = props.checked, className = props.className, desc = props.desc, descTextColor = props.descTextColor, descTextSize = props.descTextSize, descTextWeight = props.descTextWeight, disabled = props.disabled, label = props.label, labelTextColor = props.labelTextColor, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, _a = props.Tag, Tag = _a === void 0 ? 'label' : _a, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus;
     var appearanceConfig = checkboxConfig.appearance && checkboxConfig.appearance[appearance];
     var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
     var fillClass = classGenerator.fillClass, shapeClass = classGenerator.shapeClass, stateBorderWidthClass = classGenerator.stateBorderWidthClass, stateShapeClass = classGenerator.stateShapeClass, widthClass = classGenerator.widthClass;
@@ -61,7 +62,7 @@ function Checkbox(props) {
     var stateBorderColorDisabledClass = classGenerator.getClass(checked ? 'stateBorderColorDisabledChecked' : 'stateBorderColorDisabled', { prefix: 'border-color_' });
     return (jsxRuntime.jsxs(Tag, { className: clsx(className, 'checkbox', fillClass && "fill_".concat(fillClass), shapeClass && "checkbox_shape_".concat(shapeClass), widthClass && "width_".concat(widthClass)), htmlFor: Tag === 'label' && id, children: [before, jsxRuntime.jsxs("div", { className: clsx('checkbox__item', stateCheckmarkFillClass), children: [jsxRuntime.jsx("input", { className: "checkbox__input", checked: checked, disabled: disabled, 
                         // @ts-expect-error
-                        id: id, type: "checkbox", value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus }), jsxRuntime.jsx("div", { className: clsx('checkbox__state', disabled ? stateFillDisabledClass : stateFillClass, disabled ? stateBorderColorDisabledClass : stateBorderColorClass, stateShapeClass && "checkbox__state_shape_".concat(stateShapeClass), stateBorderWidthClass && "border-width_".concat(stateBorderWidthClass)), children: "\u00A0" }), jsxRuntime.jsx("div", { className: "checkbox__state-checkmark", children: "\u00A0" })] }), label && (jsxRuntime.jsx(Text.Text, { className: "checkbox__label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.labelTextSize), textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.labelTextColor), textWeight: labelTextWeight, children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "checkbox__desc", size: descTextSize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.descTextSize), textColor: descTextColor || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.descTextColor), textWeight: descTextWeight, children: desc })), after && jsxRuntime.jsx("div", { className: "checkbox__after", children: after })] }));
+                        id: id, type: "checkbox", value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus }), jsxRuntime.jsx("div", { className: clsx('checkbox__state', disabled ? stateFillDisabledClass : stateFillClass, disabled ? stateBorderColorDisabledClass : stateBorderColorClass, stateShapeClass && "checkbox__state_shape_".concat(stateShapeClass), stateBorderWidthClass && "border-width_".concat(stateBorderWidthClass)), children: "\u00A0" }), jsxRuntime.jsx("div", { className: "checkbox__state-checkmark", children: "\u00A0" })] }), label && (jsxRuntime.jsx(Text.Text, { className: "checkbox__label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textWeight: labelTextWeight, children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "checkbox__desc", size: descTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextSize), textColor: descTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextColor), textWeight: descTextWeight, children: desc })), after && jsxRuntime.jsx("div", { className: "checkbox__after", children: after })] }));
 }
 
 exports.Checkbox = Checkbox;

package/dist/cjs/components/Checkmark.js

@@ -4,7 +4,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
 var useStyles = require('../hooks/useStyles.js');
-var Icon = require('../../Icon-ByLHEhHL.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('react');
 require('lodash/camelCase');
@@ -12,33 +11,29 @@ require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('react-inlinesvg');
-require('../../Link-CoAhRbFg.js');
-require('../../Tooltip-CyZCVyba.js');
-require('../../Text-COHpLTYr.js');
-require('../../Title-BduD-TXE.js');
 
 var checkmarkAppearance = {
     accent: {
         borderWidth: '4',
-        borderColor: 'accentBorderQuaternary',
+        borderColor: 'accentBorderPrimary',
         fill: 'accentPrimary',
-        iconFill: 'surfaceItemInverse',
+        iconFill: 'white',
     },
     disabled: {
         borderWidth: '4',
         borderColor: 'surfaceBorderTertiary',
         fill: 'surfaceItemSecondary',
-        iconFill: 'surfaceItemQuaternary',
+        iconFill: '#787878',
     },
     surface: {
         borderWidth: '4',
         borderColor: 'surfaceBorderTertiary',
         fill: 'surfacePrimary',
-        iconFill: 'surfaceItemPrimary',
+        iconFill: 'black',
     },
 };
 
@@ -49,14 +44,14 @@ var checkmarkConfig = {
     },
 };
 function Checkmark(props) {
-    var isChecked = props.isChecked, _a = props.isDisabled, isDisabled = _a === undefined ? false : _a, appearance = props.appearance, className = props.className, iconChecked = props.iconChecked, iconFill = props.iconFill, onClick = props.onClick;
+    var isChecked = props.isChecked, _a = props.isDisabled, isDisabled = _a === void 0 ? false : _a, appearance = props.appearance, className = props.className, iconFill = props.iconFill, onClick = props.onClick;
     // @ts-expect-error
     var appearanceConfig = checkmarkConfig.appearance && checkmarkConfig.appearance[appearance];
     var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
     var borderColorClass = classGenerator.borderColorClass, borderWidthClass = classGenerator.borderWidthClass, fillClass = classGenerator.fillClass, sizeClass = classGenerator.sizeClass;
     // @ts-expect-error
     var checkmarkStyles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'checkmark', sizeClass && "checkmark_size_".concat(sizeClass), fillClass && "fill_".concat(fillClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderColorClass && "border-color_".concat(borderColorClass), isDisabled), style: checkmarkStyles, onClick: onClick, children: isChecked && (jsxRuntime.jsx(Icon.Icon, { className: "checkmark__svg", iconFill: iconFill || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.iconFill), size: "24", SvgImage: isChecked ? iconChecked : null })) }));
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'checkmark', sizeClass && "checkmark_size_".concat(sizeClass), fillClass && "fill_".concat(fillClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderColorClass && "border-color_".concat(borderColorClass), isDisabled), style: checkmarkStyles, onClick: onClick, children: isChecked && (jsxRuntime.jsx("svg", { fill: "none", style: { width: '60%', height: '60%' }, viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { fill: iconFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconFill), "clip-rule": "evenodd", d: "M11.5281 3.04275C11.8222 2.75109 11.8242 2.27622 11.5325 1.9821C11.2409 1.68799 10.766 1.686 10.4719 1.97766L3.94118 8.45396L1.52811 6.061C1.23399 5.76933 0.759121 5.77132 0.467456 6.06544C0.17579 6.35955 0.177777 6.83442 0.471894 7.12609L3.37786 10.0078C3.68973 10.3171 4.19262 10.3171 4.50449 10.0078L11.5281 3.04275Z", "fill-rule": "evenodd" }) })) }));
 }
 
 exports.Checkmark = Checkmark;

package/dist/cjs/components/Chips.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
 var useStyles = require('../hooks/useStyles.js');
-var Text = require('../../Text-COHpLTYr.js');
+var Text = require('../../Text-Beslj4Ns.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('react');
 require('lodash/camelCase');
@@ -12,6 +12,7 @@ require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
@@ -62,7 +63,7 @@ var chipsConfig = {
     },
 };
 function Chips(props) {
-    var children = props.children, isActive = props.isActive, appearance = props.appearance, className = props.className, _a = props.label, label = _a === undefined ? '' : _a, labelTextActiveColor = props.labelTextActiveColor, labelTextColor = props.labelTextColor, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, type = props.type, onClick = props.onClick;
+    var children = props.children, isActive = props.isActive, appearance = props.appearance, className = props.className, _a = props.label, label = _a === void 0 ? '' : _a, labelTextActiveColor = props.labelTextActiveColor, labelTextColor = props.labelTextColor, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, type = props.type, onClick = props.onClick;
     // @ts-expect-error
     var appearanceConfig = chipsConfig.appearance && chipsConfig.appearance[appearance];
     var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
@@ -72,8 +73,8 @@ function Chips(props) {
     return (jsxRuntime.jsx("div", { className: clsx(className, 'chips', isActive && 'chips_state_active', isActive
             ? fillActiveClass && "fill_active_".concat(fillActiveClass)
             : fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), shapeClass && "chips_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderTypeClass && "border_type_".concat(borderTypeClass), sizeClass && "chips_size_".concat(sizeClass), alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass), type && "chips_type_".concat(type), cursorClass && "cursor_".concat(cursorClass), onClick && 'cursor_type_pointer'), style: chipsStyles, onClick: onClick, children: jsxRuntime.jsxs("div", { className: "chips__inner", children: [typeof label === 'string' ? (jsxRuntime.jsx(Text.Text, { className: "chips__label", size: labelTextSize, textWeight: labelTextWeight, textColor: isActive
-                        ? labelTextActiveColor || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.labelTextActiveColor)
-                        : labelTextColor || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.labelTextColor), children: label })) : (jsxRuntime.jsx("div", { className: "chips__label", children: label })), children] }) }));
+                        ? labelTextActiveColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextActiveColor)
+                        : labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), children: label })) : (jsxRuntime.jsx("div", { className: "chips__label", children: label })), children] }) }));
 }
 
 exports.Chips = Chips;

package/dist/cjs/components/Choice.js

@@ -4,23 +4,24 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
-var Icon = require('../../Icon-ByLHEhHL.js');
-var Loader = require('../../Loader-D_53c71f.js');
-var Text = require('../../Text-COHpLTYr.js');
+var Icon = require('../../Icon-B_bS-o4g.js');
+var Loader = require('../../Loader-Dn036JwE.js');
+var Text = require('../../Text-Beslj4Ns.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../utils/setViewportProperty.js');
 require('react-inlinesvg');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Link-CoAhRbFg.js');
-require('../../Tooltip-CyZCVyba.js');
-require('../../Title-BduD-TXE.js');
+require('../../Link-CxWmYMyL.js');
+require('../../Tooltip-CNua1g76.js');
+require('../../Title-DBaHcpvB.js');
 
 var choiceAppearance = {
     accent: {
@@ -53,7 +54,7 @@ var choiceConfig = {
     },
 };
 function Choice(props) {
-    var _a = props.isCheckbox, isCheckbox = _a === undefined ? false : _a, _b = props.isDisabled, isDisabled = _b === undefined ? false : _b, _c = props.isLoading, isLoading = _c === undefined ? false : _c, _d = props.active, active = _d === undefined ? { value: undefined } : _d, 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, labelTextActiveColor = props.labelTextActiveColor, labelTextActiveColorDisabled = props.labelTextActiveColorDisabled, labelTextColor = props.labelTextColor, labelTextColorDisabled = props.labelTextColorDisabled, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, name = props.name, _e = props.options, options = _e === undefined ? [] : _e, set = props.set, setActiveSegment = props.setActiveSegment, _f = props.size, size = _f === undefined ? 'normal' : _f, type = props.type;
+    var _a = props.isCheckbox, isCheckbox = _a === void 0 ? false : _a, _b = props.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, _d = props.active, active = _d === void 0 ? { value: undefined } : _d, 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, labelTextActiveColor = props.labelTextActiveColor, labelTextActiveColorDisabled = props.labelTextActiveColorDisabled, labelTextColor = props.labelTextColor, labelTextColorDisabled = props.labelTextColorDisabled, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, name = props.name, _e = props.options, options = _e === void 0 ? [] : _e, set = props.set, setActiveSegment = props.setActiveSegment, _f = props.size, size = _f === void 0 ? 'normal' : _f, type = props.type;
     var controlRef = React.useRef(null);
     var optionsRefs = React.useMemo(function () { return new Map(options.map(function (item) { return [item.value, React.createRef()]; })); }, [options]);
     var onChange = React.useCallback(function (event, item) {
@@ -77,12 +78,12 @@ function Choice(props) {
                             : fillActiveDisabledClass && "fill_active_disabled_".concat(fillActiveDisabledClass)
                         : !isDisabled
                             ? fillClass && "fill_".concat(fillClass)
-                            : fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), isActive && isDisabled && 'choice__item_active_state_disabled', isActive && 'choice__item_active'), ref: optionsRefs.get(item.value), children: [jsxRuntime.jsx("input", { className: "choice__item-radio", name: name, checked: isActive, disabled: isDisabled, id: "".concat(name, "-").concat(item.value), type: isCheckbox ? 'checkbox' : 'radio', value: item.value, onChange: function (event) { return onChange(event, item); } }), jsxRuntime.jsxs("label", { className: clsx('choice__item-label', isDisabled && 'choice__item-label_state_disabled'), htmlFor: "".concat(name, "-").concat(item.value), children: [before, item.label && (jsxRuntime.jsx(Text.Text, { size: labelTextSize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.labelTextSize), textWeight: labelTextWeight, textColor: isActive
+                            : fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), isActive && isDisabled && 'choice__item_active_state_disabled', isActive && 'choice__item_active'), ref: optionsRefs.get(item.value), children: [jsxRuntime.jsx("input", { className: "choice__item-radio", name: name, checked: isActive, disabled: isDisabled, id: "".concat(name, "-").concat(item.value), type: isCheckbox ? 'checkbox' : 'radio', value: item.value, onChange: function (event) { return onChange(event, item); } }), jsxRuntime.jsxs("label", { className: clsx('choice__item-label', isDisabled && 'choice__item-label_state_disabled'), htmlFor: "".concat(name, "-").concat(item.value), children: [before, item.label && (jsxRuntime.jsx(Text.Text, { size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textWeight: labelTextWeight, textColor: isActive
                                         ? !isDisabled
-                                            ? labelTextActiveColor || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.labelTextActiveColor)
+                                            ? labelTextActiveColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextActiveColor)
                                             : labelTextActiveColorDisabled
                                         : !isDisabled
-                                            ? labelTextColor || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.labelTextColor)
+                                            ? labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor)
                                             : labelTextColorDisabled, children: item.label })), (icon || activeIcon) && (jsxRuntime.jsx(Icon.Icon, { className: "choice__item-icon", iconFillDisabled: isDisabled ? iconFillDisabled : undefined, iconSize: iconSize, SvgImage: isActive ? activeIcon : icon, iconFill: isActive
                                         ? activeIconItemFill || item.activeIconItemFill
                                         : iconItemFill || item.iconItemFill })), after] })] }, "".concat(name, "-").concat(item.value)));

package/dist/cjs/components/Code.js

@@ -11,6 +11,7 @@ require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../utils/setViewportProperty.js');
 
 var codeAppearance = {
     dev: {},
@@ -23,16 +24,16 @@ var codeConfig = {
     },
 };
 function Code(props) {
-    var after = props.after, appearance = props.appearance, before = props.before, className = props.className, inputAutoFocus = props.inputAutoFocus, _a = props.inputCount, inputCount = _a === undefined ? 6 : _a, _b = props.inputPlaceholder, inputPlaceholder = _b === undefined ? 0 : _b, _c = props.inputType, inputType = _c === undefined ? 'number' : _c, separatorComponent = props.separatorComponent, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus;
+    var after = props.after, appearance = props.appearance, before = props.before, className = props.className, inputAutoFocus = props.inputAutoFocus, _a = props.inputCount, inputCount = _a === void 0 ? 6 : _a, _b = props.inputPlaceholder, inputPlaceholder = _b === void 0 ? 0 : _b, _c = props.inputType, inputType = _c === void 0 ? 'number' : _c, separatorComponent = props.separatorComponent, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus;
     var _d = React.useState(''), otp = _d[0], setOtp = _d[1];
     // @ts-expect-error
     var appearanceConfig = codeConfig.appearance && codeConfig.appearance[appearance];
     var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
     var gapClass = classGenerator.gapClass, inputBorderColorClass = classGenerator.inputBorderColorClass, inputBorderColorHoverClass = classGenerator.inputBorderColorHoverClass, inputBorderFocusColorClass = classGenerator.inputBorderFocusColorClass, inputBorderWidthClass = classGenerator.inputBorderWidthClass, inputCaretColorClass = classGenerator.inputCaretColorClass, inputFillClass = classGenerator.inputFillClass, inputFillHoverClass = classGenerator.inputFillHoverClass, inputPlaceholderTextColorClass = classGenerator.inputPlaceholderTextColorClass, inputShapeClass = classGenerator.inputShapeClass, inputSizeClass = classGenerator.inputSizeClass, inputTextColorClass = classGenerator.inputTextColorClass, inputTextSizeClass = classGenerator.inputTextSizeClass, inputTextWeightClass = classGenerator.inputTextWeightClass, widthClass = classGenerator.widthClass;
     // NOTE: too many dependencies for "useCallback" and possible too many checks
-    var renderInput = function (otpInputProps) {
+    var renderInput = function (otpInputProps, index) {
         return (jsxRuntime.jsx("input", tslib_es6.__assign({}, otpInputProps, { className: clsx('code__input', inputCaretColorClass && "caret-color_".concat(inputCaretColorClass), inputFillClass && "fill_".concat(inputFillClass), inputFillHoverClass && "fill_hover_".concat(inputFillHoverClass), inputPlaceholderTextColorClass &&
-                "placeholder-text-color_".concat(inputPlaceholderTextColorClass), inputShapeClass && "code__input_shape_".concat(inputShapeClass), inputTextSizeClass && "text_size_".concat(inputTextSizeClass), inputTextColorClass && "text-color_".concat(inputTextColorClass), inputTextWeightClass && "text-weight_".concat(inputTextWeightClass), inputBorderWidthClass && "border-width_".concat(inputBorderWidthClass), inputBorderColorClass && "border-color_".concat(inputBorderColorClass), inputBorderColorHoverClass && "border-color_hover_".concat(inputBorderColorHoverClass), inputBorderFocusColorClass && "border-color_focus_".concat(inputBorderFocusColorClass), inputSizeClass && "code__input_size_".concat(inputSizeClass), widthClass && "width_".concat(widthClass)), autoComplete: "one-time-code", onBlur: function (event) {
+                "placeholder-text-color_".concat(inputPlaceholderTextColorClass), inputShapeClass && "code__input_shape_".concat(inputShapeClass), inputTextSizeClass && "text_size_".concat(inputTextSizeClass), inputTextColorClass && "text-color_".concat(inputTextColorClass), inputTextWeightClass && "text-weight_".concat(inputTextWeightClass), inputBorderWidthClass && "border-width_".concat(inputBorderWidthClass), inputBorderColorClass && "border-color_".concat(inputBorderColorClass), inputBorderColorHoverClass && "border-color_hover_".concat(inputBorderColorHoverClass), inputBorderFocusColorClass && "border-color_focus_".concat(inputBorderFocusColorClass), inputSizeClass && "code__input_size_".concat(inputSizeClass), widthClass && "width_".concat(widthClass)), name: "code-".concat(index), autoComplete: "one-time-code", onBlur: function (event) {
                 onBlur && onBlur(event);
                 otpInputProps.onBlur(event);
             }, onFocus: function (event) {

package/dist/cjs/components/CookiesWarning.js

@@ -5,33 +5,34 @@ var React = require('react');
 var clsx = require('clsx');
 var Cookies = require('js-cookie');
 var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
-var Button = require('../../Button-BSygAkO5.js');
-var Group = require('../../Group-pMTTxQH4.js');
-var Text = require('../../Text-COHpLTYr.js');
+var Button = require('../../Button-BFX_EEum.js');
+var Group = require('../../Group-BQ4Ic0jX.js');
+var Text = require('../../Text-Beslj4Ns.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../utils/setViewportProperty.js');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Icon-ByLHEhHL.js');
+require('../../Icon-B_bS-o4g.js');
 require('react-inlinesvg');
-require('../../Link-CoAhRbFg.js');
-require('../../Tooltip-CyZCVyba.js');
-require('../../Title-BduD-TXE.js');
-require('../../Loader-D_53c71f.js');
+require('../../Link-CxWmYMyL.js');
+require('../../Tooltip-CNua1g76.js');
+require('../../Title-DBaHcpvB.js');
+require('../../Loader-Dn036JwE.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 = React.useRef(null);
     var isOpen = React.useMemo(function () { return Cookies.get('cookies-warning') !== 'close'; }, []);
     var closeCookiesWarning = React.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');
     }, []);
     React.useEffect(function () {

package/dist/cjs/components/DadataHintField.js

@@ -5,13 +5,14 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var reactDadata = require('react-dadata');
-var Input = require('../../Input-zkYoZhQk.js');
+var Input = require('../../Input-ffioh1sj.js');
 require('../hooks/useDeviceTargetClassGenerator.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../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/cjs/components/DatePicker.js

@@ -8,24 +8,25 @@ var locale = require('date-fns/locale');
 var DatePicker = require('react-datepicker');
 var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
 var useStyles = require('../hooks/useStyles.js');
-var Button = require('../../Button-BSygAkO5.js');
-var Icon = require('../../Icon-ByLHEhHL.js');
-var Input = require('../../Input-zkYoZhQk.js');
-var Label = require('../../Label-GEBQXoVJ.js');
-var Text = require('../../Text-COHpLTYr.js');
+var Button = require('../../Button-BFX_EEum.js');
+var Icon = require('../../Icon-B_bS-o4g.js');
+var Input = require('../../Input-ffioh1sj.js');
+var Label = require('../../Label-HKRKV3mn.js');
+var Text = require('../../Text-Beslj4Ns.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Link-CoAhRbFg.js');
-require('../../Loader-D_53c71f.js');
+require('../../Link-CxWmYMyL.js');
+require('../../Loader-Dn036JwE.js');
 require('react-inlinesvg');
-require('../../Tooltip-CyZCVyba.js');
-require('../../Title-BduD-TXE.js');
+require('../../Tooltip-CNua1g76.js');
+require('../../Title-DBaHcpvB.js');
 
 var datePickerAppearance = {
     dev: {},
@@ -38,7 +39,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 = React.useRef(null);
     var start = React.useMemo(function () {
         if (value) {
@@ -70,7 +71,7 @@ function DatePickerInput(props) {
         setEndDate(newEndDate);
     }, [onChange]);
     var renderDayContents = React.useCallback(function (day, date) {
-        return (jsxRuntime.jsx(Button.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 (jsxRuntime.jsx(Button.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,
@@ -79,7 +80,7 @@ function DatePickerInput(props) {
     ]);
     var renderCustomHeader = React.useCallback(function (_a) {
         var decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, monthDate = _a.monthDate;
-        return (jsxRuntime.jsxs("div", { className: "react-datepicker__header--div", children: [datePickerProps.iconLeft && (jsxRuntime.jsx(Icon.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 })), jsxRuntime.jsxs("div", { className: "react-datepicker__data", children: [jsxRuntime.jsx(Text.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' }) }), jsxRuntime.jsx(Text.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 && (jsxRuntime.jsx(Icon.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 (jsxRuntime.jsxs("div", { className: "react-datepicker__header--div", children: [datePickerProps.iconLeft && (jsxRuntime.jsx(Icon.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 })), jsxRuntime.jsxs("div", { className: "react-datepicker__data", children: [jsxRuntime.jsx(Text.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' }) }), jsxRuntime.jsx(Text.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 && (jsxRuntime.jsx(Icon.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,
@@ -108,7 +109,7 @@ function DatePickerInput(props) {
     var widthClass = classGenerator.widthClass;
     // @ts-expect-error
     var datePickerStyles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.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: jsxRuntime.jsx(DatePicker, tslib_es6.__assign({ ref: datepickerRef, endDate: (datePickerProps === null || datePickerProps === undefined ? undefined : datePickerProps.selectsRange) ? endDate : undefined, locale: locale.ru, minDate: (datePickerProps === null || datePickerProps === undefined ? undefined : datePickerProps.disablePastDays) ? new Date() : undefined, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: startDate, startDate: startDate, customInput: jsxRuntime.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 (jsxRuntime.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: jsxRuntime.jsx(DatePicker, tslib_es6.__assign({ ref: datepickerRef, endDate: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectsRange) ? endDate : undefined, locale: locale.ru, minDate: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.disablePastDays) ? new Date() : undefined, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: startDate, startDate: startDate, customInput: jsxRuntime.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 })) }));
 }
@@ -122,7 +123,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 (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(Input.Input, tslib_es6.__assign({}, inputAppearanceProps, props, inputProps, { ref: ref, autocomplete: "off", value: multipleValue })), inputIcon && jsxRuntime.jsx(DatePickerInputIcon, tslib_es6.__assign({}, props)), isClearable && jsxRuntime.jsx(DatePickerClearButton, tslib_es6.__assign({}, props))] }));
 });
 DatePickerCustomInput.displayName = 'DatePickerCustomInput';
@@ -130,8 +131,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 = React.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 (jsxRuntime.jsxs(React.Fragment, { children: [clearLabel && (jsxRuntime.jsx(Label.Label, { className: clsx('react-datepicker__clear-label', 'cursor_type_pointer'), labelTextColor: clearLabelTextColor, labelTextSize: clearLabelTextSize, label: clearLabel, labelTextColorHover: clearLabelTextColorHover, onClick: onClick })), (clearIcon || clearIconSrc) && (jsxRuntime.jsx(Icon.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/cjs/components/Divider.js

@@ -11,6 +11,7 @@ require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../utils/setViewportProperty.js');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');

package/dist/cjs/components/Dot.js

@@ -11,6 +11,7 @@ require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');

package/dist/cjs/components/Dropdown.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var DropdownItem = require('../../DropdownItem-DFE1HsyX.js');
+var DropdownItem = require('../../DropdownItem-FNOztnTT.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -11,13 +11,14 @@ require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../utils/setViewportProperty.js');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../../Divider-Goh6mpPK.js');
-require('../../Link-CoAhRbFg.js');
-require('../../Text-COHpLTYr.js');
+require('../../Link-CxWmYMyL.js');
+require('../../Text-Beslj4Ns.js');
 
 
 

package/dist/cjs/components/Flex.js

@@ -11,12 +11,13 @@ require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../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.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
@@ -25,7 +26,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.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/cjs/components/Grid.js

@@ -11,12 +11,13 @@ require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../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.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
@@ -34,7 +35,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.useDeviceTargetClassGenerator(props);
     var borderColorClass = classGenerator.borderColorClass, fillClass = classGenerator.fillClass, fillHoverClass = classGenerator.fillHoverClass;
     // @ts-expect-error

package/dist/cjs/components/Group.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Group = require('../../Group-pMTTxQH4.js');
+var Group = require('../../Group-BQ4Ic0jX.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -11,6 +11,7 @@ require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../utils/setViewportProperty.js');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');

package/dist/cjs/components/HTMLContent.js

@@ -11,6 +11,7 @@ require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');

package/dist/cjs/components/HeroTitle.js

@@ -8,6 +8,7 @@ var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenera
 var useStyles = require('../hooks/useStyles.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../utils/setViewportProperty.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -28,7 +29,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 = UIContext.useUserDeviceContext(), isMobile = _c.isMobile, isTablet = _c.isTablet, isDesktop = _c.isDesktop;
     // @ts-expect-error
     var appearanceConfig = heroTitleConfig.appearance && heroTitleConfig.appearance[appearance];

package/dist/cjs/components/Icon.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Icon = require('../../Icon-ByLHEhHL.js');
+var Icon = require('../../Icon-B_bS-o4g.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('react/jsx-runtime');
 require('react');
@@ -12,14 +12,15 @@ require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../utils/setViewportProperty.js');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Link-CoAhRbFg.js');
-require('../../Tooltip-CyZCVyba.js');
-require('../../Text-COHpLTYr.js');
-require('../../Title-BduD-TXE.js');
+require('../../Link-CxWmYMyL.js');
+require('../../Tooltip-CNua1g76.js');
+require('../../Text-Beslj4Ns.js');
+require('../../Title-DBaHcpvB.js');