react-better-html 1.1.225 → 1.1.226

package/dist/index.mjs

@@ -1939,16 +1939,16 @@ var ButtonElement = styled6.button.withConfig({
               opacity: 0.6;
               cursor: not-allowed;
            ` : !props.isLoading ? css`
-              cursor: pointer;
+                cursor: pointer;
 
-              &:not(.secondary):hover {
-                 filter: ${props.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.9)"};
-              }
+                &:not(.secondary):hover {
+                   filter: ${props.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.9)"};
+                }
 
-              &.secondary:hover {
-                 border-color: ${props.theme.colors.primary};
-              }
-           ` : ""}
+                &.secondary:hover {
+                   border-color: ${props.theme.colors.primary};
+                }
+             ` : ""}
 
    &.secondary {
       padding-block: ${(props) => props.isSmall ? props.theme.styles.gap : (props.theme.styles.space + props.theme.styles.gap) / 2}px;
@@ -2007,14 +2007,22 @@ var ButtonComponent = function Button({
     },
     [onClick, onClickWithValue, value]
   );
-  const iconComponent = icon ? /* @__PURE__ */ jsx8(Div_default.row, { height: 20, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx8(
-    Icon_default,
+  const iconComponent = icon ? /* @__PURE__ */ jsx8(
+    Div_default.row,
     {
-      name: icon,
-      color: iconColor ?? props.color ?? theme2.colors.base,
-      size: iconSize ?? parseInt(style.fontSize?.toString() ?? "16")
+      height: iconSize ?? parseInt(style.fontSize?.toString() ?? "16"),
+      alignItems: "center",
+      justifyContent: "center",
+      children: /* @__PURE__ */ jsx8(
+        Icon_default,
+        {
+          name: icon,
+          color: iconColor ?? props.color ?? theme2.colors.base,
+          size: iconSize ?? parseInt(style.fontSize?.toString() ?? "16")
+        }
+      )
     }
-  ) }) : void 0;
+  ) : void 0;
   const imageComponent = image ? /* @__PURE__ */ jsx8(
     Image_default,
     {
@@ -2119,17 +2127,17 @@ ButtonComponent.destructive = function Destructive(props) {
     }
   );
 };
-ButtonComponent.icon = function Icon3({ size = 16, backgroundButtonColor, ...props }) {
+ButtonComponent.icon = function Icon3({ size = 16, buttonSize, backgroundButtonColor, ...props }) {
   const theme2 = useTheme9();
   const betterHtmlContext2 = useBetterHtmlContextInternal();
-  const buttonSize = size + theme2.styles.space;
+  const readyButtonSize = buttonSize ?? size + theme2.styles.space;
   const backgroundButtonColorReady = backgroundButtonColor ?? theme2.colors.textPrimary;
   return /* @__PURE__ */ jsx8(
     ButtonComponent,
     {
       ...betterHtmlContext2.components.button?.style?.icon,
-      width: buttonSize,
-      height: buttonSize,
+      width: readyButtonSize,
+      height: readyButtonSize,
       color: theme2.colors.textPrimary,
       backgroundColor: backgroundButtonColorReady + "00",
       backgroundImage: "none",
@@ -3337,10 +3345,12 @@ var PageHolder_default = PageHolder2;
 // src/components/Chip.tsx
 import { forwardRef as forwardRef9, memo as memo14, useCallback as useCallback7 } from "react";
 import { darkenColor, lightenColor, useBetterCoreContext as useBetterCoreContext6, useTheme as useTheme15 } from "react-better-core";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 var borderRadiusOffset = 1.3;
 var ChipComponent = forwardRef9(function Chip({
   text,
+  beforeText,
+  afterText,
   color,
   backgroundColor,
   borderRadius,
@@ -3371,7 +3381,11 @@ var ChipComponent = forwardRef9(function Chip({
       cursor: onClick || onClickWithValue ? "pointer" : void 0,
       ...props,
       ref,
-      children: /* @__PURE__ */ jsx14(Text_default, { color: color ?? theme2.colors.textPrimary, children: text })
+      children: /* @__PURE__ */ jsxs10(Div_default.row, { height: "100%", alignItems: "center", gap: theme2.styles.gap, children: [
+        beforeText,
+        typeof text === "string" ? /* @__PURE__ */ jsx14(Text_default, { color: color ?? theme2.colors.textPrimary, children: text }) : text,
+        afterText
+      ] })
     }
   );
 });
@@ -3419,10 +3433,10 @@ import styled10 from "styled-components";
 // src/components/Label.tsx
 import { memo as memo15 } from "react";
 import { useTheme as useTheme16 } from "react-better-core";
-import { jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsxs as jsxs11 } from "react/jsx-runtime";
 function Label({ text, required, isError, color, htmlFor }) {
   const theme2 = useTheme16();
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     Text_default,
     {
       as: "label",
@@ -3434,7 +3448,7 @@ function Label({ text, required, isError, color, htmlFor }) {
       "aria-required": required,
       children: [
         text,
-        required && /* @__PURE__ */ jsxs10(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
+        required && /* @__PURE__ */ jsxs11(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
           " ",
           "*"
         ] })
@@ -3453,7 +3467,7 @@ import {
   countries,
   useTheme as useTheme17
 } from "react-better-core";
-import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 import { createElement as createElement2 } from "react";
 var DropdownComponent = forwardRef10(function Dropdown({
   label,
@@ -3604,13 +3618,13 @@ var DropdownComponent = forwardRef10(function Dropdown({
     [options, value]
   );
   const renderedOptions = useMemo4(
-    () => /* @__PURE__ */ jsxs11(Fragment4, { children: [
+    () => /* @__PURE__ */ jsxs12(Fragment4, { children: [
       renderOptionDivider ? renderOptionDivider(void 0, filteredOptions[0], -1, 0) : void 0,
       filteredOptions.map((option, index) => {
         const isSelected = withMultiselect ? Array.isArray(value) ? value.includes(option.value) : false : option.value === value;
         const isDisabled = option.disabled;
         const isFocused2 = index === focusedOptionIndex;
-        return /* @__PURE__ */ jsxs11(Fragment3, { children: [
+        return /* @__PURE__ */ jsxs12(Fragment3, { children: [
           /* @__PURE__ */ jsx15(
             Div_default,
             {
@@ -3726,10 +3740,25 @@ var DropdownComponent = forwardRef10(function Dropdown({
           transition: theme2.styles.transition,
           children: /* @__PURE__ */ jsx15(Div_default.row, { width: "100%", flexWrap: "wrap", gap: theme2.styles.gap, children: selectedOption.map((option) => {
             const ChipComponentTag = !option.renderType || option.renderType === "default" || option.renderType === "chip" ? Chip_default : option.renderType === "chip.colored" ? Chip_default.colored : Chip_default;
+            const withXButton = isFocused || isOpen;
             return /* @__PURE__ */ createElement2(
               ChipComponentTag,
               {
                 text: option.label,
+                afterText: withXButton && /* @__PURE__ */ jsx15(
+                  Button_default.icon,
+                  {
+                    icon: "XMark",
+                    color: theme2.colors.textSecondary,
+                    size: 14,
+                    buttonSize: 20,
+                    value: option,
+                    onClickWithValue: onClickOption
+                  }
+                ),
+                height: 20 + theme2.styles.gap,
+                paddingRight: withXButton ? theme2.styles.gap / 2 : void 0,
+                transition: "none",
                 ...option.renderType === "chip" || option.renderType === "chip.colored" ? option.chipProps : [],
                 withWhiteBackground: option.renderType === "chip.colored",
                 key: JSON.stringify(option)
@@ -3738,7 +3767,7 @@ var DropdownComponent = forwardRef10(function Dropdown({
           }) })
         }
       ) : void 0,
-      insideInputFieldAfterComponent: /* @__PURE__ */ jsxs11(Fragment4, { children: [
+      insideInputFieldAfterComponent: /* @__PURE__ */ jsxs12(Fragment4, { children: [
         /* @__PURE__ */ jsx15(
           Div_default,
           {
@@ -3764,7 +3793,7 @@ var DropdownComponent = forwardRef10(function Dropdown({
             children: isLoadingDebouncedSearchQuery || debounceIsLoading ? /* @__PURE__ */ jsx15(Div_default, { padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`, children: /* @__PURE__ */ jsx15(Loader_default.text, {}) }) : filteredOptions.length ? /* @__PURE__ */ jsx15(Fragment4, { children: (withoutRenderingOptionsWhenClosed ? isOpen || isOpenLate : true) ? renderedOptions : void 0 }) : /* @__PURE__ */ jsx15(Div_default, { padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`, children: /* @__PURE__ */ jsx15(Text_default.unknown, { textAlign: "left", children: debounceMinimumSymbolsRequired !== void 0 && searchQuery.length < debounceMinimumSymbolsRequired ? `Enter at least ${debounceMinimumSymbolsRequired} characters` : "No options" }) })
           }
         ),
-        /* @__PURE__ */ jsxs11(
+        /* @__PURE__ */ jsxs12(
           Div_default.row,
           {
             position: "absolute",
@@ -3823,7 +3852,7 @@ var DropdownComponent = forwardRef10(function Dropdown({
 DropdownComponent.countries = forwardRef10(function Countries({ ...props }, ref) {
   const theme2 = useTheme17();
   const renderOption = useCallback8(
-    (option, index, isSelected) => /* @__PURE__ */ jsxs11(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
+    (option, index, isSelected) => /* @__PURE__ */ jsxs12(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
       /* @__PURE__ */ jsx15(Image_default, { src: `https://flagcdn.com/w80/${option.data?.code.toString().toLowerCase()}.webp`, width: 20 }),
       /* @__PURE__ */ jsx15(Text_default, { children: option.label })
     ] }),
@@ -3860,7 +3889,7 @@ var Dropdown_default = Dropdown2;
 import { useCallback as useCallback9, useMemo as useMemo5, useState as useState6, memo as memo17, useEffect as useEffect8, useId } from "react";
 import { useTheme as useTheme18 } from "react-better-core";
 import styled9 from "styled-components";
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 var getMonthName = (month, short = false) => {
   return [
     short ? "Jan" : "January",
@@ -3974,12 +4003,12 @@ function Calendar({ value, minDate, maxDate, onChange }) {
     setCurrentMonth(date.getMonth());
     setCurrentYear(date.getFullYear());
   }, [value]);
-  return /* @__PURE__ */ jsxs12(Div_default.column, { width: "100%", maxWidth: 320, gap: theme2.styles.gap, padding: theme2.styles.space / 2, userSelect: "none", children: [
-    /* @__PURE__ */ jsxs12(Div_default.row, { width: "100%", justifyContent: "space-between", alignItems: "center", children: [
+  return /* @__PURE__ */ jsxs13(Div_default.column, { width: "100%", maxWidth: 320, gap: theme2.styles.gap, padding: theme2.styles.space / 2, userSelect: "none", children: [
+    /* @__PURE__ */ jsxs13(Div_default.row, { width: "100%", justifyContent: "space-between", alignItems: "center", children: [
       /* @__PURE__ */ jsx16(Button_default.icon, { icon: "chevronLeft", onClick: onClickPreviousMonthButton }),
-      /* @__PURE__ */ jsxs12(Div_default.row, { alignItems: "center", gap: 4, children: [
+      /* @__PURE__ */ jsxs13(Div_default.row, { alignItems: "center", gap: 4, children: [
         /* @__PURE__ */ jsx16(Text_default, { fontWeight: 700, children: getMonthName(currentMonth) }),
-        /* @__PURE__ */ jsx16(SelectWrapperComponent, { children: /* @__PURE__ */ jsxs12(Div_default.row, { position: "relative", alignItems: "center", gap: 2, children: [
+        /* @__PURE__ */ jsx16(SelectWrapperComponent, { children: /* @__PURE__ */ jsxs13(Div_default.row, { position: "relative", alignItems: "center", gap: 2, children: [
           /* @__PURE__ */ jsx16(Text_default, { fontWeight: 700, children: currentYear }),
           /* @__PURE__ */ jsx16(Icon_default, { name: "chevronDown", size: 12 }),
           /* @__PURE__ */ jsx16(
@@ -3996,7 +4025,7 @@ function Calendar({ value, minDate, maxDate, onChange }) {
       ] }),
       /* @__PURE__ */ jsx16(Button_default.icon, { icon: "chevronRight", onClick: onClickNextMonthButton })
     ] }),
-    /* @__PURE__ */ jsxs12(Div_default.grid, { width: "100%", gridTemplateColumns: "repeat(7, 1fr)", gap: theme2.styles.gap / 2, children: [
+    /* @__PURE__ */ jsxs13(Div_default.grid, { width: "100%", gridTemplateColumns: "repeat(7, 1fr)", gap: theme2.styles.gap / 2, children: [
       weekDaysIndex.map((day) => /* @__PURE__ */ jsx16(Div_default.row, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx16(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", children: getWeekDayName(day, true) }) }, day)),
       days.map((day, index) => {
         const thisDayDate = new Date(currentYear, currentMonth, day);
@@ -4004,7 +4033,7 @@ function Calendar({ value, minDate, maxDate, onChange }) {
         const isToday = thisDayDate.getDate() === (/* @__PURE__ */ new Date()).getDate() && thisDayDate.getMonth() === (/* @__PURE__ */ new Date()).getMonth() && thisDayDate.getFullYear() === (/* @__PURE__ */ new Date()).getFullYear();
         const isWeekend = thisDayDate.getDay() === 6 || thisDayDate.getDay() === 0;
         const isDisabled = minDate && thisDayDate.getTime() < minDate.getTime() || maxDate && thisDayDate.getTime() > maxDate.getTime();
-        return /* @__PURE__ */ jsxs12(
+        return /* @__PURE__ */ jsxs13(
           Div_default.row,
           {
             position: "relative",
@@ -4049,7 +4078,7 @@ function Calendar({ value, minDate, maxDate, onChange }) {
         );
       })
     ] }),
-    /* @__PURE__ */ jsxs12(Div_default.row, { width: "100%", justifyContent: "space-between", alignItems: "center", children: [
+    /* @__PURE__ */ jsxs13(Div_default.row, { width: "100%", justifyContent: "space-between", alignItems: "center", children: [
       /* @__PURE__ */ jsx16(Div_default, { isTabAccessed: true, cursor: "pointer", onClick: onClickClear, children: /* @__PURE__ */ jsx16(
         Text_default,
         {
@@ -4076,7 +4105,7 @@ function Calendar({ value, minDate, maxDate, onChange }) {
 var Calendar_default = memo17(Calendar);
 
 // src/components/InputField.tsx
-import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 var buttonWidth = 50;
 var colorPickerSpacing = 4;
 var colorPickerColorWidth = 12 + 27 + colorPickerSpacing;
@@ -4297,9 +4326,9 @@ var InputFieldComponent = forwardRef11(function InputField({
     onChangeValue?.(debouncedValue);
   }, [withDebounce, onChangeValue, debouncedValue]);
   const readyId = id ?? internalId;
-  return /* @__PURE__ */ jsxs13(Div_default.column, { width: "100%", gap: theme2.styles.gap / 2, ...excludeStyle, children: [
+  return /* @__PURE__ */ jsxs14(Div_default.column, { width: "100%", gap: theme2.styles.gap / 2, ...excludeStyle, children: [
     label && /* @__PURE__ */ jsx17(Label_default, { text: label, color: labelColor, required, isError: !!errorText, htmlFor: readyId }),
-    /* @__PURE__ */ jsxs13(Div_default.row, { alignItems: "stretch", width: "100%", children: [
+    /* @__PURE__ */ jsxs14(Div_default.row, { alignItems: "stretch", width: "100%", children: [
       prefix && /* @__PURE__ */ jsx17(
         Div_default.row,
         {
@@ -4314,9 +4343,9 @@ var InputFieldComponent = forwardRef11(function InputField({
           children: prefix
         }
       ),
-      /* @__PURE__ */ jsxs13(Div_default, { position: "relative", width: "100%", height: "fit-content", ref: holderRef, children: [
+      /* @__PURE__ */ jsxs14(Div_default, { position: "relative", width: "100%", height: "fit-content", ref: holderRef, children: [
         insideInputFieldBeforeComponent,
-        /* @__PURE__ */ jsxs13(Div_default, { position: "relative", width: "100%", height: "fit-content", children: [
+        /* @__PURE__ */ jsxs14(Div_default, { position: "relative", width: "100%", height: "fit-content", children: [
           leftIcon && /* @__PURE__ */ jsx17(
             Icon_default,
             {
@@ -4427,9 +4456,9 @@ InputFieldComponent.multiline = forwardRef11(function Multiline({
     [onChange, onChangeValue]
   );
   const readyId = id ?? internalId;
-  return /* @__PURE__ */ jsxs13(Div_default.column, { gap: theme2.styles.gap / 2, children: [
+  return /* @__PURE__ */ jsxs14(Div_default.column, { gap: theme2.styles.gap / 2, children: [
     label && /* @__PURE__ */ jsx17(Label_default, { text: label, required, isError: !!errorText, htmlFor: readyId }),
-    /* @__PURE__ */ jsxs13(Div_default, { position: "relative", width: "100%", children: [
+    /* @__PURE__ */ jsxs14(Div_default, { position: "relative", width: "100%", children: [
       leftIcon && /* @__PURE__ */ jsx17(
         Icon_default,
         {
@@ -4574,7 +4603,7 @@ InputFieldComponent.phoneNumber = forwardRef11(function PhoneNumber({ label, val
   const [dropdownValue, setDropdownValue] = useState7();
   const [inputFieldValue, setInputFieldValue] = useState7(value?.toString() ?? "");
   const renderOption = useCallback10(
-    (option, index, isSelected) => /* @__PURE__ */ jsxs13(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
+    (option, index, isSelected) => /* @__PURE__ */ jsxs14(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
       /* @__PURE__ */ jsx17(Image_default, { src: `https://flagcdn.com/w80/${option.data?.code.toString().toLowerCase()}.webp`, width: 20 }),
       /* @__PURE__ */ jsx17(Text_default, { children: option.label })
     ] }),
@@ -4626,7 +4655,7 @@ InputFieldComponent.phoneNumber = forwardRef11(function PhoneNumber({ label, val
     setInputFieldValue(newValue.slice(country?.phoneNumberExtension.length + 1));
   }, [value]);
   const readyId = id ?? internalId;
-  return /* @__PURE__ */ jsxs13(Div_default.column, { width: "100%", gap: theme2.styles.gap / 2, children: [
+  return /* @__PURE__ */ jsxs14(Div_default.column, { width: "100%", gap: theme2.styles.gap / 2, children: [
     label && /* @__PURE__ */ jsx17(
       Label_default,
       {
@@ -4637,7 +4666,7 @@ InputFieldComponent.phoneNumber = forwardRef11(function PhoneNumber({ label, val
         htmlFor: readyId
       }
     ),
-    /* @__PURE__ */ jsxs13(Div_default.row, { children: [
+    /* @__PURE__ */ jsxs14(Div_default.row, { children: [
       /* @__PURE__ */ jsx17(
         Dropdown_default,
         {
@@ -4772,9 +4801,9 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({ minDate, maxDate
           overflow: "hidden",
           userSelect: "none",
           ...insideInputFieldComponentProps,
-          children: /* @__PURE__ */ jsxs13(Div_default.row, { gap: theme2.styles.space, children: [
+          children: /* @__PURE__ */ jsxs14(Div_default.row, { gap: theme2.styles.space, children: [
             /* @__PURE__ */ jsx17(Calendar_default, { value: internalValue, minDate, maxDate, onChange }),
-            /* @__PURE__ */ jsxs13(
+            /* @__PURE__ */ jsxs14(
               Div_default.row,
               {
                 height: 276,
@@ -4783,7 +4812,7 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({ minDate, maxDate
                 paddingBottom: theme2.styles.space / 2,
                 paddingRight: theme2.styles.space / 2,
                 children: [
-                  /* @__PURE__ */ jsxs13(Div_default, { height: "100%", children: [
+                  /* @__PURE__ */ jsxs14(Div_default, { height: "100%", children: [
                     /* @__PURE__ */ jsx17(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "H" }),
                     /* @__PURE__ */ jsx17(
                       Div_default,
@@ -4817,7 +4846,7 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({ minDate, maxDate
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsxs13(Div_default, { height: "100%", children: [
+                  /* @__PURE__ */ jsxs14(Div_default, { height: "100%", children: [
                     /* @__PURE__ */ jsx17(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "M" }),
                     /* @__PURE__ */ jsx17(
                       Div_default,
@@ -4914,7 +4943,7 @@ InputFieldComponent.time = forwardRef11(function Time({ ...props }, ref) {
           overflowY: "auto",
           userSelect: "none",
           ...insideInputFieldComponentProps,
-          children: /* @__PURE__ */ jsxs13(Div_default.row, { height: "100%", children: [
+          children: /* @__PURE__ */ jsxs14(Div_default.row, { height: "100%", children: [
             /* @__PURE__ */ jsx17(
               Div_default,
               {
@@ -5041,7 +5070,7 @@ var InputField_default = InputField2;
 import { forwardRef as forwardRef12, useCallback as useCallback11, useId as useId3, useState as useState8 } from "react";
 import { useBooleanState as useBooleanState6, useTheme as useTheme20 } from "react-better-core";
 import styled11 from "styled-components";
-import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 var componentSize = 26;
 var switchComponentBallGap = 3;
 var switchComponentMouseDownDifference = 4;
@@ -5170,10 +5199,10 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
     onChange?.(newIsChecked, value);
   }, [checked, controlledChecked, onChange, value]);
   const readyId = id ?? internalId;
-  return /* @__PURE__ */ jsxs14(Div_default.column, { gap: theme2.styles.gap, ...excludeStyle, children: [
+  return /* @__PURE__ */ jsxs15(Div_default.column, { gap: theme2.styles.gap, ...excludeStyle, children: [
     label && /* @__PURE__ */ jsx18(Label_default, { text: label, color: labelColor, required, isError: !!errorText, htmlFor: readyId }),
-    /* @__PURE__ */ jsxs14(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
-      /* @__PURE__ */ jsxs14(Div_default.row, { position: "relative", alignItems: "center", children: [
+    /* @__PURE__ */ jsxs15(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
+      /* @__PURE__ */ jsxs15(Div_default.row, { position: "relative", alignItems: "center", children: [
         /* @__PURE__ */ jsx18(
           InputElement2,
           {
@@ -5219,15 +5248,15 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
           }
         ) : void 0
       ] }),
-      text ? /* @__PURE__ */ jsxs14(Text_default, { color, userSelect: "none", cursor: "pointer", onClick: onClickText, children: [
+      text ? /* @__PURE__ */ jsxs15(Text_default, { color, userSelect: "none", cursor: "pointer", onClick: onClickText, children: [
         text,
-        required && !label && /* @__PURE__ */ jsxs14(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
+        required && !label && /* @__PURE__ */ jsxs15(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
           " ",
           "*"
         ] })
-      ] }) : textAdvanced ? /* @__PURE__ */ jsxs14(Div_default.row, { userSelect: "none", cursor: "pointer", onClick: onClickText, children: [
+      ] }) : textAdvanced ? /* @__PURE__ */ jsxs15(Div_default.row, { userSelect: "none", cursor: "pointer", onClick: onClickText, children: [
         textAdvanced,
-        required && !label && /* @__PURE__ */ jsxs14(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, marginLeft: 4, children: [
+        required && !label && /* @__PURE__ */ jsxs15(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, marginLeft: 4, children: [
           " ",
           "*"
         ] })
@@ -5280,7 +5309,7 @@ var ToggleInput_default = {
       onChange?.(newIsChecked, value);
     }, [disabled, checked, onChange, controlledChecked, value]);
     const readyId = id ?? internalId;
-    return /* @__PURE__ */ jsxs14(Div_default.column, { width: "fit-content", gap: theme2.styles.gap, ...excludeStyle, children: [
+    return /* @__PURE__ */ jsxs15(Div_default.column, { width: "fit-content", gap: theme2.styles.gap, ...excludeStyle, children: [
       label && /* @__PURE__ */ jsx18(Label_default, { text: label, color: labelColor, required, isError: !!errorText, htmlFor: readyId }),
       /* @__PURE__ */ jsx18(
         Div_default.row,
@@ -5333,7 +5362,7 @@ var ToggleInput_default = {
 // src/components/Form.tsx
 import { Children, forwardRef as forwardRef13, Fragment as Fragment5, memo as memo19, useMemo as useMemo7 } from "react";
 import { useTheme as useTheme21 } from "react-better-core";
-import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
 var FormComponent = forwardRef13(function Form({
   form,
   name,
@@ -5366,12 +5395,12 @@ var FormComponent = forwardRef13(function Form({
   }, [form]);
   const SubmitButtonTag = isDestructive ? Button_default.destructive : Button_default;
   const submitButtonIsDisabledFinal = submitButtonIsDisabled || submitButtonIsDisabledInternal;
-  return /* @__PURE__ */ jsx19(Div_default, { width: "100%", ...props, children: /* @__PURE__ */ jsxs15("form", { name, onSubmit: onSubmit ?? form?.onSubmit, ref, children: [
-    gap !== void 0 || withDividers ? /* @__PURE__ */ jsx19(Div_default.column, { gap: gap ?? (withDividers ? theme2.styles.space : theme2.styles.gap), children: withDividers ? Children.toArray(children).map((child, index) => /* @__PURE__ */ jsxs15(Fragment5, { children: [
+  return /* @__PURE__ */ jsx19(Div_default, { width: "100%", ...props, children: /* @__PURE__ */ jsxs16("form", { name, onSubmit: onSubmit ?? form?.onSubmit, ref, children: [
+    gap !== void 0 || withDividers ? /* @__PURE__ */ jsx19(Div_default.column, { gap: gap ?? (withDividers ? theme2.styles.space : theme2.styles.gap), children: withDividers ? Children.toArray(children).map((child, index) => /* @__PURE__ */ jsxs16(Fragment5, { children: [
       child,
       index < Children.toArray(children).length - 1 && /* @__PURE__ */ jsx19(Divider_default.horizontal, {})
     ] }, index)) : children }) : children,
-    submitButtonText && /* @__PURE__ */ jsxs15(
+    submitButtonText && /* @__PURE__ */ jsxs16(
       Div_default.row,
       {
         alignItems: "center",
@@ -5413,13 +5442,13 @@ var Form_default = Form2;
 // src/components/FormRow.tsx
 import { forwardRef as forwardRef14, memo as memo20 } from "react";
 import { useTheme as useTheme22 } from "react-better-core";
-import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
 var FormRowComponent = forwardRef14(function FormRow({ oneItemOnly, noBreakingPoint, asColumn, gap, children, ...props }, ref) {
   const theme2 = useTheme22();
   const mediaQuery = useMediaQuery();
   const breakingPoint = asColumn ?? (!noBreakingPoint ? mediaQuery.size900 : false);
   const readyGap = breakingPoint || noBreakingPoint && mediaQuery.size900 ? theme2.styles.gap : theme2.styles.space * 2;
-  return /* @__PURE__ */ jsxs16(Div_default.row, { alignItems: "center", gap: gap ?? readyGap, invertFlexDirection: breakingPoint, ...props, ref, children: [
+  return /* @__PURE__ */ jsxs17(Div_default.row, { alignItems: "center", gap: gap ?? readyGap, invertFlexDirection: breakingPoint, ...props, ref, children: [
     children,
     oneItemOnly && /* @__PURE__ */ jsx20(Div_default, { width: "100%" })
   ] });
@@ -5445,13 +5474,13 @@ FormRowComponent.withTitle = forwardRef14(function WithTitle({
   const theme2 = useTheme22();
   const mediaQuery = useMediaQuery();
   const titleGap = theme2.styles.space;
-  return /* @__PURE__ */ jsxs16(FormRowComponent, { ...props, ref, children: [
-    /* @__PURE__ */ jsxs16(Div_default.row, { width: "100%", alignItems: "center", gap: titleGap, children: [
+  return /* @__PURE__ */ jsxs17(FormRowComponent, { ...props, ref, children: [
+    /* @__PURE__ */ jsxs17(Div_default.row, { width: "100%", alignItems: "center", gap: titleGap, children: [
       icon && /* @__PURE__ */ jsx20(Icon_default, { name: icon }),
-      /* @__PURE__ */ jsxs16(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
-        /* @__PURE__ */ jsxs16(Text_default, { as: titleAs, fontSize: titleFontSize, children: [
+      /* @__PURE__ */ jsxs17(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
+        /* @__PURE__ */ jsxs17(Text_default, { as: titleAs, fontSize: titleFontSize, children: [
           title,
-          required && /* @__PURE__ */ jsxs16(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
+          required && /* @__PURE__ */ jsxs17(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
             " ",
             "*"
           ] })
@@ -5460,7 +5489,7 @@ FormRowComponent.withTitle = forwardRef14(function WithTitle({
       ] }),
       isLoading && /* @__PURE__ */ jsx20(Div_default, { width: 26 - titleGap })
     ] }),
-    /* @__PURE__ */ jsxs16(
+    /* @__PURE__ */ jsxs17(
       Div_default.row,
       {
         position: "relative",
@@ -5482,7 +5511,7 @@ FormRowComponent.withTitle = forwardRef14(function WithTitle({
             }
           ),
           children,
-          withActions && /* @__PURE__ */ jsxs16(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
+          withActions && /* @__PURE__ */ jsxs17(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
             onClickReset && /* @__PURE__ */ jsx20(Button_default.icon, { icon: "XMark", loaderName: resetButtonLoaderName, onClick: onClickReset }),
             /* @__PURE__ */ jsx20(Button_default.icon, { icon: "check", loaderName: saveButtonLoaderName, onClick: onClickSave })
           ] })
@@ -5498,7 +5527,7 @@ var FormRow_default = FormRow2;
 // src/components/ColorThemeSwitch.tsx
 import { memo as memo21, useCallback as useCallback12, useEffect as useEffect10, useState as useState9 } from "react";
 import { useTheme as useTheme23 } from "react-better-core";
-import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
 var ColorThemeSwitchComponent = function ColorThemeSwitch({
   withMoon,
   className,
@@ -5539,7 +5568,7 @@ var ColorThemeSwitchComponent = function ColorThemeSwitch({
 };
 ColorThemeSwitchComponent.withText = function WithText({ withMoon, className, ...props }) {
   const theme2 = useTheme23();
-  return /* @__PURE__ */ jsxs17(Div_default.row, { width: "fit-content", alignItems: "center", gap: theme2.styles.gap, userSelect: "none", ...props, children: [
+  return /* @__PURE__ */ jsxs18(Div_default.row, { width: "fit-content", alignItems: "center", gap: theme2.styles.gap, userSelect: "none", ...props, children: [
     /* @__PURE__ */ jsx21(Text_default, { children: "Light" }),
     /* @__PURE__ */ jsx21(ColorThemeSwitchComponent, { withMoon, className }),
     /* @__PURE__ */ jsx21(Text_default, { children: "Dark" })
@@ -5567,7 +5596,7 @@ import styled12, { css as css2 } from "styled-components";
 // src/components/Pagination.tsx
 import { memo as memo22, useCallback as useCallback13, useEffect as useEffect11, useMemo as useMemo8, useState as useState10 } from "react";
 import { useTheme as useTheme24 } from "react-better-core";
-import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
 var PaginationComponent = function Pagination({
   currentPage = 1,
   itemsLength = 0,
@@ -5614,7 +5643,7 @@ var PaginationComponent = function Pagination({
     setCurrentPage(currentPage);
   }, [currentPage]);
   const mobileFooterBreakingPoint = mediaQuery.size700 && pageCountInternal > maximumVisiblePages2 / 1.4;
-  return /* @__PURE__ */ jsxs18(Div_default.row, { alignItems: "center", justifyContent: "center", gap: theme2.styles.gap * 2, children: [
+  return /* @__PURE__ */ jsxs19(Div_default.row, { alignItems: "center", justifyContent: "center", gap: theme2.styles.gap * 2, children: [
     pageCountInternal > maximumVisiblePages2 && /* @__PURE__ */ jsx22(
       Button_default.icon,
       {
@@ -5679,7 +5708,7 @@ var Pagination2 = memo22(PaginationComponent);
 var Pagination_default = Pagination2;
 
 // src/components/Table.tsx
-import { Fragment as Fragment7, jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
 var defaultImageWidth = 160;
 var maximumVisiblePages = 11;
 var TableStyledComponent = styled12.table.withConfig({
@@ -6205,7 +6234,7 @@ var TableComponent = forwardRef15(function Table({
   );
   const withFooter = pageSize !== void 0 && pageCountInternal > 1;
   const mobileFooterBreakingPoint = mediaQuery.size700 && pageCountInternal > maximumVisiblePages / 1.4;
-  return /* @__PURE__ */ jsxs19(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs20(Fragment7, { children: [
     /* @__PURE__ */ jsx23(
       Div_default,
       {
@@ -6214,7 +6243,7 @@ var TableComponent = forwardRef15(function Table({
         overflow: !containsOverflowComponents ? "auto" : void 0,
         ...props,
         ref: wrapperComponentRef,
-        children: /* @__PURE__ */ jsxs19(
+        children: /* @__PURE__ */ jsxs20(
           TableStyledComponent,
           {
             isStriped,
@@ -6232,7 +6261,7 @@ var TableComponent = forwardRef15(function Table({
                   minWidth: column.minWidth,
                   maxWidth: column.maxWidth,
                   textAlign: column.align,
-                  children: /* @__PURE__ */ jsxs19(
+                  children: /* @__PURE__ */ jsxs20(
                     Div_default.row,
                     {
                       width: "100%",
@@ -6265,7 +6294,7 @@ var TableComponent = forwardRef15(function Table({
               )) }) }),
               /* @__PURE__ */ jsx23("tbody", { children: isLoading ? /* @__PURE__ */ jsx23("tr", { className: "withoutHover", children: /* @__PURE__ */ jsx23("td", { className: "noData", colSpan: readyColumns.length, children: /* @__PURE__ */ jsx23(Loader_default.box, {}) }) }) : dataAfterPagination.length > 0 ? dataAfterPagination.map((item, rowIndex) => {
                 const realRowIndex = rowIndex + (pageSize ? (currentPage - 1) * pageSize : 0);
-                return /* @__PURE__ */ jsxs19(Fragment6, { children: [
+                return /* @__PURE__ */ jsxs20(Fragment6, { children: [
                   /* @__PURE__ */ jsx23(
                     "tr",
                     {
@@ -6288,7 +6317,7 @@ var TableComponent = forwardRef15(function Table({
                   expandedRows[realRowIndex] && /* @__PURE__ */ jsx23("tr", { className: "withoutHover isExpandRow", children: /* @__PURE__ */ jsx23("td", { colSpan: readyColumns.length, children: renderExpandedRow(item, realRowIndex) }) })
                 ] }, JSON.stringify(item) + realRowIndex);
               }) : /* @__PURE__ */ jsx23("tr", { className: "withoutHover", children: /* @__PURE__ */ jsx23("td", { className: "noData", colSpan: readyColumns.length, children: /* @__PURE__ */ jsx23(Text_default.unknown, { children: noDataItemsMessage }) }) }) }),
-              withFooter && /* @__PURE__ */ jsx23("tfoot", { children: /* @__PURE__ */ jsx23("tr", { className: "isFooter", children: /* @__PURE__ */ jsx23("td", { colSpan: readyColumns.length, children: /* @__PURE__ */ jsxs19(
+              withFooter && /* @__PURE__ */ jsx23("tfoot", { children: /* @__PURE__ */ jsx23("tr", { className: "isFooter", children: /* @__PURE__ */ jsx23("td", { colSpan: readyColumns.length, children: /* @__PURE__ */ jsxs20(
                 Div_default.column,
                 {
                   position: "relative",
@@ -6297,7 +6326,7 @@ var TableComponent = forwardRef15(function Table({
                   flexReverse: true,
                   gap: theme2.styles.gap / 2,
                   children: [
-                    /* @__PURE__ */ jsxs19(
+                    /* @__PURE__ */ jsxs20(
                       Text_default,
                       {
                         position: mobileFooterBreakingPoint ? "relative" : "absolute",
@@ -6345,12 +6374,12 @@ var TableComponent = forwardRef15(function Table({
             submitButtonText: "Filter",
             cancelButtonText: "Clear",
             onClickCancel: openedFilterData ? onClickCancelFormFilter : void 0,
-            children: /* @__PURE__ */ jsxs19(FormRow_default, { children: [
+            children: /* @__PURE__ */ jsxs20(FormRow_default, { children: [
               /* @__PURE__ */ jsx23(InputField_default, { type: "number", label: "Min", ...filterForm.getInputFieldProps("min") }),
               /* @__PURE__ */ jsx23(InputField_default, { type: "number", label: "Max", ...filterForm.getInputFieldProps("max") })
             ] })
           }
-        ) : openedFilterColumn.filter === "date" || openedFilterColumn.filter === "date-time" ? /* @__PURE__ */ jsxs19(
+        ) : openedFilterColumn.filter === "date" || openedFilterColumn.filter === "date-time" ? /* @__PURE__ */ jsxs20(
           Form_default,
           {
             form: filterForm,
@@ -6359,14 +6388,14 @@ var TableComponent = forwardRef15(function Table({
             cancelButtonText: "Clear",
             onClickCancel: openedFilterData ? onClickCancelFormFilter : void 0,
             children: [
-              /* @__PURE__ */ jsx23(FormRow_default, { children: openedFilterColumn.filter === "date" ? /* @__PURE__ */ jsxs19(Fragment7, { children: [
+              /* @__PURE__ */ jsx23(FormRow_default, { children: openedFilterColumn.filter === "date" ? /* @__PURE__ */ jsxs20(Fragment7, { children: [
                 /* @__PURE__ */ jsx23(InputField_default.date, { label: "Min", ...filterForm.getInputFieldProps("min") }),
                 /* @__PURE__ */ jsx23(InputField_default.date, { label: "Max", ...filterForm.getInputFieldProps("max") })
-              ] }) : /* @__PURE__ */ jsxs19(Fragment7, { children: [
+              ] }) : /* @__PURE__ */ jsxs20(Fragment7, { children: [
                 /* @__PURE__ */ jsx23(InputField_default.dateTime, { label: "Min", ...filterForm.getInputFieldProps("min") }),
                 /* @__PURE__ */ jsx23(InputField_default.dateTime, { label: "Max", ...filterForm.getInputFieldProps("max") })
               ] }) }),
-              openedFilterColumn.presets && /* @__PURE__ */ jsxs19(Div_default.column, { gap: theme2.styles.gap / 2, children: [
+              openedFilterColumn.presets && /* @__PURE__ */ jsxs20(Div_default.column, { gap: theme2.styles.gap / 2, children: [
                 /* @__PURE__ */ jsx23(Label_default, { text: "Presets" }),
                 /* @__PURE__ */ jsx23(Div_default.row, { alignItems: "center", flexWrap: "wrap", gap: theme2.styles.gap, children: openedFilterColumn.presets.map((preset) => /* @__PURE__ */ jsx23(
                   Button_default.secondary,
@@ -6381,13 +6410,13 @@ var TableComponent = forwardRef15(function Table({
               ] })
             ]
           }
-        ) : openedFilterColumn.filter === "list" ? /* @__PURE__ */ jsxs19(
+        ) : openedFilterColumn.filter === "list" ? /* @__PURE__ */ jsxs20(
           Form_default,
           {
             gap: theme2.styles.space,
             submitButtonText: "Filter",
             cancelButtonText: "Clear",
-            renderActionButtons: /* @__PURE__ */ jsxs19(Div_default.row, { marginRight: "auto", alignItems: "center", gap: theme2.styles.gap, children: [
+            renderActionButtons: /* @__PURE__ */ jsxs20(Div_default.row, { marginRight: "auto", alignItems: "center", gap: theme2.styles.gap, children: [
               /* @__PURE__ */ jsx23(
                 Button_default.secondary,
                 {
@@ -6418,7 +6447,7 @@ var TableComponent = forwardRef15(function Table({
                   ...filterForm.getInputFieldProps("search")
                 }
               ) }),
-              /* @__PURE__ */ jsxs19(Div_default.column, { gap: theme2.styles.gap / 2, children: [
+              /* @__PURE__ */ jsxs20(Div_default.column, { gap: theme2.styles.gap / 2, children: [
                 /* @__PURE__ */ jsx23(Label_default, { text: "Possible values" }),
                 /* @__PURE__ */ jsx23(Div_default.row, { flexWrap: "wrap", gap: theme2.styles.gap, children: possibleFilterListValues.length > 0 ? possibleFilterListValues.map((value) => {
                   const isActive = filterListSelectedItems?.includes(value.value);
@@ -6428,9 +6457,9 @@ var TableComponent = forwardRef15(function Table({
                       isActive,
                       value: value.value,
                       onClickWithValue: onClickFilterListItem,
-                      children: /* @__PURE__ */ jsxs19(Div_default.row, { alignItems: "center", gap: theme2.styles.gap / 2, children: [
+                      children: /* @__PURE__ */ jsxs20(Div_default.row, { alignItems: "center", gap: theme2.styles.gap / 2, children: [
                         /* @__PURE__ */ jsx23(Text_default, { children: value.label || value.value }),
-                        openedFilterColumn.withTotalNumber && /* @__PURE__ */ jsxs19(
+                        openedFilterColumn.withTotalNumber && /* @__PURE__ */ jsxs20(
                           Text_default,
                           {
                             fontSize: 14,
@@ -6463,7 +6492,7 @@ var Table_default = Table2;
 import { memo as memo24, useCallback as useCallback15, useRef as useRef7, useState as useState12, useEffect as useEffect13, forwardRef as forwardRef16, useImperativeHandle as useImperativeHandle3, useMemo as useMemo10 } from "react";
 import { useTheme as useTheme26 } from "react-better-core";
 import styled13, { css as css3 } from "styled-components";
-import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
 var tooltipContainerStyle = (props) => ({
   top: css3`
       bottom: calc(100% + ${props.gap}px + ${props.arrowSize}px);
@@ -6706,7 +6735,7 @@ var TooltipComponent = forwardRef16(function Tooltip({
     },
     [isOpen, openTooltip, closeTooltip]
   );
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     Div_default,
     {
       position: "relative",
@@ -6739,7 +6768,7 @@ var TooltipComponent = forwardRef16(function Tooltip({
             isOpen,
             role: "tooltip",
             ref: tooltipContainerRef,
-            children: (isOpen || isOpenLate) && /* @__PURE__ */ jsxs20(Div_default, { position: "relative", ref: contentRef, children: [
+            children: (isOpen || isOpenLate) && /* @__PURE__ */ jsxs21(Div_default, { position: "relative", ref: contentRef, children: [
               /* @__PURE__ */ jsx24(
                 Div_default.box,
                 {
@@ -6800,7 +6829,7 @@ TooltipComponent.item = forwardRef16(function Item({
   onClickWithValue
 }, ref) {
   const theme2 = useTheme26();
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     Div_default.row,
     {
       alignItems: "center",
@@ -6819,7 +6848,7 @@ TooltipComponent.item = forwardRef16(function Item({
       ref,
       children: [
         icon && /* @__PURE__ */ jsx24(Icon_default, { name: icon, color: iconColor ?? (!isActive ? theme2.colors.textSecondary : void 0) }),
-        /* @__PURE__ */ jsxs20(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
+        /* @__PURE__ */ jsxs21(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
           /* @__PURE__ */ jsx24(Text_default, { fontWeight: isActive ? 700 : void 0, color: textColor ?? theme2.colors.textPrimary, children: text }),
           description && /* @__PURE__ */ jsx24(Text_default, { fontSize: 14, color: theme2.colors.textSecondary, children: description })
         ] })
@@ -6856,7 +6885,7 @@ var Tooltip_default = Tooltip2;
 // src/components/Tabs.tsx
 import { forwardRef as forwardRef17, memo as memo25, useCallback as useCallback16, useEffect as useEffect14, useImperativeHandle as useImperativeHandle4, useMemo as useMemo11, useRef as useRef8, useState as useState13 } from "react";
 import { useBetterCoreContext as useBetterCoreContext9, useTheme as useTheme27 } from "react-better-core";
-import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
 var tabBottomLineWidth = 2;
 var tabDotSize = 6;
 var defaultTabName = "tab";
@@ -6956,11 +6985,11 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
     },
     [selectedTab, onClickTab]
   );
-  return /* @__PURE__ */ jsxs21(Div_default.column, { width: "100%", gap: theme2.styles.space, ...props, children: [
-    /* @__PURE__ */ jsxs21(Div_default, { position: "relative", className: "react-better-html-no-scrollbar", overflowY: "auto", children: [
+  return /* @__PURE__ */ jsxs22(Div_default.column, { width: "100%", gap: theme2.styles.space, ...props, children: [
+    /* @__PURE__ */ jsxs22(Div_default, { position: "relative", className: "react-better-html-no-scrollbar", overflowY: "auto", children: [
       /* @__PURE__ */ jsx25(Div_default.row, { position: "relative", width: "fit-content", gap: tabsGap, userSelect: "none", children: tabs.map((tab) => {
         const selected = tab === selectedTab;
-        return /* @__PURE__ */ jsxs21(
+        return /* @__PURE__ */ jsxs22(
           Div_default,
           {
             position: "relative",
@@ -7049,7 +7078,7 @@ var Tabs_default = Tabs2;
 // src/components/Foldable.tsx
 import { forwardRef as forwardRef18, memo as memo26, useCallback as useCallback17, useEffect as useEffect15, useImperativeHandle as useImperativeHandle5, useRef as useRef9, useState as useState14 } from "react";
 import { useBooleanState as useBooleanState7, useTheme as useTheme28 } from "react-better-core";
-import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
 var animationDurationClose = 0.15;
 var animationDurationOpen = animationDurationClose * 2;
 var FoldableComponent = forwardRef18(function Foldable({
@@ -7119,8 +7148,8 @@ var FoldableComponent = forwardRef18(function Foldable({
       isOpen
     };
   }, [open, close, toggleOpen, isOpen]);
-  return /* @__PURE__ */ jsxs22(Div_default.column, { width: "100%", ...props, children: [
-    renderHeader ? renderHeader(isOpen, toggleOpen) : /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(Div_default.column, { width: "100%", ...props, children: [
+    renderHeader ? renderHeader(isOpen, toggleOpen) : /* @__PURE__ */ jsxs23(
       Div_default.row,
       {
         width: "100%",
@@ -7132,11 +7161,11 @@ var FoldableComponent = forwardRef18(function Foldable({
         onClick: toggleOpen,
         userSelect: "none",
         children: [
-          /* @__PURE__ */ jsxs22(Div_default.row, { flex: 1, alignItems: "center", gap: theme2.styles.space, children: [
+          /* @__PURE__ */ jsxs23(Div_default.row, { flex: 1, alignItems: "center", gap: theme2.styles.space, children: [
             icon && /* @__PURE__ */ jsx26(Icon_default, { name: icon, size: 20, flexShrink: 0 }),
             image && /* @__PURE__ */ jsx26(Image_default.profileImage, { name: image, size: 24, flexShrink: 0 }),
-            /* @__PURE__ */ jsxs22(Div_default.column, { gap: theme2.styles.gap / 2, children: [
-              title && /* @__PURE__ */ jsxs22(Div_default.row, { alignItems: "center", gap: theme2.styles.space, children: [
+            /* @__PURE__ */ jsxs23(Div_default.column, { gap: theme2.styles.gap / 2, children: [
+              title && /* @__PURE__ */ jsxs23(Div_default.row, { alignItems: "center", gap: theme2.styles.space, children: [
                 /* @__PURE__ */ jsx26(
                   Text_default,
                   {
@@ -7206,7 +7235,7 @@ import {
   useBooleanState as useBooleanState8,
   useTheme as useTheme29
 } from "react-better-core";
-import { Fragment as Fragment8, jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx27, jsxs as jsxs24 } from "react/jsx-runtime";
 var tabDotSize2 = 6;
 var sideMenuContext = createContext2(void 0);
 var SideMenuContextProvider = sideMenuContext.Provider;
@@ -7261,7 +7290,7 @@ var MenuItemComponent = memo27(function MenuItemComponent2({ item, backgroundCol
   const content = /* @__PURE__ */ jsx27(
     Tooltip_default,
     {
-      content: /* @__PURE__ */ jsxs23(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
+      content: /* @__PURE__ */ jsxs24(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
         /* @__PURE__ */ jsx27(Text_default, { whiteSpace: "nowrap", children: item.text }),
         item.children && /* @__PURE__ */ jsx27(Icon_default, { name: "chevronDown", color: theme2.colors.textSecondary, size: 14 })
       ] }),
@@ -7270,7 +7299,7 @@ var MenuItemComponent = memo27(function MenuItemComponent2({ item, backgroundCol
       childrenWrapperWidth: "100%",
       disabled: !isCollapsed,
       position: "right",
-      children: /* @__PURE__ */ jsxs23(
+      children: /* @__PURE__ */ jsxs24(
         Div_default.row,
         {
           alignItems: "center",
@@ -7351,9 +7380,9 @@ var MenuItemComponent = memo27(function MenuItemComponent2({ item, backgroundCol
     setIsOpened.setFalse();
   }, [isCollapsed]);
   const LinkComponentTag = components.button?.tagReplacement?.linkComponent ?? "a";
-  return /* @__PURE__ */ jsxs23(Div_default, { width: "100%", children: [
+  return /* @__PURE__ */ jsxs24(Div_default, { width: "100%", children: [
     item.href ? /* @__PURE__ */ jsx27(LinkComponentTag, { to: item.href, href: item.href, onClick: onClickElement, children: content }) : content,
-    item.children && /* @__PURE__ */ jsxs23(
+    item.children && /* @__PURE__ */ jsxs24(
       Div_default.column,
       {
         position: "relative",
@@ -7373,7 +7402,7 @@ var MenuItemComponent = memo27(function MenuItemComponent2({ item, backgroundCol
             },
             child.text
           )),
-          /* @__PURE__ */ jsxs23(
+          /* @__PURE__ */ jsxs24(
             Div_default,
             {
               position: "absolute",
@@ -7456,7 +7485,7 @@ var SideMenuComponent = function SideMenu({
   const sideMenuCollapsedWidth = theme2.styles.space + theme2.styles.space * 2 + 16 + theme2.styles.space;
   const readyBackgroundColor = backgroundColor ?? theme2.colors.backgroundContent;
   const logoSize = sideMenuCollapsedWidth - theme2.styles.space * 2;
-  return /* @__PURE__ */ jsx27(SideMenuContextProvider, { value: contextValue, children: /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsx27(SideMenuContextProvider, { value: contextValue, children: /* @__PURE__ */ jsxs24(
     Div_default.column,
     {
       position: "fixed",
@@ -7472,9 +7501,9 @@ var SideMenuComponent = function SideMenu({
       userSelect: "none",
       zIndex: 10,
       children: [
-        /* @__PURE__ */ jsxs23(Div_default.column, { width: "100%", height: "100%", gap: theme2.styles.space, children: [
-          (logoAssetName || logoUrl || withCloseButton && mediaQuery.size1000) && /* @__PURE__ */ jsxs23(Div_default.row, { alignItems: "center", paddingInline: theme2.styles.space, children: [
-            (logoAssetName || logoUrl) && /* @__PURE__ */ jsx27(LinkComponentTag, { to: "/", href: "/", onClick: onClickXButton, children: /* @__PURE__ */ jsxs23(
+        /* @__PURE__ */ jsxs24(Div_default.column, { width: "100%", height: "100%", gap: theme2.styles.space, children: [
+          (logoAssetName || logoUrl || withCloseButton && mediaQuery.size1000) && /* @__PURE__ */ jsxs24(Div_default.row, { alignItems: "center", paddingInline: theme2.styles.space, children: [
+            (logoAssetName || logoUrl) && /* @__PURE__ */ jsx27(LinkComponentTag, { to: "/", href: "/", onClick: onClickXButton, children: /* @__PURE__ */ jsxs24(
               Div_default.row,
               {
                 alignItems: "center",
@@ -7510,7 +7539,7 @@ var SideMenuComponent = function SideMenu({
             ) }),
             withCloseButton && mediaQuery.size1000 && /* @__PURE__ */ jsx27(Button_default.icon, { icon: "XMark", marginLeft: "auto", onClick: onClickXButton })
           ] }),
-          !isLoading ? /* @__PURE__ */ jsxs23(Fragment8, { children: [
+          !isLoading ? /* @__PURE__ */ jsxs24(Fragment8, { children: [
             /* @__PURE__ */ jsx27(
               Div_default.column,
               {
@@ -7629,7 +7658,7 @@ SideMenuComponent.pageHolder = function SideMenuPageHolder({ outsideComponent, .
   const { components, sideMenuIsCollapsed } = useBetterHtmlContextInternal();
   const sideMenuWidth = components.sideMenu?.width ?? defaultSideMenuWidth;
   const sideMenuCollapsedWidth = theme2.styles.space + theme2.styles.space * 2 + 16 + theme2.styles.space;
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     Div_default,
     {
       position: "relative",
@@ -7648,7 +7677,7 @@ SideMenuComponent.burgerButton = function BurgerButton() {
   const { sideMenuIsOpenMobile, setSideMenuIsOpenMobile } = useBetterHtmlContextInternal();
   const [isHovered, setIsHovered] = useBooleanState8();
   const width = 2;
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     Div_default,
     {
       position: "relative",