react-better-html 1.1.159 → 1.1.161

package/dist/index.mjs

@@ -3252,11 +3252,11 @@ var Divider_default = {
     })
   ),
   horizontal: memo10(
-    forwardRef5(function Divider2({ width = 1, backgroundColor, text, textColor, ...props }, ref) {
+    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, { color: textColor ?? theme2.colors.textSecondary, children: text }),
+        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 })
       ] });
     })
@@ -3566,12 +3566,11 @@ var PageHolderComponent = forwardRef7(function PageHolder({ noMaxContentWidth, c
 });
 PageHolderComponent.center = forwardRef7(function Center({
   pageBackgroundColor,
+  pageBackgroundImage,
   contentMaxWidth,
-  sideImageSrc,
-  sideImageName,
-  sideImagePosition = "right",
-  sideImageAlignment = "center",
-  sideImageFooter,
+  behindComponent,
+  sideComponent,
+  sideComponentPosition = "right",
   noMaxContentWidth,
   children,
   ...props
@@ -3580,21 +3579,36 @@ PageHolderComponent.center = forwardRef7(function Center({
   const mediaQuery = useMediaQuery();
   const { app } = useBetterHtmlContextInternal();
   const breakingPoint = mediaQuery.size1000;
-  const withSideImage = (sideImageSrc || sideImageName) && !breakingPoint;
+  const withSideComponent = sideComponent && !breakingPoint;
   return /* @__PURE__ */ jsxs7(
     Div_default.row,
     {
+      position: "relative",
       width: "100%",
       minHeight: "100svh",
       alignItems: "center",
       justifyContent: "center",
       backgroundColor: pageBackgroundColor,
+      backgroundImage: pageBackgroundImage,
       children: [
-        sideImagePosition === "left" && withSideImage && /* @__PURE__ */ jsx12(Div_default, { width: "50%" }),
-        /* @__PURE__ */ jsx12(Div_default.column, { width: `${withSideImage ? 50 : 100}%`, alignItems: "center", children: /* @__PURE__ */ jsx12(
+        behindComponent && /* @__PURE__ */ jsx12(
+          Div_default,
+          {
+            position: "fixed",
+            width: `${withSideComponent ? 50 : 100}%`,
+            height: "100svh",
+            top: 0,
+            left: sideComponentPosition === "right" ? 0 : "auto",
+            right: sideComponentPosition === "left" ? 0 : "auto",
+            zIndex: 1,
+            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(
           Div_default.box,
           {
-            width: `calc(100% - ${theme2.styles.space}px * 2)`,
+            width: `calc(100% - ${theme2.styles.space * 2}px)`,
             maxWidth: !noMaxContentWidth ? contentMaxWidth ?? app.contentMaxWidth / 2 : void 0,
             marginInline: theme2.styles.space,
             marginBlock: theme2.styles.space,
@@ -3603,32 +3617,17 @@ PageHolderComponent.center = forwardRef7(function Center({
             children
           }
         ) }),
-        sideImagePosition === "right" && withSideImage && /* @__PURE__ */ jsx12(Div_default, { width: "50%" }),
-        withSideImage && /* @__PURE__ */ jsxs7(
+        sideComponentPosition === "right" && withSideComponent && /* @__PURE__ */ jsx12(Div_default, { width: "50%" }),
+        withSideComponent && /* @__PURE__ */ jsx12(
           Div_default,
           {
             position: "fixed",
             width: "50%",
             height: "100svh",
             top: 0,
-            left: sideImagePosition === "left" ? 0 : "auto",
-            right: sideImagePosition === "right" ? 0 : "auto",
-            children: [
-              /* @__PURE__ */ jsx12(
-                Div_default.row,
-                {
-                  position: "absolute",
-                  width: "100%",
-                  height: "100%",
-                  top: 0,
-                  left: 0,
-                  justifyContent: sideImageAlignment === "left" ? "flex-start" : sideImageAlignment === "right" ? "flex-end" : "center",
-                  overflow: "hidden",
-                  children: /* @__PURE__ */ jsx12(Image_default, { name: sideImageName, height: "100%", src: sideImageSrc })
-                }
-              ),
-              /* @__PURE__ */ jsx12(Div_default, { position: "absolute", width: "100%", bottom: theme2.styles.space, children: sideImageFooter })
-            ]
+            left: sideComponentPosition === "left" ? 0 : "auto",
+            right: sideComponentPosition === "right" ? 0 : "auto",
+            children: sideComponent
           }
         )
       ]