react-better-html 1.1.163 → 1.1.164

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/Div.tsx
-import { forwardRef as forwardRef4, memo as memo9, useCallback as useCallback5 } from "react";
+import { forwardRef as forwardRef6, memo as memo11, useCallback as useCallback5 } from "react";
 import styled7 from "styled-components";
 
 // src/constants.ts
@@ -3108,8 +3108,117 @@ function useUrlQuery() {
   };
 }
 
+// src/components/Divider.tsx
+import { forwardRef as forwardRef4, memo as memo9 } from "react";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var Divider_default = {
+  vertical: memo9(
+    forwardRef4(function Divider({ width = 1, backgroundColor, height, ...props }, ref) {
+      const theme2 = useTheme();
+      return /* @__PURE__ */ jsx9(
+        Div_default,
+        {
+          width,
+          height: height ?? "100%",
+          flexShrink: 0,
+          backgroundColor: backgroundColor ?? theme2.colors.border,
+          ...props,
+          ref
+        }
+      );
+    })
+  ),
+  horizontal: memo9(
+    forwardRef4(function Divider2({ width = 1, backgroundColor, text, textFontSize, textColor, ...props }, ref) {
+      const theme2 = useTheme();
+      return /* @__PURE__ */ jsxs5(Div_default.row, { width: "100%", alignItems: "center", gap: text ? theme2.styles.space : void 0, ...props, ref, children: [
+        /* @__PURE__ */ jsx9(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme2.colors.border }),
+        text && /* @__PURE__ */ jsx9(Text_default, { fontSize: textFontSize, color: textColor ?? theme2.colors.textSecondary, children: text }),
+        /* @__PURE__ */ jsx9(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme2.colors.border })
+      ] });
+    })
+  )
+};
+
+// src/components/PageHeader.tsx
+import { forwardRef as forwardRef5, memo as memo10 } from "react";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var PageHeaderComponent = forwardRef5(function PageHeader({
+  imageUrl,
+  imageSize = 60,
+  title,
+  titleAs,
+  titleColor,
+  titleRightElement,
+  description,
+  descriptionColor,
+  textAlign,
+  rightElement,
+  lightMode,
+  marginBottom
+}, ref) {
+  const theme2 = useTheme();
+  const { app } = useBetterHtmlContextInternal();
+  const mediaQuery = useMediaQuery();
+  return /* @__PURE__ */ jsxs6(
+    Div_default.row,
+    {
+      alignItems: "center",
+      gap: theme2.styles.space,
+      marginBottom: marginBottom ?? theme2.styles.space * 2,
+      ref,
+      children: [
+        imageUrl && /* @__PURE__ */ jsx10(Image_default.profileImage, { src: imageUrl, size: imageSize ?? (mediaQuery.size600 ? 46 : 60) }),
+        /* @__PURE__ */ jsxs6(
+          Div_default.column,
+          {
+            alignItems: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : void 0,
+            flex: 1,
+            gap: theme2.styles.gap / 2,
+            children: [
+              /* @__PURE__ */ jsxs6(
+                Div_default.row,
+                {
+                  alignItems: "center",
+                  justifyContent: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : void 0,
+                  gap: theme2.styles.space,
+                  children: [
+                    /* @__PURE__ */ jsx10(
+                      Text_default,
+                      {
+                        as: titleAs ?? "h1",
+                        textAlign,
+                        color: titleColor ?? (lightMode ? theme2.colors.base : theme2.colors.textPrimary),
+                        children: title
+                      }
+                    ),
+                    titleRightElement
+                  ]
+                }
+              ),
+              description && /* @__PURE__ */ jsx10(
+                Text_default,
+                {
+                  maxWidth: !mediaQuery.size600 ? app.contentMaxWidth * 0.6 : void 0,
+                  textAlign,
+                  color: descriptionColor ?? (lightMode ? theme2.colors.base : theme2.colors.textSecondary),
+                  opacity: lightMode ? 0.7 : void 0,
+                  children: description
+                }
+              )
+            ]
+          }
+        ),
+        rightElement
+      ]
+    }
+  );
+});
+var PageHeader2 = memo10(PageHeaderComponent);
+var PageHeader_default = PageHeader2;
+
 // src/components/Div.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 var DivStyledComponent = styled7.div.withConfig({
   shouldForwardProp: (prop) => !["normalStyle", "hoverStyle"].includes(prop)
 })`
@@ -3119,7 +3228,7 @@ var DivStyledComponent = styled7.div.withConfig({
       ${(props) => props.hoverStyle}
    }
 `;
-var DivComponent = forwardRef4(function Div({
+var DivComponent = forwardRef6(function Div({
   as = "div",
   value,
   isTabAccessed,
@@ -3154,7 +3263,7 @@ var DivComponent = forwardRef4(function Div({
     },
     [onKeyDown, isTabAccessed]
   );
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11(
     DivStyledComponent,
     {
       as,
@@ -3172,9 +3281,9 @@ var DivComponent = forwardRef4(function Div({
     }
   );
 });
-DivComponent.row = forwardRef4(function Row({ flexReverse, invertFlexDirection, ...props }, ref) {
+DivComponent.row = forwardRef6(function Row({ flexReverse, invertFlexDirection, ...props }, ref) {
   const reverseSuffix = flexReverse ? "-reverse" : "";
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11(
     DivComponent,
     {
       display: "flex",
@@ -3184,9 +3293,9 @@ DivComponent.row = forwardRef4(function Row({ flexReverse, invertFlexDirection,
     }
   );
 });
-DivComponent.column = forwardRef4(function Column({ flexReverse, invertFlexDirection, ...props }, ref) {
+DivComponent.column = forwardRef6(function Column({ flexReverse, invertFlexDirection, ...props }, ref) {
   const reverseSuffix = flexReverse ? "-reverse" : "";
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11(
     DivComponent,
     {
       display: "flex",
@@ -3196,13 +3305,29 @@ DivComponent.column = forwardRef4(function Column({ flexReverse, invertFlexDirec
     }
   );
 });
-DivComponent.grid = forwardRef4(function Grid(props, ref) {
-  return /* @__PURE__ */ jsx9(DivComponent, { display: "grid", ref, ...props });
+DivComponent.grid = forwardRef6(function Grid(props, ref) {
+  return /* @__PURE__ */ jsx11(DivComponent, { display: "grid", ref, ...props });
 });
-DivComponent.box = forwardRef4(function Box2({ isActive, ...props }, ref) {
+DivComponent.box = forwardRef6(function Box2({
+  imageUrl,
+  imageSize,
+  title,
+  titleAs,
+  titleColor,
+  titleRightElement,
+  description,
+  descriptionColor,
+  textAlign,
+  rightElement,
+  lightMode,
+  headerBackgroundColor,
+  isActive,
+  children,
+  ...props
+}, ref) {
   const theme2 = useTheme();
   const withClick = props.onClick || props.onClickWithValue;
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs7(
     DivComponent,
     {
       color: isActive ? theme2.colors.base : void 0,
@@ -3212,57 +3337,61 @@ DivComponent.box = forwardRef4(function Box2({ isActive, ...props }, ref) {
       borderColorHover: withClick && !isActive ? theme2.colors.primary : void 0,
       filterHover: withClick && isActive ? "brightness(0.9)" : void 0,
       cursor: withClick ? "pointer" : void 0,
-      paddingBlock: theme2.styles.gap,
+      paddingBlock: title ? theme2.styles.space : theme2.styles.gap,
       paddingInline: theme2.styles.space,
       ref,
-      ...props
+      ...props,
+      children: [
+        title && /* @__PURE__ */ jsxs7(
+          Div2,
+          {
+            backgroundColor: headerBackgroundColor,
+            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__ */ jsx11(
+                PageHeader_default,
+                {
+                  imageUrl,
+                  imageSize,
+                  title,
+                  titleAs,
+                  titleColor,
+                  titleRightElement,
+                  description,
+                  descriptionColor,
+                  textAlign,
+                  rightElement,
+                  lightMode,
+                  marginBottom: theme2.styles.space
+                }
+              ),
+              /* @__PURE__ */ jsx11(Div2, { width: `calc(100% + ${theme2.styles.space * 2}px)`, marginLeft: -theme2.styles.space, children: /* @__PURE__ */ jsx11(Divider_default.horizontal, {}) })
+            ]
+          }
+        ),
+        children
+      ]
     }
   );
 });
-var Div2 = memo9(DivComponent);
+var Div2 = memo11(DivComponent);
 Div2.row = DivComponent.row;
 Div2.column = DivComponent.column;
 Div2.grid = DivComponent.grid;
 Div2.box = DivComponent.box;
 var Div_default = Div2;
 
-// src/components/Divider.tsx
-import { forwardRef as forwardRef5, memo as memo10 } from "react";
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
-var Divider_default = {
-  vertical: memo10(
-    forwardRef5(function Divider({ width = 1, backgroundColor, height, ...props }, ref) {
-      const theme2 = useTheme();
-      return /* @__PURE__ */ jsx10(
-        Div_default,
-        {
-          width,
-          height: height ?? "100%",
-          flexShrink: 0,
-          backgroundColor: backgroundColor ?? theme2.colors.border,
-          ...props,
-          ref
-        }
-      );
-    })
-  ),
-  horizontal: memo10(
-    forwardRef5(function Divider2({ width = 1, backgroundColor, text, textFontSize, textColor, ...props }, ref) {
-      const theme2 = useTheme();
-      return /* @__PURE__ */ jsxs5(Div_default.row, { width: "100%", alignItems: "center", gap: text ? theme2.styles.space : void 0, ...props, ref, children: [
-        /* @__PURE__ */ jsx10(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme2.colors.border }),
-        text && /* @__PURE__ */ jsx10(Text_default, { fontSize: textFontSize, color: textColor ?? theme2.colors.textSecondary, children: text }),
-        /* @__PURE__ */ jsx10(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme2.colors.border })
-      ] });
-    })
-  )
-};
-
 // src/components/Modal.tsx
-import { memo as memo11, useCallback as useCallback6, forwardRef as forwardRef6, useImperativeHandle, useRef as useRef3, useState as useState4 } from "react";
+import { memo as memo12, useCallback as useCallback6, forwardRef as forwardRef7, useImperativeHandle, useRef as useRef3, useState as useState4 } from "react";
 import { createPortal } from "react-dom";
 import styled8 from "styled-components";
-import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 var DialogStylesElement = styled8.dialog.withConfig({
   shouldForwardProp: (prop) => !["theme", "colorTheme", "opacity"].includes(prop)
 })`
@@ -3303,7 +3432,7 @@ var DialogStylesElement = styled8.dialog.withConfig({
       }
    }
 `;
-var ModalComponent = forwardRef6(function Modal({
+var ModalComponent = forwardRef7(function Modal({
   maxWidth,
   title,
   titleColor,
@@ -3368,7 +3497,7 @@ var ModalComponent = forwardRef6(function Modal({
     [onClickOpen, onClickClose, isOpened]
   );
   return createPortal(
-    /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx12(
       DialogStylesElement,
       {
         theme: theme2,
@@ -3377,7 +3506,7 @@ var ModalComponent = forwardRef6(function Modal({
         onClose: onClickClose,
         onKeyDown,
         ref: dialogRef,
-        children: isOpenedLate ? /* @__PURE__ */ jsx11(
+        children: isOpenedLate ? /* @__PURE__ */ jsx12(
           Div_default.column,
           {
             position: "relative",
@@ -3391,7 +3520,7 @@ var ModalComponent = forwardRef6(function Modal({
             transform: `translateY(${theme2.styles.space}px)`,
             transition: theme2.styles.transition,
             animation: isOpened ? "fadeInAnimation 0.2s ease forwards" : "fadeOutAnimation 0.2s ease forwards",
-            children: /* @__PURE__ */ jsxs6(
+            children: /* @__PURE__ */ jsxs8(
               Div_default,
               {
                 position: "relative",
@@ -3399,12 +3528,11 @@ var ModalComponent = forwardRef6(function Modal({
                 minHeight: 32 + theme2.styles.space * 2,
                 backgroundColor: theme2.colors.backgroundBase,
                 borderRadius: theme2.styles.borderRadius * 2,
-                paddingInline: !title ? theme2.styles.space + theme2.styles.gap : void 0,
-                paddingBlock: !title ? theme2.styles.space : void 0,
+                padding: !title ? theme2.styles.space : void 0,
                 overflow,
                 children: [
-                  title ? /* @__PURE__ */ jsxs6(Fragment2, { children: [
-                    /* @__PURE__ */ jsxs6(
+                  title ? /* @__PURE__ */ jsxs8(Fragment2, { children: [
+                    /* @__PURE__ */ jsxs8(
                       Div_default.row,
                       {
                         alignItems: "center",
@@ -3412,12 +3540,12 @@ var ModalComponent = forwardRef6(function Modal({
                         backgroundColor: headerBackgroundColor,
                         borderTopLeftRadius: theme2.styles.borderRadius * 2 - 1,
                         borderTopRightRadius: theme2.styles.borderRadius * 2 - 1,
-                        paddingInline: theme2.styles.space + theme2.styles.gap,
+                        paddingInline: theme2.styles.space,
                         paddingBlock: theme2.styles.space,
                         transition: theme2.styles.transition,
                         children: [
-                          /* @__PURE__ */ jsxs6(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
-                            /* @__PURE__ */ jsx11(
+                          /* @__PURE__ */ jsxs8(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
+                            /* @__PURE__ */ jsx12(
                               Text_default,
                               {
                                 as: "h1",
@@ -3426,7 +3554,7 @@ var ModalComponent = forwardRef6(function Modal({
                                 children: title
                               }
                             ),
-                            description && /* @__PURE__ */ jsx11(
+                            description && /* @__PURE__ */ jsx12(
                               Text_default,
                               {
                                 color: descriptionColor ?? theme2.colors.textSecondary,
@@ -3435,7 +3563,7 @@ var ModalComponent = forwardRef6(function Modal({
                               }
                             )
                           ] }),
-                          !withoutCloseButton && /* @__PURE__ */ jsx11(
+                          !withoutCloseButton && /* @__PURE__ */ jsx12(
                             Button_default.icon,
                             {
                               icon: "XMark",
@@ -3448,16 +3576,9 @@ var ModalComponent = forwardRef6(function Modal({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ jsx11(Divider_default.horizontal, {})
-                  ] }) : /* @__PURE__ */ jsx11(Fragment2, { children: !withoutCloseButton && /* @__PURE__ */ jsx11(Div_default, { position: "absolute", top: theme2.styles.space, right: theme2.styles.space, children: /* @__PURE__ */ jsx11(Button_default.icon, { icon: "XMark", onClick: onClickClose }) }) }),
-                  /* @__PURE__ */ jsx11(
-                    Div_default,
-                    {
-                      paddingInline: title ? theme2.styles.space + theme2.styles.gap : void 0,
-                      paddingBlock: title ? theme2.styles.space : void 0,
-                      children
-                    }
-                  )
+                    /* @__PURE__ */ jsx12(Divider_default.horizontal, {})
+                  ] }) : /* @__PURE__ */ jsx12(Fragment2, { children: !withoutCloseButton && /* @__PURE__ */ jsx12(Div_default, { position: "absolute", top: theme2.styles.space, right: theme2.styles.space, children: /* @__PURE__ */ jsx12(Button_default.icon, { icon: "XMark", onClick: onClickClose }) }) }),
+                  /* @__PURE__ */ jsx12(Div_default, { padding: title ? theme2.styles.space : void 0, children })
                 ]
               }
             )
@@ -3468,7 +3589,7 @@ var ModalComponent = forwardRef6(function Modal({
     document.body
   );
 });
-ModalComponent.confirmation = forwardRef6(function Confirmation({ message, continueButtonLoaderName, onContinue, onCancel, ...props }, ref) {
+ModalComponent.confirmation = forwardRef7(function Confirmation({ message, continueButtonLoaderName, onContinue, onCancel, ...props }, ref) {
   const theme2 = useTheme();
   const modalRef = useRef3(null);
   const onCancelElement = useCallback6(() => {
@@ -3480,9 +3601,9 @@ ModalComponent.confirmation = forwardRef6(function Confirmation({ message, conti
     modalRef.current?.close();
   }, [onContinue]);
   useImperativeHandle(ref, () => modalRef.current, []);
-  return /* @__PURE__ */ jsxs6(ModalComponent, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
-    /* @__PURE__ */ jsx11(Text_default, { color: theme2.colors.textSecondary, children: message ?? "Do you really want to continue? This action may be irreversible." }),
-    /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs8(ModalComponent, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
+    /* @__PURE__ */ jsx12(Text_default, { color: theme2.colors.textSecondary, children: message ?? "Do you really want to continue? This action may be irreversible." }),
+    /* @__PURE__ */ jsxs8(
       Div_default.row,
       {
         alignItems: "center",
@@ -3490,14 +3611,14 @@ ModalComponent.confirmation = forwardRef6(function Confirmation({ message, conti
         gap: theme2.styles.gap,
         marginTop: theme2.styles.space * 2,
         children: [
-          /* @__PURE__ */ jsx11(Button_default.secondary, { text: "Cancel", onClick: onCancelElement }),
-          /* @__PURE__ */ jsx11(Button_default, { text: "Continue", loaderName: continueButtonLoaderName, onClick: onContinueElement })
+          /* @__PURE__ */ jsx12(Button_default.secondary, { text: "Cancel", onClick: onCancelElement }),
+          /* @__PURE__ */ jsx12(Button_default, { text: "Continue", loaderName: continueButtonLoaderName, onClick: onContinueElement })
         ]
       }
     )
   ] });
 });
-ModalComponent.destructive = forwardRef6(function Destructive2({ message, deleteButtonLoaderName, onDelete, onCancel, ...props }, ref) {
+ModalComponent.destructive = forwardRef7(function Destructive2({ message, deleteButtonLoaderName, onDelete, onCancel, ...props }, ref) {
   const theme2 = useTheme();
   const modalRef = useRef3(null);
   const onCancelElement = useCallback6(() => {
@@ -3509,9 +3630,9 @@ ModalComponent.destructive = forwardRef6(function Destructive2({ message, delete
     modalRef.current?.close();
   }, [onDelete]);
   useImperativeHandle(ref, () => modalRef.current, []);
-  return /* @__PURE__ */ jsxs6(ModalComponent, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
-    /* @__PURE__ */ jsx11(Text_default, { color: theme2.colors.textSecondary, children: message ?? "Do you really want to continue with the deleting of the item? This action may be irreversible." }),
-    /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs8(ModalComponent, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
+    /* @__PURE__ */ jsx12(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__ */ jsxs8(
       Div_default.row,
       {
         alignItems: "center",
@@ -3519,8 +3640,8 @@ ModalComponent.destructive = forwardRef6(function Destructive2({ message, delete
         gap: theme2.styles.gap,
         marginTop: theme2.styles.space * 2,
         children: [
-          /* @__PURE__ */ jsx11(Button_default.secondary, { text: "Cancel", onClick: onCancelElement }),
-          /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx12(Button_default.secondary, { text: "Cancel", onClick: onCancelElement }),
+          /* @__PURE__ */ jsx12(
             Button_default.destructive,
             {
               icon: "trash",
@@ -3534,18 +3655,18 @@ ModalComponent.destructive = forwardRef6(function Destructive2({ message, delete
     )
   ] });
 });
-var Modal2 = memo11(ModalComponent);
+var Modal2 = memo12(ModalComponent);
 Modal2.confirmation = ModalComponent.confirmation;
 Modal2.destructive = ModalComponent.destructive;
 var Modal_default = Modal2;
 
 // src/components/PageHolder.tsx
-import { forwardRef as forwardRef7, memo as memo12 } from "react";
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
-var PageHolderComponent = forwardRef7(function PageHolder({ noMaxContentWidth, children, ...props }, ref) {
+import { forwardRef as forwardRef8, memo as memo13 } from "react";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+var PageHolderComponent = forwardRef8(function PageHolder({ noMaxContentWidth, children, ...props }, ref) {
   const theme2 = useTheme();
   const { app } = useBetterHtmlContextInternal();
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     Div_default,
     {
       as: "main",
@@ -3559,7 +3680,7 @@ var PageHolderComponent = forwardRef7(function PageHolder({ noMaxContentWidth, c
     }
   );
 });
-PageHolderComponent.center = forwardRef7(function Center({
+PageHolderComponent.center = forwardRef8(function Center({
   pageBackgroundColor,
   pageBackgroundImage,
   contentMaxWidth,
@@ -3575,7 +3696,7 @@ PageHolderComponent.center = forwardRef7(function Center({
   const { app } = useBetterHtmlContextInternal();
   const breakingPoint = mediaQuery.size1000;
   const withSideComponent = sideComponent && !breakingPoint;
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs9(
     Div_default.row,
     {
       position: "relative",
@@ -3586,7 +3707,7 @@ PageHolderComponent.center = forwardRef7(function Center({
       backgroundColor: pageBackgroundColor,
       backgroundImage: pageBackgroundImage,
       children: [
-        behindComponent && /* @__PURE__ */ jsx12(
+        behindComponent && /* @__PURE__ */ jsx13(
           Div_default,
           {
             position: "fixed",
@@ -3599,8 +3720,8 @@ PageHolderComponent.center = forwardRef7(function Center({
             children: behindComponent
           }
         ),
-        sideComponentPosition === "left" && withSideComponent && /* @__PURE__ */ jsx12(Div_default, { width: "50%" }),
-        /* @__PURE__ */ jsx12(Div_default.column, { position: "relative", width: `${withSideComponent ? 50 : 100}%`, alignItems: "center", zIndex: 2, children: /* @__PURE__ */ jsx12(
+        sideComponentPosition === "left" && withSideComponent && /* @__PURE__ */ jsx13(Div_default, { width: "50%" }),
+        /* @__PURE__ */ jsx13(Div_default.column, { position: "relative", width: `${withSideComponent ? 50 : 100}%`, alignItems: "center", zIndex: 2, children: /* @__PURE__ */ jsx13(
           Div_default.box,
           {
             width: `calc(100% - ${theme2.styles.space * 2}px)`,
@@ -3612,8 +3733,8 @@ PageHolderComponent.center = forwardRef7(function Center({
             children
           }
         ) }),
-        sideComponentPosition === "right" && withSideComponent && /* @__PURE__ */ jsx12(Div_default, { width: "50%" }),
-        withSideComponent && /* @__PURE__ */ jsx12(
+        sideComponentPosition === "right" && withSideComponent && /* @__PURE__ */ jsx13(Div_default, { width: "50%" }),
+        withSideComponent && /* @__PURE__ */ jsx13(
           Div_default,
           {
             position: "fixed",
@@ -3629,85 +3750,10 @@ PageHolderComponent.center = forwardRef7(function Center({
     }
   );
 });
-var PageHolder2 = memo12(PageHolderComponent);
+var PageHolder2 = memo13(PageHolderComponent);
 PageHolder2.center = PageHolderComponent.center;
 var PageHolder_default = PageHolder2;
 
-// src/components/PageHeader.tsx
-import { forwardRef as forwardRef8, memo as memo13 } from "react";
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
-var PageHeaderComponent = forwardRef8(function PageHeader({
-  imageUrl,
-  imageSize = 60,
-  title,
-  titleAs,
-  titleRightElement,
-  description,
-  textAlign,
-  rightElement,
-  lightMode,
-  marginBottom
-}, ref) {
-  const theme2 = useTheme();
-  const { app } = useBetterHtmlContextInternal();
-  const mediaQuery = useMediaQuery();
-  return /* @__PURE__ */ jsxs8(
-    Div_default.row,
-    {
-      alignItems: "center",
-      gap: theme2.styles.space,
-      marginBottom: marginBottom ?? theme2.styles.space * 2,
-      ref,
-      children: [
-        imageUrl && /* @__PURE__ */ jsx13(Image_default.profileImage, { src: imageUrl, size: imageSize ?? (mediaQuery.size600 ? 46 : 60) }),
-        /* @__PURE__ */ jsxs8(
-          Div_default.column,
-          {
-            alignItems: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : void 0,
-            flex: 1,
-            gap: theme2.styles.gap / 2,
-            children: [
-              /* @__PURE__ */ jsxs8(
-                Div_default.row,
-                {
-                  alignItems: "center",
-                  justifyContent: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : void 0,
-                  gap: theme2.styles.space,
-                  children: [
-                    /* @__PURE__ */ jsx13(
-                      Text_default,
-                      {
-                        as: titleAs ?? "h1",
-                        textAlign,
-                        color: lightMode ? theme2.colors.base : theme2.colors.textPrimary,
-                        children: title
-                      }
-                    ),
-                    titleRightElement
-                  ]
-                }
-              ),
-              description && /* @__PURE__ */ jsx13(
-                Text_default,
-                {
-                  maxWidth: !mediaQuery.size600 ? app.contentMaxWidth * 0.6 : void 0,
-                  textAlign,
-                  color: lightMode ? theme2.colors.base : theme2.colors.textSecondary,
-                  opacity: lightMode ? 0.7 : void 0,
-                  children: description
-                }
-              )
-            ]
-          }
-        ),
-        rightElement
-      ]
-    }
-  );
-});
-var PageHeader2 = memo13(PageHeaderComponent);
-var PageHeader_default = PageHeader2;
-
 // src/components/Chip.tsx
 import { forwardRef as forwardRef9, memo as memo14 } from "react";
 
@@ -5517,10 +5563,10 @@ var decryptString = (text) => {
 
 // src/components/Label.tsx
 import { memo as memo15 } from "react";
-import { jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsxs as jsxs10 } from "react/jsx-runtime";
 function Label({ text, required, isError, color, htmlFor }) {
   const theme2 = useTheme();
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     Text_default,
     {
       as: "label",
@@ -5532,7 +5578,7 @@ function Label({ text, required, isError, color, htmlFor }) {
       "aria-required": required,
       children: [
         text,
-        required && /* @__PURE__ */ jsxs9(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
+        required && /* @__PURE__ */ jsxs10(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
           " ",
           "*"
         ] })
@@ -5544,7 +5590,7 @@ var Label_default = memo15(Label);
 
 // src/components/Dropdown.tsx
 import { forwardRef as forwardRef10, Fragment as Fragment3, memo as memo16, useCallback as useCallback7, useEffect as useEffect6, useMemo as useMemo4, useRef as useRef4, useState as useState5 } from "react";
-import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 var DropdownComponent = forwardRef10(function Dropdown({
   label,
   labelColor,
@@ -5671,13 +5717,13 @@ var DropdownComponent = forwardRef10(function Dropdown({
   );
   const selectedOption = useMemo4(() => options.find((option) => option.value === value), [options, value]);
   const renderedOptions = useMemo4(
-    () => /* @__PURE__ */ jsxs10(Fragment4, { children: [
+    () => /* @__PURE__ */ jsxs11(Fragment4, { children: [
       renderOptionDivider ? renderOptionDivider(void 0, filteredOptions[0], -1, 0) : void 0,
       filteredOptions.map((option, index) => {
         const isSelected = option.value === value;
         const isDisabled = option.disabled;
         const isFocused2 = index === focusedOptionIndex;
-        return /* @__PURE__ */ jsxs10(Fragment3, { children: [
+        return /* @__PURE__ */ jsxs11(Fragment3, { children: [
           /* @__PURE__ */ jsx15(
             Div_default,
             {
@@ -5743,7 +5789,7 @@ var DropdownComponent = forwardRef10(function Dropdown({
   const displayValue = withSearch && isFocused ? searchQuery : selectedOption?.label ?? "";
   const withClearButton = isOpen && selectedOption;
   const readyPlaceholder = placeholder ? placeholder : `Select an ${label?.toLowerCase() ?? "option"}`;
-  return /* @__PURE__ */ jsx15(Div_default.column, { width: "100%", position: "relative", userSelect: "none", ...props, children: /* @__PURE__ */ jsxs10(Div_default.row, { position: "relative", width: "100%", children: [
+  return /* @__PURE__ */ jsx15(Div_default.column, { width: "100%", position: "relative", userSelect: "none", ...props, children: /* @__PURE__ */ jsxs11(Div_default.row, { position: "relative", width: "100%", children: [
     /* @__PURE__ */ jsx15(
       InputField_default,
       {
@@ -5801,7 +5847,7 @@ var DropdownComponent = forwardRef10(function Dropdown({
         ref: inputRef
       }
     ),
-    /* @__PURE__ */ jsxs10(
+    /* @__PURE__ */ jsxs11(
       Div_default.row,
       {
         position: "absolute",
@@ -5850,7 +5896,7 @@ var DropdownComponent = forwardRef10(function Dropdown({
 DropdownComponent.countries = forwardRef10(function Countries({ ...props }, ref) {
   const theme2 = useTheme();
   const renderOption = useCallback7(
-    (option, index, isSelected) => /* @__PURE__ */ jsxs10(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
+    (option, index, isSelected) => /* @__PURE__ */ jsxs11(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
       /* @__PURE__ */ jsx15(Image_default, { src: `https://flagcdn.com/w80/${option.data?.code.toString().toLowerCase()}.webp`, width: 20 }),
       /* @__PURE__ */ jsx15(Text_default, { children: option.label })
     ] }),
@@ -5886,7 +5932,7 @@ var Dropdown_default = Dropdown2;
 // src/components/Calendar.tsx
 import { useCallback as useCallback8, useMemo as useMemo5, useState as useState6, memo as memo17, useEffect as useEffect7, useId } from "react";
 import styled9 from "styled-components";
-import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 var getMonthName = (month, short = false) => {
   return [
     short ? "Jan" : "January",
@@ -6000,12 +6046,12 @@ function Calendar({ value, minDate, maxDate, onChange }) {
     setCurrentMonth(date.getMonth());
     setCurrentYear(date.getFullYear());
   }, [value]);
-  return /* @__PURE__ */ jsxs11(Div_default.column, { width: "100%", maxWidth: 320, gap: theme2.styles.gap, padding: theme2.styles.space / 2, userSelect: "none", children: [
-    /* @__PURE__ */ jsxs11(Div_default.row, { width: "100%", justifyContent: "space-between", alignItems: "center", children: [
+  return /* @__PURE__ */ jsxs12(Div_default.column, { width: "100%", maxWidth: 320, gap: theme2.styles.gap, padding: theme2.styles.space / 2, userSelect: "none", children: [
+    /* @__PURE__ */ jsxs12(Div_default.row, { width: "100%", justifyContent: "space-between", alignItems: "center", children: [
       /* @__PURE__ */ jsx16(Button_default.icon, { icon: "chevronLeft", onClick: onClickPreviousMonthButton }),
-      /* @__PURE__ */ jsxs11(Div_default.row, { alignItems: "center", gap: 4, children: [
+      /* @__PURE__ */ jsxs12(Div_default.row, { alignItems: "center", gap: 4, children: [
         /* @__PURE__ */ jsx16(Text_default, { fontWeight: 700, children: getMonthName(currentMonth) }),
-        /* @__PURE__ */ jsx16(SelectWrapperComponent, { children: /* @__PURE__ */ jsxs11(Div_default.row, { position: "relative", alignItems: "center", gap: 2, children: [
+        /* @__PURE__ */ jsx16(SelectWrapperComponent, { children: /* @__PURE__ */ jsxs12(Div_default.row, { position: "relative", alignItems: "center", gap: 2, children: [
           /* @__PURE__ */ jsx16(Text_default, { fontWeight: 700, children: currentYear }),
           /* @__PURE__ */ jsx16(Icon_default, { name: "chevronDown", size: 12 }),
           /* @__PURE__ */ jsx16(
@@ -6022,14 +6068,14 @@ function Calendar({ value, minDate, maxDate, onChange }) {
       ] }),
       /* @__PURE__ */ jsx16(Button_default.icon, { icon: "chevronRight", onClick: onClickNextMonthButton })
     ] }),
-    /* @__PURE__ */ jsxs11(Div_default.grid, { width: "100%", gridTemplateColumns: "repeat(7, 1fr)", gap: theme2.styles.gap / 2, children: [
+    /* @__PURE__ */ jsxs12(Div_default.grid, { width: "100%", gridTemplateColumns: "repeat(7, 1fr)", gap: theme2.styles.gap / 2, children: [
       weekDaysIndex.map((day) => /* @__PURE__ */ jsx16(Div_default.row, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx16(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", children: getWeekDayName(day, true) }) }, day)),
       days.map((day, index) => {
         const thisDayDate = new Date(currentYear, currentMonth, day);
         const isSelected = day !== void 0 && day === currentDate?.getDate() && currentMonth === currentDate.getMonth() && currentYear === currentDate.getFullYear();
         const isWeekend = thisDayDate.getDay() === 6 || thisDayDate.getDay() === 0;
         const isDisabled = minDate && thisDayDate.getTime() < minDate.getTime() || maxDate && thisDayDate.getTime() > maxDate.getTime();
-        return /* @__PURE__ */ jsxs11(
+        return /* @__PURE__ */ jsxs12(
           Div_default.row,
           {
             position: "relative",
@@ -6073,7 +6119,7 @@ function Calendar({ value, minDate, maxDate, onChange }) {
         );
       })
     ] }),
-    /* @__PURE__ */ jsxs11(Div_default.row, { width: "100%", justifyContent: "space-between", alignItems: "center", children: [
+    /* @__PURE__ */ jsxs12(Div_default.row, { width: "100%", justifyContent: "space-between", alignItems: "center", children: [
       /* @__PURE__ */ jsx16(Div_default, { isTabAccessed: true, cursor: "pointer", onClick: onClickClear, children: /* @__PURE__ */ jsx16(
         Text_default,
         {
@@ -6100,7 +6146,7 @@ function Calendar({ value, minDate, maxDate, onChange }) {
 var Calendar_default = memo17(Calendar);
 
 // src/components/InputField.tsx
-import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 var buttonWidth = 50;
 var colorPickerSpacing = 4;
 var colorPickerColorWidth = 12 + 27 + colorPickerSpacing;
@@ -6318,9 +6364,9 @@ var InputFieldComponent = forwardRef11(function InputField({
     onChangeValue?.(debouncedValue);
   }, [withDebounce, onChangeValue, debouncedValue]);
   const readyId = id ?? internalId;
-  return /* @__PURE__ */ jsxs12(Div_default.column, { width: "100%", gap: theme2.styles.gap / 2, ...styledComponentStylesWithExcluded, children: [
+  return /* @__PURE__ */ jsxs13(Div_default.column, { width: "100%", gap: theme2.styles.gap / 2, ...styledComponentStylesWithExcluded, children: [
     label && /* @__PURE__ */ jsx17(Label_default, { text: label, color: labelColor, required, isError: !!errorText, htmlFor: readyId }),
-    /* @__PURE__ */ jsxs12(Div_default.row, { alignItems: "stretch", width: "100%", children: [
+    /* @__PURE__ */ jsxs13(Div_default.row, { alignItems: "stretch", width: "100%", children: [
       prefix && /* @__PURE__ */ jsx17(
         Div_default.row,
         {
@@ -6335,7 +6381,7 @@ var InputFieldComponent = forwardRef11(function InputField({
           children: prefix
         }
       ),
-      /* @__PURE__ */ jsxs12(Div_default, { position: "relative", width: "100%", height: "fit-content", ref: holderRef, children: [
+      /* @__PURE__ */ jsxs13(Div_default, { position: "relative", width: "100%", height: "fit-content", ref: holderRef, children: [
         leftIcon && /* @__PURE__ */ jsx17(
           Icon_default,
           {
@@ -6445,9 +6491,9 @@ InputFieldComponent.multiline = forwardRef11(function Multiline({
     [onChange, onChangeValue]
   );
   const readyId = id ?? internalId;
-  return /* @__PURE__ */ jsxs12(Div_default.column, { gap: theme2.styles.gap / 2, children: [
+  return /* @__PURE__ */ jsxs13(Div_default.column, { gap: theme2.styles.gap / 2, children: [
     label && /* @__PURE__ */ jsx17(Label_default, { text: label, required, isError: !!errorText, htmlFor: readyId }),
-    /* @__PURE__ */ jsxs12(Div_default, { position: "relative", width: "100%", children: [
+    /* @__PURE__ */ jsxs13(Div_default, { position: "relative", width: "100%", children: [
       leftIcon && /* @__PURE__ */ jsx17(
         Icon_default,
         {
@@ -6591,7 +6637,7 @@ InputFieldComponent.phoneNumber = forwardRef11(function PhoneNumber({ label, val
   const [dropdownValue, setDropdownValue] = useState7();
   const [inputFieldValue, setInputFieldValue] = useState7(value?.toString() ?? "");
   const renderOption = useCallback9(
-    (option, index, isSelected) => /* @__PURE__ */ jsxs12(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
+    (option, index, isSelected) => /* @__PURE__ */ jsxs13(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
       /* @__PURE__ */ jsx17(Image_default, { src: `https://flagcdn.com/w80/${option.data?.code.toString().toLowerCase()}.webp`, width: 20 }),
       /* @__PURE__ */ jsx17(Text_default, { children: option.label })
     ] }),
@@ -6636,7 +6682,7 @@ InputFieldComponent.phoneNumber = forwardRef11(function PhoneNumber({ label, val
     setInputFieldValue(newValue.slice(country?.phoneNumberExtension.length + 1));
   }, [value]);
   const readyId = id ?? internalId;
-  return /* @__PURE__ */ jsxs12(Div_default.column, { width: "100%", gap: theme2.styles.gap / 2, children: [
+  return /* @__PURE__ */ jsxs13(Div_default.column, { width: "100%", gap: theme2.styles.gap / 2, children: [
     label && /* @__PURE__ */ jsx17(
       Label_default,
       {
@@ -6647,7 +6693,7 @@ InputFieldComponent.phoneNumber = forwardRef11(function PhoneNumber({ label, val
         htmlFor: readyId
       }
     ),
-    /* @__PURE__ */ jsxs12(Div_default.row, { children: [
+    /* @__PURE__ */ jsxs13(Div_default.row, { children: [
       /* @__PURE__ */ jsx17(
         Dropdown_default,
         {
@@ -6782,9 +6828,9 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({ minDate, maxDate
           overflow: "hidden",
           userSelect: "none",
           ...insideInputFieldComponentProps,
-          children: /* @__PURE__ */ jsxs12(Div_default.row, { gap: theme2.styles.space, children: [
+          children: /* @__PURE__ */ jsxs13(Div_default.row, { gap: theme2.styles.space, children: [
             /* @__PURE__ */ jsx17(Calendar_default, { value: internalValue, minDate, maxDate, onChange }),
-            /* @__PURE__ */ jsxs12(
+            /* @__PURE__ */ jsxs13(
               Div_default.row,
               {
                 height: 276,
@@ -6793,7 +6839,7 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({ minDate, maxDate
                 paddingBottom: theme2.styles.space / 2,
                 paddingRight: theme2.styles.space / 2,
                 children: [
-                  /* @__PURE__ */ jsxs12(Div_default, { height: "100%", children: [
+                  /* @__PURE__ */ jsxs13(Div_default, { height: "100%", children: [
                     /* @__PURE__ */ jsx17(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "H" }),
                     /* @__PURE__ */ jsx17(
                       Div_default,
@@ -6827,7 +6873,7 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({ minDate, maxDate
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsxs12(Div_default, { height: "100%", children: [
+                  /* @__PURE__ */ jsxs13(Div_default, { height: "100%", children: [
                     /* @__PURE__ */ jsx17(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "M" }),
                     /* @__PURE__ */ jsx17(
                       Div_default,
@@ -6924,7 +6970,7 @@ InputFieldComponent.time = forwardRef11(function Time({ ...props }, ref) {
           overflowY: "auto",
           userSelect: "none",
           ...insideInputFieldComponentProps,
-          children: /* @__PURE__ */ jsxs12(Div_default.row, { height: "100%", children: [
+          children: /* @__PURE__ */ jsxs13(Div_default.row, { height: "100%", children: [
             /* @__PURE__ */ jsx17(
               Div_default,
               {
@@ -7049,7 +7095,7 @@ var InputField_default = InputField2;
 // src/components/ToggleInput.tsx
 import { forwardRef as forwardRef12, useCallback as useCallback10, useId as useId3, useState as useState8 } from "react";
 import styled11 from "styled-components";
-import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 var componentSize = 26;
 var switchComponentBallGap = 3;
 var switchComponentMouseDownDifference = 4;
@@ -7180,10 +7226,10 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
     onChange?.(newIsChecked, value);
   }, [checked, controlledChecked, onChange, value]);
   const readyId = id ?? internalId;
-  return /* @__PURE__ */ jsxs13(Div_default.column, { gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, children: [
+  return /* @__PURE__ */ jsxs14(Div_default.column, { gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, children: [
     label && /* @__PURE__ */ jsx18(Label_default, { text: label, color: labelColor, required, isError: !!errorText, htmlFor: readyId }),
-    /* @__PURE__ */ jsxs13(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
-      /* @__PURE__ */ jsxs13(Div_default.row, { position: "relative", alignItems: "center", children: [
+    /* @__PURE__ */ jsxs14(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
+      /* @__PURE__ */ jsxs14(Div_default.row, { position: "relative", alignItems: "center", children: [
         /* @__PURE__ */ jsx18(
           InputElement2,
           {
@@ -7228,15 +7274,15 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
           }
         ) : void 0
       ] }),
-      text ? /* @__PURE__ */ jsxs13(Text_default, { color, userSelect: "none", cursor: "pointer", onClick: onClickText, children: [
+      text ? /* @__PURE__ */ jsxs14(Text_default, { color, userSelect: "none", cursor: "pointer", onClick: onClickText, children: [
         text,
-        required && !label && /* @__PURE__ */ jsxs13(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
+        required && !label && /* @__PURE__ */ jsxs14(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
           " ",
           "*"
         ] })
-      ] }) : textAdvanced ? /* @__PURE__ */ jsxs13(Div_default.row, { userSelect: "none", cursor: "pointer", onClick: onClickText, children: [
+      ] }) : textAdvanced ? /* @__PURE__ */ jsxs14(Div_default.row, { userSelect: "none", cursor: "pointer", onClick: onClickText, children: [
         textAdvanced,
-        required && !label && /* @__PURE__ */ jsxs13(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, marginLeft: 4, children: [
+        required && !label && /* @__PURE__ */ jsxs14(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, marginLeft: 4, children: [
           " ",
           "*"
         ] })
@@ -7291,7 +7337,7 @@ var ToggleInput_default = {
       onChange?.(newIsChecked, value);
     }, [disabled, checked, onChange, controlledChecked, value]);
     const readyId = id ?? internalId;
-    return /* @__PURE__ */ jsxs13(Div_default.column, { width: "fit-content", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, children: [
+    return /* @__PURE__ */ jsxs14(Div_default.column, { width: "fit-content", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, children: [
       label && /* @__PURE__ */ jsx18(Label_default, { text: label, color: labelColor, required, isError: !!errorText, htmlFor: readyId }),
       /* @__PURE__ */ jsx18(
         Div_default.row,
@@ -7342,7 +7388,7 @@ var ToggleInput_default = {
 
 // src/components/Form.tsx
 import { Children, forwardRef as forwardRef13, Fragment as Fragment5, memo as memo19, useMemo as useMemo7 } from "react";
-import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
 var FormComponent = forwardRef13(function Form({
   form,
   submitButtonText,
@@ -7370,12 +7416,12 @@ var FormComponent = forwardRef13(function Form({
   }, [form]);
   const SubmitButtonTag = isDestructive ? Button_default.destructive : Button_default;
   const submitButtonIsDisabledFinal = submitButtonIsDisabled || submitButtonIsDisabledInternal;
-  return /* @__PURE__ */ jsx19(Div_default, { width: "100%", ...props, children: /* @__PURE__ */ jsxs14("form", { onSubmit: onSubmit ?? form?.onSubmit, ref, children: [
-    gap !== void 0 || withDividers ? /* @__PURE__ */ jsx19(Div_default.column, { gap: gap ?? (withDividers ? theme2.styles.space : theme2.styles.gap), children: withDividers ? Children.toArray(children).map((child, index) => /* @__PURE__ */ jsxs14(Fragment5, { children: [
+  return /* @__PURE__ */ jsx19(Div_default, { width: "100%", ...props, children: /* @__PURE__ */ jsxs15("form", { onSubmit: onSubmit ?? form?.onSubmit, ref, children: [
+    gap !== void 0 || withDividers ? /* @__PURE__ */ jsx19(Div_default.column, { gap: gap ?? (withDividers ? theme2.styles.space : theme2.styles.gap), children: withDividers ? Children.toArray(children).map((child, index) => /* @__PURE__ */ jsxs15(Fragment5, { children: [
       child,
       index < Children.toArray(children).length - 1 && /* @__PURE__ */ jsx19(Divider_default.horizontal, {})
     ] }, index)) : children }) : children,
-    submitButtonText && /* @__PURE__ */ jsxs14(
+    submitButtonText && /* @__PURE__ */ jsxs15(
       Div_default.row,
       {
         alignItems: "center",
@@ -7406,13 +7452,13 @@ var Form_default = Form2;
 
 // src/components/FormRow.tsx
 import { forwardRef as forwardRef14, memo as memo20 } from "react";
-import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 var FormRowComponent = forwardRef14(function FormRow({ oneItemOnly, noBreakingPoint, asColumn, gap, children, ...props }, ref) {
   const theme2 = useTheme();
   const mediaQuery = useMediaQuery();
   const breakingPoint = asColumn ?? (!noBreakingPoint ? mediaQuery.size900 : false);
   const readyGap = breakingPoint || noBreakingPoint && mediaQuery.size900 ? theme2.styles.gap : theme2.styles.space * 2;
-  return /* @__PURE__ */ jsxs15(Div_default.row, { alignItems: "center", gap: gap ?? readyGap, invertFlexDirection: breakingPoint, ...props, ref, children: [
+  return /* @__PURE__ */ jsxs16(Div_default.row, { alignItems: "center", gap: gap ?? readyGap, invertFlexDirection: breakingPoint, ...props, ref, children: [
     children,
     oneItemOnly && /* @__PURE__ */ jsx20(Div_default, { width: "100%" })
   ] });
@@ -7433,16 +7479,16 @@ FormRowComponent.withTitle = forwardRef14(function WithTitle({
   const theme2 = useTheme();
   const mediaQuery = useMediaQuery();
   const titleGap = theme2.styles.space;
-  return /* @__PURE__ */ jsxs15(FormRowComponent, { ...props, ref, children: [
-    /* @__PURE__ */ jsxs15(Div_default.row, { width: "100%", alignItems: "center", gap: titleGap, children: [
+  return /* @__PURE__ */ jsxs16(FormRowComponent, { ...props, ref, children: [
+    /* @__PURE__ */ jsxs16(Div_default.row, { width: "100%", alignItems: "center", gap: titleGap, children: [
       icon && /* @__PURE__ */ jsx20(Icon_default, { name: icon }),
-      /* @__PURE__ */ jsxs15(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
+      /* @__PURE__ */ jsxs16(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
         /* @__PURE__ */ jsx20(Text_default, { as: "h3", children: title }),
         description && /* @__PURE__ */ jsx20(Text_default, { color: theme2.colors.textSecondary, children: description })
       ] }),
       isLoading && /* @__PURE__ */ jsx20(Div_default, { width: 26 - titleGap })
     ] }),
-    /* @__PURE__ */ jsxs15(
+    /* @__PURE__ */ jsxs16(
       Div_default.row,
       {
         position: "relative",
@@ -7463,7 +7509,7 @@ FormRowComponent.withTitle = forwardRef14(function WithTitle({
             }
           ),
           children,
-          withActions && /* @__PURE__ */ jsxs15(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
+          withActions && /* @__PURE__ */ jsxs16(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
             onClickReset && /* @__PURE__ */ jsx20(Button_default.icon, { icon: "XMark", loaderName: resetButtonLoaderName, onClick: onClickReset }),
             /* @__PURE__ */ jsx20(Button_default.icon, { icon: "check", loaderName: saveButtonLoaderName, onClick: onClickSave })
           ] })
@@ -7478,7 +7524,7 @@ var FormRow_default = FormRow2;
 
 // src/components/ColorThemeSwitch.tsx
 import { memo as memo21, useEffect as useEffect9 } from "react";
-import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
 var ColorThemeSwitchComponent = function ColorThemeSwitch({
   withMoon,
   className,
@@ -7520,7 +7566,7 @@ var ColorThemeSwitchComponent = function ColorThemeSwitch({
 };
 ColorThemeSwitchComponent.withText = function WithText({ withMoon, className, ...props }) {
   const theme2 = useTheme();
-  return /* @__PURE__ */ jsxs16(Div_default.row, { width: "fit-content", alignItems: "center", gap: theme2.styles.gap, userSelect: "none", ...props, children: [
+  return /* @__PURE__ */ jsxs17(Div_default.row, { width: "fit-content", alignItems: "center", gap: theme2.styles.gap, userSelect: "none", ...props, children: [
     /* @__PURE__ */ jsx21(Text_default, { children: "Light" }),
     /* @__PURE__ */ jsx21(ColorThemeSwitchComponent, { withMoon, className }),
     /* @__PURE__ */ jsx21(Text_default, { children: "Dark" })
@@ -7543,7 +7589,7 @@ import {
   Fragment as Fragment6
 } from "react";
 import styled12, { css as css2 } from "styled-components";
-import { Fragment as Fragment7, jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 var defaultImageWidth = 160;
 var maximumVisiblePages = 11;
 var TableStyledComponent = styled12.table.withConfig({
@@ -8072,7 +8118,7 @@ var TableComponent = forwardRef15(function Table({
   );
   const withFooter = pageSize !== void 0 && pageCountInternal > 1;
   const mobileFooterBreakingPoint = mediaQuery.size700 && pageCountInternal > maximumVisiblePages / 1.4;
-  return /* @__PURE__ */ jsxs17(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs18(Fragment7, { children: [
     /* @__PURE__ */ jsx22(
       Div_default,
       {
@@ -8081,7 +8127,7 @@ var TableComponent = forwardRef15(function Table({
         overflow: !containsOverflowComponents ? "auto" : void 0,
         ...props,
         ref: wrapperComponentRef,
-        children: /* @__PURE__ */ jsxs17(
+        children: /* @__PURE__ */ jsxs18(
           TableStyledComponent,
           {
             isStriped,
@@ -8099,7 +8145,7 @@ var TableComponent = forwardRef15(function Table({
                   minWidth: column.minWidth,
                   maxWidth: column.maxWidth,
                   textAlign: column.align,
-                  children: /* @__PURE__ */ jsxs17(
+                  children: /* @__PURE__ */ jsxs18(
                     Div_default.row,
                     {
                       width: "100%",
@@ -8130,7 +8176,7 @@ var TableComponent = forwardRef15(function Table({
                 },
                 column.type + column.label + index
               )) }) }),
-              /* @__PURE__ */ jsx22("tbody", { children: isLoading ? /* @__PURE__ */ jsx22("tr", { className: "withoutHover", children: /* @__PURE__ */ jsx22("td", { className: "noData", colSpan: columns.length, children: /* @__PURE__ */ jsx22(Loader_default.box, {}) }) }) : dataAfterPagination.length > 0 ? dataAfterPagination.map((item, rowIndex) => /* @__PURE__ */ jsxs17(Fragment6, { children: [
+              /* @__PURE__ */ jsx22("tbody", { children: isLoading ? /* @__PURE__ */ jsx22("tr", { className: "withoutHover", children: /* @__PURE__ */ jsx22("td", { className: "noData", colSpan: columns.length, children: /* @__PURE__ */ jsx22(Loader_default.box, {}) }) }) : dataAfterPagination.length > 0 ? dataAfterPagination.map((item, rowIndex) => /* @__PURE__ */ jsxs18(Fragment6, { children: [
                 /* @__PURE__ */ jsx22(
                   "tr",
                   {
@@ -8152,7 +8198,7 @@ var TableComponent = forwardRef15(function Table({
                 ),
                 expandedRows[rowIndex] && /* @__PURE__ */ jsx22("tr", { className: "withoutHover isExpandRow", children: /* @__PURE__ */ jsx22("td", { colSpan: columns.length, children: renderExpandedRow(item, rowIndex) }) })
               ] }, JSON.stringify(item) + rowIndex)) : /* @__PURE__ */ jsx22("tr", { className: "withoutHover", children: /* @__PURE__ */ jsx22("td", { className: "noData", colSpan: columns.length, children: /* @__PURE__ */ jsx22(Text_default.unknown, { children: noDataItemsMessage }) }) }) }),
-              withFooter && /* @__PURE__ */ jsx22("tfoot", { children: /* @__PURE__ */ jsx22("tr", { className: "isFooter", children: /* @__PURE__ */ jsx22("td", { colSpan: columns.length, children: /* @__PURE__ */ jsxs17(
+              withFooter && /* @__PURE__ */ jsx22("tfoot", { children: /* @__PURE__ */ jsx22("tr", { className: "isFooter", children: /* @__PURE__ */ jsx22("td", { colSpan: columns.length, children: /* @__PURE__ */ jsxs18(
                 Div_default.column,
                 {
                   position: "relative",
@@ -8161,7 +8207,7 @@ var TableComponent = forwardRef15(function Table({
                   flexReverse: true,
                   gap: theme2.styles.gap / 2,
                   children: [
-                    /* @__PURE__ */ jsxs17(
+                    /* @__PURE__ */ jsxs18(
                       Text_default,
                       {
                         position: mobileFooterBreakingPoint ? "relative" : "absolute",
@@ -8176,7 +8222,7 @@ var TableComponent = forwardRef15(function Table({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ jsxs17(Div_default.row, { alignItems: "center", justifyContent: "center", gap: theme2.styles.gap * 2, children: [
+                    /* @__PURE__ */ jsxs18(Div_default.row, { alignItems: "center", justifyContent: "center", gap: theme2.styles.gap * 2, children: [
                       pageCountInternal > maximumVisiblePages && /* @__PURE__ */ jsx22(
                         Button_default.icon,
                         {
@@ -8265,12 +8311,12 @@ var TableComponent = forwardRef15(function Table({
             submitButtonText: "Filter",
             cancelButtonText: "Clear",
             onClickCancel: openedFilterData ? onClickCancelFormFilter : void 0,
-            children: /* @__PURE__ */ jsxs17(FormRow_default, { children: [
+            children: /* @__PURE__ */ jsxs18(FormRow_default, { children: [
               /* @__PURE__ */ jsx22(InputField_default, { type: "number", label: "Min", ...filterForm.getInputFieldProps("min") }),
               /* @__PURE__ */ jsx22(InputField_default, { type: "number", label: "Max", ...filterForm.getInputFieldProps("max") })
             ] })
           }
-        ) : openedFilterColumn.filter === "date" || openedFilterColumn.filter === "date-time" ? /* @__PURE__ */ jsxs17(
+        ) : openedFilterColumn.filter === "date" || openedFilterColumn.filter === "date-time" ? /* @__PURE__ */ jsxs18(
           Form_default,
           {
             form: filterForm,
@@ -8279,14 +8325,14 @@ var TableComponent = forwardRef15(function Table({
             cancelButtonText: "Clear",
             onClickCancel: openedFilterData ? onClickCancelFormFilter : void 0,
             children: [
-              /* @__PURE__ */ jsx22(FormRow_default, { children: openedFilterColumn.filter === "date" ? /* @__PURE__ */ jsxs17(Fragment7, { children: [
+              /* @__PURE__ */ jsx22(FormRow_default, { children: openedFilterColumn.filter === "date" ? /* @__PURE__ */ jsxs18(Fragment7, { children: [
                 /* @__PURE__ */ jsx22(InputField_default.date, { label: "Min", ...filterForm.getInputFieldProps("min") }),
                 /* @__PURE__ */ jsx22(InputField_default.date, { label: "Max", ...filterForm.getInputFieldProps("max") })
-              ] }) : /* @__PURE__ */ jsxs17(Fragment7, { children: [
+              ] }) : /* @__PURE__ */ jsxs18(Fragment7, { children: [
                 /* @__PURE__ */ jsx22(InputField_default.dateTime, { label: "Min", ...filterForm.getInputFieldProps("min") }),
                 /* @__PURE__ */ jsx22(InputField_default.dateTime, { label: "Max", ...filterForm.getInputFieldProps("max") })
               ] }) }),
-              openedFilterColumn.presets && /* @__PURE__ */ jsxs17(Div_default.column, { gap: theme2.styles.gap / 2, children: [
+              openedFilterColumn.presets && /* @__PURE__ */ jsxs18(Div_default.column, { gap: theme2.styles.gap / 2, children: [
                 /* @__PURE__ */ jsx22(Label_default, { text: "Presets" }),
                 /* @__PURE__ */ jsx22(Div_default.row, { alignItems: "center", flexWrap: "wrap", gap: theme2.styles.gap, children: openedFilterColumn.presets.map((preset) => /* @__PURE__ */ jsx22(
                   Button_default.secondary,
@@ -8301,13 +8347,13 @@ var TableComponent = forwardRef15(function Table({
               ] })
             ]
           }
-        ) : openedFilterColumn.filter === "list" ? /* @__PURE__ */ jsxs17(
+        ) : openedFilterColumn.filter === "list" ? /* @__PURE__ */ jsxs18(
           Form_default,
           {
             gap: theme2.styles.space,
             submitButtonText: "Filter",
             cancelButtonText: "Clear",
-            renderActionButtons: /* @__PURE__ */ jsxs17(Div_default.row, { marginRight: "auto", alignItems: "center", gap: theme2.styles.gap, children: [
+            renderActionButtons: /* @__PURE__ */ jsxs18(Div_default.row, { marginRight: "auto", alignItems: "center", gap: theme2.styles.gap, children: [
               /* @__PURE__ */ jsx22(
                 Button_default.secondary,
                 {
@@ -8338,7 +8384,7 @@ var TableComponent = forwardRef15(function Table({
                   ...filterForm.getInputFieldProps("search")
                 }
               ) }),
-              /* @__PURE__ */ jsxs17(Div_default.column, { gap: theme2.styles.gap / 2, children: [
+              /* @__PURE__ */ jsxs18(Div_default.column, { gap: theme2.styles.gap / 2, children: [
                 /* @__PURE__ */ jsx22(Label_default, { text: "Possible values" }),
                 /* @__PURE__ */ jsx22(Div_default.row, { flexWrap: "wrap", gap: theme2.styles.gap, children: possibleFilterListValues.length > 0 ? possibleFilterListValues.map((value) => {
                   const isActive = filterListSelectedItems?.includes(value.value);
@@ -8348,9 +8394,9 @@ var TableComponent = forwardRef15(function Table({
                       isActive,
                       value: value.value,
                       onClickWithValue: onClickFilterListItem,
-                      children: /* @__PURE__ */ jsxs17(Div_default.row, { alignItems: "center", gap: theme2.styles.gap / 2, children: [
+                      children: /* @__PURE__ */ jsxs18(Div_default.row, { alignItems: "center", gap: theme2.styles.gap / 2, children: [
                         /* @__PURE__ */ jsx22(Text_default, { children: value.label ?? value.value }),
-                        openedFilterColumn.withTotalNumber && /* @__PURE__ */ jsxs17(
+                        openedFilterColumn.withTotalNumber && /* @__PURE__ */ jsxs18(
                           Text_default,
                           {
                             fontSize: 14,
@@ -8382,7 +8428,7 @@ var Table_default = Table2;
 // src/components/Tooltip.tsx
 import { memo as memo23, useCallback as useCallback12, useRef as useRef7, useState as useState10, useEffect as useEffect11, forwardRef as forwardRef16, useImperativeHandle as useImperativeHandle3, useMemo as useMemo9 } from "react";
 import styled13, { css as css3 } from "styled-components";
-import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
 var tooltipContainerStyle = (props) => ({
   top: css3`
       bottom: calc(100% + ${props.gap}px + ${props.arrowSize}px);
@@ -8618,7 +8664,7 @@ var TooltipComponent = forwardRef16(function Tooltip({
     },
     [isOpen, openTooltip, closeTooltip]
   );
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     Div_default,
     {
       position: "relative",
@@ -8650,7 +8696,7 @@ var TooltipComponent = forwardRef16(function Tooltip({
             isOpen,
             role: "tooltip",
             ref: tooltipContainerRef,
-            children: (isOpen || isOpenLate) && /* @__PURE__ */ jsxs18(Div_default, { position: "relative", ref: contentRef, children: [
+            children: (isOpen || isOpenLate) && /* @__PURE__ */ jsxs19(Div_default, { position: "relative", ref: contentRef, children: [
               /* @__PURE__ */ jsx23(
                 Div_default.box,
                 {
@@ -8711,7 +8757,7 @@ TooltipComponent.item = forwardRef16(function Item({
   onClickWithValue
 }, ref) {
   const theme2 = useTheme();
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     Div_default.row,
     {
       alignItems: "center",
@@ -8730,7 +8776,7 @@ TooltipComponent.item = forwardRef16(function Item({
       ref,
       children: [
         icon && /* @__PURE__ */ jsx23(Icon_default, { name: icon, color: iconColor ?? (!isActive ? theme2.colors.textSecondary : void 0) }),
-        /* @__PURE__ */ jsxs18(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
+        /* @__PURE__ */ jsxs19(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
           /* @__PURE__ */ jsx23(Text_default, { fontWeight: isActive ? 700 : void 0, color: textColor ?? theme2.colors.textPrimary, children: text }),
           description && /* @__PURE__ */ jsx23(Text_default, { fontSize: 14, color: theme2.colors.textSecondary, children: description })
         ] })
@@ -8766,7 +8812,7 @@ var Tooltip_default = Tooltip2;
 
 // src/components/Tabs.tsx
 import { forwardRef as forwardRef17, memo as memo24, useCallback as useCallback13, useEffect as useEffect12, useImperativeHandle as useImperativeHandle4, useMemo as useMemo10, useRef as useRef8, useState as useState11 } from "react";
-import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
 var tabBottomLineWidth = 2;
 var tabDotSize = 6;
 var defaultTabName = "tab";
@@ -8865,11 +8911,11 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
     },
     [selectedTab, onClickTab]
   );
-  return /* @__PURE__ */ jsxs19(Div_default.column, { width: "100%", gap: theme2.styles.space, ...props, children: [
-    /* @__PURE__ */ jsxs19(Div_default, { position: "relative", className: "react-better-html-no-scrollbar", overflowY: "auto", children: [
+  return /* @__PURE__ */ jsxs20(Div_default.column, { width: "100%", gap: theme2.styles.space, ...props, children: [
+    /* @__PURE__ */ jsxs20(Div_default, { position: "relative", className: "react-better-html-no-scrollbar", overflowY: "auto", children: [
       /* @__PURE__ */ jsx24(Div_default.row, { position: "relative", width: "fit-content", gap: tabsGap, userSelect: "none", children: tabs.map((tab) => {
         const selected = tab === selectedTab;
-        return /* @__PURE__ */ jsxs19(
+        return /* @__PURE__ */ jsxs20(
           Div_default,
           {
             position: "relative",
@@ -8957,7 +9003,7 @@ var Tabs_default = Tabs2;
 
 // src/components/Foldable.tsx
 import { forwardRef as forwardRef18, memo as memo25, useCallback as useCallback14, useEffect as useEffect13, useImperativeHandle as useImperativeHandle5, useRef as useRef9, useState as useState12 } from "react";
-import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
 var animationDurationClose = 0.15;
 var animationDurationOpen = animationDurationClose * 2;
 var FoldableComponent = forwardRef18(function Foldable({
@@ -9026,8 +9072,8 @@ var FoldableComponent = forwardRef18(function Foldable({
     },
     [open, close, toggleOpen, isOpen]
   );
-  return /* @__PURE__ */ jsxs20(Div_default.column, { width: "100%", ...props, children: [
-    renderHeader ? renderHeader(isOpen, toggleOpen) : /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(Div_default.column, { width: "100%", ...props, children: [
+    renderHeader ? renderHeader(isOpen, toggleOpen) : /* @__PURE__ */ jsxs21(
       Div_default.row,
       {
         width: "100%",
@@ -9039,10 +9085,10 @@ var FoldableComponent = forwardRef18(function Foldable({
         onClick: toggleOpen,
         userSelect: "none",
         children: [
-          /* @__PURE__ */ jsxs20(Div_default.row, { flex: 1, alignItems: "center", gap: theme2.styles.space, children: [
+          /* @__PURE__ */ jsxs21(Div_default.row, { flex: 1, alignItems: "center", gap: theme2.styles.space, children: [
             icon && /* @__PURE__ */ jsx25(Icon_default, { name: icon, size: 20, flexShrink: 0 }),
             image && /* @__PURE__ */ jsx25(Image_default.profileImage, { name: image, size: 24, flexShrink: 0 }),
-            /* @__PURE__ */ jsxs20(Div_default.column, { gap: theme2.styles.gap / 2, children: [
+            /* @__PURE__ */ jsxs21(Div_default.column, { gap: theme2.styles.gap / 2, children: [
               title && /* @__PURE__ */ jsx25(Text_default, { as: "h3", fontWeight: 700, lineHeight: "20px", children: title }),
               description && /* @__PURE__ */ jsx25(Text_default, { color: theme2.colors.textSecondary, children: description })
             ] })