@bravostudioai/react 0.1.9 → 0.1.12

package/dist/components.js

@@ -1,5 +1,5 @@
-import { jsx as h, jsxs as it, Fragment as ut } from "react/jsx-runtime";
-import v, { useContext as G, useMemo as zt, useState as Ht, useCallback as Vt } from "react";
+import { jsx as f, jsxs as it, Fragment as ut } from "react/jsx-runtime";
+import v, { useContext as j, useMemo as zt, useState as Ht, useCallback as Vt } from "react";
 import Q from "./contexts/EncoreBindingContext.js";
 import z from "./stores/useEncoreState.js";
 import lt from "./contexts/EncoreComponentIdContext.js";
@@ -8,7 +8,7 @@ import Lt from "./contexts/EncoreActionContext.js";
 import Ot from "./contexts/EncoreRepeatingContainerContext.js";
 const ct = v.createContext({}), O = v.createContext(
   {}
-), st = (t) => t.replace(/#(\w{2})(\w{6})/, "#$2$1"), Mt = (t) => t.slice(1, 3) === "00", jt = (t) => {
+), st = (t) => t.replace(/#(\w{2})(\w{6})/, "#$2$1"), Mt = (t) => t.slice(1, 3) === "00", Gt = (t) => {
   if (!Array.isArray(t)) return null;
   const r = t.find((o) => o.startsWith("input-group:"));
   if (!r) return null;
@@ -35,42 +35,42 @@ const ct = v.createContext({}), O = v.createContext(
   }, []), { dimensions: t, ref: e };
 }, R = (t, r = {}) => {
   let e = !1;
-  const o = G(ct), i = G(O), d = {
+  const o = j(ct), i = j(O), d = {
     width: window.innerWidth,
     height: window.innerHeight
   }, a = Vt(
-    (l) => (i.dimensions?.width ?? 0) * 0.01 * l,
+    (s) => (i.dimensions?.width ?? 0) * 0.01 * s,
     [i.dimensions?.width]
   ), n = {};
   r = { debug: !1, ...r };
-  const c = z((l) => l.fontsById || {});
-  if (z((l) => l.fontsByIdFull || {}), !t) return;
-  const y = i.dimensions?.width ?? d.width, S = i.dimensions?.height ?? d.height;
-  if (t.layout?.layoutSizingHorizontal || t.layout?.layoutSizingVertical || (t.width && y > 0 && (n.width = t.width * y * 0.01), t.aspectRatio && t.width ? y > 0 && (n.height = t.width * y * 0.01 / t.aspectRatio) : t.height && S > 0 && (n.height = t.height * S * 0.01)), !(i?.isFlex ?? !1) && t.positioning) {
-    const l = t.layout?.layoutSizingHorizontal === "FIXED" || t.layout?.layoutSizingVertical === "FIXED", g = l && t.positioning.top < 0 ? 0 : t.positioning.top, I = l && t.positioning.left < 0 ? 0 : t.positioning.left;
-    if (l && t.layout?.layoutSizingHorizontal === "FIXED" && t.layout?.size?.x) {
-      const F = t.layout.size.x, E = o.scaleFactor ?? 1, s = F * E, W = i?.dimensions?.width;
-      W && typeof W == "number" && W > 0 && s / W >= 0.95 && I >= 15 && I <= 35 && (e = !0);
+  const c = z((s) => s.fontsById || {});
+  if (z((s) => s.fontsByIdFull || {}), !t) return;
+  const y = i.dimensions?.width ?? d.width, x = i.dimensions?.height ?? d.height;
+  if (t.layout?.layoutSizingHorizontal || t.layout?.layoutSizingVertical || (t.width && y > 0 && (n.width = t.width * y * 0.01), t.aspectRatio && t.width ? y > 0 && (n.height = t.width * y * 0.01 / t.aspectRatio) : t.height && x > 0 && (n.height = t.height * x * 0.01)), !(i?.isFlex ?? !1) && t.positioning) {
+    const s = t.layout?.layoutSizingHorizontal === "FIXED" || t.layout?.layoutSizingVertical === "FIXED", g = s && t.positioning.top < 0 ? 0 : t.positioning.top, I = s && t.positioning.left < 0 ? 0 : t.positioning.left;
+    if (s && t.layout?.layoutSizingHorizontal === "FIXED" && t.layout?.size?.x) {
+      const T = t.layout.size.x, E = o.scaleFactor ?? 1, l = T * E, W = i?.dimensions?.width;
+      W && typeof W == "number" && W > 0 && l / W >= 0.95 && I >= 15 && I <= 35 && (e = !0);
     }
     n.top = `${g}%`;
     const A = !!t.inset;
     if (e)
       if (A) {
-        const F = String(t.inset).split(/\s+/);
-        F.length === 3 ? n.inset = `${F[0]} 50% ${F[2]} auto` : F.length === 4 && (n.inset = `${F[0]} 50% ${F[2]} auto`), delete n.left, delete n.right;
+        const T = String(t.inset).split(/\s+/);
+        T.length === 3 ? n.inset = `${T[0]} 50% ${T[2]} auto` : T.length === 4 && (n.inset = `${T[0]} 50% ${T[2]} auto`), delete n.left, delete n.right;
       } else
         n.left = "50%", n.right = "auto";
     else
       A ? n.inset = t.inset : n.left = `${I}%`;
-    l ? (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 ? (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";
   }
   if (t.layout?.padding) {
-    const l = o.scaleFactor ?? 1, g = t.layout.padding;
-    g.top !== void 0 && (n.paddingTop = g.top * l), g.right !== void 0 && (n.paddingRight = g.right * l), g.bottom !== void 0 && (n.paddingBottom = g.bottom * l), g.left !== void 0 && (n.paddingLeft = g.left * l);
+    const s = o.scaleFactor ?? 1, g = t.layout.padding;
+    g.top !== void 0 && (n.paddingTop = g.top * s), g.right !== void 0 && (n.paddingRight = g.right * s), g.bottom !== void 0 && (n.paddingBottom = g.bottom * s), g.left !== void 0 && (n.paddingLeft = g.left * s);
   }
   if (t.layout?.mode) {
     n.display = "flex";
-    const l = (E) => E ? {
+    const s = (E) => E ? {
       MIN: "flex-start",
       MAX: "flex-end",
       CENTER: "center",
@@ -78,15 +78,15 @@ const ct = v.createContext({}), O = v.createContext(
       SPACE_AROUND: "space-around",
       SPACE_EVENLY: "space-evenly"
     }[E] || E.toLowerCase().replace(/_/g, "-") : void 0;
-    t.layout.mode == "HORIZONTAL" ? (n.flexDirection = "row", t.layout.flexWrap && (n.flexWrap = t.layout.flexWrap), n.justifyContent = l(
+    t.layout.mode == "HORIZONTAL" ? (n.flexDirection = "row", t.layout.flexWrap && (n.flexWrap = t.layout.flexWrap), n.justifyContent = s(
       t.layout.primaryAxisAlignItems
-    ), n.alignItems = t.layout.counterAxisAlignItems) : (n.flexDirection = "column", n.justifyContent = l(
+    ), n.alignItems = t.layout.counterAxisAlignItems) : (n.flexDirection = "column", n.justifyContent = s(
       t.layout.primaryAxisAlignItems
     ), n.alignItems = t.layout.counterAxisAlignItems), n.flexGrow = t.layout.grow, t.layout.wrap === "NO_WRAP" ? n.flexWrap = "nowrap" : t.layout.flexWrap ? n.flexWrap = t.layout.flexWrap : n.flexWrap = "wrap";
-    const g = t.layout.itemSpacing, I = o.scaleFactor ?? 1, F = t.layout.primaryAxisAlignItems === "SPACE_BETWEEN" ? 0 : (g !== void 0 ? g : 0) * I;
-    n.gap = F === 0 ? "0px" : `${F}px`, n.rowGap = F === 0 ? "0px" : `${F}px`, n.columnGap = F === 0 ? "0px" : `${F}px`, (n.flexWrap === "wrap" || n.flexWrap === "wrap-reverse") && (n.alignContent = "flex-start"), r.debug || t.layout?.mode === "HORIZONTAL" && g === 0 ? console.log("[useEncoreStyle] Setting gap properties:", {
+    const g = t.layout.itemSpacing, I = o.scaleFactor ?? 1, T = t.layout.primaryAxisAlignItems === "SPACE_BETWEEN" ? 0 : (g !== void 0 ? g : 0) * I;
+    n.gap = T === 0 ? "0px" : `${T}px`, n.rowGap = T === 0 ? "0px" : `${T}px`, n.columnGap = T === 0 ? "0px" : `${T}px`, (n.flexWrap === "wrap" || n.flexWrap === "wrap-reverse") && (n.alignContent = "flex-start"), r.debug || t.layout?.mode === "HORIZONTAL" && g === 0 ? console.log("[useEncoreStyle] Setting gap properties:", {
       itemSpacing: g,
-      spacing: F,
+      spacing: T,
       gap: n.gap,
       rowGap: n.rowGap,
       columnGap: n.columnGap,
@@ -100,12 +100,12 @@ const ct = v.createContext({}), O = v.createContext(
     );
   }
   if (t.layout?.layoutSizingHorizontal === "FILL" && (n.width = "100%"), t.layout?.layoutSizingHorizontal === "FIXED") {
-    const l = o.scaleFactor ?? 1;
-    n.width = t.layout.size.x * l;
+    const s = o.scaleFactor ?? 1;
+    n.width = t.layout.size.x * s;
   }
   if (t.layout?.layoutSizingVertical === "FIXED") {
-    const l = o.scaleFactor ?? 1;
-    n.height = t.layout.size.y * l;
+    const s = o.scaleFactor ?? 1;
+    n.height = t.layout.size.y * s;
   }
   if (t.layout?.layoutSizingVertical === "FILL")
     if (!(i?.isFlex ?? !1) && t.positioning && t.positioning?.top !== void 0) {
@@ -114,16 +114,21 @@ const ct = v.createContext({}), O = v.createContext(
     } else
       n.height = "100%";
   if (t.layout?.layoutSizingVertical, t.backgroundColor && !Mt(t.backgroundColor) && (n.backgroundColor = st(t.backgroundColor)), t.color && (n.color = st(t.color)), t.lineHeightPx && (n.lineHeight = (t.lineHeightPx * (o.scaleFactor ?? 1)).toString() + "px"), t.fontSize && (n.fontSize = t.fontSize * (o.scaleFactor ?? 1)), t.fontWeight && (n.fontWeight = `${t.fontWeight}`), t.opacity && (n.opacity = t.opacity * 0.01), t.fontId) {
-    const l = c[t.fontId] || "sans-serif";
-    n.fontFamily = l;
+    const s = c[t.fontId] || "sans-serif";
+    n.fontFamily = `"${s}"`, console.log("[AG_DEBUG] [useEncoreStyle] Font Resolution:", {
+      fontId: t.fontId,
+      resolvedFamily: s,
+      fontWeight: t.fontWeight,
+      finalStyle: n.fontFamily
+    });
   }
   if (t.borderRadius && (n.borderRadius = a(t.borderRadius)), t.cornerRadii) {
-    const l = t.cornerRadii.map(a);
-    n.borderTopLeftRadius = l[0], n.borderTopRightRadius = l[1], n.borderBottomRightRadius = l[2], n.borderBottomLeftRadius = l[3], delete n.borderRadius;
+    const s = t.cornerRadii.map(a);
+    n.borderTopLeftRadius = s[0], n.borderTopRightRadius = s[1], n.borderBottomRightRadius = s[2], n.borderBottomLeftRadius = s[3], delete n.borderRadius;
   }
   if (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)`), e) {
-    const l = n.transform || "";
-    if (n.transform = l ? `${l} translateX(-50%)` : "translateX(-50%)", n.inset) {
+    const s = n.transform || "";
+    if (n.transform = s ? `${s} translateX(-50%)` : "translateX(-50%)", n.inset) {
       const g = String(n.inset).split(/\s+/);
       g.length === 3 ? n.inset = `${g[0]} 50% ${g[2]} auto` : g.length === 4 && (n.inset = `${g[0]} 50% ${g[2]} auto`);
     } else if (t.inset) {
@@ -132,12 +137,12 @@ const ct = v.createContext({}), O = v.createContext(
     }
   }
   if (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"), e && (n.inset || t.inset)) {
-    const l = n.inset || t.inset, g = String(l).split(/\s+/);
+    const s = n.inset || t.inset, g = String(s).split(/\s+/);
     g.length === 3 ? n.inset = `${g[0]} 50% ${g[2]} auto` : g.length === 4 && (n.inset = `${g[0]} 50% ${g[2]} auto`);
   }
   return n;
 }, tt = ({ id: t, nodeData: r }) => {
-  const e = G(Q), o = e?.nodeData?.[t], { patch: i, list: d } = o ?? { list: null, patch: null }, n = 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 = j(Q), o = e?.nodeData?.[t], { patch: i, list: d } = o ?? { list: null, patch: null }, n = 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 c = i ? {
     ...r,
     ...i || {},
@@ -150,20 +155,20 @@ const ct = v.createContext({}), O = v.createContext(
     ...c,
     data: { ...c?.data || {}, text: String(y) }
   });
-  const S = Array.isArray(r?.tags) && (r.tags.includes("encore:data") || r.tags.includes("bravo:data")), f = e?.rootData;
-  f && f[t] && typeof f[t] == "object" && (c = {
+  const x = Array.isArray(r?.tags) && (r.tags.includes("encore:data") || r.tags.includes("bravo:data")), h = e?.rootData;
+  h && h[t] && typeof h[t] == "object" && (c = {
     ...c,
     data: {
       ...c.data || {},
-      ...f[t]
+      ...h[t]
     }
   });
   const b = e?.nodeData && typeof e.nodeData == "object";
-  if (S || b) {
-    const l = e?.nodeData;
-    if (l && typeof l == "object") {
-      if (l[t] !== void 0) {
-        const I = l[t];
+  if (x || b) {
+    const s = e?.nodeData;
+    if (s && typeof s == "object") {
+      if (s[t] !== void 0) {
+        const I = s[t];
         I && typeof I == "object" && c.data && (c = {
           ...c,
           data: {
@@ -171,14 +176,14 @@ const ct = v.createContext({}), O = v.createContext(
             ...I
           }
         });
-      } else if (S && l.description && c.data && (c = {
+      } else if (x && s.description && c.data && (c = {
         ...c,
         data: {
           ...c.data,
-          text: l.description
+          text: s.description
         }
-      }), l.image && c.data) {
-        const I = l.image.startsWith("//") ? `https:${l.image}` : l.image;
+      }), s.image && c.data) {
+        const I = s.image.startsWith("//") ? `https:${s.image}` : s.image;
         c = {
           ...c,
           data: {
@@ -187,7 +192,7 @@ const ct = v.createContext({}), O = v.createContext(
           }
         };
       }
-      c.encoreData = l;
+      c.encoreData = s;
     }
   }
   return {
@@ -206,15 +211,15 @@ const ct = v.createContext({}), O = v.createContext(
   _parentInputGroupInfo: i,
   _parentName: d
 }) => {
-  const a = z((s) => s.baseURL), n = z((s) => s.appId);
-  z((s) => s.pageId);
+  const a = z((l) => l.baseURL), n = z((l) => l.appId);
+  z((l) => l.pageId);
   const { onAction: c } = v.useContext(Lt), { statefulSetId: y } = v.useContext(
     lt
-  ), S = o || y, { patchedNodeData: f } = tt({ id: t, nodeData: r }), b = z(
-    (s) => s.setStatefulSetVariant
-  ), l = z(
-    (s) => s.setInputGroupValue
-  ), g = z((s) => s.setAccessToken), { app: I } = z((s) => s.app);
+  ), x = o || y, { patchedNodeData: h } = tt({ id: t, nodeData: r }), b = z(
+    (l) => l.setStatefulSetVariant
+  ), s = z(
+    (l) => l.setInputGroupValue
+  ), g = z((l) => l.setAccessToken), { app: I } = z((l) => l.app);
   I.data?.app?.startPageId, I.data?.app?.PageId;
   const A = R(
     {
@@ -223,20 +228,20 @@ const ct = v.createContext({}), O = v.createContext(
     { debug: !1 }
   );
   A.zIndex = 99999, A.backgroundColor = "transparent", A.position = "absolute", A.top = "0", A.left = "0", A.right = "0", A.bottom = "0", A.width = "100%", A.height = "100%", A.pointerEvents = "auto", A.isolation = "isolate";
-  const F = async (s) => {
+  const T = async (l) => {
     let W = !1;
     const U = () => {
       W = !1;
     };
     if (typeof c == "function")
       try {
-        await c({ bravo: { cancel: U, action: s } }), W = !0;
+        await c({ bravo: { cancel: U, action: l } }), W = !0;
       } catch {
       }
     else
       W = !0;
     if (W)
-      switch (s.action) {
+      switch (l.action) {
         case "login":
         // TODO firebase
         // TODO oauth
@@ -246,7 +251,7 @@ const ct = v.createContext({}), O = v.createContext(
         case "submit":
           break;
         case "email":
-          window.location.href = `mailto:${s.params.email}`;
+          window.location.href = `mailto:${l.params.email}`;
           break;
         case "goback":
           break;
@@ -260,17 +265,17 @@ const ct = v.createContext({}), O = v.createContext(
         case "none":
           break;
         case "openurl":
-          window.open(s.params.url, "_blank");
+          window.open(l.params.url, "_blank");
           break;
         case "phone":
-          window.location.href = `tel:${s.params.phone}`;
+          window.location.href = `tel:${l.params.phone}`;
           break;
         case "remote":
-          const M = btoa(JSON.stringify(s.params?.data || {})), Z = `${a}/devices/apps/${n}/node/${t}/trigger/${s.event}?params=${M}`, H = await Nt.post(Z);
-          H.data?.action && await F(H.data);
+          const M = btoa(JSON.stringify(l.params?.data || {})), Z = `${a}/devices/apps/${n}/node/${t}/trigger/${l.event}?params=${M}`, H = await Nt.post(Z);
+          H.data?.action && await T(H.data);
           break;
         case "set-access-token":
-          g(s.params);
+          g(l.params);
           break;
         case "set-state":
           if (i && d)
@@ -278,7 +283,7 @@ const ct = v.createContext({}), O = v.createContext(
               groupName: i.groupName,
               elementName: d,
               hasOnAction: typeof c == "function"
-            }), l(i.groupName, d), typeof c == "function")
+            }), s(i.groupName, d), typeof c == "function")
               try {
                 await c({
                   bravo: {
@@ -301,32 +306,32 @@ const ct = v.createContext({}), O = v.createContext(
             else
               console.warn("⚠️ No onAction callback provided");
           else {
-            let P = S || s.params?.stateSetId || f.data?.stateSetId;
+            let P = x || l.params?.stateSetId || h.data?.stateSetId;
             if (!P) {
               console.error("❌ No stateSetId found in action or nodeData!", {
-                actionParams: s.params,
-                nodeDataStateSetId: f.data?.stateSetId,
-                parentStatefulSetId: S
+                actionParams: l.params,
+                nodeDataStateSetId: h.data?.stateSetId,
+                parentStatefulSetId: x
               });
               break;
             }
-            b(P, s.params.state);
+            b(P, l.params.state);
           }
           break;
         case "showalert":
-          alert(s.params.message);
+          alert(l.params.message);
           break;
         default:
-          console.log(s), alert(s.action);
+          console.log(l), alert(l.action);
       }
   };
   if (r.href)
     return /* @__PURE__ */ it(ut, { children: [
-      /* @__PURE__ */ h(
+      /* @__PURE__ */ f(
         "button",
         {
           type: "button",
-          onClick: () => F({
+          onClick: () => T({
             action: "goto",
             params: { href: r.href },
             event: "tap"
@@ -343,15 +348,15 @@ const ct = v.createContext({}), O = v.createContext(
       ),
       e
     ] });
-  let E = f.actions && f.actions.length > 0 ? f.actions : r.actions || [];
-  if (S && E.length > 0 && (E = E.map((s) => s.action === "set-state" ? (s.params?.stateSetId, {
-    ...s,
+  let E = h.actions && h.actions.length > 0 ? h.actions : r.actions || [];
+  if (x && E.length > 0 && (E = E.map((l) => l.action === "set-state" ? (l.params?.stateSetId, {
+    ...l,
     params: {
-      ...s.params,
-      stateSetId: S
+      ...l.params,
+      stateSetId: x
       // Always use parent's id
     }
-  }) : s)), E.length === 0 && (f.data?.stateSetId || S))
+  }) : l)), E.length === 0 && (h.data?.stateSetId || x))
     if (i && d)
       E = [
         {
@@ -364,13 +369,13 @@ const ct = v.createContext({}), O = v.createContext(
         }
       ];
     else {
-      const s = S || f.data.stateSetId;
-      s ? E = [
+      const l = x || h.data.stateSetId;
+      l ? E = [
         {
           action: "set-state",
           params: {
-            state: z.getState().statefulSetVariants[s] === "active" ? "default" : "active",
-            stateSetId: s
+            state: z.getState().statefulSetVariants[l] === "active" ? "default" : "active",
+            stateSetId: l
             // Use parent's id or button's stateSetId
           },
           event: "tap"
@@ -381,14 +386,14 @@ const ct = v.createContext({}), O = v.createContext(
       );
     }
   if (E && E.length > 0) {
-    const s = E[0];
-    return s.event !== "tap" ? e : /* @__PURE__ */ it(ut, { children: [
+    const l = E[0];
+    return l.event !== "tap" ? e : /* @__PURE__ */ it(ut, { children: [
       e,
-      /* @__PURE__ */ h(
+      /* @__PURE__ */ f(
         "div",
         {
           onClick: (W) => {
-            W.stopPropagation(), F(s);
+            W.stopPropagation(), T(l);
           },
           onMouseDown: (W) => W.stopPropagation(),
           onMouseUp: (W) => W.stopPropagation(),
@@ -398,11 +403,11 @@ const ct = v.createContext({}), O = v.createContext(
     ] });
   }
   return e;
-}, ht = ({ id: t, name: r, nodeData: e }) => {
+}, ft = ({ id: t, name: r, nodeData: e }) => {
   const o = R(e.style, {
     debug: !1
   });
-  return /* @__PURE__ */ h(
+  return /* @__PURE__ */ f(
     "iframe",
     {
       "data-id": t,
@@ -412,18 +417,18 @@ const ct = v.createContext({}), O = v.createContext(
       src: e.data?.params?.url
     }
   );
-}, ft = ({ id: t, name: r, nodeData: e }) => {
+}, ht = ({ id: t, name: r, nodeData: e }) => {
   const o = R(e.style, {
     debug: !1
   });
   if (!o.backgroundColor && !o.borderColor)
     return null;
   if (o.borderColor && !o.backgroundColor && (o.backgroundColor = "transparent"), o.borderColor && o.borderWidth) {
-    const S = Math.max(o.borderWidth || 0, 1);
-    (!o.width || typeof o.width == "number" && o.width === 0) && (o.width = S), (!o.height || typeof o.height == "number" && o.height === 0) && (o.height = S), o.boxSizing = "border-box";
+    const x = Math.max(o.borderWidth || 0, 1);
+    (!o.width || typeof o.width == "number" && o.width === 0) && (o.width = x), (!o.height || typeof o.height == "number" && o.height === 0) && (o.height = x), o.boxSizing = "border-box";
   }
-  const i = Array.isArray(e.tags) && e.tags.includes("bravo:layer"), d = G(O)?.isFlex ?? !1, a = e.style?.positioning, n = a && typeof a.top == "number" && typeof a.left == "number" && typeof a.right == "number" && typeof a.bottom == "number" && a.top === 0 && a.left === 0 && a.right === 0 && a.bottom === 0, c = i && (d || n), y = r && r.toLowerCase().startsWith("clip");
-  return c && (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__ */ h(q, { id: t, nodeData: e, children: /* @__PURE__ */ h("div", { "data-name": r, "data-type": "ColorComponent", style: o }) });
+  const i = Array.isArray(e.tags) && e.tags.includes("bravo:layer"), d = j(O)?.isFlex ?? !1, a = e.style?.positioning, n = a && typeof a.top == "number" && typeof a.left == "number" && typeof a.right == "number" && typeof a.bottom == "number" && a.top === 0 && a.left === 0 && a.right === 0 && a.bottom === 0, c = i && (d || n), y = r && r.toLowerCase().startsWith("clip");
+  return c && (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__ */ f(q, { id: t, nodeData: e, children: /* @__PURE__ */ f("div", { "data-name": r, "data-type": "ColorComponent", style: o }) });
 }, gt = ({
   id: t,
   name: r,
@@ -444,34 +449,34 @@ const ct = v.createContext({}), O = v.createContext(
     const a = i?.gradientType || "linear";
     o.backgroundImage = a === "radial" ? `radial-gradient(${d})` : `linear-gradient(${d})`, delete o.backgroundColor;
   }
-  return /* @__PURE__ */ h(q, { id: t, nodeData: e, children: /* @__PURE__ */ h("div", { "data-name": r, "data-type": "GradientComponent", style: o }) });
+  return /* @__PURE__ */ f(q, { id: t, nodeData: e, children: /* @__PURE__ */ f("div", { "data-name": r, "data-type": "GradientComponent", style: o }) });
 }, mt = ({ id: t, name: r, nodeData: e }) => {
   const { patchedNodeData: o } = tt({ id: t, nodeData: e });
   e = o;
   const i = R(e.style, {
     debug: !1
-  }), d = G(O), a = z((l) => l.assetsById), n = e.style?.scaleMode || "fill";
+  }), d = j(O), a = z((s) => s.assetsById), n = e.style?.scaleMode || "fill";
   n === "fill" ? i.objectFit = "cover" : n === "fit" && (i.objectFit = "contain"), i.objectPosition = "center";
   let c = e.data?.imageUrl;
   !c && e.encoreData?.image && (c = e.encoreData.image.startsWith("//") ? `https:${e.encoreData.image}` : e.encoreData.image), c || (c = a[e.assetId]?.url);
-  const y = e.style?.positioning, S = e.style?.aspectRatio, f = d.dimensions?.width || 0, b = d.dimensions?.height || 0;
-  if (y && S && f > 0) {
-    const l = typeof y.left == "number" && typeof y.right == "number", g = typeof y.top == "number" && typeof y.bottom == "number";
-    if (l) {
+  const y = e.style?.positioning, x = e.style?.aspectRatio, h = d.dimensions?.width || 0, b = d.dimensions?.height || 0;
+  if (y && x && h > 0) {
+    const s = typeof y.left == "number" && typeof y.right == "number", g = typeof y.top == "number" && typeof y.bottom == "number";
+    if (s) {
       const I = 100 - y.left - y.right;
       if (I > 0) {
-        const A = I * f / 100;
-        i.width = A, i.height = A / S, i.left = `${Math.max(0, y.left)}%`, i.top = `${Math.max(0, y.top)}%`, delete i.right, delete i.bottom;
+        const A = I * h / 100;
+        i.width = A, i.height = A / x, i.left = `${Math.max(0, y.left)}%`, i.top = `${Math.max(0, y.top)}%`, delete i.right, delete i.bottom;
       }
     } else if (g && b > 0) {
       const I = 100 - y.top - y.bottom;
       if (I > 0) {
         const A = I * b / 100;
-        i.height = A, i.width = A * S, i.left = `${Math.max(0, y.left)}%`, i.top = `${Math.max(0, y.top)}%`, delete i.right, delete i.bottom;
+        i.height = A, i.width = A * x, i.left = `${Math.max(0, y.left)}%`, i.top = `${Math.max(0, y.top)}%`, delete i.right, delete i.bottom;
       }
     }
   }
-  return /* @__PURE__ */ h(q, { id: t, nodeData: e, children: /* @__PURE__ */ h(
+  return /* @__PURE__ */ f(q, { id: t, nodeData: e, children: /* @__PURE__ */ f(
     "img",
     {
       "data-id": t,
@@ -488,7 +493,7 @@ const ct = v.createContext({}), O = v.createContext(
   nodeData: e
 }) => {
   const o = z((d) => d.setFormInputValue), i = R(e.style, { debug: !1 });
-  return /* @__PURE__ */ h(
+  return /* @__PURE__ */ f(
     "input",
     {
       onChange: (d) => o(t, d.target.value),
@@ -506,7 +511,7 @@ const ct = v.createContext({}), O = v.createContext(
   nodeData: e
 }) => {
   const o = R(e.style);
-  return o.visibility = "hidden", /* @__PURE__ */ h(
+  return o.visibility = "hidden", /* @__PURE__ */ f(
     "input",
     {
       "data-id": t,
@@ -523,14 +528,14 @@ const ct = v.createContext({}), O = v.createContext(
 }) => {
   const o = z((a) => a.setFormInputValue), i = R(e.style, { debug: !1 }), d = z((a) => a.assetsById);
   return /* @__PURE__ */ it(ut, { children: [
-    /* @__PURE__ */ h(
+    /* @__PURE__ */ f(
       "div",
       {
         style: { ...i, zIndex: 9999, cursor: "pointer" },
         onClick: () => alert("Image picker")
       }
     ),
-    /* @__PURE__ */ h(
+    /* @__PURE__ */ f(
       "img",
       {
         onChange: (a) => o(t, a.target.value),
@@ -543,13 +548,13 @@ const ct = v.createContext({}), O = v.createContext(
       }
     )
   ] });
-}, xt = ({
+}, St = ({
   id: t,
   name: r,
   nodeData: e
 }) => {
   const o = z((d) => d.setFormInputValue), i = R(e.style, { debug: !1 });
-  return /* @__PURE__ */ h(
+  return /* @__PURE__ */ f(
     "input",
     {
       onChange: (d) => o(t, d.target.value),
@@ -561,14 +566,14 @@ const ct = v.createContext({}), O = v.createContext(
       type: "password"
     }
   );
-}, St = ({
+}, xt = ({
   id: t,
   name: r,
   nodeData: e
 }) => {
-  const o = z((f) => f.setFormInputValue), { onAction: i } = v.useContext(Lt), { patchedNodeData: d } = tt({ id: t, nodeData: e }), a = R(d.style, { debug: !1 });
+  const o = z((h) => h.setFormInputValue), { onAction: i } = v.useContext(Lt), { patchedNodeData: d } = tt({ id: t, nodeData: e }), a = R(d.style, { debug: !1 });
   a.width = "100%", a.flex = "1", a.minWidth = "0", a.boxSizing = "border-box", a.borderColor = a.borderColor ?? "transparent";
-  const n = d.data?.value, c = d.data?.options, y = v.useMemo(() => !c || !Array.isArray(c) ? [] : c.map((f) => typeof f == "string" ? { value: f, label: f } : f), [c]);
+  const n = d.data?.value, c = d.data?.options, y = v.useMemo(() => !c || !Array.isArray(c) ? [] : c.map((h) => typeof h == "string" ? { value: h, label: h } : h), [c]);
   return /* @__PURE__ */ it(
     "select",
     {
@@ -577,8 +582,8 @@ const ct = v.createContext({}), O = v.createContext(
       "data-type": "SelectInputComponent",
       value: n ?? "",
       style: a,
-      onChange: async (f) => {
-        const b = f.target.value;
+      onChange: async (h) => {
+        const b = h.target.value;
         if (o(t, b), console.log(`Select changed: ${b}`), typeof i == "function")
           try {
             await i({
@@ -596,8 +601,8 @@ const ct = v.createContext({}), O = v.createContext(
           }
       },
       children: [
-        y.length === 0 && /* @__PURE__ */ h("option", { value: "", disabled: !0, children: "Select an option..." }),
-        y.map((f) => /* @__PURE__ */ h("option", { value: f.value, children: f.label }, f.value))
+        y.length === 0 && /* @__PURE__ */ f("option", { value: "", disabled: !0, children: "Select an option..." }),
+        y.map((h) => /* @__PURE__ */ f("option", { value: h.value, children: h.label }, h.value))
       ]
     }
   );
@@ -609,7 +614,7 @@ const ct = v.createContext({}), O = v.createContext(
   const o = z((d) => d.setFormInputValue), i = R(e.style, {
     debug: !1
   });
-  return /* @__PURE__ */ h(
+  return /* @__PURE__ */ f(
     "input",
     {
       onChange: (d) => o(t, d.target.value),
@@ -624,7 +629,7 @@ const ct = v.createContext({}), O = v.createContext(
   );
 }, It = ({ id: t, name: r, nodeData: e }) => {
   const o = R(e.style);
-  return /* @__PURE__ */ h(q, { id: t, nodeData: e, children: /* @__PURE__ */ h(
+  return /* @__PURE__ */ f(q, { id: t, nodeData: e, children: /* @__PURE__ */ f(
     "div",
     {
       "data-id": t,
@@ -638,7 +643,7 @@ const ct = v.createContext({}), O = v.createContext(
   const o = R(e.style, {
     debug: !1
   }), i = z((d) => d.assetsById);
-  return /* @__PURE__ */ h(q, { id: t, nodeData: e, children: /* @__PURE__ */ h(
+  return /* @__PURE__ */ f(q, { id: t, nodeData: e, children: /* @__PURE__ */ f(
     "img",
     {
       "data-id": t,
@@ -671,7 +676,7 @@ const ct = v.createContext({}), O = v.createContext(
   const c = i && (i.includes(`
 `) || i.includes("\r"));
   let y;
-  return c && n.flexDirection === "column" ? y = i.split(/\r?\n/).filter((f) => f.length > 0).map((f, b) => /* @__PURE__ */ h("div", { style: { lineHeight: "inherit" }, children: f }, b)) : y = i, /* @__PURE__ */ h(q, { id: t, nodeData: e, children: /* @__PURE__ */ h(
+  return c && n.flexDirection === "column" ? y = i.split(/\r?\n/).filter((h) => h.length > 0).map((h, b) => /* @__PURE__ */ f("div", { style: { lineHeight: "inherit" }, children: h }, b)) : y = i, /* @__PURE__ */ f(q, { id: t, nodeData: e, children: /* @__PURE__ */ f(
     "div",
     {
       "data-id": t,
@@ -687,19 +692,19 @@ const ct = v.createContext({}), O = v.createContext(
   nodeData: e,
   children: o
 }) => {
-  const i = G(Q), { patchedNodeData: d } = tt({ id: t, nodeData: e });
+  const i = j(Q), { patchedNodeData: d } = tt({ id: t, nodeData: e });
   e = d;
-  const a = jt(e.tags), n = a ? z((I) => I.inputGroups[a.groupName]) : null, c = z((I) => I.statefulSetVariants[t]), y = R(e.style, {
+  const a = Gt(e.tags), n = a ? z((I) => I.inputGroups[a.groupName]) : null, c = z((I) => I.statefulSetVariants[t]), y = R(e.style, {
     debug: !1
   });
-  let S;
-  a && n !== null ? S = n === r ? "active" : "default" : S = c || e.data.initialState || "default";
-  const f = v.Children.toArray(o).find((I) => v.isValidElement(I) ? I.props?.nodeData?.data?.state === S : !1), b = v.isValidElement(f) ? v.cloneElement(f, {
+  let x;
+  a && n !== null ? x = n === r ? "active" : "default" : x = c || e.data.initialState || "default";
+  const h = v.Children.toArray(o).find((I) => v.isValidElement(I) ? I.props?.nodeData?.data?.state === x : !1), b = v.isValidElement(h) ? v.cloneElement(h, {
     _parentStatefulSetId: t,
     _parentInputGroupInfo: a,
     _parentName: r
     // Pass the name so we can identify which element is active
-  }) : f, l = /* @__PURE__ */ h(
+  }) : h, s = /* @__PURE__ */ f(
     "div",
     {
       "data-id": t,
@@ -710,17 +715,17 @@ const ct = v.createContext({}), O = v.createContext(
     }
   );
   if (e.type === "component:input-stateful-set")
-    return l;
+    return s;
   const g = v.useContext(lt);
-  return /* @__PURE__ */ h(
+  return /* @__PURE__ */ f(
     Q.Provider,
     {
       value: { nodeData: i?.nodeData?.[t] || {} },
-      children: /* @__PURE__ */ h(
+      children: /* @__PURE__ */ f(
         lt.Provider,
         {
           value: { ...g, statefulSetId: t },
-          children: l
+          children: s
         }
       )
     }
@@ -740,14 +745,14 @@ const ct = v.createContext({}), O = v.createContext(
     ...n,
     position: n.position || "relative"
   };
-  return /* @__PURE__ */ h(
+  return /* @__PURE__ */ f(
     "div",
     {
       "data-id": t,
       "data-name": r,
       "data-type": "StatefulCompoundComponent",
       style: c,
-      children: /* @__PURE__ */ h(
+      children: /* @__PURE__ */ f(
         q,
         {
           id: t,
@@ -760,8 +765,8 @@ const ct = v.createContext({}), O = v.createContext(
       )
     }
   );
-}, Tt = ({ id: t, name: r, children: e }) => {
-  G(O);
+}, Ft = ({ id: t, name: r, children: e }) => {
+  j(O);
   const { dimensions: o, ref: i } = rt(), d = {
     zIndex: 0,
     flex: 1,
@@ -771,7 +776,7 @@ const ct = v.createContext({}), O = v.createContext(
     width: "100%",
     height: "100%"
   };
-  return /* @__PURE__ */ h(O.Provider, { value: { dimensions: o, isFlex: !1 }, children: /* @__PURE__ */ h(
+  return /* @__PURE__ */ f(O.Provider, { value: { dimensions: o, isFlex: !1 }, children: /* @__PURE__ */ f(
     "div",
     {
       "data-id": t,
@@ -794,30 +799,30 @@ const ct = v.createContext({}), O = v.createContext(
     `[DEBUG] ContainerComponent ${t} (Hero) FULL nodeData:`,
     JSON.stringify(e, null, 2)
   );
-  const a = G(Q), { patchedNodeData: n, list: c, arrayData: y } = tt({
+  const a = j(Q), { patchedNodeData: n, list: c, arrayData: y } = tt({
     id: t,
     nodeData: e
   });
   e = n;
-  const { dimensions: S, ref: f } = rt(), b = R(e.style, {
+  const { dimensions: x, ref: h } = rt(), b = R(e.style, {
     debug: !1
-  }), l = !!e.style.layout?.mode, g = e.style.layout?.mode === "HORIZONTAL" ? "row" : "column", I = b.width !== void 0, A = b.height !== void 0, F = G(O), E = F?.isFlex ?? !1, s = F?.flexDirection, W = E && s === "row", U = !E && e.style.positioning, M = e.style.layout?.layoutSizingHorizontal === "FIXED" || e.style.layout?.layoutSizingVertical === "FIXED", Z = e.style.layout?.layoutSizingHorizontal === "HUG" || e.style.layout?.layoutSizingVertical === "HUG";
+  }), s = !!e.style.layout?.mode, g = e.style.layout?.mode === "HORIZONTAL" ? "row" : "column", I = b.width !== void 0, A = b.height !== void 0, T = j(O), E = T?.isFlex ?? !1, l = T?.flexDirection, W = E && l === "row", U = !E && e.style.positioning, M = e.style.layout?.layoutSizingHorizontal === "FIXED" || e.style.layout?.layoutSizingVertical === "FIXED", Z = e.style.layout?.layoutSizingHorizontal === "HUG" || e.style.layout?.layoutSizingVertical === "HUG";
   if (!I && !W && !(U && (M || Z)) && (b.width = "100%"), !A) {
     const k = !E && e.style.positioning, X = e.style.layout?.layoutSizingVertical === "FILL";
     if (!(e.style.layout?.layoutSizingVertical === "HUG")) {
-      if (!l) if (k && X && e.style.positioning?.top !== void 0) {
+      if (!s) if (k && X && e.style.positioning?.top !== void 0) {
         const ot = 100 - e.style.positioning.top;
         b.height = `${ot}%`;
       } else
         b.height = "100%";
     }
   }
-  const H = e.style.layout?.layoutSizingHorizontal || e.style.layout?.layoutSizingVertical, V = e.style.positioning && !l && (H || !0) ? { ...b, position: "absolute" } : b.position === "absolute" ? b : { ...b, position: b.position || "relative" }, N = (k) => typeof k == "number" ? k : typeof k == "string" && k.endsWith("px") && parseFloat(k) || 0, m = N(b.paddingLeft), et = N(b.paddingRight), j = N(b.paddingTop), B = N(b.paddingBottom), L = M && typeof b.width == "number" && typeof b.height == "number" ? {
+  const H = e.style.layout?.layoutSizingHorizontal || e.style.layout?.layoutSizingVertical, V = e.style.positioning && !s && (H || !0) ? { ...b, position: "absolute" } : b.position === "absolute" ? b : { ...b, position: b.position || "relative" }, N = (k) => typeof k == "number" ? k : typeof k == "string" && k.endsWith("px") && parseFloat(k) || 0, m = N(b.paddingLeft), et = N(b.paddingRight), G = N(b.paddingTop), B = N(b.paddingBottom), L = M && typeof b.width == "number" && typeof b.height == "number" ? {
     width: b.width - m - et,
-    height: b.height - j - B
+    height: b.height - G - B
   } : {
-    width: S.width - m - et,
-    height: S.height - j - B
+    width: x.width - m - et,
+    height: x.height - G - B
   };
   if (i != null && c) {
     const k = c[i];
@@ -828,11 +833,11 @@ const ct = v.createContext({}), O = v.createContext(
         textOverridesById: a?.textOverridesById,
         rootData: a?.rootData
       } : { nodeData: k };
-      return /* @__PURE__ */ h(Q.Provider, { value: X, children: /* @__PURE__ */ h(
+      return /* @__PURE__ */ f(Q.Provider, { value: X, children: /* @__PURE__ */ f(
         O.Provider,
         {
-          value: { dimensions: L, isFlex: l, flexDirection: g },
-          children: /* @__PURE__ */ h(
+          value: { dimensions: L, isFlex: s, flexDirection: g },
+          children: /* @__PURE__ */ f(
             "div",
             {
               "data-id": `${t}:${i}`,
@@ -855,15 +860,15 @@ const ct = v.createContext({}), O = v.createContext(
         textOverridesById: a?.textOverridesById,
         rootData: a?.rootData
       } : { nodeData: J };
-      return /* @__PURE__ */ h(
+      return /* @__PURE__ */ f(
         Q.Provider,
         {
           value: ot,
-          children: /* @__PURE__ */ h(
+          children: /* @__PURE__ */ f(
             O.Provider,
             {
-              value: { dimensions: L, isFlex: l, flexDirection: g },
-              children: /* @__PURE__ */ h(
+              value: { dimensions: L, isFlex: s, flexDirection: g },
+              children: /* @__PURE__ */ f(
                 "div",
                 {
                   "data-id": `${t}:${_}`,
@@ -888,32 +893,32 @@ const ct = v.createContext({}), O = v.createContext(
     })
   ));
   const K = Array.isArray($) && $.length > 0;
-  return /* @__PURE__ */ h(
+  return /* @__PURE__ */ f(
     O.Provider,
     {
-      value: { dimensions: L, isFlex: l, flexDirection: g },
-      children: /* @__PURE__ */ h(
+      value: { dimensions: L, isFlex: s, flexDirection: g },
+      children: /* @__PURE__ */ f(
         "div",
         {
           "data-id": t,
           "data-name": r,
           "data-type": "ContainerComponent",
-          ref: f,
+          ref: h,
           style: V,
-          children: K ? /* @__PURE__ */ h(q, { id: t, nodeData: e, children: o }) : o
+          children: K ? /* @__PURE__ */ f(q, { id: t, nodeData: e, children: o }) : o
         }
       )
     }
   );
-}, Ft = pt, Pt = ({ id: t, name: r, nodeData: e, children: o }) => {
+}, Tt = pt, Pt = ({ id: t, name: r, nodeData: e, children: o }) => {
   const { dimensions: i, ref: d } = rt(), a = R(e.style, {
     debug: !1
   }), n = !!e.style.layout?.mode, c = e.style.layout?.mode === "HORIZONTAL" ? "row" : "column", y = a.position ? a : { ...a, position: "relative" };
-  return /* @__PURE__ */ h(
+  return /* @__PURE__ */ f(
     O.Provider,
     {
       value: { dimensions: i, isFlex: n, flexDirection: c },
-      children: /* @__PURE__ */ h(
+      children: /* @__PURE__ */ f(
         "div",
         {
           "data-id": t,
@@ -926,9 +931,9 @@ const ct = v.createContext({}), O = v.createContext(
       )
     }
   );
-}, Gt = ({ id: t, name: r, nodeData: e, children: o }) => {
+}, jt = ({ id: t, name: r, nodeData: e, children: o }) => {
   const i = R(e.style, { debug: !1 });
-  return /* @__PURE__ */ h(
+  return /* @__PURE__ */ f(
     "div",
     {
       "data-id": t,
@@ -938,7 +943,7 @@ const ct = v.createContext({}), O = v.createContext(
       children: o
     }
   );
-}, $t = ({ id: t, name: r, nodeData: e, children: o }) => /* @__PURE__ */ h(
+}, $t = ({ id: t, name: r, nodeData: e, children: o }) => /* @__PURE__ */ f(
   "div",
   {
     "data-id": t,
@@ -951,7 +956,7 @@ const ct = v.createContext({}), O = v.createContext(
   const i = R(e.style, {
     debug: !1
   });
-  return /* @__PURE__ */ h(
+  return /* @__PURE__ */ f(
     "div",
     {
       "data-id": t,
@@ -966,12 +971,12 @@ const ct = v.createContext({}), O = v.createContext(
     `[DEBUG] SliderComponent ${t} FULL nodeData:`,
     JSON.stringify(e, null, 2)
   );
-  const { dimensions: i, ref: d } = rt(), a = v.useRef(null), n = v.useRef(null), c = v.useRef(!1), y = v.useRef(null), S = G(ct), f = G(Ot), [b, l] = v.useState({
+  const { dimensions: i, ref: d } = rt(), a = v.useRef(null), n = v.useRef(null), c = v.useRef(!1), y = v.useRef(null), x = j(ct), h = j(Ot), [b, s] = v.useState({
     currentIndex: void 0,
     onIndexChange: void 0
-  }), [g, I] = v.useState(0), A = v.useRef(null), { patchedNodeData: F } = tt({ id: t, nodeData: e });
-  e = F;
-  const E = e.data?.params || {}, s = E.infinite === !0, W = E.automatic === !0;
+  }), [g, I] = v.useState(0), A = v.useRef(null), { patchedNodeData: T } = tt({ id: t, nodeData: e });
+  e = T;
+  const E = e.data?.params || {}, l = E.infinite === !0, W = E.automatic === !0;
   let M = Array.isArray(e.tags) && e.tags.some((u) => u.includes("container:slider:vertical")) || e.name && e.name.includes("container:slider:vertical");
   if (!M && E.animation === "default") {
     const u = e.style?.width, p = e.style?.height;
@@ -981,14 +986,14 @@ const ct = v.createContext({}), O = v.createContext(
     debug: !1
   }), P = H.width !== void 0, V = H.height !== void 0;
   P || (H.width = "100%"), V || (H.height = "100%"), H.position || (H.position = "relative");
-  const N = G(Q), m = v.useMemo(() => {
+  const N = j(Q), m = v.useMemo(() => {
     const u = [];
     return v.Children.forEach(o, (p) => {
       if (p == null) return;
-      const w = p?.props || {}, x = w.nodeData || {};
-      if (Array.isArray(x?.tags) && (x.tags.includes("encore:data:array") || x.tags.includes("bravo:data:array")) && w.id && N) {
-        const T = N?.arrayDataById && N.arrayDataById[w.id] && Array.isArray(N.arrayDataById[w.id]) ? N.arrayDataById[w.id] : null;
-        T && T.length > 0 ? T.forEach((D, nt) => {
+      const w = p?.props || {}, S = w.nodeData || {};
+      if (Array.isArray(S?.tags) && (S.tags.includes("encore:data:array") || S.tags.includes("bravo:data:array")) && w.id && N) {
+        const F = N?.arrayDataById && N.arrayDataById[w.id] && Array.isArray(N.arrayDataById[w.id]) ? N.arrayDataById[w.id] : null;
+        F && F.length > 0 ? F.forEach((D, nt) => {
           u.push(
             v.cloneElement(p, {
               key: `${w.id}:${nt}`,
@@ -1002,7 +1007,7 @@ const ct = v.createContext({}), O = v.createContext(
         u.push(p);
     }), u;
   }, [o, t, N]), et = v.useMemo(() => {
-    if (!s || m.length === 0)
+    if (!l || m.length === 0)
       return m;
     const u = m[0], p = m[m.length - 1];
     return [
@@ -1014,21 +1019,21 @@ const ct = v.createContext({}), O = v.createContext(
         key: `clone-first-${u.key || u.props.id}`
       })
     ];
-  }, [m, s]), j = v.useMemo(() => {
+  }, [m, l]), G = v.useMemo(() => {
     if (m.length === 0) return { width: 0, height: 0 };
-    const p = m[0]?.props?.nodeData?.style, w = S.scaleFactor || 1;
-    let x = 0, C = 0;
-    return p?.layout?.layoutSizingHorizontal === "FIXED" && p?.layout?.size?.x ? x = p.layout.size.x * w : x = i.width || 0, p?.layout?.layoutSizingVertical === "FIXED" && p?.layout?.size?.y ? C = p.layout.size.y * w : C = i.height || 0, { width: x, height: C };
-  }, [m, i.width, i.height, S.scaleFactor]), B = j.width, L = j.height, $ = Z === "vertical", K = v.useCallback(() => {
+    const p = m[0]?.props?.nodeData?.style, w = x.scaleFactor || 1;
+    let S = 0, C = 0;
+    return p?.layout?.layoutSizingHorizontal === "FIXED" && p?.layout?.size?.x ? S = p.layout.size.x * w : S = i.width || 0, p?.layout?.layoutSizingVertical === "FIXED" && p?.layout?.size?.y ? C = p.layout.size.y * w : C = i.height || 0, { width: S, height: C };
+  }, [m, i.width, i.height, x.scaleFactor]), B = G.width, L = G.height, $ = Z === "vertical", K = v.useCallback(() => {
     if (!a.current || m.length === 0)
       return 0;
     const u = a.current;
     if ($) {
       if (L === 0) return 0;
       const p = u.scrollTop;
-      if (s) {
-        const x = p - L;
-        let C = Math.round(x / L);
+      if (l) {
+        const S = p - L;
+        let C = Math.round(S / L);
         return C < 0 && (C = 0), C >= m.length && (C = m.length - 1), C;
       } else {
         const w = Math.round(p / L);
@@ -1037,47 +1042,47 @@ const ct = v.createContext({}), O = v.createContext(
     } else {
       if (B === 0) return 0;
       const p = u.scrollLeft;
-      if (s) {
-        const x = p - B;
-        let C = Math.round(x / B);
+      if (l) {
+        const S = p - B;
+        let C = Math.round(S / B);
         return C < 0 && (C = 0), C >= m.length && (C = m.length - 1), C;
       } else {
         const w = Math.round(p / B);
         return w < 0 ? 0 : w >= m.length ? m.length - 1 : w;
       }
     }
-  }, [s, m.length, B, L, $]), Y = v.useCallback(
+  }, [l, m.length, B, L, $]), Y = v.useCallback(
     (u, p = !0) => {
       if (!a.current || m.length === 0) return;
       const w = a.current;
       if ($) {
-        let x;
-        s ? x = L + u * L : x = u * L, w.scrollTo({
-          top: x,
+        let S;
+        l ? S = L + u * L : S = u * L, w.scrollTo({
+          top: S,
           behavior: p ? "smooth" : "auto"
         });
       } else {
-        let x;
-        s ? x = B + u * B : x = u * B, w.scrollTo({
-          left: x,
+        let S;
+        l ? S = B + u * B : S = u * B, w.scrollTo({
+          left: S,
           behavior: p ? "smooth" : "auto"
         });
       }
     },
-    [B, L, s, m.length, $]
+    [B, L, l, m.length, $]
   ), k = v.useCallback(() => {
-    if (!s || !a.current || m.length === 0) return;
+    if (!l || !a.current || m.length === 0) return;
     const u = a.current, p = 1;
     if ($) {
       if (L === 0) return;
-      const w = u.scrollTop, x = L, C = x, T = C + m.length * x;
-      w >= T - p ? u.scrollTop = C : w <= p && (u.scrollTop = T - x);
+      const w = u.scrollTop, S = L, C = S, F = C + m.length * S;
+      w >= F - p ? u.scrollTop = C : w <= p && (u.scrollTop = F - S);
     } else {
       if (B === 0) return;
-      const w = u.scrollLeft, x = B, C = x, T = C + m.length * x;
-      w >= T - p ? u.scrollLeft = C : w <= p && (u.scrollLeft = T - x);
+      const w = u.scrollLeft, S = B, C = S, F = C + m.length * S;
+      w >= F - p ? u.scrollLeft = C : w <= p && (u.scrollLeft = F - S);
     }
-  }, [s, m.length, B, L, $]);
+  }, [l, m.length, B, L, $]);
   v.useEffect(() => {
     if (!W || m.length <= 1 || B === 0) return;
     const u = () => {
@@ -1085,42 +1090,42 @@ const ct = v.createContext({}), O = v.createContext(
       const p = a.current;
       if ($) {
         if (L === 0) return;
-        const w = p.scrollTop, x = L;
+        const w = p.scrollTop, S = L;
         let C;
-        if (s) {
-          const nt = w - x;
-          C = Math.round(nt / x), C < 0 && (C = 0), C >= m.length && (C = m.length - 1);
+        if (l) {
+          const nt = w - S;
+          C = Math.round(nt / S), C < 0 && (C = 0), C >= m.length && (C = m.length - 1);
         } else
-          C = Math.round(w / x);
-        let T = C + 1;
-        if (s) {
-          T >= m.length && (T = 0);
-          const D = x;
+          C = Math.round(w / S);
+        let F = C + 1;
+        if (l) {
+          F >= m.length && (F = 0);
+          const D = S;
           p.scrollTo({
-            top: D + T * x,
+            top: D + F * S,
             behavior: "smooth"
           });
         } else
-          T >= m.length && (T = 0), Y(T);
+          F >= m.length && (F = 0), Y(F);
       } else {
         if (B === 0) return;
-        const w = p.scrollLeft, x = B;
+        const w = p.scrollLeft, S = B;
         let C;
-        if (s) {
-          const nt = w - x;
-          C = Math.round(nt / x), C < 0 && (C = 0), C >= m.length && (C = m.length - 1);
+        if (l) {
+          const nt = w - S;
+          C = Math.round(nt / S), C < 0 && (C = 0), C >= m.length && (C = m.length - 1);
         } else
-          C = Math.round(w / x);
-        let T = C + 1;
-        if (s) {
-          T >= m.length && (T = 0);
-          const D = x;
+          C = Math.round(w / S);
+        let F = C + 1;
+        if (l) {
+          F >= m.length && (F = 0);
+          const D = S;
           p.scrollTo({
-            left: D + T * x,
+            left: D + F * S,
             behavior: "smooth"
           });
         } else
-          T >= m.length && (T = 0), Y(T);
+          F >= m.length && (F = 0), Y(F);
       }
     };
     return n.current = setInterval(u, 4e3), () => {
@@ -1129,7 +1134,7 @@ const ct = v.createContext({}), O = v.createContext(
   }, [
     W,
     m.length,
-    s,
+    l,
     B,
     L,
     $,
@@ -1158,32 +1163,32 @@ const ct = v.createContext({}), O = v.createContext(
     if (!u) return;
     let p = null;
     const w = () => {
-      X(), s ? (p !== null && cancelAnimationFrame(p), p = requestAnimationFrame(() => {
+      X(), l ? (p !== null && cancelAnimationFrame(p), p = requestAnimationFrame(() => {
         k();
-        const T = K();
-        _(T);
+        const F = K();
+        _(F);
       })) : (p !== null && cancelAnimationFrame(p), p = requestAnimationFrame(() => {
-        const T = K();
-        _(T);
+        const F = K();
+        _(F);
       }));
-    }, x = () => X(), C = () => X();
-    return u.addEventListener("scroll", w, { passive: !0 }), u.addEventListener("touchstart", x, {
+    }, S = () => X(), C = () => X();
+    return u.addEventListener("scroll", w, { passive: !0 }), u.addEventListener("touchstart", S, {
       passive: !0
     }), u.addEventListener("mousedown", C), () => {
-      u.removeEventListener("scroll", w), u.removeEventListener("touchstart", x), u.removeEventListener("mousedown", C), y.current && clearTimeout(y.current), p !== null && cancelAnimationFrame(p);
+      u.removeEventListener("scroll", w), u.removeEventListener("touchstart", S), u.removeEventListener("mousedown", C), y.current && clearTimeout(y.current), p !== null && cancelAnimationFrame(p);
     };
   }, [
-    s,
+    l,
     X,
     k,
     K,
     _
   ]), v.useEffect(() => {
-    if (f) {
-      const u = f.getControlProps(t);
-      u && u !== b && l(u);
+    if (h) {
+      const u = h.getControlProps(t);
+      u && u !== b && s(u);
     }
-  }, [t, f, b]), v.useEffect(() => {
+  }, [t, h, b]), v.useEffect(() => {
     if (b.currentIndex !== void 0 && a.current && m.length > 0 && B > 0) {
       const u = Math.max(
         0,
@@ -1201,21 +1206,21 @@ const ct = v.createContext({}), O = v.createContext(
     Y,
     K
   ]), v.useEffect(() => {
-    if (s && a.current && m.length > 0 && m.length > 0 && ($ ? L > 0 : B > 0)) {
+    if (l && a.current && m.length > 0 && m.length > 0 && ($ ? L > 0 : B > 0)) {
       const u = $ ? L : B;
       setTimeout(() => {
         a.current && ($ ? a.current.scrollTop = u : a.current.scrollLeft = u);
       }, 0);
     }
-  }, [s, m.length, B, L, $]), v.useEffect(() => {
-    if (!f) return;
-    const { registerContainer: u, unregisterContainer: p } = f;
+  }, [l, m.length, B, L, $]), v.useEffect(() => {
+    if (!h) return;
+    const { registerContainer: u, unregisterContainer: p } = h;
     return () => {
     };
   }, [
     t,
-    f?.registerContainer,
-    f?.unregisterContainer,
+    h?.registerContainer,
+    h?.unregisterContainer,
     // controlProps, // REMOVED to break infinite loop
     Y,
     K
@@ -1234,11 +1239,11 @@ const ct = v.createContext({}), O = v.createContext(
   }, kt = {
     flexShrink: 0,
     scrollSnapAlign: "start",
-    width: j.width > 0 ? j.width : void 0,
-    height: j.height > 0 ? j.height : void 0,
+    width: G.width > 0 ? G.width : void 0,
+    height: G.height > 0 ? G.height : void 0,
     position: "relative"
   };
-  return /* @__PURE__ */ h(
+  return /* @__PURE__ */ f(
     "div",
     {
       "data-id": t,
@@ -1246,17 +1251,17 @@ const ct = v.createContext({}), O = v.createContext(
       "data-type": "SliderComponent",
       ref: d,
       style: H,
-      children: /* @__PURE__ */ h("div", { ref: a, style: ot, children: et.map((u, p) => /* @__PURE__ */ h(
+      children: /* @__PURE__ */ f("div", { ref: a, style: ot, children: et.map((u, p) => /* @__PURE__ */ f(
         O.Provider,
         {
           value: {
             dimensions: {
-              width: j.width,
-              height: j.height
+              width: G.width,
+              height: G.height
             },
             isFlex: !1
           },
-          children: /* @__PURE__ */ h("div", { style: kt, children: u })
+          children: /* @__PURE__ */ f("div", { style: kt, children: u })
         },
         u.key || `slide-${p}`
       )) })
@@ -1275,13 +1280,13 @@ const ct = v.createContext({}), O = v.createContext(
     }
   return null;
 }, Bt = ({ id: t, name: r, nodeData: e, children: o }) => {
-  const { dimensions: i, ref: d } = rt(), { componentId: a } = G(lt), n = G(O), c = e.style.originalSize?.[0] || 1, y = e.style.originalSize?.[1] || 1, S = n?.dimensions?.width, f = n?.dimensions?.height, b = window.innerWidth, l = window.innerHeight, g = S && S > 0 && S < b * 0.8;
+  const { dimensions: i, ref: d } = rt(), { componentId: a } = j(lt), n = j(O), c = e.style.originalSize?.[0] || 1, y = e.style.originalSize?.[1] || 1, x = n?.dimensions?.width, h = n?.dimensions?.height, b = window.innerWidth, s = window.innerHeight, g = x && x > 0 && x < b * 0.8;
   let I, A;
-  i.width > 0 && i.height > 0 ? (I = i.width, A = i.height) : g && S && f || S && f && S > 0 && f > 0 ? (I = S, A = f) : (I = b, A = l);
+  i.width > 0 && i.height > 0 ? (I = i.width, A = i.height) : g && x && h || x && h && x > 0 && h > 0 ? (I = x, A = h) : (I = b, A = s);
   const E = { scaleFactor: Math.min(I / c, A / y) || 1 };
   if (a) {
     const P = Rt(o, a);
-    return P ? /* @__PURE__ */ h(ct.Provider, { value: E, children: /* @__PURE__ */ h(
+    return P ? /* @__PURE__ */ f(ct.Provider, { value: E, children: /* @__PURE__ */ f(
       O.Provider,
       {
         value: {
@@ -1294,7 +1299,7 @@ const ct = v.createContext({}), O = v.createContext(
       }
     ) }) : (console.warn(`Child with id "${a}" not found`), null);
   }
-  const s = Array.isArray(o) ? o : [o], { scrollableChildren: W, nonScrollableChildren: U } = s.reduce(
+  const l = Array.isArray(o) ? o : [o], { scrollableChildren: W, nonScrollableChildren: U } = l.reduce(
     (P, V) => {
       const m = V.props.nodeData.type === "container:top-bar" ? "nonScrollableChildren" : "scrollableChildren";
       return P[m].push(V), P;
@@ -1309,8 +1314,8 @@ const ct = v.createContext({}), O = v.createContext(
     const P = Array.isArray(o) ? o : [o];
     let V = 0, N = 0;
     P.forEach((et) => {
-      const j = et?.props?.nodeData?.style?.width;
-      j && (V += j, j < 99 && N++);
+      const G = et?.props?.nodeData?.style?.width;
+      G && (V += G, G < 99 && N++);
     }), N > 0 && V >= 99 && (console.log(
       `[PATCH] Detected HORIZONTAL WRAP layout for page ${t} (Partial width children: ${N}, Total width: ${V})`
     ), M = "HORIZONTAL", e.style || (e.style = {}), e.style.layout || (e.style.layout = {}), e.style.layout.mode = "HORIZONTAL", e.style.layout.flexWrap = "wrap", e.style.layout.primaryAxisAlignItems = "flex-start", e.style.layout.counterAxisAlignItems = "flex-start");
@@ -1318,7 +1323,7 @@ const ct = v.createContext({}), O = v.createContext(
   const Z = M === "HORIZONTAL" ? "row" : "column", H = U.some(
     (P) => P?.props?.nodeData?.type !== "container:background"
   );
-  return /* @__PURE__ */ h(ct.Provider, { value: E, children: /* @__PURE__ */ it(
+  return /* @__PURE__ */ f(ct.Provider, { value: E, children: /* @__PURE__ */ it(
     "div",
     {
       style: {
@@ -1339,7 +1344,7 @@ const ct = v.createContext({}), O = v.createContext(
       children: [
         U.filter(
           (P) => P?.props?.nodeData?.type === "container:background"
-        ).map((P, V) => /* @__PURE__ */ h(
+        ).map((P, V) => /* @__PURE__ */ f(
           O.Provider,
           {
             value: {
@@ -1354,7 +1359,7 @@ const ct = v.createContext({}), O = v.createContext(
         )),
         H && U.filter(
           (P) => P?.props?.nodeData?.type !== "container:background"
-        ).map((P, V) => /* @__PURE__ */ h(
+        ).map((P, V) => /* @__PURE__ */ f(
           O.Provider,
           {
             value: {
@@ -1367,7 +1372,7 @@ const ct = v.createContext({}), O = v.createContext(
           },
           `non-scroll-${V}`
         )),
-        /* @__PURE__ */ h(O.Provider, { value: { dimensions: i }, children: /* @__PURE__ */ h(
+        /* @__PURE__ */ f(O.Provider, { value: { dimensions: i }, children: /* @__PURE__ */ f(
           "div",
           {
             "data-id": t,
@@ -1396,26 +1401,26 @@ const ct = v.createContext({}), O = v.createContext(
     }
   ) });
 }, Dt = {
-  WebViewComponent: ht,
-  ColorComponent: ft,
+  WebViewComponent: ft,
+  ColorComponent: ht,
   GradientComponent: gt,
   ImageComponent: mt,
   EmailInputComponent: yt,
   HiddenInputComponent: bt,
   ImageInputComponent: Ct,
-  PasswordInputComponent: xt,
-  SelectInputComponent: St,
+  PasswordInputComponent: St,
+  SelectInputComponent: xt,
   TextInputComponent: vt,
   LottieComponent: It,
   SvgComponent: wt,
   TextComponent: At,
   StatefulSetComponent: dt,
   StatefulCompoundComponent: Et,
-  BackgroundContainerComponent: Tt,
+  BackgroundContainerComponent: Ft,
   ContainerComponent: pt,
-  CompoundComponent: Ft,
+  CompoundComponent: Tt,
   TopBarContainerComponent: Pt,
-  DefaultLayerComponent: Gt,
+  DefaultLayerComponent: jt,
   TabsMenuComponent: $t,
   MenuSideComponent: Wt,
   SliderComponent: at,
@@ -1423,26 +1428,26 @@ const ct = v.createContext({}), O = v.createContext(
   // Type string mappings for dynamically loaded components
   "menu:side": Wt,
   "page:default": Bt,
-  "container:background": Tt,
+  "container:background": Ft,
   "container:default": pt,
   "container:top-bar": Pt,
   "container:slider": at,
   "component:text": At,
-  "component:color": ft,
+  "component:color": ht,
   "component:gradient": gt,
   "component:image": mt,
   "component:svg": wt,
-  "component:compound": Ft,
+  "component:compound": Tt,
   "component:input-stateful-set": dt,
   "component:stateful-set": dt,
   "component:stateful-compound": Et,
   "component:slider": at,
-  "component:webview": ht,
+  "component:webview": ft,
   "component:lottie": It,
   "component:email-input": yt,
   "component:text-input": vt,
-  "component:password-input": xt,
-  "component:select-input": St,
+  "component:password-input": St,
+  "component:select-input": xt,
   "component:image-input": Ct,
   "component:hidden-input": bt,
   "component:tabs-menu": $t,