react-better-html 1.1.217 → 1.1.219

package/dist/index.js

@@ -98,9 +98,9 @@ module.exports = __toCommonJS(index_exports);
 var import_react_better_core30 = require("react-better-core");
 
 // src/components/BetterHtmlProvider.tsx
-var import_react13 = require("react");
-var import_react_better_core12 = require("react-better-core");
-var import_styled_components8 = require("styled-components");
+var import_react14 = require("react");
+var import_react_better_core13 = require("react-better-core");
+var import_styled_components9 = require("styled-components");
 
 // src/constants/app.ts
 var appConfig = {
@@ -109,6 +109,9 @@ var appConfig = {
 var defaultAlertDuration = 2.3 * 1e3;
 var defaultSideMenuWidth = 300;
 
+// src/constants/theme.ts
+var theme = {};
+
 // src/constants/icons.ts
 var icons = {
   uploadCloud: {
@@ -187,13 +190,13 @@ var icons = {
 var assets = {};
 
 // src/components/alerts/AlertsHolder.tsx
-var import_react12 = require("react");
-var import_react_better_core11 = require("react-better-core");
+var import_react13 = require("react");
+var import_react_better_core12 = require("react-better-core");
 
 // src/components/Div.tsx
-var import_react6 = require("react");
-var import_react_better_core6 = require("react-better-core");
-var import_styled_components3 = __toESM(require("styled-components"));
+var import_react8 = require("react");
+var import_react_better_core7 = require("react-better-core");
+var import_styled_components4 = __toESM(require("styled-components"));
 
 // src/constants.ts
 var isMobileDevice = /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
@@ -875,7 +878,7 @@ var cssPropsToExclude = /* @__PURE__ */ new Set([
 
 // src/utils/hooks.ts
 function useComponentPropsGrouper(props, excludeStyleProps) {
-  const theme = (0, import_react_better_core.useTheme)();
+  const theme2 = (0, import_react_better_core.useTheme)();
   return (0, import_react.useMemo)(() => {
     const style = {};
     const hoverStyle = {};
@@ -902,8 +905,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,
@@ -925,7 +928,7 @@ function useComponentPropsWithPrefix(props, prefix) {
   }, [props, prefix]);
 }
 function useComponentInputFieldDateProps(props, holderRef, disabled) {
-  const theme = (0, import_react_better_core.useTheme)();
+  const theme2 = (0, import_react_better_core.useTheme)();
   const [isOpen, setIsOpen] = (0, import_react_better_core.useBooleanState)();
   const [isOpenLate, setIsOpenLate] = (0, import_react_better_core.useBooleanState)();
   const [isFocused, setIsFocused] = (0, import_react_better_core.useBooleanState)();
@@ -956,13 +959,13 @@ function useComponentInputFieldDateProps(props, holderRef, disabled) {
   );
   const insideInputFieldComponentProps = (0, import_react.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]
   );
@@ -1382,8 +1385,8 @@ var TextComponent = (0, import_react2.forwardRef)(function Text({ htmlContentTra
   );
 });
 TextComponent.unknown = (0, import_react2.forwardRef)(function Unknown(props, ref) {
-  const theme = (0, import_react_better_core2.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextComponent, { fontStyle: "italic", textAlign: "center", color: theme.colors.textSecondary, ref, ...props });
+  const theme2 = (0, import_react_better_core2.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextComponent, { fontStyle: "italic", textAlign: "center", color: theme2.colors.textSecondary, ref, ...props });
 });
 TextComponent.oneLine = (0, import_react2.forwardRef)(function OneLine(props, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextComponent, { textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden", ref, ...props });
@@ -1398,14 +1401,14 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 var Divider_default = {
   vertical: (0, import_react3.memo)(
     (0, import_react3.forwardRef)(function Divider({ width = 1, backgroundColor, height, ...props }, ref) {
-      const theme = (0, import_react_better_core3.useTheme)();
+      const theme2 = (0, import_react_better_core3.useTheme)();
       return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         Div_default,
         {
           width,
           height: height ?? "100%",
           flexShrink: 0,
-          backgroundColor: backgroundColor ?? theme.colors.border,
+          backgroundColor: backgroundColor ?? theme2.colors.border,
           ...props,
           ref
         }
@@ -1414,19 +1417,19 @@ var Divider_default = {
   ),
   horizontal: (0, import_react3.memo)(
     (0, import_react3.forwardRef)(function Divider2({ width = 1, backgroundColor, text, textFontSize, textColor, ...props }, ref) {
-      const theme = (0, import_react_better_core3.useTheme)();
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Div_default.row, { width: "100%", alignItems: "center", gap: text ? theme.styles.space : void 0, ...props, ref, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme.colors.border }),
-        text && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text_default, { fontSize: textFontSize, color: textColor ?? theme.colors.textSecondary, children: text }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme.colors.border })
+      const theme2 = (0, import_react_better_core3.useTheme)();
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Div_default.row, { width: "100%", alignItems: "center", gap: text ? theme2.styles.space : void 0, ...props, ref, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme2.colors.border }),
+        text && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text_default, { fontSize: textFontSize, color: textColor ?? theme2.colors.textSecondary, children: text }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme2.colors.border })
       ] });
     })
   )
 };
 
 // src/components/PageHeader.tsx
-var import_react5 = require("react");
-var import_react_better_core5 = require("react-better-core");
+var import_react7 = require("react");
+var import_react_better_core6 = require("react-better-core");
 
 // src/components/Image.tsx
 var import_react4 = require("react");
@@ -1472,19 +1475,19 @@ var Image = (0, import_react4.forwardRef)(function Image2({ name, src, ...props
   );
 });
 Image.profileImage = (0, import_react4.forwardRef)(function ProfileImage({ size = 40, letters, backgroundColor, ...props }, ref) {
-  const theme = (0, import_react_better_core4.useTheme)();
+  const theme2 = (0, import_react_better_core4.useTheme)();
   return letters ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     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__ */ (0, import_jsx_runtime3.jsx)(Text_default, { fontSize: size / 2.5, fontWeight: 700, children: letters.toUpperCase().slice(0, 2) })
     }
   ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -1492,7 +1495,7 @@ Image.profileImage = (0, import_react4.forwardRef)(function ProfileImage({ size
     {
       width: size,
       height: size,
-      border: `solid 1px ${theme.colors.border}`,
+      border: `solid 1px ${theme2.colors.border}`,
       borderRadius: 999,
       objectFit: "cover",
       ref,
@@ -1504,11 +1507,89 @@ var MemoizedImage = (0, import_react4.memo)(Image);
 MemoizedImage.profileImage = Image.profileImage;
 var Image_default = { Image: MemoizedImage }.Image;
 
-// src/components/PageHeader.tsx
+// src/components/Icon.tsx
+var import_react5 = require("react");
+var import_react_better_core5 = require("react-better-core");
+var import_styled_components3 = __toESM(require("styled-components"));
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var PageHeaderComponent = (0, import_react5.forwardRef)(function PageHeader({
+var import_react6 = require("react");
+var IconElement = import_styled_components3.default.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 = (0, import_react5.forwardRef)(function Icon2({ name, size = 16, ...props }, ref) {
+  const theme2 = (0, import_react_better_core5.useTheme)();
+  const { icons: icons2 } = (0, import_react_better_core5.useBetterCoreContext)();
+  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;
+  (0, import_react5.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime4.jsx)(
+    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__ */ (0, import_react6.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 = (0, import_react5.memo)(Icon);
+var Icon_default = { Icon: MemoizedIcon }.Icon;
+
+// src/components/PageHeader.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var PageHeaderComponent = (0, import_react7.forwardRef)(function PageHeader({
+  icon,
+  image,
   imageUrl,
   imageSize = 60,
+  imageAzProfileImage,
   title,
   titleAs = "h1",
   titleColor,
@@ -1520,38 +1601,51 @@ var PageHeaderComponent = (0, import_react5.forwardRef)(function PageHeader({
   lightMode,
   marginBottom
 }, ref) {
-  const theme = (0, import_react_better_core5.useTheme)();
+  const theme2 = (0, import_react_better_core6.useTheme)();
   const { app } = useBetterHtmlContextInternal();
   const mediaQuery = useMediaQuery();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  const ImageTag = imageAzProfileImage ? Image_default.profileImage : Image_default;
+  const readyImageSize = imageSize ?? (mediaQuery.size600 ? 46 : 60);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     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__ */ (0, import_jsx_runtime4.jsx)(Image_default.profileImage, { src: imageUrl, size: imageSize ?? (mediaQuery.size600 ? 46 : 60) }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        icon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon_default, { name: icon, size: 20, flexShrink: 0 }),
+        (image || imageUrl) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          ImageTag,
+          {
+            name: image,
+            src: imageUrl,
+            width: readyImageSize,
+            height: readyImageSize,
+            size: readyImageSize,
+            flexShrink: 0
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
           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__ */ (0, import_jsx_runtime4.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                 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__ */ (0, import_jsx_runtime4.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                       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
                       }
                     ),
@@ -1559,12 +1653,12 @@ var PageHeaderComponent = (0, import_react5.forwardRef)(function PageHeader({
                   ]
                 }
               ),
-              description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 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
                 }
@@ -1577,12 +1671,12 @@ var PageHeaderComponent = (0, import_react5.forwardRef)(function PageHeader({
     }
   );
 });
-var PageHeader2 = (0, import_react5.memo)(PageHeaderComponent);
+var PageHeader2 = (0, import_react7.memo)(PageHeaderComponent);
 var PageHeader_default = PageHeader2;
 
 // src/components/Div.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var DivStyledComponent = import_styled_components3.default.div.withConfig({
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var DivStyledComponent = import_styled_components4.default.div.withConfig({
   shouldForwardProp: (prop) => !["style", "hoverStyle"].includes(prop)
 })`
    ${(props) => props.style}
@@ -1591,7 +1685,7 @@ var DivStyledComponent = import_styled_components3.default.div.withConfig({
       ${(props) => props.hoverStyle}
    }
 `;
-var DivComponent = (0, import_react6.forwardRef)(function Div({
+var DivComponent = (0, import_react8.forwardRef)(function Div({
   as = "div",
   value,
   isTabAccessed,
@@ -1606,14 +1700,14 @@ var DivComponent = (0, import_react6.forwardRef)(function Div({
   const { style, hoverStyle, restProps } = useComponentPropsGrouper(props);
   const dataProps = useComponentPropsWithPrefix(restProps, "data");
   const ariaProps = useComponentPropsWithPrefix(restProps, "aria");
-  const onClickElement = (0, import_react6.useCallback)(
+  const onClickElement = (0, import_react8.useCallback)(
     (event) => {
       onClick?.(event);
       onClickWithValue?.(value);
     },
     [onClick, onClickWithValue, value]
   );
-  const onKeyDownElement = (0, import_react6.useCallback)(
+  const onKeyDownElement = (0, import_react8.useCallback)(
     (event) => {
       onKeyDown?.(event);
       if (!isTabAccessed) return;
@@ -1624,7 +1718,7 @@ var DivComponent = (0, import_react6.forwardRef)(function Div({
     },
     [onKeyDown, isTabAccessed]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     DivStyledComponent,
     {
       as,
@@ -1643,9 +1737,9 @@ var DivComponent = (0, import_react6.forwardRef)(function Div({
     }
   );
 });
-DivComponent.row = (0, import_react6.forwardRef)(function Row({ flexReverse, invertFlexDirection, ...props }, ref) {
+DivComponent.row = (0, import_react8.forwardRef)(function Row({ flexReverse, invertFlexDirection, ...props }, ref) {
   const reverseSuffix = flexReverse ? "-reverse" : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     DivComponent,
     {
       display: "flex",
@@ -1655,9 +1749,9 @@ DivComponent.row = (0, import_react6.forwardRef)(function Row({ flexReverse, inv
     }
   );
 });
-DivComponent.column = (0, import_react6.forwardRef)(function Column({ flexReverse, invertFlexDirection, ...props }, ref) {
+DivComponent.column = (0, import_react8.forwardRef)(function Column({ flexReverse, invertFlexDirection, ...props }, ref) {
   const reverseSuffix = flexReverse ? "-reverse" : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     DivComponent,
     {
       display: "flex",
@@ -1667,10 +1761,10 @@ DivComponent.column = (0, import_react6.forwardRef)(function Column({ flexRevers
     }
   );
 });
-DivComponent.grid = (0, import_react6.forwardRef)(function Grid(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DivComponent, { display: "grid", ref, ...props });
+DivComponent.grid = (0, import_react8.forwardRef)(function Grid(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DivComponent, { display: "grid", ref, ...props });
 });
-DivComponent.box = (0, import_react6.forwardRef)(function Box({
+DivComponent.box = (0, import_react8.forwardRef)(function Box({
   imageUrl,
   imageSize,
   title,
@@ -1687,36 +1781,36 @@ DivComponent.box = (0, import_react6.forwardRef)(function Box({
   children,
   ...props
 }, ref) {
-  const theme = (0, import_react_better_core6.useTheme)();
+  const theme2 = (0, import_react_better_core7.useTheme)();
   const withClick = props.onClick || props.onClickWithValue;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     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: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        title && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           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__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 PageHeader_default,
                 {
                   imageUrl,
@@ -1730,10 +1824,10 @@ DivComponent.box = (0, import_react6.forwardRef)(function Box({
                   textAlign,
                   rightElement,
                   lightMode,
-                  marginBottom: theme.styles.space
+                  marginBottom: theme2.styles.space
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Div2, { width: `calc(100% + ${theme.styles.space * 2}px)`, marginLeft: -theme.styles.space, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Divider_default.horizontal, {}) })
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Div2, { width: `calc(100% + ${theme2.styles.space * 2}px)`, marginLeft: -theme2.styles.space, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Divider_default.horizontal, {}) })
             ]
           }
         ),
@@ -1742,7 +1836,7 @@ DivComponent.box = (0, import_react6.forwardRef)(function Box({
     }
   );
 });
-var Div2 = (0, import_react6.memo)(DivComponent);
+var Div2 = (0, import_react8.memo)(DivComponent);
 Div2.row = DivComponent.row;
 Div2.column = DivComponent.column;
 Div2.grid = DivComponent.grid;
@@ -1750,15 +1844,16 @@ Div2.box = DivComponent.box;
 var Div_default = Div2;
 
 // src/components/alerts/Alert.tsx
-var import_react11 = require("react");
-var import_react_better_core10 = require("react-better-core");
-var import_styled_components7 = __toESM(require("styled-components"));
+var import_react12 = require("react");
+var import_react_better_core11 = require("react-better-core");
+var import_styled_components8 = __toESM(require("styled-components"));
 
 // src/plugins/alerts.ts
 var defaultAlertsPluginOptions = {
   position: "bottom",
   align: "right",
   defaultDuration: "auto",
+  defaultDisplay: {},
   maxWidth: 460,
   withLoaderBar: true,
   withCloseButton: true
@@ -1809,81 +1904,6 @@ var localStoragePlugin = (options) => ({
   })
 });
 
-// src/components/Icon.tsx
-var import_react7 = require("react");
-var import_react_better_core7 = require("react-better-core");
-var import_styled_components4 = __toESM(require("styled-components"));
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var import_react8 = require("react");
-var IconElement = import_styled_components4.default.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 = (0, import_react7.forwardRef)(function Icon2({ name, size = 16, ...props }, ref) {
-  const theme = (0, import_react_better_core7.useTheme)();
-  const { icons: icons2 } = (0, import_react_better_core7.useBetterCoreContext)();
-  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;
-  (0, import_react7.useEffect)(() => {
-    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__ */ (0, import_jsx_runtime6.jsx)(
-    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__ */ (0, import_react8.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 = (0, import_react7.memo)(Icon);
-var Icon_default = { Icon: MemoizedIcon }.Icon;
-
 // src/components/Button.tsx
 var import_react10 = require("react");
 var import_react_better_core9 = require("react-better-core");
@@ -1914,8 +1934,8 @@ var LoaderComponent = function Loader({
   disabled,
   ...props
 }) {
-  const theme = (0, import_react_better_core8.useTheme)();
-  const readyColor = color ?? theme.colors.textPrimary;
+  const theme2 = (0, import_react_better_core8.useTheme)();
+  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__ */ (0, import_jsx_runtime7.jsx)(StyledDiv, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -1934,17 +1954,17 @@ var LoaderComponent = function Loader({
   ) });
 };
 LoaderComponent.box = function Box2({ text = "Loading...", size = 20, ...props }) {
-  const theme = (0, import_react_better_core8.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Div_default.column, { width: "100%", alignItems: "center", gap: theme.styles.gap, children: [
+  const theme2 = (0, import_react_better_core8.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Div_default.column, { width: "100%", alignItems: "center", gap: theme2.styles.gap, children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Loader2, { size, ...props }),
-    text && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text_default, { textAlign: "center", color: props.color ?? theme.colors.textSecondary, children: text })
+    text && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text_default, { textAlign: "center", color: props.color ?? theme2.colors.textSecondary, children: text })
   ] });
 };
 LoaderComponent.text = function LoaderText({ text = "Loading...", size = 14, ...props }) {
-  const theme = (0, import_react_better_core8.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Div_default.row, { alignItems: "center", gap: theme.styles.gap, children: [
+  const theme2 = (0, import_react_better_core8.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Loader2, { size, ...props }),
-    text && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text_default, { textAlign: "center", color: props.color ?? theme.colors.textSecondary, children: text })
+    text && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text_default, { textAlign: "center", color: props.color ?? theme2.colors.textSecondary, children: text })
   ] });
 };
 var Loader2 = (0, import_react9.memo)(LoaderComponent);
@@ -2028,7 +2048,7 @@ var ButtonComponent = function Button({
   onClickWithValue,
   ...props
 }) {
-  const theme = (0, import_react_better_core9.useTheme)();
+  const theme2 = (0, import_react_better_core9.useTheme)();
   const isLoadingHook = (0, import_react_better_core9.useLoader)(loaderName);
   const { components } = useBetterHtmlContextInternal();
   const { colorTheme } = (0, import_react_better_core9.useBetterCoreContext)();
@@ -2050,7 +2070,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;
@@ -2058,7 +2078,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
     }
@@ -2069,7 +2089,7 @@ var ButtonComponent = function Button({
     ButtonElement,
     {
       as: href ? linkComponentTag : buttonComponentTag,
-      theme,
+      theme: theme2,
       colorTheme,
       isSmall,
       withText: text !== void 0,
@@ -2095,7 +2115,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,
@@ -2117,11 +2137,11 @@ var ButtonComponent = function Button({
             alignItems: "center",
             justifyContent: "center",
             opacity: isLoadingElement ? 1 : 0,
-            transition: theme.styles.transition,
+            transition: theme2.styles.transition,
             children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               Loader_default,
               {
-                color: props.color ?? theme.colors.base,
+                color: props.color ?? theme2.colors.base,
                 size: loaderSize,
                 disabled: !isLoadingElement
               }
@@ -2133,43 +2153,43 @@ var ButtonComponent = function Button({
   );
 };
 ButtonComponent.secondary = function Secondary({ className, ...props }) {
-  const theme = (0, import_react_better_core9.useTheme)();
+  const theme2 = (0, import_react_better_core9.useTheme)();
   const betterHtmlContext2 = useBetterHtmlContextInternal();
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     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 = (0, import_react_better_core9.useTheme)();
+  const theme2 = (0, import_react_better_core9.useTheme)();
   const betterHtmlContext2 = useBetterHtmlContextInternal();
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     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 = (0, import_react_better_core9.useTheme)();
+  const theme2 = (0, import_react_better_core9.useTheme)();
   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__ */ (0, import_jsx_runtime8.jsx)(
     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",
@@ -2213,82 +2233,416 @@ Button2.icon = ButtonComponent.icon;
 Button2.upload = ButtonComponent.upload;
 var Button_default = Button2;
 
-// src/components/alerts/Alert.tsx
+// src/components/Modal.tsx
+var import_react11 = require("react");
+var import_react_dom = require("react-dom");
+var import_react_better_core10 = require("react-better-core");
+var import_styled_components7 = __toESM(require("styled-components"));
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var StyledDiv2 = import_styled_components7.default.div.withConfig({
-  shouldForwardProp: (prop) => !["theme"].includes(prop)
+var DialogStylesElement = import_styled_components7.default.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 {
+   @keyframes fadeOutAnimation {
       from {
-         opacity: 1;
-         transform: translateX(0px);
+         transform: translateY(0px);
       }
       to {
-         opacity: 0;
-         transform: translateX(${(props) => props.theme.styles.space}px);
+         transform: translateY(${(props) => props.theme.styles.space}px);
       }
    }
-
-   @keyframes fadeOutToTop {
-      from {
-         opacity: 1;
-         transform: translateY(0px);
-      }
+`;
+var ModalComponent = (0, import_react11.forwardRef)(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 = (0, import_react_better_core10.useTheme)();
+  const { app } = useBetterHtmlContextInternal();
+  const { colorTheme } = (0, import_react_better_core10.useBetterCoreContext)();
+  const dialogRef = (0, import_react11.useRef)(null);
+  const [isOpened, setIsOpened] = (0, import_react_better_core10.useBooleanState)(false);
+  const [isOpenedLate, setIsOpenedLate] = (0, import_react_better_core10.useBooleanState)(false);
+  const onClickOpen = (0, import_react11.useCallback)(() => {
+    dialogRef.current?.showModal();
+    setIsOpened.setTrue();
+    setIsOpenedLate.setTrue();
+    if (urlQuery && name) {
+      urlQuery.setQuery(
+        {
+          [`${name}-modal`]: "opened"
+        },
+        false
+      );
+    }
+    onOpen?.();
+  }, [onOpen, urlQuery, name]);
+  const onClickClose = (0, import_react11.useCallback)(() => {
+    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 = (0, import_react11.useCallback)(
+    (event) => {
+      if (event.key === "Escape") {
+        if (!withoutCloseButton) return;
+        event.preventDefault();
+      }
+    },
+    [withoutCloseButton]
+  );
+  (0, import_react11.useEffect)(() => {
+    if (!defaultIsOpened) return;
+    onClickOpen();
+  }, []);
+  (0, import_react11.useImperativeHandle)(
+    ref,
+    () => {
+      return {
+        open: onClickOpen,
+        close: onClickClose,
+        isOpened
+      };
+    },
+    [onClickOpen, onClickClose, isOpened]
+  );
+  const headerVertical = headerTextAlign === "center";
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      DialogStylesElement,
+      {
+        theme: theme2,
+        colorTheme,
+        opacity: !isOpened ? 0 : 1,
+        onClose: onClickClose,
+        onKeyDown,
+        ref: dialogRef,
+        children: isOpenedLate ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          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__ */ (0, import_jsx_runtime9.jsxs)(
+              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__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                      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__ */ (0, import_jsx_runtime9.jsxs)(
+                            Div_default.row,
+                            {
+                              flex: 1,
+                              alignItems: "center",
+                              gap: headerVertical ? theme2.styles.space * 2 : theme2.styles.space,
+                              invertFlexDirection: headerVertical,
+                              children: [
+                                icon && (headerVertical ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                                  Div_default.row,
+                                  {
+                                    width: 76,
+                                    height: 76,
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    backgroundColor: titleColor ?? theme2.colors.textPrimary,
+                                    borderRadius: 999,
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                                      Icon_default,
+                                      {
+                                        name: icon,
+                                        size: 36,
+                                        color: headerBackgroundColor ?? theme2.colors.backgroundBase,
+                                        flexShrink: 0
+                                      }
+                                    )
+                                  }
+                                ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                                  Icon_default,
+                                  {
+                                    name: icon,
+                                    size: 24,
+                                    color: titleColor ?? theme2.colors.textPrimary,
+                                    flexShrink: 0
+                                  }
+                                )),
+                                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                                    Text_default,
+                                    {
+                                      as: "h1",
+                                      textAlign: headerTextAlign,
+                                      color: titleColor ?? theme2.colors.textPrimary,
+                                      transition: theme2.styles.transition,
+                                      children: title
+                                    }
+                                  ),
+                                  description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                                    Text_default,
+                                    {
+                                      textAlign: headerTextAlign,
+                                      color: descriptionColor ?? theme2.colors.textSecondary,
+                                      transition: theme2.styles.transition,
+                                      children: description
+                                    }
+                                  )
+                                ] })
+                              ]
+                            }
+                          ),
+                          !withoutCloseButton && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                            Button_default.icon,
+                            {
+                              icon: "XMark",
+                              marginTop: 1,
+                              iconColor: titleColor,
+                              onClick: onClickClose,
+                              transition: theme2.styles.transition,
+                              zIndex: 10
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Divider_default.horizontal, {})
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: !withoutCloseButton && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Div_default, { position: "absolute", top: theme2.styles.space, right: theme2.styles.space, zIndex: 10, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Button_default.icon, { icon: "XMark", iconColor: titleColor, onClick: onClickClose }) }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Div_default, { padding: title ? theme2.styles.space : void 0, children })
+                ]
+              }
+            )
+          }
+        ) : void 0
+      }
+    ),
+    document.body
+  );
+});
+ModalComponent.confirmation = (0, import_react11.forwardRef)(function Confirmation({ message, continueButtonText = "Continue", continueButtonLoaderName, onContinue, onCancel, ...props }, ref) {
+  const theme2 = (0, import_react_better_core10.useTheme)();
+  const modalRef = (0, import_react11.useRef)(null);
+  const onCancelElement = (0, import_react11.useCallback)(() => {
+    onCancel?.();
+    modalRef.current?.close();
+  }, [onCancel]);
+  const onContinueElement = (0, import_react11.useCallback)(() => {
+    onContinue?.();
+    modalRef.current?.close();
+  }, [onContinue]);
+  (0, import_react11.useImperativeHandle)(ref, () => modalRef.current, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ModalComponent, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { color: theme2.colors.textSecondary, children: message ?? "Do you really want to continue? This action may be irreversible." }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      Div_default.row,
+      {
+        alignItems: "center",
+        justifyContent: "flex-end",
+        gap: theme2.styles.gap,
+        marginTop: theme2.styles.space * 2,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Button_default.secondary, { text: "Cancel", onClick: onCancelElement }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Button_default, { text: continueButtonText, loaderName: continueButtonLoaderName, onClick: onContinueElement })
+        ]
+      }
+    )
+  ] });
+});
+ModalComponent.destructive = (0, import_react11.forwardRef)(function Destructive2({
+  message,
+  deleteButtonText = "Delete",
+  deleteButtonIconName = "trash",
+  deleteButtonLoaderName,
+  onDelete,
+  onCancel,
+  ...props
+}, ref) {
+  const theme2 = (0, import_react_better_core10.useTheme)();
+  const modalRef = (0, import_react11.useRef)(null);
+  const onCancelElement = (0, import_react11.useCallback)(() => {
+    onCancel?.();
+    modalRef.current?.close();
+  }, [onCancel]);
+  const onDeleteElement = (0, import_react11.useCallback)(() => {
+    onDelete?.();
+    modalRef.current?.close();
+  }, [onDelete]);
+  (0, import_react11.useImperativeHandle)(ref, () => modalRef.current, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ModalComponent, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(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__ */ (0, import_jsx_runtime9.jsxs)(
+      Div_default.row,
+      {
+        alignItems: "center",
+        justifyContent: "flex-end",
+        gap: theme2.styles.gap,
+        marginTop: theme2.styles.space * 2,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Button_default.secondary, { text: "Cancel", onClick: onCancelElement }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            Button_default.destructive,
+            {
+              icon: deleteButtonIconName,
+              text: deleteButtonText,
+              loaderName: deleteButtonLoaderName,
+              onClick: onDeleteElement
+            }
+          )
+        ]
+      }
+    )
+  ] });
+});
+var Modal2 = (0, import_react11.memo)(ModalComponent);
+Modal2.confirmation = ModalComponent.confirmation;
+Modal2.destructive = ModalComponent.destructive;
+var Modal_default = Modal2;
+
+// src/components/alerts/Alert.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var StyledDiv2 = import_styled_components8.default.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);
@@ -2327,22 +2681,24 @@ var getAlertDurationFromAuto = (duration, alert) => {
   return duration;
 };
 function Alert2({ alert }) {
-  const theme = (0, import_react_better_core10.useTheme)();
+  const theme2 = (0, import_react_better_core11.useTheme)();
   const alertControls2 = useAlertControls();
   const alertsPlugin2 = usePlugin("alerts");
   const pluginConfig = alertsPlugin2?.getConfig() ?? {};
+  const modalRef = (0, import_react12.useRef)(null);
   const defaultAlertDurationNumber = getAlertDurationFromAuto(
     alert.duration ?? pluginConfig.defaultDuration ?? defaultAlertsPluginOptions.defaultDuration,
     alert
   );
-  const intervalRef = (0, import_react11.useRef)(void 0);
-  const startTimeRef = (0, import_react11.useRef)(Date.now());
-  const remainingTimeRef = (0, import_react11.useRef)(defaultAlertDurationNumber);
-  const calledOnCloseRef = (0, import_react11.useRef)(false);
-  const [isPaused, setIsPaused] = (0, import_react11.useState)(false);
-  const [progress, setProgress] = (0, import_react11.useState)(100);
-  const [isRemoved, setIsRemoved] = (0, import_react11.useState)(false);
-  const startProgressTimer = (0, import_react11.useCallback)(() => {
+  const defaultAlertDisplay = alert.display ?? pluginConfig.defaultDisplay?.[alert.type] ?? defaultAlertsPluginOptions.defaultDisplay[alert.type] ?? "default";
+  const intervalRef = (0, import_react12.useRef)(void 0);
+  const startTimeRef = (0, import_react12.useRef)(Date.now());
+  const remainingTimeRef = (0, import_react12.useRef)(defaultAlertDurationNumber);
+  const calledOnCloseRef = (0, import_react12.useRef)(false);
+  const [isPaused, setIsPaused] = (0, import_react12.useState)(false);
+  const [progress, setProgress] = (0, import_react12.useState)(100);
+  const [isRemoved, setIsRemoved] = (0, import_react12.useState)(false);
+  const startProgressTimer = (0, import_react12.useCallback)(() => {
     if (intervalRef.current) {
       clearInterval(intervalRef.current);
     }
@@ -2354,6 +2710,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);
@@ -2364,8 +2721,8 @@ function Alert2({ alert }) {
         }, 0.2 * 1e3 - 10);
       }
     }, updateInterval);
-  }, [alert, progress]);
-  const onClickCloseAlert = (0, import_react11.useCallback)(() => {
+  }, [alert, progress, defaultAlertDisplay]);
+  const onClickCloseAlert = (0, import_react12.useCallback)(() => {
     setIsRemoved(true);
     setTimeout(() => {
       alertControls2.removeAlert(alert.id);
@@ -2375,7 +2732,7 @@ function Alert2({ alert }) {
       }
     }, 0.2 * 1e3 - 10);
   }, [alert]);
-  const onMouseEnter = (0, import_react11.useCallback)(() => {
+  const onMouseEnter = (0, import_react12.useCallback)(() => {
     setIsPaused(true);
     if (intervalRef.current) {
       clearInterval(intervalRef.current);
@@ -2383,36 +2740,47 @@ function Alert2({ alert }) {
     }
     remainingTimeRef.current = defaultAlertDurationNumber * (progress / 100);
   }, [defaultAlertDurationNumber, progress]);
-  const onMouseLeave = (0, import_react11.useCallback)(() => {
+  const onMouseLeave = (0, import_react12.useCallback)(() => {
     setIsPaused(false);
     startProgressTimer();
   }, [startProgressTimer]);
-  const alertData = (0, import_react11.useMemo)(
+  const onClickAlertModalDone = (0, import_react12.useCallback)(() => {
+    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 = (0, import_react12.useMemo)(
     () => ({
       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]
   );
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     startTimeRef.current = Date.now();
     remainingTimeRef.current = defaultAlertDurationNumber;
     startProgressTimer();
@@ -2420,8 +2788,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__ */ (0, import_jsx_runtime9.jsx)(StyledDiv2, { theme, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  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__ */ (0, import_jsx_runtime10.jsx)(
+    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__ */ (0, import_jsx_runtime10.jsx)(Div_default.row, { width: "100%", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        Button_default,
+        {
+          text: "Close",
+          backgroundColor: alertData[alert.type].backgroundColor,
+          onClick: onClickAlertModalDone
+        }
+      ) })
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StyledDiv2, { theme: theme2, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     Div_default.box,
     {
       width: "fit-content",
@@ -2432,9 +2823,9 @@ function Alert2({ alert }) {
       onMouseMove: onMouseEnter,
       onMouseLeave,
       animation,
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Div_default.column, { gap: theme.styles.space, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Div_default.row, { alignItems: "center", gap: theme.styles.gap, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Div_default.column, { gap: theme2.styles.space, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             Div_default.row,
             {
               width: 36,
@@ -2443,32 +2834,32 @@ function Alert2({ alert }) {
               justifyContent: "center",
               backgroundColor: alertData[alert.type].backgroundColor,
               borderRadius: 999,
-              marginTop: theme.styles.gap / 2,
-              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              marginTop: theme2.styles.gap / 2,
+              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 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__ */ (0, import_jsx_runtime9.jsxs)(Div_default.column, { flex: 1, gap: theme.styles.gap / 2, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { fontSize: 18, fontWeight: 700, children: alert.title ?? alertData[alert.type].title }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { color: theme.colors.textSecondary, children: alert.message })
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text_default, { fontSize: 18, fontWeight: 700, children: alertTitle }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text_default, { color: theme2.colors.textSecondary, children: alert.message })
           ] }),
-          pluginConfig.withCloseButton && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Button_default.icon, { icon: "XMark", alignSelf: "flex-start", onClick: onClickCloseAlert })
+          pluginConfig.withCloseButton && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Button_default.icon, { icon: "XMark", alignSelf: "flex-start", onClick: onClickCloseAlert })
         ] }),
-        pluginConfig.withLoaderBar && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        pluginConfig.withLoaderBar && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           Div_default,
           {
             width: "100%",
             height: 5,
-            backgroundColor: theme.colors.backgroundBase,
+            backgroundColor: theme2.colors.backgroundBase,
             borderRadius: 999,
             overflow: "hidden",
-            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               Div_default,
               {
                 width: `${progress}%`,
@@ -2484,20 +2875,20 @@ function Alert2({ alert }) {
     }
   ) });
 }
-var Alert_default = (0, import_react11.memo)(Alert2);
+var Alert_default = (0, import_react12.memo)(Alert2);
 
 // src/components/alerts/AlertsHolder.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function AlertsHolder() {
-  const theme = (0, import_react_better_core11.useTheme)();
+  const theme2 = (0, import_react_better_core12.useTheme)();
   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__ */ (0, import_jsx_runtime10.jsx)(
+  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__ */ (0, import_jsx_runtime11.jsx)(
     Div_default.column,
     {
       position: "fixed",
@@ -2505,19 +2896,19 @@ 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__ */ (0, import_jsx_runtime10.jsx)(Alert_default, { alert }, alert.id))
+      children: alerts.map((alert) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Alert_default, { alert }, alert.id))
     }
   );
 }
-var AlertsHolder_default = (0, import_react12.memo)(AlertsHolder);
+var AlertsHolder_default = (0, import_react13.memo)(AlertsHolder);
 
 // src/components/BetterHtmlProvider.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var GlobalStyle = import_styled_components8.createGlobalStyle`
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var GlobalStyle = import_styled_components9.createGlobalStyle`
    html {
       background-color: ${(props) => props.backgroundColor};
    }
@@ -2544,12 +2935,12 @@ var GlobalStyle = import_styled_components8.createGlobalStyle`
       display: none;
    }
 `;
-var betterHtmlContext = (0, import_react13.createContext)(void 0);
+var betterHtmlContext = (0, import_react14.createContext)(void 0);
 var externalBetterCoreContextValue;
 var externalBetterHtmlContextValue;
 var useBetterHtmlContext = () => {
-  const coreContext = (0, import_react_better_core12.useBetterCoreContext)();
-  const context = (0, import_react13.useContext)(betterHtmlContext);
+  const coreContext = (0, import_react_better_core13.useBetterCoreContext)();
+  const context = (0, import_react14.useContext)(betterHtmlContext);
   if (context === void 0)
     throw new Error(
       "`useBetterHtmlContext()` must be used within a `<BetterHtmlProvider>`. Make sure to add one at the root of your component tree."
@@ -2561,7 +2952,7 @@ var useBetterHtmlContext = () => {
   };
 };
 var useBetterHtmlContextInternal = () => {
-  const context = (0, import_react13.useContext)(betterHtmlContext);
+  const context = (0, import_react14.useContext)(betterHtmlContext);
   if (context === void 0)
     throw new Error(
       "`useBetterHtmlContextInternal()` must be used within a `<BetterHtmlProvider>`. Make sure to add one at the root of your component tree."
@@ -2569,12 +2960,12 @@ var useBetterHtmlContextInternal = () => {
   return context;
 };
 var useAlertControls = () => {
-  const context = (0, import_react13.useContext)(betterHtmlContext);
+  const context = (0, import_react14.useContext)(betterHtmlContext);
   if (context === void 0)
     throw new Error(
       "`useAlertControls()` must be used within a `<BetterHtmlProvider>`. Make sure to add one at the root of your component tree."
     );
-  const createAlert = (0, import_react13.useCallback)((alert) => {
+  const createAlert = (0, import_react14.useCallback)((alert) => {
     const readyAlert = {
       id: crypto.randomUUID(),
       ...alert
@@ -2582,7 +2973,7 @@ var useAlertControls = () => {
     context.setAlerts((oldValue) => [...oldValue, readyAlert]);
     return readyAlert;
   }, []);
-  const removeAlert = (0, import_react13.useCallback)((alertId) => {
+  const removeAlert = (0, import_react14.useCallback)((alertId) => {
     context.setAlerts((oldValue) => oldValue.filter((alert) => alert.id !== alertId));
   }, []);
   return {
@@ -2591,41 +2982,41 @@ var useAlertControls = () => {
   };
 };
 var usePlugin = (pluginName) => {
-  const context = (0, import_react13.useContext)(betterHtmlContext);
+  const context = (0, import_react14.useContext)(betterHtmlContext);
   if (context === void 0) {
     throw new Error(
       "`usePlugin()` must be used within a `<BetterHtmlProvider>`. Make sure to add one at the root of your component tree."
     );
   }
-  return (0, import_react13.useMemo)(
+  return (0, import_react14.useMemo)(
     () => context.plugins.find((plugin) => plugin.name === pluginName),
     [context.plugins, pluginName]
   );
 };
 function BetterHtmlProviderInternalContent({ children }) {
-  const theme = (0, import_react_better_core12.useTheme)();
+  const theme2 = (0, import_react_better_core13.useTheme)();
   const alertsPlugin2 = usePlugin("alerts");
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       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__ */ (0, import_jsx_runtime11.jsx)(AlertsHolder_default, {})
+    alertsPlugin2 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AlertsHolder_default, {})
   ] });
 }
 function BetterHtmlProviderInternal({ config, plugins, children }) {
-  const betterCoreContext = (0, import_react_better_core12.useBetterCoreContext)();
-  const [alerts, setAlerts] = (0, import_react13.useState)([]);
-  const [sideMenuIsCollapsed, setSideMenuIsCollapsed] = (0, import_react_better_core12.useBooleanState)();
-  const [sideMenuIsOpenMobile, setSideMenuIsOpenMobile] = (0, import_react_better_core12.useBooleanState)();
-  const [tabGroups, setTabGroups] = (0, import_react13.useState)([]);
-  const [tabsWithDots, setTabsWithDots] = (0, import_react13.useState)([]);
-  const readyConfig = (0, import_react13.useMemo)(
+  const betterCoreContext = (0, import_react_better_core13.useBetterCoreContext)();
+  const [alerts, setAlerts] = (0, import_react14.useState)([]);
+  const [sideMenuIsCollapsed, setSideMenuIsCollapsed] = (0, import_react_better_core13.useBooleanState)();
+  const [sideMenuIsOpenMobile, setSideMenuIsOpenMobile] = (0, import_react_better_core13.useBooleanState)();
+  const [tabGroups, setTabGroups] = (0, import_react14.useState)([]);
+  const [tabsWithDots, setTabsWithDots] = (0, import_react14.useState)([]);
+  const readyConfig = (0, import_react14.useMemo)(
     () => ({
       app: {
         ...appConfig,
@@ -2652,7 +3043,7 @@ function BetterHtmlProviderInternal({ config, plugins, children }) {
     }),
     [config, alerts, sideMenuIsCollapsed, sideMenuIsOpenMobile, plugins, tabGroups, tabsWithDots]
   );
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!plugins) return;
     plugins.forEach((plugin) => {
       plugin.initialize?.();
@@ -2660,12 +3051,15 @@ function BetterHtmlProviderInternal({ config, plugins, children }) {
   }, []);
   externalBetterCoreContextValue = betterCoreContext;
   externalBetterHtmlContextValue = readyConfig;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(betterHtmlContext.Provider, { value: readyConfig, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BetterHtmlProviderInternalContent, { children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(betterHtmlContext.Provider, { value: readyConfig, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BetterHtmlProviderInternalContent, { children }) });
 }
 function BetterHtmlProvider({ config, ...props }) {
-  const coreConfig = (0, import_react13.useMemo)(
+  const coreConfig = (0, import_react14.useMemo)(
     () => ({
-      theme: config?.theme,
+      theme: {
+        ...theme,
+        ...config?.theme
+      },
       colorTheme: config?.colorTheme ?? (localStorage.getItem("theme") === "dark" ? "dark" : "light"),
       icons: {
         ...icons,
@@ -2679,7 +3073,7 @@ function BetterHtmlProvider({ config, ...props }) {
     }),
     [config]
   );
-  const htmlConfig = (0, import_react13.useMemo)(
+  const htmlConfig = (0, import_react14.useMemo)(
     () => ({
       app: config?.app,
       sideMenuIsCollapsed: config?.sideMenuIsCollapsed,
@@ -2688,7 +3082,7 @@ function BetterHtmlProvider({ config, ...props }) {
     }),
     [config]
   );
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     const html = document.querySelector("html");
     if (!html) return;
     html.setAttribute("data-theme", localStorage.getItem("theme") === "dark" ? "dark" : "light");
@@ -2696,7 +3090,7 @@ function BetterHtmlProvider({ config, ...props }) {
       mutations.forEach((mutation) => {
         if (mutation.type === "attributes") {
           const newColorTheme = html.getAttribute("data-theme") === "dark" ? "dark" : "light";
-          import_react_better_core12.colorThemeControls.toggleTheme(newColorTheme);
+          import_react_better_core13.colorThemeControls.toggleTheme(newColorTheme);
           localStorage.setItem("theme", newColorTheme);
         }
       });
@@ -2709,9 +3103,9 @@ function BetterHtmlProvider({ config, ...props }) {
       observer.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_better_core12.BetterCoreProvider, { config: coreConfig, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BetterHtmlProviderInternal, { config: htmlConfig, ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_better_core13.BetterCoreProvider, { config: coreConfig, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BetterHtmlProviderInternal, { config: htmlConfig, ...props }) });
 }
-var BetterHtmlProvider_default = (0, import_react13.memo)(BetterHtmlProvider);
+var BetterHtmlProvider_default = (0, import_react14.memo)(BetterHtmlProvider);
 
 // src/utils/functions.ts
 var import_crypto_js = __toESM(require("crypto-js"));
@@ -2898,297 +3292,12 @@ function generateLocalStorage() {
   };
 }
 
-// src/components/Modal.tsx
-var import_react14 = require("react");
-var import_react_dom = require("react-dom");
-var import_react_better_core13 = require("react-better-core");
-var import_styled_components9 = __toESM(require("styled-components"));
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var DialogStylesElement = import_styled_components9.default.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 = (0, import_react14.forwardRef)(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 = (0, import_react_better_core13.useTheme)();
-  const { app } = useBetterHtmlContextInternal();
-  const { colorTheme } = (0, import_react_better_core13.useBetterCoreContext)();
-  const dialogRef = (0, import_react14.useRef)(null);
-  const [isOpened, setIsOpened] = (0, import_react14.useState)(false);
-  const [isOpenedLate, setIsOpenedLate] = (0, import_react14.useState)(false);
-  const onClickOpen = (0, import_react14.useCallback)(() => {
-    dialogRef.current?.showModal();
-    setIsOpened(true);
-    setIsOpenedLate(true);
-    if (urlQuery && name) {
-      urlQuery.setQuery(
-        {
-          [`${name}-modal`]: "opened"
-        },
-        false
-      );
-    }
-    onOpen?.();
-  }, [onOpen, urlQuery, name]);
-  const onClickClose = (0, import_react14.useCallback)(() => {
-    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 = (0, import_react14.useCallback)(
-    (event) => {
-      if (event.key === "Escape") {
-        if (!withoutCloseButton) return;
-        event.preventDefault();
-      }
-    },
-    [withoutCloseButton]
-  );
-  (0, import_react14.useImperativeHandle)(
-    ref,
-    () => {
-      return {
-        open: onClickOpen,
-        close: onClickClose,
-        isOpened
-      };
-    },
-    [onClickOpen, onClickClose, isOpened]
-  );
-  return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      DialogStylesElement,
-      {
-        theme,
-        colorTheme,
-        opacity: !isOpened ? 0 : 1,
-        onClose: onClickClose,
-        onKeyDown,
-        ref: dialogRef,
-        children: isOpenedLate ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          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__ */ (0, import_jsx_runtime12.jsxs)(
-              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__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-                      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__ */ (0, import_jsx_runtime12.jsxs)(Div_default.column, { flex: 1, gap: theme.styles.gap / 2, children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                              Text_default,
-                              {
-                                as: "h1",
-                                color: titleColor ?? theme.colors.textPrimary,
-                                transition: theme.styles.transition,
-                                children: title
-                              }
-                            ),
-                            description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                              Text_default,
-                              {
-                                color: descriptionColor ?? theme.colors.textSecondary,
-                                transition: theme.styles.transition,
-                                children: description
-                              }
-                            )
-                          ] }),
-                          !withoutCloseButton && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                            Button_default.icon,
-                            {
-                              icon: "XMark",
-                              marginTop: 1,
-                              iconColor: titleColor,
-                              onClick: onClickClose,
-                              transition: theme.styles.transition,
-                              zIndex: 10
-                            }
-                          )
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Divider_default.horizontal, {})
-                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: !withoutCloseButton && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Div_default, { position: "absolute", top: theme.styles.space, right: theme.styles.space, zIndex: 10, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button_default.icon, { icon: "XMark", iconColor: titleColor, onClick: onClickClose }) }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Div_default, { padding: title ? theme.styles.space : void 0, children })
-                ]
-              }
-            )
-          }
-        ) : void 0
-      }
-    ),
-    document.body
-  );
-});
-ModalComponent.confirmation = (0, import_react14.forwardRef)(function Confirmation({ message, continueButtonText = "Continue", continueButtonLoaderName, onContinue, onCancel, ...props }, ref) {
-  const theme = (0, import_react_better_core13.useTheme)();
-  const modalRef = (0, import_react14.useRef)(null);
-  const onCancelElement = (0, import_react14.useCallback)(() => {
-    onCancel?.();
-    modalRef.current?.close();
-  }, [onCancel]);
-  const onContinueElement = (0, import_react14.useCallback)(() => {
-    onContinue?.();
-    modalRef.current?.close();
-  }, [onContinue]);
-  (0, import_react14.useImperativeHandle)(ref, () => modalRef.current, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(ModalComponent, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text_default, { color: theme.colors.textSecondary, children: message ?? "Do you really want to continue? This action may be irreversible." }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-      Div_default.row,
-      {
-        alignItems: "center",
-        justifyContent: "flex-end",
-        gap: theme.styles.gap,
-        marginTop: theme.styles.space * 2,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button_default.secondary, { text: "Cancel", onClick: onCancelElement }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button_default, { text: continueButtonText, loaderName: continueButtonLoaderName, onClick: onContinueElement })
-        ]
-      }
-    )
-  ] });
-});
-ModalComponent.destructive = (0, import_react14.forwardRef)(function Destructive2({
-  message,
-  deleteButtonText = "Delete",
-  deleteButtonIconName = "trash",
-  deleteButtonLoaderName,
-  onDelete,
-  onCancel,
-  ...props
-}, ref) {
-  const theme = (0, import_react_better_core13.useTheme)();
-  const modalRef = (0, import_react14.useRef)(null);
-  const onCancelElement = (0, import_react14.useCallback)(() => {
-    onCancel?.();
-    modalRef.current?.close();
-  }, [onCancel]);
-  const onDeleteElement = (0, import_react14.useCallback)(() => {
-    onDelete?.();
-    modalRef.current?.close();
-  }, [onDelete]);
-  (0, import_react14.useImperativeHandle)(ref, () => modalRef.current, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(ModalComponent, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(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__ */ (0, import_jsx_runtime12.jsxs)(
-      Div_default.row,
-      {
-        alignItems: "center",
-        justifyContent: "flex-end",
-        gap: theme.styles.gap,
-        marginTop: theme.styles.space * 2,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button_default.secondary, { text: "Cancel", onClick: onCancelElement }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            Button_default.destructive,
-            {
-              icon: deleteButtonIconName,
-              text: deleteButtonText,
-              loaderName: deleteButtonLoaderName,
-              onClick: onDeleteElement
-            }
-          )
-        ]
-      }
-    )
-  ] });
-});
-var Modal2 = (0, import_react14.memo)(ModalComponent);
-Modal2.confirmation = ModalComponent.confirmation;
-Modal2.destructive = ModalComponent.destructive;
-var Modal_default = Modal2;
-
 // src/components/PageHolder.tsx
 var import_react15 = require("react");
 var import_react_better_core14 = require("react-better-core");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var PageHolderComponent = (0, import_react15.forwardRef)(function PageHolder({ noMaxContentWidth, children, ...props }, ref) {
-  const theme = (0, import_react_better_core14.useTheme)();
+  const theme2 = (0, import_react_better_core14.useTheme)();
   const { app } = useBetterHtmlContextInternal();
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     Div_default,
@@ -3197,7 +3306,7 @@ var PageHolderComponent = (0, import_react15.forwardRef)(function PageHolder({ n
       width: "100%",
       maxWidth: !noMaxContentWidth ? app.contentMaxWidth : void 0,
       margin: "0px auto",
-      padding: theme.styles.space,
+      padding: theme2.styles.space,
       ...props,
       ref,
       children
@@ -3216,7 +3325,7 @@ PageHolderComponent.center = (0, import_react15.forwardRef)(function Center({
   children,
   ...props
 }, ref) {
-  const theme = (0, import_react_better_core14.useTheme)();
+  const theme2 = (0, import_react_better_core14.useTheme)();
   const mediaQuery = useMediaQuery();
   const { app } = useBetterHtmlContextInternal();
   const breakingPoint = mediaQuery.size1000;
@@ -3250,10 +3359,10 @@ PageHolderComponent.center = (0, import_react15.forwardRef)(function Center({
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Div_default.column, { position: "relative", width: `${withSideComponent ? 50 : 100}%`, alignItems: "center", zIndex: 2, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           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
@@ -3296,7 +3405,7 @@ var ChipComponent = (0, import_react16.forwardRef)(function Chip({
   onClickWithValue,
   ...props
 }, ref) {
-  const theme = (0, import_react_better_core15.useTheme)();
+  const theme2 = (0, import_react_better_core15.useTheme)();
   const onClickElement = (0, import_react16.useCallback)(
     (event) => {
       onClick?.(event);
@@ -3308,23 +3417,23 @@ var ChipComponent = (0, import_react16.forwardRef)(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__ */ (0, import_jsx_runtime14.jsx)(Text_default, { color: color ?? theme.colors.textPrimary, children: text })
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text_default, { color: color ?? theme2.colors.textPrimary, children: text })
     }
   );
 });
 ChipComponent.colored = (0, import_react16.forwardRef)(function Colored({ color, withWhiteBackground, ...props }, ref) {
-  const theme = (0, import_react_better_core15.useTheme)();
+  const theme2 = (0, import_react_better_core15.useTheme)();
   const { colorTheme } = (0, import_react_better_core15.useBetterCoreContext)();
-  const readyColor = color ?? theme.colors.textSecondary;
+  const readyColor = color ?? theme2.colors.textSecondary;
   const chip = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     ChipComponent,
     {
@@ -3340,7 +3449,7 @@ ChipComponent.colored = (0, import_react16.forwardRef)(function Colored({ color,
     {
       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;
@@ -3359,7 +3468,7 @@ var import_react17 = require("react");
 var import_react_better_core16 = require("react-better-core");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function Label({ text, required, isError, color, htmlFor }) {
-  const theme = (0, import_react_better_core16.useTheme)();
+  const theme2 = (0, import_react_better_core16.useTheme)();
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     Text_default,
     {
@@ -3367,12 +3476,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__ */ (0, import_jsx_runtime15.jsxs)(Text_default, { as: "span", fontSize: 16, color: theme.colors.error, children: [
+        required && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
           " ",
           "*"
         ] })
@@ -3416,7 +3525,7 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown({
   id,
   ...props
 }, ref) {
-  const theme = (0, import_react_better_core17.useTheme)();
+  const theme2 = (0, import_react_better_core17.useTheme)();
   const inputFieldHolderRef = (0, import_react18.useRef)(null);
   const buttonsRef = (0, import_react18.useRef)(null);
   const inputRef = (0, import_react18.useRef)(null);
@@ -3546,12 +3655,12 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown({
           /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             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),
@@ -3575,7 +3684,7 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown({
       filteredOptions,
       value,
       focusedOptionIndex,
-      theme.colors,
+      theme2.colors,
       onClickOption,
       renderOption,
       renderOptionDivider
@@ -3647,16 +3756,16 @@ var DropdownComponent = (0, import_react18.forwardRef)(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__ */ (0, import_jsx_runtime16.jsx)(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__ */ (0, import_jsx_runtime16.jsx)(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__ */ (0, import_react19.createElement)(
               ChipComponentTag,
@@ -3679,21 +3788,21 @@ var DropdownComponent = (0, import_react18.forwardRef)(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__ */ (0, import_jsx_runtime16.jsx)(Div_default, { padding: `${theme.styles.space / 2}px ${theme.styles.space + theme.styles.gap}px`, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Loader_default.text, {}) }) : filteredOptions.length ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: (withoutRenderingOptionsWhenClosed ? isOpen || isOpenLate : true) ? renderedOptions : void 0 }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Div_default, { padding: `${theme.styles.space / 2}px ${theme.styles.space + theme.styles.gap}px`, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text_default.unknown, { textAlign: "left", children: debounceMinimumSymbolsRequired !== void 0 && searchQuery.length < debounceMinimumSymbolsRequired ? `Enter at least ${debounceMinimumSymbolsRequired} characters` : "No options" }) })
+            children: isLoadingDebouncedSearchQuery || debounceIsLoading ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Div_default, { padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Loader_default.text, {}) }) : filteredOptions.length ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: (withoutRenderingOptionsWhenClosed ? isOpen || isOpenLate : true) ? renderedOptions : void 0 }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Div_default, { padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text_default.unknown, { textAlign: "left", children: debounceMinimumSymbolsRequired !== void 0 && searchQuery.length < debounceMinimumSymbolsRequired ? `Enter at least ${debounceMinimumSymbolsRequired} characters` : "No options" }) })
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
@@ -3701,9 +3810,9 @@ var DropdownComponent = (0, import_react18.forwardRef)(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,
@@ -3730,9 +3839,9 @@ var DropdownComponent = (0, import_react18.forwardRef)(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
                 }
@@ -3753,9 +3862,9 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown({
   ) });
 });
 DropdownComponent.countries = (0, import_react18.forwardRef)(function Countries({ ...props }, ref) {
-  const theme = (0, import_react_better_core17.useTheme)();
+  const theme2 = (0, import_react_better_core17.useTheme)();
   const renderOption = (0, import_react18.useCallback)(
-    (option, index, isSelected) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default.row, { alignItems: "center", gap: theme.styles.gap, children: [
+    (option, index, isSelected) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Image_default, { src: `https://flagcdn.com/w80/${option.data?.code.toString().toLowerCase()}.webp`, width: 20 }),
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text_default, { children: option.label })
     ] }),
@@ -3842,7 +3951,7 @@ var SelectComponent = import_styled_components10.default.select.withConfig({
    opacity: 0;
 `;
 function Calendar({ value, minDate, maxDate, onChange }) {
-  const theme = (0, import_react_better_core18.useTheme)();
+  const theme2 = (0, import_react_better_core18.useTheme)();
   const internalYearSelectId = (0, import_react20.useId)();
   const [currentDate, setCurrentDate] = (0, import_react20.useState)(value ? new Date(value) : void 0);
   const [currentMonth, setCurrentMonth] = (0, import_react20.useState)(currentDate?.getMonth() ?? (/* @__PURE__ */ new Date()).getMonth());
@@ -3906,7 +4015,7 @@ function Calendar({ value, minDate, maxDate, onChange }) {
     setCurrentMonth(date.getMonth());
     setCurrentYear(date.getFullYear());
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.column, { width: "100%", maxWidth: 320, gap: theme.styles.gap, padding: theme.styles.space / 2, userSelect: "none", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.column, { width: "100%", maxWidth: 320, gap: theme2.styles.gap, padding: theme2.styles.space / 2, userSelect: "none", children: [
     /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.row, { width: "100%", justifyContent: "space-between", alignItems: "center", children: [
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button_default.icon, { icon: "chevronLeft", onClick: onClickPreviousMonthButton }),
       /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.row, { alignItems: "center", gap: 4, children: [
@@ -3917,7 +4026,7 @@ function Calendar({ value, minDate, maxDate, onChange }) {
           /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             SelectComponent,
             {
-              theme,
+              theme: theme2,
               value: currentYear,
               onChange: onChangeYearSelect,
               id: internalYearSelectId,
@@ -3928,7 +4037,7 @@ function Calendar({ value, minDate, maxDate, onChange }) {
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button_default.icon, { icon: "chevronRight", onClick: onClickNextMonthButton })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.grid, { width: "100%", gridTemplateColumns: "repeat(7, 1fr)", gap: theme.styles.gap / 2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.grid, { width: "100%", gridTemplateColumns: "repeat(7, 1fr)", gap: theme2.styles.gap / 2, children: [
       weekDaysIndex.map((day) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Div_default.row, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", children: getWeekDayName(day, true) }) }, day)),
       days.map((day, index) => {
         const thisDayDate = new Date(currentYear, currentMonth, day);
@@ -3944,11 +4053,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,
@@ -3958,7 +4067,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
                 }
               ),
@@ -3970,7 +4079,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)"
                 }
@@ -3987,8 +4096,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"
         }
       ) }),
@@ -3997,8 +4106,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"
         }
       ) })
@@ -4195,7 +4304,7 @@ var InputFieldComponent = (0, import_react21.forwardRef)(function InputField({
   id,
   ...props
 }, ref) {
-  const theme = (0, import_react_better_core19.useTheme)();
+  const theme2 = (0, import_react_better_core19.useTheme)();
   const internalId = (0, import_react21.useId)();
   const { colorTheme } = (0, import_react_better_core19.useBetterCoreContext)();
   const [_, debouncedValue, setDebouncedValue] = (0, import_react_better_core19.useDebounceState)(
@@ -4229,7 +4338,7 @@ var InputFieldComponent = (0, import_react21.forwardRef)(function InputField({
     onChangeValue?.(debouncedValue);
   }, [withDebounce, onChangeValue, debouncedValue]);
   const readyId = id ?? internalId;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.column, { width: "100%", gap: theme.styles.gap / 2, ...excludeStyle, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.gap / 2, ...excludeStyle, children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Label_default, { text: label, color: labelColor, required, isError: !!errorText, htmlFor: readyId }),
     /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.row, { alignItems: "stretch", width: "100%", children: [
       prefix && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
@@ -4237,12 +4346,12 @@ var InputFieldComponent = (0, import_react21.forwardRef)(function InputField({
         {
           alignItems: "center",
           justifyContent: "center",
-          border: `1px solid ${theme.colors.border}`,
+          border: `1px solid ${theme2.colors.border}`,
           borderRight: "none",
-          backgroundColor: prefixBackgroundColor ?? (colorTheme === "light" ? (0, import_react_better_core19.darkenColor)(theme.colors.backgroundContent, 0.03) : (0, import_react_better_core19.lightenColor)(theme.colors.backgroundContent, 0.1)),
-          borderTopLeftRadius: theme.styles.borderRadius,
-          borderBottomLeftRadius: theme.styles.borderRadius,
-          paddingInline: theme.styles.space,
+          backgroundColor: prefixBackgroundColor ?? (colorTheme === "light" ? (0, import_react_better_core19.darkenColor)(theme2.colors.backgroundContent, 0.03) : (0, import_react_better_core19.lightenColor)(theme2.colors.backgroundContent, 0.1)),
+          borderTopLeftRadius: theme2.styles.borderRadius,
+          borderBottomLeftRadius: theme2.styles.borderRadius,
+          paddingInline: theme2.styles.space,
           children: prefix
         }
       ),
@@ -4255,7 +4364,7 @@ var InputFieldComponent = (0, import_react21.forwardRef)(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
@@ -4264,7 +4373,7 @@ var InputFieldComponent = (0, import_react21.forwardRef)(function InputField({
           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             InputElement,
             {
-              theme,
+              theme: theme2,
               withLeftIcon: leftIcon !== void 0,
               withRightIcon: rightIcon !== void 0,
               withPrefix: prefix !== void 0,
@@ -4287,7 +4396,7 @@ var InputFieldComponent = (0, import_react21.forwardRef)(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
             }
@@ -4297,7 +4406,7 @@ var InputFieldComponent = (0, import_react21.forwardRef)(function InputField({
               name: rightIcon,
               position: "absolute",
               top: 46 / 2,
-              right: theme.styles.space + 1,
+              right: theme2.styles.space + 1,
               transform: "translateY(-50%)",
               pointerEvents: "none"
             }
@@ -4310,12 +4419,12 @@ var InputFieldComponent = (0, import_react21.forwardRef)(function InputField({
         {
           alignItems: "center",
           justifyContent: "center",
-          border: `1px solid ${theme.colors.border}`,
+          border: `1px solid ${theme2.colors.border}`,
           borderLeft: "none",
-          backgroundColor: suffixBackgroundColor ?? (colorTheme === "light" ? (0, import_react_better_core19.darkenColor)(theme.colors.backgroundContent, 0.03) : (0, import_react_better_core19.lightenColor)(theme.colors.backgroundContent, 0.1)),
-          borderTopRightRadius: theme.styles.borderRadius,
-          borderBottomRightRadius: theme.styles.borderRadius,
-          paddingInline: theme.styles.space,
+          backgroundColor: suffixBackgroundColor ?? (colorTheme === "light" ? (0, import_react_better_core19.darkenColor)(theme2.colors.backgroundContent, 0.03) : (0, import_react_better_core19.lightenColor)(theme2.colors.backgroundContent, 0.1)),
+          borderTopRightRadius: theme2.styles.borderRadius,
+          borderBottomRightRadius: theme2.styles.borderRadius,
+          paddingInline: theme2.styles.space,
           children: suffix
         }
       )
@@ -4326,7 +4435,7 @@ var InputFieldComponent = (0, import_react21.forwardRef)(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
       }
     )
@@ -4346,7 +4455,7 @@ InputFieldComponent.multiline = (0, import_react21.forwardRef)(function Multilin
   id,
   ...props
 }, ref) {
-  const theme = (0, import_react_better_core19.useTheme)();
+  const theme2 = (0, import_react_better_core19.useTheme)();
   const internalId = (0, import_react21.useId)();
   const { style, hoverStyle, restProps } = useComponentPropsGrouper(props);
   const dataProps = useComponentPropsWithPrefix(restProps, "data");
@@ -4359,7 +4468,7 @@ InputFieldComponent.multiline = (0, import_react21.forwardRef)(function Multilin
     [onChange, onChangeValue]
   );
   const readyId = id ?? internalId;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.column, { gap: theme.styles.gap / 2, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.column, { gap: theme2.styles.gap / 2, children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Label_default, { text: label, required, isError: !!errorText, htmlFor: readyId }),
     /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default, { position: "relative", width: "100%", children: [
       leftIcon && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
@@ -4368,7 +4477,7 @@ InputFieldComponent.multiline = (0, import_react21.forwardRef)(function Multilin
           name: leftIcon,
           position: "absolute",
           top: 46 / 2,
-          left: theme.styles.space + 1,
+          left: theme2.styles.space + 1,
           transform: "translateY(-50%)",
           pointerEvents: "none"
         }
@@ -4376,7 +4485,7 @@ InputFieldComponent.multiline = (0, import_react21.forwardRef)(function Multilin
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         TextareaElement,
         {
-          theme,
+          theme: theme2,
           withLeftIcon: leftIcon !== void 0,
           withRightIcon: rightIcon !== void 0,
           required,
@@ -4397,7 +4506,7 @@ InputFieldComponent.multiline = (0, import_react21.forwardRef)(function Multilin
           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
         }
@@ -4407,7 +4516,7 @@ InputFieldComponent.multiline = (0, import_react21.forwardRef)(function Multilin
           name: rightIcon,
           position: "absolute",
           top: 46 / 2,
-          right: theme.styles.space + 1,
+          right: theme2.styles.space + 1,
           transform: "translateY(-50%)",
           pointerEvents: "none"
         }
@@ -4418,8 +4527,8 @@ InputFieldComponent.multiline = (0, import_react21.forwardRef)(function Multilin
       {
         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
       }
@@ -4501,12 +4610,12 @@ InputFieldComponent.search = (0, import_react21.forwardRef)(function Search({ va
   );
 });
 InputFieldComponent.phoneNumber = (0, import_react21.forwardRef)(function PhoneNumber({ label, value, onChangeValue, labelColor, id, ...props }, ref) {
-  const theme = (0, import_react_better_core19.useTheme)();
+  const theme2 = (0, import_react_better_core19.useTheme)();
   const internalId = (0, import_react21.useId)();
   const [dropdownValue, setDropdownValue] = (0, import_react21.useState)();
   const [inputFieldValue, setInputFieldValue] = (0, import_react21.useState)(value?.toString() ?? "");
   const renderOption = (0, import_react21.useCallback)(
-    (option, index, isSelected) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.row, { alignItems: "center", gap: theme.styles.gap, children: [
+    (option, index, isSelected) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Image_default, { src: `https://flagcdn.com/w80/${option.data?.code.toString().toLowerCase()}.webp`, width: 20 }),
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { children: option.label })
     ] }),
@@ -4558,7 +4667,7 @@ InputFieldComponent.phoneNumber = (0, import_react21.forwardRef)(function PhoneN
     setInputFieldValue(newValue.slice(country?.phoneNumberExtension.length + 1));
   }, [value]);
   const readyId = id ?? internalId;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.column, { width: "100%", gap: theme.styles.gap / 2, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.gap / 2, children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       Label_default,
       {
@@ -4604,7 +4713,7 @@ InputFieldComponent.phoneNumber = (0, import_react21.forwardRef)(function PhoneN
   ] });
 });
 InputFieldComponent.date = (0, import_react21.forwardRef)(function Date2({ minDate, maxDate, ...props }, ref) {
-  const theme = (0, import_react_better_core19.useTheme)();
+  const theme2 = (0, import_react_better_core19.useTheme)();
   const holderRef = (0, import_react21.useRef)(null);
   const isMobileIOS = isMobileDevice && getBrowser() === "safari";
   const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
@@ -4626,9 +4735,9 @@ InputFieldComponent.date = (0, import_react21.forwardRef)(function Date2({ minDa
           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,
@@ -4643,7 +4752,7 @@ InputFieldComponent.date = (0, import_react21.forwardRef)(function Date2({ minDa
   );
 });
 InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime({ minDate, maxDate, defaultDateAfterTimePick, defaultTimeAfterDatePick = "00:00", ...props }, ref) {
-  const theme = (0, import_react_better_core19.useTheme)();
+  const theme2 = (0, import_react_better_core19.useTheme)();
   const holderRef = (0, import_react21.useRef)(null);
   const selectedHourRef = (0, import_react21.useRef)(null);
   const selectedMinuteRef = (0, import_react21.useRef)(null);
@@ -4685,7 +4794,7 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
   }, [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__ */ (0, import_jsx_runtime18.jsx)(
     InputFieldComponent,
     {
@@ -4697,32 +4806,32 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
           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__ */ (0, import_jsx_runtime18.jsxs)(Div_default.row, { gap: theme.styles.space, children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.row, { gap: theme2.styles.space, children: [
             /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Calendar_default, { value: internalValue, minDate, maxDate, onChange }),
             /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
               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__ */ (0, import_jsx_runtime18.jsxs)(Div_default, { height: "100%", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme.styles.gap / 2, children: "H" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "H" }),
                     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                       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) => {
@@ -4732,12 +4841,12 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
                             {
                               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,
@@ -4750,13 +4859,13 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
                     )
                   ] }),
                   /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default, { height: "100%", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme.styles.gap / 2, children: "M" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "M" }),
                     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                       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) => {
@@ -4766,12 +4875,12 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
                             {
                               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,
@@ -4797,7 +4906,7 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
   );
 });
 InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ ...props }, ref) {
-  const theme = (0, import_react_better_core19.useTheme)();
+  const theme2 = (0, import_react_better_core19.useTheme)();
   const holderRef = (0, import_react21.useRef)(null);
   const selectedHourRef = (0, import_react21.useRef)(null);
   const selectedMinuteRef = (0, import_react21.useRef)(null);
@@ -4839,9 +4948,9 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ ...pro
           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",
@@ -4862,11 +4971,11 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ ...pro
                     {
                       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,
@@ -4892,11 +5001,11 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ ...pro
                     {
                       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,
@@ -5081,7 +5190,7 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
   id,
   ...props
 }, ref) {
-  const theme = (0, import_react_better_core20.useTheme)();
+  const theme2 = (0, import_react_better_core20.useTheme)();
   const internalId = (0, import_react22.useId)();
   const { style, hoverStyle, excludeStyle, restProps } = useComponentPropsGrouper(props, true);
   const dataProps = useComponentPropsWithPrefix(restProps, "data");
@@ -5102,14 +5211,14 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
     onChange?.(newIsChecked, value);
   }, [checked, controlledChecked, onChange, value]);
   const readyId = id ?? internalId;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.column, { gap: theme.styles.gap, ...excludeStyle, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.column, { gap: theme2.styles.gap, ...excludeStyle, children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Label_default, { text: label, color: labelColor, required, isError: !!errorText, htmlFor: readyId }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.row, { alignItems: "center", gap: theme.styles.gap, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
       /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.row, { position: "relative", alignItems: "center", children: [
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           InputElement2,
           {
-            theme,
+            theme: theme2,
             type: props.type ?? "checkbox",
             checked,
             onChange: onChangeElement,
@@ -5128,12 +5237,12 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(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__ */ (0, import_jsx_runtime19.jsx)(
           Div_default,
@@ -5143,7 +5252,7 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(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,
@@ -5153,13 +5262,13 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
       ] }),
       text ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Text_default, { color, userSelect: "none", cursor: "pointer", onClick: onClickText, children: [
         text,
-        required && !label && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Text_default, { as: "span", fontSize: 16, color: theme.colors.error, children: [
+        required && !label && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
           " ",
           "*"
         ] })
       ] }) : textAdvanced ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.row, { userSelect: "none", cursor: "pointer", onClick: onClickText, children: [
         textAdvanced,
-        required && !label && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Text_default, { as: "span", fontSize: 16, color: theme.colors.error, marginLeft: 4, children: [
+        required && !label && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, marginLeft: 4, children: [
           " ",
           "*"
         ] })
@@ -5171,7 +5280,7 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(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
       }
     )
@@ -5197,7 +5306,7 @@ var ToggleInput_default = {
     id,
     ...props
   }, ref) {
-    const theme = (0, import_react_better_core20.useTheme)();
+    const theme2 = (0, import_react_better_core20.useTheme)();
     const internalId = (0, import_react22.useId)();
     const { style, hoverStyle, excludeStyle, restProps } = useComponentPropsGrouper(props, true);
     const dataProps = useComponentPropsWithPrefix(restProps, "data");
@@ -5212,13 +5321,13 @@ var ToggleInput_default = {
       onChange?.(newIsChecked, value);
     }, [disabled, checked, onChange, controlledChecked, value]);
     const readyId = id ?? internalId;
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.column, { width: "fit-content", gap: theme.styles.gap, ...excludeStyle, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.column, { width: "fit-content", gap: theme2.styles.gap, ...excludeStyle, children: [
       label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Label_default, { text: label, color: labelColor, required, isError: !!errorText, htmlFor: readyId }),
       /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         Div_default.row,
         {
           alignItems: "center",
-          gap: theme.styles.gap,
+          gap: theme2.styles.gap,
           borderRadius: 999,
           isTabAccessed: true,
           onClick: onClickElement,
@@ -5231,7 +5340,7 @@ var ToggleInput_default = {
           children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             SwitchElement,
             {
-              theme,
+              theme: theme2,
               checked,
               disabled: disabled ?? false,
               isMouseDown,
@@ -5254,7 +5363,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
         }
       )
@@ -5289,7 +5398,7 @@ var FormComponent = (0, import_react23.forwardRef)(function Form({
   children,
   ...props
 }, ref) {
-  const theme = (0, import_react_better_core21.useTheme)();
+  const theme2 = (0, import_react_better_core21.useTheme)();
   const submitButtonIsDisabledInternal = (0, import_react23.useMemo)(() => {
     if (!form || !form.requiredFields) return false;
     return Object.entries(form.values).some(
@@ -5299,7 +5408,7 @@ var FormComponent = (0, import_react23.forwardRef)(function Form({
   const SubmitButtonTag = isDestructive ? Button_default.destructive : Button_default;
   const submitButtonIsDisabledFinal = submitButtonIsDisabled || submitButtonIsDisabledInternal;
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Div_default, { width: "100%", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("form", { name, onSubmit: onSubmit ?? form?.onSubmit, ref, children: [
-    gap !== void 0 || withDividers ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Div_default.column, { gap: gap ?? (withDividers ? theme.styles.space : theme.styles.gap), children: withDividers ? import_react23.Children.toArray(children).map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react23.Fragment, { children: [
+    gap !== void 0 || withDividers ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Div_default.column, { gap: gap ?? (withDividers ? theme2.styles.space : theme2.styles.gap), children: withDividers ? import_react23.Children.toArray(children).map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react23.Fragment, { children: [
       child,
       index < import_react23.Children.toArray(children).length - 1 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Divider_default.horizontal, {})
     ] }, index)) : children }) : children,
@@ -5308,8 +5417,8 @@ var FormComponent = (0, import_react23.forwardRef)(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__ */ (0, import_jsx_runtime20.jsx)(
@@ -5347,10 +5456,10 @@ var import_react24 = require("react");
 var import_react_better_core22 = require("react-better-core");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var FormRowComponent = (0, import_react24.forwardRef)(function FormRow({ oneItemOnly, noBreakingPoint, asColumn, gap, children, ...props }, ref) {
-  const theme = (0, import_react_better_core22.useTheme)();
+  const theme2 = (0, import_react_better_core22.useTheme)();
   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__ */ (0, import_jsx_runtime21.jsxs)(Div_default.row, { alignItems: "center", gap: gap ?? readyGap, invertFlexDirection: breakingPoint, ...props, ref, children: [
     children,
     oneItemOnly && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Div_default, { width: "100%" })
@@ -5374,21 +5483,21 @@ FormRowComponent.withTitle = (0, import_react24.forwardRef)(function WithTitle({
   children,
   ...props
 }, ref) {
-  const theme = (0, import_react_better_core22.useTheme)();
+  const theme2 = (0, import_react_better_core22.useTheme)();
   const mediaQuery = useMediaQuery();
-  const titleGap = theme.styles.space;
+  const titleGap = theme2.styles.space;
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(FormRowComponent, { ...props, ref, children: [
     /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Div_default.row, { width: "100%", alignItems: "center", gap: titleGap, children: [
       icon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon_default, { name: icon }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Div_default.column, { flex: 1, gap: theme.styles.gap / 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
         /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Text_default, { as: titleAs, fontSize: titleFontSize, children: [
           title,
-          required && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Text_default, { as: "span", fontSize: 16, color: theme.colors.error, children: [
+          required && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
             " ",
             "*"
           ] })
         ] }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text_default, { fontSize: descriptionFontSize, color: theme.colors.textSecondary, children: description })
+        description && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text_default, { fontSize: descriptionFontSize, color: theme2.colors.textSecondary, children: description })
       ] }),
       isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Div_default, { width: 26 - titleGap })
     ] }),
@@ -5399,14 +5508,14 @@ FormRowComponent.withTitle = (0, import_react24.forwardRef)(function WithTitle({
         width: props.noBreakingPoint && mediaQuery.size900 ? void 0 : "100%",
         alignItems: "center",
         justifyContent: alignChildren,
-        gap: theme.styles.gap,
+        gap: theme2.styles.gap,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             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,
@@ -5414,7 +5523,7 @@ FormRowComponent.withTitle = (0, import_react24.forwardRef)(function WithTitle({
             }
           ),
           children,
-          withActions && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Div_default.row, { alignItems: "center", gap: theme.styles.gap, children: [
+          withActions && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
             onClickReset && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button_default.icon, { icon: "XMark", loaderName: resetButtonLoaderName, onClick: onClickReset }),
             /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button_default.icon, { icon: "check", loaderName: saveButtonLoaderName, onClick: onClickSave })
           ] })
@@ -5470,8 +5579,8 @@ var ColorThemeSwitchComponent = function ColorThemeSwitch({
   );
 };
 ColorThemeSwitchComponent.withText = function WithText({ withMoon, className, ...props }) {
-  const theme = (0, import_react_better_core23.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Div_default.row, { width: "fit-content", alignItems: "center", gap: theme.styles.gap, userSelect: "none", ...props, children: [
+  const theme2 = (0, import_react_better_core23.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Div_default.row, { width: "fit-content", alignItems: "center", gap: theme2.styles.gap, userSelect: "none", ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Text_default, { children: "Light" }),
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ColorThemeSwitchComponent, { withMoon, className }),
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Text_default, { children: "Dark" })
@@ -5500,7 +5609,7 @@ var PaginationComponent = function Pagination({
   onClickNextPage,
   onChangePage
 }) {
-  const theme = (0, import_react_better_core24.useTheme)();
+  const theme2 = (0, import_react_better_core24.useTheme)();
   const mediaQuery = useMediaQuery();
   const [currentPageInternal, setCurrentPage] = (0, import_react26.useState)(currentPage);
   const pageCountInternal = pageCount ?? (itemsPerPage !== void 0 ? Math.ceil(itemsLength / itemsPerPage) : 1);
@@ -5536,7 +5645,7 @@ var PaginationComponent = function Pagination({
     setCurrentPage(currentPage);
   }, [currentPage]);
   const mobileFooterBreakingPoint = mediaQuery.size700 && pageCountInternal > maximumVisiblePages2 / 1.4;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Div_default.row, { alignItems: "center", justifyContent: "center", gap: theme.styles.gap * 2, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Div_default.row, { alignItems: "center", justifyContent: "center", gap: theme2.styles.gap * 2, children: [
     pageCountInternal > maximumVisiblePages2 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       Button_default.icon,
       {
@@ -5553,7 +5662,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__ */ (0, import_jsx_runtime23.jsx)(
@@ -5567,8 +5676,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
                 }
               )
@@ -5770,7 +5879,7 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
   onChangeFilterDataValue,
   ...props
 }, ref) {
-  const theme = (0, import_react_better_core25.useTheme)();
+  const theme2 = (0, import_react_better_core25.useTheme)();
   const mediaQuery = useMediaQuery();
   const { colorTheme } = (0, import_react_better_core25.useBetterCoreContext)();
   const filterModalRef = (0, import_react27.useRef)(null);
@@ -5834,7 +5943,7 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
         }
         case "image": {
           const imageProps = (typeof column.getImageProps === "function" ? column.getImageProps?.(item, itemIndex) : column.getImageProps) ?? {};
-          return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Image_default, { width: "100%", borderRadius: theme.styles.borderRadius / 2, ...imageProps });
+          return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(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) ?? {};
@@ -5865,7 +5974,7 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
             {
               name: "chevronDown",
               transform: `rotate(${expandedRows[itemIndex] ? 180 : 0}deg)`,
-              transition: theme.styles.transition
+              transition: theme2.styles.transition
             }
           ) });
         }
@@ -5874,7 +5983,7 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
         }
       }
     },
-    [theme, checkedItems, expandedRows]
+    [theme2, checkedItems, expandedRows]
   );
   const onClickRowElement = (0, import_react27.useCallback)(
     (item, index) => {
@@ -6131,8 +6240,8 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
     /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       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,
@@ -6143,7 +6252,7 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
             withHover: onClickRow !== void 0 || expandColumn !== void 0,
             withStickyHeader,
             colorTheme,
-            theme,
+            theme: theme2,
             containsOverflowComponents,
             withFooter,
             children: [
@@ -6160,7 +6269,7 @@ var TableComponent = (0, import_react27.forwardRef)(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__ */ (0, import_jsx_runtime24.jsx)(
                           ToggleInput_default.checkbox,
@@ -6174,7 +6283,7 @@ var TableComponent = (0, import_react27.forwardRef)(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
                           }
@@ -6217,14 +6326,14 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
                   width: "100%",
                   justifyContent: "center",
                   flexReverse: true,
-                  gap: theme.styles.gap / 2,
+                  gap: theme2.styles.gap / 2,
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                       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: [
@@ -6276,7 +6385,7 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
           Form_default,
           {
             form: filterForm,
-            gap: theme.styles.gap,
+            gap: theme2.styles.gap,
             submitButtonText: "Filter",
             cancelButtonText: "Clear",
             onClickCancel: openedFilterData ? onClickCancelFormFilter : void 0,
@@ -6288,9 +6397,9 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
                 /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InputField_default.dateTime, { label: "Min", ...filterForm.getInputFieldProps("min") }),
                 /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InputField_default.dateTime, { label: "Max", ...filterForm.getInputFieldProps("max") })
               ] }) }),
-              openedFilterColumn.presets && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Div_default.column, { gap: theme.styles.gap / 2, children: [
+              openedFilterColumn.presets && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Div_default.column, { gap: theme2.styles.gap / 2, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Label_default, { text: "Presets" }),
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Div_default.row, { alignItems: "center", flexWrap: "wrap", gap: theme.styles.gap, children: openedFilterColumn.presets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Div_default.row, { alignItems: "center", flexWrap: "wrap", gap: theme2.styles.gap, children: openedFilterColumn.presets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   Button_default.secondary,
                   {
                     text: filterPresetsText[preset],
@@ -6306,10 +6415,10 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
         ) : openedFilterColumn.filter === "list" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
           Form_default,
           {
-            gap: theme.styles.space,
+            gap: theme2.styles.space,
             submitButtonText: "Filter",
             cancelButtonText: "Clear",
-            renderActionButtons: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Div_default.row, { marginRight: "auto", alignItems: "center", gap: theme.styles.gap, children: [
+            renderActionButtons: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Div_default.row, { marginRight: "auto", alignItems: "center", gap: theme2.styles.gap, children: [
               /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 Button_default.secondary,
                 {
@@ -6340,9 +6449,9 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
                   ...filterForm.getInputFieldProps("search")
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Div_default.column, { gap: theme.styles.gap / 2, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Div_default.column, { gap: theme2.styles.gap / 2, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Label_default, { text: "Possible values" }),
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Div_default.row, { flexWrap: "wrap", gap: theme.styles.gap, children: possibleFilterListValues.length > 0 ? possibleFilterListValues.map((value) => {
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Div_default.row, { flexWrap: "wrap", gap: theme2.styles.gap, children: possibleFilterListValues.length > 0 ? possibleFilterListValues.map((value) => {
                   const isActive = filterListSelectedItems?.includes(value.value);
                   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                     Div_default.box,
@@ -6350,13 +6459,13 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
                       isActive,
                       value: value.value,
                       onClickWithValue: onClickFilterListItem,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Div_default.row, { alignItems: "center", gap: theme.styles.gap / 2, children: [
+                      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap / 2, children: [
                         /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text_default, { children: value.label || value.value }),
                         openedFilterColumn.withTotalNumber && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                           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,
@@ -6488,14 +6597,14 @@ var arrowStyle = (props, borderWidth) => ({
   }
 });
 var Arrow = (0, import_react28.memo)(function Arrow2(props) {
-  const theme = (0, import_react_better_core26.useTheme)();
+  const theme2 = (0, import_react_better_core26.useTheme)();
   const { position, size } = props;
   const outerProps = (0, import_react28.useMemo)(
     () => ({
       ...props,
-      color: theme.colors.border
+      color: theme2.colors.border
     }),
-    [props, theme]
+    [props, theme2]
   );
   const borderWidth = 1;
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
@@ -6539,16 +6648,16 @@ var TooltipComponent = (0, import_react28.forwardRef)(function Tooltip({
   onClose,
   children
 }, ref) {
-  const theme = (0, import_react_better_core26.useTheme)();
+  const theme2 = (0, import_react_better_core26.useTheme)();
   const triggerHolderRef = (0, import_react28.useRef)(null);
   const contentRef = (0, import_react28.useRef)(null);
   const tooltipContainerRef = (0, import_react28.useRef)(null);
   const closeTimerRef = (0, import_react28.useRef)(void 0);
   const [isOpen, setIsOpen] = (0, import_react28.useState)(false);
   const [isOpenLate, setIsOpenLate] = (0, import_react28.useState)(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 = (0, import_react28.useCallback)(() => {
     if (disabled) return;
@@ -6651,7 +6760,7 @@ var TooltipComponent = (0, import_react28.forwardRef)(function Tooltip({
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           TooltipContainer,
           {
-            theme,
+            theme: theme2,
             position,
             align,
             pointerEvents: contentPointerEvents,
@@ -6668,10 +6777,10 @@ var TooltipComponent = (0, import_react28.forwardRef)(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
                 }
@@ -6695,9 +6804,9 @@ var TooltipComponent = (0, import_react28.forwardRef)(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
                 }
               )
@@ -6721,16 +6830,16 @@ TooltipComponent.item = (0, import_react28.forwardRef)(function Item({
   onClick,
   onClickWithValue
 }, ref) {
-  const theme = (0, import_react_better_core26.useTheme)();
+  const theme2 = (0, import_react_better_core26.useTheme)();
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     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,
@@ -6740,29 +6849,29 @@ TooltipComponent.item = (0, import_react28.forwardRef)(function Item({
       onClickWithValue: !disabled ? onClickWithValue : void 0,
       ref,
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon_default, { name: icon, color: iconColor ?? (!isActive ? theme.colors.textSecondary : void 0) }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Div_default.column, { flex: 1, gap: theme.styles.gap / 2, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text_default, { fontWeight: isActive ? 700 : void 0, color: textColor ?? theme.colors.textPrimary, children: text }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text_default, { fontSize: 14, color: theme.colors.textSecondary, children: description })
+        icon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon_default, { name: icon, color: iconColor ?? (!isActive ? theme2.colors.textSecondary : void 0) }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text_default, { fontWeight: isActive ? 700 : void 0, color: textColor ?? theme2.colors.textPrimary, children: text }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text_default, { fontSize: 14, color: theme2.colors.textSecondary, children: description })
         ] })
       ]
     }
   );
 });
 TooltipComponent.divider = (0, import_react28.forwardRef)(function DividerComponent(props, ref) {
-  const theme = (0, import_react_better_core26.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Divider_default.horizontal, { marginBlock: theme.styles.gap, ...props, ref });
+  const theme2 = (0, import_react_better_core26.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Divider_default.horizontal, { marginBlock: theme2.styles.gap, ...props, ref });
 });
 TooltipComponent.sectionTitle = (0, import_react28.forwardRef)(function SectionTitle({ text, ...props }, ref) {
-  const theme = (0, import_react_better_core26.useTheme)();
+  const theme2 = (0, import_react_better_core26.useTheme)();
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     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
@@ -6784,7 +6893,7 @@ var tabDotSize = 6;
 var defaultTabName = "tab";
 var TabsComponent = (0, import_react29.forwardRef)(function Tabs({ tabs, name, accentColor, style = "default", onChange, children, ...props }, ref) {
   const reactRouterDomPlugin2 = usePlugin("react-router-dom");
-  const theme = (0, import_react_better_core27.useTheme)();
+  const theme2 = (0, import_react_better_core27.useTheme)();
   const urlQuery = reactRouterDomPlugin2 ? useUrlQuery() : void 0;
   const { componentsState } = useBetterHtmlContextInternal();
   const { colorTheme } = (0, import_react_better_core27.useBetterCoreContext)();
@@ -6800,7 +6909,7 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({ tabs, name, a
     return selectedTabValue;
   });
   const [rerenderState, setRerenderState] = (0, import_react29.useState)(0);
-  const tabsGap = style === "box" ? theme.styles.gap / 2 : 0;
+  const tabsGap = style === "box" ? theme2.styles.gap / 2 : 0;
   const onClickTab = (0, import_react29.useCallback)(
     (tab) => {
       setSelectedTab(tab);
@@ -6878,7 +6987,7 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({ tabs, name, a
     },
     [selectedTab, onClickTab]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Div_default.column, { width: "100%", gap: theme.styles.space, ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.space, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Div_default, { position: "relative", className: "react-better-html-no-scrollbar", overflowY: "auto", children: [
       /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Div_default.row, { position: "relative", width: "fit-content", gap: tabsGap, userSelect: "none", children: tabs.map((tab) => {
         const selected = tab === selectedTab;
@@ -6887,14 +6996,14 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({ tabs, name, a
           {
             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,
@@ -6907,21 +7016,21 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({ tabs, name, a
                 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__ */ (0, import_jsx_runtime26.jsx)(
                 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
                 }
@@ -6939,8 +7048,8 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({ tabs, name, a
           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"
         }
       )
     ] }),
@@ -6993,7 +7102,7 @@ var FoldableComponent = (0, import_react30.forwardRef)(function Foldable({
   children,
   ...props
 }, ref) {
-  const theme = (0, import_react_better_core28.useTheme)();
+  const theme2 = (0, import_react_better_core28.useTheme)();
   const bodyRef = (0, import_react30.useRef)(null);
   const [internalIsOpen, setInternalIsOpen] = (0, import_react_better_core28.useBooleanState)(defaultOpen);
   const [bodyVirtualHeight, setBodyVirtualHeight] = (0, import_react30.useState)();
@@ -7051,31 +7160,31 @@ var FoldableComponent = (0, import_react30.forwardRef)(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__ */ (0, import_jsx_runtime27.jsxs)(Div_default.row, { flex: 1, alignItems: "center", gap: theme.styles.space, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.row, { flex: 1, alignItems: "center", gap: theme2.styles.space, children: [
             icon && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon_default, { name: icon, size: 20, flexShrink: 0 }),
             image && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Image_default.profileImage, { name: image, size: 24, flexShrink: 0 }),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.column, { gap: theme.styles.gap / 2, children: [
-              title && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.row, { alignItems: "center", gap: theme.styles.space, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.column, { gap: theme2.styles.gap / 2, children: [
+              title && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.space, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   Text_default,
                   {
                     as: titleAs,
                     fontWeight: 700,
                     lineHeight: "20px",
-                    color: titleColor ?? theme.colors.textPrimary,
+                    color: titleColor ?? theme2.colors.textPrimary,
                     children: title
                   }
                 ),
                 titleRightElement
               ] }),
-              description && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text_default, { color: descriptionColor ?? theme.colors.textSecondary, children: description })
+              description && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text_default, { color: descriptionColor ?? theme2.colors.textSecondary, children: description })
             ] })
           ] }),
           rightElement,
@@ -7084,37 +7193,37 @@ var FoldableComponent = (0, import_react30.forwardRef)(function Foldable({
             {
               name: "chevronDown",
               transform: `rotate(${isOpen ? 180 : 0}deg)`,
-              transition: theme.styles.transition
+              transition: theme2.styles.transition
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Div_default, { height: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0, transition: theme.styles.transition, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Divider_default.horizontal, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Div_default, { height: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0, transition: theme2.styles.transition, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Divider_default.horizontal, {}) }),
     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       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__ */ (0, import_jsx_runtime27.jsx)(Div_default, { paddingBlock: theme.styles.gap, paddingInline: headerPaddingInline, children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Div_default, { paddingBlock: theme2.styles.gap, paddingInline: headerPaddingInline, children })
       }
     )
   ] });
 });
 FoldableComponent.box = (0, import_react30.forwardRef)(function Box3({ ...props }, ref) {
-  const theme = (0, import_react_better_core28.useTheme)();
+  const theme2 = (0, import_react_better_core28.useTheme)();
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     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
     }
@@ -7145,7 +7254,7 @@ var MenuItemComponent = (0, import_react31.memo)(function MenuItemComponent2({ i
     );
   }
   const reactRouterDomPluginConfig = reactRouterDomPlugin2.getConfig();
-  const theme = (0, import_react_better_core29.useTheme)();
+  const theme2 = (0, import_react_better_core29.useTheme)();
   const mediaQuery = useMediaQuery();
   const location = reactRouterDomPluginConfig.useLocation();
   const { components, sideMenuIsCollapsed, setSideMenuIsCollapsed } = useBetterHtmlContextInternal();
@@ -7166,20 +7275,20 @@ var MenuItemComponent = (0, import_react31.memo)(function MenuItemComponent2({ i
     }
   }, [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__ */ (0, import_jsx_runtime28.jsx)(
     Tooltip_default,
     {
-      content: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Div_default.row, { alignItems: "center", gap: theme.styles.gap, children: [
+      content: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
         /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Text_default, { whiteSpace: "nowrap", children: item.text }),
-        item.children && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon_default, { name: "chevronDown", color: theme.colors.textSecondary, size: 14 })
+        item.children && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon_default, { name: "chevronDown", color: theme2.colors.textSecondary, size: 14 })
       ] }),
       contentPointerEvents: "none",
       withArrow: true,
@@ -7192,26 +7301,26 @@ var MenuItemComponent = (0, import_react31.memo)(function MenuItemComponent2({ i
           alignItems: "center",
           gap: iconGap,
           whiteSpace: "nowrap",
-          backgroundColor: isActive ? colorTheme === "dark" ? (0, import_react_better_core29.lightenColor)(theme.colors.primary, 0.7) : (0, import_react_better_core29.lightenColor)(theme.colors.primary, 0.85) : readyBackgroundColor,
-          borderRadius: theme.styles.borderRadius,
+          backgroundColor: isActive ? colorTheme === "dark" ? (0, import_react_better_core29.lightenColor)(theme2.colors.primary, 0.7) : (0, import_react_better_core29.lightenColor)(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__ */ (0, import_jsx_runtime28.jsx)(Icon_default, { name: item.iconName, color: theme.colors.primary, size: iconSize, flexShrink: 0 }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon_default, { name: item.iconName, color: theme2.colors.primary, size: iconSize, flexShrink: 0 }),
             /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               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
               }
             ),
@@ -7219,10 +7328,10 @@ var MenuItemComponent = (0, import_react31.memo)(function MenuItemComponent2({ i
               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
               }
             )
           ]
@@ -7260,11 +7369,11 @@ var MenuItemComponent = (0, import_react31.memo)(function MenuItemComponent2({ i
       {
         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__ */ (0, import_jsx_runtime28.jsx)(
             MenuItemComponent2,
@@ -7290,7 +7399,7 @@ var MenuItemComponent = (0, import_react31.memo)(function MenuItemComponent2({ i
                     position: "relative",
                     width: lineWidth,
                     height: "100%",
-                    backgroundColor: theme.colors.border,
+                    backgroundColor: theme2.colors.border,
                     zIndex: 1
                   }
                 ),
@@ -7302,7 +7411,7 @@ var MenuItemComponent = (0, import_react31.memo)(function MenuItemComponent2({ i
                     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,
@@ -7335,7 +7444,7 @@ var SideMenuComponent = function SideMenu({
   backgroundColor,
   paddingTop
 }) {
-  const theme = (0, import_react_better_core29.useTheme)();
+  const theme2 = (0, import_react_better_core29.useTheme)();
   const mediaQuery = useMediaQuery();
   const { components, sideMenuIsCollapsed, setSideMenuIsCollapsed, sideMenuIsOpenMobile, setSideMenuIsOpenMobile } = useBetterHtmlContextInternal();
   const [activeItem, setActiveItem] = (0, import_react31.useState)();
@@ -7355,9 +7464,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__ */ (0, import_jsx_runtime28.jsx)(SideMenuContextProvider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     Div_default.column,
     {
@@ -7367,15 +7476,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__ */ (0, import_jsx_runtime28.jsxs)(Div_default.column, { width: "100%", height: "100%", gap: theme.styles.space, children: [
-          (logoAssetName || logoUrl || withCloseButton && mediaQuery.size1000) && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Div_default.row, { alignItems: "center", paddingInline: theme.styles.space, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Div_default.column, { width: "100%", height: "100%", gap: theme2.styles.space, children: [
+          (logoAssetName || logoUrl || withCloseButton && mediaQuery.size1000) && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Div_default.row, { alignItems: "center", paddingInline: theme2.styles.space, children: [
             (logoAssetName || logoUrl) && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LinkComponentTag, { to: "/", href: "/", onClick: onClickXButton, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
               Div_default.row,
               {
@@ -7383,7 +7492,7 @@ var SideMenuComponent = function SideMenu({
                 width: sideMenuCollapsedWidth ? logoSize : void 0,
                 height: logoSize,
                 whiteSpace: "nowrap",
-                gap: theme.styles.gap,
+                gap: theme2.styles.gap,
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                     Image_default,
@@ -7402,7 +7511,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
                     }
@@ -7419,9 +7528,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__ */ (0, import_jsx_runtime28.jsx)(Div_default.column, { gap: theme.styles.gap / 2, children: readyItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                paddingInline: theme2.styles.space,
+                paddingBottom: !isCollapsable && !readyBottomItems ? theme2.styles.space : void 0,
+                children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Div_default.column, { gap: theme2.styles.gap / 2, children: readyItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                   MenuItemComponent,
                   {
                     item,
@@ -7435,12 +7544,12 @@ var SideMenuComponent = function SideMenu({
             readyBottomItems && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               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__ */ (0, import_jsx_runtime28.jsx)(
                   MenuItemComponent,
                   {
@@ -7457,30 +7566,30 @@ var SideMenuComponent = function SideMenu({
           isCollapsable && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             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__ */ (0, import_jsx_runtime28.jsx)(
                 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__ */ (0, import_jsx_runtime28.jsx)(
                     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
                     }
                   )
                 }
@@ -7492,30 +7601,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__ */ (0, import_jsx_runtime28.jsx)(
               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
               }
             )
           }
@@ -7526,18 +7635,18 @@ var SideMenuComponent = function SideMenu({
   ) });
 };
 SideMenuComponent.pageHolder = function SideMenuPageHolder({ outsideComponent, ...props }) {
-  const theme = (0, import_react_better_core29.useTheme)();
+  const theme2 = (0, import_react_better_core29.useTheme)();
   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__ */ (0, import_jsx_runtime28.jsxs)(
     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__ */ (0, import_jsx_runtime28.jsx)(PageHolder_default, { ...props })
@@ -7546,7 +7655,7 @@ SideMenuComponent.pageHolder = function SideMenuPageHolder({ outsideComponent, .
   );
 };
 SideMenuComponent.burgerButton = function BurgerButton() {
-  const theme = (0, import_react_better_core29.useTheme)();
+  const theme2 = (0, import_react_better_core29.useTheme)();
   const { sideMenuIsOpenMobile, setSideMenuIsOpenMobile } = useBetterHtmlContextInternal();
   const [isHovered, setIsHovered] = (0, import_react_better_core29.useBooleanState)();
   const width = 2;
@@ -7570,10 +7679,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__ */ (0, import_jsx_runtime28.jsx)(
@@ -7584,11 +7693,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__ */ (0, import_jsx_runtime28.jsx)(
@@ -7599,10 +7708,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
           }
         )
       ]