react-better-html 1.1.110 → 1.1.112

package/dist/index.mjs

@@ -3104,9 +3104,12 @@ var PageHolderComponent = forwardRef7(function PageHolder({ noMaxContentWidth, c
   );
 });
 PageHolderComponent.center = forwardRef7(function Center({
-  decorationImageSrc,
-  decorationImageName,
-  decorationImagePosition = "right",
+  pageBackgroundColor,
+  sideImageSrc,
+  sideImageName,
+  sideImagePosition = "right",
+  sideImageAlignment = "center",
+  sideImageFooter,
   noMaxContentWidth,
   children,
   ...props
@@ -3115,14 +3118,17 @@ PageHolderComponent.center = forwardRef7(function Center({
   const mediaQuery = useMediaQuery();
   const { app } = useBetterHtmlContextInternal();
   const breakingPoint = mediaQuery.size1000;
-  return /* @__PURE__ */ jsxs6(Div_default.row, { width: "100%", minHeight: "100svh", alignItems: "center", justifyContent: "center", children: [
-    decorationImagePosition === "left" && !breakingPoint && /* @__PURE__ */ jsx10(Div_default, { width: "50%" }),
-    /* @__PURE__ */ jsx10(
-      Div_default.column,
-      {
-        width: `${!breakingPoint && (decorationImageSrc || decorationImageName) ? 50 : 100}%`,
-        alignItems: "center",
-        children: /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs6(
+    Div_default.row,
+    {
+      width: "100%",
+      minHeight: "100svh",
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: pageBackgroundColor,
+      children: [
+        sideImagePosition === "left" && !breakingPoint && /* @__PURE__ */ jsx10(Div_default, { width: "50%" }),
+        /* @__PURE__ */ jsx10(Div_default.column, { width: `${!breakingPoint && (sideImageSrc || sideImageName) ? 50 : 100}%`, alignItems: "center", children: /* @__PURE__ */ jsx10(
           Div_default.box,
           {
             width: `calc(100% - ${theme2.styles.space}px * 2)`,
@@ -3133,25 +3139,38 @@ PageHolderComponent.center = forwardRef7(function Center({
             ref,
             children
           }
+        ) }),
+        sideImagePosition === "right" && !breakingPoint && /* @__PURE__ */ jsx10(Div_default, { width: "50%" }),
+        (sideImageSrc || sideImageName) && !breakingPoint && /* @__PURE__ */ jsxs6(
+          Div_default,
+          {
+            position: "fixed",
+            width: "50%",
+            height: "100svh",
+            top: 0,
+            left: sideImagePosition === "left" ? 0 : "auto",
+            right: sideImagePosition === "right" ? 0 : "auto",
+            children: [
+              /* @__PURE__ */ jsx10(
+                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__ */ jsx10(Image_default, { name: sideImageName, height: "100%", src: sideImageSrc })
+                }
+              ),
+              /* @__PURE__ */ jsx10(Div_default, { position: "absolute", width: "100%", bottom: theme2.styles.space, children: sideImageFooter })
+            ]
+          }
         )
-      }
-    ),
-    decorationImagePosition === "right" && !breakingPoint && /* @__PURE__ */ jsx10(Div_default, { width: "50%" }),
-    (decorationImageSrc || decorationImageName) && !breakingPoint && /* @__PURE__ */ jsx10(
-      Image_default,
-      {
-        position: "fixed",
-        name: decorationImageName,
-        src: decorationImageSrc,
-        width: "50%",
-        height: "100svh",
-        top: 0,
-        left: decorationImagePosition === "left" ? 0 : "auto",
-        right: decorationImagePosition === "right" ? 0 : "auto",
-        objectFit: "cover"
-      }
-    )
-  ] });
+      ]
+    }
+  );
 });
 var PageHolder2 = memo10(PageHolderComponent);
 PageHolder2.center = PageHolderComponent.center;
@@ -5216,7 +5235,7 @@ var DropdownComponent = forwardRef10(function Dropdown({
       Div_default.row,
       {
         position: "absolute",
-        top: 46 / 2 + (label ? 16 + theme2.styles.gap : 0),
+        top: 46 / 2 + (label ? 16 + theme2.styles.gap / 2 : 0),
         right: theme2.styles.space + 1,
         alignItems: "center",
         gap: theme2.styles.gap,
@@ -6928,7 +6947,7 @@ var TableComponent = forwardRef15(function Table({
       switch (column.type) {
         case "text": {
           const value = column.keyName ? item[column.keyName] : void 0;
-          return column.format ? column.format(item, index) : String(value ?? "");
+          return column.format?.(item, index) ?? String(value);
         }
         case "element": {
           return column.render?.(item, index) ?? /* @__PURE__ */ jsx20(Fragment5, {});
@@ -7224,7 +7243,7 @@ var TableComponent = forwardRef15(function Table({
                     {
                       width: "100%",
                       alignItems: "center",
-                      justifyContent: "space-between",
+                      justifyContent: column.filter ? "space-between" : column.align === "center" ? "center" : column.align === "right" ? "flex-end" : "flex-start",
                       gap: theme2.styles.gap,
                       children: [
                         column.type === "checkbox" && onClickAllCheckboxes ? /* @__PURE__ */ jsx20(