@amplifyup/sdk 0.1.18 → 0.1.19

package/dist/react.mjs

@@ -2567,6 +2567,31 @@ function AmplifyRenderer({
   pageConfig.layout?.header !== false;
   pageConfig.layout?.footer !== false;
   const renderNode = (node) => {
+    const zoneIdFromProps = node.componentId === "AmplifyZone" ? String(node.props?.zoneId || "") : "";
+    if (node.componentId === "AmplifyZone") {
+      const contentSlot = node.slots?.find((s) => s.slotId === "content") || node.slots?.[0];
+      const children = Array.isArray(contentSlot?.children) ? contentSlot.children : [];
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-node-id": node.id,
+          "data-amplifyup-node": "",
+          "data-amplifyup-component": "AmplifyZone",
+          "data-amplifyup-zone": zoneIdFromProps || void 0,
+          "data-zone-id": zoneIdFromProps || void 0,
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot-id": "content",
+              "data-amplifyup-slot": "content",
+              "data-parent-node-id": node.id,
+              "data-parent-component-id": "AmplifyZone",
+              children: children.filter(Boolean).map((child) => /* @__PURE__ */ jsx(Fragment$1, { children: renderNode(child) }, child.id))
+            }
+          )
+        }
+      );
+    }
     let slotChildren = {};
     console.log(`[AmplifyRenderer] Rendering node ${node.id} (${node.componentId})`, {
       hasSlots: !!(node.slots && node.slots.length > 0),