react-better-html 1.1.218 → 1.1.219

package/dist/index.mjs

@@ -14,16 +14,16 @@ import {
   eventStopPropagation,
   eventPreventStop,
   getPluralWord as getPluralWord2,
-  useBooleanState as useBooleanState8,
+  useBooleanState as useBooleanState9,
   useDebounceState as useDebounceState3,
   loaderControls,
   colorThemeControls as colorThemeControls2
 } from "react-better-core";
 
 // src/components/BetterHtmlProvider.tsx
-import { createContext, memo as memo12, useCallback as useCallback6, useContext, useEffect as useEffect5, useMemo as useMemo3, useState as useState4 } from "react";
+import { createContext, memo as memo12, useCallback as useCallback6, useContext, useEffect as useEffect6, useMemo as useMemo3, useState as useState4 } from "react";
 import {
-  useBooleanState as useBooleanState2,
+  useBooleanState as useBooleanState3,
   colorThemeControls,
   useTheme as useTheme13,
   BetterCoreProvider,
@@ -1773,7 +1773,7 @@ Div2.box = DivComponent.box;
 var Div_default = Div2;
 
 // src/components/alerts/Alert.tsx
-import { memo as memo10, useCallback as useCallback5, useEffect as useEffect4, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
+import { memo as memo10, useCallback as useCallback5, useEffect as useEffect5, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
 import { useTheme as useTheme11 } from "react-better-core";
 import styled8 from "styled-components";
 
@@ -1782,6 +1782,7 @@ var defaultAlertsPluginOptions = {
   position: "bottom",
   align: "right",
   defaultDuration: "auto",
+  defaultDisplay: {},
   maxWidth: 460,
   withLoaderBar: true,
   withCloseButton: true
@@ -2166,10 +2167,11 @@ Button2.upload = ButtonComponent.upload;
 var Button_default = Button2;
 
 // src/components/Modal.tsx
-import { memo as memo9, useCallback as useCallback4, forwardRef as forwardRef7, useImperativeHandle, useRef as useRef2, useState as useState2 } from "react";
+import { memo as memo9, useCallback as useCallback4, forwardRef as forwardRef7, useImperativeHandle, useRef as useRef2, useEffect as useEffect4 } from "react";
 import { createPortal } from "react-dom";
 import {
   useBetterCoreContext as useBetterCoreContext4,
+  useBooleanState as useBooleanState2,
   useTheme as useTheme10
 } from "react-better-core";
 import styled7 from "styled-components";
@@ -2227,6 +2229,7 @@ var ModalComponent = forwardRef7(function Modal({
   name,
   overflow,
   withoutCloseButton,
+  defaultIsOpened = false,
   onOpen,
   onClose,
   children
@@ -2237,12 +2240,12 @@ var ModalComponent = forwardRef7(function Modal({
   const { app } = useBetterHtmlContextInternal();
   const { colorTheme } = useBetterCoreContext4();
   const dialogRef = useRef2(null);
-  const [isOpened, setIsOpened] = useState2(false);
-  const [isOpenedLate, setIsOpenedLate] = useState2(false);
+  const [isOpened, setIsOpened] = useBooleanState2(false);
+  const [isOpenedLate, setIsOpenedLate] = useBooleanState2(false);
   const onClickOpen = useCallback4(() => {
     dialogRef.current?.showModal();
-    setIsOpened(true);
-    setIsOpenedLate(true);
+    setIsOpened.setTrue();
+    setIsOpenedLate.setTrue();
     if (urlQuery && name) {
       urlQuery.setQuery(
         {
@@ -2254,12 +2257,12 @@ var ModalComponent = forwardRef7(function Modal({
     onOpen?.();
   }, [onOpen, urlQuery, name]);
   const onClickClose = useCallback4(() => {
-    setIsOpened(false);
+    setIsOpened.setFalse();
     onClose?.();
     if (urlQuery && name) urlQuery.removeQuery(`${name}-modal`, false);
     setTimeout(() => {
       dialogRef.current?.close();
-      setIsOpenedLate(false);
+      setIsOpenedLate.setFalse();
     }, 0.2 * 1e3);
   }, [onClose, urlQuery, name]);
   const onKeyDown = useCallback4(
@@ -2271,6 +2274,10 @@ var ModalComponent = forwardRef7(function Modal({
     },
     [withoutCloseButton]
   );
+  useEffect4(() => {
+    if (!defaultIsOpened) return;
+    onClickOpen();
+  }, []);
   useImperativeHandle(
     ref,
     () => {
@@ -2620,6 +2627,7 @@ function Alert2({ alert }) {
     alert.duration ?? pluginConfig.defaultDuration ?? defaultAlertsPluginOptions.defaultDuration,
     alert
   );
+  const defaultAlertDisplay = alert.display ?? pluginConfig.defaultDisplay?.[alert.type] ?? defaultAlertsPluginOptions.defaultDisplay[alert.type] ?? "default";
   const intervalRef = useRef3(void 0);
   const startTimeRef = useRef3(Date.now());
   const remainingTimeRef = useRef3(defaultAlertDurationNumber);
@@ -2639,7 +2647,7 @@ function Alert2({ alert }) {
       setProgress(newProgress);
       if (newProgress <= 0) {
         if (intervalRef.current) clearInterval(intervalRef.current);
-        if (alert.display === "prominent") return;
+        if (defaultAlertDisplay === "prominent") return;
         setIsRemoved(true);
         setTimeout(() => {
           alertControls2.removeAlert(alert.id);
@@ -2650,7 +2658,7 @@ function Alert2({ alert }) {
         }, 0.2 * 1e3 - 10);
       }
     }, updateInterval);
-  }, [alert, progress]);
+  }, [alert, progress, defaultAlertDisplay]);
   const onClickCloseAlert = useCallback5(() => {
     setIsRemoved(true);
     setTimeout(() => {
@@ -2709,14 +2717,7 @@ function Alert2({ alert }) {
     }),
     [theme2]
   );
-  useEffect4(() => {
-    if (alert.display === "prominent") {
-      setTimeout(() => {
-        modalRef.current?.open();
-      }, 0.1 * 1e3);
-    }
-  }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     startTimeRef.current = Date.now();
     remainingTimeRef.current = defaultAlertDurationNumber;
     startProgressTimer();
@@ -2726,9 +2727,10 @@ function Alert2({ alert }) {
   }, [defaultAlertDurationNumber, startProgressTimer]);
   const animation = `${isRemoved ? getAnimationOutName(pluginConfig.position ?? defaultAlertsPluginOptions.position)[pluginConfig.align ?? defaultAlertsPluginOptions.align] : getAnimationInName(pluginConfig.position ?? defaultAlertsPluginOptions.position)[pluginConfig.align ?? defaultAlertsPluginOptions.align]} ${theme2.styles.transition}`;
   const alertTitle = alert.title ?? alertData[alert.type].title;
-  return alert.display === "prominent" ? /* @__PURE__ */ jsx10(
+  return defaultAlertDisplay === "prominent" ? /* @__PURE__ */ jsx10(
     Modal_default,
     {
+      defaultIsOpened: true,
       icon: alertData[alert.type].icon,
       title: alertTitle,
       description: alert.message,
@@ -2947,8 +2949,8 @@ function BetterHtmlProviderInternalContent({ children }) {
 function BetterHtmlProviderInternal({ config, plugins, children }) {
   const betterCoreContext = useBetterCoreContext5();
   const [alerts, setAlerts] = useState4([]);
-  const [sideMenuIsCollapsed, setSideMenuIsCollapsed] = useBooleanState2();
-  const [sideMenuIsOpenMobile, setSideMenuIsOpenMobile] = useBooleanState2();
+  const [sideMenuIsCollapsed, setSideMenuIsCollapsed] = useBooleanState3();
+  const [sideMenuIsOpenMobile, setSideMenuIsOpenMobile] = useBooleanState3();
   const [tabGroups, setTabGroups] = useState4([]);
   const [tabsWithDots, setTabsWithDots] = useState4([]);
   const readyConfig = useMemo3(
@@ -2978,7 +2980,7 @@ function BetterHtmlProviderInternal({ config, plugins, children }) {
     }),
     [config, alerts, sideMenuIsCollapsed, sideMenuIsOpenMobile, plugins, tabGroups, tabsWithDots]
   );
-  useEffect5(() => {
+  useEffect6(() => {
     if (!plugins) return;
     plugins.forEach((plugin) => {
       plugin.initialize?.();
@@ -3017,7 +3019,7 @@ function BetterHtmlProvider({ config, ...props }) {
     }),
     [config]
   );
-  useEffect5(() => {
+  useEffect6(() => {
     const html = document.querySelector("html");
     if (!html) return;
     html.setAttribute("data-theme", localStorage.getItem("theme") === "dark" ? "dark" : "light");
@@ -3394,11 +3396,11 @@ Chip2.colored = ChipComponent.colored;
 var Chip_default = Chip2;
 
 // src/components/InputField.tsx
-import { forwardRef as forwardRef11, memo as memo18, useCallback as useCallback10, useState as useState7, useEffect as useEffect8, useMemo as useMemo6, useRef as useRef5, useId as useId2 } from "react";
+import { forwardRef as forwardRef11, memo as memo18, useCallback as useCallback10, useState as useState7, useEffect as useEffect9, useMemo as useMemo6, useRef as useRef5, useId as useId2 } from "react";
 import {
   darkenColor as darkenColor2,
   lightenColor as lightenColor2,
-  useBooleanState as useBooleanState4,
+  useBooleanState as useBooleanState5,
   useDebounceState as useDebounceState2,
   countries as countries2,
   useTheme as useTheme19,
@@ -3435,10 +3437,10 @@ function Label({ text, required, isError, color, htmlFor }) {
 var Label_default = memo15(Label);
 
 // src/components/Dropdown.tsx
-import { forwardRef as forwardRef10, Fragment as Fragment3, memo as memo16, useCallback as useCallback8, useEffect as useEffect6, useMemo as useMemo4, useRef as useRef4, useState as useState5 } from "react";
+import { forwardRef as forwardRef10, Fragment as Fragment3, memo as memo16, useCallback as useCallback8, useEffect as useEffect7, useMemo as useMemo4, useRef as useRef4, useState as useState5 } from "react";
 import {
   getPluralWord,
-  useBooleanState as useBooleanState3,
+  useBooleanState as useBooleanState4,
   useDebounceState,
   countries,
   useTheme as useTheme17
@@ -3478,9 +3480,9 @@ var DropdownComponent = forwardRef10(function Dropdown({
   const inputFieldHolderRef = useRef4(null);
   const buttonsRef = useRef4(null);
   const inputRef = useRef4(null);
-  const [isOpen, setIsOpen] = useBooleanState3();
-  const [isOpenLate, setIsOpenLate] = useBooleanState3();
-  const [isFocused, setIsFocused] = useBooleanState3();
+  const [isOpen, setIsOpen] = useBooleanState4();
+  const [isOpenLate, setIsOpenLate] = useBooleanState4();
+  const [isFocused, setIsFocused] = useBooleanState4();
   const [searchQuery, setSearchQuery] = useState5("");
   const [_, debouncedSearchQuery, setDebouncedSearchQuery, isLoadingDebouncedSearchQuery] = useDebounceState(
     "",
@@ -3639,10 +3641,10 @@ var DropdownComponent = forwardRef10(function Dropdown({
       renderOptionDivider
     ]
   );
-  useEffect6(() => {
+  useEffect7(() => {
     setInternalValue(controlledValue);
   }, [controlledValue]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (isOpen) {
       setIsOpenLate.setTrue();
       if (withSearch && inputRef.current) inputRef.current.focus();
@@ -3653,10 +3655,10 @@ var DropdownComponent = forwardRef10(function Dropdown({
       };
     }
   }, [isOpen, withSearch]);
-  useEffect6(() => {
+  useEffect7(() => {
     setFocusedOptionIndex(void 0);
   }, [filteredOptions]);
-  useEffect6(() => {
+  useEffect7(() => {
     const handleClickOutside = (event) => {
       if (inputFieldHolderRef.current && buttonsRef.current && !inputFieldHolderRef.current.contains(event.target) && !buttonsRef.current.contains(event.target)) {
         setIsOpen.setFalse();
@@ -3671,7 +3673,7 @@ var DropdownComponent = forwardRef10(function Dropdown({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [isOpen]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!withDebounce) return;
     onChangeSearch?.(debouncedSearchQuery);
   }, [withDebounce, onChangeSearch, debouncedSearchQuery]);
@@ -3847,7 +3849,7 @@ Dropdown2.countries = DropdownComponent.countries;
 var Dropdown_default = Dropdown2;
 
 // src/components/Calendar.tsx
-import { useCallback as useCallback9, useMemo as useMemo5, useState as useState6, memo as memo17, useEffect as useEffect7, useId } from "react";
+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";
@@ -3957,7 +3959,7 @@ function Calendar({ value, minDate, maxDate, onChange }) {
     }
     return result;
   }, [daysInMonth, firstDayOfMonth]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!value) return;
     const date = new Date(value);
     setCurrentDate(date);
@@ -4282,7 +4284,7 @@ var InputFieldComponent = forwardRef11(function InputField({
     ) ? 1002 : 1,
     [props.className]
   );
-  useEffect8(() => {
+  useEffect9(() => {
     if (!withDebounce) return;
     onChangeValue?.(debouncedValue);
   }, [withDebounce, onChangeValue, debouncedValue]);
@@ -4499,7 +4501,7 @@ InputFieldComponent.email = forwardRef11(function Email({ ...props }, ref) {
   );
 });
 InputFieldComponent.password = forwardRef11(function Password({ ...props }, ref) {
-  const [isPassword, setIsPassword] = useBooleanState4(true);
+  const [isPassword, setIsPassword] = useBooleanState5(true);
   return /* @__PURE__ */ jsx17(
     InputFieldComponent,
     {
@@ -4517,7 +4519,7 @@ InputFieldComponent.password = forwardRef11(function Password({ ...props }, ref)
 });
 InputFieldComponent.search = forwardRef11(function Search({ value, onChangeValue, onFocus, onBlur, ...props }, ref) {
   const [inputFieldValue, setInputFieldValue] = useState7(value?.toString() ?? "");
-  const [inputFieldFocused, setInputFieldFocused] = useBooleanState4();
+  const [inputFieldFocused, setInputFieldFocused] = useBooleanState5();
   const onChangeValueElement = useCallback10(
     (value2) => {
       setInputFieldValue(value2);
@@ -4599,7 +4601,7 @@ InputFieldComponent.phoneNumber = forwardRef11(function PhoneNumber({ label, val
     setDropdownValue(initialDefaultValue);
     return initialDefaultValue;
   }, [options]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (value === void 0 || value === null) return;
     const newValue = value.toString();
     const country = countries2.find(
@@ -4735,7 +4737,7 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({ minDate, maxDate
     },
     [defaultDateAfterTimePick, internalValue, inputFieldProps.onChangeValue]
   );
-  useEffect8(() => {
+  useEffect9(() => {
     if (isOpen && selectedHourRef.current)
       selectedHourRef.current.scrollIntoView({ block: "nearest", behavior: "instant" });
     if (isOpen && selectedMinuteRef.current)
@@ -4877,7 +4879,7 @@ InputFieldComponent.time = forwardRef11(function Time({ ...props }, ref) {
     },
     [internalValue, inputFieldProps.onChangeValue]
   );
-  useEffect8(() => {
+  useEffect9(() => {
     if (isOpen && selectedHourRef.current)
       selectedHourRef.current.scrollIntoView({ block: "nearest", behavior: "instant" });
     if (isOpen && selectedMinuteRef.current)
@@ -4985,7 +4987,7 @@ InputFieldComponent.color = forwardRef11(function Color4({ value, onChangeValue,
     },
     [onChangeValue]
   );
-  useEffect8(() => {
+  useEffect9(() => {
     if (value === void 0) return;
     setInputFieldValue(value);
   }, [value]);
@@ -5029,7 +5031,7 @@ var InputField_default = InputField2;
 
 // src/components/ToggleInput.tsx
 import { forwardRef as forwardRef12, useCallback as useCallback11, useId as useId3, useState as useState8 } from "react";
-import { useBooleanState as useBooleanState5, useTheme as useTheme20 } from "react-better-core";
+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";
 var componentSize = 26;
@@ -5260,8 +5262,8 @@ var ToggleInput_default = {
     const { style, hoverStyle, excludeStyle, restProps } = useComponentPropsGrouper(props, true);
     const dataProps = useComponentPropsWithPrefix(restProps, "data");
     const ariaProps = useComponentPropsWithPrefix(restProps, "aria");
-    const [internalChecked, setInternalChecked] = useBooleanState5();
-    const [isMouseDown, setIsMouseDown] = useBooleanState5();
+    const [internalChecked, setInternalChecked] = useBooleanState6();
+    const [isMouseDown, setIsMouseDown] = useBooleanState6();
     const checked = controlledChecked ?? internalChecked;
     const onClickElement = useCallback11(() => {
       if (disabled) return;
@@ -5486,7 +5488,7 @@ FormRow2.withTitle = FormRowComponent.withTitle;
 var FormRow_default = FormRow2;
 
 // src/components/ColorThemeSwitch.tsx
-import { memo as memo21, useCallback as useCallback12, useEffect as useEffect9, useState as useState9 } from "react";
+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";
 var ColorThemeSwitchComponent = function ColorThemeSwitch({
@@ -5499,7 +5501,7 @@ var ColorThemeSwitchComponent = function ColorThemeSwitch({
     setValue(checked);
     document.querySelector("html")?.setAttribute("data-theme", checked ? "dark" : "light");
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     const html = document.querySelector("html");
     if (!html) return;
     const observer = new MutationObserver((mutations) => {
@@ -5548,14 +5550,14 @@ import {
   useState as useState11,
   useImperativeHandle as useImperativeHandle2,
   useRef as useRef6,
-  useEffect as useEffect11,
+  useEffect as useEffect12,
   Fragment as Fragment6
 } from "react";
 import { darkenColor as darkenColor3, useBetterCoreContext as useBetterCoreContext8, useTheme as useTheme25 } from "react-better-core";
 import styled12, { css as css2 } from "styled-components";
 
 // src/components/Pagination.tsx
-import { memo as memo22, useCallback as useCallback13, useEffect as useEffect10, useMemo as useMemo8, useState as useState10 } from "react";
+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";
 var PaginationComponent = function Pagination({
@@ -5597,10 +5599,10 @@ var PaginationComponent = function Pagination({
       (_, index) => startPage + index
     );
   }, [pageCountInternal, currentPageInternal]);
-  useEffect10(() => {
+  useEffect11(() => {
     onChangePage?.(currentPageInternal);
   }, [currentPageInternal, onChangePage]);
-  useEffect10(() => {
+  useEffect11(() => {
     setCurrentPage(currentPage);
   }, [currentPage]);
   const mobileFooterBreakingPoint = mediaQuery.size700 && pageCountInternal > maximumVisiblePages2 / 1.4;
@@ -6161,13 +6163,13 @@ var TableComponent = forwardRef15(function Table({
     [possibleFilterListValues]
   );
   const onClickDeselectAllFilterListItems = useCallback14(() => setFilterListSelectedItems([]), []);
-  useEffect11(() => {
+  useEffect12(() => {
     onChangePage?.(currentPage);
   }, [onChangePage, currentPage]);
-  useEffect11(() => {
+  useEffect12(() => {
     onChangeFilter?.(filterData);
   }, [onChangeFilter, filterData]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!memoizeFilters) return;
     if (!name) return;
     localStorage.setItem(
@@ -6178,7 +6180,7 @@ var TableComponent = forwardRef15(function Table({
       })
     );
   }, [memoizeFilters, name, filterData]);
-  useEffect11(() => {
+  useEffect12(() => {
     onChangeFilterDataValue?.(dataAfterFilter);
   }, [onChangeFilterDataValue, dataAfterFilter]);
   useImperativeHandle2(
@@ -6450,7 +6452,7 @@ var Table2 = memo23(TableComponent);
 var Table_default = Table2;
 
 // src/components/Tooltip.tsx
-import { memo as memo24, useCallback as useCallback15, useRef as useRef7, useState as useState12, useEffect as useEffect12, forwardRef as forwardRef16, useImperativeHandle as useImperativeHandle3, useMemo as useMemo10 } from "react";
+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";
@@ -6673,7 +6675,7 @@ var TooltipComponent = forwardRef16(function Tooltip({
     },
     [trigger, isOpen, closeTooltip]
   );
-  useEffect12(() => {
+  useEffect13(() => {
     if (trigger === "click") {
       document.addEventListener("mousedown", onClickOutside);
       return () => {
@@ -6681,7 +6683,7 @@ var TooltipComponent = forwardRef16(function Tooltip({
       };
     }
   }, [trigger, onClickOutside]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!disabled) return;
     closeTooltip();
   }, [disabled]);
@@ -6844,7 +6846,7 @@ Tooltip2.sectionTitle = TooltipComponent.sectionTitle;
 var Tooltip_default = Tooltip2;
 
 // src/components/Tabs.tsx
-import { forwardRef as forwardRef17, memo as memo25, useCallback as useCallback16, useEffect as useEffect13, useImperativeHandle as useImperativeHandle4, useMemo as useMemo11, useRef as useRef8, useState as useState13 } from "react";
+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";
 var tabBottomLineWidth = 2;
@@ -6893,7 +6895,7 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
     });
     return spacing;
   }, [selectedTab, tabs, tabsGap]);
-  useEffect13(() => {
+  useEffect14(() => {
     const timeout = setTimeout(() => {
       setRerenderState(Math.random());
       firstRenderPassedRef.current = true;
@@ -6902,7 +6904,7 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
       clearTimeout(timeout);
     };
   }, []);
-  useEffect13(() => {
+  useEffect14(() => {
     componentsState.tabs.setTabGroups((oldValue) => {
       const thisTabGroup = oldValue.find((item) => item.name === (name ?? defaultTabName));
       if (thisTabGroup) {
@@ -6923,13 +6925,13 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
       }
     });
   }, [selectedTab, name]);
-  useEffect13(() => {
+  useEffect14(() => {
     tabsRef.current[selectedTab]?.scrollIntoView({
       behavior: firstRenderPassedRef.current ? "smooth" : void 0,
       block: "nearest"
     });
   }, [selectedTab]);
-  useEffect13(() => {
+  useEffect14(() => {
     return () => {
       componentsState.tabs.setTabGroups(
         (oldValue) => oldValue.filter((item) => item.name !== (name ?? defaultTabName))
@@ -7021,7 +7023,7 @@ TabsComponent.content = function Content({ tab, tabWithDot, tabsGroupName, isIni
     () => componentsState.tabs.tabGroups.find((item) => item.name === (tabsGroupName ?? defaultTabName)),
     [componentsState.tabs, tabsGroupName]
   );
-  useEffect13(() => {
+  useEffect14(() => {
     if (tabWithDot) {
       componentsState.tabs.setTabsWithDots?.((oldValue) => oldValue.includes(tab) ? oldValue : [...oldValue, tab]);
     } else {
@@ -7037,8 +7039,8 @@ Tabs2.content = TabsComponent.content;
 var Tabs_default = Tabs2;
 
 // src/components/Foldable.tsx
-import { forwardRef as forwardRef18, memo as memo26, useCallback as useCallback17, useEffect as useEffect14, useImperativeHandle as useImperativeHandle5, useRef as useRef9, useState as useState14 } from "react";
-import { useBooleanState as useBooleanState6, useTheme as useTheme28 } from "react-better-core";
+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";
 var animationDurationClose = 0.15;
 var animationDurationOpen = animationDurationClose * 2;
@@ -7063,7 +7065,7 @@ var FoldableComponent = forwardRef18(function Foldable({
 }, ref) {
   const theme2 = useTheme28();
   const bodyRef = useRef9(null);
-  const [internalIsOpen, setInternalIsOpen] = useBooleanState6(defaultOpen);
+  const [internalIsOpen, setInternalIsOpen] = useBooleanState7(defaultOpen);
   const [bodyVirtualHeight, setBodyVirtualHeight] = useState14();
   const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
   const open = useCallback17(() => {
@@ -7078,7 +7080,7 @@ var FoldableComponent = forwardRef18(function Foldable({
     if (controlledIsOpen === void 0) setInternalIsOpen.toggle();
     onOpenChange?.(!isOpen);
   }, [controlledIsOpen, isOpen, onOpenChange]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!bodyRef.current) return;
     const body = bodyRef.current;
     setBodyVirtualHeight(body.scrollHeight * 2);
@@ -7089,7 +7091,7 @@ var FoldableComponent = forwardRef18(function Foldable({
       clearTimeout(timeout);
     };
   }, [isOpen]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!isOpen) return;
     if (!bodyRef.current) return;
     const observer = new ResizeObserver(() => {
@@ -7193,11 +7195,11 @@ Foldable2.box = FoldableComponent.box;
 var Foldable_default = Foldable2;
 
 // src/components/SideMenu.tsx
-import { createContext as createContext2, memo as memo27, useCallback as useCallback18, useContext as useContext2, useEffect as useEffect15, useMemo as useMemo12, useState as useState15 } from "react";
+import { createContext as createContext2, memo as memo27, useCallback as useCallback18, useContext as useContext2, useEffect as useEffect16, useMemo as useMemo12, useState as useState15 } from "react";
 import {
   lightenColor as lightenColor3,
   useBetterCoreContext as useBetterCoreContext10,
-  useBooleanState as useBooleanState7,
+  useBooleanState as useBooleanState8,
   useTheme as useTheme29
 } from "react-better-core";
 import { Fragment as Fragment8, jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
@@ -7224,7 +7226,7 @@ var MenuItemComponent = memo27(function MenuItemComponent2({ item, backgroundCol
   const { components, sideMenuIsCollapsed, setSideMenuIsCollapsed } = useBetterHtmlContextInternal();
   const { colorTheme } = useBetterCoreContext10();
   const { activeItem, setActiveItem } = useSideMenuContext();
-  const [isOpened, setIsOpened] = useBooleanState7();
+  const [isOpened, setIsOpened] = useBooleanState8();
   const isCollapsed = sideMenuIsCollapsed && !mediaQuery.size1000;
   const onClickElement = useCallback18(() => {
     if (item.disabled) return;
@@ -7303,7 +7305,7 @@ var MenuItemComponent = memo27(function MenuItemComponent2({ item, backgroundCol
       )
     }
   );
-  useEffect15(() => {
+  useEffect16(() => {
     if (!item.href) return;
     const isActive2 = location.pathname === "/" ? location.pathname === item.href : location.pathname.startsWith(item.href) && item.href !== "/";
     if (!isActive2) return;
@@ -7314,14 +7316,14 @@ var MenuItemComponent = memo27(function MenuItemComponent2({ item, backgroundCol
       } : void 0
     );
   }, [location.pathname]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (!item.children) return;
     const toBeOpened = item.children.some(
       (child) => child.href ? location.pathname === "/" ? location.pathname === child.href : location.pathname.startsWith(child.href) && child.href !== "/" : false
     );
     setIsOpened.setState(toBeOpened);
   }, [item]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (!isCollapsed) return;
     setIsOpened.setFalse();
   }, [isCollapsed]);
@@ -7621,7 +7623,7 @@ SideMenuComponent.pageHolder = function SideMenuPageHolder({ outsideComponent, .
 SideMenuComponent.burgerButton = function BurgerButton() {
   const theme2 = useTheme29();
   const { sideMenuIsOpenMobile, setSideMenuIsOpenMobile } = useBetterHtmlContextInternal();
-  const [isHovered, setIsHovered] = useBooleanState7();
+  const [isHovered, setIsHovered] = useBooleanState8();
   const width = 2;
   return /* @__PURE__ */ jsxs23(
     Div_default,
@@ -7740,7 +7742,7 @@ export {
   sideMenuControls,
   useAlertControls,
   useBetterHtmlContext,
-  useBooleanState8 as useBooleanState,
+  useBooleanState9 as useBooleanState,
   useDebounceState3 as useDebounceState,
   useForm,
   useLoader2 as useLoader,