react-better-html 1.1.217 → 1.1.219

package/dist/index.mjs

@@ -14,20 +14,20 @@ 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 memo11, useCallback as useCallback5, useContext, useEffect as useEffect5, useMemo as useMemo3, useState as useState3 } 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 useTheme12,
+  useTheme as useTheme13,
   BetterCoreProvider,
-  useBetterCoreContext as useBetterCoreContext4
+  useBetterCoreContext as useBetterCoreContext5
 } from "react-better-core";
 import { createGlobalStyle } from "styled-components";
 
@@ -38,6 +38,9 @@ var appConfig = {
 var defaultAlertDuration = 2.3 * 1e3;
 var defaultSideMenuWidth = 300;
 
+// src/constants/theme.ts
+var theme = {};
+
 // src/constants/icons.ts
 var icons = {
   uploadCloud: {
@@ -116,13 +119,13 @@ var icons = {
 var assets = {};
 
 // src/components/alerts/AlertsHolder.tsx
-import { memo as memo10 } from "react";
-import { useTheme as useTheme11 } from "react-better-core";
+import { memo as memo11 } from "react";
+import { useTheme as useTheme12 } from "react-better-core";
 
 // src/components/Div.tsx
-import { forwardRef as forwardRef5, memo as memo5, useCallback as useCallback2 } from "react";
-import { useTheme as useTheme6 } from "react-better-core";
-import styled3 from "styled-components";
+import { forwardRef as forwardRef6, memo as memo6, useCallback as useCallback2 } from "react";
+import { useTheme as useTheme7 } from "react-better-core";
+import styled4 from "styled-components";
 
 // src/constants.ts
 var isMobileDevice = /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
@@ -804,7 +807,7 @@ var cssPropsToExclude = /* @__PURE__ */ new Set([
 
 // src/utils/hooks.ts
 function useComponentPropsGrouper(props, excludeStyleProps) {
-  const theme = useTheme();
+  const theme2 = useTheme();
   return useMemo(() => {
     const style = {};
     const hoverStyle = {};
@@ -831,8 +834,8 @@ function useComponentPropsGrouper(props, excludeStyleProps) {
       }
     }
     if (haveHover && !style.transition) {
-      style.transition = theme.styles.transition;
-      style.WebkitTransition = theme.styles.transition;
+      style.transition = theme2.styles.transition;
+      style.WebkitTransition = theme2.styles.transition;
     }
     return {
       style,
@@ -854,7 +857,7 @@ function useComponentPropsWithPrefix(props, prefix) {
   }, [props, prefix]);
 }
 function useComponentInputFieldDateProps(props, holderRef, disabled) {
-  const theme = useTheme();
+  const theme2 = useTheme();
   const [isOpen, setIsOpen] = useBooleanState();
   const [isOpenLate, setIsOpenLate] = useBooleanState();
   const [isFocused, setIsFocused] = useBooleanState();
@@ -885,13 +888,13 @@ function useComponentInputFieldDateProps(props, holderRef, disabled) {
   );
   const insideInputFieldComponentProps = useMemo(
     () => ({
-      border: `1px solid ${isFocused ? theme.colors.primary : theme.colors.border}`,
+      border: `1px solid ${isFocused ? theme2.colors.primary : theme2.colors.border}`,
       borderTop: "none",
       opacity: !isOpen ? 0 : void 0,
       pointerEvents: !isOpen ? "none" : void 0,
       transform: `translateY(${!isOpen ? -10 : 0}px)`,
       zIndex: 1e3,
-      transition: theme.styles.transition
+      transition: theme2.styles.transition
     }),
     [isOpen, isFocused]
   );
@@ -1311,8 +1314,8 @@ var TextComponent = forwardRef(function Text({ htmlContentTranslate, children, .
   );
 });
 TextComponent.unknown = forwardRef(function Unknown(props, ref) {
-  const theme = useTheme2();
-  return /* @__PURE__ */ jsx(TextComponent, { fontStyle: "italic", textAlign: "center", color: theme.colors.textSecondary, ref, ...props });
+  const theme2 = useTheme2();
+  return /* @__PURE__ */ jsx(TextComponent, { fontStyle: "italic", textAlign: "center", color: theme2.colors.textSecondary, ref, ...props });
 });
 TextComponent.oneLine = forwardRef(function OneLine(props, ref) {
   return /* @__PURE__ */ jsx(TextComponent, { textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden", ref, ...props });
@@ -1327,14 +1330,14 @@ import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var Divider_default = {
   vertical: memo2(
     forwardRef2(function Divider({ width = 1, backgroundColor, height, ...props }, ref) {
-      const theme = useTheme3();
+      const theme2 = useTheme3();
       return /* @__PURE__ */ jsx2(
         Div_default,
         {
           width,
           height: height ?? "100%",
           flexShrink: 0,
-          backgroundColor: backgroundColor ?? theme.colors.border,
+          backgroundColor: backgroundColor ?? theme2.colors.border,
           ...props,
           ref
         }
@@ -1343,19 +1346,19 @@ var Divider_default = {
   ),
   horizontal: memo2(
     forwardRef2(function Divider2({ width = 1, backgroundColor, text, textFontSize, textColor, ...props }, ref) {
-      const theme = useTheme3();
-      return /* @__PURE__ */ jsxs(Div_default.row, { width: "100%", alignItems: "center", gap: text ? theme.styles.space : void 0, ...props, ref, children: [
-        /* @__PURE__ */ jsx2(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme.colors.border }),
-        text && /* @__PURE__ */ jsx2(Text_default, { fontSize: textFontSize, color: textColor ?? theme.colors.textSecondary, children: text }),
-        /* @__PURE__ */ jsx2(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme.colors.border })
+      const theme2 = useTheme3();
+      return /* @__PURE__ */ jsxs(Div_default.row, { width: "100%", alignItems: "center", gap: text ? theme2.styles.space : void 0, ...props, ref, children: [
+        /* @__PURE__ */ jsx2(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme2.colors.border }),
+        text && /* @__PURE__ */ jsx2(Text_default, { fontSize: textFontSize, color: textColor ?? theme2.colors.textSecondary, children: text }),
+        /* @__PURE__ */ jsx2(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme2.colors.border })
       ] });
     })
   )
 };
 
 // src/components/PageHeader.tsx
-import { forwardRef as forwardRef4, memo as memo4 } from "react";
-import { useTheme as useTheme5 } from "react-better-core";
+import { forwardRef as forwardRef5, memo as memo5 } from "react";
+import { useTheme as useTheme6 } from "react-better-core";
 
 // src/components/Image.tsx
 import { forwardRef as forwardRef3, memo as memo3, useEffect as useEffect2 } from "react";
@@ -1401,19 +1404,19 @@ var Image = forwardRef3(function Image2({ name, src, ...props }, ref) {
   );
 });
 Image.profileImage = forwardRef3(function ProfileImage({ size = 40, letters, backgroundColor, ...props }, ref) {
-  const theme = useTheme4();
+  const theme2 = useTheme4();
   return letters ? /* @__PURE__ */ jsx3(
     Div_default.row,
     {
-      width: size,
-      height: size,
-      backgroundColor: backgroundColor ?? theme.colors.backgroundSecondary,
-      border: `solid 1px ${theme.colors.border}`,
+      backgroundColor: backgroundColor ?? theme2.colors.backgroundSecondary,
+      border: `solid 1px ${theme2.colors.border}`,
       borderRadius: 999,
       alignItems: "center",
       justifyContent: "center",
       ref,
       ...props,
+      width: size,
+      height: size,
       children: /* @__PURE__ */ jsx3(Text_default, { fontSize: size / 2.5, fontWeight: 700, children: letters.toUpperCase().slice(0, 2) })
     }
   ) : /* @__PURE__ */ jsx3(
@@ -1421,7 +1424,7 @@ Image.profileImage = forwardRef3(function ProfileImage({ size = 40, letters, bac
     {
       width: size,
       height: size,
-      border: `solid 1px ${theme.colors.border}`,
+      border: `solid 1px ${theme2.colors.border}`,
       borderRadius: 999,
       objectFit: "cover",
       ref,
@@ -1433,11 +1436,89 @@ var MemoizedImage = memo3(Image);
 MemoizedImage.profileImage = Image.profileImage;
 var Image_default = { Image: MemoizedImage }.Image;
 
+// src/components/Icon.tsx
+import { forwardRef as forwardRef4, memo as memo4, useEffect as useEffect3 } from "react";
+import { useBetterCoreContext as useBetterCoreContext2, useTheme as useTheme5 } from "react-better-core";
+import styled3 from "styled-components";
+import { jsx as jsx4 } from "react/jsx-runtime";
+import { createElement } from "react";
+var IconElement = styled3.svg.withConfig({
+  shouldForwardProp: (prop) => !["theme", "style", "hoverStyle", "hoverColor"].includes(prop)
+})`
+   ${(props) => props.style}
+
+   path {
+      ${(props) => props.hoverColor ? `transition: ${props.theme.styles.transition};` : ""}
+   }
+
+   &:hover {
+      path.react-better-html-icon-path-with-fill {
+         fill: ${(props) => props.hoverColor};
+      }
+
+      path.react-better-html-icon-path-with-stroke {
+         stroke: ${(props) => props.hoverColor};
+      }
+   }
+
+   &:hover {
+      ${(props) => props.hoverStyle}
+   }
+`;
+var Icon = forwardRef4(function Icon2({ name, size = 16, ...props }, ref) {
+  const theme2 = useTheme5();
+  const { icons: icons2 } = useBetterCoreContext2();
+  const { style, hoverStyle, restProps } = useComponentPropsGrouper(props);
+  const dataProps = useComponentPropsWithPrefix(restProps, "data");
+  const ariaProps = useComponentPropsWithPrefix(restProps, "aria");
+  const svgColor = props.color ?? theme2.colors.textPrimary;
+  const svgHoverColorColor = props.colorHover;
+  useEffect3(() => {
+    if (!icons2[name.toString()])
+      console.warn(
+        `The icon \`${name}\` you are trying to use does not exist. Make sure to add it to the \`icons\` object in \`<BetterHtmlProvider>\` config value prop.`
+      );
+  }, [icons2, name]);
+  return /* @__PURE__ */ jsx4(
+    IconElement,
+    {
+      width: size,
+      height: size,
+      viewBox: `0 0 ${icons2[name.toString()]?.width ?? 0} ${icons2[name.toString()]?.height ?? 0}`,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      theme: theme2,
+      hoverColor: svgHoverColorColor,
+      style,
+      hoverStyle,
+      ...restProps,
+      ...dataProps,
+      ...ariaProps,
+      ref,
+      children: icons2[name.toString()]?.paths.map((path) => /* @__PURE__ */ createElement(
+        "path",
+        {
+          ...path,
+          className: path.type === "fill" ? "react-better-html-icon-path-with-fill" : "react-better-html-icon-path-with-stroke",
+          fill: path.type === "fill" ? svgColor : void 0,
+          stroke: path.type === "stroke" ? svgColor : void 0,
+          key: path.d
+        }
+      ))
+    }
+  );
+});
+var MemoizedIcon = memo4(Icon);
+var Icon_default = { Icon: MemoizedIcon }.Icon;
+
 // src/components/PageHeader.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var PageHeaderComponent = forwardRef4(function PageHeader({
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var PageHeaderComponent = forwardRef5(function PageHeader({
+  icon,
+  image,
   imageUrl,
   imageSize = 60,
+  imageAzProfileImage,
   title,
   titleAs = "h1",
   titleColor,
@@ -1449,38 +1530,51 @@ var PageHeaderComponent = forwardRef4(function PageHeader({
   lightMode,
   marginBottom
 }, ref) {
-  const theme = useTheme5();
+  const theme2 = useTheme6();
   const { app } = useBetterHtmlContextInternal();
   const mediaQuery = useMediaQuery();
+  const ImageTag = imageAzProfileImage ? Image_default.profileImage : Image_default;
+  const readyImageSize = imageSize ?? (mediaQuery.size600 ? 46 : 60);
   return /* @__PURE__ */ jsxs2(
     Div_default.row,
     {
       alignItems: "center",
-      gap: theme.styles.space,
-      marginBottom: marginBottom ?? theme.styles.space * 2,
+      gap: theme2.styles.space,
+      marginBottom: marginBottom ?? theme2.styles.space * 2,
       ref,
       children: [
-        imageUrl && /* @__PURE__ */ jsx4(Image_default.profileImage, { src: imageUrl, size: imageSize ?? (mediaQuery.size600 ? 46 : 60) }),
+        icon && /* @__PURE__ */ jsx5(Icon_default, { name: icon, size: 20, flexShrink: 0 }),
+        (image || imageUrl) && /* @__PURE__ */ jsx5(
+          ImageTag,
+          {
+            name: image,
+            src: imageUrl,
+            width: readyImageSize,
+            height: readyImageSize,
+            size: readyImageSize,
+            flexShrink: 0
+          }
+        ),
         /* @__PURE__ */ jsxs2(
           Div_default.column,
           {
             alignItems: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : void 0,
             flex: 1,
-            gap: theme.styles.gap / 2,
+            gap: theme2.styles.gap / 2,
             children: [
               /* @__PURE__ */ jsxs2(
                 Div_default.row,
                 {
                   alignItems: "center",
                   justifyContent: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : void 0,
-                  gap: theme.styles.space,
+                  gap: theme2.styles.space,
                   children: [
-                    /* @__PURE__ */ jsx4(
+                    /* @__PURE__ */ jsx5(
                       Text_default,
                       {
                         as: titleAs,
                         textAlign,
-                        color: titleColor ?? (lightMode ? theme.colors.base : theme.colors.textPrimary),
+                        color: titleColor ?? (lightMode ? theme2.colors.base : theme2.colors.textPrimary),
                         children: title
                       }
                     ),
@@ -1488,12 +1582,12 @@ var PageHeaderComponent = forwardRef4(function PageHeader({
                   ]
                 }
               ),
-              description && /* @__PURE__ */ jsx4(
+              description && /* @__PURE__ */ jsx5(
                 Text_default,
                 {
                   maxWidth: !mediaQuery.size600 ? app.contentMaxWidth * 0.6 : void 0,
                   textAlign,
-                  color: descriptionColor ?? (lightMode ? theme.colors.base : theme.colors.textSecondary),
+                  color: descriptionColor ?? (lightMode ? theme2.colors.base : theme2.colors.textSecondary),
                   opacity: lightMode ? 0.7 : void 0,
                   children: description
                 }
@@ -1506,12 +1600,12 @@ var PageHeaderComponent = forwardRef4(function PageHeader({
     }
   );
 });
-var PageHeader2 = memo4(PageHeaderComponent);
+var PageHeader2 = memo5(PageHeaderComponent);
 var PageHeader_default = PageHeader2;
 
 // src/components/Div.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var DivStyledComponent = styled3.div.withConfig({
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var DivStyledComponent = styled4.div.withConfig({
   shouldForwardProp: (prop) => !["style", "hoverStyle"].includes(prop)
 })`
    ${(props) => props.style}
@@ -1520,7 +1614,7 @@ var DivStyledComponent = styled3.div.withConfig({
       ${(props) => props.hoverStyle}
    }
 `;
-var DivComponent = forwardRef5(function Div({
+var DivComponent = forwardRef6(function Div({
   as = "div",
   value,
   isTabAccessed,
@@ -1553,7 +1647,7 @@ var DivComponent = forwardRef5(function Div({
     },
     [onKeyDown, isTabAccessed]
   );
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     DivStyledComponent,
     {
       as,
@@ -1572,9 +1666,9 @@ var DivComponent = forwardRef5(function Div({
     }
   );
 });
-DivComponent.row = forwardRef5(function Row({ flexReverse, invertFlexDirection, ...props }, ref) {
+DivComponent.row = forwardRef6(function Row({ flexReverse, invertFlexDirection, ...props }, ref) {
   const reverseSuffix = flexReverse ? "-reverse" : "";
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     DivComponent,
     {
       display: "flex",
@@ -1584,9 +1678,9 @@ DivComponent.row = forwardRef5(function Row({ flexReverse, invertFlexDirection,
     }
   );
 });
-DivComponent.column = forwardRef5(function Column({ flexReverse, invertFlexDirection, ...props }, ref) {
+DivComponent.column = forwardRef6(function Column({ flexReverse, invertFlexDirection, ...props }, ref) {
   const reverseSuffix = flexReverse ? "-reverse" : "";
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     DivComponent,
     {
       display: "flex",
@@ -1596,10 +1690,10 @@ DivComponent.column = forwardRef5(function Column({ flexReverse, invertFlexDirec
     }
   );
 });
-DivComponent.grid = forwardRef5(function Grid(props, ref) {
-  return /* @__PURE__ */ jsx5(DivComponent, { display: "grid", ref, ...props });
+DivComponent.grid = forwardRef6(function Grid(props, ref) {
+  return /* @__PURE__ */ jsx6(DivComponent, { display: "grid", ref, ...props });
 });
-DivComponent.box = forwardRef5(function Box({
+DivComponent.box = forwardRef6(function Box({
   imageUrl,
   imageSize,
   title,
@@ -1616,20 +1710,20 @@ DivComponent.box = forwardRef5(function Box({
   children,
   ...props
 }, ref) {
-  const theme = useTheme6();
+  const theme2 = useTheme7();
   const withClick = props.onClick || props.onClickWithValue;
   return /* @__PURE__ */ jsxs3(
     DivComponent,
     {
-      color: isActive ? theme.colors.base : void 0,
-      backgroundColor: isActive ? theme.colors.primary : theme.colors.backgroundContent,
-      border: `1px solid ${isActive ? theme.colors.primary : theme.colors.border}`,
-      borderRadius: theme.styles.borderRadius,
-      borderColorHover: withClick && !isActive ? theme.colors.primary : void 0,
+      color: isActive ? theme2.colors.base : void 0,
+      backgroundColor: isActive ? theme2.colors.primary : theme2.colors.backgroundContent,
+      border: `1px solid ${isActive ? theme2.colors.primary : theme2.colors.border}`,
+      borderRadius: theme2.styles.borderRadius,
+      borderColorHover: withClick && !isActive ? theme2.colors.primary : void 0,
       filterHover: withClick && isActive ? "brightness(0.9)" : void 0,
       cursor: withClick ? "pointer" : void 0,
-      paddingBlock: title ? theme.styles.space : theme.styles.gap,
-      paddingInline: theme.styles.space,
+      paddingBlock: title ? theme2.styles.space : theme2.styles.gap,
+      paddingInline: theme2.styles.space,
       ref,
       ...props,
       children: [
@@ -1637,15 +1731,15 @@ DivComponent.box = forwardRef5(function Box({
           Div2,
           {
             backgroundColor: headerBackgroundColor,
-            borderTopLeftRadius: props.borderTopLeftRadius ?? props.borderRadius ?? theme.styles.borderRadius - 1,
-            borderTopRightRadius: props.borderTopRightRadius ?? props.borderRadius ?? theme.styles.borderRadius - 1,
-            marginInline: -theme.styles.space,
-            marginTop: -theme.styles.space,
-            marginBottom: theme.styles.space,
-            paddingInline: theme.styles.space,
-            paddingTop: theme.styles.space,
+            borderTopLeftRadius: props.borderTopLeftRadius ?? props.borderRadius ?? theme2.styles.borderRadius - 1,
+            borderTopRightRadius: props.borderTopRightRadius ?? props.borderRadius ?? theme2.styles.borderRadius - 1,
+            marginInline: -theme2.styles.space,
+            marginTop: -theme2.styles.space,
+            marginBottom: theme2.styles.space,
+            paddingInline: theme2.styles.space,
+            paddingTop: theme2.styles.space,
             children: [
-              /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsx6(
                 PageHeader_default,
                 {
                   imageUrl,
@@ -1659,10 +1753,10 @@ DivComponent.box = forwardRef5(function Box({
                   textAlign,
                   rightElement,
                   lightMode,
-                  marginBottom: theme.styles.space
+                  marginBottom: theme2.styles.space
                 }
               ),
-              /* @__PURE__ */ jsx5(Div2, { width: `calc(100% + ${theme.styles.space * 2}px)`, marginLeft: -theme.styles.space, children: /* @__PURE__ */ jsx5(Divider_default.horizontal, {}) })
+              /* @__PURE__ */ jsx6(Div2, { width: `calc(100% + ${theme2.styles.space * 2}px)`, marginLeft: -theme2.styles.space, children: /* @__PURE__ */ jsx6(Divider_default.horizontal, {}) })
             ]
           }
         ),
@@ -1671,7 +1765,7 @@ DivComponent.box = forwardRef5(function Box({
     }
   );
 });
-var Div2 = memo5(DivComponent);
+var Div2 = memo6(DivComponent);
 Div2.row = DivComponent.row;
 Div2.column = DivComponent.column;
 Div2.grid = DivComponent.grid;
@@ -1679,15 +1773,16 @@ Div2.box = DivComponent.box;
 var Div_default = Div2;
 
 // src/components/alerts/Alert.tsx
-import { memo as memo9, useCallback as useCallback4, useEffect as useEffect4, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
-import { useTheme as useTheme10 } from "react-better-core";
-import styled7 from "styled-components";
+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";
 
 // src/plugins/alerts.ts
 var defaultAlertsPluginOptions = {
   position: "bottom",
   align: "right",
   defaultDuration: "auto",
+  defaultDisplay: {},
   maxWidth: 460,
   withLoaderBar: true,
   withCloseButton: true
@@ -1738,81 +1833,6 @@ var localStoragePlugin = (options) => ({
   })
 });
 
-// src/components/Icon.tsx
-import { forwardRef as forwardRef6, memo as memo6, useEffect as useEffect3 } from "react";
-import { useBetterCoreContext as useBetterCoreContext2, useTheme as useTheme7 } from "react-better-core";
-import styled4 from "styled-components";
-import { jsx as jsx6 } from "react/jsx-runtime";
-import { createElement } from "react";
-var IconElement = styled4.svg.withConfig({
-  shouldForwardProp: (prop) => !["theme", "style", "hoverStyle", "hoverColor"].includes(prop)
-})`
-   ${(props) => props.style}
-
-   path {
-      ${(props) => props.hoverColor ? `transition: ${props.theme.styles.transition};` : ""}
-   }
-
-   &:hover {
-      path.react-better-html-icon-path-with-fill {
-         fill: ${(props) => props.hoverColor};
-      }
-
-      path.react-better-html-icon-path-with-stroke {
-         stroke: ${(props) => props.hoverColor};
-      }
-   }
-
-   &:hover {
-      ${(props) => props.hoverStyle}
-   }
-`;
-var Icon = forwardRef6(function Icon2({ name, size = 16, ...props }, ref) {
-  const theme = useTheme7();
-  const { icons: icons2 } = useBetterCoreContext2();
-  const { style, hoverStyle, restProps } = useComponentPropsGrouper(props);
-  const dataProps = useComponentPropsWithPrefix(restProps, "data");
-  const ariaProps = useComponentPropsWithPrefix(restProps, "aria");
-  const svgColor = props.color ?? theme.colors.textPrimary;
-  const svgHoverColorColor = props.colorHover;
-  useEffect3(() => {
-    if (!icons2[name.toString()])
-      console.warn(
-        `The icon \`${name}\` you are trying to use does not exist. Make sure to add it to the \`icons\` object in \`<BetterHtmlProvider>\` config value prop.`
-      );
-  }, [icons2, name]);
-  return /* @__PURE__ */ jsx6(
-    IconElement,
-    {
-      width: size,
-      height: size,
-      viewBox: `0 0 ${icons2[name.toString()]?.width ?? 0} ${icons2[name.toString()]?.height ?? 0}`,
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      theme,
-      hoverColor: svgHoverColorColor,
-      style,
-      hoverStyle,
-      ...restProps,
-      ...dataProps,
-      ...ariaProps,
-      ref,
-      children: icons2[name.toString()]?.paths.map((path) => /* @__PURE__ */ createElement(
-        "path",
-        {
-          ...path,
-          className: path.type === "fill" ? "react-better-html-icon-path-with-fill" : "react-better-html-icon-path-with-stroke",
-          fill: path.type === "fill" ? svgColor : void 0,
-          stroke: path.type === "stroke" ? svgColor : void 0,
-          key: path.d
-        }
-      ))
-    }
-  );
-});
-var MemoizedIcon = memo6(Icon);
-var Icon_default = { Icon: MemoizedIcon }.Icon;
-
 // src/components/Button.tsx
 import { memo as memo8, useCallback as useCallback3 } from "react";
 import {
@@ -1847,8 +1867,8 @@ var LoaderComponent = function Loader({
   disabled,
   ...props
 }) {
-  const theme = useTheme8();
-  const readyColor = color ?? theme.colors.textPrimary;
+  const theme2 = useTheme8();
+  const readyColor = color ?? theme2.colors.textPrimary;
   const readyWidth = width ?? size / 3;
   const mask = `radial-gradient(farthest-side, #0000 calc(100% - ${readyWidth}px), #000 0)`;
   return /* @__PURE__ */ jsx7(StyledDiv, { children: /* @__PURE__ */ jsx7(
@@ -1867,17 +1887,17 @@ var LoaderComponent = function Loader({
   ) });
 };
 LoaderComponent.box = function Box2({ text = "Loading...", size = 20, ...props }) {
-  const theme = useTheme8();
-  return /* @__PURE__ */ jsxs4(Div_default.column, { width: "100%", alignItems: "center", gap: theme.styles.gap, children: [
+  const theme2 = useTheme8();
+  return /* @__PURE__ */ jsxs4(Div_default.column, { width: "100%", alignItems: "center", gap: theme2.styles.gap, children: [
     /* @__PURE__ */ jsx7(Loader2, { size, ...props }),
-    text && /* @__PURE__ */ jsx7(Text_default, { textAlign: "center", color: props.color ?? theme.colors.textSecondary, children: text })
+    text && /* @__PURE__ */ jsx7(Text_default, { textAlign: "center", color: props.color ?? theme2.colors.textSecondary, children: text })
   ] });
 };
 LoaderComponent.text = function LoaderText({ text = "Loading...", size = 14, ...props }) {
-  const theme = useTheme8();
-  return /* @__PURE__ */ jsxs4(Div_default.row, { alignItems: "center", gap: theme.styles.gap, children: [
+  const theme2 = useTheme8();
+  return /* @__PURE__ */ jsxs4(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
     /* @__PURE__ */ jsx7(Loader2, { size, ...props }),
-    text && /* @__PURE__ */ jsx7(Text_default, { textAlign: "center", color: props.color ?? theme.colors.textSecondary, children: text })
+    text && /* @__PURE__ */ jsx7(Text_default, { textAlign: "center", color: props.color ?? theme2.colors.textSecondary, children: text })
   ] });
 };
 var Loader2 = memo7(LoaderComponent);
@@ -1961,7 +1981,7 @@ var ButtonComponent = function Button({
   onClickWithValue,
   ...props
 }) {
-  const theme = useTheme9();
+  const theme2 = useTheme9();
   const isLoadingHook = useLoader(loaderName);
   const { components } = useBetterHtmlContextInternal();
   const { colorTheme } = useBetterCoreContext3();
@@ -1983,7 +2003,7 @@ var ButtonComponent = function Button({
     Icon_default,
     {
       name: icon,
-      color: iconColor ?? props.color ?? theme.colors.base,
+      color: iconColor ?? props.color ?? theme2.colors.base,
       size: iconSize ?? parseInt(style.fontSize?.toString() ?? "16")
     }
   ) }) : void 0;
@@ -1991,7 +2011,7 @@ var ButtonComponent = function Button({
     Image_default,
     {
       name: image,
-      color: iconColor ?? props.color ?? theme.colors.base,
+      color: iconColor ?? props.color ?? theme2.colors.base,
       width: imageWidth ?? parseInt(style.fontSize?.toString() ?? "16"),
       height: imageHeight
     }
@@ -2002,7 +2022,7 @@ var ButtonComponent = function Button({
     ButtonElement,
     {
       as: href ? linkComponentTag : buttonComponentTag,
-      theme,
+      theme: theme2,
       colorTheme,
       isSmall,
       withText: text !== void 0,
@@ -2028,7 +2048,7 @@ var ButtonComponent = function Button({
             gap: 10,
             pointerEvents: "none",
             opacity: isLoadingElement ? 0 : 1,
-            transition: theme.styles.transition,
+            transition: theme2.styles.transition,
             children: [
               iconPosition === "left" && iconComponent,
               imagePosition === "left" && imageComponent,
@@ -2050,11 +2070,11 @@ var ButtonComponent = function Button({
             alignItems: "center",
             justifyContent: "center",
             opacity: isLoadingElement ? 1 : 0,
-            transition: theme.styles.transition,
+            transition: theme2.styles.transition,
             children: /* @__PURE__ */ jsx8(
               Loader_default,
               {
-                color: props.color ?? theme.colors.base,
+                color: props.color ?? theme2.colors.base,
                 size: loaderSize,
                 disabled: !isLoadingElement
               }
@@ -2066,43 +2086,43 @@ var ButtonComponent = function Button({
   );
 };
 ButtonComponent.secondary = function Secondary({ className, ...props }) {
-  const theme = useTheme9();
+  const theme2 = useTheme9();
   const betterHtmlContext2 = useBetterHtmlContextInternal();
   return /* @__PURE__ */ jsx8(
     ButtonComponent,
     {
       ...betterHtmlContext2.components.button?.style?.secondary,
       className: `secondary${className ? ` ${className}` : ""}`,
-      color: theme.colors.textPrimary,
+      color: theme2.colors.textPrimary,
       ...props
     }
   );
 };
 ButtonComponent.destructive = function Destructive(props) {
-  const theme = useTheme9();
+  const theme2 = useTheme9();
   const betterHtmlContext2 = useBetterHtmlContextInternal();
   return /* @__PURE__ */ jsx8(
     ButtonComponent,
     {
       ...betterHtmlContext2.components.button?.style?.destructive,
-      backgroundColor: theme.colors.error,
-      color: theme.colors.base,
+      backgroundColor: theme2.colors.error,
+      color: theme2.colors.base,
       ...props
     }
   );
 };
 ButtonComponent.icon = function Icon3({ size = 16, backgroundButtonColor, ...props }) {
-  const theme = useTheme9();
+  const theme2 = useTheme9();
   const betterHtmlContext2 = useBetterHtmlContextInternal();
-  const buttonSize = size + theme.styles.space;
-  const backgroundButtonColorReady = backgroundButtonColor ?? theme.colors.textPrimary;
+  const buttonSize = size + theme2.styles.space;
+  const backgroundButtonColorReady = backgroundButtonColor ?? theme2.colors.textPrimary;
   return /* @__PURE__ */ jsx8(
     ButtonComponent,
     {
       ...betterHtmlContext2.components.button?.style?.icon,
       width: buttonSize,
       height: buttonSize,
-      color: theme.colors.textPrimary,
+      color: theme2.colors.textPrimary,
       backgroundColor: backgroundButtonColorReady + "00",
       backgroundImage: "none",
       backgroundColorHover: backgroundButtonColorReady + "20",
@@ -2146,104 +2166,442 @@ Button2.icon = ButtonComponent.icon;
 Button2.upload = ButtonComponent.upload;
 var Button_default = Button2;
 
-// src/components/alerts/Alert.tsx
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
-var StyledDiv2 = styled7.div.withConfig({
-  shouldForwardProp: (prop) => !["theme"].includes(prop)
+// src/components/Modal.tsx
+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";
+import { Fragment, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var DialogStylesElement = styled7.dialog.withConfig({
+  shouldForwardProp: (prop) => !["theme", "colorTheme", "opacity"].includes(prop)
 })`
-   @keyframes fadeInFromLeft {
-      from {
-         opacity: 0;
-         transform: translateX(-${(props) => props.theme.styles.space}px);
-      }
-      to {
-         opacity: 1;
-         transform: translateX(0px);
-      }
-   }
-
-   @keyframes fadeInFromRight {
-      from {
-         opacity: 0;
-         transform: translateX(${(props) => props.theme.styles.space}px);
-      }
-      to {
-         opacity: 1;
-         transform: translateX(0px);
-      }
-   }
+   width: 100%;
+   max-width: none;
+   height: 100%;
+   max-height: none;
+   color: ${(props) => props.theme.colors.textPrimary};
+   border: none;
+   outline: none;
+   background-color: transparent;
+   margin: auto auto;
+   padding-inline: ${(props) => props.theme.styles.gap}px;
+   opacity: ${(props) => props.opacity};
+   transition: ${(props) => props.theme.styles.transition};
 
-   @keyframes fadeInFromTop {
-      from {
-         opacity: 0;
-         transform: translateY(-${(props) => props.theme.styles.space}px);
-      }
-      to {
-         opacity: 1;
-         transform: translateX(0px);
-      }
+   &::backdrop {
+      background-color: ${(props) => props.colorTheme === "light" ? "#000000a0" : "#222222e0"};
+      opacity: ${(props) => props.opacity};
+      transition: ${(props) => props.theme.styles.transition};
    }
 
-   @keyframes fadeInFromBottom {
+   @keyframes fadeInAnimation {
       from {
-         opacity: 0;
          transform: translateY(${(props) => props.theme.styles.space}px);
       }
       to {
-         opacity: 1;
-         transform: translateY(0px);
-      }
-   }
-
-   @keyframes fadeOutToLeft {
-      from {
-         opacity: 1;
-         transform: translateX(0px);
-      }
-      to {
-         opacity: 0;
-         transform: translateX(-${(props) => props.theme.styles.space}px);
-      }
-   }
-
-   @keyframes fadeOutToRight {
-      from {
-         opacity: 1;
-         transform: translateX(0px);
-      }
-      to {
-         opacity: 0;
-         transform: translateX(${(props) => props.theme.styles.space}px);
-      }
-   }
-
-   @keyframes fadeOutToTop {
-      from {
-         opacity: 1;
          transform: translateY(0px);
       }
-      to {
-         opacity: 0;
-         transform: translateY(-${(props) => props.theme.styles.space}px);
-      }
    }
 
-   @keyframes fadeOutToBottom {
+   @keyframes fadeOutAnimation {
       from {
-         opacity: 1;
          transform: translateY(0px);
       }
       to {
-         opacity: 0;
          transform: translateY(${(props) => props.theme.styles.space}px);
       }
    }
 `;
-var minWidth = 250;
-var updateInterval = 20;
-var getAnimationInName = (position) => ({
-  left: "fadeInFromLeft",
-  right: "fadeInFromRight",
+var ModalComponent = forwardRef7(function Modal({
+  maxWidth,
+  icon,
+  title,
+  titleColor,
+  description,
+  descriptionColor,
+  headerTextAlign,
+  headerBackgroundColor,
+  backgroundColor,
+  name,
+  overflow,
+  withoutCloseButton,
+  defaultIsOpened = false,
+  onOpen,
+  onClose,
+  children
+}, ref) {
+  const reactRouterDomPlugin2 = usePlugin("react-router-dom");
+  const urlQuery = reactRouterDomPlugin2 ? useUrlQuery() : void 0;
+  const theme2 = useTheme10();
+  const { app } = useBetterHtmlContextInternal();
+  const { colorTheme } = useBetterCoreContext4();
+  const dialogRef = useRef2(null);
+  const [isOpened, setIsOpened] = useBooleanState2(false);
+  const [isOpenedLate, setIsOpenedLate] = useBooleanState2(false);
+  const onClickOpen = useCallback4(() => {
+    dialogRef.current?.showModal();
+    setIsOpened.setTrue();
+    setIsOpenedLate.setTrue();
+    if (urlQuery && name) {
+      urlQuery.setQuery(
+        {
+          [`${name}-modal`]: "opened"
+        },
+        false
+      );
+    }
+    onOpen?.();
+  }, [onOpen, urlQuery, name]);
+  const onClickClose = useCallback4(() => {
+    setIsOpened.setFalse();
+    onClose?.();
+    if (urlQuery && name) urlQuery.removeQuery(`${name}-modal`, false);
+    setTimeout(() => {
+      dialogRef.current?.close();
+      setIsOpenedLate.setFalse();
+    }, 0.2 * 1e3);
+  }, [onClose, urlQuery, name]);
+  const onKeyDown = useCallback4(
+    (event) => {
+      if (event.key === "Escape") {
+        if (!withoutCloseButton) return;
+        event.preventDefault();
+      }
+    },
+    [withoutCloseButton]
+  );
+  useEffect4(() => {
+    if (!defaultIsOpened) return;
+    onClickOpen();
+  }, []);
+  useImperativeHandle(
+    ref,
+    () => {
+      return {
+        open: onClickOpen,
+        close: onClickClose,
+        isOpened
+      };
+    },
+    [onClickOpen, onClickClose, isOpened]
+  );
+  const headerVertical = headerTextAlign === "center";
+  return createPortal(
+    /* @__PURE__ */ jsx9(
+      DialogStylesElement,
+      {
+        theme: theme2,
+        colorTheme,
+        opacity: !isOpened ? 0 : 1,
+        onClose: onClickClose,
+        onKeyDown,
+        ref: dialogRef,
+        children: isOpenedLate ? /* @__PURE__ */ jsx9(
+          Div_default.column,
+          {
+            position: "relative",
+            width: "100%",
+            maxWidth: maxWidth ?? app.contentMaxWidth / 1.3,
+            minHeight: `calc(100% - ${theme2.styles.space * 2}px)`,
+            alignItems: "center",
+            justifyContent: "center",
+            marginBlock: theme2.styles.space,
+            marginInline: "auto",
+            transform: `translateY(${theme2.styles.space}px)`,
+            transition: theme2.styles.transition,
+            animation: isOpened ? "fadeInAnimation 0.2s ease forwards" : "fadeOutAnimation 0.2s ease forwards",
+            children: /* @__PURE__ */ jsxs6(
+              Div_default,
+              {
+                position: "relative",
+                width: "100%",
+                minHeight: 32 + theme2.styles.space * 2,
+                backgroundColor: backgroundColor ?? theme2.colors.backgroundBase,
+                borderRadius: theme2.styles.borderRadius * 2,
+                padding: !title ? theme2.styles.space : void 0,
+                overflow,
+                children: [
+                  title ? /* @__PURE__ */ jsxs6(Fragment, { children: [
+                    /* @__PURE__ */ jsxs6(
+                      Div_default.row,
+                      {
+                        alignItems: "center",
+                        gap: theme2.styles.gap,
+                        backgroundColor: headerBackgroundColor,
+                        borderTopLeftRadius: theme2.styles.borderRadius * 2 - 1,
+                        borderTopRightRadius: theme2.styles.borderRadius * 2 - 1,
+                        paddingInline: theme2.styles.space,
+                        paddingBlock: theme2.styles.space,
+                        transition: theme2.styles.transition,
+                        children: [
+                          /* @__PURE__ */ jsxs6(
+                            Div_default.row,
+                            {
+                              flex: 1,
+                              alignItems: "center",
+                              gap: headerVertical ? theme2.styles.space * 2 : theme2.styles.space,
+                              invertFlexDirection: headerVertical,
+                              children: [
+                                icon && (headerVertical ? /* @__PURE__ */ jsx9(
+                                  Div_default.row,
+                                  {
+                                    width: 76,
+                                    height: 76,
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    backgroundColor: titleColor ?? theme2.colors.textPrimary,
+                                    borderRadius: 999,
+                                    children: /* @__PURE__ */ jsx9(
+                                      Icon_default,
+                                      {
+                                        name: icon,
+                                        size: 36,
+                                        color: headerBackgroundColor ?? theme2.colors.backgroundBase,
+                                        flexShrink: 0
+                                      }
+                                    )
+                                  }
+                                ) : /* @__PURE__ */ jsx9(
+                                  Icon_default,
+                                  {
+                                    name: icon,
+                                    size: 24,
+                                    color: titleColor ?? theme2.colors.textPrimary,
+                                    flexShrink: 0
+                                  }
+                                )),
+                                /* @__PURE__ */ jsxs6(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
+                                  /* @__PURE__ */ jsx9(
+                                    Text_default,
+                                    {
+                                      as: "h1",
+                                      textAlign: headerTextAlign,
+                                      color: titleColor ?? theme2.colors.textPrimary,
+                                      transition: theme2.styles.transition,
+                                      children: title
+                                    }
+                                  ),
+                                  description && /* @__PURE__ */ jsx9(
+                                    Text_default,
+                                    {
+                                      textAlign: headerTextAlign,
+                                      color: descriptionColor ?? theme2.colors.textSecondary,
+                                      transition: theme2.styles.transition,
+                                      children: description
+                                    }
+                                  )
+                                ] })
+                              ]
+                            }
+                          ),
+                          !withoutCloseButton && /* @__PURE__ */ jsx9(
+                            Button_default.icon,
+                            {
+                              icon: "XMark",
+                              marginTop: 1,
+                              iconColor: titleColor,
+                              onClick: onClickClose,
+                              transition: theme2.styles.transition,
+                              zIndex: 10
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx9(Divider_default.horizontal, {})
+                  ] }) : /* @__PURE__ */ jsx9(Fragment, { children: !withoutCloseButton && /* @__PURE__ */ jsx9(Div_default, { position: "absolute", top: theme2.styles.space, right: theme2.styles.space, zIndex: 10, children: /* @__PURE__ */ jsx9(Button_default.icon, { icon: "XMark", iconColor: titleColor, onClick: onClickClose }) }) }),
+                  /* @__PURE__ */ jsx9(Div_default, { padding: title ? theme2.styles.space : void 0, children })
+                ]
+              }
+            )
+          }
+        ) : void 0
+      }
+    ),
+    document.body
+  );
+});
+ModalComponent.confirmation = forwardRef7(function Confirmation({ message, continueButtonText = "Continue", continueButtonLoaderName, onContinue, onCancel, ...props }, ref) {
+  const theme2 = useTheme10();
+  const modalRef = useRef2(null);
+  const onCancelElement = useCallback4(() => {
+    onCancel?.();
+    modalRef.current?.close();
+  }, [onCancel]);
+  const onContinueElement = useCallback4(() => {
+    onContinue?.();
+    modalRef.current?.close();
+  }, [onContinue]);
+  useImperativeHandle(ref, () => modalRef.current, []);
+  return /* @__PURE__ */ jsxs6(ModalComponent, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
+    /* @__PURE__ */ jsx9(Text_default, { color: theme2.colors.textSecondary, children: message ?? "Do you really want to continue? This action may be irreversible." }),
+    /* @__PURE__ */ jsxs6(
+      Div_default.row,
+      {
+        alignItems: "center",
+        justifyContent: "flex-end",
+        gap: theme2.styles.gap,
+        marginTop: theme2.styles.space * 2,
+        children: [
+          /* @__PURE__ */ jsx9(Button_default.secondary, { text: "Cancel", onClick: onCancelElement }),
+          /* @__PURE__ */ jsx9(Button_default, { text: continueButtonText, loaderName: continueButtonLoaderName, onClick: onContinueElement })
+        ]
+      }
+    )
+  ] });
+});
+ModalComponent.destructive = forwardRef7(function Destructive2({
+  message,
+  deleteButtonText = "Delete",
+  deleteButtonIconName = "trash",
+  deleteButtonLoaderName,
+  onDelete,
+  onCancel,
+  ...props
+}, ref) {
+  const theme2 = useTheme10();
+  const modalRef = useRef2(null);
+  const onCancelElement = useCallback4(() => {
+    onCancel?.();
+    modalRef.current?.close();
+  }, [onCancel]);
+  const onDeleteElement = useCallback4(() => {
+    onDelete?.();
+    modalRef.current?.close();
+  }, [onDelete]);
+  useImperativeHandle(ref, () => modalRef.current, []);
+  return /* @__PURE__ */ jsxs6(ModalComponent, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
+    /* @__PURE__ */ jsx9(Text_default, { color: theme2.colors.textSecondary, children: message ?? "Do you really want to continue with the deleting of the item? This action may be irreversible." }),
+    /* @__PURE__ */ jsxs6(
+      Div_default.row,
+      {
+        alignItems: "center",
+        justifyContent: "flex-end",
+        gap: theme2.styles.gap,
+        marginTop: theme2.styles.space * 2,
+        children: [
+          /* @__PURE__ */ jsx9(Button_default.secondary, { text: "Cancel", onClick: onCancelElement }),
+          /* @__PURE__ */ jsx9(
+            Button_default.destructive,
+            {
+              icon: deleteButtonIconName,
+              text: deleteButtonText,
+              loaderName: deleteButtonLoaderName,
+              onClick: onDeleteElement
+            }
+          )
+        ]
+      }
+    )
+  ] });
+});
+var Modal2 = memo9(ModalComponent);
+Modal2.confirmation = ModalComponent.confirmation;
+Modal2.destructive = ModalComponent.destructive;
+var Modal_default = Modal2;
+
+// src/components/alerts/Alert.tsx
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var StyledDiv2 = styled8.div.withConfig({
+  shouldForwardProp: (prop) => !["theme"].includes(prop)
+})`
+   @keyframes fadeInFromLeft {
+      from {
+         opacity: 0;
+         transform: translateX(-${(props) => props.theme.styles.space}px);
+      }
+      to {
+         opacity: 1;
+         transform: translateX(0px);
+      }
+   }
+
+   @keyframes fadeInFromRight {
+      from {
+         opacity: 0;
+         transform: translateX(${(props) => props.theme.styles.space}px);
+      }
+      to {
+         opacity: 1;
+         transform: translateX(0px);
+      }
+   }
+
+   @keyframes fadeInFromTop {
+      from {
+         opacity: 0;
+         transform: translateY(-${(props) => props.theme.styles.space}px);
+      }
+      to {
+         opacity: 1;
+         transform: translateX(0px);
+      }
+   }
+
+   @keyframes fadeInFromBottom {
+      from {
+         opacity: 0;
+         transform: translateY(${(props) => props.theme.styles.space}px);
+      }
+      to {
+         opacity: 1;
+         transform: translateY(0px);
+      }
+   }
+
+   @keyframes fadeOutToLeft {
+      from {
+         opacity: 1;
+         transform: translateX(0px);
+      }
+      to {
+         opacity: 0;
+         transform: translateX(-${(props) => props.theme.styles.space}px);
+      }
+   }
+
+   @keyframes fadeOutToRight {
+      from {
+         opacity: 1;
+         transform: translateX(0px);
+      }
+      to {
+         opacity: 0;
+         transform: translateX(${(props) => props.theme.styles.space}px);
+      }
+   }
+
+   @keyframes fadeOutToTop {
+      from {
+         opacity: 1;
+         transform: translateY(0px);
+      }
+      to {
+         opacity: 0;
+         transform: translateY(-${(props) => props.theme.styles.space}px);
+      }
+   }
+
+   @keyframes fadeOutToBottom {
+      from {
+         opacity: 1;
+         transform: translateY(0px);
+      }
+      to {
+         opacity: 0;
+         transform: translateY(${(props) => props.theme.styles.space}px);
+      }
+   }
+`;
+var minWidth = 250;
+var updateInterval = 20;
+var getAnimationInName = (position) => ({
+  left: "fadeInFromLeft",
+  right: "fadeInFromRight",
   center: position === "top" ? "fadeInFromTop" : "fadeInFromBottom"
 });
 var getAnimationOutName = (position) => ({
@@ -2260,22 +2618,24 @@ var getAlertDurationFromAuto = (duration, alert) => {
   return duration;
 };
 function Alert2({ alert }) {
-  const theme = useTheme10();
+  const theme2 = useTheme11();
   const alertControls2 = useAlertControls();
   const alertsPlugin2 = usePlugin("alerts");
   const pluginConfig = alertsPlugin2?.getConfig() ?? {};
+  const modalRef = useRef3(null);
   const defaultAlertDurationNumber = getAlertDurationFromAuto(
     alert.duration ?? pluginConfig.defaultDuration ?? defaultAlertsPluginOptions.defaultDuration,
     alert
   );
-  const intervalRef = useRef2(void 0);
-  const startTimeRef = useRef2(Date.now());
-  const remainingTimeRef = useRef2(defaultAlertDurationNumber);
-  const calledOnCloseRef = useRef2(false);
-  const [isPaused, setIsPaused] = useState2(false);
-  const [progress, setProgress] = useState2(100);
-  const [isRemoved, setIsRemoved] = useState2(false);
-  const startProgressTimer = useCallback4(() => {
+  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);
+  const calledOnCloseRef = useRef3(false);
+  const [isPaused, setIsPaused] = useState3(false);
+  const [progress, setProgress] = useState3(100);
+  const [isRemoved, setIsRemoved] = useState3(false);
+  const startProgressTimer = useCallback5(() => {
     if (intervalRef.current) {
       clearInterval(intervalRef.current);
     }
@@ -2287,6 +2647,7 @@ function Alert2({ alert }) {
       setProgress(newProgress);
       if (newProgress <= 0) {
         if (intervalRef.current) clearInterval(intervalRef.current);
+        if (defaultAlertDisplay === "prominent") return;
         setIsRemoved(true);
         setTimeout(() => {
           alertControls2.removeAlert(alert.id);
@@ -2297,8 +2658,8 @@ function Alert2({ alert }) {
         }, 0.2 * 1e3 - 10);
       }
     }, updateInterval);
-  }, [alert, progress]);
-  const onClickCloseAlert = useCallback4(() => {
+  }, [alert, progress, defaultAlertDisplay]);
+  const onClickCloseAlert = useCallback5(() => {
     setIsRemoved(true);
     setTimeout(() => {
       alertControls2.removeAlert(alert.id);
@@ -2308,7 +2669,7 @@ function Alert2({ alert }) {
       }
     }, 0.2 * 1e3 - 10);
   }, [alert]);
-  const onMouseEnter = useCallback4(() => {
+  const onMouseEnter = useCallback5(() => {
     setIsPaused(true);
     if (intervalRef.current) {
       clearInterval(intervalRef.current);
@@ -2316,36 +2677,47 @@ function Alert2({ alert }) {
     }
     remainingTimeRef.current = defaultAlertDurationNumber * (progress / 100);
   }, [defaultAlertDurationNumber, progress]);
-  const onMouseLeave = useCallback4(() => {
+  const onMouseLeave = useCallback5(() => {
     setIsPaused(false);
     startProgressTimer();
   }, [startProgressTimer]);
+  const onClickAlertModalDone = useCallback5(() => {
+    setIsRemoved(true);
+    modalRef.current?.close();
+    setTimeout(() => {
+      alertControls2.removeAlert(alert.id);
+      if (!calledOnCloseRef.current) {
+        alert.onClose?.(alert);
+        calledOnCloseRef.current = true;
+      }
+    }, 0.2 * 1e3 - 10);
+  }, [alert]);
   const alertData = useMemo2(
     () => ({
       info: {
         icon: "infoI",
-        backgroundColor: theme.colors.info,
+        backgroundColor: theme2.colors.info,
         title: "Info"
       },
       success: {
         icon: "check",
-        backgroundColor: theme.colors.success,
+        backgroundColor: theme2.colors.success,
         title: "Success"
       },
       warning: {
         icon: "warningTriangle",
-        backgroundColor: theme.colors.warn,
+        backgroundColor: theme2.colors.warn,
         title: "Warning"
       },
       error: {
         icon: "XMark",
-        backgroundColor: theme.colors.error,
+        backgroundColor: theme2.colors.error,
         title: "Error"
       }
     }),
-    [theme]
+    [theme2]
   );
-  useEffect4(() => {
+  useEffect5(() => {
     startTimeRef.current = Date.now();
     remainingTimeRef.current = defaultAlertDurationNumber;
     startProgressTimer();
@@ -2353,8 +2725,31 @@ function Alert2({ alert }) {
       if (intervalRef.current) clearInterval(intervalRef.current);
     };
   }, [defaultAlertDurationNumber, startProgressTimer]);
-  const animation = `${isRemoved ? getAnimationOutName(pluginConfig.position ?? defaultAlertsPluginOptions.position)[pluginConfig.align ?? defaultAlertsPluginOptions.align] : getAnimationInName(pluginConfig.position ?? defaultAlertsPluginOptions.position)[pluginConfig.align ?? defaultAlertsPluginOptions.align]} ${theme.styles.transition}`;
-  return /* @__PURE__ */ jsx9(StyledDiv2, { theme, children: /* @__PURE__ */ jsx9(
+  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 defaultAlertDisplay === "prominent" ? /* @__PURE__ */ jsx10(
+    Modal_default,
+    {
+      defaultIsOpened: true,
+      icon: alertData[alert.type].icon,
+      title: alertTitle,
+      description: alert.message,
+      titleColor: theme2.colors.base,
+      descriptionColor: theme2.colors.base + "a0",
+      headerTextAlign: "center",
+      headerBackgroundColor: alertData[alert.type].backgroundColor,
+      withoutCloseButton: true,
+      ref: modalRef,
+      children: /* @__PURE__ */ jsx10(Div_default.row, { width: "100%", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx10(
+        Button_default,
+        {
+          text: "Close",
+          backgroundColor: alertData[alert.type].backgroundColor,
+          onClick: onClickAlertModalDone
+        }
+      ) })
+    }
+  ) : /* @__PURE__ */ jsx10(StyledDiv2, { theme: theme2, children: /* @__PURE__ */ jsx10(
     Div_default.box,
     {
       width: "fit-content",
@@ -2365,9 +2760,9 @@ function Alert2({ alert }) {
       onMouseMove: onMouseEnter,
       onMouseLeave,
       animation,
-      children: /* @__PURE__ */ jsxs6(Div_default.column, { gap: theme.styles.space, children: [
-        /* @__PURE__ */ jsxs6(Div_default.row, { alignItems: "center", gap: theme.styles.gap, children: [
-          /* @__PURE__ */ jsx9(
+      children: /* @__PURE__ */ jsxs7(Div_default.column, { gap: theme2.styles.space, children: [
+        /* @__PURE__ */ jsxs7(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
+          /* @__PURE__ */ jsx10(
             Div_default.row,
             {
               width: 36,
@@ -2376,32 +2771,32 @@ function Alert2({ alert }) {
               justifyContent: "center",
               backgroundColor: alertData[alert.type].backgroundColor,
               borderRadius: 999,
-              marginTop: theme.styles.gap / 2,
-              children: /* @__PURE__ */ jsx9(
+              marginTop: theme2.styles.gap / 2,
+              children: /* @__PURE__ */ jsx10(
                 Icon_default,
                 {
                   name: alertData[alert.type].icon,
                   size: 18,
-                  color: alertData[alert.type].iconColor ?? theme.colors.base
+                  color: alertData[alert.type].iconColor ?? theme2.colors.base
                 }
               )
             }
           ),
-          /* @__PURE__ */ jsxs6(Div_default.column, { flex: 1, gap: theme.styles.gap / 2, children: [
-            /* @__PURE__ */ jsx9(Text_default, { fontSize: 18, fontWeight: 700, children: alert.title ?? alertData[alert.type].title }),
-            /* @__PURE__ */ jsx9(Text_default, { color: theme.colors.textSecondary, children: alert.message })
+          /* @__PURE__ */ jsxs7(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
+            /* @__PURE__ */ jsx10(Text_default, { fontSize: 18, fontWeight: 700, children: alertTitle }),
+            /* @__PURE__ */ jsx10(Text_default, { color: theme2.colors.textSecondary, children: alert.message })
           ] }),
-          pluginConfig.withCloseButton && /* @__PURE__ */ jsx9(Button_default.icon, { icon: "XMark", alignSelf: "flex-start", onClick: onClickCloseAlert })
+          pluginConfig.withCloseButton && /* @__PURE__ */ jsx10(Button_default.icon, { icon: "XMark", alignSelf: "flex-start", onClick: onClickCloseAlert })
         ] }),
-        pluginConfig.withLoaderBar && /* @__PURE__ */ jsx9(
+        pluginConfig.withLoaderBar && /* @__PURE__ */ jsx10(
           Div_default,
           {
             width: "100%",
             height: 5,
-            backgroundColor: theme.colors.backgroundBase,
+            backgroundColor: theme2.colors.backgroundBase,
             borderRadius: 999,
             overflow: "hidden",
-            children: /* @__PURE__ */ jsx9(
+            children: /* @__PURE__ */ jsx10(
               Div_default,
               {
                 width: `${progress}%`,
@@ -2417,20 +2812,20 @@ function Alert2({ alert }) {
     }
   ) });
 }
-var Alert_default = memo9(Alert2);
+var Alert_default = memo10(Alert2);
 
 // src/components/alerts/AlertsHolder.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function AlertsHolder() {
-  const theme = useTheme11();
+  const theme2 = useTheme12();
   const alertsPlugin2 = usePlugin("alerts");
   const { alerts } = useBetterHtmlContextInternal();
   const pluginConfig = alertsPlugin2?.getConfig() ?? {};
-  const top = pluginConfig.position === "top" ? theme.styles.gap : void 0;
-  const bottom = pluginConfig.position === "bottom" ? theme.styles.gap : void 0;
-  const left = pluginConfig.align === "left" ? theme.styles.space : pluginConfig.align === "center" ? "50%" : void 0;
-  const right = pluginConfig.align === "right" ? theme.styles.space : void 0;
-  return /* @__PURE__ */ jsx10(
+  const top = pluginConfig.position === "top" ? theme2.styles.gap : void 0;
+  const bottom = pluginConfig.position === "bottom" ? theme2.styles.gap : void 0;
+  const left = pluginConfig.align === "left" ? theme2.styles.space : pluginConfig.align === "center" ? "50%" : void 0;
+  const right = pluginConfig.align === "right" ? theme2.styles.space : void 0;
+  return /* @__PURE__ */ jsx11(
     Div_default.column,
     {
       position: "fixed",
@@ -2438,18 +2833,18 @@ function AlertsHolder() {
       bottom,
       left,
       right,
-      gap: theme.styles.gap,
+      gap: theme2.styles.gap,
       alignItems: pluginConfig.align === "center" ? "center" : pluginConfig.align === "right" ? "flex-end" : void 0,
       transform: pluginConfig.align === "center" ? "translateX(-50%)" : void 0,
       zIndex: 1e3,
-      children: alerts.map((alert) => /* @__PURE__ */ jsx10(Alert_default, { alert }, alert.id))
+      children: alerts.map((alert) => /* @__PURE__ */ jsx11(Alert_default, { alert }, alert.id))
     }
   );
 }
-var AlertsHolder_default = memo10(AlertsHolder);
+var AlertsHolder_default = memo11(AlertsHolder);
 
 // src/components/BetterHtmlProvider.tsx
-import { Fragment, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 var GlobalStyle = createGlobalStyle`
    html {
       background-color: ${(props) => props.backgroundColor};
@@ -2481,7 +2876,7 @@ var betterHtmlContext = createContext(void 0);
 var externalBetterCoreContextValue;
 var externalBetterHtmlContextValue;
 var useBetterHtmlContext = () => {
-  const coreContext = useBetterCoreContext4();
+  const coreContext = useBetterCoreContext5();
   const context = useContext(betterHtmlContext);
   if (context === void 0)
     throw new Error(
@@ -2507,7 +2902,7 @@ var useAlertControls = () => {
     throw new Error(
       "`useAlertControls()` must be used within a `<BetterHtmlProvider>`. Make sure to add one at the root of your component tree."
     );
-  const createAlert = useCallback5((alert) => {
+  const createAlert = useCallback6((alert) => {
     const readyAlert = {
       id: crypto.randomUUID(),
       ...alert
@@ -2515,7 +2910,7 @@ var useAlertControls = () => {
     context.setAlerts((oldValue) => [...oldValue, readyAlert]);
     return readyAlert;
   }, []);
-  const removeAlert = useCallback5((alertId) => {
+  const removeAlert = useCallback6((alertId) => {
     context.setAlerts((oldValue) => oldValue.filter((alert) => alert.id !== alertId));
   }, []);
   return {
@@ -2536,28 +2931,28 @@ var usePlugin = (pluginName) => {
   );
 };
 function BetterHtmlProviderInternalContent({ children }) {
-  const theme = useTheme12();
+  const theme2 = useTheme13();
   const alertsPlugin2 = usePlugin("alerts");
-  return /* @__PURE__ */ jsxs7(Fragment, { children: [
-    /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    /* @__PURE__ */ jsx12(
       GlobalStyle,
       {
-        fontFamily: theme.styles.fontFamily,
-        color: theme.colors.textPrimary,
-        backgroundColor: theme.colors.backgroundBase
+        fontFamily: theme2.styles.fontFamily,
+        color: theme2.colors.textPrimary,
+        backgroundColor: theme2.colors.backgroundBase
       }
     ),
     children,
-    alertsPlugin2 && /* @__PURE__ */ jsx11(AlertsHolder_default, {})
+    alertsPlugin2 && /* @__PURE__ */ jsx12(AlertsHolder_default, {})
   ] });
 }
 function BetterHtmlProviderInternal({ config, plugins, children }) {
-  const betterCoreContext = useBetterCoreContext4();
-  const [alerts, setAlerts] = useState3([]);
-  const [sideMenuIsCollapsed, setSideMenuIsCollapsed] = useBooleanState2();
-  const [sideMenuIsOpenMobile, setSideMenuIsOpenMobile] = useBooleanState2();
-  const [tabGroups, setTabGroups] = useState3([]);
-  const [tabsWithDots, setTabsWithDots] = useState3([]);
+  const betterCoreContext = useBetterCoreContext5();
+  const [alerts, setAlerts] = useState4([]);
+  const [sideMenuIsCollapsed, setSideMenuIsCollapsed] = useBooleanState3();
+  const [sideMenuIsOpenMobile, setSideMenuIsOpenMobile] = useBooleanState3();
+  const [tabGroups, setTabGroups] = useState4([]);
+  const [tabsWithDots, setTabsWithDots] = useState4([]);
   const readyConfig = useMemo3(
     () => ({
       app: {
@@ -2585,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?.();
@@ -2593,12 +2988,15 @@ function BetterHtmlProviderInternal({ config, plugins, children }) {
   }, []);
   externalBetterCoreContextValue = betterCoreContext;
   externalBetterHtmlContextValue = readyConfig;
-  return /* @__PURE__ */ jsx11(betterHtmlContext.Provider, { value: readyConfig, children: /* @__PURE__ */ jsx11(BetterHtmlProviderInternalContent, { children }) });
+  return /* @__PURE__ */ jsx12(betterHtmlContext.Provider, { value: readyConfig, children: /* @__PURE__ */ jsx12(BetterHtmlProviderInternalContent, { children }) });
 }
 function BetterHtmlProvider({ config, ...props }) {
   const coreConfig = useMemo3(
     () => ({
-      theme: config?.theme,
+      theme: {
+        ...theme,
+        ...config?.theme
+      },
       colorTheme: config?.colorTheme ?? (localStorage.getItem("theme") === "dark" ? "dark" : "light"),
       icons: {
         ...icons,
@@ -2621,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");
@@ -2642,9 +3040,9 @@ function BetterHtmlProvider({ config, ...props }) {
       observer.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ jsx11(BetterCoreProvider, { config: coreConfig, children: /* @__PURE__ */ jsx11(BetterHtmlProviderInternal, { config: htmlConfig, ...props }) });
+  return /* @__PURE__ */ jsx12(BetterCoreProvider, { config: coreConfig, children: /* @__PURE__ */ jsx12(BetterHtmlProviderInternal, { config: htmlConfig, ...props }) });
 }
-var BetterHtmlProvider_default = memo11(BetterHtmlProvider);
+var BetterHtmlProvider_default = memo12(BetterHtmlProvider);
 
 // src/utils/functions.ts
 import CryptoJS from "crypto-js";
@@ -2760,371 +3158,83 @@ var decryptString = (text) => {
   if (!pluginConfig.encryption?.enabled) return text;
   const decrypted = CryptoJS.AES.decrypt(text, CryptoJS.enc.Hex.parse(pluginConfig.encryption.secretKey), {
     iv: CryptoJS.enc.Hex.parse(pluginConfig.encryption.iv),
-    mode: CryptoJS.mode.CBC,
-    padding: CryptoJS.pad.Pkcs7
-  });
-  return decrypted.toString(CryptoJS.enc.Utf8);
-};
-
-// src/utils/localStorage.ts
-function generateLocalStorage() {
-  return {
-    setItem: (name, value) => {
-      if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "generateLocalStorage.setItem"))
-        return void 0;
-      const localStoragePlugin2 = externalBetterHtmlContextValue.plugins.find(
-        (plugin) => plugin.name === "localStorage"
-      );
-      if (!localStoragePlugin2) {
-        throw new Error(
-          "`generateLocalStorage.setItem` function requires the `localStorage` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
-        );
-      }
-      const pluginConfig = localStoragePlugin2.getConfig();
-      const encryptionEnabled = pluginConfig.encryption?.enabled ?? false;
-      const readyName = encryptionEnabled ? encryptString(name.toString()) : name;
-      const readyValue = encryptionEnabled ? encryptString(JSON.stringify(value)) : JSON.stringify(value);
-      if (value) localStorage.setItem(readyName.toString(), readyValue);
-      else localStorage.removeItem(readyName.toString());
-    },
-    getItem: (name) => {
-      if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "generateLocalStorage.getItem"))
-        return void 0;
-      const localStoragePlugin2 = externalBetterHtmlContextValue.plugins.find(
-        (plugin) => plugin.name === "localStorage"
-      );
-      if (!localStoragePlugin2) {
-        throw new Error(
-          "`generateLocalStorage.getItem` function requires the `localStorage` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
-        );
-      }
-      const pluginConfig = localStoragePlugin2.getConfig();
-      const encryptionEnabled = pluginConfig.encryption?.enabled ?? false;
-      const readyName = encryptionEnabled ? encryptString(name.toString()) : name;
-      const item = localStorage.getItem(readyName.toString());
-      if (item === null) return void 0;
-      try {
-        return encryptionEnabled ? JSON.parse(decryptString(item)) : JSON.parse(item);
-      } catch (error) {
-        return void 0;
-      }
-    },
-    removeItem: (name) => {
-      if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "generateLocalStorage.removeItem"))
-        return void 0;
-      const localStoragePlugin2 = externalBetterHtmlContextValue.plugins.find(
-        (plugin) => plugin.name === "localStorage"
-      );
-      if (!localStoragePlugin2) {
-        throw new Error(
-          "`generateLocalStorage.removeItem` function requires the `localStorage` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
-        );
-      }
-      const pluginConfig = localStoragePlugin2.getConfig();
-      const encryptionEnabled = pluginConfig.encryption?.enabled ?? false;
-      const readyName = encryptionEnabled ? encryptString(name.toString()) : name;
-      localStorage.removeItem(readyName.toString());
-    },
-    removeAllItems: () => {
-      localStorage.clear();
-    }
-  };
-}
-
-// src/components/Modal.tsx
-import { memo as memo12, useCallback as useCallback6, forwardRef as forwardRef7, useImperativeHandle, useRef as useRef3, useState as useState4 } from "react";
-import { createPortal } from "react-dom";
-import {
-  useBetterCoreContext as useBetterCoreContext5,
-  useTheme as useTheme13
-} from "react-better-core";
-import styled8 from "styled-components";
-import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
-var DialogStylesElement = styled8.dialog.withConfig({
-  shouldForwardProp: (prop) => !["theme", "colorTheme", "opacity"].includes(prop)
-})`
-   width: 100%;
-   max-width: none;
-   height: 100%;
-   max-height: none;
-   color: ${(props) => props.theme.colors.textPrimary};
-   border: none;
-   outline: none;
-   background-color: transparent;
-   margin: auto auto;
-   padding-inline: ${(props) => props.theme.styles.gap}px;
-   opacity: ${(props) => props.opacity};
-   transition: ${(props) => props.theme.styles.transition};
-
-   &::backdrop {
-      background-color: ${(props) => props.colorTheme === "light" ? "#000000a0" : "#222222e0"};
-      opacity: ${(props) => props.opacity};
-      transition: ${(props) => props.theme.styles.transition};
-   }
-
-   @keyframes fadeInAnimation {
-      from {
-         transform: translateY(${(props) => props.theme.styles.space}px);
-      }
-      to {
-         transform: translateY(0px);
-      }
-   }
-
-   @keyframes fadeOutAnimation {
-      from {
-         transform: translateY(0px);
-      }
-      to {
-         transform: translateY(${(props) => props.theme.styles.space}px);
-      }
-   }
-`;
-var ModalComponent = forwardRef7(function Modal({
-  maxWidth,
-  title,
-  titleColor,
-  description,
-  descriptionColor,
-  headerBackgroundColor,
-  backgroundColor,
-  name,
-  overflow,
-  withoutCloseButton,
-  onOpen,
-  onClose,
-  children
-}, ref) {
-  const reactRouterDomPlugin2 = usePlugin("react-router-dom");
-  const urlQuery = reactRouterDomPlugin2 ? useUrlQuery() : void 0;
-  const theme = useTheme13();
-  const { app } = useBetterHtmlContextInternal();
-  const { colorTheme } = useBetterCoreContext5();
-  const dialogRef = useRef3(null);
-  const [isOpened, setIsOpened] = useState4(false);
-  const [isOpenedLate, setIsOpenedLate] = useState4(false);
-  const onClickOpen = useCallback6(() => {
-    dialogRef.current?.showModal();
-    setIsOpened(true);
-    setIsOpenedLate(true);
-    if (urlQuery && name) {
-      urlQuery.setQuery(
-        {
-          [`${name}-modal`]: "opened"
-        },
-        false
+    mode: CryptoJS.mode.CBC,
+    padding: CryptoJS.pad.Pkcs7
+  });
+  return decrypted.toString(CryptoJS.enc.Utf8);
+};
+
+// src/utils/localStorage.ts
+function generateLocalStorage() {
+  return {
+    setItem: (name, value) => {
+      if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "generateLocalStorage.setItem"))
+        return void 0;
+      const localStoragePlugin2 = externalBetterHtmlContextValue.plugins.find(
+        (plugin) => plugin.name === "localStorage"
       );
-    }
-    onOpen?.();
-  }, [onOpen, urlQuery, name]);
-  const onClickClose = useCallback6(() => {
-    setIsOpened(false);
-    onClose?.();
-    if (urlQuery && name) urlQuery.removeQuery(`${name}-modal`, false);
-    setTimeout(() => {
-      dialogRef.current?.close();
-      setIsOpenedLate(false);
-    }, 0.2 * 1e3);
-  }, [onClose, urlQuery, name]);
-  const onKeyDown = useCallback6(
-    (event) => {
-      if (event.key === "Escape") {
-        if (!withoutCloseButton) return;
-        event.preventDefault();
+      if (!localStoragePlugin2) {
+        throw new Error(
+          "`generateLocalStorage.setItem` function requires the `localStorage` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
+        );
       }
+      const pluginConfig = localStoragePlugin2.getConfig();
+      const encryptionEnabled = pluginConfig.encryption?.enabled ?? false;
+      const readyName = encryptionEnabled ? encryptString(name.toString()) : name;
+      const readyValue = encryptionEnabled ? encryptString(JSON.stringify(value)) : JSON.stringify(value);
+      if (value) localStorage.setItem(readyName.toString(), readyValue);
+      else localStorage.removeItem(readyName.toString());
     },
-    [withoutCloseButton]
-  );
-  useImperativeHandle(
-    ref,
-    () => {
-      return {
-        open: onClickOpen,
-        close: onClickClose,
-        isOpened
-      };
-    },
-    [onClickOpen, onClickClose, isOpened]
-  );
-  return createPortal(
-    /* @__PURE__ */ jsx12(
-      DialogStylesElement,
-      {
-        theme,
-        colorTheme,
-        opacity: !isOpened ? 0 : 1,
-        onClose: onClickClose,
-        onKeyDown,
-        ref: dialogRef,
-        children: isOpenedLate ? /* @__PURE__ */ jsx12(
-          Div_default.column,
-          {
-            position: "relative",
-            width: "100%",
-            maxWidth: maxWidth ?? app.contentMaxWidth / 1.3,
-            minHeight: `calc(100% - ${theme.styles.space * 2}px)`,
-            alignItems: "center",
-            justifyContent: "center",
-            marginBlock: theme.styles.space,
-            marginInline: "auto",
-            transform: `translateY(${theme.styles.space}px)`,
-            transition: theme.styles.transition,
-            animation: isOpened ? "fadeInAnimation 0.2s ease forwards" : "fadeOutAnimation 0.2s ease forwards",
-            children: /* @__PURE__ */ jsxs8(
-              Div_default,
-              {
-                position: "relative",
-                width: "100%",
-                minHeight: 32 + theme.styles.space * 2,
-                backgroundColor: backgroundColor ?? theme.colors.backgroundBase,
-                borderRadius: theme.styles.borderRadius * 2,
-                padding: !title ? theme.styles.space : void 0,
-                overflow,
-                children: [
-                  title ? /* @__PURE__ */ jsxs8(Fragment2, { children: [
-                    /* @__PURE__ */ jsxs8(
-                      Div_default.row,
-                      {
-                        alignItems: "center",
-                        gap: theme.styles.gap,
-                        backgroundColor: headerBackgroundColor,
-                        borderTopLeftRadius: theme.styles.borderRadius * 2 - 1,
-                        borderTopRightRadius: theme.styles.borderRadius * 2 - 1,
-                        paddingInline: theme.styles.space,
-                        paddingBlock: theme.styles.space,
-                        transition: theme.styles.transition,
-                        children: [
-                          /* @__PURE__ */ jsxs8(Div_default.column, { flex: 1, gap: theme.styles.gap / 2, children: [
-                            /* @__PURE__ */ jsx12(
-                              Text_default,
-                              {
-                                as: "h1",
-                                color: titleColor ?? theme.colors.textPrimary,
-                                transition: theme.styles.transition,
-                                children: title
-                              }
-                            ),
-                            description && /* @__PURE__ */ jsx12(
-                              Text_default,
-                              {
-                                color: descriptionColor ?? theme.colors.textSecondary,
-                                transition: theme.styles.transition,
-                                children: description
-                              }
-                            )
-                          ] }),
-                          !withoutCloseButton && /* @__PURE__ */ jsx12(
-                            Button_default.icon,
-                            {
-                              icon: "XMark",
-                              marginTop: 1,
-                              iconColor: titleColor,
-                              onClick: onClickClose,
-                              transition: theme.styles.transition,
-                              zIndex: 10
-                            }
-                          )
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsx12(Divider_default.horizontal, {})
-                  ] }) : /* @__PURE__ */ jsx12(Fragment2, { children: !withoutCloseButton && /* @__PURE__ */ jsx12(Div_default, { position: "absolute", top: theme.styles.space, right: theme.styles.space, zIndex: 10, children: /* @__PURE__ */ jsx12(Button_default.icon, { icon: "XMark", iconColor: titleColor, onClick: onClickClose }) }) }),
-                  /* @__PURE__ */ jsx12(Div_default, { padding: title ? theme.styles.space : void 0, children })
-                ]
-              }
-            )
-          }
-        ) : void 0
+    getItem: (name) => {
+      if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "generateLocalStorage.getItem"))
+        return void 0;
+      const localStoragePlugin2 = externalBetterHtmlContextValue.plugins.find(
+        (plugin) => plugin.name === "localStorage"
+      );
+      if (!localStoragePlugin2) {
+        throw new Error(
+          "`generateLocalStorage.getItem` function requires the `localStorage` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
+        );
       }
-    ),
-    document.body
-  );
-});
-ModalComponent.confirmation = forwardRef7(function Confirmation({ message, continueButtonText = "Continue", continueButtonLoaderName, onContinue, onCancel, ...props }, ref) {
-  const theme = useTheme13();
-  const modalRef = useRef3(null);
-  const onCancelElement = useCallback6(() => {
-    onCancel?.();
-    modalRef.current?.close();
-  }, [onCancel]);
-  const onContinueElement = useCallback6(() => {
-    onContinue?.();
-    modalRef.current?.close();
-  }, [onContinue]);
-  useImperativeHandle(ref, () => modalRef.current, []);
-  return /* @__PURE__ */ jsxs8(ModalComponent, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
-    /* @__PURE__ */ jsx12(Text_default, { color: theme.colors.textSecondary, children: message ?? "Do you really want to continue? This action may be irreversible." }),
-    /* @__PURE__ */ jsxs8(
-      Div_default.row,
-      {
-        alignItems: "center",
-        justifyContent: "flex-end",
-        gap: theme.styles.gap,
-        marginTop: theme.styles.space * 2,
-        children: [
-          /* @__PURE__ */ jsx12(Button_default.secondary, { text: "Cancel", onClick: onCancelElement }),
-          /* @__PURE__ */ jsx12(Button_default, { text: continueButtonText, loaderName: continueButtonLoaderName, onClick: onContinueElement })
-        ]
+      const pluginConfig = localStoragePlugin2.getConfig();
+      const encryptionEnabled = pluginConfig.encryption?.enabled ?? false;
+      const readyName = encryptionEnabled ? encryptString(name.toString()) : name;
+      const item = localStorage.getItem(readyName.toString());
+      if (item === null) return void 0;
+      try {
+        return encryptionEnabled ? JSON.parse(decryptString(item)) : JSON.parse(item);
+      } catch (error) {
+        return void 0;
       }
-    )
-  ] });
-});
-ModalComponent.destructive = forwardRef7(function Destructive2({
-  message,
-  deleteButtonText = "Delete",
-  deleteButtonIconName = "trash",
-  deleteButtonLoaderName,
-  onDelete,
-  onCancel,
-  ...props
-}, ref) {
-  const theme = useTheme13();
-  const modalRef = useRef3(null);
-  const onCancelElement = useCallback6(() => {
-    onCancel?.();
-    modalRef.current?.close();
-  }, [onCancel]);
-  const onDeleteElement = useCallback6(() => {
-    onDelete?.();
-    modalRef.current?.close();
-  }, [onDelete]);
-  useImperativeHandle(ref, () => modalRef.current, []);
-  return /* @__PURE__ */ jsxs8(ModalComponent, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
-    /* @__PURE__ */ jsx12(Text_default, { color: theme.colors.textSecondary, children: message ?? "Do you really want to continue with the deleting of the item? This action may be irreversible." }),
-    /* @__PURE__ */ jsxs8(
-      Div_default.row,
-      {
-        alignItems: "center",
-        justifyContent: "flex-end",
-        gap: theme.styles.gap,
-        marginTop: theme.styles.space * 2,
-        children: [
-          /* @__PURE__ */ jsx12(Button_default.secondary, { text: "Cancel", onClick: onCancelElement }),
-          /* @__PURE__ */ jsx12(
-            Button_default.destructive,
-            {
-              icon: deleteButtonIconName,
-              text: deleteButtonText,
-              loaderName: deleteButtonLoaderName,
-              onClick: onDeleteElement
-            }
-          )
-        ]
+    },
+    removeItem: (name) => {
+      if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "generateLocalStorage.removeItem"))
+        return void 0;
+      const localStoragePlugin2 = externalBetterHtmlContextValue.plugins.find(
+        (plugin) => plugin.name === "localStorage"
+      );
+      if (!localStoragePlugin2) {
+        throw new Error(
+          "`generateLocalStorage.removeItem` function requires the `localStorage` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
+        );
       }
-    )
-  ] });
-});
-var Modal2 = memo12(ModalComponent);
-Modal2.confirmation = ModalComponent.confirmation;
-Modal2.destructive = ModalComponent.destructive;
-var Modal_default = Modal2;
+      const pluginConfig = localStoragePlugin2.getConfig();
+      const encryptionEnabled = pluginConfig.encryption?.enabled ?? false;
+      const readyName = encryptionEnabled ? encryptString(name.toString()) : name;
+      localStorage.removeItem(readyName.toString());
+    },
+    removeAllItems: () => {
+      localStorage.clear();
+    }
+  };
+}
 
 // src/components/PageHolder.tsx
 import { forwardRef as forwardRef8, memo as memo13 } from "react";
 import { useTheme as useTheme14 } from "react-better-core";
 import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 var PageHolderComponent = forwardRef8(function PageHolder({ noMaxContentWidth, children, ...props }, ref) {
-  const theme = useTheme14();
+  const theme2 = useTheme14();
   const { app } = useBetterHtmlContextInternal();
   return /* @__PURE__ */ jsx13(
     Div_default,
@@ -3133,7 +3243,7 @@ var PageHolderComponent = forwardRef8(function PageHolder({ noMaxContentWidth, c
       width: "100%",
       maxWidth: !noMaxContentWidth ? app.contentMaxWidth : void 0,
       margin: "0px auto",
-      padding: theme.styles.space,
+      padding: theme2.styles.space,
       ...props,
       ref,
       children
@@ -3152,7 +3262,7 @@ PageHolderComponent.center = forwardRef8(function Center({
   children,
   ...props
 }, ref) {
-  const theme = useTheme14();
+  const theme2 = useTheme14();
   const mediaQuery = useMediaQuery();
   const { app } = useBetterHtmlContextInternal();
   const breakingPoint = mediaQuery.size1000;
@@ -3186,10 +3296,10 @@ PageHolderComponent.center = forwardRef8(function Center({
         /* @__PURE__ */ jsx13(Div_default.column, { position: "relative", width: `${withSideComponent ? 50 : 100}%`, alignItems: "center", zIndex: 2, children: /* @__PURE__ */ jsx13(
           ContentTag,
           {
-            width: `calc(100% - ${theme.styles.space * 2}px)`,
+            width: `calc(100% - ${theme2.styles.space * 2}px)`,
             maxWidth: !noMaxContentWidth ? contentMaxWidth ?? app.contentMaxWidth / 2 : void 0,
-            marginInline: theme.styles.space,
-            marginBlock: theme.styles.space,
+            marginInline: theme2.styles.space,
+            marginBlock: theme2.styles.space,
             ...props,
             ref,
             children
@@ -3232,7 +3342,7 @@ var ChipComponent = forwardRef9(function Chip({
   onClickWithValue,
   ...props
 }, ref) {
-  const theme = useTheme15();
+  const theme2 = useTheme15();
   const onClickElement = useCallback7(
     (event) => {
       onClick?.(event);
@@ -3244,23 +3354,23 @@ var ChipComponent = forwardRef9(function Chip({
     Div_default,
     {
       width: "fit-content",
-      backgroundColor: backgroundColor ?? theme.colors.backgroundSecondary,
-      borderRadius: isCircle ? 999 : borderRadius ?? theme.styles.borderRadius / borderRadiusOffset,
-      paddingBlock: theme.styles.gap / 2,
-      paddingInline: theme.styles.space / 1.5,
+      backgroundColor: backgroundColor ?? theme2.colors.backgroundSecondary,
+      borderRadius: isCircle ? 999 : borderRadius ?? theme2.styles.borderRadius / borderRadiusOffset,
+      paddingBlock: theme2.styles.gap / 2,
+      paddingInline: theme2.styles.space / 1.5,
       filterHover: onClick || onClickWithValue ? filterHover().z1 : void 0,
       onClick: onClickElement,
       cursor: onClick || onClickWithValue ? "pointer" : void 0,
       ...props,
       ref,
-      children: /* @__PURE__ */ jsx14(Text_default, { color: color ?? theme.colors.textPrimary, children: text })
+      children: /* @__PURE__ */ jsx14(Text_default, { color: color ?? theme2.colors.textPrimary, children: text })
     }
   );
 });
 ChipComponent.colored = forwardRef9(function Colored({ color, withWhiteBackground, ...props }, ref) {
-  const theme = useTheme15();
+  const theme2 = useTheme15();
   const { colorTheme } = useBetterCoreContext6();
-  const readyColor = color ?? theme.colors.textSecondary;
+  const readyColor = color ?? theme2.colors.textSecondary;
   const chip = /* @__PURE__ */ jsx14(
     ChipComponent,
     {
@@ -3276,7 +3386,7 @@ ChipComponent.colored = forwardRef9(function Colored({ color, withWhiteBackgroun
     {
       width: "fit-content",
       backgroundColor: withWhiteBackground ? colorTheme === "light" ? "#ffffff" : "#000000" : void 0,
-      borderRadius: withWhiteBackground ? props.borderRadius ?? theme.styles.borderRadius / borderRadiusOffset + 0.3 : void 0,
+      borderRadius: withWhiteBackground ? props.borderRadius ?? theme2.styles.borderRadius / borderRadiusOffset + 0.3 : void 0,
       children: chip
     }
   ) : chip;
@@ -3286,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,
@@ -3303,7 +3413,7 @@ import { memo as memo15 } from "react";
 import { useTheme as useTheme16 } from "react-better-core";
 import { jsxs as jsxs10 } from "react/jsx-runtime";
 function Label({ text, required, isError, color, htmlFor }) {
-  const theme = useTheme16();
+  const theme2 = useTheme16();
   return /* @__PURE__ */ jsxs10(
     Text_default,
     {
@@ -3311,12 +3421,12 @@ function Label({ text, required, isError, color, htmlFor }) {
       width: "fit-content",
       height: 16,
       fontSize: 14,
-      color: isError ? theme.colors.error : color ?? theme.colors.textSecondary,
+      color: isError ? theme2.colors.error : color ?? theme2.colors.textSecondary,
       htmlFor,
       "aria-required": required,
       children: [
         text,
-        required && /* @__PURE__ */ jsxs10(Text_default, { as: "span", fontSize: 16, color: theme.colors.error, children: [
+        required && /* @__PURE__ */ jsxs10(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
           " ",
           "*"
         ] })
@@ -3327,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
@@ -3366,13 +3476,13 @@ var DropdownComponent = forwardRef10(function Dropdown({
   id,
   ...props
 }, ref) {
-  const theme = useTheme17();
+  const theme2 = useTheme17();
   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(
     "",
@@ -3496,12 +3606,12 @@ var DropdownComponent = forwardRef10(function Dropdown({
           /* @__PURE__ */ jsx15(
             Div_default,
             {
-              color: isDisabled ? theme.colors.textSecondary + "80" : isSelected ? theme.colors.base : theme.colors.textPrimary,
-              backgroundColor: isSelected ? theme.colors.primary : theme.colors.backgroundContent,
+              color: isDisabled ? theme2.colors.textSecondary + "80" : isSelected ? theme2.colors.base : theme2.colors.textPrimary,
+              backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
               filter: isFocused2 ? isDisabled ? "brightness(0.95)" : "brightness(0.9)" : void 0,
               filterHover: focusedOptionIndex === void 0 && !isDisabled ? "brightness(0.9)" : void 0,
               cursor: isDisabled ? "not-allowed" : "pointer",
-              padding: `${theme.styles.gap}px ${theme.styles.space}px`,
+              padding: `${theme2.styles.gap}px ${theme2.styles.space}px`,
               value: option,
               onClickWithValue: onClickOption,
               onMouseMove: () => setFocusedOptionIndex(void 0),
@@ -3525,16 +3635,16 @@ var DropdownComponent = forwardRef10(function Dropdown({
       filteredOptions,
       value,
       focusedOptionIndex,
-      theme.colors,
+      theme2.colors,
       onClickOption,
       renderOption,
       renderOptionDivider
     ]
   );
-  useEffect6(() => {
+  useEffect7(() => {
     setInternalValue(controlledValue);
   }, [controlledValue]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (isOpen) {
       setIsOpenLate.setTrue();
       if (withSearch && inputRef.current) inputRef.current.focus();
@@ -3545,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();
@@ -3563,7 +3673,7 @@ var DropdownComponent = forwardRef10(function Dropdown({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [isOpen]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!withDebounce) return;
     onChangeSearch?.(debouncedSearchQuery);
   }, [withDebounce, onChangeSearch, debouncedSearchQuery]);
@@ -3597,16 +3707,16 @@ var DropdownComponent = forwardRef10(function Dropdown({
         Div_default,
         {
           width: "100%",
-          backgroundColor: theme.colors.backgroundContent,
-          border: `solid 1px ${theme.colors.border}`,
-          borderColor: isFocused ? theme.colors.primary : void 0,
+          backgroundColor: theme2.colors.backgroundContent,
+          border: `solid 1px ${theme2.colors.border}`,
+          borderColor: isFocused ? theme2.colors.primary : void 0,
           borderBottom: "none",
-          borderTopLeftRadius: theme.styles.borderRadius,
-          borderTopRightRadius: theme.styles.borderRadius,
-          paddingBlock: theme.styles.gap,
-          paddingInline: (theme.styles.space + theme.styles.gap) / 2,
-          transition: theme.styles.transition,
-          children: /* @__PURE__ */ jsx15(Div_default.row, { width: "100%", flexWrap: "wrap", gap: theme.styles.gap, children: selectedOption.map((option) => {
+          borderTopLeftRadius: theme2.styles.borderRadius,
+          borderTopRightRadius: theme2.styles.borderRadius,
+          paddingBlock: theme2.styles.gap,
+          paddingInline: (theme2.styles.space + theme2.styles.gap) / 2,
+          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;
             return /* @__PURE__ */ createElement2(
               ChipComponentTag,
@@ -3629,21 +3739,21 @@ var DropdownComponent = forwardRef10(function Dropdown({
             left: 0,
             width: "100%",
             maxHeight: 300,
-            backgroundColor: theme.colors.backgroundContent,
-            border: `1px solid ${isFocused ? theme.colors.primary : theme.colors.border}`,
+            backgroundColor: theme2.colors.backgroundContent,
+            border: `1px solid ${isFocused ? theme2.colors.primary : theme2.colors.border}`,
             borderTop: "none",
-            borderBottomLeftRadius: theme.styles.borderRadius,
-            borderBottomRightRadius: theme.styles.borderRadius,
+            borderBottomLeftRadius: theme2.styles.borderRadius,
+            borderBottomRightRadius: theme2.styles.borderRadius,
             boxShadow: "0px 10px 20px #00000020",
             zIndex: 1e3,
             overflowY: "auto",
             opacity: !isOpen ? 0 : void 0,
             pointerEvents: !isOpen ? "none" : void 0,
             transform: `translateY(${!isOpen ? -10 : 0}px)`,
-            transition: theme.styles.transition,
+            transition: theme2.styles.transition,
             role: "listbox",
             "aria-label": label,
-            children: isLoadingDebouncedSearchQuery || debounceIsLoading ? /* @__PURE__ */ jsx15(Div_default, { padding: `${theme.styles.space / 2}px ${theme.styles.space + theme.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: `${theme.styles.space / 2}px ${theme.styles.space + theme.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" }) })
+            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(
@@ -3651,9 +3761,9 @@ var DropdownComponent = forwardRef10(function Dropdown({
           {
             position: "absolute",
             top: 46 / 2,
-            right: theme.styles.space + 1,
+            right: theme2.styles.space + 1,
             alignItems: "center",
-            gap: theme.styles.gap,
+            gap: theme2.styles.gap,
             transform: "translateY(-50%)",
             pointerEvents: "none",
             filter: disabled ? "brightness(0.9)" : void 0,
@@ -3680,9 +3790,9 @@ var DropdownComponent = forwardRef10(function Dropdown({
                   name: "chevronDown",
                   position: "relative",
                   size: 16,
-                  color: theme.colors.textSecondary,
+                  color: theme2.colors.textSecondary,
                   transform: `rotate(${isOpen ? 180 : 0}deg)`,
-                  transition: theme.styles.transition,
+                  transition: theme2.styles.transition,
                   pointerEvents: "none",
                   "aria-hidden": true
                 }
@@ -3703,9 +3813,9 @@ var DropdownComponent = forwardRef10(function Dropdown({
   ) });
 });
 DropdownComponent.countries = forwardRef10(function Countries({ ...props }, ref) {
-  const theme = useTheme17();
+  const theme2 = useTheme17();
   const renderOption = useCallback8(
-    (option, index, isSelected) => /* @__PURE__ */ jsxs11(Div_default.row, { alignItems: "center", gap: theme.styles.gap, children: [
+    (option, index, isSelected) => /* @__PURE__ */ jsxs11(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 })
     ] }),
@@ -3739,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";
@@ -3792,7 +3902,7 @@ var SelectComponent = styled9.select.withConfig({
    opacity: 0;
 `;
 function Calendar({ value, minDate, maxDate, onChange }) {
-  const theme = useTheme18();
+  const theme2 = useTheme18();
   const internalYearSelectId = useId();
   const [currentDate, setCurrentDate] = useState6(value ? new Date(value) : void 0);
   const [currentMonth, setCurrentMonth] = useState6(currentDate?.getMonth() ?? (/* @__PURE__ */ new Date()).getMonth());
@@ -3849,14 +3959,14 @@ function Calendar({ value, minDate, maxDate, onChange }) {
     }
     return result;
   }, [daysInMonth, firstDayOfMonth]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!value) return;
     const date = new Date(value);
     setCurrentDate(date);
     setCurrentMonth(date.getMonth());
     setCurrentYear(date.getFullYear());
   }, [value]);
-  return /* @__PURE__ */ jsxs12(Div_default.column, { width: "100%", maxWidth: 320, gap: theme.styles.gap, padding: theme.styles.space / 2, userSelect: "none", children: [
+  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: [
       /* @__PURE__ */ jsx16(Button_default.icon, { icon: "chevronLeft", onClick: onClickPreviousMonthButton }),
       /* @__PURE__ */ jsxs12(Div_default.row, { alignItems: "center", gap: 4, children: [
@@ -3867,7 +3977,7 @@ function Calendar({ value, minDate, maxDate, onChange }) {
           /* @__PURE__ */ jsx16(
             SelectComponent,
             {
-              theme,
+              theme: theme2,
               value: currentYear,
               onChange: onChangeYearSelect,
               id: internalYearSelectId,
@@ -3878,7 +3988,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: theme.styles.gap / 2, children: [
+    /* @__PURE__ */ jsxs12(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);
@@ -3894,11 +4004,11 @@ function Calendar({ value, minDate, maxDate, onChange }) {
             aspectRatio: "1",
             alignItems: "center",
             justifyContent: "center",
-            backgroundColor: isSelected ? theme.colors.primary : theme.colors.backgroundContent,
+            backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
             filterHover: day && !isDisabled ? "brightness(0.9)" : void 0,
-            border: `1px solid ${isToday ? theme.colors.primary : theme.colors.primary + "00"}`,
-            borderRadius: theme.styles.borderRadius / 2,
-            padding: theme.styles.space / 2,
+            border: `1px solid ${isToday ? theme2.colors.primary : theme2.colors.primary + "00"}`,
+            borderRadius: theme2.styles.borderRadius / 2,
+            padding: theme2.styles.space / 2,
             cursor: day ? !isDisabled ? "pointer" : "not-allowed" : void 0,
             value: day,
             onClickWithValue: !isDisabled ? onClickDay : void 0,
@@ -3908,7 +4018,7 @@ function Calendar({ value, minDate, maxDate, onChange }) {
                 {
                   fontSize: 14,
                   textAlign: "center",
-                  color: isDisabled ? theme.colors.textSecondary + "80" : isSelected ? theme.colors.base : isWeekend ? theme.colors.textSecondary : void 0,
+                  color: isDisabled ? theme2.colors.textSecondary + "80" : isSelected ? theme2.colors.base : isWeekend ? theme2.colors.textSecondary : void 0,
                   children: day
                 }
               ),
@@ -3920,7 +4030,7 @@ function Calendar({ value, minDate, maxDate, onChange }) {
                   height: 1,
                   top: "50%",
                   left: "50%",
-                  backgroundColor: theme.colors.textSecondary,
+                  backgroundColor: theme2.colors.textSecondary,
                   borderRadius: 999,
                   transform: "translate(-50%, -50%) rotate(45deg)"
                 }
@@ -3937,8 +4047,8 @@ function Calendar({ value, minDate, maxDate, onChange }) {
         {
           fontSize: 14,
           textDecorationHover: "underline",
-          color: theme.colors.textSecondary,
-          colorHover: theme.colors.textPrimary,
+          color: theme2.colors.textSecondary,
+          colorHover: theme2.colors.textPrimary,
           children: "Clear"
         }
       ) }),
@@ -3947,8 +4057,8 @@ function Calendar({ value, minDate, maxDate, onChange }) {
         {
           fontSize: 14,
           textDecorationHover: "underline",
-          color: theme.colors.textSecondary,
-          colorHover: theme.colors.textPrimary,
+          color: theme2.colors.textSecondary,
+          colorHover: theme2.colors.textPrimary,
           children: "Today"
         }
       ) })
@@ -4145,7 +4255,7 @@ var InputFieldComponent = forwardRef11(function InputField({
   id,
   ...props
 }, ref) {
-  const theme = useTheme19();
+  const theme2 = useTheme19();
   const internalId = useId2();
   const { colorTheme } = useBetterCoreContext7();
   const [_, debouncedValue, setDebouncedValue] = useDebounceState2(
@@ -4174,12 +4284,12 @@ var InputFieldComponent = forwardRef11(function InputField({
     ) ? 1002 : 1,
     [props.className]
   );
-  useEffect8(() => {
+  useEffect9(() => {
     if (!withDebounce) return;
     onChangeValue?.(debouncedValue);
   }, [withDebounce, onChangeValue, debouncedValue]);
   const readyId = id ?? internalId;
-  return /* @__PURE__ */ jsxs13(Div_default.column, { width: "100%", gap: theme.styles.gap / 2, ...excludeStyle, children: [
+  return /* @__PURE__ */ jsxs13(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: [
       prefix && /* @__PURE__ */ jsx17(
@@ -4187,12 +4297,12 @@ var InputFieldComponent = forwardRef11(function InputField({
         {
           alignItems: "center",
           justifyContent: "center",
-          border: `1px solid ${theme.colors.border}`,
+          border: `1px solid ${theme2.colors.border}`,
           borderRight: "none",
-          backgroundColor: prefixBackgroundColor ?? (colorTheme === "light" ? darkenColor2(theme.colors.backgroundContent, 0.03) : lightenColor2(theme.colors.backgroundContent, 0.1)),
-          borderTopLeftRadius: theme.styles.borderRadius,
-          borderBottomLeftRadius: theme.styles.borderRadius,
-          paddingInline: theme.styles.space,
+          backgroundColor: prefixBackgroundColor ?? (colorTheme === "light" ? darkenColor2(theme2.colors.backgroundContent, 0.03) : lightenColor2(theme2.colors.backgroundContent, 0.1)),
+          borderTopLeftRadius: theme2.styles.borderRadius,
+          borderBottomLeftRadius: theme2.styles.borderRadius,
+          paddingInline: theme2.styles.space,
           children: prefix
         }
       ),
@@ -4205,7 +4315,7 @@ var InputFieldComponent = forwardRef11(function InputField({
               name: leftIcon,
               position: "absolute",
               top: (props.type === "date" || props.type === "time" || props.type === "datetime-local" ? 48 : 46) / 2,
-              left: theme.styles.space + 1,
+              left: theme2.styles.space + 1,
               transform: "translateY(-50%)",
               pointerEvents: "none",
               zIndex: leftIconZIndex
@@ -4214,7 +4324,7 @@ var InputFieldComponent = forwardRef11(function InputField({
           /* @__PURE__ */ jsx17(
             InputElement,
             {
-              theme,
+              theme: theme2,
               withLeftIcon: leftIcon !== void 0,
               withRightIcon: rightIcon !== void 0,
               withPrefix: prefix !== void 0,
@@ -4237,7 +4347,7 @@ var InputFieldComponent = forwardRef11(function InputField({
               icon: rightIcon,
               position: "absolute",
               top: 46 / 2,
-              right: theme.styles.space + 1 - theme.styles.space / 2,
+              right: theme2.styles.space + 1 - theme2.styles.space / 2,
               transform: "translateY(-50%)",
               onClick: onClickRightIcon
             }
@@ -4247,7 +4357,7 @@ var InputFieldComponent = forwardRef11(function InputField({
               name: rightIcon,
               position: "absolute",
               top: 46 / 2,
-              right: theme.styles.space + 1,
+              right: theme2.styles.space + 1,
               transform: "translateY(-50%)",
               pointerEvents: "none"
             }
@@ -4260,12 +4370,12 @@ var InputFieldComponent = forwardRef11(function InputField({
         {
           alignItems: "center",
           justifyContent: "center",
-          border: `1px solid ${theme.colors.border}`,
+          border: `1px solid ${theme2.colors.border}`,
           borderLeft: "none",
-          backgroundColor: suffixBackgroundColor ?? (colorTheme === "light" ? darkenColor2(theme.colors.backgroundContent, 0.03) : lightenColor2(theme.colors.backgroundContent, 0.1)),
-          borderTopRightRadius: theme.styles.borderRadius,
-          borderBottomRightRadius: theme.styles.borderRadius,
-          paddingInline: theme.styles.space,
+          backgroundColor: suffixBackgroundColor ?? (colorTheme === "light" ? darkenColor2(theme2.colors.backgroundContent, 0.03) : lightenColor2(theme2.colors.backgroundContent, 0.1)),
+          borderTopRightRadius: theme2.styles.borderRadius,
+          borderBottomRightRadius: theme2.styles.borderRadius,
+          paddingInline: theme2.styles.space,
           children: suffix
         }
       )
@@ -4276,7 +4386,7 @@ var InputFieldComponent = forwardRef11(function InputField({
         as: "span",
         display: "block",
         fontSize: 14,
-        color: errorText ? theme.colors.error : labelColor ?? theme.colors.textSecondary,
+        color: errorText ? theme2.colors.error : labelColor ?? theme2.colors.textSecondary,
         children: errorText || infoText
       }
     )
@@ -4296,7 +4406,7 @@ InputFieldComponent.multiline = forwardRef11(function Multiline({
   id,
   ...props
 }, ref) {
-  const theme = useTheme19();
+  const theme2 = useTheme19();
   const internalId = useId2();
   const { style, hoverStyle, restProps } = useComponentPropsGrouper(props);
   const dataProps = useComponentPropsWithPrefix(restProps, "data");
@@ -4309,7 +4419,7 @@ InputFieldComponent.multiline = forwardRef11(function Multiline({
     [onChange, onChangeValue]
   );
   const readyId = id ?? internalId;
-  return /* @__PURE__ */ jsxs13(Div_default.column, { gap: theme.styles.gap / 2, children: [
+  return /* @__PURE__ */ jsxs13(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: [
       leftIcon && /* @__PURE__ */ jsx17(
@@ -4318,7 +4428,7 @@ InputFieldComponent.multiline = forwardRef11(function Multiline({
           name: leftIcon,
           position: "absolute",
           top: 46 / 2,
-          left: theme.styles.space + 1,
+          left: theme2.styles.space + 1,
           transform: "translateY(-50%)",
           pointerEvents: "none"
         }
@@ -4326,7 +4436,7 @@ InputFieldComponent.multiline = forwardRef11(function Multiline({
       /* @__PURE__ */ jsx17(
         TextareaElement,
         {
-          theme,
+          theme: theme2,
           withLeftIcon: leftIcon !== void 0,
           withRightIcon: rightIcon !== void 0,
           required,
@@ -4347,7 +4457,7 @@ InputFieldComponent.multiline = forwardRef11(function Multiline({
           icon: rightIcon,
           position: "absolute",
           top: 46 / 2,
-          right: theme.styles.space + 1 - theme.styles.space / 2,
+          right: theme2.styles.space + 1 - theme2.styles.space / 2,
           transform: "translateY(-50%)",
           onClick: onClickRightIcon
         }
@@ -4357,7 +4467,7 @@ InputFieldComponent.multiline = forwardRef11(function Multiline({
           name: rightIcon,
           position: "absolute",
           top: 46 / 2,
-          right: theme.styles.space + 1,
+          right: theme2.styles.space + 1,
           transform: "translateY(-50%)",
           pointerEvents: "none"
         }
@@ -4368,8 +4478,8 @@ InputFieldComponent.multiline = forwardRef11(function Multiline({
       {
         as: "span",
         display: "block",
-        marginTop: theme.styles.gap / 2,
-        color: errorText ? theme.colors.error : props.labelColor ?? theme.colors.textSecondary,
+        marginTop: theme2.styles.gap / 2,
+        color: errorText ? theme2.colors.error : props.labelColor ?? theme2.colors.textSecondary,
         fontSize: 14,
         children: errorText || infoText
       }
@@ -4391,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,
     {
@@ -4409,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);
@@ -4451,12 +4561,12 @@ InputFieldComponent.search = forwardRef11(function Search({ value, onChangeValue
   );
 });
 InputFieldComponent.phoneNumber = forwardRef11(function PhoneNumber({ label, value, onChangeValue, labelColor, id, ...props }, ref) {
-  const theme = useTheme19();
+  const theme2 = useTheme19();
   const internalId = useId2();
   const [dropdownValue, setDropdownValue] = useState7();
   const [inputFieldValue, setInputFieldValue] = useState7(value?.toString() ?? "");
   const renderOption = useCallback10(
-    (option, index, isSelected) => /* @__PURE__ */ jsxs13(Div_default.row, { alignItems: "center", gap: theme.styles.gap, children: [
+    (option, index, isSelected) => /* @__PURE__ */ jsxs13(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 })
     ] }),
@@ -4491,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(
@@ -4508,7 +4618,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: theme.styles.gap / 2, children: [
+  return /* @__PURE__ */ jsxs13(Div_default.column, { width: "100%", gap: theme2.styles.gap / 2, children: [
     label && /* @__PURE__ */ jsx17(
       Label_default,
       {
@@ -4554,7 +4664,7 @@ InputFieldComponent.phoneNumber = forwardRef11(function PhoneNumber({ label, val
   ] });
 });
 InputFieldComponent.date = forwardRef11(function Date2({ minDate, maxDate, ...props }, ref) {
-  const theme = useTheme19();
+  const theme2 = useTheme19();
   const holderRef = useRef5(null);
   const isMobileIOS = isMobileDevice && getBrowser() === "safari";
   const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
@@ -4576,9 +4686,9 @@ InputFieldComponent.date = forwardRef11(function Date2({ minDate, maxDate, ...pr
           top: "100%",
           left: 0,
           width: "fit-content",
-          backgroundColor: theme.colors.backgroundContent,
-          borderBottomLeftRadius: theme.styles.borderRadius,
-          borderBottomRightRadius: theme.styles.borderRadius,
+          backgroundColor: theme2.colors.backgroundContent,
+          borderBottomLeftRadius: theme2.styles.borderRadius,
+          borderBottomRightRadius: theme2.styles.borderRadius,
           boxShadow: "0px 10px 20px #00000020",
           userSelect: "none",
           ...insideInputFieldComponentProps,
@@ -4593,7 +4703,7 @@ InputFieldComponent.date = forwardRef11(function Date2({ minDate, maxDate, ...pr
   );
 });
 InputFieldComponent.dateTime = forwardRef11(function DateTime({ minDate, maxDate, defaultDateAfterTimePick, defaultTimeAfterDatePick = "00:00", ...props }, ref) {
-  const theme = useTheme19();
+  const theme2 = useTheme19();
   const holderRef = useRef5(null);
   const selectedHourRef = useRef5(null);
   const selectedMinuteRef = useRef5(null);
@@ -4627,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)
@@ -4635,7 +4745,7 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({ minDate, maxDate
   }, [isOpen]);
   const valueHour = parseInt(internalValue?.toString().split("T")?.[1]?.split(":")?.[0]).toString();
   const valueMinute = parseInt(internalValue?.toString().split("T")?.[1]?.split(":")?.[1]).toString();
-  const topSpacing = 32 + theme.styles.space / 2 + theme.styles.gap;
+  const topSpacing = 32 + theme2.styles.space / 2 + theme2.styles.gap;
   return /* @__PURE__ */ jsx17(
     InputFieldComponent,
     {
@@ -4647,32 +4757,32 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({ minDate, maxDate
           top: "100%",
           left: 0,
           width: "fit-content",
-          backgroundColor: theme.colors.backgroundContent,
-          borderBottomLeftRadius: theme.styles.borderRadius,
-          borderBottomRightRadius: theme.styles.borderRadius,
+          backgroundColor: theme2.colors.backgroundContent,
+          borderBottomLeftRadius: theme2.styles.borderRadius,
+          borderBottomRightRadius: theme2.styles.borderRadius,
           boxShadow: "0px 10px 20px #00000020",
           overflow: "hidden",
           userSelect: "none",
           ...insideInputFieldComponentProps,
-          children: /* @__PURE__ */ jsxs13(Div_default.row, { gap: theme.styles.space, children: [
+          children: /* @__PURE__ */ jsxs13(Div_default.row, { gap: theme2.styles.space, children: [
             /* @__PURE__ */ jsx17(Calendar_default, { value: internalValue, minDate, maxDate, onChange }),
             /* @__PURE__ */ jsxs13(
               Div_default.row,
               {
                 height: 276,
-                gap: theme.styles.gap / 2,
+                gap: theme2.styles.gap / 2,
                 paddingTop: topSpacing,
-                paddingBottom: theme.styles.space / 2,
-                paddingRight: theme.styles.space / 2,
+                paddingBottom: theme2.styles.space / 2,
+                paddingRight: theme2.styles.space / 2,
                 children: [
                   /* @__PURE__ */ jsxs13(Div_default, { height: "100%", children: [
-                    /* @__PURE__ */ jsx17(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme.styles.gap / 2, children: "H" }),
+                    /* @__PURE__ */ jsx17(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "H" }),
                     /* @__PURE__ */ jsx17(
                       Div_default,
                       {
                         className: "react-better-html-no-scrollbar",
                         width: buttonWidth,
-                        height: `calc(100% - ${16 + theme.styles.gap / 2}px)`,
+                        height: `calc(100% - ${16 + theme2.styles.gap / 2}px)`,
                         overflowY: "auto",
                         tabIndex: -1,
                         children: hours.map((hour) => {
@@ -4682,12 +4792,12 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({ minDate, maxDate
                             {
                               alignItems: "center",
                               justifyContent: "center",
-                              color: isSelected ? theme.colors.base : theme.colors.textPrimary,
-                              backgroundColor: isSelected ? theme.colors.primary : theme.colors.backgroundContent,
-                              borderRadius: theme.styles.borderRadius / 2,
+                              color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
+                              backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
+                              borderRadius: theme2.styles.borderRadius / 2,
                               filterHover: "brightness(0.9)",
                               cursor: "pointer",
-                              padding: `${theme.styles.space / 2}px ${theme.styles.space + theme.styles.gap}px`,
+                              padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
                               value: hour,
                               onClickWithValue: onClickHour,
                               ref: isSelected ? selectedHourRef : void 0,
@@ -4700,13 +4810,13 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({ minDate, maxDate
                     )
                   ] }),
                   /* @__PURE__ */ jsxs13(Div_default, { height: "100%", children: [
-                    /* @__PURE__ */ jsx17(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme.styles.gap / 2, children: "M" }),
+                    /* @__PURE__ */ jsx17(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "M" }),
                     /* @__PURE__ */ jsx17(
                       Div_default,
                       {
                         className: "react-better-html-no-scrollbar",
                         width: buttonWidth,
-                        height: `calc(100% - ${16 + theme.styles.gap / 2}px)`,
+                        height: `calc(100% - ${16 + theme2.styles.gap / 2}px)`,
                         overflowY: "auto",
                         tabIndex: -1,
                         children: minutes.map((minute) => {
@@ -4716,12 +4826,12 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({ minDate, maxDate
                             {
                               alignItems: "center",
                               justifyContent: "center",
-                              color: isSelected ? theme.colors.base : theme.colors.textPrimary,
-                              backgroundColor: isSelected ? theme.colors.primary : theme.colors.backgroundContent,
-                              borderRadius: theme.styles.borderRadius / 2,
+                              color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
+                              backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
+                              borderRadius: theme2.styles.borderRadius / 2,
                               filterHover: "brightness(0.9)",
                               cursor: "pointer",
-                              padding: `${theme.styles.space / 2}px ${theme.styles.space + theme.styles.gap}px`,
+                              padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
                               value: minute,
                               onClickWithValue: onClickMinute,
                               ref: isSelected ? selectedMinuteRef : void 0,
@@ -4747,7 +4857,7 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({ minDate, maxDate
   );
 });
 InputFieldComponent.time = forwardRef11(function Time({ ...props }, ref) {
-  const theme = useTheme19();
+  const theme2 = useTheme19();
   const holderRef = useRef5(null);
   const selectedHourRef = useRef5(null);
   const selectedMinuteRef = useRef5(null);
@@ -4769,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)
@@ -4789,9 +4899,9 @@ InputFieldComponent.time = forwardRef11(function Time({ ...props }, ref) {
           left: 0,
           width: buttonWidth * 2 + 2,
           height: 300,
-          backgroundColor: theme.colors.backgroundContent,
-          borderBottomLeftRadius: theme.styles.borderRadius,
-          borderBottomRightRadius: theme.styles.borderRadius,
+          backgroundColor: theme2.colors.backgroundContent,
+          borderBottomLeftRadius: theme2.styles.borderRadius,
+          borderBottomRightRadius: theme2.styles.borderRadius,
           boxShadow: "0px 10px 20px #00000020",
           overflowY: "auto",
           userSelect: "none",
@@ -4812,11 +4922,11 @@ InputFieldComponent.time = forwardRef11(function Time({ ...props }, ref) {
                     {
                       alignItems: "center",
                       justifyContent: "center",
-                      color: isSelected ? theme.colors.base : theme.colors.textPrimary,
-                      backgroundColor: isSelected ? theme.colors.primary : theme.colors.backgroundContent,
+                      color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
+                      backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
                       filterHover: "brightness(0.9)",
                       cursor: "pointer",
-                      padding: `${theme.styles.space / 2}px ${theme.styles.space + theme.styles.gap}px`,
+                      padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
                       value: hour,
                       onClickWithValue: onClickHour,
                       ref: isSelected ? selectedHourRef : void 0,
@@ -4842,11 +4952,11 @@ InputFieldComponent.time = forwardRef11(function Time({ ...props }, ref) {
                     {
                       alignItems: "center",
                       justifyContent: "center",
-                      color: isSelected ? theme.colors.base : theme.colors.textPrimary,
-                      backgroundColor: isSelected ? theme.colors.primary : theme.colors.backgroundContent,
+                      color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
+                      backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
                       filterHover: "brightness(0.9)",
                       cursor: "pointer",
-                      padding: `${theme.styles.space / 2}px ${theme.styles.space + theme.styles.gap}px`,
+                      padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
                       value: minute,
                       onClickWithValue: onClickMinute,
                       ref: isSelected ? selectedMinuteRef : void 0,
@@ -4877,7 +4987,7 @@ InputFieldComponent.color = forwardRef11(function Color4({ value, onChangeValue,
     },
     [onChangeValue]
   );
-  useEffect8(() => {
+  useEffect9(() => {
     if (value === void 0) return;
     setInputFieldValue(value);
   }, [value]);
@@ -4921,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;
@@ -5031,7 +5141,7 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
   id,
   ...props
 }, ref) {
-  const theme = useTheme20();
+  const theme2 = useTheme20();
   const internalId = useId3();
   const { style, hoverStyle, excludeStyle, restProps } = useComponentPropsGrouper(props, true);
   const dataProps = useComponentPropsWithPrefix(restProps, "data");
@@ -5052,14 +5162,14 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
     onChange?.(newIsChecked, value);
   }, [checked, controlledChecked, onChange, value]);
   const readyId = id ?? internalId;
-  return /* @__PURE__ */ jsxs14(Div_default.column, { gap: theme.styles.gap, ...excludeStyle, children: [
+  return /* @__PURE__ */ jsxs14(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: theme.styles.gap, children: [
+    /* @__PURE__ */ jsxs14(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
       /* @__PURE__ */ jsxs14(Div_default.row, { position: "relative", alignItems: "center", children: [
         /* @__PURE__ */ jsx18(
           InputElement2,
           {
-            theme,
+            theme: theme2,
             type: props.type ?? "checkbox",
             checked,
             onChange: onChangeElement,
@@ -5078,12 +5188,12 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
             position: "absolute",
             top: "50%",
             left: "50%",
-            color: theme.colors.base,
+            color: theme2.colors.base,
             size: 14,
             transform: `translate(-50%, -50%)${checked ? "" : " scale(0.4)"}`,
             opacity: checked ? 1 : 0,
             pointerEvents: "none",
-            transition: theme.styles.transition
+            transition: theme2.styles.transition
           }
         ) : props.type === "radio" ? /* @__PURE__ */ jsx18(
           Div_default,
@@ -5093,7 +5203,7 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
             height: 10,
             top: "50%",
             left: "50%",
-            backgroundColor: theme.colors.base,
+            backgroundColor: theme2.colors.base,
             borderRadius: 999,
             transform: `translate(-50%, -50%)${checked ? "" : " scale(0.4)"}`,
             opacity: checked ? 1 : 0,
@@ -5103,13 +5213,13 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
       ] }),
       text ? /* @__PURE__ */ jsxs14(Text_default, { color, userSelect: "none", cursor: "pointer", onClick: onClickText, children: [
         text,
-        required && !label && /* @__PURE__ */ jsxs14(Text_default, { as: "span", fontSize: 16, color: theme.colors.error, children: [
+        required && !label && /* @__PURE__ */ jsxs14(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,
-        required && !label && /* @__PURE__ */ jsxs14(Text_default, { as: "span", fontSize: 16, color: theme.colors.error, marginLeft: 4, children: [
+        required && !label && /* @__PURE__ */ jsxs14(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, marginLeft: 4, children: [
           " ",
           "*"
         ] })
@@ -5121,7 +5231,7 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
         as: "span",
         display: "block",
         fontSize: 14,
-        color: errorText ? theme.colors.error : labelColor ?? theme.colors.textSecondary,
+        color: errorText ? theme2.colors.error : labelColor ?? theme2.colors.textSecondary,
         children: errorText || infoText
       }
     )
@@ -5147,13 +5257,13 @@ var ToggleInput_default = {
     id,
     ...props
   }, ref) {
-    const theme = useTheme20();
+    const theme2 = useTheme20();
     const internalId = useId3();
     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;
@@ -5162,13 +5272,13 @@ 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: theme.styles.gap, ...excludeStyle, children: [
+    return /* @__PURE__ */ jsxs14(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,
         {
           alignItems: "center",
-          gap: theme.styles.gap,
+          gap: theme2.styles.gap,
           borderRadius: 999,
           isTabAccessed: true,
           onClick: onClickElement,
@@ -5181,7 +5291,7 @@ var ToggleInput_default = {
           children: /* @__PURE__ */ jsx18(
             SwitchElement,
             {
-              theme,
+              theme: theme2,
               checked,
               disabled: disabled ?? false,
               isMouseDown,
@@ -5204,7 +5314,7 @@ var ToggleInput_default = {
           as: "span",
           display: "block",
           fontSize: 14,
-          color: errorText ? theme.colors.error : labelColor ?? theme.colors.textSecondary,
+          color: errorText ? theme2.colors.error : labelColor ?? theme2.colors.textSecondary,
           children: errorText || infoText
         }
       )
@@ -5239,7 +5349,7 @@ var FormComponent = forwardRef13(function Form({
   children,
   ...props
 }, ref) {
-  const theme = useTheme21();
+  const theme2 = useTheme21();
   const submitButtonIsDisabledInternal = useMemo7(() => {
     if (!form || !form.requiredFields) return false;
     return Object.entries(form.values).some(
@@ -5249,7 +5359,7 @@ var FormComponent = forwardRef13(function 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 ? theme.styles.space : theme.styles.gap), children: withDividers ? Children.toArray(children).map((child, index) => /* @__PURE__ */ jsxs15(Fragment5, { 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: [
       child,
       index < Children.toArray(children).length - 1 && /* @__PURE__ */ jsx19(Divider_default.horizontal, {})
     ] }, index)) : children }) : children,
@@ -5258,8 +5368,8 @@ var FormComponent = forwardRef13(function Form({
       {
         alignItems: "center",
         justifyContent: actionButtonsLocation === "left" ? "flex-start" : actionButtonsLocation === "center" ? "center" : "flex-end",
-        gap: theme.styles.gap,
-        marginTop: theme.styles.space,
+        gap: theme2.styles.gap,
+        marginTop: theme2.styles.space,
         children: [
           renderActionButtons,
           onClickCancel && /* @__PURE__ */ jsx19(
@@ -5297,10 +5407,10 @@ 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";
 var FormRowComponent = forwardRef14(function FormRow({ oneItemOnly, noBreakingPoint, asColumn, gap, children, ...props }, ref) {
-  const theme = useTheme22();
+  const theme2 = useTheme22();
   const mediaQuery = useMediaQuery();
   const breakingPoint = asColumn ?? (!noBreakingPoint ? mediaQuery.size900 : false);
-  const readyGap = breakingPoint || noBreakingPoint && mediaQuery.size900 ? theme.styles.gap : theme.styles.space * 2;
+  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: [
     children,
     oneItemOnly && /* @__PURE__ */ jsx20(Div_default, { width: "100%" })
@@ -5324,21 +5434,21 @@ FormRowComponent.withTitle = forwardRef14(function WithTitle({
   children,
   ...props
 }, ref) {
-  const theme = useTheme22();
+  const theme2 = useTheme22();
   const mediaQuery = useMediaQuery();
-  const titleGap = theme.styles.space;
+  const titleGap = theme2.styles.space;
   return /* @__PURE__ */ jsxs16(FormRowComponent, { ...props, ref, children: [
     /* @__PURE__ */ jsxs16(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: theme.styles.gap / 2, children: [
+      /* @__PURE__ */ jsxs16(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
         /* @__PURE__ */ jsxs16(Text_default, { as: titleAs, fontSize: titleFontSize, children: [
           title,
-          required && /* @__PURE__ */ jsxs16(Text_default, { as: "span", fontSize: 16, color: theme.colors.error, children: [
+          required && /* @__PURE__ */ jsxs16(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
             " ",
             "*"
           ] })
         ] }),
-        description && /* @__PURE__ */ jsx20(Text_default, { fontSize: descriptionFontSize, color: theme.colors.textSecondary, children: description })
+        description && /* @__PURE__ */ jsx20(Text_default, { fontSize: descriptionFontSize, color: theme2.colors.textSecondary, children: description })
       ] }),
       isLoading && /* @__PURE__ */ jsx20(Div_default, { width: 26 - titleGap })
     ] }),
@@ -5349,14 +5459,14 @@ FormRowComponent.withTitle = forwardRef14(function WithTitle({
         width: props.noBreakingPoint && mediaQuery.size900 ? void 0 : "100%",
         alignItems: "center",
         justifyContent: alignChildren,
-        gap: theme.styles.gap,
+        gap: theme2.styles.gap,
         children: [
           /* @__PURE__ */ jsx20(
             Div_default,
             {
               position: "absolute",
               top: "50%",
-              right: `calc(100% + ${theme.styles.space}px)`,
+              right: `calc(100% + ${theme2.styles.space}px)`,
               transform: "translateY(-50%)",
               opacity: !isLoading ? 0 : void 0,
               pointerEvents: !isLoading ? "none" : void 0,
@@ -5364,7 +5474,7 @@ FormRowComponent.withTitle = forwardRef14(function WithTitle({
             }
           ),
           children,
-          withActions && /* @__PURE__ */ jsxs16(Div_default.row, { alignItems: "center", gap: theme.styles.gap, children: [
+          withActions && /* @__PURE__ */ jsxs16(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 })
           ] })
@@ -5378,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({
@@ -5391,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) => {
@@ -5420,8 +5530,8 @@ var ColorThemeSwitchComponent = function ColorThemeSwitch({
   );
 };
 ColorThemeSwitchComponent.withText = function WithText({ withMoon, className, ...props }) {
-  const theme = useTheme23();
-  return /* @__PURE__ */ jsxs17(Div_default.row, { width: "fit-content", alignItems: "center", gap: theme.styles.gap, userSelect: "none", ...props, children: [
+  const theme2 = useTheme23();
+  return /* @__PURE__ */ jsxs17(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" })
@@ -5440,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({
@@ -5460,7 +5570,7 @@ var PaginationComponent = function Pagination({
   onClickNextPage,
   onChangePage
 }) {
-  const theme = useTheme24();
+  const theme2 = useTheme24();
   const mediaQuery = useMediaQuery();
   const [currentPageInternal, setCurrentPage] = useState10(currentPage);
   const pageCountInternal = pageCount ?? (itemsPerPage !== void 0 ? Math.ceil(itemsLength / itemsPerPage) : 1);
@@ -5489,14 +5599,14 @@ 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;
-  return /* @__PURE__ */ jsxs18(Div_default.row, { alignItems: "center", justifyContent: "center", gap: theme.styles.gap * 2, children: [
+  return /* @__PURE__ */ jsxs18(Div_default.row, { alignItems: "center", justifyContent: "center", gap: theme2.styles.gap * 2, children: [
     pageCountInternal > maximumVisiblePages2 && /* @__PURE__ */ jsx22(
       Button_default.icon,
       {
@@ -5513,7 +5623,7 @@ var PaginationComponent = function Pagination({
         alignItems: "center",
         justifyContent: "center",
         flexWrap: mobileFooterBreakingPoint ? "wrap" : void 0,
-        gap: theme.styles.gap,
+        gap: theme2.styles.gap,
         children: paginationItems.map((pageIndex) => {
           const isActive = currentPageInternal === pageIndex;
           return /* @__PURE__ */ jsx22(
@@ -5527,8 +5637,8 @@ var PaginationComponent = function Pagination({
                 Text_default,
                 {
                   fontWeight: isActive ? 700 : 400,
-                  color: isActive ? theme.colors.primary : theme.colors.textSecondary,
-                  transition: theme.styles.transition,
+                  color: isActive ? theme2.colors.primary : theme2.colors.textSecondary,
+                  transition: theme2.styles.transition,
                   children: pageIndex
                 }
               )
@@ -5730,7 +5840,7 @@ var TableComponent = forwardRef15(function Table({
   onChangeFilterDataValue,
   ...props
 }, ref) {
-  const theme = useTheme25();
+  const theme2 = useTheme25();
   const mediaQuery = useMediaQuery();
   const { colorTheme } = useBetterCoreContext8();
   const filterModalRef = useRef6(null);
@@ -5794,7 +5904,7 @@ var TableComponent = forwardRef15(function Table({
         }
         case "image": {
           const imageProps = (typeof column.getImageProps === "function" ? column.getImageProps?.(item, itemIndex) : column.getImageProps) ?? {};
-          return /* @__PURE__ */ jsx23(Image_default, { width: "100%", borderRadius: theme.styles.borderRadius / 2, ...imageProps });
+          return /* @__PURE__ */ jsx23(Image_default, { width: "100%", borderRadius: theme2.styles.borderRadius / 2, ...imageProps });
         }
         case "checkbox": {
           const { onChange, ...toggleInputProps } = (typeof column.getToggleInputProps === "function" ? column.getToggleInputProps?.(item, itemIndex) : column.getToggleInputProps) ?? {};
@@ -5825,7 +5935,7 @@ var TableComponent = forwardRef15(function Table({
             {
               name: "chevronDown",
               transform: `rotate(${expandedRows[itemIndex] ? 180 : 0}deg)`,
-              transition: theme.styles.transition
+              transition: theme2.styles.transition
             }
           ) });
         }
@@ -5834,7 +5944,7 @@ var TableComponent = forwardRef15(function Table({
         }
       }
     },
-    [theme, checkedItems, expandedRows]
+    [theme2, checkedItems, expandedRows]
   );
   const onClickRowElement = useCallback14(
     (item, index) => {
@@ -6053,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(
@@ -6070,7 +6180,7 @@ var TableComponent = forwardRef15(function Table({
       })
     );
   }, [memoizeFilters, name, filterData]);
-  useEffect11(() => {
+  useEffect12(() => {
     onChangeFilterDataValue?.(dataAfterFilter);
   }, [onChangeFilterDataValue, dataAfterFilter]);
   useImperativeHandle2(
@@ -6091,8 +6201,8 @@ var TableComponent = forwardRef15(function Table({
     /* @__PURE__ */ jsx23(
       Div_default,
       {
-        border: `1px solid ${theme.colors.border}`,
-        borderRadius: theme.styles.borderRadius * 2,
+        border: `1px solid ${theme2.colors.border}`,
+        borderRadius: theme2.styles.borderRadius * 2,
         overflow: !containsOverflowComponents ? "auto" : void 0,
         ...props,
         ref: wrapperComponentRef,
@@ -6103,7 +6213,7 @@ var TableComponent = forwardRef15(function Table({
             withHover: onClickRow !== void 0 || expandColumn !== void 0,
             withStickyHeader,
             colorTheme,
-            theme,
+            theme: theme2,
             containsOverflowComponents,
             withFooter,
             children: [
@@ -6120,7 +6230,7 @@ var TableComponent = forwardRef15(function Table({
                       width: "100%",
                       alignItems: "center",
                       justifyContent: column.filter ? "space-between" : column.align === "center" ? "center" : column.align === "right" ? "flex-end" : "flex-start",
-                      gap: theme.styles.gap,
+                      gap: theme2.styles.gap,
                       children: [
                         column.type === "checkbox" && onClickAllCheckboxes ? /* @__PURE__ */ jsx23(
                           ToggleInput_default.checkbox,
@@ -6134,7 +6244,7 @@ var TableComponent = forwardRef15(function Table({
                           Button_default.icon,
                           {
                             icon: "filter",
-                            color: filterData[index] ? theme.colors.primary : theme.colors.textSecondary,
+                            color: filterData[index] ? theme2.colors.primary : theme2.colors.textSecondary,
                             value: index,
                             onClickWithValue: onClickFilterButton
                           }
@@ -6177,14 +6287,14 @@ var TableComponent = forwardRef15(function Table({
                   width: "100%",
                   justifyContent: "center",
                   flexReverse: true,
-                  gap: theme.styles.gap / 2,
+                  gap: theme2.styles.gap / 2,
                   children: [
                     /* @__PURE__ */ jsxs19(
                       Text_default,
                       {
                         position: mobileFooterBreakingPoint ? "relative" : "absolute",
                         top: !mobileFooterBreakingPoint ? "50%" : void 0,
-                        color: theme.colors.textSecondary,
+                        color: theme2.colors.textSecondary,
                         transform: !mobileFooterBreakingPoint ? "translateY(-50%)" : void 0,
                         userSelect: "none",
                         children: [
@@ -6236,7 +6346,7 @@ var TableComponent = forwardRef15(function Table({
           Form_default,
           {
             form: filterForm,
-            gap: theme.styles.gap,
+            gap: theme2.styles.gap,
             submitButtonText: "Filter",
             cancelButtonText: "Clear",
             onClickCancel: openedFilterData ? onClickCancelFormFilter : void 0,
@@ -6248,9 +6358,9 @@ var TableComponent = forwardRef15(function Table({
                 /* @__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: theme.styles.gap / 2, children: [
+              openedFilterColumn.presets && /* @__PURE__ */ jsxs19(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: theme.styles.gap, children: openedFilterColumn.presets.map((preset) => /* @__PURE__ */ jsx23(
+                /* @__PURE__ */ jsx23(Div_default.row, { alignItems: "center", flexWrap: "wrap", gap: theme2.styles.gap, children: openedFilterColumn.presets.map((preset) => /* @__PURE__ */ jsx23(
                   Button_default.secondary,
                   {
                     text: filterPresetsText[preset],
@@ -6266,10 +6376,10 @@ var TableComponent = forwardRef15(function Table({
         ) : openedFilterColumn.filter === "list" ? /* @__PURE__ */ jsxs19(
           Form_default,
           {
-            gap: theme.styles.space,
+            gap: theme2.styles.space,
             submitButtonText: "Filter",
             cancelButtonText: "Clear",
-            renderActionButtons: /* @__PURE__ */ jsxs19(Div_default.row, { marginRight: "auto", alignItems: "center", gap: theme.styles.gap, children: [
+            renderActionButtons: /* @__PURE__ */ jsxs19(Div_default.row, { marginRight: "auto", alignItems: "center", gap: theme2.styles.gap, children: [
               /* @__PURE__ */ jsx23(
                 Button_default.secondary,
                 {
@@ -6300,9 +6410,9 @@ var TableComponent = forwardRef15(function Table({
                   ...filterForm.getInputFieldProps("search")
                 }
               ) }),
-              /* @__PURE__ */ jsxs19(Div_default.column, { gap: theme.styles.gap / 2, children: [
+              /* @__PURE__ */ jsxs19(Div_default.column, { gap: theme2.styles.gap / 2, children: [
                 /* @__PURE__ */ jsx23(Label_default, { text: "Possible values" }),
-                /* @__PURE__ */ jsx23(Div_default.row, { flexWrap: "wrap", gap: theme.styles.gap, children: possibleFilterListValues.length > 0 ? possibleFilterListValues.map((value) => {
+                /* @__PURE__ */ jsx23(Div_default.row, { flexWrap: "wrap", gap: theme2.styles.gap, children: possibleFilterListValues.length > 0 ? possibleFilterListValues.map((value) => {
                   const isActive = filterListSelectedItems?.includes(value.value);
                   return /* @__PURE__ */ jsx23(
                     Div_default.box,
@@ -6310,13 +6420,13 @@ var TableComponent = forwardRef15(function Table({
                       isActive,
                       value: value.value,
                       onClickWithValue: onClickFilterListItem,
-                      children: /* @__PURE__ */ jsxs19(Div_default.row, { alignItems: "center", gap: theme.styles.gap / 2, children: [
+                      children: /* @__PURE__ */ jsxs19(Div_default.row, { alignItems: "center", gap: theme2.styles.gap / 2, children: [
                         /* @__PURE__ */ jsx23(Text_default, { children: value.label || value.value }),
                         openedFilterColumn.withTotalNumber && /* @__PURE__ */ jsxs19(
                           Text_default,
                           {
                             fontSize: 14,
-                            color: isActive ? theme.colors.base + "c0" : theme.colors.textSecondary,
+                            color: isActive ? theme2.colors.base + "c0" : theme2.colors.textSecondary,
                             children: [
                               "(",
                               value.count,
@@ -6342,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";
@@ -6448,14 +6558,14 @@ var arrowStyle = (props, borderWidth) => ({
   }
 });
 var Arrow = memo24(function Arrow2(props) {
-  const theme = useTheme26();
+  const theme2 = useTheme26();
   const { position, size } = props;
   const outerProps = useMemo10(
     () => ({
       ...props,
-      color: theme.colors.border
+      color: theme2.colors.border
     }),
-    [props, theme]
+    [props, theme2]
   );
   const borderWidth = 1;
   return /* @__PURE__ */ jsx24(
@@ -6499,16 +6609,16 @@ var TooltipComponent = forwardRef16(function Tooltip({
   onClose,
   children
 }, ref) {
-  const theme = useTheme26();
+  const theme2 = useTheme26();
   const triggerHolderRef = useRef7(null);
   const contentRef = useRef7(null);
   const tooltipContainerRef = useRef7(null);
   const closeTimerRef = useRef7(void 0);
   const [isOpen, setIsOpen] = useState12(false);
   const [isOpenLate, setIsOpenLate] = useState12(false);
-  const arrowSize = withArrow ? theme.styles.gap : 0;
-  const gap = theme.styles.gap / 2;
-  const outsideScreenGap = theme.styles.gap / 2;
+  const arrowSize = withArrow ? theme2.styles.gap : 0;
+  const gap = theme2.styles.gap / 2;
+  const outsideScreenGap = theme2.styles.gap / 2;
   const totalGap = arrowSize + gap;
   const openTooltip = useCallback15(() => {
     if (disabled) return;
@@ -6565,7 +6675,7 @@ var TooltipComponent = forwardRef16(function Tooltip({
     },
     [trigger, isOpen, closeTooltip]
   );
-  useEffect12(() => {
+  useEffect13(() => {
     if (trigger === "click") {
       document.addEventListener("mousedown", onClickOutside);
       return () => {
@@ -6573,7 +6683,7 @@ var TooltipComponent = forwardRef16(function Tooltip({
       };
     }
   }, [trigger, onClickOutside]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!disabled) return;
     closeTooltip();
   }, [disabled]);
@@ -6611,7 +6721,7 @@ var TooltipComponent = forwardRef16(function Tooltip({
         /* @__PURE__ */ jsx24(
           TooltipContainer,
           {
-            theme,
+            theme: theme2,
             position,
             align,
             pointerEvents: contentPointerEvents,
@@ -6628,10 +6738,10 @@ var TooltipComponent = forwardRef16(function Tooltip({
                   position: "relative",
                   width: contentWidth,
                   minWidth: contentMinWidth,
-                  backgroundColor: backgroundColor ?? theme.colors.backgroundContent,
+                  backgroundColor: backgroundColor ?? theme2.colors.backgroundContent,
                   boxShadow: "0px 10px 20px #00000020",
-                  paddingBlock: isSmall ? theme.styles.gap / 2 : theme.styles.gap,
-                  paddingInline: asContextMenu ? 0 : isSmall ? theme.styles.space / 2 : theme.styles.space,
+                  paddingBlock: isSmall ? theme2.styles.gap / 2 : theme2.styles.gap,
+                  paddingInline: asContextMenu ? 0 : isSmall ? theme2.styles.space / 2 : theme2.styles.space,
                   overflow: asContextMenu ? "hidden" : void 0,
                   children: content
                 }
@@ -6655,9 +6765,9 @@ var TooltipComponent = forwardRef16(function Tooltip({
                 {
                   position,
                   align,
-                  sideSpace: theme.styles.borderRadius,
+                  sideSpace: theme2.styles.borderRadius,
                   size: arrowSize,
-                  color: backgroundColor ?? theme.colors.backgroundContent,
+                  color: backgroundColor ?? theme2.colors.backgroundContent,
                   isOpen
                 }
               )
@@ -6681,16 +6791,16 @@ TooltipComponent.item = forwardRef16(function Item({
   onClick,
   onClickWithValue
 }, ref) {
-  const theme = useTheme26();
+  const theme2 = useTheme26();
   return /* @__PURE__ */ jsxs20(
     Div_default.row,
     {
       alignItems: "center",
-      gap: theme.styles.space,
-      backgroundColor: theme.colors.backgroundContent,
+      gap: theme2.styles.space,
+      backgroundColor: theme2.colors.backgroundContent,
       filterHover: !disabled ? "brightness(0.9)" : "brightness(0.94)",
-      paddingBlock: theme.styles.gap,
-      paddingInline: theme.styles.space,
+      paddingBlock: theme2.styles.gap,
+      paddingInline: theme2.styles.space,
       cursor: disabled ? "not-allowed" : "pointer",
       isTabAccessed: true,
       id,
@@ -6700,29 +6810,29 @@ TooltipComponent.item = forwardRef16(function Item({
       onClickWithValue: !disabled ? onClickWithValue : void 0,
       ref,
       children: [
-        icon && /* @__PURE__ */ jsx24(Icon_default, { name: icon, color: iconColor ?? (!isActive ? theme.colors.textSecondary : void 0) }),
-        /* @__PURE__ */ jsxs20(Div_default.column, { flex: 1, gap: theme.styles.gap / 2, children: [
-          /* @__PURE__ */ jsx24(Text_default, { fontWeight: isActive ? 700 : void 0, color: textColor ?? theme.colors.textPrimary, children: text }),
-          description && /* @__PURE__ */ jsx24(Text_default, { fontSize: 14, color: theme.colors.textSecondary, children: description })
+        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__ */ 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 })
         ] })
       ]
     }
   );
 });
 TooltipComponent.divider = forwardRef16(function DividerComponent(props, ref) {
-  const theme = useTheme26();
-  return /* @__PURE__ */ jsx24(Divider_default.horizontal, { marginBlock: theme.styles.gap, ...props, ref });
+  const theme2 = useTheme26();
+  return /* @__PURE__ */ jsx24(Divider_default.horizontal, { marginBlock: theme2.styles.gap, ...props, ref });
 });
 TooltipComponent.sectionTitle = forwardRef16(function SectionTitle({ text, ...props }, ref) {
-  const theme = useTheme26();
+  const theme2 = useTheme26();
   return /* @__PURE__ */ jsx24(
     Text_default,
     {
       fontSize: 12,
       fontWeight: 700,
       textTransform: "uppercase",
-      marginBlock: theme.styles.gap / 2,
-      marginInline: theme.styles.space,
+      marginBlock: theme2.styles.gap / 2,
+      marginInline: theme2.styles.space,
       ...props,
       ref,
       children: text
@@ -6736,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;
@@ -6744,7 +6854,7 @@ var tabDotSize = 6;
 var defaultTabName = "tab";
 var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style = "default", onChange, children, ...props }, ref) {
   const reactRouterDomPlugin2 = usePlugin("react-router-dom");
-  const theme = useTheme27();
+  const theme2 = useTheme27();
   const urlQuery = reactRouterDomPlugin2 ? useUrlQuery() : void 0;
   const { componentsState } = useBetterHtmlContextInternal();
   const { colorTheme } = useBetterCoreContext9();
@@ -6760,7 +6870,7 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
     return selectedTabValue;
   });
   const [rerenderState, setRerenderState] = useState13(0);
-  const tabsGap = style === "box" ? theme.styles.gap / 2 : 0;
+  const tabsGap = style === "box" ? theme2.styles.gap / 2 : 0;
   const onClickTab = useCallback16(
     (tab) => {
       setSelectedTab(tab);
@@ -6785,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;
@@ -6794,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) {
@@ -6815,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))
@@ -6838,7 +6948,7 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
     },
     [selectedTab, onClickTab]
   );
-  return /* @__PURE__ */ jsxs21(Div_default.column, { width: "100%", gap: theme.styles.space, ...props, children: [
+  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: [
       /* @__PURE__ */ jsx25(Div_default.row, { position: "relative", width: "fit-content", gap: tabsGap, userSelect: "none", children: tabs.map((tab) => {
         const selected = tab === selectedTab;
@@ -6847,14 +6957,14 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
           {
             position: "relative",
             width: "fit-content",
-            backgroundColor: style === "box" ? selected ? theme.colors.primary : theme.colors.backgroundContent : theme.colors.backgroundBase,
-            borderRadius: style === "box" ? theme.styles.borderRadius : void 0,
-            borderTopLeftRadius: style === "borderRadiusTop" ? theme.styles.borderRadius : void 0,
-            borderTopRightRadius: style === "borderRadiusTop" ? theme.styles.borderRadius : void 0,
-            border: style === "box" ? `1px solid ${selected ? "transparent" : theme.colors.border}` : void 0,
+            backgroundColor: style === "box" ? selected ? theme2.colors.primary : theme2.colors.backgroundContent : theme2.colors.backgroundBase,
+            borderRadius: style === "box" ? theme2.styles.borderRadius : void 0,
+            borderTopLeftRadius: style === "borderRadiusTop" ? theme2.styles.borderRadius : void 0,
+            borderTopRightRadius: style === "borderRadiusTop" ? theme2.styles.borderRadius : void 0,
+            border: style === "box" ? `1px solid ${selected ? "transparent" : theme2.colors.border}` : void 0,
             filterHover: colorTheme === "dark" ? style === "box" ? "brightness(1.2)" : "brightness(2)" : "brightness(0.9)",
-            paddingInline: theme.styles.space,
-            paddingBlock: theme.styles.gap,
+            paddingInline: theme2.styles.space,
+            paddingBlock: theme2.styles.gap,
             value: tab,
             cursor: "pointer",
             isTabAccessed: true,
@@ -6867,21 +6977,21 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
                 Div_default,
                 {
                   position: "absolute",
-                  top: (theme.styles.space - tabDotSize) / 2,
-                  right: (theme.styles.space - tabDotSize) / 2,
+                  top: (theme2.styles.space - tabDotSize) / 2,
+                  right: (theme2.styles.space - tabDotSize) / 2,
                   width: tabDotSize,
                   height: tabDotSize,
-                  backgroundColor: style === "box" && selected ? theme.colors.base : theme.colors.primary,
+                  backgroundColor: style === "box" && selected ? theme2.colors.base : theme2.colors.primary,
                   borderRadius: 999,
-                  transition: theme.styles.transition
+                  transition: theme2.styles.transition
                 }
               ),
               /* @__PURE__ */ jsx25(
                 Text_default,
                 {
                   fontWeight: 700,
-                  color: !selected ? theme.colors.textSecondary : style === "box" ? theme.colors.base : void 0,
-                  transition: theme.styles.transition,
+                  color: !selected ? theme2.colors.textSecondary : style === "box" ? theme2.colors.base : void 0,
+                  transition: theme2.styles.transition,
                   whiteSpace: "nowrap",
                   children: tab
                 }
@@ -6899,8 +7009,8 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
           height: tabBottomLineWidth,
           bottom: 0,
           left: leftSpacing,
-          backgroundColor: accentColor ?? theme.colors.primary,
-          transition: firstRenderPassedRef.current ? theme.styles.transition : "none"
+          backgroundColor: accentColor ?? theme2.colors.primary,
+          transition: firstRenderPassedRef.current ? theme2.styles.transition : "none"
         }
       )
     ] }),
@@ -6913,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 {
@@ -6929,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;
@@ -6953,9 +7063,9 @@ var FoldableComponent = forwardRef18(function Foldable({
   children,
   ...props
 }, ref) {
-  const theme = useTheme28();
+  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(() => {
@@ -6970,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);
@@ -6981,7 +7091,7 @@ var FoldableComponent = forwardRef18(function Foldable({
       clearTimeout(timeout);
     };
   }, [isOpen]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!isOpen) return;
     if (!bodyRef.current) return;
     const observer = new ResizeObserver(() => {
@@ -7011,31 +7121,31 @@ var FoldableComponent = forwardRef18(function Foldable({
       {
         width: "100%",
         alignItems: "center",
-        gap: theme.styles.space,
-        paddingBlock: headerPaddingBlock ?? theme.styles.gap,
+        gap: theme2.styles.space,
+        paddingBlock: headerPaddingBlock ?? theme2.styles.gap,
         paddingInline: headerPaddingInline,
         cursor: "pointer",
         onClick: toggleOpen,
         userSelect: "none",
         children: [
-          /* @__PURE__ */ jsxs22(Div_default.row, { flex: 1, alignItems: "center", gap: theme.styles.space, children: [
+          /* @__PURE__ */ jsxs22(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: theme.styles.gap / 2, children: [
-              title && /* @__PURE__ */ jsxs22(Div_default.row, { alignItems: "center", gap: theme.styles.space, children: [
+            /* @__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__ */ jsx26(
                   Text_default,
                   {
                     as: titleAs,
                     fontWeight: 700,
                     lineHeight: "20px",
-                    color: titleColor ?? theme.colors.textPrimary,
+                    color: titleColor ?? theme2.colors.textPrimary,
                     children: title
                   }
                 ),
                 titleRightElement
               ] }),
-              description && /* @__PURE__ */ jsx26(Text_default, { color: descriptionColor ?? theme.colors.textSecondary, children: description })
+              description && /* @__PURE__ */ jsx26(Text_default, { color: descriptionColor ?? theme2.colors.textSecondary, children: description })
             ] })
           ] }),
           rightElement,
@@ -7044,37 +7154,37 @@ var FoldableComponent = forwardRef18(function Foldable({
             {
               name: "chevronDown",
               transform: `rotate(${isOpen ? 180 : 0}deg)`,
-              transition: theme.styles.transition
+              transition: theme2.styles.transition
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ jsx26(Div_default, { height: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0, transition: theme.styles.transition, children: /* @__PURE__ */ jsx26(Divider_default.horizontal, {}) }),
+    /* @__PURE__ */ jsx26(Div_default, { height: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0, transition: theme2.styles.transition, children: /* @__PURE__ */ jsx26(Divider_default.horizontal, {}) }),
     /* @__PURE__ */ jsx26(
       Div_default,
       {
         maxHeight: isOpen ? bodyVirtualHeight : 0,
         opacity: !isOpen ? 0 : void 0,
-        transition: `max-height ${isOpen ? animationDurationOpen : animationDurationClose}s ease, opacity ${theme.styles.transition}`,
+        transition: `max-height ${isOpen ? animationDurationOpen : animationDurationClose}s ease, opacity ${theme2.styles.transition}`,
         overflow: !isOpen ? "hidden" : void 0,
         pointerEvents: !isOpen ? "none" : void 0,
         ref: bodyRef,
-        children: /* @__PURE__ */ jsx26(Div_default, { paddingBlock: theme.styles.gap, paddingInline: headerPaddingInline, children })
+        children: /* @__PURE__ */ jsx26(Div_default, { paddingBlock: theme2.styles.gap, paddingInline: headerPaddingInline, children })
       }
     )
   ] });
 });
 FoldableComponent.box = forwardRef18(function Box3({ ...props }, ref) {
-  const theme = useTheme28();
+  const theme2 = useTheme28();
   return /* @__PURE__ */ jsx26(
     FoldableComponent,
     {
-      backgroundColor: theme.colors.backgroundContent,
-      border: `1px solid ${theme.colors.border}`,
-      borderRadius: theme.styles.borderRadius,
-      headerPaddingBlock: (theme.styles.gap + theme.styles.space) / 2,
-      headerPaddingInline: theme.styles.space,
+      backgroundColor: theme2.colors.backgroundContent,
+      border: `1px solid ${theme2.colors.border}`,
+      borderRadius: theme2.styles.borderRadius,
+      headerPaddingBlock: (theme2.styles.gap + theme2.styles.space) / 2,
+      headerPaddingInline: theme2.styles.space,
       ...props,
       ref
     }
@@ -7085,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";
@@ -7110,13 +7220,13 @@ var MenuItemComponent = memo27(function MenuItemComponent2({ item, backgroundCol
     );
   }
   const reactRouterDomPluginConfig = reactRouterDomPlugin2.getConfig();
-  const theme = useTheme29();
+  const theme2 = useTheme29();
   const mediaQuery = useMediaQuery();
   const location = reactRouterDomPluginConfig.useLocation();
   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;
@@ -7131,20 +7241,20 @@ var MenuItemComponent = memo27(function MenuItemComponent2({ item, backgroundCol
     }
   }, [onClick, item, isCollapsed]);
   const isActive = activeItem && item.href && activeItem.href === item.href;
-  const readyBackgroundColor = backgroundColor ?? theme.colors.backgroundContent;
+  const readyBackgroundColor = backgroundColor ?? theme2.colors.backgroundContent;
   const iconSize = 16;
-  const paddingBlock = theme.styles.gap;
-  const paddingLeft = theme.styles.gap + 2;
-  const iconGap = theme.styles.gap;
+  const paddingBlock = theme2.styles.gap;
+  const paddingLeft = theme2.styles.gap + 2;
+  const iconGap = theme2.styles.gap;
   const lineHeight = 20;
   const lineWidth = 2;
   const lineEndRadius = iconSize / 2 + iconGap * 2;
   const content = /* @__PURE__ */ jsx27(
     Tooltip_default,
     {
-      content: /* @__PURE__ */ jsxs23(Div_default.row, { alignItems: "center", gap: theme.styles.gap, children: [
+      content: /* @__PURE__ */ jsxs23(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: theme.colors.textSecondary, size: 14 })
+        item.children && /* @__PURE__ */ jsx27(Icon_default, { name: "chevronDown", color: theme2.colors.textSecondary, size: 14 })
       ] }),
       contentPointerEvents: "none",
       withArrow: true,
@@ -7157,26 +7267,26 @@ var MenuItemComponent = memo27(function MenuItemComponent2({ item, backgroundCol
           alignItems: "center",
           gap: iconGap,
           whiteSpace: "nowrap",
-          backgroundColor: isActive ? colorTheme === "dark" ? lightenColor3(theme.colors.primary, 0.7) : lightenColor3(theme.colors.primary, 0.85) : readyBackgroundColor,
-          borderRadius: theme.styles.borderRadius,
+          backgroundColor: isActive ? colorTheme === "dark" ? lightenColor3(theme2.colors.primary, 0.7) : lightenColor3(theme2.colors.primary, 0.85) : readyBackgroundColor,
+          borderRadius: theme2.styles.borderRadius,
           paddingBlock,
-          paddingLeft: isCollapsed ? theme.styles.space : paddingLeft,
-          paddingRight: theme.styles.space,
+          paddingLeft: isCollapsed ? theme2.styles.space : paddingLeft,
+          paddingRight: theme2.styles.space,
           filterHover: `brightness(${colorTheme === "dark" ? isActive ? 0.8 : 1.3 : isActive ? 0.8 : 0.95})`,
           overflow: isCollapsed ? "hidden" : void 0,
           cursor: item.disabled ? "not-allowed" : "pointer",
           opacity: item.disabled ? 0.6 : void 0,
           onClick: onClickElement,
           children: [
-            /* @__PURE__ */ jsx27(Icon_default, { name: item.iconName, color: theme.colors.primary, size: iconSize, flexShrink: 0 }),
+            /* @__PURE__ */ jsx27(Icon_default, { name: item.iconName, color: theme2.colors.primary, size: iconSize, flexShrink: 0 }),
             /* @__PURE__ */ jsx27(
               Text_default,
               {
                 flex: 1,
                 lineHeight: `${lineHeight}px`,
-                color: isActive ? theme.colors.primary : theme.colors.textPrimary,
+                color: isActive ? theme2.colors.primary : theme2.colors.textPrimary,
                 opacity: isCollapsed ? 0 : void 0,
-                transition: theme.styles.transition,
+                transition: theme2.styles.transition,
                 children: item.text
               }
             ),
@@ -7184,10 +7294,10 @@ var MenuItemComponent = memo27(function MenuItemComponent2({ item, backgroundCol
               Icon_default,
               {
                 name: "chevronDown",
-                color: theme.colors.textSecondary,
+                color: theme2.colors.textSecondary,
                 size: 14,
                 transform: isOpened ? "rotate(180deg)" : void 0,
-                transition: theme.styles.transition
+                transition: theme2.styles.transition
               }
             )
           ]
@@ -7195,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;
@@ -7206,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]);
@@ -7225,11 +7335,11 @@ var MenuItemComponent = memo27(function MenuItemComponent2({ item, backgroundCol
       {
         position: "relative",
         maxHeight: isOpened ? 1e3 : 0,
-        gap: theme.styles.gap / 2,
-        marginTop: isOpened ? theme.styles.gap / 2 : void 0,
+        gap: theme2.styles.gap / 2,
+        marginTop: isOpened ? theme2.styles.gap / 2 : void 0,
         paddingLeft: paddingLeft + iconSize + iconGap,
         overflow: "hidden",
-        transition: `max-height ${theme.styles.transition}, margin-top ${theme.styles.transition}`,
+        transition: `max-height ${theme2.styles.transition}, margin-top ${theme2.styles.transition}`,
         children: [
           item.children.map((child) => /* @__PURE__ */ jsx27(
             MenuItemComponent2,
@@ -7255,7 +7365,7 @@ var MenuItemComponent = memo27(function MenuItemComponent2({ item, backgroundCol
                     position: "relative",
                     width: lineWidth,
                     height: "100%",
-                    backgroundColor: theme.colors.border,
+                    backgroundColor: theme2.colors.border,
                     zIndex: 1
                   }
                 ),
@@ -7267,7 +7377,7 @@ var MenuItemComponent = memo27(function MenuItemComponent2({ item, backgroundCol
                     height: lineEndRadius,
                     top: `calc(100% - ${lineEndRadius / 2}px)`,
                     left: 0,
-                    border: `${lineWidth}px solid ${theme.colors.border}`,
+                    border: `${lineWidth}px solid ${theme2.colors.border}`,
                     borderRadius: 999,
                     borderTopColor: readyBackgroundColor,
                     borderLeftColor: readyBackgroundColor,
@@ -7300,7 +7410,7 @@ var SideMenuComponent = function SideMenu({
   backgroundColor,
   paddingTop
 }) {
-  const theme = useTheme29();
+  const theme2 = useTheme29();
   const mediaQuery = useMediaQuery();
   const { components, sideMenuIsCollapsed, setSideMenuIsCollapsed, sideMenuIsOpenMobile, setSideMenuIsOpenMobile } = useBetterHtmlContextInternal();
   const [activeItem, setActiveItem] = useState15();
@@ -7320,9 +7430,9 @@ var SideMenuComponent = function SideMenu({
   const isCollapsed = sideMenuIsCollapsed && !mediaQuery.size1000;
   const LinkComponentTag = components.button?.tagReplacement?.linkComponent ?? "a";
   const sideMenuWidth = components.sideMenu?.width ?? defaultSideMenuWidth;
-  const sideMenuCollapsedWidth = theme.styles.space + theme.styles.space * 2 + 16 + theme.styles.space;
-  const readyBackgroundColor = backgroundColor ?? theme.colors.backgroundContent;
-  const logoSize = sideMenuCollapsedWidth - theme.styles.space * 2;
+  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(
     Div_default.column,
     {
@@ -7332,15 +7442,15 @@ var SideMenuComponent = function SideMenu({
       top: topSpace,
       left: 0,
       backgroundColor: readyBackgroundColor,
-      borderRight: `solid 1px ${theme.colors.border}`,
+      borderRight: `solid 1px ${theme2.colors.border}`,
       transform: !mediaQuery.size1000 || sideMenuIsOpenMobile ? "translateX(0)" : "translateX(-100%)",
-      paddingTop: paddingTop ?? (logoAssetName || logoUrl ? theme.styles.gap : theme.styles.space),
-      transition: mediaQuery.size1000 ? !isCollapsed ? `transform ${theme.styles.transition}` : "none" : theme.styles.transition,
+      paddingTop: paddingTop ?? (logoAssetName || logoUrl ? theme2.styles.gap : theme2.styles.space),
+      transition: mediaQuery.size1000 ? !isCollapsed ? `transform ${theme2.styles.transition}` : "none" : theme2.styles.transition,
       userSelect: "none",
       zIndex: 10,
       children: [
-        /* @__PURE__ */ jsxs23(Div_default.column, { width: "100%", height: "100%", gap: theme.styles.space, children: [
-          (logoAssetName || logoUrl || withCloseButton && mediaQuery.size1000) && /* @__PURE__ */ jsxs23(Div_default.row, { alignItems: "center", paddingInline: theme.styles.space, 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(
               Div_default.row,
               {
@@ -7348,7 +7458,7 @@ var SideMenuComponent = function SideMenu({
                 width: sideMenuCollapsedWidth ? logoSize : void 0,
                 height: logoSize,
                 whiteSpace: "nowrap",
-                gap: theme.styles.gap,
+                gap: theme2.styles.gap,
                 children: [
                   /* @__PURE__ */ jsx27(
                     Image_default,
@@ -7367,7 +7477,7 @@ var SideMenuComponent = function SideMenu({
                       fontSize: 22,
                       fontWeight: 800,
                       opacity: !isCollapsed ? 1 : 0,
-                      transition: theme.styles.transition,
+                      transition: theme2.styles.transition,
                       userSelect: "none",
                       children: logoText
                     }
@@ -7384,9 +7494,9 @@ var SideMenuComponent = function SideMenu({
                 width: "100%",
                 height: "100%",
                 overflowY: !isCollapsed ? "auto" : void 0,
-                paddingInline: theme.styles.space,
-                paddingBottom: !isCollapsable && !readyBottomItems ? theme.styles.space : void 0,
-                children: /* @__PURE__ */ jsx27(Div_default.column, { gap: theme.styles.gap / 2, children: readyItems.map((item) => /* @__PURE__ */ jsx27(
+                paddingInline: theme2.styles.space,
+                paddingBottom: !isCollapsable && !readyBottomItems ? theme2.styles.space : void 0,
+                children: /* @__PURE__ */ jsx27(Div_default.column, { gap: theme2.styles.gap / 2, children: readyItems.map((item) => /* @__PURE__ */ jsx27(
                   MenuItemComponent,
                   {
                     item,
@@ -7400,12 +7510,12 @@ var SideMenuComponent = function SideMenu({
             readyBottomItems && /* @__PURE__ */ jsx27(
               Div_default.column,
               {
-                borderTop: mediaQuery.size1000 ? `solid 1px ${theme.colors.border}` : void 0,
-                gap: theme.styles.gap / 2,
+                borderTop: mediaQuery.size1000 ? `solid 1px ${theme2.colors.border}` : void 0,
+                gap: theme2.styles.gap / 2,
                 marginTop: "auto",
-                paddingTop: mediaQuery.size1000 ? theme.styles.space : void 0,
-                paddingInline: theme.styles.space,
-                paddingBottom: !isCollapsable ? theme.styles.space : void 0,
+                paddingTop: mediaQuery.size1000 ? theme2.styles.space : void 0,
+                paddingInline: theme2.styles.space,
+                paddingBottom: !isCollapsable ? theme2.styles.space : void 0,
                 children: readyBottomItems.map((item) => /* @__PURE__ */ jsx27(
                   MenuItemComponent,
                   {
@@ -7422,30 +7532,30 @@ var SideMenuComponent = function SideMenu({
           isCollapsable && /* @__PURE__ */ jsx27(
             Div_default,
             {
-              borderTop: `solid 1px ${theme.colors.border}`,
+              borderTop: `solid 1px ${theme2.colors.border}`,
               marginTop: !readyBottomItems ? "auto" : void 0,
-              paddingInline: theme.styles.space,
-              paddingBlock: theme.styles.space,
+              paddingInline: theme2.styles.space,
+              paddingBlock: theme2.styles.space,
               children: /* @__PURE__ */ jsx27(
                 Div_default.row,
                 {
                   alignItems: "center",
                   justifyContent: "center",
                   backgroundColor: readyBackgroundColor,
-                  borderRadius: theme.styles.borderRadius,
+                  borderRadius: theme2.styles.borderRadius,
                   cursor: "pointer",
                   filterHover: filterHover().z1,
                   isTabAccessed: true,
-                  paddingBlock: theme.styles.gap,
+                  paddingBlock: theme2.styles.gap,
                   onClick: setSideMenuIsCollapsed.toggle,
                   children: /* @__PURE__ */ jsx27(
                     Icon_default,
                     {
                       name: "chevronRight",
                       size: 20,
-                      color: theme.colors.textSecondary,
+                      color: theme2.colors.textSecondary,
                       transform: `rotate(${isCollapsed ? 0 : 180}deg)`,
-                      transition: theme.styles.transition
+                      transition: theme2.styles.transition
                     }
                   )
                 }
@@ -7457,30 +7567,30 @@ var SideMenuComponent = function SideMenu({
           Div_default.row,
           {
             position: "absolute",
-            top: theme.styles.space,
+            top: theme2.styles.space,
             left: "100%",
             backgroundColor: readyBackgroundColor,
-            border: `solid 1px ${theme.colors.border}`,
+            border: `solid 1px ${theme2.colors.border}`,
             borderLeft: "none",
-            borderTopRightRadius: theme.styles.borderRadius,
-            borderBottomRightRadius: theme.styles.borderRadius,
+            borderTopRightRadius: theme2.styles.borderRadius,
+            borderBottomRightRadius: theme2.styles.borderRadius,
             alignItems: "center",
             cursor: "pointer",
             opacity: !mediaQuery.size1000 ? 0 : void 0,
             pointerEvents: !mediaQuery.size1000 ? "none" : void 0,
-            padding: theme.styles.gap,
-            paddingRight: (theme.styles.space + theme.styles.gap) / 2,
+            padding: theme2.styles.gap,
+            paddingRight: (theme2.styles.space + theme2.styles.gap) / 2,
             transform: !mediaQuery.size1000 ? "translateX(-100%)" : void 0,
-            transition: theme.styles.transition,
+            transition: theme2.styles.transition,
             onClick: setSideMenuIsOpenMobile.toggle,
             children: /* @__PURE__ */ jsx27(
               Icon_default,
               {
                 name: "chevronRight",
                 size: 20,
-                color: theme.colors.textSecondary,
+                color: theme2.colors.textSecondary,
                 transform: sideMenuIsOpenMobile ? "rotate(180deg)" : void 0,
-                transition: theme.styles.transition
+                transition: theme2.styles.transition
               }
             )
           }
@@ -7491,18 +7601,18 @@ var SideMenuComponent = function SideMenu({
   ) });
 };
 SideMenuComponent.pageHolder = function SideMenuPageHolder({ outsideComponent, ...props }) {
-  const theme = useTheme29();
+  const theme2 = useTheme29();
   const mediaQuery = useMediaQuery();
   const { components, sideMenuIsCollapsed } = useBetterHtmlContextInternal();
   const sideMenuWidth = components.sideMenu?.width ?? defaultSideMenuWidth;
-  const sideMenuCollapsedWidth = theme.styles.space + theme.styles.space * 2 + 16 + theme.styles.space;
+  const sideMenuCollapsedWidth = theme2.styles.space + theme2.styles.space * 2 + 16 + theme2.styles.space;
   return /* @__PURE__ */ jsxs23(
     Div_default,
     {
       position: "relative",
       width: "100%",
       paddingLeft: !mediaQuery.size1000 ? !sideMenuIsCollapsed ? sideMenuWidth : sideMenuCollapsedWidth : void 0,
-      transition: theme.styles.transition,
+      transition: theme2.styles.transition,
       children: [
         outsideComponent,
         /* @__PURE__ */ jsx27(PageHolder_default, { ...props })
@@ -7511,9 +7621,9 @@ SideMenuComponent.pageHolder = function SideMenuPageHolder({ outsideComponent, .
   );
 };
 SideMenuComponent.burgerButton = function BurgerButton() {
-  const theme = useTheme29();
+  const theme2 = useTheme29();
   const { sideMenuIsOpenMobile, setSideMenuIsOpenMobile } = useBetterHtmlContextInternal();
-  const [isHovered, setIsHovered] = useBooleanState7();
+  const [isHovered, setIsHovered] = useBooleanState8();
   const width = 2;
   return /* @__PURE__ */ jsxs23(
     Div_default,
@@ -7535,10 +7645,10 @@ SideMenuComponent.burgerButton = function BurgerButton() {
             height: width,
             top: sideMenuIsOpenMobile ? `calc(50% - ${width / 2}px)` : 0,
             left: 0,
-            backgroundColor: theme.colors.border,
+            backgroundColor: theme2.colors.border,
             borderRadius: 999,
             transform: sideMenuIsOpenMobile ? "rotate(45deg)" : void 0,
-            transition: theme.styles.transition
+            transition: theme2.styles.transition
           }
         ),
         /* @__PURE__ */ jsx27(
@@ -7549,11 +7659,11 @@ SideMenuComponent.burgerButton = function BurgerButton() {
             height: width,
             top: "50%",
             left: 0,
-            backgroundColor: theme.colors.border,
+            backgroundColor: theme2.colors.border,
             borderRadius: 999,
             transform: "translateY(-50%)",
             opacity: sideMenuIsOpenMobile ? 0 : void 0,
-            transition: theme.styles.transition
+            transition: theme2.styles.transition
           }
         ),
         /* @__PURE__ */ jsx27(
@@ -7564,10 +7674,10 @@ SideMenuComponent.burgerButton = function BurgerButton() {
             height: width,
             bottom: sideMenuIsOpenMobile ? `calc(50% - ${width / 2}px)` : 0,
             left: 0,
-            backgroundColor: theme.colors.border,
+            backgroundColor: theme2.colors.border,
             borderRadius: 999,
             transform: sideMenuIsOpenMobile ? "rotate(-45deg)" : void 0,
-            transition: theme.styles.transition
+            transition: theme2.styles.transition
           }
         )
       ]
@@ -7632,7 +7742,7 @@ export {
   sideMenuControls,
   useAlertControls,
   useBetterHtmlContext,
-  useBooleanState8 as useBooleanState,
+  useBooleanState9 as useBooleanState,
   useDebounceState3 as useDebounceState,
   useForm,
   useLoader2 as useLoader,