react-better-html 1.1.222 → 1.1.224

package/dist/index.mjs

@@ -1569,7 +1569,7 @@ var PageHeaderComponent = forwardRef5(function PageHeader({
                   justifyContent: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : void 0,
                   gap: theme2.styles.space,
                   children: [
-                    /* @__PURE__ */ jsx5(
+                    typeof title === "string" ? /* @__PURE__ */ jsx5(
                       Text_default,
                       {
                         as: titleAs,
@@ -1577,12 +1577,12 @@ var PageHeaderComponent = forwardRef5(function PageHeader({
                         color: titleColor ?? (lightMode ? theme2.colors.base : theme2.colors.textPrimary),
                         children: title
                       }
-                    ),
+                    ) : title,
                     titleRightElement
                   ]
                 }
               ),
-              description && /* @__PURE__ */ jsx5(
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx5(
                 Text_default,
                 {
                   maxWidth: !mediaQuery.size600 ? app.contentMaxWidth * 0.6 : void 0,
@@ -1591,7 +1591,7 @@ var PageHeaderComponent = forwardRef5(function PageHeader({
                   opacity: lightMode ? 0.7 : void 0,
                   children: description
                 }
-              )
+              ) : description)
             ]
           }
         ),
@@ -1694,8 +1694,11 @@ DivComponent.grid = forwardRef6(function Grid(props, ref) {
   return /* @__PURE__ */ jsx6(DivComponent, { display: "grid", ref, ...props });
 });
 DivComponent.box = forwardRef6(function Box({
+  icon,
+  image,
   imageUrl,
   imageSize,
+  imageAzProfileImage,
   title,
   titleAs,
   titleColor,
@@ -1744,8 +1747,11 @@ DivComponent.box = forwardRef6(function Box({
               /* @__PURE__ */ jsx6(
                 PageHeader_default,
                 {
+                  icon,
+                  image,
                   imageUrl,
                   imageSize,
+                  imageAzProfileImage,
                   title,
                   titleAs,
                   titleColor,
@@ -7201,6 +7207,7 @@ import {
   useTheme as useTheme29
 } from "react-better-core";
 import { Fragment as Fragment8, jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
+var tabDotSize2 = 6;
 var sideMenuContext = createContext2(void 0);
 var SideMenuContextProvider = sideMenuContext.Provider;
 var useSideMenuContext = () => {
@@ -7238,6 +7245,10 @@ var MenuItemComponent = memo27(function MenuItemComponent2({ item, backgroundCol
       item.onClick?.(item);
     }
   }, [onClick, item, isCollapsed]);
+  const childrenHaveDot = useMemo12(
+    () => item.children?.some((child) => child.withDot) ?? false,
+    [item.children]
+  );
   const isActive = activeItem && item.href && activeItem.href === item.href;
   const readyBackgroundColor = backgroundColor ?? theme2.colors.backgroundContent;
   const iconSize = 16;
@@ -7297,6 +7308,20 @@ var MenuItemComponent = memo27(function MenuItemComponent2({ item, backgroundCol
                 transform: isOpened ? "rotate(180deg)" : void 0,
                 transition: theme2.styles.transition
               }
+            ),
+            /* @__PURE__ */ jsx27(
+              Div_default,
+              {
+                position: "absolute",
+                top: (theme2.styles.space - tabDotSize2) / 2,
+                right: (theme2.styles.space - tabDotSize2) / 2,
+                width: tabDotSize2,
+                height: tabDotSize2,
+                backgroundColor: theme2.colors.primary,
+                borderRadius: 999,
+                opacity: item.withDot || childrenHaveDot && !isOpened ? 1 : 0,
+                transition: theme2.styles.transition
+              }
             )
           ]
         }