react-better-html 1.1.162 → 1.1.164

package/dist/index.js

@@ -92,7 +92,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/Div.tsx
-var import_react11 = require("react");
+var import_react13 = require("react");
 var import_styled_components8 = __toESM(require("styled-components"));
 
 // src/constants.ts
@@ -102,6 +102,7 @@ var isMobileDevice = /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Op
 
 // src/utils/hooks.ts
 var import_react10 = require("react");
+var import_react_router_dom = require("react-router-dom");
 
 // src/constants/css.ts
 var cssProps = {
@@ -1639,10 +1640,7 @@ var alertsPlugin = (options) => ({
 });
 
 // src/plugins/reactRouterDom.ts
-var reactRouterDomLib = __toESM(require("react-router-dom"));
-var defaultReactRouterDomPluginOptions = {
-  reactRouterDomLib
-};
+var defaultReactRouterDomPluginOptions = {};
 var reactRouterDomPlugin = (options) => ({
   name: "react-router-dom",
   initialize: () => {
@@ -3153,15 +3151,14 @@ function useUrlQuery() {
       "`useUrlQuery` hook requires the `react-router-dom` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
     );
   }
-  const reactRouterDomPluginConfig = reactRouterDomPlugin2.getConfig();
-  const isInRouterContext = reactRouterDomPluginConfig.reactRouterDomLib.useInRouterContext();
+  const isInRouterContext = (0, import_react_router_dom.useInRouterContext)();
   if (!isInRouterContext) {
     throw new Error(
       "`useUrlQuery` hook must be used inside a React Router context. Make sure your component is wrapped in a `<BrowserRouter>`, or another Router component."
     );
   }
-  const navigate = reactRouterDomPluginConfig.reactRouterDomLib.useNavigate();
-  const [searchParams] = reactRouterDomPluginConfig.reactRouterDomLib.useSearchParams();
+  const navigate = (0, import_react_router_dom.useNavigate)();
+  const [searchParams] = (0, import_react_router_dom.useSearchParams)();
   const setQuery = (0, import_react10.useCallback)(
     (query, keepHistory = true) => {
       const currentSearchParams = {};
@@ -3170,7 +3167,7 @@ function useUrlQuery() {
       });
       navigate(
         {
-          search: reactRouterDomPluginConfig.reactRouterDomLib.createSearchParams({
+          search: (0, import_react_router_dom.createSearchParams)({
             ...currentSearchParams,
             ...Object.fromEntries(Object.entries(query).map(([key, value]) => [key, value.toString()]))
           }).toString()
@@ -3204,8 +3201,117 @@ function useUrlQuery() {
   };
 }
 
-// src/components/Div.tsx
+// src/components/Divider.tsx
+var import_react11 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
+var Divider_default = {
+  vertical: (0, import_react11.memo)(
+    (0, import_react11.forwardRef)(function Divider({ width = 1, backgroundColor, height, ...props }, ref) {
+      const theme2 = useTheme();
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        Div_default,
+        {
+          width,
+          height: height ?? "100%",
+          flexShrink: 0,
+          backgroundColor: backgroundColor ?? theme2.colors.border,
+          ...props,
+          ref
+        }
+      );
+    })
+  ),
+  horizontal: (0, import_react11.memo)(
+    (0, import_react11.forwardRef)(function Divider2({ width = 1, backgroundColor, text, textFontSize, textColor, ...props }, ref) {
+      const theme2 = useTheme();
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Div_default.row, { width: "100%", alignItems: "center", gap: text ? theme2.styles.space : void 0, ...props, ref, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme2.colors.border }),
+        text && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { fontSize: textFontSize, color: textColor ?? theme2.colors.textSecondary, children: text }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme2.colors.border })
+      ] });
+    })
+  )
+};
+
+// src/components/PageHeader.tsx
+var import_react12 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var PageHeaderComponent = (0, import_react12.forwardRef)(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__ */ (0, import_jsx_runtime10.jsxs)(
+    Div_default.row,
+    {
+      alignItems: "center",
+      gap: theme2.styles.space,
+      marginBottom: marginBottom ?? theme2.styles.space * 2,
+      ref,
+      children: [
+        imageUrl && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Image_default.profileImage, { src: imageUrl, size: imageSize ?? (mediaQuery.size600 ? 46 : 60) }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          Div_default.column,
+          {
+            alignItems: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : void 0,
+            flex: 1,
+            gap: theme2.styles.gap / 2,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                Div_default.row,
+                {
+                  alignItems: "center",
+                  justifyContent: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : void 0,
+                  gap: theme2.styles.space,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      Text_default,
+                      {
+                        as: titleAs ?? "h1",
+                        textAlign,
+                        color: titleColor ?? (lightMode ? theme2.colors.base : theme2.colors.textPrimary),
+                        children: title
+                      }
+                    ),
+                    titleRightElement
+                  ]
+                }
+              ),
+              description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                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 = (0, import_react12.memo)(PageHeaderComponent);
+var PageHeader_default = PageHeader2;
+
+// src/components/Div.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var DivStyledComponent = import_styled_components8.default.div.withConfig({
   shouldForwardProp: (prop) => !["normalStyle", "hoverStyle"].includes(prop)
 })`
@@ -3215,7 +3321,7 @@ var DivStyledComponent = import_styled_components8.default.div.withConfig({
       ${(props) => props.hoverStyle}
    }
 `;
-var DivComponent = (0, import_react11.forwardRef)(function Div({
+var DivComponent = (0, import_react13.forwardRef)(function Div({
   as = "div",
   value,
   isTabAccessed,
@@ -3232,14 +3338,14 @@ var DivComponent = (0, import_react11.forwardRef)(function Div({
   const dataProps = useComponentPropsWithPrefix(props, "data");
   const ariaProps = useComponentPropsWithPrefix(props, "aria");
   const restProps = useComponentPropsWithoutStyle(props);
-  const onClickElement = (0, import_react11.useCallback)(
+  const onClickElement = (0, import_react13.useCallback)(
     (event) => {
       onClick?.(event);
       onClickWithValue?.(value);
     },
     [onClick, onClickWithValue, value]
   );
-  const onKeyDownElement = (0, import_react11.useCallback)(
+  const onKeyDownElement = (0, import_react13.useCallback)(
     (event) => {
       onKeyDown?.(event);
       if (!isTabAccessed) return;
@@ -3250,7 +3356,7 @@ var DivComponent = (0, import_react11.forwardRef)(function Div({
     },
     [onKeyDown, isTabAccessed]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     DivStyledComponent,
     {
       as,
@@ -3268,9 +3374,9 @@ var DivComponent = (0, import_react11.forwardRef)(function Div({
     }
   );
 });
-DivComponent.row = (0, import_react11.forwardRef)(function Row({ flexReverse, invertFlexDirection, ...props }, ref) {
+DivComponent.row = (0, import_react13.forwardRef)(function Row({ flexReverse, invertFlexDirection, ...props }, ref) {
   const reverseSuffix = flexReverse ? "-reverse" : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     DivComponent,
     {
       display: "flex",
@@ -3280,9 +3386,9 @@ DivComponent.row = (0, import_react11.forwardRef)(function Row({ flexReverse, in
     }
   );
 });
-DivComponent.column = (0, import_react11.forwardRef)(function Column({ flexReverse, invertFlexDirection, ...props }, ref) {
+DivComponent.column = (0, import_react13.forwardRef)(function Column({ flexReverse, invertFlexDirection, ...props }, ref) {
   const reverseSuffix = flexReverse ? "-reverse" : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     DivComponent,
     {
       display: "flex",
@@ -3292,13 +3398,29 @@ DivComponent.column = (0, import_react11.forwardRef)(function Column({ flexRever
     }
   );
 });
-DivComponent.grid = (0, import_react11.forwardRef)(function Grid(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DivComponent, { display: "grid", ref, ...props });
+DivComponent.grid = (0, import_react13.forwardRef)(function Grid(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DivComponent, { display: "grid", ref, ...props });
 });
-DivComponent.box = (0, import_react11.forwardRef)(function Box2({ isActive, ...props }, ref) {
+DivComponent.box = (0, import_react13.forwardRef)(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__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     DivComponent,
     {
       color: isActive ? theme2.colors.base : void 0,
@@ -3308,57 +3430,61 @@ DivComponent.box = (0, import_react11.forwardRef)(function Box2({ isActive, ...p
       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__ */ (0, import_jsx_runtime11.jsxs)(
+          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__ */ (0, import_jsx_runtime11.jsx)(
+                PageHeader_default,
+                {
+                  imageUrl,
+                  imageSize,
+                  title,
+                  titleAs,
+                  titleColor,
+                  titleRightElement,
+                  description,
+                  descriptionColor,
+                  textAlign,
+                  rightElement,
+                  lightMode,
+                  marginBottom: theme2.styles.space
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Div2, { width: `calc(100% + ${theme2.styles.space * 2}px)`, marginLeft: -theme2.styles.space, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Divider_default.horizontal, {}) })
+            ]
+          }
+        ),
+        children
+      ]
     }
   );
 });
-var Div2 = (0, import_react11.memo)(DivComponent);
+var Div2 = (0, import_react13.memo)(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
-var import_react12 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var Divider_default = {
-  vertical: (0, import_react12.memo)(
-    (0, import_react12.forwardRef)(function Divider({ width = 1, backgroundColor, height, ...props }, ref) {
-      const theme2 = useTheme();
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        Div_default,
-        {
-          width,
-          height: height ?? "100%",
-          flexShrink: 0,
-          backgroundColor: backgroundColor ?? theme2.colors.border,
-          ...props,
-          ref
-        }
-      );
-    })
-  ),
-  horizontal: (0, import_react12.memo)(
-    (0, import_react12.forwardRef)(function Divider2({ width = 1, backgroundColor, text, textFontSize, textColor, ...props }, ref) {
-      const theme2 = useTheme();
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Div_default.row, { width: "100%", alignItems: "center", gap: text ? theme2.styles.space : void 0, ...props, ref, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme2.colors.border }),
-        text && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text_default, { fontSize: textFontSize, color: textColor ?? theme2.colors.textSecondary, children: text }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme2.colors.border })
-      ] });
-    })
-  )
-};
-
 // src/components/Modal.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_react_dom = require("react-dom");
 var import_styled_components9 = __toESM(require("styled-components"));
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var DialogStylesElement = import_styled_components9.default.dialog.withConfig({
   shouldForwardProp: (prop) => !["theme", "colorTheme", "opacity"].includes(prop)
 })`
@@ -3399,7 +3525,7 @@ var DialogStylesElement = import_styled_components9.default.dialog.withConfig({
       }
    }
 `;
-var ModalComponent = (0, import_react13.forwardRef)(function Modal({
+var ModalComponent = (0, import_react14.forwardRef)(function Modal({
   maxWidth,
   title,
   titleColor,
@@ -3417,10 +3543,10 @@ var ModalComponent = (0, import_react13.forwardRef)(function Modal({
   const urlQuery = reactRouterDomPlugin2 ? useUrlQuery() : void 0;
   const theme2 = useTheme();
   const { app, colorTheme } = useBetterHtmlContextInternal();
-  const dialogRef = (0, import_react13.useRef)(null);
-  const [isOpened, setIsOpened] = (0, import_react13.useState)(false);
-  const [isOpenedLate, setIsOpenedLate] = (0, import_react13.useState)(false);
-  const onClickOpen = (0, import_react13.useCallback)(() => {
+  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);
@@ -3434,7 +3560,7 @@ var ModalComponent = (0, import_react13.forwardRef)(function Modal({
     }
     onOpen?.();
   }, [onOpen, urlQuery, name]);
-  const onClickClose = (0, import_react13.useCallback)(() => {
+  const onClickClose = (0, import_react14.useCallback)(() => {
     setIsOpened(false);
     onClose?.();
     if (urlQuery && name) urlQuery.removeQuery(`${name}-modal`, false);
@@ -3443,7 +3569,7 @@ var ModalComponent = (0, import_react13.forwardRef)(function Modal({
       setIsOpenedLate(false);
     }, 0.2 * 1e3);
   }, [onClose, urlQuery, name]);
-  const onKeyDown = (0, import_react13.useCallback)(
+  const onKeyDown = (0, import_react14.useCallback)(
     (event) => {
       if (event.key === "Escape") {
         if (!withoutCloseButton) return;
@@ -3452,7 +3578,7 @@ var ModalComponent = (0, import_react13.forwardRef)(function Modal({
     },
     [withoutCloseButton]
   );
-  (0, import_react13.useImperativeHandle)(
+  (0, import_react14.useImperativeHandle)(
     ref,
     () => {
       return {
@@ -3464,7 +3590,7 @@ var ModalComponent = (0, import_react13.forwardRef)(function Modal({
     [onClickOpen, onClickClose, isOpened]
   );
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       DialogStylesElement,
       {
         theme: theme2,
@@ -3473,7 +3599,7 @@ var ModalComponent = (0, import_react13.forwardRef)(function Modal({
         onClose: onClickClose,
         onKeyDown,
         ref: dialogRef,
-        children: isOpenedLate ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        children: isOpenedLate ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           Div_default.column,
           {
             position: "relative",
@@ -3487,7 +3613,7 @@ var ModalComponent = (0, import_react13.forwardRef)(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__ */ (0, import_jsx_runtime11.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
               Div_default,
               {
                 position: "relative",
@@ -3495,12 +3621,11 @@ var ModalComponent = (0, import_react13.forwardRef)(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__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+                  title ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
                       Div_default.row,
                       {
                         alignItems: "center",
@@ -3508,12 +3633,12 @@ var ModalComponent = (0, import_react13.forwardRef)(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__ */ (0, import_jsx_runtime11.jsxs)(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                               Text_default,
                               {
                                 as: "h1",
@@ -3522,7 +3647,7 @@ var ModalComponent = (0, import_react13.forwardRef)(function Modal({
                                 children: title
                               }
                             ),
-                            description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                            description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                               Text_default,
                               {
                                 color: descriptionColor ?? theme2.colors.textSecondary,
@@ -3531,7 +3656,7 @@ var ModalComponent = (0, import_react13.forwardRef)(function Modal({
                               }
                             )
                           ] }),
-                          !withoutCloseButton && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                          !withoutCloseButton && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                             Button_default.icon,
                             {
                               icon: "XMark",
@@ -3544,16 +3669,9 @@ var ModalComponent = (0, import_react13.forwardRef)(function Modal({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Divider_default.horizontal, {})
-                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: !withoutCloseButton && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Div_default, { position: "absolute", top: theme2.styles.space, right: theme2.styles.space, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Button_default.icon, { icon: "XMark", onClick: onClickClose }) }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                    Div_default,
-                    {
-                      paddingInline: title ? theme2.styles.space + theme2.styles.gap : void 0,
-                      paddingBlock: title ? theme2.styles.space : void 0,
-                      children
-                    }
-                  )
+                    /* @__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: theme2.styles.space, right: theme2.styles.space, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button_default.icon, { icon: "XMark", onClick: onClickClose }) }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Div_default, { padding: title ? theme2.styles.space : void 0, children })
                 ]
               }
             )
@@ -3564,21 +3682,21 @@ var ModalComponent = (0, import_react13.forwardRef)(function Modal({
     document.body
   );
 });
-ModalComponent.confirmation = (0, import_react13.forwardRef)(function Confirmation({ message, continueButtonLoaderName, onContinue, onCancel, ...props }, ref) {
+ModalComponent.confirmation = (0, import_react14.forwardRef)(function Confirmation({ message, continueButtonLoaderName, onContinue, onCancel, ...props }, ref) {
   const theme2 = useTheme();
-  const modalRef = (0, import_react13.useRef)(null);
-  const onCancelElement = (0, import_react13.useCallback)(() => {
+  const modalRef = (0, import_react14.useRef)(null);
+  const onCancelElement = (0, import_react14.useCallback)(() => {
     onCancel?.();
     modalRef.current?.close();
   }, [onCancel]);
-  const onContinueElement = (0, import_react13.useCallback)(() => {
+  const onContinueElement = (0, import_react14.useCallback)(() => {
     onContinue?.();
     modalRef.current?.close();
   }, [onContinue]);
-  (0, import_react13.useImperativeHandle)(ref, () => modalRef.current, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(ModalComponent, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Text_default, { color: theme2.colors.textSecondary, children: message ?? "Do you really want to continue? This action may be irreversible." }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  (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: theme2.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",
@@ -3586,28 +3704,28 @@ ModalComponent.confirmation = (0, import_react13.forwardRef)(function Confirmati
         gap: theme2.styles.gap,
         marginTop: theme2.styles.space * 2,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Button_default.secondary, { text: "Cancel", onClick: onCancelElement }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Button_default, { text: "Continue", loaderName: continueButtonLoaderName, onClick: onContinueElement })
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button_default.secondary, { text: "Cancel", onClick: onCancelElement }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button_default, { text: "Continue", loaderName: continueButtonLoaderName, onClick: onContinueElement })
         ]
       }
     )
   ] });
 });
-ModalComponent.destructive = (0, import_react13.forwardRef)(function Destructive2({ message, deleteButtonLoaderName, onDelete, onCancel, ...props }, ref) {
+ModalComponent.destructive = (0, import_react14.forwardRef)(function Destructive2({ message, deleteButtonLoaderName, onDelete, onCancel, ...props }, ref) {
   const theme2 = useTheme();
-  const modalRef = (0, import_react13.useRef)(null);
-  const onCancelElement = (0, import_react13.useCallback)(() => {
+  const modalRef = (0, import_react14.useRef)(null);
+  const onCancelElement = (0, import_react14.useCallback)(() => {
     onCancel?.();
     modalRef.current?.close();
   }, [onCancel]);
-  const onDeleteElement = (0, import_react13.useCallback)(() => {
+  const onDeleteElement = (0, import_react14.useCallback)(() => {
     onDelete?.();
     modalRef.current?.close();
   }, [onDelete]);
-  (0, import_react13.useImperativeHandle)(ref, () => modalRef.current, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(ModalComponent, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsxs)(
+  (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: 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_runtime12.jsxs)(
       Div_default.row,
       {
         alignItems: "center",
@@ -3615,8 +3733,8 @@ ModalComponent.destructive = (0, import_react13.forwardRef)(function Destructive
         gap: theme2.styles.gap,
         marginTop: theme2.styles.space * 2,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Button_default.secondary, { text: "Cancel", onClick: onCancelElement }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button_default.secondary, { text: "Cancel", onClick: onCancelElement }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             Button_default.destructive,
             {
               icon: "trash",
@@ -3630,18 +3748,18 @@ ModalComponent.destructive = (0, import_react13.forwardRef)(function Destructive
     )
   ] });
 });
-var Modal2 = (0, import_react13.memo)(ModalComponent);
+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_react14 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var PageHolderComponent = (0, import_react14.forwardRef)(function PageHolder({ noMaxContentWidth, children, ...props }, ref) {
+var import_react15 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var PageHolderComponent = (0, import_react15.forwardRef)(function PageHolder({ noMaxContentWidth, children, ...props }, ref) {
   const theme2 = useTheme();
   const { app } = useBetterHtmlContextInternal();
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     Div_default,
     {
       as: "main",
@@ -3655,7 +3773,7 @@ var PageHolderComponent = (0, import_react14.forwardRef)(function PageHolder({ n
     }
   );
 });
-PageHolderComponent.center = (0, import_react14.forwardRef)(function Center({
+PageHolderComponent.center = (0, import_react15.forwardRef)(function Center({
   pageBackgroundColor,
   pageBackgroundImage,
   contentMaxWidth,
@@ -3671,7 +3789,7 @@ PageHolderComponent.center = (0, import_react14.forwardRef)(function Center({
   const { app } = useBetterHtmlContextInternal();
   const breakingPoint = mediaQuery.size1000;
   const withSideComponent = sideComponent && !breakingPoint;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     Div_default.row,
     {
       position: "relative",
@@ -3682,7 +3800,7 @@ PageHolderComponent.center = (0, import_react14.forwardRef)(function Center({
       backgroundColor: pageBackgroundColor,
       backgroundImage: pageBackgroundImage,
       children: [
-        behindComponent && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        behindComponent && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           Div_default,
           {
             position: "fixed",
@@ -3695,8 +3813,8 @@ PageHolderComponent.center = (0, import_react14.forwardRef)(function Center({
             children: behindComponent
           }
         ),
-        sideComponentPosition === "left" && withSideComponent && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Div_default, { width: "50%" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Div_default.column, { position: "relative", width: `${withSideComponent ? 50 : 100}%`, alignItems: "center", zIndex: 2, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        sideComponentPosition === "left" && withSideComponent && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Div_default, { width: "50%" }),
+        /* @__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)(
           Div_default.box,
           {
             width: `calc(100% - ${theme2.styles.space * 2}px)`,
@@ -3708,8 +3826,8 @@ PageHolderComponent.center = (0, import_react14.forwardRef)(function Center({
             children
           }
         ) }),
-        sideComponentPosition === "right" && withSideComponent && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Div_default, { width: "50%" }),
-        withSideComponent && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        sideComponentPosition === "right" && withSideComponent && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Div_default, { width: "50%" }),
+        withSideComponent && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           Div_default,
           {
             position: "fixed",
@@ -3725,85 +3843,10 @@ PageHolderComponent.center = (0, import_react14.forwardRef)(function Center({
     }
   );
 });
-var PageHolder2 = (0, import_react14.memo)(PageHolderComponent);
+var PageHolder2 = (0, import_react15.memo)(PageHolderComponent);
 PageHolder2.center = PageHolderComponent.center;
 var PageHolder_default = PageHolder2;
 
-// src/components/PageHeader.tsx
-var import_react15 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var PageHeaderComponent = (0, import_react15.forwardRef)(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__ */ (0, import_jsx_runtime13.jsxs)(
-    Div_default.row,
-    {
-      alignItems: "center",
-      gap: theme2.styles.space,
-      marginBottom: marginBottom ?? theme2.styles.space * 2,
-      ref,
-      children: [
-        imageUrl && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Image_default.profileImage, { src: imageUrl, size: imageSize ?? (mediaQuery.size600 ? 46 : 60) }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-          Div_default.column,
-          {
-            alignItems: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : void 0,
-            flex: 1,
-            gap: theme2.styles.gap / 2,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-                Div_default.row,
-                {
-                  alignItems: "center",
-                  justifyContent: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : void 0,
-                  gap: theme2.styles.space,
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                      Text_default,
-                      {
-                        as: titleAs ?? "h1",
-                        textAlign,
-                        color: lightMode ? theme2.colors.base : theme2.colors.textPrimary,
-                        children: title
-                      }
-                    ),
-                    titleRightElement
-                  ]
-                }
-              ),
-              description && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                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 = (0, import_react15.memo)(PageHeaderComponent);
-var PageHeader_default = PageHeader2;
-
 // src/components/Chip.tsx
 var import_react16 = require("react");