@bravostudioai/react 0.1.31 → 0.1.32

package/dist/components.js

@@ -10,7 +10,7 @@ const ct = x.createContext({}), V = x.createContext(
   {}
 ), st = (t) => t.replace(/#(\w{2})(\w{6})/, "#$2$1"), Gt = (t) => t.slice(1, 3) === "00", jt = (t) => {
   if (!Array.isArray(t)) return null;
-  const r = t.find((o) => o.startsWith("input-group:"));
+  const r = t.find((n) => n.startsWith("input-group:"));
   if (!r) return null;
   const e = r.split(":");
   return e.length >= 3 ? { type: e[1], groupName: e[2] } : null;
@@ -18,55 +18,55 @@ const ct = x.createContext({}), V = x.createContext(
   const [t, r] = Vt({ width: 0, height: 0 }), e = x.useRef(null);
   return x.useEffect(() => {
     if (!e.current) return;
-    const o = e.current, i = () => {
-      const { width: n, height: m } = o.getBoundingClientRect();
-      r({ width: n, height: m });
+    const n = e.current, i = () => {
+      const { width: o, height: m } = n.getBoundingClientRect();
+      r({ width: o, height: m });
     };
     i(), requestAnimationFrame(() => {
       i();
     });
-    const l = new ResizeObserver((n) => {
-      for (const m of n) {
+    const l = new ResizeObserver((o) => {
+      for (const m of o) {
         const a = m.contentRect;
         r({ width: a.width, height: a.height });
       }
     });
-    return l.observe(o), () => l.disconnect();
+    return l.observe(n), () => l.disconnect();
   }, []), { dimensions: t, ref: e };
 }, L = (t, r = {}) => {
-  const e = N(ct), o = N(V), i = {
+  const e = N(ct), n = N(V), i = {
     width: window.innerWidth,
     height: window.innerHeight
   }, l = Nt(
-    (s) => (o.dimensions?.width ?? 0) * 0.01 * s,
-    [o.dimensions?.width]
-  ), n = {};
+    (s) => (n.dimensions?.width ?? 0) * 0.01 * s,
+    [n.dimensions?.width]
+  ), o = {};
   r = { debug: !1, ...r };
   const m = k((s) => s.fontsById || {});
   if (k((s) => s.fontsByIdFull || {}), !t || !t) return;
-  const a = o.dimensions?.width ?? i.width, y = o.dimensions?.height ?? i.height;
-  if (t.layout?.layoutSizingHorizontal || t.layout?.layoutSizingVertical || (t.width && a > 0 && (n.width = t.width * a * 0.01), t.aspectRatio && t.width ? a > 0 && (n.height = t.width * a * 0.01 / t.aspectRatio) : t.height && y > 0 && (n.height = t.height * y * 0.01)), !(o?.isFlex ?? !1) && t.positioning) {
+  const a = n.dimensions?.width ?? i.width, y = n.dimensions?.height ?? i.height;
+  if (t.layout?.layoutSizingHorizontal || t.layout?.layoutSizingVertical || (t.width && a > 0 && (o.width = t.width * a * 0.01), t.aspectRatio && t.width ? a > 0 && (o.height = t.width * a * 0.01 / t.aspectRatio) : t.height && y > 0 && (o.height = t.height * y * 0.01)), !(n?.isFlex ?? !1) && t.positioning) {
     const s = t.layout?.layoutSizingHorizontal === "FIXED" || t.layout?.layoutSizingVertical === "FIXED", u = s && t.positioning.top < 0 ? 0 : t.positioning.top, R = s && t.positioning.left < 0 ? 0 : t.positioning.left;
     let w = !1;
-    t.horizontalPosition === "center" && (w = !0), n.top = `${u}%`;
+    t.horizontalPosition === "center" && (w = !0), o.top = `${u}%`;
     const S = !!t.inset;
     if (w) {
       if (S) {
         const W = String(t.inset).split(/\s+/);
-        W.length === 3 ? n.inset = `${W[0]} 50% ${W[2]} auto` : W.length === 4 && (n.inset = `${W[0]} 50% ${W[2]} auto`), delete n.left, delete n.right;
+        W.length === 3 ? o.inset = `${W[0]} 50% ${W[2]} auto` : W.length === 4 && (o.inset = `${W[0]} 50% ${W[2]} auto`), delete o.left, delete o.right;
       } else
-        n.left = "50%", n.right = "auto";
-      n.transform = "translateX(-50%)";
+        o.left = "50%", o.right = "auto";
+      o.transform = "translateX(-50%)";
     } else
-      S ? n.inset = t.inset : n.left = `${R}%`;
-    s ? (n.right = "auto", n.bottom = "auto") : (t.positioning.bottom !== void 0 && (n.bottom = `${t.positioning.bottom}%`), t.positioning.right !== void 0 && (n.right = `${t.positioning.right}%`)), n.position = "absolute";
+      S ? o.inset = t.inset : o.left = `${R}%`;
+    s ? (o.right = "auto", o.bottom = "auto") : (t.positioning.bottom !== void 0 && (o.bottom = `${t.positioning.bottom}%`), t.positioning.right !== void 0 && (o.right = `${t.positioning.right}%`)), o.position = "absolute";
   }
   if (t.layout?.padding) {
     const s = e.scaleFactor ?? 1, u = t.layout.padding;
-    u.top !== void 0 && (n.paddingTop = u.top * s), u.right !== void 0 && (n.paddingRight = u.right * s), u.bottom !== void 0 && (n.paddingBottom = u.bottom * s), u.left !== void 0 && (n.paddingLeft = u.left * s);
+    u.top !== void 0 && (o.paddingTop = u.top * s), u.right !== void 0 && (o.paddingRight = u.right * s), u.bottom !== void 0 && (o.paddingBottom = u.bottom * s), u.left !== void 0 && (o.paddingLeft = u.left * s);
   }
   if (t.layout?.mode) {
-    n.display = "flex";
+    o.display = "flex";
     const s = (W) => W ? {
       MIN: "flex-start",
       MAX: "flex-end",
@@ -75,18 +75,18 @@ const ct = x.createContext({}), V = x.createContext(
       SPACE_AROUND: "space-around",
       SPACE_EVENLY: "space-evenly"
     }[W] || W.toLowerCase().replace(/_/g, "-") : void 0;
-    t.layout.mode == "HORIZONTAL" ? (n.flexDirection = "row", t.layout.flexWrap && (n.flexWrap = t.layout.flexWrap), n.justifyContent = s(
+    t.layout.mode == "HORIZONTAL" ? (o.flexDirection = "row", t.layout.flexWrap && (o.flexWrap = t.layout.flexWrap), o.justifyContent = s(
       t.layout.primaryAxisAlignItems
-    ), n.alignItems = t.layout.counterAxisAlignItems) : (n.flexDirection = "column", n.justifyContent = s(
+    ), o.alignItems = t.layout.counterAxisAlignItems) : (o.flexDirection = "column", o.justifyContent = s(
       t.layout.primaryAxisAlignItems
-    ), n.alignItems = t.layout.counterAxisAlignItems), n.flexGrow = t.layout.grow, t.layout.wrap === "WRAP" || t.layout.flexWrap === "wrap" ? n.flexWrap = "wrap" : t.layout.flexWrap ? n.flexWrap = t.layout.flexWrap : n.flexWrap = "nowrap";
+    ), o.alignItems = t.layout.counterAxisAlignItems), o.flexGrow = t.layout.grow, t.layout.wrap === "WRAP" || t.layout.flexWrap === "wrap" ? o.flexWrap = "wrap" : t.layout.flexWrap ? o.flexWrap = t.layout.flexWrap : o.flexWrap = "nowrap";
     const u = t.layout.itemSpacing, R = e.scaleFactor ?? 1, S = t.layout.primaryAxisAlignItems === "SPACE_BETWEEN" ? 0 : (u !== void 0 ? u : 0) * R;
-    n.gap = S === 0 ? "0px" : `${S}px`, n.rowGap = S === 0 ? "0px" : `${S}px`, n.columnGap = S === 0 ? "0px" : `${S}px`, (n.flexWrap === "wrap" || n.flexWrap === "wrap-reverse") && (n.alignContent = "flex-start"), r.debug || t.layout?.mode === "HORIZONTAL" && u === 0 ? console.log("[useEncoreStyle] Setting gap properties:", {
+    o.gap = S === 0 ? "0px" : `${S}px`, o.rowGap = S === 0 ? "0px" : `${S}px`, o.columnGap = S === 0 ? "0px" : `${S}px`, (o.flexWrap === "wrap" || o.flexWrap === "wrap-reverse") && (o.alignContent = "flex-start"), r.debug || t.layout?.mode === "HORIZONTAL" && u === 0 ? console.log("[useEncoreStyle] Setting gap properties:", {
       itemSpacing: u,
       spacing: S,
-      gap: n.gap,
-      rowGap: n.rowGap,
-      columnGap: n.columnGap,
+      gap: o.gap,
+      rowGap: o.rowGap,
+      columnGap: o.columnGap,
       hasLayout: !!t.layout,
       layoutMode: t.layout?.mode
     }) : console.log(
@@ -96,36 +96,36 @@ const ct = x.createContext({}), V = x.createContext(
       u
     );
   }
-  if (t.layout?.layoutSizingHorizontal === "FILL" && (n.width = "100%"), t.layout?.layoutSizingHorizontal === "FIXED") {
+  if (t.layout?.layoutSizingHorizontal === "FILL" && (o.width = "100%"), t.layout?.layoutSizingHorizontal === "FIXED") {
     const s = e.scaleFactor ?? 1;
-    n.width = t.layout.size.x * s;
+    o.width = t.layout.size.x * s;
   }
   if (t.layout?.layoutSizingHorizontal, t.layout?.layoutSizingVertical === "FIXED") {
     const s = e.scaleFactor ?? 1;
-    n.height = t.layout.size.y * s;
+    o.height = t.layout.size.y * s;
   }
   if (t.layout?.layoutSizingVertical === "FILL")
-    if (!(o?.isFlex ?? !1) && t.positioning && t.positioning?.top !== void 0) {
+    if (!(n?.isFlex ?? !1) && t.positioning && t.positioning?.top !== void 0) {
       const w = 100 - t.positioning.top;
-      n.height = `${w}%`;
+      o.height = `${w}%`;
     } else
-      n.height = "100%";
-  if (t.layout?.layoutSizingVertical, t.backgroundColor && !Gt(t.backgroundColor) && (n.backgroundColor = st(t.backgroundColor)), t.color && (n.color = st(t.color)), t.lineHeightPx && (n.lineHeight = (t.lineHeightPx * (e.scaleFactor ?? 1)).toString() + "px"), t.fontSize && (n.fontSize = t.fontSize * (e.scaleFactor ?? 1)), t.fontWeight && (n.fontWeight = `${t.fontWeight}`), t.opacity && (n.opacity = t.opacity * 0.01), t.fontId) {
+      o.height = "100%";
+  if (t.layout?.layoutSizingVertical, t.backgroundColor && !Gt(t.backgroundColor) && (o.backgroundColor = st(t.backgroundColor)), t.color && (o.color = st(t.color)), t.lineHeightPx && (o.lineHeight = (t.lineHeightPx * (e.scaleFactor ?? 1)).toString() + "px"), t.fontSize && (o.fontSize = t.fontSize * (e.scaleFactor ?? 1)), t.fontWeight && (o.fontWeight = `${t.fontWeight}`), t.opacity && (o.opacity = t.opacity * 0.01), t.fontId) {
     const s = m[t.fontId] || "sans-serif";
-    n.fontFamily = `"${s}"`, console.log("[AG_DEBUG] [useEncoreStyle] Font Resolution:", {
+    o.fontFamily = `"${s}"`, console.log("[AG_DEBUG] [useEncoreStyle] Font Resolution:", {
       fontId: t.fontId,
       resolvedFamily: s,
       fontWeight: t.fontWeight,
-      finalStyle: n.fontFamily
+      finalStyle: o.fontFamily
     });
   }
-  if (t.borderRadius && (n.borderRadius = l(t.borderRadius)), t.cornerRadii) {
+  if (t.borderRadius && (o.borderRadius = l(t.borderRadius)), t.cornerRadii) {
     const s = t.cornerRadii.map(l);
-    n.borderTopLeftRadius = s[0], n.borderTopRightRadius = s[1], n.borderBottomRightRadius = s[2], n.borderBottomLeftRadius = s[3], delete n.borderRadius;
+    o.borderTopLeftRadius = s[0], o.borderTopRightRadius = s[1], o.borderBottomRightRadius = s[2], o.borderBottomLeftRadius = s[3], delete o.borderRadius;
   }
-  return t.borderWidth && (t.borderWidth > 5 ? n.borderWidth = t.borderWidth * 0.5 : n.borderWidth = t.borderWidth * 1.5), t.borderColor && (n.borderColor = st(t.borderColor)), (t.borderWidth || t.borderColor) && (n.borderStyle = "solid"), t.rotation && (n.transform = `rotate(${t.rotation}deg)`), t.textCase === "upper" && (n.textTransform = "uppercase"), t.textCase === "lower" && (n.textTransform = "lowercase"), t.letterSpacing && (n.letterSpacing = t.letterSpacing), t.textAlign && (n.textAlign = t.textAlign), r.debug && (n.borderWidth = 1, n.borderColor = "#FF0000FF", n.borderStyle = "solid"), n;
+  return t.borderWidth && (t.borderWidth > 5 ? o.borderWidth = t.borderWidth * 0.5 : o.borderWidth = t.borderWidth * 1.5), t.borderColor && (o.borderColor = st(t.borderColor)), (t.borderWidth || t.borderColor) && (o.borderStyle = "solid"), t.rotation && (o.transform = `rotate(${t.rotation}deg)`), t.textCase === "upper" && (o.textTransform = "uppercase"), t.textCase === "lower" && (o.textTransform = "lowercase"), t.letterSpacing && (o.letterSpacing = t.letterSpacing), t.textAlign && (o.textAlign = t.textAlign), r.debug && (o.borderWidth = 1, o.borderColor = "#FF0000FF", o.borderStyle = "solid"), o;
 }, et = ({ id: t, nodeData: r }) => {
-  const e = N(tt), o = e?.nodeData?.[t], { patch: i, list: l } = o ?? { list: null, patch: null }, m = Array.isArray(r?.tags) && (r.tags.includes("encore:data:array") || r.tags.includes("bravo:data:array")) && e?.arrayDataById && e.arrayDataById[t] && Array.isArray(e.arrayDataById[t]) ? e.arrayDataById[t] : null;
+  const e = N(tt), n = e?.nodeData?.[t], { patch: i, list: l } = n ?? { list: null, patch: null }, m = Array.isArray(r?.tags) && (r.tags.includes("encore:data:array") || r.tags.includes("bravo:data:array")) && e?.arrayDataById && e.arrayDataById[t] && Array.isArray(e.arrayDataById[t]) ? e.arrayDataById[t] : null;
   let a = i ? {
     ...r,
     ...i || {},
@@ -190,15 +190,15 @@ const ct = x.createContext({}), V = x.createContext(
   id: t,
   nodeData: r,
   children: e,
-  _parentStatefulSetId: o,
+  _parentStatefulSetId: n,
   _parentInputGroupInfo: i,
   _parentName: l
 }) => {
-  const n = k((h) => h.baseURL), m = k((h) => h.appId);
+  const o = k((h) => h.baseURL), m = k((h) => h.appId);
   k((h) => h.pageId);
   const { onAction: a } = x.useContext(ft), { statefulSetId: y } = x.useContext(
     lt
-  ), v = o || y, { patchedNodeData: f } = et({ id: t, nodeData: r }), s = k(
+  ), v = n || y, { patchedNodeData: f } = et({ id: t, nodeData: r }), s = k(
     (h) => h.setStatefulSetVariant
   ), u = k(
     (h) => h.setInputGroupValue
@@ -254,7 +254,7 @@ const ct = x.createContext({}), V = x.createContext(
           window.location.href = `tel:${h.params.phone}`;
           break;
         case "remote":
-          const O = btoa(JSON.stringify(h.params?.data || {})), j = `${n}/devices/apps/${m}/node/${t}/trigger/${h.event}?params=${O}`, K = await Ot.post(j);
+          const O = btoa(JSON.stringify(h.params?.data || {})), j = `${o}/devices/apps/${m}/node/${t}/trigger/${h.event}?params=${O}`, K = await Ot.post(j);
           K.data?.action && await W(K.data);
           break;
         case "set-access-token":
@@ -388,7 +388,7 @@ const ct = x.createContext({}), V = x.createContext(
   }
   return e;
 }, ht = ({ id: t, name: r, nodeData: e }) => {
-  const o = L(e.style, {
+  const n = L(e.style, {
     debug: !1
   });
   return /* @__PURE__ */ p(
@@ -397,52 +397,52 @@ const ct = x.createContext({}), V = x.createContext(
       "data-id": t,
       "data-name": r,
       "data-type": "WebViewComponent",
-      style: { border: "none", ...o },
+      style: { border: "none", ...n },
       src: e.data?.params?.url
     }
   );
 }, gt = ({ id: t, name: r, nodeData: e }) => {
-  const o = L(e.style, {
+  const n = L(e.style, {
     debug: !1
   });
-  if (!o.backgroundColor && !o.borderColor)
+  if (!n.backgroundColor && !n.borderColor)
     return null;
-  if (o.borderColor && !o.backgroundColor && (o.backgroundColor = "transparent"), o.borderColor && o.borderWidth) {
-    const v = Math.max(o.borderWidth || 0, 1);
-    (!o.width || typeof o.width == "number" && o.width === 0) && (o.width = v), (!o.height || typeof o.height == "number" && o.height === 0) && (o.height = v), o.boxSizing = "border-box";
+  if (n.borderColor && !n.backgroundColor && (n.backgroundColor = "transparent"), n.borderColor && n.borderWidth) {
+    const v = Math.max(n.borderWidth || 0, 1);
+    (!n.width || typeof n.width == "number" && n.width === 0) && (n.width = v), (!n.height || typeof n.height == "number" && n.height === 0) && (n.height = v), n.boxSizing = "border-box";
   }
-  const i = Array.isArray(e.tags) && e.tags.includes("bravo:layer"), l = N(V)?.isFlex ?? !1, n = e.style?.positioning, m = n && typeof n.top == "number" && typeof n.left == "number" && typeof n.right == "number" && typeof n.bottom == "number" && n.top === 0 && n.left === 0 && n.right === 0 && n.bottom === 0, a = i && (l || m), y = r && r.toLowerCase().startsWith("clip");
-  return a && (o.position = "absolute", o.top = 0, o.left = 0, o.right = 0, o.bottom = 0, o.zIndex = -1, o.width && typeof o.width == "string" && o.width.includes("%") && delete o.width, o.height && typeof o.height == "string" && o.height.includes("%") && delete o.height), y && (o.backgroundColor = "transparent"), /* @__PURE__ */ p(Y, { id: t, nodeData: e, children: /* @__PURE__ */ p("div", { "data-name": r, "data-type": "ColorComponent", style: o }) });
+  const i = Array.isArray(e.tags) && e.tags.includes("bravo:layer"), l = N(V)?.isFlex ?? !1, o = e.style?.positioning, m = o && typeof o.top == "number" && typeof o.left == "number" && typeof o.right == "number" && typeof o.bottom == "number" && o.top === 0 && o.left === 0 && o.right === 0 && o.bottom === 0, a = i && (l || m), y = r && r.toLowerCase().startsWith("clip");
+  return a && (n.position = "absolute", n.top = 0, n.left = 0, n.right = 0, n.bottom = 0, n.zIndex = -1, n.width && typeof n.width == "string" && n.width.includes("%") && delete n.width, n.height && typeof n.height == "string" && n.height.includes("%") && delete n.height), y && (n.backgroundColor = "transparent"), /* @__PURE__ */ p(Y, { id: t, nodeData: e, children: /* @__PURE__ */ p("div", { "data-name": r, "data-type": "ColorComponent", style: n }) });
 }, mt = ({
   id: t,
   name: r,
   nodeData: e
 }) => {
-  const o = L(e.style, {
+  const n = L(e.style, {
     debug: !1
-  }), i = e.style, l = Array.isArray(i?.gradientColorStops) ? i.gradientColorStops.map((n) => {
-    if (!n?.color) return null;
-    const m = st(n.color);
-    if (typeof n.position == "number") {
-      const a = n.position * 100;
+  }), i = e.style, l = Array.isArray(i?.gradientColorStops) ? i.gradientColorStops.map((o) => {
+    if (!o?.color) return null;
+    const m = st(o.color);
+    if (typeof o.position == "number") {
+      const a = o.position * 100;
       return `${m} ${a}%`;
     }
     return m;
   }).filter(Boolean).join(", ") : "";
   if (l) {
-    const n = i?.gradientType || "linear";
-    o.backgroundImage = n === "radial" ? `radial-gradient(${l})` : `linear-gradient(${l})`, delete o.backgroundColor;
+    const o = i?.gradientType || "linear";
+    n.backgroundImage = o === "radial" ? `radial-gradient(${l})` : `linear-gradient(${l})`, delete n.backgroundColor;
   }
-  return /* @__PURE__ */ p(Y, { id: t, nodeData: e, children: /* @__PURE__ */ p("div", { "data-name": r, "data-type": "GradientComponent", style: o }) });
+  return /* @__PURE__ */ p(Y, { id: t, nodeData: e, children: /* @__PURE__ */ p("div", { "data-name": r, "data-type": "GradientComponent", style: n }) });
 }, yt = ({ id: t, name: r, nodeData: e }) => {
-  const { patchedNodeData: o } = et({ id: t, nodeData: e });
-  e = o;
+  const { patchedNodeData: n } = et({ id: t, nodeData: e });
+  e = n;
   const i = L(e.style, {
     debug: !1
-  }), l = N(V), n = k((u) => u.assetsById), m = e.style?.scaleMode || "fill";
+  }), l = N(V), o = k((u) => u.assetsById), m = e.style?.scaleMode || "fill";
   m === "fill" ? i.objectFit = "cover" : m === "fit" && (i.objectFit = "contain"), i.objectPosition = "center";
   let a = e.data?.imageUrl;
-  !a && e.encoreData?.image && (a = e.encoreData.image.startsWith("//") ? `https:${e.encoreData.image}` : e.encoreData.image), a || (a = n[e.assetId]?.url);
+  !a && e.encoreData?.image && (a = e.encoreData.image.startsWith("//") ? `https:${e.encoreData.image}` : e.encoreData.image), a || (a = o[e.assetId]?.url);
   const y = e.style?.positioning, v = e.style?.aspectRatio, f = l.dimensions?.width || 0, s = l.dimensions?.height || 0;
   if (y && v && f > 0) {
     const u = typeof y.left == "number" && typeof y.right == "number", R = typeof y.top == "number" && typeof y.bottom == "number";
@@ -467,7 +467,7 @@ const ct = x.createContext({}), V = x.createContext(
       "data-name": r,
       "data-type": "ImageComponent",
       style: i,
-      src: a || n[e.assetId]?.url,
+      src: a || o[e.assetId]?.url,
       alt: r
     }
   ) });
@@ -476,11 +476,11 @@ const ct = x.createContext({}), V = x.createContext(
   name: r,
   nodeData: e
 }) => {
-  const o = k((l) => l.setFormInputValue), i = L(e.style, { debug: !1 });
+  const n = k((l) => l.setFormInputValue), i = L(e.style, { debug: !1 });
   return /* @__PURE__ */ p(
     "input",
     {
-      onChange: (l) => o(t, l.target.value),
+      onChange: (l) => n(t, l.target.value),
       "data-id": t,
       "data-name": r,
       "data-type": "EmailInputComponent",
@@ -494,14 +494,14 @@ const ct = x.createContext({}), V = x.createContext(
   name: r,
   nodeData: e
 }) => {
-  const o = L(e.style);
-  return o.visibility = "hidden", /* @__PURE__ */ p(
+  const n = L(e.style);
+  return n.visibility = "hidden", /* @__PURE__ */ p(
     "input",
     {
       "data-id": t,
       "data-name": r,
       "data-type": "HiddenInputComponent",
-      style: o,
+      style: n,
       type: "hidden"
     }
   );
@@ -510,7 +510,7 @@ const ct = x.createContext({}), V = x.createContext(
   name: r,
   nodeData: e
 }) => {
-  const o = k((n) => n.setFormInputValue), i = L(e.style, { debug: !1 }), l = k((n) => n.assetsById);
+  const n = k((o) => o.setFormInputValue), i = L(e.style, { debug: !1 }), l = k((o) => o.assetsById);
   return /* @__PURE__ */ it(ut, { children: [
     /* @__PURE__ */ p(
       "div",
@@ -522,7 +522,7 @@ const ct = x.createContext({}), V = x.createContext(
     /* @__PURE__ */ p(
       "img",
       {
-        onChange: (n) => o(t, n.target.value),
+        onChange: (o) => n(t, o.target.value),
         style: i,
         "data-id": t,
         "data-name": r,
@@ -537,11 +537,11 @@ const ct = x.createContext({}), V = x.createContext(
   name: r,
   nodeData: e
 }) => {
-  const o = k((l) => l.setFormInputValue), i = L(e.style, { debug: !1 });
+  const n = k((l) => l.setFormInputValue), i = L(e.style, { debug: !1 });
   return /* @__PURE__ */ p(
     "input",
     {
-      onChange: (l) => o(t, l.target.value),
+      onChange: (l) => n(t, l.target.value),
       "data-id": t,
       "data-name": r,
       "data-type": "PasswordInputComponent",
@@ -555,8 +555,8 @@ const ct = x.createContext({}), V = x.createContext(
   name: r,
   nodeData: e
 }) => {
-  const o = k((f) => f.setFormInputValue), { onAction: i } = x.useContext(ft), { patchedNodeData: l } = et({ id: t, nodeData: e }), n = L(l.style, { debug: !1 });
-  n.width = "100%", n.flex = "1", n.minWidth = "0", n.boxSizing = "border-box", n.borderColor = n.borderColor ?? "transparent";
+  const n = k((f) => f.setFormInputValue), { onAction: i } = x.useContext(ft), { patchedNodeData: l } = et({ id: t, nodeData: e }), o = L(l.style, { debug: !1 });
+  o.width = "100%", o.flex = "1", o.minWidth = "0", o.boxSizing = "border-box", o.borderColor = o.borderColor ?? "transparent";
   const m = l.data?.value, a = l.data?.options, y = x.useMemo(() => !a || !Array.isArray(a) ? [] : a.map((f) => typeof f == "string" ? { value: f, label: f } : f), [a]);
   return /* @__PURE__ */ it(
     "select",
@@ -565,10 +565,10 @@ const ct = x.createContext({}), V = x.createContext(
       "data-name": r,
       "data-type": "SelectInputComponent",
       value: m ?? "",
-      style: n,
+      style: o,
       onChange: async (f) => {
         const s = f.target.value;
-        if (o(t, s), console.log(`Select changed: ${s}`), typeof i == "function")
+        if (n(t, s), console.log(`Select changed: ${s}`), typeof i == "function")
           try {
             await i({
               bravo: {
@@ -596,13 +596,13 @@ const ct = x.createContext({}), V = x.createContext(
   name: r,
   nodeData: e
 }) => {
-  const o = k((l) => l.setFormInputValue), i = L(e.style, {
+  const n = k((l) => l.setFormInputValue), i = L(e.style, {
     debug: !1
   });
   return /* @__PURE__ */ p(
     "input",
     {
-      onChange: (l) => o(t, l.target.value),
+      onChange: (l) => n(t, l.target.value),
       name: t,
       "data-id": t,
       "data-name": r,
@@ -612,47 +612,52 @@ const ct = x.createContext({}), V = x.createContext(
       type: "text"
     }
   );
-}, wt = ({ id: t, name: r, nodeData: e }) => {
-  const o = L(e.style);
+}, wt = ({
+  id: t,
+  name: r,
+  nodeData: e,
+  children: n
+}) => {
+  const i = L(e.style);
   return /* @__PURE__ */ p(Y, { id: t, nodeData: e, children: /* @__PURE__ */ p(
     "div",
     {
       "data-id": t,
       "data-name": r,
       "data-type": "LottieComponent",
-      style: o,
-      children
+      style: i,
+      children: n
     }
   ) });
 }, At = ({ id: t, name: r, nodeData: e }) => {
-  const o = L(e.style, {
+  const n = L(e.style, {
     debug: !1
-  }), i = k((n) => n.assetsById), l = e.style?.positioning;
+  }), i = k((o) => o.assetsById), l = e.style?.positioning;
   if (l) {
-    const n = typeof l.left == "number" && typeof l.right == "number", m = typeof l.top == "number" && typeof l.bottom == "number";
-    if (n) {
+    const o = typeof l.left == "number" && typeof l.right == "number", m = typeof l.top == "number" && typeof l.bottom == "number";
+    if (o) {
       const a = 100 - l.left - l.right;
-      o.width = `${a}%`, o.left = `${l.left}%`, delete o.right;
+      n.width = `${a}%`, n.left = `${l.left}%`, delete n.right;
     }
     if (m) {
       const a = 100 - l.top - l.bottom;
-      o.height = `${a}%`, o.top = `${l.top}%`, delete o.bottom;
+      n.height = `${a}%`, n.top = `${l.top}%`, delete n.bottom;
     }
   }
-  return o.objectFit || (o.objectFit = "fill"), /* @__PURE__ */ p(Y, { id: t, nodeData: e, children: /* @__PURE__ */ p(
+  return n.objectFit || (n.objectFit = "fill"), /* @__PURE__ */ p(Y, { id: t, nodeData: e, children: /* @__PURE__ */ p(
     "img",
     {
       "data-id": t,
       "data-name": r,
       "data-type": "SvgComponent",
-      style: o,
+      style: n,
       src: i[e.assetId]?.url,
       alt: r
     }
   ) });
 }, Et = ({ id: t, name: r, nodeData: e }) => {
-  const { patchedNodeData: o } = et({ id: t, nodeData: e });
-  e = o;
+  const { patchedNodeData: n } = et({ id: t, nodeData: e });
+  e = n;
   const i = e.data?.text;
   r && r.includes("Purpose") && console.log("TextComponent Debug:", {
     id: t,
@@ -661,7 +666,7 @@ const ct = x.createContext({}), V = x.createContext(
     style: e.style,
     color: e.style?.color
   });
-  const l = e.style, n = e.fontId ? { ...l, fontId: e.fontId } : l, m = L(n, {
+  const l = e.style, o = e.fontId ? { ...l, fontId: e.fontId } : l, m = L(o, {
     debug: !1
   });
   m.display = "flex", m.flexDirection = "column", l.verticalPosition && (m.justifyContent = {
@@ -686,18 +691,18 @@ const ct = x.createContext({}), V = x.createContext(
   id: t,
   name: r,
   nodeData: e,
-  children: o
+  children: n
 }) => {
   const i = N(tt), { patchedNodeData: l } = et({ id: t, nodeData: e });
   e = l;
-  const n = jt(e.tags), m = n ? k((w) => w.inputGroups[n.groupName]) : null, a = k((w) => w.statefulSetVariants[t]), y = L(e.style, {
+  const o = jt(e.tags), m = o ? k((w) => w.inputGroups[o.groupName]) : null, a = k((w) => w.statefulSetVariants[t]), y = L(e.style, {
     debug: !1
   });
   let v;
-  n && m !== null ? v = m === r ? "active" : "default" : v = a || e.data.initialState || "default";
-  const f = x.Children.toArray(o).find((w) => x.isValidElement(w) ? w.props?.nodeData?.data?.state === v : !1), s = x.isValidElement(f) ? x.cloneElement(f, {
+  o && m !== null ? v = m === r ? "active" : "default" : v = a || e.data.initialState || "default";
+  const f = x.Children.toArray(n).find((w) => x.isValidElement(w) ? w.props?.nodeData?.data?.state === v : !1), s = x.isValidElement(f) ? x.cloneElement(f, {
     _parentStatefulSetId: t,
-    _parentInputGroupInfo: n,
+    _parentInputGroupInfo: o,
     _parentName: r
     // Pass the name so we can identify which element is active
   }) : f, u = /* @__PURE__ */ p(
@@ -730,10 +735,10 @@ const ct = x.createContext({}), V = x.createContext(
   id: t,
   name: r,
   nodeData: e,
-  children: o,
+  children: n,
   _parentStatefulSetId: i,
   _parentInputGroupInfo: l,
-  _parentName: n
+  _parentName: o
 }) => {
   const m = L(e.style, {
     debug: !1
@@ -755,15 +760,15 @@ const ct = x.createContext({}), V = x.createContext(
           nodeData: e,
           _parentStatefulSetId: i,
           _parentInputGroupInfo: l,
-          _parentName: n,
-          children: o
+          _parentName: o,
+          children: n
         }
       )
     }
   );
 }, Tt = ({ id: t, name: r, children: e }) => {
   N(V);
-  const { dimensions: o, ref: i } = rt(), l = {
+  const { dimensions: n, ref: i } = rt(), l = {
     zIndex: 0,
     flex: 1,
     position: "absolute",
@@ -772,7 +777,7 @@ const ct = x.createContext({}), V = x.createContext(
     width: "100%",
     height: "100%"
   };
-  return /* @__PURE__ */ p(V.Provider, { value: { dimensions: o, isFlex: !1 }, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ p(V.Provider, { value: { dimensions: n, isFlex: !1 }, children: /* @__PURE__ */ p(
     "div",
     {
       "data-id": t,
@@ -787,7 +792,7 @@ const ct = x.createContext({}), V = x.createContext(
   id: t,
   name: r,
   nodeData: e,
-  children: o,
+  children: n,
   _arrayItemIndex: i,
   _arrayItemData: l
 }) => {
@@ -795,7 +800,7 @@ const ct = x.createContext({}), V = x.createContext(
     `[DEBUG] ContainerComponent ${t} (Hero) FULL nodeData:`,
     JSON.stringify(e, null, 2)
   );
-  const n = N(tt), { patchedNodeData: m, list: a, arrayData: y } = et({
+  const o = N(tt), { patchedNodeData: m, list: a, arrayData: y } = et({
     id: t,
     nodeData: e
   });
@@ -825,9 +830,9 @@ const ct = x.createContext({}), V = x.createContext(
     if (B !== void 0) {
       const Z = typeof B == "object" && B !== null ? {
         nodeData: B,
-        arrayDataById: n?.arrayDataById,
-        textOverridesById: n?.textOverridesById,
-        rootData: n?.rootData
+        arrayDataById: o?.arrayDataById,
+        textOverridesById: o?.textOverridesById,
+        rootData: o?.rootData
       } : { nodeData: B };
       return /* @__PURE__ */ p(tt.Provider, { value: Z, children: /* @__PURE__ */ p(
         V.Provider,
@@ -840,7 +845,7 @@ const ct = x.createContext({}), V = x.createContext(
               "data-name": r,
               "data-type": "ContainerComponent",
               style: H,
-              children: o
+              children: n
             }
           )
         }
@@ -849,12 +854,12 @@ const ct = x.createContext({}), V = x.createContext(
   }
   if (a) {
     const B = y || a;
-    return Ht(() => B.map((J, nt) => {
+    return Ht(() => B.map((J, ot) => {
       const Q = typeof J == "object" && J !== null ? {
         nodeData: J,
-        arrayDataById: n?.arrayDataById,
-        textOverridesById: n?.textOverridesById,
-        rootData: n?.rootData
+        arrayDataById: o?.arrayDataById,
+        textOverridesById: o?.textOverridesById,
+        rootData: o?.rootData
       } : { nodeData: J };
       return /* @__PURE__ */ p(
         tt.Provider,
@@ -867,17 +872,17 @@ const ct = x.createContext({}), V = x.createContext(
               children: /* @__PURE__ */ p(
                 "div",
                 {
-                  "data-id": `${t}:${nt}`,
+                  "data-id": `${t}:${ot}`,
                   "data-name": r,
                   "data-type": "ContainerComponent",
                   style: H,
-                  children: o
+                  children: n
                 }
               )
             }
           )
         },
-        `${t}:${nt}`
+        `${t}:${ot}`
       );
     }), [B, t]);
   }
@@ -901,15 +906,15 @@ const ct = x.createContext({}), V = x.createContext(
           "data-type": "ContainerComponent",
           ref: f,
           style: H,
-          children: z ? /* @__PURE__ */ p(Y, { id: t, nodeData: e, children: o }) : o
+          children: z ? /* @__PURE__ */ p(Y, { id: t, nodeData: e, children: n }) : n
         }
       )
     }
   );
-}, Pt = pt, Bt = ({ id: t, name: r, nodeData: e, children: o }) => {
-  const { dimensions: i, ref: l } = rt(), n = L(e.style, {
+}, Pt = pt, Bt = ({ id: t, name: r, nodeData: e, children: n }) => {
+  const { dimensions: i, ref: l } = rt(), o = L(e.style, {
     debug: !1
-  }), m = !!e.style.layout?.mode, a = e.style.layout?.mode === "HORIZONTAL" ? "row" : "column", y = n.position ? n : { ...n, position: "relative" };
+  }), m = !!e.style.layout?.mode, a = e.style.layout?.mode === "HORIZONTAL" ? "row" : "column", y = o.position ? o : { ...o, position: "relative" };
   return /* @__PURE__ */ p(
     V.Provider,
     {
@@ -922,12 +927,12 @@ const ct = x.createContext({}), V = x.createContext(
           "data-type": "TopBarContainerComponent",
           ref: l,
           style: y,
-          children: o
+          children: n
         }
       )
     }
   );
-}, Ut = ({ id: t, name: r, nodeData: e, children: o }) => {
+}, Ut = ({ id: t, name: r, nodeData: e, children: n }) => {
   const i = L(e.style, { debug: !1 });
   return /* @__PURE__ */ p(
     "div",
@@ -936,19 +941,19 @@ const ct = x.createContext({}), V = x.createContext(
       "data-name": r,
       "data-type": "DefaultLayerComponent",
       style: i,
-      children: o
+      children: n
     }
   );
-}, Lt = ({ id: t, name: r, nodeData: e, children: o }) => /* @__PURE__ */ p(
+}, Lt = ({ id: t, name: r, nodeData: e, children: n }) => /* @__PURE__ */ p(
   "div",
   {
     "data-id": t,
     "data-name": r,
     "data-type": "TabsMenuComponent",
     style: L(e.style),
-    children: o
+    children: n
   }
-), Wt = ({ id: t, name: r, nodeData: e, children: o }) => {
+), Wt = ({ id: t, name: r, nodeData: e, children: n }) => {
   const i = L(e.style, {
     debug: !1
   });
@@ -959,15 +964,15 @@ const ct = x.createContext({}), V = x.createContext(
       "data-name": r,
       "data-type": "MenuSideComponent",
       style: i,
-      children: o
+      children: n
     }
   );
-}, at = ({ id: t, name: r, nodeData: e, children: o }) => {
+}, at = ({ id: t, name: r, nodeData: e, children: n }) => {
   t === "01KB929X1DQJN954WNGF5AH38B" && console.log(
     `[DEBUG] SliderComponent ${t} FULL nodeData:`,
     JSON.stringify(e, null, 2)
   );
-  const { dimensions: i, ref: l } = rt(), n = x.useRef(null), m = x.useRef(null), a = x.useRef(!1), y = x.useRef(null), v = N(ct), f = N(Mt), { onAction: s } = N(ft), [u, R] = x.useState({
+  const { dimensions: i, ref: l } = rt(), o = x.useRef(null), m = x.useRef(null), a = x.useRef(!1), y = x.useRef(null), v = N(ct), f = N(Mt), { onAction: s } = N(ft), [u, R] = x.useState({
     currentIndex: void 0,
     onIndexChange: void 0
   }), [w, S] = x.useState(0), W = x.useRef(null), { patchedNodeData: $ } = et({ id: t, nodeData: e });
@@ -984,17 +989,17 @@ const ct = x.createContext({}), V = x.createContext(
   H || (E.width = "100%"), U || (E.height = "100%"), E.position || (E.position = "relative");
   const M = N(tt), g = x.useMemo(() => {
     const c = [];
-    return x.Children.forEach(o, (d) => {
+    return x.Children.forEach(n, (d) => {
       if (d == null) return;
       const I = d?.props || {}, C = I.nodeData || {};
       if (Array.isArray(C?.tags) && (C.tags.includes("encore:data:array") || C.tags.includes("bravo:data:array")) && I.id && M) {
         const T = M?.arrayDataById && M.arrayDataById[I.id] && Array.isArray(M.arrayDataById[I.id]) ? M.arrayDataById[I.id] : null;
-        T && T.length > 0 ? T.forEach((D, ot) => {
+        T && T.length > 0 ? T.forEach((D, nt) => {
           c.push(
             x.cloneElement(d, {
-              key: `${I.id}:${ot}`,
+              key: `${I.id}:${nt}`,
               // ContainerComponent will use this to know which item to render
-              _arrayItemIndex: ot,
+              _arrayItemIndex: nt,
               _arrayItemData: D
             })
           );
@@ -1002,7 +1007,7 @@ const ct = x.createContext({}), V = x.createContext(
       } else
         c.push(d);
     }), c;
-  }, [o, t, M]), q = x.useMemo(() => {
+  }, [n, t, M]), q = x.useMemo(() => {
     if (!A || g.length === 0)
       return g;
     const c = g[0], d = g[g.length - 1];
@@ -1021,9 +1026,9 @@ const ct = x.createContext({}), V = x.createContext(
     let C = 0, b = 0;
     return d?.layout?.layoutSizingHorizontal === "FIXED" && d?.layout?.size?.x ? C = d.layout.size.x * I : C = i.width || 0, d?.layout?.layoutSizingVertical === "FIXED" && d?.layout?.size?.y ? b = d.layout.size.y * I : b = i.height || 0, { width: C, height: b };
   }, [g, i.width, i.height, v.scaleFactor]), P = X.width, F = X.height, z = K === "vertical", _ = x.useCallback(() => {
-    if (!n.current || g.length === 0)
+    if (!o.current || g.length === 0)
       return 0;
-    const c = n.current;
+    const c = o.current;
     if (z) {
       if (F === 0) return 0;
       const d = c.scrollTop;
@@ -1049,8 +1054,8 @@ const ct = x.createContext({}), V = x.createContext(
     }
   }, [A, g.length, P, F, z]), B = x.useCallback(
     (c, d = !0) => {
-      if (!n.current || g.length === 0) return;
-      const I = n.current;
+      if (!o.current || g.length === 0) return;
+      const I = o.current;
       if (z) {
         let C;
         A ? C = F + c * F : C = c * F, I.scrollTo({
@@ -1067,8 +1072,8 @@ const ct = x.createContext({}), V = x.createContext(
     },
     [P, F, A, g.length, z]
   ), Z = x.useCallback(() => {
-    if (!A || !n.current || g.length === 0) return;
-    const c = n.current, d = 1;
+    if (!A || !o.current || g.length === 0) return;
+    const c = o.current, d = 1;
     if (z) {
       if (F === 0) return;
       const I = c.scrollTop, C = F, b = C, T = b + g.length * C;
@@ -1082,15 +1087,15 @@ const ct = x.createContext({}), V = x.createContext(
   x.useEffect(() => {
     if (!G || g.length <= 1 || P === 0) return;
     const c = () => {
-      if (a.current || !n.current) return;
-      const d = n.current;
+      if (a.current || !o.current) return;
+      const d = o.current;
       if (z) {
         if (F === 0) return;
         const I = d.scrollTop, C = F;
         let b;
         if (A) {
-          const ot = I - C;
-          b = Math.round(ot / C), b < 0 && (b = 0), b >= g.length && (b = g.length - 1);
+          const nt = I - C;
+          b = Math.round(nt / C), b < 0 && (b = 0), b >= g.length && (b = g.length - 1);
         } else
           b = Math.round(I / C);
         let T = b + 1;
@@ -1108,8 +1113,8 @@ const ct = x.createContext({}), V = x.createContext(
         const I = d.scrollLeft, C = P;
         let b;
         if (A) {
-          const ot = I - C;
-          b = Math.round(ot / C), b < 0 && (b = 0), b >= g.length && (b = g.length - 1);
+          const nt = I - C;
+          b = Math.round(nt / C), b < 0 && (b = 0), b >= g.length && (b = g.length - 1);
         } else
           b = Math.round(I / C);
         let T = b + 1;
@@ -1140,15 +1145,15 @@ const ct = x.createContext({}), V = x.createContext(
     a.current = !0, y.current && clearTimeout(y.current), y.current = setTimeout(() => {
       a.current = !1;
     }, 3e3);
-  }, []), nt = x.useRef(u);
+  }, []), ot = x.useRef(u);
   x.useEffect(() => {
-    nt.current = u;
+    ot.current = u;
   }, [u]);
   const Q = x.useCallback(
     (c) => {
       if (W.current === c) return;
       W.current = c;
-      const d = nt.current;
+      const d = ot.current;
       if (d.currentIndex === void 0 && S(c), d.onIndexChange && d.onIndexChange(c), typeof s == "function")
         try {
           s({
@@ -1169,7 +1174,7 @@ const ct = x.createContext({}), V = x.createContext(
     // Depend on onAction to ensure we call the latest version
   );
   x.useEffect(() => {
-    const c = n.current;
+    const c = o.current;
     if (!c) return;
     let d = null;
     const I = () => {
@@ -1199,7 +1204,7 @@ const ct = x.createContext({}), V = x.createContext(
       c && c !== u && R(c);
     }
   }, [t, f, u]), x.useEffect(() => {
-    if (u.currentIndex !== void 0 && n.current && g.length > 0 && P > 0) {
+    if (u.currentIndex !== void 0 && o.current && g.length > 0 && P > 0) {
       const c = Math.max(
         0,
         Math.min(u.currentIndex, g.length - 1)
@@ -1216,10 +1221,10 @@ const ct = x.createContext({}), V = x.createContext(
     B,
     _
   ]), x.useEffect(() => {
-    if (A && n.current && g.length > 0 && g.length > 0 && (z ? F > 0 : P > 0)) {
+    if (A && o.current && g.length > 0 && g.length > 0 && (z ? F > 0 : P > 0)) {
       const c = z ? F : P;
       setTimeout(() => {
-        n.current && (z ? n.current.scrollTop = c : n.current.scrollLeft = c);
+        o.current && (z ? o.current.scrollTop = c : o.current.scrollLeft = c);
       }, 0);
     }
   }, [A, g.length, P, F, z]), x.useEffect(() => {
@@ -1261,7 +1266,7 @@ const ct = x.createContext({}), V = x.createContext(
       "data-type": "SliderComponent",
       ref: l,
       style: E,
-      children: /* @__PURE__ */ p("div", { ref: n, style: $t, children: q.map((c, d) => /* @__PURE__ */ p(
+      children: /* @__PURE__ */ p("div", { ref: o, style: $t, children: q.map((c, d) => /* @__PURE__ */ p(
         V.Provider,
         {
           value: {
@@ -1279,23 +1284,23 @@ const ct = x.createContext({}), V = x.createContext(
   );
 }, kt = (t, r) => {
   const e = Array.isArray(t) ? t : [t];
-  for (const o of e)
-    if (!(!o || !o.props)) {
-      if (o.props.id === r)
-        return o;
-      if (o.props.children) {
-        const i = kt(o.props.children, r);
+  for (const n of e)
+    if (!(!n || !n.props)) {
+      if (n.props.id === r)
+        return n;
+      if (n.props.children) {
+        const i = kt(n.props.children, r);
         if (i) return i;
       }
     }
   return null;
-}, Rt = ({ id: t, name: r, nodeData: e, children: o }) => {
-  const { dimensions: i, ref: l } = rt(), { componentId: n } = N(lt), m = N(V), a = e.style.originalSize?.[0] || 1, y = e.style.originalSize?.[1] || 1, v = m?.dimensions?.width, f = m?.dimensions?.height, s = window.innerWidth, u = window.innerHeight, R = v && v > 0 && v < s * 0.8;
+}, Rt = ({ id: t, name: r, nodeData: e, children: n }) => {
+  const { dimensions: i, ref: l } = rt(), { componentId: o } = N(lt), m = N(V), a = e.style.originalSize?.[0] || 1, y = e.style.originalSize?.[1] || 1, v = m?.dimensions?.width, f = m?.dimensions?.height, s = window.innerWidth, u = window.innerHeight, R = v && v > 0 && v < s * 0.8;
   let w, S;
   i.width > 0 && i.height > 0 ? (w = i.width, S = i.height) : R && v && f || v && f && v > 0 && f > 0 ? (w = v, S = f) : (w = s, S = u);
   const $ = { scaleFactor: Math.min(w / a, S / y) || 1 };
-  if (n) {
-    const E = kt(o, n);
+  if (o) {
+    const E = kt(n, o);
     return E ? /* @__PURE__ */ p(ct.Provider, { value: $, children: /* @__PURE__ */ p(
       V.Provider,
       {
@@ -1307,9 +1312,9 @@ const ct = x.createContext({}), V = x.createContext(
         },
         children: E
       }
-    ) }) : (console.warn(`Child with id "${n}" not found`), null);
+    ) }) : (console.warn(`Child with id "${o}" not found`), null);
   }
-  const h = Array.isArray(o) ? o : [o], { scrollableChildren: A, nonScrollableChildren: G } = h.reduce(
+  const h = Array.isArray(n) ? n : [n], { scrollableChildren: A, nonScrollableChildren: G } = h.reduce(
     (E, H) => {
       const M = H.props.nodeData.type === "container:top-bar" ? "nonScrollableChildren" : "scrollableChildren";
       return E[M].push(H), E;
@@ -1320,8 +1325,8 @@ const ct = x.createContext({}), V = x.createContext(
     }
   );
   let O = e.style?.layout?.mode;
-  if (!O && t === "01KASW494V02Y8P5JVWV5XK62X" && (console.log("🔧 PATCHING missing layout for page", t), O = "HORIZONTAL"), !O && o) {
-    const E = Array.isArray(o) ? o : [o];
+  if (!O && t === "01KASW494V02Y8P5JVWV5XK62X" && (console.log("🔧 PATCHING missing layout for page", t), O = "HORIZONTAL"), !O && n) {
+    const E = Array.isArray(n) ? n : [n];
     let H = 0, U = 0;
     E.forEach((g) => {
       const q = g?.props?.nodeData?.style?.width;