@itcase/ui 1.8.123 → 1.8.125

package/dist/components/Select.js

@@ -1,17 +1,16 @@
-import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import Select, { components } from 'react-select';
-import { I as Icon, B as Badge } from '../Icon_es_BrwLifge.js';
+import { I as Icon, B as Badge } from '../Icon_es_DkVkzTha.js';
 import React, { useRef, useEffect, useMemo } from 'react';
 import clsx from 'clsx';
 import CreatableSelect from 'react-select/creatable';
-import { G as Group } from '../Group_es_DRqIIM9m.js';
-import { T as Text } from '../Text_es_CwV9rjFD.js';
+import { G as Group } from '../Group_es_BU5k8f5S.js';
+import { T as Text } from '../Text_es_CnymlElo.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { icons12, icons16, icons14, icons24 } from '@itcase/icons/default';
-import { L as Loader } from '../Loader_es_BUSqFrCd.js';
-import { D as Divider } from '../Divider_es_CCLBFIx6.js';
+import { L as Loader } from '../Loader_es_CmSggwbR.js';
+import { D as Divider } from '../Divider_es_BiYozVBS.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '@itcase/common';
@@ -28,25 +27,25 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Link_es_XiqbdwLp.js';
+import '../Link_es_P2b6ya7P.js';
 import 'lodash/castArray';
 
 // interface ClearIndicatorProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>>
 //   extends DefaultClearIndicatorProps<Option, IsMulti, Group> {}
 // For use memo need to check "ClearIndicator" props
 // const SelectClearIndicator = React.memo(
-var SelectClearIndicator = function (props) {
-    var children = props.children;
-    var _a = props.selectProps, clearIcon = _a.clearIcon, clearIconFill = _a.clearIconFill;
-    return (jsx(components.ClearIndicator, __assign({}, props, { children: clearIcon ? (jsx(Icon, { iconFill: clearIconFill, SvgImage: clearIcon })) : (children) })));
+const SelectClearIndicator = (props) => {
+    const { children } = props;
+    const { clearIcon, clearIconFill } = props.selectProps;
+    return (jsx(components.ClearIndicator, { ...props, children: clearIcon ? (jsx(Icon, { iconFill: clearIconFill, SvgImage: clearIcon })) : (children) }));
 };
 
-var SelectLoadingMessage = function (props) {
-    var _a = props.selectProps, loadingMessageText = _a.loadingMessageText, loadingMessageTextColor = _a.loadingMessageTextColor, loadingMessageTextSize = _a.loadingMessageTextSize;
+const SelectLoadingMessage = (props) => {
+    const { loadingMessageText, loadingMessageTextColor, loadingMessageTextSize, } = props.selectProps;
     return (jsx(Group, { textAlign: "center", children: jsx(Text, { size: loadingMessageTextSize, textColor: loadingMessageTextColor, children: loadingMessageText }) }));
 };
 
-var selectAppearanceDefault = {
+const selectAppearanceDefault = {
     defaultPrimary: {
         fill: 'surfaceSecondary',
         fillHover: 'surfaceTertiary',
@@ -85,7 +84,7 @@ var selectAppearanceDefault = {
     },
 };
 
-var selectAppearanceDisabled = {
+const selectAppearanceDisabled = {
     disabledPrimary: {
         elevation: 8,
         badgeAppearance: 'accent',
@@ -115,7 +114,7 @@ var selectAppearanceDisabled = {
     },
 };
 
-var selectAppearanceError = {
+const selectAppearanceError = {
     errorPrimary: {
         fill: 'errorTertiary',
         fillHover: 'errorTertiary',
@@ -154,7 +153,7 @@ var selectAppearanceError = {
     },
 };
 
-var selectAppearanceRequire = {
+const selectAppearanceRequire = {
     requirePrimary: {
         fill: 'warningTertiary',
         fillHover: 'warningTertiary',
@@ -193,7 +192,7 @@ var selectAppearanceRequire = {
     },
 };
 
-var selectAppearanceShape = {
+const selectAppearanceShape = {
     rounded: {
         shape: 'rounded',
     },
@@ -215,7 +214,7 @@ var selectAppearanceShape = {
     },
 };
 
-var selectAppearanceSize = {
+const selectAppearanceSize = {
     sizeXXL: {
         size: 'xxl',
         textLoadingMessageAppearance: 'sizeM',
@@ -332,7 +331,7 @@ var selectAppearanceSize = {
     },
 };
 
-var selectAppearanceStyle = {
+const selectAppearanceStyle = {
     solid: {
         borderColor: 'none',
         borderColorHover: 'none',
@@ -349,7 +348,7 @@ var selectAppearanceStyle = {
     },
 };
 
-var selectAppearanceSuccess = {
+const selectAppearanceSuccess = {
     successPrimary: {
         fill: 'successTertiary',
         fillHover: 'successTertiary',
@@ -388,169 +387,175 @@ var selectAppearanceSuccess = {
     },
 };
 
-var selectAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, selectAppearanceRequire), selectAppearanceDefault), selectAppearanceDisabled), selectAppearanceSuccess), selectAppearanceSize), selectAppearanceError), selectAppearanceShape), selectAppearanceStyle);
+const selectAppearance = {
+    ...selectAppearanceRequire,
+    ...selectAppearanceDefault,
+    ...selectAppearanceDisabled,
+    ...selectAppearanceSuccess,
+    ...selectAppearanceSize,
+    ...selectAppearanceError,
+    ...selectAppearanceShape,
+    ...selectAppearanceStyle,
+};
 
-var SelectControl = function (props) {
-    var _a = props.selectProps, before = _a.before, after = _a.after;
-    return (jsxs(React.Fragment, { children: [before, jsx(components.Control, __assign({}, props, { className: clsx('select__control') })), after] }));
+const SelectControl = (props) => {
+    const { before, after } = props.selectProps;
+    return (jsxs(React.Fragment, { children: [before, jsx(components.Control, { ...props, className: clsx('select__control') }), after] }));
 };
 
 // For use memo need to check "DropdownIndicator" props
 // const SelectDropdownIndicator = React.memo(
-var SelectDropdownIndicator = function (props) {
-    var children = props.children;
-    var _a = props.selectProps, dropdownFillHover = _a.dropdownFillHover, dropdownIcon = _a.dropdownIcon, dropdownIconFill = _a.dropdownIconFill, dropdownIconShape = _a.dropdownIconShape;
-    return (jsx(components.DropdownIndicator, __assign({}, props, { children: dropdownIcon ? (jsx(Icon, { fillHover: dropdownFillHover, iconFill: dropdownIconFill, shape: dropdownIconShape, SvgImage: dropdownIcon })) : (children) })));
+const SelectDropdownIndicator = (props) => {
+    const { children } = props;
+    const { dropdownFillHover, dropdownIcon, dropdownIconFill, dropdownIconShape, } = props.selectProps;
+    return (jsx(components.DropdownIndicator, { ...props, children: dropdownIcon ? (jsx(Icon, { fillHover: dropdownFillHover, iconFill: dropdownIconFill, shape: dropdownIconShape, SvgImage: dropdownIcon })) : (children) }));
 };
 
-var SelectGroupHeading = function (props) {
-    var _a = props.selectProps, groupFill = _a.groupFill, groupTextColor = _a.groupTextColor, groupTextSize = _a.groupTextSize, groupTextWeight = _a.groupTextWeight;
-    return (jsx(components.GroupHeading, __assign({}, props, { className: clsx('select__menu-group-heading', groupFill && "fill_".concat(groupFill)), children: jsx(Text, { size: groupTextSize, textColor: groupTextColor, textWeight: groupTextWeight, children: props.data.label }) })));
+const SelectGroupHeading = (props) => {
+    const { groupFill, groupTextColor, groupTextSize, groupTextWeight } = props.selectProps;
+    return (jsx(components.GroupHeading, { ...props, className: clsx('select__menu-group-heading', groupFill && `fill_${groupFill}`), children: jsx(Text, { size: groupTextSize, textColor: groupTextColor, textWeight: groupTextWeight, children: props.data.label }) }));
 };
 
-var SelectIndicatorsContainer = function (props) {
-    var _a = props.selectProps, badgeAppearance = _a.badgeAppearance, badgeSize = _a.badgeSize, badgeTextSize = _a.badgeTextSize, showBadge = _a.showBadge, value = _a.value;
-    return (jsxs(components.IndicatorsContainer, __assign({}, props, { children: [showBadge &&
+const SelectIndicatorsContainer = (props) => {
+    const { badgeAppearance, badgeSize, badgeTextSize, showBadge, value } = props.selectProps;
+    return (jsxs(components.IndicatorsContainer, { ...props, children: [showBadge &&
                 value &&
                 // @ts-expect-error
-                (value === null || value === void 0 ? void 0 : value.length) > 0 ? (jsx(Badge, { appearance: badgeAppearance, size: badgeSize, textSize: badgeTextSize, 
+                value?.length > 0 ? (jsx(Badge, { appearance: badgeAppearance, size: badgeSize, textSize: badgeTextSize, 
                 // @ts-expect-error
-                value: value.length.toString() })) : null, props.children] })));
+                value: value.length.toString() })) : null, props.children] }));
 };
 
-var SelectInput = function (props) {
-    var _a = props.selectProps, inputCaretColor = _a.inputCaretColor, inputTextColor = _a.inputTextColor, inputTextSize = _a.inputTextSize;
-    return (jsx(components.Input, __assign({}, props, { className: clsx(inputTextSize && "text_size_".concat(inputTextSize), inputTextColor && "text-color_".concat(inputTextColor), inputCaretColor && "caret-color_".concat(inputCaretColor)) })));
+const SelectInput = (props) => {
+    const { inputCaretColor, inputTextColor, inputTextSize } = props.selectProps;
+    return (jsx(components.Input, { ...props, className: clsx(inputTextSize && `text_size_${inputTextSize}`, inputTextColor && `text-color_${inputTextColor}`, inputCaretColor && `caret-color_${inputCaretColor}`) }));
 };
 
-var SelectLoadingIndicator = function (props) {
-    var _a = props.selectProps, loaderAppearance = _a.loaderAppearance, isLoading = _a.isLoading;
+const SelectLoadingIndicator = (props) => {
+    const { loaderAppearance, isLoading } = props.selectProps;
     return isLoading && jsx(Loader, { appearance: loaderAppearance });
 };
 
-var SelectMenu = function (props) {
-    var _a = props.selectProps, elevation = _a.elevation, menuAfter = _a.menuAfter, menuBefore = _a.menuBefore, menuFill = _a.menuFill, menuShape = _a.menuShape, menuShapeStrength = _a.menuShapeStrength;
-    return (jsxs(components.Menu, __assign({}, props, { className: clsx(menuFill && "fill_".concat(menuFill), menuShape && "shape_".concat(menuShape), menuShapeStrength && "shape-strength_".concat(menuShapeStrength), elevation && "elevation_".concat(elevation)), children: [menuBefore, props.selectProps.fetchingData ? (jsx("span", { className: "fetching", children: "Fetching data..." })) : (jsx(React.Fragment, { children: props.children })), menuAfter] })));
+const SelectMenu = (props) => {
+    const { elevation, menuAfter, menuBefore, menuFill, menuShape, menuShapeStrength, } = props.selectProps;
+    return (jsxs(components.Menu, { ...props, className: clsx(menuFill && `fill_${menuFill}`, menuShape && `shape_${menuShape}`, menuShapeStrength && `shape-strength_${menuShapeStrength}`, elevation && `elevation_${elevation}`), children: [menuBefore, props.selectProps.fetchingData ? (jsx("span", { className: "fetching", children: "Fetching data..." })) : (jsx(React.Fragment, { children: props.children })), menuAfter] }));
 };
 
-var SelectMultiValueContainer = function (props) {
-    var _a = props.selectProps, multipleItemFill = _a.multipleItemFill, multipleItemFillHover = _a.multipleItemFillHover;
-    return (jsx(components.MultiValueContainer, __assign({}, props, { children: jsx(Group, { className: clsx('select__multi-value-item'), direction: "horizontal", alignItems: "center", fill: multipleItemFill, fillHover: multipleItemFillHover, gap: "0.5m", children: props.children }) })));
+const SelectMultiValueContainer = (props) => {
+    const { multipleItemFill, multipleItemFillHover } = props.selectProps;
+    return (jsx(components.MultiValueContainer, { ...props, children: jsx(Group, { className: clsx('select__multi-value-item'), direction: "horizontal", alignItems: "center", fill: multipleItemFill, fillHover: multipleItemFillHover, gap: "0.5m", children: props.children }) }));
 };
 
-var SelectMultiValueLabel = function (props) {
-    var _a = props.selectProps, multipleItemTextColor = _a.multipleItemTextColor, multipleItemTextSize = _a.multipleItemTextSize;
-    return (jsx(components.MultiValueLabel, __assign({}, props, { children: props.data && (jsx(Text, { size: multipleItemTextSize, textColor: multipleItemTextColor, children: props.data.label })) })));
+const SelectMultiValueLabel = (props) => {
+    const { multipleItemTextColor, multipleItemTextSize } = props.selectProps;
+    return (jsx(components.MultiValueLabel, { ...props, children: props.data && (jsx(Text, { size: multipleItemTextSize, textColor: multipleItemTextColor, children: props.data.label })) }));
 };
 
-var SelectMultiValueRemove = function (props) {
-    var _a = props.selectProps, multipleItemIcon = _a.multipleItemIcon, multipleItemIconFill = _a.multipleItemIconFill;
-    return (jsx(components.MultiValueRemove, __assign({}, props, { children: jsx(Icon, { iconFill: multipleItemIconFill, SvgImage: multipleItemIcon }) })));
+const SelectMultiValueRemove = (props) => {
+    const { multipleItemIcon, multipleItemIconFill } = props.selectProps;
+    return (jsx(components.MultiValueRemove, { ...props, children: jsx(Icon, { iconFill: multipleItemIconFill, SvgImage: multipleItemIcon }) }));
 };
 
-var SelectNoOptions = function (props) {
-    var _a = props.selectProps, inputValue = _a.inputValue, noOptionsSearchText = _a.noOptionsSearchText, noOptionsText = _a.noOptionsText, noOptionsTextColor = _a.noOptionsTextColor, noOptionsTextSize = _a.noOptionsTextSize, optionFill = _a.optionFill;
-    return (jsx(components.NoOptionsMessage, __assign({}, props, { className: clsx(optionFill && "fill_".concat(optionFill)), children: jsx(Group, { textAlign: "center", children: jsx(Text, { size: noOptionsTextSize, textColor: noOptionsTextColor, children: inputValue && noOptionsSearchText
+const SelectNoOptions = (props) => {
+    const { inputValue, noOptionsSearchText, noOptionsText, noOptionsTextColor, noOptionsTextSize, optionFill, } = props.selectProps;
+    return (jsx(components.NoOptionsMessage, { ...props, className: clsx(optionFill && `fill_${optionFill}`), children: jsx(Group, { textAlign: "center", children: jsx(Text, { size: noOptionsTextSize, textColor: noOptionsTextColor, children: inputValue && noOptionsSearchText
                     ? noOptionsSearchText
-                    : noOptionsText }) }) })));
+                    : noOptionsText }) }) }));
 };
 
-var SelectOption = function (props) {
-    var label = props.label, isSelected = props.isSelected;
-    var _a = props.selectProps, optionFillActiveDisabled = _a.optionFillActiveDisabled, optionFillDisabled = _a.optionFillDisabled, optionTextColorDisabled = _a.optionTextColorDisabled, dividerDirection = _a.dividerDirection, dividerFill = _a.dividerFill, dividerSize = _a.dividerSize, menuItemSize = _a.menuItemSize, optionAfter = _a.optionAfter, optionBefore = _a.optionBefore, optionBorder = _a.optionBorder, optionBorderType = _a.optionBorderType, optionFill = _a.optionFill, optionFillActive = _a.optionFillActive, optionFillActiveHover = _a.optionFillActiveHover, optionFillHover = _a.optionFillHover, optionSelectedIcon = _a.optionSelectedIcon, optionSelectedIconFillIcon = _a.optionSelectedIconFillIcon, optionSelectedIconSize = _a.optionSelectedIconSize, optionSelectedIconSrc = _a.optionSelectedIconSrc, optionShape = _a.optionShape, optionShapeStrength = _a.optionShapeStrength, optionTextColor = _a.optionTextColor, optionTextColorActive = _a.optionTextColorActive, optionTextSize = _a.optionTextSize, showDivider = _a.showDivider;
-    return (jsxs(components.Option, __assign({}, props, { className: clsx('select__menu-list-item', isSelected || props.isSelected
+const SelectOption = (props) => {
+    const { label, isSelected } = props;
+    const { optionFillActiveDisabled, optionFillDisabled, optionTextColorDisabled, dividerDirection, dividerFill, dividerSize, menuItemSize, optionAfter, optionBefore, optionBorder, optionBorderType, optionFill, optionFillActive, optionFillActiveHover, optionFillHover, optionSelectedIcon, optionSelectedIconFillIcon, optionSelectedIconSize, optionSelectedIconSrc, optionShape, optionShapeStrength, optionTextColor, optionTextColorActive, optionTextSize, showDivider, } = props.selectProps;
+    return (jsxs(components.Option, { ...props, className: clsx('select__menu-list-item', isSelected || props.isSelected
             ? !props.isDisabled
-                ? optionFillActive && "fill_active_".concat(optionFillActive)
+                ? optionFillActive && `fill_active_${optionFillActive}`
                 : optionFillActiveDisabled &&
-                    "fill_active_disabled_".concat(optionFillActiveDisabled)
+                    `fill_active_disabled_${optionFillActiveDisabled}`
             : !props.isDisabled
-                ? optionFill && "fill_".concat(optionFill)
-                : optionFillDisabled && "fill_".concat(optionFillDisabled), (isSelected || props.isSelected) &&
+                ? optionFill && `fill_${optionFill}`
+                : optionFillDisabled && `fill_${optionFillDisabled}`, (isSelected || props.isSelected) &&
             !props.isDisabled &&
             optionFillActiveHover &&
-            "fill_active_hover_".concat(optionFillActiveHover), !isSelected &&
+            `fill_active_hover_${optionFillActiveHover}`, !isSelected &&
             !props.isSelected &&
             !props.isDisabled &&
             optionFillHover &&
-            "fill_hover_".concat(optionFillHover), isSelected && 'select__menu-list-item_state_selected', menuItemSize && "select__menu-list-item_size_".concat(menuItemSize), optionBorder && "border-color_".concat(optionBorder), optionBorderType && "border_type_".concat(optionBorderType), optionShape && "shape_".concat(optionShape), optionShapeStrength && "shape-strength_".concat(optionShapeStrength)), children: [optionBefore, jsx(Text, { className: "select__menu-list-item_option", size: optionTextSize, textColor: optionTextColor, textColorActive: optionTextColorActive, textColorDisabled: optionTextColorDisabled, isDisabled: props.isDisabled, isActive: props.isSelected || isSelected, children: label }), (isSelected || props.isSelected) && (jsx("div", { className: "select__menu-list-item_selected", children: jsx(Icon, { iconFill: optionSelectedIconFillIcon, iconSize: optionSelectedIconSize, imageSrc: optionSelectedIconSrc, SvgImage: optionSelectedIcon }) })), optionAfter, showDivider && (jsx(Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill }))] })));
+            `fill_hover_${optionFillHover}`, isSelected && 'select__menu-list-item_state_selected', menuItemSize && `select__menu-list-item_size_${menuItemSize}`, optionBorder && `border-color_${optionBorder}`, optionBorderType && `border_type_${optionBorderType}`, optionShape && `shape_${optionShape}`, optionShapeStrength && `shape-strength_${optionShapeStrength}`), children: [optionBefore, jsx(Text, { className: "select__menu-list-item_option", size: optionTextSize, textColor: optionTextColor, textColorActive: optionTextColorActive, textColorDisabled: optionTextColorDisabled, isDisabled: props.isDisabled, isActive: props.isSelected || isSelected, children: label }), (isSelected || props.isSelected) && (jsx("div", { className: "select__menu-list-item_selected", children: jsx(Icon, { iconFill: optionSelectedIconFillIcon, iconSize: optionSelectedIconSize, imageSrc: optionSelectedIconSrc, SvgImage: optionSelectedIcon }) })), optionAfter, showDivider && (jsx(Divider, { width: "fill", direction: dividerDirection, size: dividerSize, fill: dividerFill }))] }));
 };
 
-var SelectPlaceholder = function (props) {
-    var _a = props.selectProps, placeholderTextColor = _a.placeholderTextColor, placeholderTextSize = _a.placeholderTextSize;
-    return (jsx(components.Placeholder, __assign({}, props, { children: jsx(Text, { size: placeholderTextSize, textColor: placeholderTextColor, children: props.children }) })));
+const SelectPlaceholder = (props) => {
+    const { placeholderTextColor, placeholderTextSize } = props.selectProps;
+    return (jsx(components.Placeholder, { ...props, children: jsx(Text, { size: placeholderTextSize, textColor: placeholderTextColor, children: props.children }) }));
 };
 
-var SelectSingleValue = function (props) {
-    var data = props.data;
-    var _a = props.selectProps, inputTextColor = _a.inputTextColor, inputTextSize = _a.inputTextSize;
-    return (jsxs(components.SingleValue, __assign({}, props, { children: [data && data.optionBefore, jsx(Text, { size: inputTextSize, textColor: inputTextColor, children: props.children }), data && data.optionAfter] })));
+const SelectSingleValue = (props) => {
+    const { data } = props;
+    const { inputTextColor, inputTextSize } = props.selectProps;
+    return (jsxs(components.SingleValue, { ...props, children: [data && data.optionBefore, jsx(Text, { size: inputTextSize, textColor: inputTextColor, children: props.children }), data && data.optionAfter] }));
 };
 
-var SelectValueContainer = function (props) {
-    var _a = props.selectProps, inputAfter = _a.inputAfter, inputBefore = _a.inputBefore;
-    return (jsxs(components.ValueContainer, __assign({}, props, { children: [inputBefore, props.children, inputAfter] })));
+const SelectValueContainer = (props) => {
+    const { inputAfter, inputBefore } = props.selectProps;
+    return (jsxs(components.ValueContainer, { ...props, children: [inputBefore, props.children, inputAfter] }));
 };
 
-var selectConfig = {
+const selectConfig = {
     appearance: selectAppearance,
-    setAppearance: function (appearanceConfig) {
+    setAppearance: (appearanceConfig) => {
         selectConfig.appearance = appearanceConfig;
     },
 };
-var SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
-    var className = props.className, _a = props.appearance, appearance = _a === void 0 ? '' : _a, width = props.width, minWidth = props.minWidth, initialValue = props.initialValue, isDisabled = props.isDisabled, badgeAppearance = props.badgeAppearance, badgeSize = props.badgeSize, defaultValue = props.defaultValue, dividerDirection = props.dividerDirection, filterOption = props.filterOption, hideSelectedOptions = props.hideSelectedOptions, hideValueContainer = props.hideValueContainer, inputAfter = props.inputAfter, inputBefore = props.inputBefore, instanceId = props.instanceId, loaderAppearance = props.loaderAppearance, loadingMessageText = props.loadingMessageText, menuAfter = props.menuAfter, menuBefore = props.menuBefore, menuIsOpen = props.menuIsOpen, menuItemSize = props.menuItemSize, noOptionsSearchText = props.noOptionsSearchText, noOptionsText = props.noOptionsText, optionAfter = props.optionAfter, optionBefore = props.optionBefore, options = props.options, placeholder = props.placeholder, set = props.set, showBadge = props.showBadge, showDivider = props.showDivider, value = props.value, before = props.before, after = props.after, openMenuOnClick = props.openMenuOnClick, closeMenuOnSelect = props.closeMenuOnSelect, isClearable = props.isClearable, isCreatable = props.isCreatable, isLoading = props.isLoading, isMulti = props.isMulti, isSearchable = props.isSearchable, onChange = props.onChange, onInputChange = props.onInputChange;
-    var defaultRef = useRef(null);
-    var selectRef = ref || defaultRef;
-    var SelectComponent = isCreatable
+const SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
+    const { appearance = '', className, width, minWidth, initialValue, badgeAppearance, badgeSize, defaultValue, dividerDirection, filterOption, hideSelectedOptions, hideValueContainer, inputAfter, inputBefore, instanceId, loaderAppearance, loadingMessageText, menuAfter, menuBefore, menuIsOpen, menuItemSize, noOptionsSearchText, noOptionsText, optionAfter, optionBefore, options, placeholder, showBadge, showDivider, value, before, after, openMenuOnClick, closeMenuOnSelect, isDisabled, isClearable, isCreatable, isLoading, isMulti, isSearchable, set, onChange, onInputChange, } = props;
+    const defaultRef = useRef(null);
+    const selectRef = ref || defaultRef;
+    const SelectComponent = isCreatable
         ? CreatableSelect
         : Select;
-    useEffect(function () {
+    useEffect(() => {
         // @ts-expect-error
-        var onClickOutside = function (event) {
-            var _a;
-            var isTargetSelectContainer = 
+        const onClickOutside = (event) => {
+            const isTargetSelectContainer = 
             // maybe here ".contains()"?
             event.target.hasClass &&
                 event.target.hasClass('select_state_hide-value-container');
             if ('current' in selectRef &&
                 selectRef.current &&
                 selectRef.current.controlRef) {
-                var isTargetInsideController = selectRef.current.controlRef.contains(event.target);
+                const isTargetInsideController = selectRef.current.controlRef.contains(event.target);
                 if (!isTargetSelectContainer && !isTargetInsideController) {
                     // @ts-expect-error
-                    (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.onInputBlur();
+                    selectRef.current?.onInputBlur();
                 }
             }
         };
         if (hideValueContainer) {
             document.addEventListener('click', onClickOutside);
         }
-        return function () {
+        return () => {
             if (hideValueContainer) {
                 document.removeEventListener('click', onClickOutside);
             }
         };
     }, [hideValueContainer, selectRef]);
-    var clearStyle = useMemo(function () {
-        return new Proxy({
-            container: {
-                width: width,
-                minWidth: minWidth,
-            },
-        }, {
-            get: function (target, prop) {
-                if (prop in target) {
-                    return function () { return target[prop]; };
-                }
-                return function () { };
-            },
-        });
-    }, [minWidth, width]);
-    var appearanceConfig = useAppearanceConfig(appearance, selectConfig, isDisabled);
-    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, optionFillActiveDisabledClass = propsGenerator.optionFillActiveDisabledClass, optionFillDisabledClass = propsGenerator.optionFillDisabledClass, optionTextColorDisabled = propsGenerator.optionTextColorDisabled, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, elevation = propsGenerator.elevation, badgeTextSize = propsGenerator.badgeTextSize, clearIcon = propsGenerator.clearIcon, clearIconFill = propsGenerator.clearIconFill, dividerFill = propsGenerator.dividerFill, dividerSize = propsGenerator.dividerSize, dropdownFillHover = propsGenerator.dropdownFillHover, dropdownIcon = propsGenerator.dropdownIcon, dropdownIconFill = propsGenerator.dropdownIconFill, dropdownIconShape = propsGenerator.dropdownIconShape, groupFillClass = propsGenerator.groupFillClass, groupTextColorClass = propsGenerator.groupTextColorClass, groupTextSizeClass = propsGenerator.groupTextSizeClass, groupTextWeightClass = propsGenerator.groupTextWeightClass, inputCaretColorClass = propsGenerator.inputCaretColorClass, inputTextColorClass = propsGenerator.inputTextColorClass, inputTextSizeClass = propsGenerator.inputTextSizeClass, loadingMessageTextColor = propsGenerator.loadingMessageTextColor, loadingMessageTextSize = propsGenerator.loadingMessageTextSize, menuFillClass = propsGenerator.menuFillClass, multipleItemFill = propsGenerator.multipleItemFill, multipleItemFillHover = propsGenerator.multipleItemFillHover, multipleItemIcon = propsGenerator.multipleItemIcon, multipleItemIconFill = propsGenerator.multipleItemIconFill, multipleItemTextColorClass = propsGenerator.multipleItemTextColorClass, multipleItemTextSizeClass = propsGenerator.multipleItemTextSizeClass, noOptionsTextColorClass = propsGenerator.noOptionsTextColorClass, noOptionsTextSizeClass = propsGenerator.noOptionsTextSizeClass, optionBorderClass = propsGenerator.optionBorderClass, optionBorderTypeClass = propsGenerator.optionBorderTypeClass, optionFillActiveClass = propsGenerator.optionFillActiveClass, optionFillActiveHoverClass = propsGenerator.optionFillActiveHoverClass, optionFillClass = propsGenerator.optionFillClass, optionFillHoverClass = propsGenerator.optionFillHoverClass, optionSelectedIcon = propsGenerator.optionSelectedIcon, optionSelectedIconFillIcon = propsGenerator.optionSelectedIconFillIcon, optionSelectedIconSize = propsGenerator.optionSelectedIconSize, optionSelectedIconSrc = propsGenerator.optionSelectedIconSrc, optionTextColorActiveClass = propsGenerator.optionTextColorActiveClass, optionTextColorClass = propsGenerator.optionTextColorClass, optionTextSizeClass = propsGenerator.optionTextSizeClass, placeholderTextColor = propsGenerator.placeholderTextColor, placeholderTextSize = propsGenerator.placeholderTextSize, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
-    return (jsx(SelectComponent, { className: clsx(className, 'select', shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), sizeClass && "select_size_".concat(sizeClass), hideValueContainer && 'select_state_hide-value-container', set && "select_set_".concat(set), widthClass && "select_width_".concat(widthClass)), ref: selectRef, isDisabled: isDisabled, optionFillActiveDisabledClass: optionFillActiveDisabledClass, optionFillDisabled: optionFillDisabledClass, optionTextColorDisabled: optionTextColorDisabled, elevation: elevation, badgeAppearance: badgeAppearance, badgeSize: badgeSize, badgeTextSize: badgeTextSize, classNamePrefix: "select", clearIcon: clearIcon, clearIconFill: clearIconFill, components: {
-            IndicatorSeparator: function () { return null; },
+    const clearStyle = useMemo(() => new Proxy({
+        container: {
+            width: width,
+            minWidth: minWidth,
+        },
+    }, {
+        get: (target, prop) => {
+            if (prop in target) {
+                return () => target[prop];
+            }
+            return () => { };
+        },
+    }), [minWidth, width]);
+    const appearanceConfig = useAppearanceConfig(appearance, selectConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, elevation, badgeTextSize, clearIcon, clearIconFill, dividerFill, dividerSize, dropdownFillHover, dropdownIcon, dropdownIconFill, dropdownIconShape, groupFillClass, groupTextColorClass, groupTextSizeClass, groupTextWeightClass, inputCaretColorClass, inputTextColorClass, inputTextSizeClass, loadingMessageTextColor, loadingMessageTextSize, menuFillClass, multipleItemFill, multipleItemFillHover, multipleItemIcon, multipleItemIconFill, multipleItemTextColorClass, multipleItemTextSizeClass, noOptionsTextColorClass, noOptionsTextSizeClass, optionBorderClass, optionBorderTypeClass, optionFillActiveClass, optionFillActiveDisabledClass, optionFillActiveHoverClass, optionFillClass, optionFillDisabledClass, optionFillHoverClass, optionSelectedIcon, optionSelectedIconFillIcon, optionSelectedIconSize, optionSelectedIconSrc, optionTextColorActiveClass, optionTextColorClass, optionTextColorDisabled, optionTextSizeClass, placeholderTextColor, placeholderTextSize, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
+    return (jsx(SelectComponent, { className: clsx(className, 'select', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, sizeClass && `select_size_${sizeClass}`, hideValueContainer && 'select_state_hide-value-container', set && `select_set_${set}`, widthClass && `select_width_${widthClass}`), ref: selectRef, elevation: elevation, badgeAppearance: badgeAppearance, badgeSize: badgeSize, badgeTextSize: badgeTextSize, classNamePrefix: "select", clearIcon: clearIcon, clearIconFill: clearIconFill, components: {
+            IndicatorSeparator: () => null,
             ClearIndicator: SelectClearIndicator,
             Control: SelectControl,
             DropdownIndicator: SelectDropdownIndicator,
@@ -568,7 +573,7 @@ var SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
             Placeholder: SelectPlaceholder,
             SingleValue: SelectSingleValue,
             ValueContainer: SelectValueContainer,
-        }, defaultValue: defaultValue || initialValue, dividerDirection: dividerDirection, dividerFill: dividerFill, dividerSize: dividerSize, dropdownFillHover: dropdownFillHover, dropdownIcon: dropdownIcon, dropdownIconFill: dropdownIconFill, dropdownIconShape: dropdownIconShape, filterOption: filterOption, groupFill: groupFillClass, groupTextColor: groupTextColorClass, groupTextSize: groupTextSizeClass, groupTextWeight: groupTextWeightClass, hideSelectedOptions: hideSelectedOptions, inputAfter: inputAfter, inputBefore: inputBefore, inputCaretColor: inputCaretColorClass, inputShape: shapeClass, inputShapeStrength: shapeStrengthClass, inputTextColor: inputTextColorClass, inputTextSize: inputTextSizeClass, instanceId: instanceId, loaderAppearance: loaderAppearance, loadingMessageText: loadingMessageText, loadingMessageTextColor: loadingMessageTextColor, loadingMessageTextSize: loadingMessageTextSize, menuAfter: menuAfter, menuBefore: menuBefore, menuFill: menuFillClass, menuIsOpen: menuIsOpen, menuItemSize: menuItemSize, menuShape: shapeClass, menuShapeStrength: shapeStrengthClass, multipleItemFill: multipleItemFill, multipleItemFillHover: multipleItemFillHover, multipleItemIcon: multipleItemIcon, multipleItemIconFill: multipleItemIconFill, multipleItemSize: sizeClass, multipleItemTextColor: multipleItemTextColorClass, multipleItemTextSize: multipleItemTextSizeClass, noOptionBorder: optionBorderClass && "border-color_".concat(optionBorderClass), noOptionBorderType: optionBorderTypeClass && "border_type_".concat(optionBorderTypeClass), noOptionsFill: optionFillClass && "fill_".concat(optionFillClass), noOptionsSearchText: noOptionsSearchText, noOptionsText: noOptionsText, noOptionsTextColor: noOptionsTextColorClass, noOptionsTextSize: noOptionsTextSizeClass, optionAfter: optionAfter, optionBefore: optionBefore, optionBorder: optionBorderClass, optionBorderType: optionBorderTypeClass, optionFill: optionFillClass, optionFillActive: optionFillActiveClass, optionFillActiveHover: optionFillActiveHoverClass, optionFillHover: optionFillHoverClass, options: options, optionSelectedIcon: optionSelectedIcon, optionSelectedIconFillIcon: optionSelectedIconFillIcon, optionSelectedIconSize: optionSelectedIconSize, optionSelectedIconSrc: optionSelectedIconSrc, optionShape: shapeClass, optionShapeStrength: shapeStrengthClass, optionTextColor: optionTextColorClass, optionTextColorActive: optionTextColorActiveClass, optionTextSize: optionTextSizeClass, placeholder: placeholder, placeholderTextColor: placeholderTextColor, placeholderTextSize: placeholderTextSize, set: set, showBadge: showBadge, showDivider: showDivider, styles: clearStyle, value: value, before: before, after: after, openMenuOnClick: openMenuOnClick, closeMenuOnSelect: closeMenuOnSelect !== null && closeMenuOnSelect !== void 0 ? closeMenuOnSelect : false, isClearable: isClearable, isLoading: isLoading, isMulti: isMulti, isSearchable: isSearchable, onChange: onChange, onInputChange: onInputChange }));
+        }, defaultValue: defaultValue || initialValue, dividerDirection: dividerDirection, dividerFill: dividerFill, dividerSize: dividerSize, dropdownFillHover: dropdownFillHover, dropdownIcon: dropdownIcon, dropdownIconFill: dropdownIconFill, dropdownIconShape: dropdownIconShape, filterOption: filterOption, groupFill: groupFillClass, groupTextColor: groupTextColorClass, groupTextSize: groupTextSizeClass, groupTextWeight: groupTextWeightClass, hideSelectedOptions: hideSelectedOptions ?? false, inputAfter: inputAfter, inputBefore: inputBefore, inputCaretColor: inputCaretColorClass, inputShape: shapeClass, inputShapeStrength: shapeStrengthClass, inputTextColor: inputTextColorClass, inputTextSize: inputTextSizeClass, instanceId: instanceId, loaderAppearance: loaderAppearance, loadingMessageText: loadingMessageText, loadingMessageTextColor: loadingMessageTextColor, loadingMessageTextSize: loadingMessageTextSize, menuAfter: menuAfter, menuBefore: menuBefore, menuFill: menuFillClass, menuIsOpen: menuIsOpen, menuItemSize: menuItemSize, menuShape: shapeClass, menuShapeStrength: shapeStrengthClass, multipleItemFill: multipleItemFill, multipleItemFillHover: multipleItemFillHover, multipleItemIcon: multipleItemIcon, multipleItemIconFill: multipleItemIconFill, multipleItemSize: sizeClass, multipleItemTextColor: multipleItemTextColorClass, multipleItemTextSize: multipleItemTextSizeClass, noOptionBorder: optionBorderClass && `border-color_${optionBorderClass}`, noOptionBorderType: optionBorderTypeClass && `border_type_${optionBorderTypeClass}`, noOptionsFill: optionFillClass && `fill_${optionFillClass}`, noOptionsSearchText: noOptionsSearchText, noOptionsText: noOptionsText, noOptionsTextColor: noOptionsTextColorClass, noOptionsTextSize: noOptionsTextSizeClass, optionAfter: optionAfter, optionBefore: optionBefore, optionBorder: optionBorderClass, optionBorderType: optionBorderTypeClass, optionFill: optionFillClass, optionFillActive: optionFillActiveClass, optionFillActiveDisabledClass: optionFillActiveDisabledClass, optionFillActiveHover: optionFillActiveHoverClass, optionFillDisabled: optionFillDisabledClass, optionFillHover: optionFillHoverClass, options: options, optionSelectedIcon: optionSelectedIcon, optionSelectedIconFillIcon: optionSelectedIconFillIcon, optionSelectedIconSize: optionSelectedIconSize, optionSelectedIconSrc: optionSelectedIconSrc, optionShape: shapeClass, optionShapeStrength: shapeStrengthClass, optionTextColor: optionTextColorClass, optionTextColorActive: optionTextColorActiveClass, optionTextColorDisabled: optionTextColorDisabled, optionTextSize: optionTextSizeClass, placeholder: placeholder, placeholderTextColor: placeholderTextColor, placeholderTextSize: placeholderTextSize, showBadge: showBadge, showDivider: showDivider, styles: clearStyle, value: value, before: before, after: after, openMenuOnClick: openMenuOnClick, closeMenuOnSelect: closeMenuOnSelect ?? true, isDisabled: isDisabled, isClearable: isClearable ?? false, isLoading: isLoading, isMulti: isMulti, isSearchable: isSearchable ?? false, set: set, onChange: onChange, onInputChange: onInputChange }));
 });
 
 export { SelectContainer as Select, SelectClearIndicator, SelectControl, SelectDropdownIndicator, SelectGroupHeading, SelectIndicatorsContainer, SelectInput, SelectMenu, SelectMultiValueContainer, SelectMultiValueLabel, SelectMultiValueRemove, SelectOption, SelectPlaceholder, SelectSingleValue, SelectValueContainer, selectConfig };

package/dist/components/Swiper/stories/__mock__.js

@@ -1,6 +1,6 @@
 import { jsxs } from 'react/jsx-runtime';
 
-var slidesMock = Array.from({ length: 10 }, function (_, index) { return (jsxs("div", { style: {
+const slidesMock = Array.from({ length: 10 }, (_, index) => (jsxs("div", { style: {
         width: '100%',
         height: 'auto',
         justifyContent: 'center',
@@ -8,7 +8,7 @@ var slidesMock = Array.from({ length: 10 }, function (_, index) { return (jsxs("
         fontSize: 24,
         fontWeight: 'bold',
         display: 'flex',
-        background: "hsl(".concat(index * 60, ", 70%, 80%)"),
-    }, children: ["Slide ", index + 1] }, index)); });
+        background: `hsl(${index * 60}, 70%, 80%)`,
+    }, children: ["Slide ", index + 1] }, index)));
 
 export { slidesMock };

package/dist/components/Swiper.js

@@ -4,8 +4,7 @@ import clsx from 'clsx';
 import { Swiper as Swiper$1, SwiperSlide } from 'swiper/react';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { b as Title } from '../Icon_es_BrwLifge.js';
-import '../tslib.es6_es_Bwu1Cn-t.js';
+import { b as Title } from '../Icon_es_DkVkzTha.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
@@ -23,18 +22,18 @@ import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
 import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
-import '../Link_es_XiqbdwLp.js';
-import '../Text_es_CwV9rjFD.js';
+import '../Link_es_P2b6ya7P.js';
+import '../Text_es_CnymlElo.js';
 
 function Swiper(props) {
-    var id = props.id, className = props.className, direction = props.direction, title = props.title, titleAfter = props.titleAfter, titleSize = props.titleSize, titleTextColor = props.titleTextColor, titleWeight = props.titleWeight, setNextBtnDisabled = props.setNextBtnDisabled, setPrevBtnDisabled = props.setPrevBtnDisabled, _a = props.activeSlideIndex, activeSlideIndex = _a === void 0 ? 0 : _a, allowTouchMove = props.allowTouchMove, autoHeight = props.autoHeight, breakpoints = props.breakpoints, forwardedRef = props.forwardedRef, // https://github.com/vercel/next.js/issues/4957
-    freeMode = props.freeMode, items = props.items, keyboard = props.keyboard, loop = props.loop, modules = props.modules, mousewheel = props.mousewheel, nextButton = props.nextButton, normalizeSlideIndex = props.normalizeSlideIndex, pagination = props.pagination, prevButton = props.prevButton, preventClicks = props.preventClicks, preventClicksPropagation = props.preventClicksPropagation, set = props.set, simulateTouch = props.simulateTouch, slidesPerView = props.slidesPerView, spaceBetween = props.spaceBetween, speed = props.speed, swiperClass = props.swiperClass, swiperSlideClass = props.swiperSlideClass, isChangeOnClickSlide = props.isChangeOnClickSlide, isInit = props.isInit, _b = props.isNavigation, isNavigation = _b === void 0 ? false : _b, isScrollbar = props.isScrollbar, onSlideNextTransitionEnd = props.onSlideNextTransitionEnd, onSlidePrevTransitionEnd = props.onSlidePrevTransitionEnd, onSwiper = props.onSwiper, onUpdate = props.onUpdate, children = props.children;
-    var swiperRef = useRef(null);
-    var isMountedRef = useRef(false);
-    var _c = useSwiperRef(), nextEl = _c[0], nextRef = _c[1];
-    var _d = useSwiperRef(), prevEl = _d[0], prevRef = _d[1];
-    var isLoop = loop !== null && loop !== void 0 ? loop : true;
-    var onInitSwiper = useCallback(function (swiper) {
+    const { id, className, direction, title, titleAfter, titleSize, titleTextColor, titleWeight, setNextBtnDisabled, setPrevBtnDisabled, activeSlideIndex = 0, allowTouchMove, autoHeight, breakpoints, forwardedRef, // https://github.com/vercel/next.js/issues/4957
+    freeMode, items, keyboard, loop, modules, mousewheel, nextButton, normalizeSlideIndex, pagination, prevButton, preventClicks, preventClicksPropagation, set, simulateTouch, slidesPerView, spaceBetween, speed, swiperClass, swiperSlideClass, isChangeOnClickSlide, isInit, isNavigation = false, isScrollbar, onSlideNextTransitionEnd, onSlidePrevTransitionEnd, onSwiper, onUpdate, children, } = props;
+    const swiperRef = useRef(null);
+    const isMountedRef = useRef(false);
+    const [nextEl, nextRef] = useSwiperRef();
+    const [prevEl, prevRef] = useSwiperRef();
+    const isLoop = loop ?? true;
+    const onInitSwiper = useCallback((swiper) => {
         // swiper.touchEventsData.formElements = 'undefined'
         // Set "disabled" state to navigation buttons on init
         if (!isLoop && setPrevBtnDisabled && setNextBtnDisabled) {
@@ -42,13 +41,13 @@ function Swiper(props) {
             setNextBtnDisabled(swiper.isEnd);
         }
     }, [isLoop, setPrevBtnDisabled, setNextBtnDisabled]);
-    var onSlideChange = useCallback(function (swiper) {
+    const onSlideChange = useCallback((swiper) => {
         // Some things with clickedIndex
         if (isChangeOnClickSlide) {
             swiper.activeIndex = activeSlideIndex || swiper.clickedIndex;
         }
     }, [isChangeOnClickSlide, activeSlideIndex]);
-    var onTransitionStart = useCallback(function (swiper) {
+    const onTransitionStart = useCallback((swiper) => {
         // Set "disabled" state to navigation buttons, when slider move
         if (!isLoop && setPrevBtnDisabled && setNextBtnDisabled) {
             setPrevBtnDisabled(swiper.isBeginning);
@@ -56,31 +55,30 @@ function Swiper(props) {
         }
     }, [isLoop, setPrevBtnDisabled, setNextBtnDisabled]);
     // @ts-expect-error
-    useImperativeHandle(forwardedRef, function () { return swiperRef.current; }, []);
-    useEffect(function () {
-        var _a;
+    useImperativeHandle(forwardedRef, () => swiperRef.current, []);
+    useEffect(() => {
         if (isMountedRef.current) {
-            var swiperInstance = (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper;
+            const swiperInstance = swiperRef.current?.swiper;
             // @ts-expect-error
-            swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.updateActiveIndex(activeSlideIndex);
-            swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.updateSlidesClasses();
+            swiperInstance?.updateActiveIndex(activeSlideIndex);
+            swiperInstance?.updateSlidesClasses();
         }
         else {
             isMountedRef.current = true;
         }
     }, [activeSlideIndex]);
-    var propsGenerator = useDevicePropsGenerator(props);
-    var alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillClass = propsGenerator.fillClass, shapeClass = propsGenerator.shapeClass;
+    const propsGenerator = useDevicePropsGenerator(props);
+    const { alignClass, alignDirectionClass, fillClass, shapeClass } = propsGenerator;
     // @ts-expect-error
-    var style = useStyles(props).styles;
-    return (jsxs("div", { id: id, className: clsx('swiper-block', slidesPerView === 'auto' && 'swiper-block_type_auto', fillClass && "fill_".concat(fillClass), shapeClass && "swiper_shape_".concat(shapeClass), className, set && "swiper-block_set_".concat(set)), style: style, children: [(title || (prevButton && nextButton)) && (jsxs("div", { className: "swiper-block__wrapper", children: [title && (jsx(Title, { className: "swiper-block__title", size: titleSize, textColor: titleTextColor, textWeight: titleWeight, children: title })), titleAfter, prevButton && nextButton && (jsxs("div", { className: "swiper-block__navigation", children: [jsx("div", { className: "swiper-block__prev swiper-button", ref: prevRef, children: prevButton }), jsx("div", { className: "swiper-block__next swiper-button", ref: nextRef, children: nextButton })] }))] })), jsx(Swiper$1, { className: clsx('swiper-block__swiper', swiperClass), ref: swiperRef, direction: direction, allowTouchMove: allowTouchMove, autoHeight: autoHeight !== null && autoHeight !== void 0 ? autoHeight : false, breakpoints: breakpoints, centeredSlides: true, freeMode: freeMode, init: isInit !== null && isInit !== void 0 ? isInit : true, keyboard: keyboard, loop: isLoop, modules: modules, mousewheel: mousewheel, navigation: isNavigation ? { nextEl: nextEl, prevEl: prevEl } : false, normalizeSlideIndex: normalizeSlideIndex, pagination: pagination, preventClicks: preventClicks, preventClicksPropagation: preventClicksPropagation, scrollbar: isScrollbar, simulateTouch: simulateTouch, slidesPerView: slidesPerView, spaceBetween: spaceBetween, speed: speed !== null && speed !== void 0 ? speed : 500, onInit: onInitSwiper, onSlideChange: onSlideChange, onSlideNextTransitionEnd: onSlideNextTransitionEnd, onSlidePrevTransitionEnd: onSlidePrevTransitionEnd, onSwiper: onSwiper, onTransitionStart: onTransitionStart, onUpdate: onUpdate, children: children ||
-                    (items === null || items === void 0 ? void 0 : items.map(function (item, i) { return (jsx(SwiperSlide, { className: clsx('swiper-block__item', swiperSlideClass, alignDirectionClass && "align_".concat(alignDirectionClass), alignClass && "align_".concat(alignClass)), children: item }, "swiper-slide_".concat(i))); })) })] }));
+    const { styles: style } = useStyles(props);
+    return (jsxs("div", { id: id, className: clsx('swiper-block', slidesPerView === 'auto' && 'swiper-block_type_auto', fillClass && `fill_${fillClass}`, shapeClass && `swiper_shape_${shapeClass}`, className, set && `swiper-block_set_${set}`), style: style, children: [(title || (prevButton && nextButton)) && (jsxs("div", { className: "swiper-block__wrapper", children: [title && (jsx(Title, { className: "swiper-block__title", size: titleSize, textColor: titleTextColor, textWeight: titleWeight, children: title })), titleAfter, prevButton && nextButton && (jsxs("div", { className: "swiper-block__navigation", children: [jsx("div", { className: "swiper-block__prev swiper-button", ref: prevRef, children: prevButton }), jsx("div", { className: "swiper-block__next swiper-button", ref: nextRef, children: nextButton })] }))] })), jsx(Swiper$1, { className: clsx('swiper-block__swiper', swiperClass), ref: swiperRef, direction: direction, allowTouchMove: allowTouchMove, autoHeight: autoHeight ?? false, breakpoints: breakpoints, centeredSlides: true, freeMode: freeMode, init: isInit ?? true, keyboard: keyboard, loop: isLoop, modules: modules, mousewheel: mousewheel, navigation: isNavigation ? { nextEl, prevEl } : false, normalizeSlideIndex: normalizeSlideIndex, pagination: pagination, preventClicks: preventClicks, preventClicksPropagation: preventClicksPropagation, scrollbar: isScrollbar, simulateTouch: simulateTouch, slidesPerView: slidesPerView, spaceBetween: spaceBetween, speed: speed ?? 500, onInit: onInitSwiper, onSlideChange: onSlideChange, onSlideNextTransitionEnd: onSlideNextTransitionEnd, onSlidePrevTransitionEnd: onSlidePrevTransitionEnd, onSwiper: onSwiper, onTransitionStart: onTransitionStart, onUpdate: onUpdate, children: children ||
+                    items?.map((item, i) => (jsx(SwiperSlide, { className: clsx('swiper-block__item', swiperSlideClass, alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`), children: item }, `swiper-slide_${i}`))) })] }));
 }
 // https://github.com/nolimits4web/swiper/issues/3855#issuecomment-1050694342
-var useSwiperRef = function () {
-    var _a = useState(null), wrapper = _a[0], setWrapper = _a[1];
-    var ref = useRef(null);
-    useEffect(function () {
+const useSwiperRef = () => {
+    const [wrapper, setWrapper] = useState(null);
+    const ref = useRef(null);
+    useEffect(() => {
         if (ref.current) {
             setWrapper(ref.current);
         }