npm - @bravostudioai/react - Versions diffs - 0.1.12 → 0.1.14 - Mend

@bravostudioai/react 0.1.12 → 0.1.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/components.js +612 -596
package/dist/components.js.map +1 -1
package/dist/contexts/EncoreActionContext.js.map +1 -1
package/dist/src/components.d.ts.map +1 -1
package/dist/src/contexts/EncoreActionContext.d.ts +1 -0
package/dist/src/contexts/EncoreActionContext.d.ts.map +1 -1
package/package.json +1 -1
package/src/components.tsx +29 -2
package/src/contexts/EncoreActionContext.ts +1 -2

package/dist/components.js CHANGED Viewed

@@ -1,22 +1,22 @@
-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 { jsx as p, jsxs as it, Fragment as ut } from "react/jsx-runtime";
+import I, { useContext as N, useMemo as Ht, useState as Vt, useCallback as Nt } from "react";
+import tt from "./contexts/EncoreBindingContext.js";
+import k from "./stores/useEncoreState.js";
 import lt from "./contexts/EncoreComponentIdContext.js";
-import Nt from "axios";
-import Lt from "./contexts/EncoreActionContext.js";
-import Ot from "./contexts/EncoreRepeatingContainerContext.js";
-const ct = v.createContext({}), O = v.createContext(
+import Ot from "axios";
+import ft from "./contexts/EncoreActionContext.js";
+import Mt from "./contexts/EncoreRepeatingContainerContext.js";
+const ct = I.createContext({}), V = I.createContext(
   {}
-), st = (t) => t.replace(/#(\w{2})(\w{6})/, "#$2$1"), Mt = (t) => t.slice(1, 3) === "00", Gt = (t) => {
+), 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:"));
   if (!r) return null;
   const e = r.split(":");
   return e.length >= 3 ? { type: e[1], groupName: e[2] } : null;
 }, rt = () => {
-  const [t, r] = Ht({ width: 0, height: 0 }), e = v.useRef(null);
-  return v.useEffect(() => {
+  const [t, r] = Vt({ width: 0, height: 0 }), e = I.useRef(null);
+  return I.useEffect(() => {
     if (!e.current) return;
     const o = e.current, i = () => {
       const { width: a, height: n } = o.getBoundingClientRect();
@@ -25,67 +25,67 @@ const ct = v.createContext({}), O = v.createContext(
     i(), requestAnimationFrame(() => {
       i();
     });
-    const d = new ResizeObserver((a) => {
+    const c = new ResizeObserver((a) => {
       for (const n of a) {
-        const c = n.contentRect;
-        r({ width: c.width, height: c.height });
+        const l = n.contentRect;
+        r({ width: l.width, height: l.height });
       }
     });
-    return d.observe(o), () => d.disconnect();
+    return c.observe(o), () => c.disconnect();
   }, []), { dimensions: t, ref: e };
 }, R = (t, r = {}) => {
   let e = !1;
-  const o = j(ct), i = j(O), d = {
+  const o = N(ct), i = N(V), c = {
     width: window.innerWidth,
     height: window.innerHeight
-  }, a = Vt(
+  }, a = Nt(
     (s) => (i.dimensions?.width ?? 0) * 0.01 * s,
     [i.dimensions?.width]
   ), n = {};
   r = { debug: !1, ...r };
-  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;
+  const l = k((s) => s.fontsById || {});
+  if (k((s) => s.fontsByIdFull || {}), !t) return;
+  const y = i.dimensions?.width ?? c.width, v = i.dimensions?.height ?? c.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 && v > 0 && (n.height = t.height * v * 0.01)), !(i?.isFlex ?? !1) && t.positioning) {
+    const s = t.layout?.layoutSizingHorizontal === "FIXED" || t.layout?.layoutSizingVertical === "FIXED", f = s && t.positioning.top < 0 ? 0 : t.positioning.top, A = 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);
+      const T = t.layout.size.x, L = o.scaleFactor ?? 1, h = T * L, x = i?.dimensions?.width;
+      x && typeof x == "number" && x > 0 && h / x >= 0.95 && A >= 15 && A <= 35 && (e = !0);
     }
-    n.top = `${g}%`;
-    const A = !!t.inset;
+    n.top = `${f}%`;
+    const E = !!t.inset;
     if (e)
-      if (A) {
+      if (E) {
         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}%`;
+      E ? n.inset = t.inset : n.left = `${A}%`;
     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 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);
+    const s = o.scaleFactor ?? 1, f = t.layout.padding;
+    f.top !== void 0 && (n.paddingTop = f.top * s), f.right !== void 0 && (n.paddingRight = f.right * s), f.bottom !== void 0 && (n.paddingBottom = f.bottom * s), f.left !== void 0 && (n.paddingLeft = f.left * s);
   }
   if (t.layout?.mode) {
     n.display = "flex";
-    const s = (E) => E ? {
+    const s = (L) => L ? {
       MIN: "flex-start",
       MAX: "flex-end",
       CENTER: "center",
       SPACE_BETWEEN: "space-between",
       SPACE_AROUND: "space-around",
       SPACE_EVENLY: "space-evenly"
-    }[E] || E.toLowerCase().replace(/_/g, "-") : void 0;
+    }[L] || L.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.primaryAxisAlignItems
     ), 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, 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,
+    const f = t.layout.itemSpacing, A = o.scaleFactor ?? 1, T = t.layout.primaryAxisAlignItems === "SPACE_BETWEEN" ? 0 : (f !== void 0 ? f : 0) * A;
+    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" && f === 0 ? console.log("[useEncoreStyle] Setting gap properties:", {
+      itemSpacing: f,
       spacing: T,
       gap: n.gap,
       rowGap: n.rowGap,
@@ -96,25 +96,25 @@ const ct = v.createContext({}), O = v.createContext(
       "[useEncoreStyle] No gap properties set",
       r.debug,
       t.layout?.mode,
-      g
+      f
     );
   }
   if (t.layout?.layoutSizingHorizontal === "FILL" && (n.width = "100%"), t.layout?.layoutSizingHorizontal === "FIXED") {
     const s = o.scaleFactor ?? 1;
     n.width = t.layout.size.x * s;
   }
-  if (t.layout?.layoutSizingVertical === "FIXED") {
+  if (t.layout?.layoutSizingHorizontal, t.layout?.layoutSizingVertical === "FIXED") {
     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) {
-      const A = 100 - t.positioning.top;
-      n.height = `${A}%`;
+      const E = 100 - t.positioning.top;
+      n.height = `${E}%`;
     } 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 s = c[t.fontId] || "sans-serif";
+  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 * (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 s = l[t.fontId] || "sans-serif";
     n.fontFamily = `"${s}"`, console.log("[AG_DEBUG] [useEncoreStyle] Font Resolution:", {
       fontId: t.fontId,
       resolvedFamily: s,
@@ -129,21 +129,21 @@ const ct = v.createContext({}), O = v.createContext(
   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 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`);
+      const f = String(n.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`);
     } else if (t.inset) {
-      const g = String(t.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`);
+      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`);
     }
   }
   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 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`);
+    const s = n.inset || t.inset, f = String(s).split(/\s+/);
+    f.length === 3 ? n.inset = `${f[0]} 50% ${f[2]} auto` : f.length === 4 && (n.inset = `${f[0]} 50% ${f[2]} auto`);
   }
   return n;
-}, tt = ({ id: t, nodeData: r }) => {
-  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 ? {
+}, et = ({ id: t, nodeData: r }) => {
+  const e = N(tt), o = e?.nodeData?.[t], { patch: i, list: c } = 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 l = i ? {
     ...r,
     ...i || {},
     ...i && i.data ? { data: { ...r?.data || {}, ...i.data } } : {},
@@ -151,97 +151,97 @@ const ct = v.createContext({}), O = v.createContext(
     actions: i.actions && Array.isArray(i.actions) && i.actions.length > 0 ? i.actions : r.actions || i.actions || []
   } : r;
   const y = e?.textOverridesById && e.textOverridesById[t] !== void 0 ? e.textOverridesById[t] : void 0;
-  y !== void 0 && Array.isArray(r?.tags) && r.tags.includes("PROP:TEXT_VAR") && (c = {
-    ...c,
-    data: { ...c?.data || {}, text: String(y) }
+  y !== void 0 && Array.isArray(r?.tags) && r.tags.includes("PROP:TEXT_VAR") && (l = {
+    ...l,
+    data: { ...l?.data || {}, text: String(y) }
   });
-  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,
+  const v = Array.isArray(r?.tags) && (r.tags.includes("encore:data") || r.tags.includes("bravo:data")), g = e?.rootData;
+  g && g[t] && typeof g[t] == "object" && (l = {
+    ...l,
     data: {
-      ...c.data || {},
-      ...h[t]
+      ...l.data || {},
+      ...g[t]
     }
   });
-  const b = e?.nodeData && typeof e.nodeData == "object";
-  if (x || b) {
+  const S = e?.nodeData && typeof e.nodeData == "object";
+  if (v || S) {
     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,
+        const A = s[t];
+        A && typeof A == "object" && l.data && (l = {
+          ...l,
           data: {
-            ...c.data,
-            ...I
+            ...l.data,
+            ...A
           }
         });
-      } else if (x && s.description && c.data && (c = {
-        ...c,
+      } else if (v && s.description && l.data && (l = {
+        ...l,
         data: {
-          ...c.data,
+          ...l.data,
           text: s.description
         }
-      }), s.image && c.data) {
-        const I = s.image.startsWith("//") ? `https:${s.image}` : s.image;
-        c = {
-          ...c,
+      }), s.image && l.data) {
+        const A = s.image.startsWith("//") ? `https:${s.image}` : s.image;
+        l = {
+          ...l,
           data: {
-            ...c.data,
-            imageUrl: I
+            ...l.data,
+            imageUrl: A
           }
         };
       }
-      c.encoreData = s;
+      l.encoreData = s;
     }
   }
   return {
     patch: i,
-    list: d || n,
+    list: c || n,
     // Use arrayData if list is not provided
-    patchedNodeData: c,
+    patchedNodeData: l,
     arrayData: n
     // Also return separately for components that need it
   };
-}, q = ({
+}, Y = ({
   id: t,
   nodeData: r,
   children: e,
   _parentStatefulSetId: o,
   _parentInputGroupInfo: i,
-  _parentName: d
+  _parentName: c
 }) => {
-  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(
+  const a = k((h) => h.baseURL), n = k((h) => h.appId);
+  k((h) => h.pageId);
+  const { onAction: l } = I.useContext(ft), { statefulSetId: y } = I.useContext(
     lt
-  ), 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(
+  ), v = o || y, { patchedNodeData: g } = et({ id: t, nodeData: r }), S = k(
+    (h) => h.setStatefulSetVariant
+  ), s = k(
+    (h) => h.setInputGroupValue
+  ), f = k((h) => h.setAccessToken), { app: A } = k((h) => h.app);
+  A.data?.app?.startPageId, A.data?.app?.PageId;
+  const E = R(
     {
       positioning: r.style?.positioning
     },
     { 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 T = async (l) => {
-    let W = !1;
-    const U = () => {
-      W = !1;
+  E.zIndex = 99999, E.backgroundColor = "transparent", E.position = "absolute", E.top = "0", E.left = "0", E.right = "0", E.bottom = "0", E.width = "100%", E.height = "100%", E.pointerEvents = "auto", E.isolation = "isolate";
+  const T = async (h) => {
+    let x = !1;
+    const O = () => {
+      x = !1;
     };
-    if (typeof c == "function")
+    if (typeof l == "function")
       try {
-        await c({ bravo: { cancel: U, action: l } }), W = !0;
+        await l({ bravo: { cancel: O, action: h, componentId: t } }), x = !0;
       } catch {
       }
     else
-      W = !0;
-    if (W)
-      switch (l.action) {
+      x = !0;
+    if (x)
+      switch (h.action) {
         case "login":
         // TODO firebase
         // TODO oauth
@@ -251,7 +251,7 @@ const ct = v.createContext({}), O = v.createContext(
         case "submit":
           break;
         case "email":
-          window.location.href = `mailto:${l.params.email}`;
+          window.location.href = `mailto:${h.params.email}`;
           break;
         case "goback":
           break;
@@ -260,32 +260,32 @@ const ct = v.createContext({}), O = v.createContext(
         case "homepage":
           break;
         case "logout":
-          g(void 0);
+          f(void 0);
           break;
         case "none":
           break;
         case "openurl":
-          window.open(l.params.url, "_blank");
+          window.open(h.params.url, "_blank");
           break;
         case "phone":
-          window.location.href = `tel:${l.params.phone}`;
+          window.location.href = `tel:${h.params.phone}`;
           break;
         case "remote":
-          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);
+          const M = btoa(JSON.stringify(h.params?.data || {})), j = `${a}/devices/apps/${n}/node/${t}/trigger/${h.event}?params=${M}`, K = await Ot.post(j);
+          K.data?.action && await T(K.data);
           break;
         case "set-access-token":
-          g(l.params);
+          f(h.params);
           break;
         case "set-state":
-          if (i && d)
+          if (i && c)
             if (console.log("🔵 Input group change:", {
               groupName: i.groupName,
-              elementName: d,
-              hasOnAction: typeof c == "function"
-            }), s(i.groupName, d), typeof c == "function")
+              elementName: c,
+              hasOnAction: typeof l == "function"
+            }), s(i.groupName, c), typeof l == "function")
               try {
-                await c({
+                await l({
                   bravo: {
                     cancel: () => {
                     },
@@ -294,40 +294,41 @@ const ct = v.createContext({}), O = v.createContext(
                       params: {
                         groupName: i.groupName,
                         groupType: i.type,
-                        value: d
+                        value: c
                       },
                       event: "tap"
-                    }
+                    },
+                    componentId: t
                   }
                 }), console.log("✅ Input group change event fired");
-              } catch (P) {
-                console.error("❌ Error in onAction callback:", P);
+              } catch (F) {
+                console.error("❌ Error in onAction callback:", F);
               }
             else
               console.warn("⚠️ No onAction callback provided");
           else {
-            let P = x || l.params?.stateSetId || h.data?.stateSetId;
-            if (!P) {
+            let F = v || h.params?.stateSetId || g.data?.stateSetId;
+            if (!F) {
               console.error("❌ No stateSetId found in action or nodeData!", {
-                actionParams: l.params,
-                nodeDataStateSetId: h.data?.stateSetId,
-                parentStatefulSetId: x
+                actionParams: h.params,
+                nodeDataStateSetId: g.data?.stateSetId,
+                parentStatefulSetId: v
               });
               break;
             }
-            b(P, l.params.state);
+            S(F, h.params.state);
           }
           break;
         case "showalert":
-          alert(l.params.message);
+          alert(h.params.message);
           break;
         default:
-          console.log(l), alert(l.action);
+          console.log(h), alert(h.action);
       }
   };
   if (r.href)
     return /* @__PURE__ */ it(ut, { children: [
-      /* @__PURE__ */ f(
+      /* @__PURE__ */ p(
         "button",
         {
           type: "button",
@@ -337,7 +338,7 @@ const ct = v.createContext({}), O = v.createContext(
             event: "tap"
           }),
           style: {
-            ...A,
+            ...E,
             cursor: "pointer",
             background: "transparent",
             border: "none",
@@ -348,17 +349,17 @@ const ct = v.createContext({}), O = v.createContext(
       ),
       e
     ] });
-  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,
+  let L = g.actions && g.actions.length > 0 ? g.actions : r.actions || [];
+  if (v && L.length > 0 && (L = L.map((h) => h.action === "set-state" ? (h.params?.stateSetId, {
+    ...h,
     params: {
-      ...l.params,
-      stateSetId: x
+      ...h.params,
+      stateSetId: v
       // Always use parent's id
     }
-  }) : l)), E.length === 0 && (h.data?.stateSetId || x))
-    if (i && d)
-      E = [
+  }) : h)), L.length === 0 && (g.data?.stateSetId || v))
+    if (i && c)
+      L = [
         {
           action: "set-state",
           params: {
@@ -369,13 +370,13 @@ const ct = v.createContext({}), O = v.createContext(
         }
       ];
     else {
-      const l = x || h.data.stateSetId;
-      l ? E = [
+      const h = v || g.data.stateSetId;
+      h ? L = [
         {
           action: "set-state",
           params: {
-            state: z.getState().statefulSetVariants[l] === "active" ? "default" : "active",
-            stateSetId: l
+            state: k.getState().statefulSetVariants[h] === "active" ? "default" : "active",
+            stateSetId: h
             // Use parent's id or button's stateSetId
           },
           event: "tap"
@@ -385,29 +386,29 @@ const ct = v.createContext({}), O = v.createContext(
         { id: t, name: r.name }
       );
     }
-  if (E && E.length > 0) {
-    const l = E[0];
-    return l.event !== "tap" ? e : /* @__PURE__ */ it(ut, { children: [
+  if (L && L.length > 0) {
+    const h = L[0];
+    return h.event !== "tap" ? e : /* @__PURE__ */ it(ut, { children: [
       e,
-      /* @__PURE__ */ f(
+      /* @__PURE__ */ p(
         "div",
         {
-          onClick: (W) => {
-            W.stopPropagation(), T(l);
+          onClick: (x) => {
+            x.stopPropagation(), T(h);
           },
-          onMouseDown: (W) => W.stopPropagation(),
-          onMouseUp: (W) => W.stopPropagation(),
-          style: { ...A, cursor: "pointer", pointerEvents: "auto" }
+          onMouseDown: (x) => x.stopPropagation(),
+          onMouseUp: (x) => x.stopPropagation(),
+          style: { ...E, cursor: "pointer", pointerEvents: "auto" }
         }
       )
     ] });
   }
   return e;
-}, ft = ({ id: t, name: r, nodeData: e }) => {
+}, ht = ({ id: t, name: r, nodeData: e }) => {
   const o = R(e.style, {
     debug: !1
   });
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ p(
     "iframe",
     {
       "data-id": t,
@@ -417,86 +418,86 @@ const ct = v.createContext({}), O = v.createContext(
       src: e.data?.params?.url
     }
   );
-}, ht = ({ id: t, name: r, nodeData: e }) => {
+}, gt = ({ 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 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 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";
   }
-  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 = ({
+  const i = Array.isArray(e.tags) && e.tags.includes("bravo:layer"), c = N(V)?.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, l = i && (c || n), y = r && r.toLowerCase().startsWith("clip");
+  return l && (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 }) });
+}, mt = ({
   id: t,
   name: r,
   nodeData: e
 }) => {
   const o = R(e.style, {
     debug: !1
-  }), i = e.style, d = Array.isArray(i?.gradientColorStops) ? i.gradientColorStops.map((a) => {
+  }), i = e.style, c = Array.isArray(i?.gradientColorStops) ? i.gradientColorStops.map((a) => {
     if (!a?.color) return null;
     const n = st(a.color);
     if (typeof a.position == "number") {
-      const c = a.position * 100;
-      return `${n} ${c}%`;
+      const l = a.position * 100;
+      return `${n} ${l}%`;
     }
     return n;
   }).filter(Boolean).join(", ") : "";
-  if (d) {
+  if (c) {
     const a = i?.gradientType || "linear";
-    o.backgroundImage = a === "radial" ? `radial-gradient(${d})` : `linear-gradient(${d})`, delete o.backgroundColor;
+    o.backgroundImage = a === "radial" ? `radial-gradient(${c})` : `linear-gradient(${c})`, delete o.backgroundColor;
   }
-  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 });
+  return /* @__PURE__ */ p(Y, { id: t, nodeData: e, children: /* @__PURE__ */ p("div", { "data-name": r, "data-type": "GradientComponent", style: o }) });
+}, yt = ({ id: t, name: r, nodeData: e }) => {
+  const { patchedNodeData: o } = et({ id: t, nodeData: e });
   e = o;
   const i = R(e.style, {
     debug: !1
-  }), d = j(O), a = z((s) => s.assetsById), n = e.style?.scaleMode || "fill";
+  }), c = N(V), a = k((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, 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";
+  let l = e.data?.imageUrl;
+  !l && e.encoreData?.image && (l = e.encoreData.image.startsWith("//") ? `https:${e.encoreData.image}` : e.encoreData.image), l || (l = a[e.assetId]?.url);
+  const y = e.style?.positioning, v = e.style?.aspectRatio, g = c.dimensions?.width || 0, S = c.dimensions?.height || 0;
+  if (y && v && g > 0) {
+    const s = typeof y.left == "number" && typeof y.right == "number", f = typeof y.top == "number" && typeof y.bottom == "number";
     if (s) {
-      const I = 100 - y.left - y.right;
-      if (I > 0) {
-        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;
+      const A = 100 - y.left - y.right;
+      if (A > 0) {
+        const E = A * g / 100;
+        i.width = E, i.height = E / v, 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 * x, i.left = `${Math.max(0, y.left)}%`, i.top = `${Math.max(0, y.top)}%`, delete i.right, delete i.bottom;
+    } else if (f && S > 0) {
+      const A = 100 - y.top - y.bottom;
+      if (A > 0) {
+        const E = A * S / 100;
+        i.height = E, i.width = E * v, i.left = `${Math.max(0, y.left)}%`, i.top = `${Math.max(0, y.top)}%`, delete i.right, delete i.bottom;
       }
     }
   }
-  return /* @__PURE__ */ f(q, { id: t, nodeData: e, children: /* @__PURE__ */ f(
+  return /* @__PURE__ */ p(Y, { id: t, nodeData: e, children: /* @__PURE__ */ p(
     "img",
     {
       "data-id": t,
       "data-name": r,
       "data-type": "ImageComponent",
       style: i,
-      src: c || a[e.assetId]?.url,
+      src: l || a[e.assetId]?.url,
       alt: r
     }
   ) });
-}, yt = ({
+}, bt = ({
   id: t,
   name: r,
   nodeData: e
 }) => {
-  const o = z((d) => d.setFormInputValue), i = R(e.style, { debug: !1 });
-  return /* @__PURE__ */ f(
+  const o = k((c) => c.setFormInputValue), i = R(e.style, { debug: !1 });
+  return /* @__PURE__ */ p(
     "input",
     {
-      onChange: (d) => o(t, d.target.value),
+      onChange: (c) => o(t, c.target.value),
       "data-id": t,
       "data-name": r,
       "data-type": "EmailInputComponent",
@@ -505,13 +506,13 @@ const ct = v.createContext({}), O = v.createContext(
       type: "email"
     }
   );
-}, bt = ({
+}, Ct = ({
   id: t,
   name: r,
   nodeData: e
 }) => {
   const o = R(e.style);
-  return o.visibility = "hidden", /* @__PURE__ */ f(
+  return o.visibility = "hidden", /* @__PURE__ */ p(
     "input",
     {
       "data-id": t,
@@ -521,21 +522,21 @@ const ct = v.createContext({}), O = v.createContext(
       type: "hidden"
     }
   );
-}, Ct = ({
+}, St = ({
   id: t,
   name: r,
   nodeData: e
 }) => {
-  const o = z((a) => a.setFormInputValue), i = R(e.style, { debug: !1 }), d = z((a) => a.assetsById);
+  const o = k((a) => a.setFormInputValue), i = R(e.style, { debug: !1 }), c = k((a) => a.assetsById);
   return /* @__PURE__ */ it(ut, { children: [
-    /* @__PURE__ */ f(
+    /* @__PURE__ */ p(
       "div",
       {
         style: { ...i, zIndex: 9999, cursor: "pointer" },
         onClick: () => alert("Image picker")
       }
     ),
-    /* @__PURE__ */ f(
+    /* @__PURE__ */ p(
       "img",
       {
         onChange: (a) => o(t, a.target.value),
@@ -543,21 +544,21 @@ const ct = v.createContext({}), O = v.createContext(
         "data-id": t,
         "data-name": r,
         "data-type": "ImageInputComponent",
-        src: d[e.assetId]?.url,
+        src: c[e.assetId]?.url,
         alt: r
       }
     )
   ] });
-}, St = ({
+}, xt = ({
   id: t,
   name: r,
   nodeData: e
 }) => {
-  const o = z((d) => d.setFormInputValue), i = R(e.style, { debug: !1 });
-  return /* @__PURE__ */ f(
+  const o = k((c) => c.setFormInputValue), i = R(e.style, { debug: !1 });
+  return /* @__PURE__ */ p(
     "input",
     {
-      onChange: (d) => o(t, d.target.value),
+      onChange: (c) => o(t, c.target.value),
       "data-id": t,
       "data-name": r,
       "data-type": "PasswordInputComponent",
@@ -566,14 +567,14 @@ const ct = v.createContext({}), O = v.createContext(
       type: "password"
     }
   );
-}, xt = ({
+}, vt = ({
   id: t,
   name: r,
   nodeData: e
 }) => {
-  const o = z((h) => h.setFormInputValue), { onAction: i } = v.useContext(Lt), { patchedNodeData: d } = tt({ id: t, nodeData: e }), a = R(d.style, { debug: !1 });
+  const o = k((g) => g.setFormInputValue), { onAction: i } = I.useContext(ft), { patchedNodeData: c } = et({ id: t, nodeData: e }), a = R(c.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((h) => typeof h == "string" ? { value: h, label: h } : h), [c]);
+  const n = c.data?.value, l = c.data?.options, y = I.useMemo(() => !l || !Array.isArray(l) ? [] : l.map((g) => typeof g == "string" ? { value: g, label: g } : g), [l]);
   return /* @__PURE__ */ it(
     "select",
     {
@@ -582,9 +583,9 @@ const ct = v.createContext({}), O = v.createContext(
       "data-type": "SelectInputComponent",
       value: n ?? "",
       style: a,
-      onChange: async (h) => {
-        const b = h.target.value;
-        if (o(t, b), console.log(`Select changed: ${b}`), typeof i == "function")
+      onChange: async (g) => {
+        const S = g.target.value;
+        if (o(t, S), console.log(`Select changed: ${S}`), typeof i == "function")
           try {
             await i({
               bravo: {
@@ -593,31 +594,32 @@ const ct = v.createContext({}), O = v.createContext(
                 action: {
                   action: "select-change",
                   nodeId: t,
-                  params: { value: b }
-                }
+                  params: { value: S }
+                },
+                componentId: t
               }
             });
           } catch {
           }
       },
       children: [
-        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))
+        y.length === 0 && /* @__PURE__ */ p("option", { value: "", disabled: !0, children: "Select an option..." }),
+        y.map((g) => /* @__PURE__ */ p("option", { value: g.value, children: g.label }, g.value))
       ]
     }
   );
-}, vt = ({
+}, It = ({
   id: t,
   name: r,
   nodeData: e
 }) => {
-  const o = z((d) => d.setFormInputValue), i = R(e.style, {
+  const o = k((c) => c.setFormInputValue), i = R(e.style, {
     debug: !1
   });
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ p(
     "input",
     {
-      onChange: (d) => o(t, d.target.value),
+      onChange: (c) => o(t, c.target.value),
       name: t,
       "data-id": t,
       "data-name": r,
@@ -627,9 +629,9 @@ const ct = v.createContext({}), O = v.createContext(
       type: "text"
     }
   );
-}, It = ({ id: t, name: r, nodeData: e }) => {
+}, wt = ({ id: t, name: r, nodeData: e }) => {
   const o = R(e.style);
-  return /* @__PURE__ */ f(q, { id: t, nodeData: e, children: /* @__PURE__ */ f(
+  return /* @__PURE__ */ p(Y, { id: t, nodeData: e, children: /* @__PURE__ */ p(
     "div",
     {
       "data-id": t,
@@ -639,11 +641,11 @@ const ct = v.createContext({}), O = v.createContext(
       children
     }
   ) });
-}, wt = ({ id: t, name: r, nodeData: e }) => {
+}, At = ({ id: t, name: r, nodeData: e }) => {
   const o = R(e.style, {
     debug: !1
-  }), i = z((d) => d.assetsById);
-  return /* @__PURE__ */ f(q, { id: t, nodeData: e, children: /* @__PURE__ */ f(
+  }), i = k((c) => c.assetsById);
+  return /* @__PURE__ */ p(Y, { id: t, nodeData: e, children: /* @__PURE__ */ p(
     "img",
     {
       "data-id": t,
@@ -654,8 +656,8 @@ const ct = v.createContext({}), O = v.createContext(
       alt: r
     }
   ) });
-}, At = ({ id: t, name: r, nodeData: e }) => {
-  const { patchedNodeData: o } = tt({ id: t, nodeData: e });
+}, Et = ({ id: t, name: r, nodeData: e }) => {
+  const { patchedNodeData: o } = et({ id: t, nodeData: e });
   e = o;
   const i = e.data?.text;
   r && r.includes("Purpose") && console.log("TextComponent Debug:", {
@@ -665,18 +667,18 @@ const ct = v.createContext({}), O = v.createContext(
     style: e.style,
     color: e.style?.color
   });
-  const d = e.style, a = e.fontId ? { ...d, fontId: e.fontId } : d, n = R(a, {
+  const c = e.style, a = e.fontId ? { ...c, fontId: e.fontId } : c, n = R(a, {
     debug: !1
   });
-  n.display = "flex", n.flexDirection = "column", d.verticalPosition && (n.justifyContent = {
+  n.display = "flex", n.flexDirection = "column", c.verticalPosition && (n.justifyContent = {
     "from-top": "flex-start",
     center: "center",
     "from-bottom": "flex-end"
-  }[d.verticalPosition]);
-  const c = i && (i.includes(`
+  }[c.verticalPosition]);
+  const l = i && (i.includes(`
 `) || i.includes("\r"));
   let y;
-  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(
+  return l && n.flexDirection === "column" ? y = i.split(/\r?\n/).filter((g) => g.length > 0).map((g, S) => /* @__PURE__ */ p("div", { style: { lineHeight: "inherit" }, children: g }, S)) : y = i, /* @__PURE__ */ p(Y, { id: t, nodeData: e, children: /* @__PURE__ */ p(
     "div",
     {
       "data-id": t,
@@ -692,82 +694,82 @@ const ct = v.createContext({}), O = v.createContext(
   nodeData: e,
   children: o
 }) => {
-  const i = j(Q), { patchedNodeData: d } = tt({ id: t, nodeData: e });
-  e = d;
-  const a = Gt(e.tags), n = a ? z((I) => I.inputGroups[a.groupName]) : null, c = z((I) => I.statefulSetVariants[t]), y = R(e.style, {
+  const i = N(tt), { patchedNodeData: c } = et({ id: t, nodeData: e });
+  e = c;
+  const a = jt(e.tags), n = a ? k((A) => A.inputGroups[a.groupName]) : null, l = k((A) => A.statefulSetVariants[t]), y = R(e.style, {
     debug: !1
   });
-  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, {
+  let v;
+  a && n !== null ? v = n === r ? "active" : "default" : v = l || e.data.initialState || "default";
+  const g = I.Children.toArray(o).find((A) => I.isValidElement(A) ? A.props?.nodeData?.data?.state === v : !1), S = I.isValidElement(g) ? I.cloneElement(g, {
     _parentStatefulSetId: t,
     _parentInputGroupInfo: a,
     _parentName: r
     // Pass the name so we can identify which element is active
-  }) : h, s = /* @__PURE__ */ f(
+  }) : g, s = /* @__PURE__ */ p(
     "div",
     {
       "data-id": t,
       "data-name": r,
       "data-type": "StatefulSetComponent",
       style: y,
-      children: b
+      children: S
     }
   );
   if (e.type === "component:input-stateful-set")
     return s;
-  const g = v.useContext(lt);
-  return /* @__PURE__ */ f(
-    Q.Provider,
+  const f = I.useContext(lt);
+  return /* @__PURE__ */ p(
+    tt.Provider,
     {
       value: { nodeData: i?.nodeData?.[t] || {} },
-      children: /* @__PURE__ */ f(
+      children: /* @__PURE__ */ p(
         lt.Provider,
         {
-          value: { ...g, statefulSetId: t },
+          value: { ...f, statefulSetId: t },
           children: s
         }
       )
     }
   );
-}, Et = ({
+}, Ft = ({
   id: t,
   name: r,
   nodeData: e,
   children: o,
   _parentStatefulSetId: i,
-  _parentInputGroupInfo: d,
+  _parentInputGroupInfo: c,
   _parentName: a
 }) => {
   const n = R(e.style, {
     debug: !1
-  }), c = {
+  }), l = {
     ...n,
     position: n.position || "relative"
   };
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ p(
     "div",
     {
       "data-id": t,
       "data-name": r,
       "data-type": "StatefulCompoundComponent",
-      style: c,
-      children: /* @__PURE__ */ f(
-        q,
+      style: l,
+      children: /* @__PURE__ */ p(
+        Y,
         {
           id: t,
           nodeData: e,
           _parentStatefulSetId: i,
-          _parentInputGroupInfo: d,
+          _parentInputGroupInfo: c,
           _parentName: a,
           children: o
         }
       )
     }
   );
-}, Ft = ({ id: t, name: r, children: e }) => {
-  j(O);
-  const { dimensions: o, ref: i } = rt(), d = {
+}, Tt = ({ id: t, name: r, children: e }) => {
+  N(V);
+  const { dimensions: o, ref: i } = rt(), c = {
     zIndex: 0,
     flex: 1,
     position: "absolute",
@@ -776,14 +778,14 @@ const ct = v.createContext({}), O = v.createContext(
     width: "100%",
     height: "100%"
   };
-  return /* @__PURE__ */ f(O.Provider, { value: { dimensions: o, isFlex: !1 }, children: /* @__PURE__ */ f(
+  return /* @__PURE__ */ p(V.Provider, { value: { dimensions: o, isFlex: !1 }, children: /* @__PURE__ */ p(
     "div",
     {
       "data-id": t,
       "data-name": r,
       "data-type": "BackgroundContainerComponent",
       ref: i,
-      style: d,
+      style: c,
       children: e
     }
   ) });
@@ -793,57 +795,57 @@ const ct = v.createContext({}), O = v.createContext(
   nodeData: e,
   children: o,
   _arrayItemIndex: i,
-  _arrayItemData: d
+  _arrayItemData: c
 }) => {
   t === "01KB929X1KK5TX0K8VBNP6ZDPG" && console.log(
     `[DEBUG] ContainerComponent ${t} (Hero) FULL nodeData:`,
     JSON.stringify(e, null, 2)
   );
-  const a = j(Q), { patchedNodeData: n, list: c, arrayData: y } = tt({
+  const a = N(tt), { patchedNodeData: n, list: l, arrayData: y } = et({
     id: t,
     nodeData: e
   });
   e = n;
-  const { dimensions: x, ref: h } = rt(), b = R(e.style, {
+  const { dimensions: v, ref: g } = rt(), S = R(e.style, {
     debug: !1
-  }), 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";
+  }), s = !!e.style.layout?.mode, f = e.style.layout?.mode === "HORIZONTAL" ? "row" : "column", A = S.width !== void 0, E = S.height !== void 0, T = N(V), L = T?.isFlex ?? !1, h = T?.flexDirection, x = L && h === "row", O = !L && e.style.positioning, M = e.style.layout?.layoutSizingHorizontal === "FIXED" || e.style.layout?.layoutSizingVertical === "FIXED", j = e.style.layout?.layoutSizingHorizontal === "HUG" || e.style.layout?.layoutSizingVertical === "HUG";
+  if (!A && !x && !(O && (M || j)) && (S.width = "100%"), !E) {
+    const B = !L && e.style.positioning, Z = e.style.layout?.layoutSizingVertical === "FILL";
     if (!(e.style.layout?.layoutSizingVertical === "HUG")) {
-      if (!s) if (k && X && e.style.positioning?.top !== void 0) {
-        const ot = 100 - e.style.positioning.top;
-        b.height = `${ot}%`;
+      if (!s) if (B && Z && e.style.positioning?.top !== void 0) {
+        const D = 100 - e.style.positioning.top;
+        S.height = `${D}%`;
       } else
-        b.height = "100%";
+        S.height = "100%";
     }
   }
-  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 - G - B
+  const K = e.style.layout?.layoutSizingHorizontal || e.style.layout?.layoutSizingVertical, H = e.style.positioning && !s && (K || !0) ? { ...S, position: "absolute" } : S.position === "absolute" ? S : { ...S, position: S.position || "relative" }, U = (B) => typeof B == "number" ? B : typeof B == "string" && B.endsWith("px") && parseFloat(B) || 0, G = U(S.paddingLeft), m = U(S.paddingRight), q = U(S.paddingTop), X = U(S.paddingBottom), W = M && typeof S.width == "number" && typeof S.height == "number" ? {
+    width: S.width - G - m,
+    height: S.height - q - X
   } : {
-    width: x.width - m - et,
-    height: x.height - G - B
+    width: v.width - G - m,
+    height: v.height - q - X
   };
-  if (i != null && c) {
-    const k = c[i];
-    if (k !== void 0) {
-      const X = typeof k == "object" && k !== null ? {
-        nodeData: k,
+  if (i != null && l) {
+    const B = l[i];
+    if (B !== void 0) {
+      const Z = typeof B == "object" && B !== null ? {
+        nodeData: B,
         arrayDataById: a?.arrayDataById,
         textOverridesById: a?.textOverridesById,
         rootData: a?.rootData
-      } : { nodeData: k };
-      return /* @__PURE__ */ f(Q.Provider, { value: X, children: /* @__PURE__ */ f(
-        O.Provider,
+      } : { nodeData: B };
+      return /* @__PURE__ */ p(tt.Provider, { value: Z, children: /* @__PURE__ */ p(
+        V.Provider,
         {
-          value: { dimensions: L, isFlex: s, flexDirection: g },
-          children: /* @__PURE__ */ f(
+          value: { dimensions: W, isFlex: s, flexDirection: f },
+          children: /* @__PURE__ */ p(
             "div",
             {
               "data-id": `${t}:${i}`,
               "data-name": r,
               "data-type": "ContainerComponent",
-              style: V,
+              style: H,
               children: o
             }
           )
@@ -851,89 +853,89 @@ const ct = v.createContext({}), O = v.createContext(
       ) });
     }
   }
-  if (c) {
-    const k = y || c;
-    return zt(() => k.map((J, _) => {
-      const ot = typeof J == "object" && J !== null ? {
+  if (l) {
+    const B = y || l;
+    return Ht(() => B.map((J, nt) => {
+      const D = typeof J == "object" && J !== null ? {
         nodeData: J,
         arrayDataById: a?.arrayDataById,
         textOverridesById: a?.textOverridesById,
         rootData: a?.rootData
       } : { nodeData: J };
-      return /* @__PURE__ */ f(
-        Q.Provider,
+      return /* @__PURE__ */ p(
+        tt.Provider,
         {
-          value: ot,
-          children: /* @__PURE__ */ f(
-            O.Provider,
+          value: D,
+          children: /* @__PURE__ */ p(
+            V.Provider,
             {
-              value: { dimensions: L, isFlex: s, flexDirection: g },
-              children: /* @__PURE__ */ f(
+              value: { dimensions: W, isFlex: s, flexDirection: f },
+              children: /* @__PURE__ */ p(
                 "div",
                 {
-                  "data-id": `${t}:${_}`,
+                  "data-id": `${t}:${nt}`,
                   "data-name": r,
                   "data-type": "ContainerComponent",
-                  style: V,
+                  style: H,
                   children: o
                 }
               )
             }
           )
         },
-        `${t}:${_}`
+        `${t}:${nt}`
       );
-    }), [k, t]);
+    }), [B, t]);
   }
-  let $ = e.actions || [];
-  !Array.isArray($) && typeof $ == "object" && $ !== null && ($ = Object.entries($).map(
-    ([k, X]) => ({
-      event: k,
-      ...typeof X == "object" && X !== null ? X : {}
+  let P = e.actions || [];
+  !Array.isArray(P) && typeof P == "object" && P !== null && (P = Object.entries(P).map(
+    ([B, Z]) => ({
+      event: B,
+      ...typeof Z == "object" && Z !== null ? Z : {}
     })
   ));
-  const K = Array.isArray($) && $.length > 0;
-  return /* @__PURE__ */ f(
-    O.Provider,
+  const z = Array.isArray(P) && P.length > 0;
+  return /* @__PURE__ */ p(
+    V.Provider,
     {
-      value: { dimensions: L, isFlex: s, flexDirection: g },
-      children: /* @__PURE__ */ f(
+      value: { dimensions: W, isFlex: s, flexDirection: f },
+      children: /* @__PURE__ */ p(
         "div",
         {
           "data-id": t,
           "data-name": r,
           "data-type": "ContainerComponent",
-          ref: h,
-          style: V,
-          children: K ? /* @__PURE__ */ f(q, { id: t, nodeData: e, children: o }) : o
+          ref: g,
+          style: H,
+          children: z ? /* @__PURE__ */ p(Y, { id: t, nodeData: e, children: o }) : o
         }
       )
     }
   );
-}, Tt = pt, Pt = ({ id: t, name: r, nodeData: e, children: o }) => {
-  const { dimensions: i, ref: d } = rt(), a = R(e.style, {
+}, Pt = pt, $t = ({ id: t, name: r, nodeData: e, children: o }) => {
+  const { dimensions: i, ref: c } = 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__ */ f(
-    O.Provider,
+  }), n = !!e.style.layout?.mode, l = e.style.layout?.mode === "HORIZONTAL" ? "row" : "column", y = a.position ? a : { ...a, position: "relative" };
+  return /* @__PURE__ */ p(
+    V.Provider,
     {
-      value: { dimensions: i, isFlex: n, flexDirection: c },
-      children: /* @__PURE__ */ f(
+      value: { dimensions: i, isFlex: n, flexDirection: l },
+      children: /* @__PURE__ */ p(
         "div",
         {
           "data-id": t,
           "data-name": r,
           "data-type": "TopBarContainerComponent",
-          ref: d,
+          ref: c,
           style: y,
           children: o
         }
       )
     }
   );
-}, jt = ({ id: t, name: r, nodeData: e, children: o }) => {
+}, Ut = ({ id: t, name: r, nodeData: e, children: o }) => {
   const i = R(e.style, { debug: !1 });
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ p(
     "div",
     {
       "data-id": t,
@@ -943,7 +945,7 @@ const ct = v.createContext({}), O = v.createContext(
       children: o
     }
   );
-}, $t = ({ id: t, name: r, nodeData: e, children: o }) => /* @__PURE__ */ f(
+}, Wt = ({ id: t, name: r, nodeData: e, children: o }) => /* @__PURE__ */ p(
   "div",
   {
     "data-id": t,
@@ -952,11 +954,11 @@ const ct = v.createContext({}), O = v.createContext(
     style: R(e.style),
     children: o
   }
-), Wt = ({ id: t, name: r, nodeData: e, children: o }) => {
+), Bt = ({ id: t, name: r, nodeData: e, children: o }) => {
   const i = R(e.style, {
     debug: !1
   });
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ p(
     "div",
     {
       "data-id": t,
@@ -971,299 +973,313 @@ 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), x = j(ct), h = j(Ot), [b, s] = v.useState({
+  const { dimensions: i, ref: c } = rt(), a = I.useRef(null), n = I.useRef(null), l = I.useRef(!1), y = I.useRef(null), v = N(ct), g = N(Mt), { onAction: S } = N(ft), [s, f] = I.useState({
     currentIndex: void 0,
     onIndexChange: void 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;
-    typeof u == "number" && typeof p == "number" && p > u && (M = !0);
+  }), [A, E] = I.useState(0), T = I.useRef(null), { patchedNodeData: L } = et({ id: t, nodeData: e });
+  e = L;
+  const h = e.data?.params || {}, x = h.infinite === !0, O = h.automatic === !0;
+  let j = Array.isArray(e.tags) && e.tags.some((d) => d.includes("container:slider:vertical")) || e.name && e.name.includes("container:slider:vertical");
+  if (!j && h.animation === "default") {
+    const d = e.style?.width, u = e.style?.height;
+    typeof d == "number" && typeof u == "number" && u > d && (j = !0);
   }
-  const Z = M ? "vertical" : E.animation === "default" ? "horizontal" : E.animation || "horizontal", H = R(e.style, {
+  const K = j ? "vertical" : h.animation === "default" ? "horizontal" : h.animation || "horizontal", F = R(e.style, {
     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 = j(Q), m = v.useMemo(() => {
-    const u = [];
-    return v.Children.forEach(o, (p) => {
-      if (p == null) return;
-      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}`,
+  }), H = F.width !== void 0, U = F.height !== void 0;
+  H || (F.width = "100%"), U || (F.height = "100%"), F.position || (F.position = "relative");
+  const G = N(tt), m = I.useMemo(() => {
+    const d = [];
+    return I.Children.forEach(o, (u) => {
+      if (u == null) return;
+      const w = u?.props || {}, C = w.nodeData || {};
+      if (Array.isArray(C?.tags) && (C.tags.includes("encore:data:array") || C.tags.includes("bravo:data:array")) && w.id && G) {
+        const $ = G?.arrayDataById && G.arrayDataById[w.id] && Array.isArray(G.arrayDataById[w.id]) ? G.arrayDataById[w.id] : null;
+        $ && $.length > 0 ? $.forEach((Q, ot) => {
+          d.push(
+            I.cloneElement(u, {
+              key: `${w.id}:${ot}`,
               // ContainerComponent will use this to know which item to render
-              _arrayItemIndex: nt,
-              _arrayItemData: D
+              _arrayItemIndex: ot,
+              _arrayItemData: Q
             })
           );
-        }) : u.push(p);
+        }) : d.push(u);
       } else
-        u.push(p);
-    }), u;
-  }, [o, t, N]), et = v.useMemo(() => {
-    if (!l || m.length === 0)
+        d.push(u);
+    }), d;
+  }, [o, t, G]), q = I.useMemo(() => {
+    if (!x || m.length === 0)
       return m;
-    const u = m[0], p = m[m.length - 1];
+    const d = m[0], u = m[m.length - 1];
     return [
-      v.cloneElement(p, {
-        key: `clone-last-${p.key || p.props.id}`
+      I.cloneElement(u, {
+        key: `clone-last-${u.key || u.props.id}`
       }),
       ...m,
-      v.cloneElement(u, {
-        key: `clone-first-${u.key || u.props.id}`
+      I.cloneElement(d, {
+        key: `clone-first-${d.key || d.props.id}`
       })
     ];
-  }, [m, l]), G = v.useMemo(() => {
+  }, [m, x]), X = I.useMemo(() => {
     if (m.length === 0) return { width: 0, height: 0 };
-    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(() => {
+    const u = m[0]?.props?.nodeData?.style, w = v.scaleFactor || 1;
+    let C = 0, b = 0;
+    return u?.layout?.layoutSizingHorizontal === "FIXED" && u?.layout?.size?.x ? C = u.layout.size.x * w : C = i.width || 0, u?.layout?.layoutSizingVertical === "FIXED" && u?.layout?.size?.y ? b = u.layout.size.y * w : b = i.height || 0, { width: C, height: b };
+  }, [m, i.width, i.height, v.scaleFactor]), W = X.width, P = X.height, z = K === "vertical", _ = I.useCallback(() => {
     if (!a.current || m.length === 0)
       return 0;
-    const u = a.current;
-    if ($) {
-      if (L === 0) return 0;
-      const p = u.scrollTop;
-      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;
+    const d = a.current;
+    if (z) {
+      if (P === 0) return 0;
+      const u = d.scrollTop;
+      if (x) {
+        const C = u - P;
+        let b = Math.round(C / P);
+        return b < 0 && (b = 0), b >= m.length && (b = m.length - 1), b;
       } else {
-        const w = Math.round(p / L);
+        const w = Math.round(u / P);
         return w < 0 ? 0 : w >= m.length ? m.length - 1 : w;
       }
     } else {
-      if (B === 0) return 0;
-      const p = u.scrollLeft;
-      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;
+      if (W === 0) return 0;
+      const u = d.scrollLeft;
+      if (x) {
+        const C = u - W;
+        let b = Math.round(C / W);
+        return b < 0 && (b = 0), b >= m.length && (b = m.length - 1), b;
       } else {
-        const w = Math.round(p / B);
+        const w = Math.round(u / W);
         return w < 0 ? 0 : w >= m.length ? m.length - 1 : w;
       }
     }
-  }, [l, m.length, B, L, $]), Y = v.useCallback(
-    (u, p = !0) => {
+  }, [x, m.length, W, P, z]), B = I.useCallback(
+    (d, u = !0) => {
       if (!a.current || m.length === 0) return;
       const w = a.current;
-      if ($) {
-        let S;
-        l ? S = L + u * L : S = u * L, w.scrollTo({
-          top: S,
-          behavior: p ? "smooth" : "auto"
+      if (z) {
+        let C;
+        x ? C = P + d * P : C = d * P, w.scrollTo({
+          top: C,
+          behavior: u ? "smooth" : "auto"
         });
       } else {
-        let S;
-        l ? S = B + u * B : S = u * B, w.scrollTo({
-          left: S,
-          behavior: p ? "smooth" : "auto"
+        let C;
+        x ? C = W + d * W : C = d * W, w.scrollTo({
+          left: C,
+          behavior: u ? "smooth" : "auto"
         });
       }
     },
-    [B, L, l, m.length, $]
-  ), k = v.useCallback(() => {
-    if (!l || !a.current || m.length === 0) return;
-    const u = a.current, p = 1;
-    if ($) {
-      if (L === 0) return;
-      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);
+    [W, P, x, m.length, z]
+  ), Z = I.useCallback(() => {
+    if (!x || !a.current || m.length === 0) return;
+    const d = a.current, u = 1;
+    if (z) {
+      if (P === 0) return;
+      const w = d.scrollTop, C = P, b = C, $ = b + m.length * C;
+      w >= $ - u ? d.scrollTop = b : w <= u && (d.scrollTop = $ - C);
     } else {
-      if (B === 0) return;
-      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);
+      if (W === 0) return;
+      const w = d.scrollLeft, C = W, b = C, $ = b + m.length * C;
+      w >= $ - u ? d.scrollLeft = b : w <= u && (d.scrollLeft = $ - C);
     }
-  }, [l, m.length, B, L, $]);
-  v.useEffect(() => {
-    if (!W || m.length <= 1 || B === 0) return;
-    const u = () => {
-      if (c.current || !a.current) return;
-      const p = a.current;
-      if ($) {
-        if (L === 0) return;
-        const w = p.scrollTop, S = L;
-        let C;
-        if (l) {
-          const nt = w - S;
-          C = Math.round(nt / S), C < 0 && (C = 0), C >= m.length && (C = m.length - 1);
+  }, [x, m.length, W, P, z]);
+  I.useEffect(() => {
+    if (!O || m.length <= 1 || W === 0) return;
+    const d = () => {
+      if (l.current || !a.current) return;
+      const u = a.current;
+      if (z) {
+        if (P === 0) return;
+        const w = u.scrollTop, C = P;
+        let b;
+        if (x) {
+          const ot = w - C;
+          b = Math.round(ot / C), b < 0 && (b = 0), b >= m.length && (b = m.length - 1);
         } else
-          C = Math.round(w / S);
-        let F = C + 1;
-        if (l) {
-          F >= m.length && (F = 0);
-          const D = S;
-          p.scrollTo({
-            top: D + F * S,
+          b = Math.round(w / C);
+        let $ = b + 1;
+        if (x) {
+          $ >= m.length && ($ = 0);
+          const Q = C;
+          u.scrollTo({
+            top: Q + $ * C,
             behavior: "smooth"
           });
         } else
-          F >= m.length && (F = 0), Y(F);
+          $ >= m.length && ($ = 0), B($);
       } else {
-        if (B === 0) return;
-        const w = p.scrollLeft, S = B;
-        let C;
-        if (l) {
-          const nt = w - S;
-          C = Math.round(nt / S), C < 0 && (C = 0), C >= m.length && (C = m.length - 1);
+        if (W === 0) return;
+        const w = u.scrollLeft, C = W;
+        let b;
+        if (x) {
+          const ot = w - C;
+          b = Math.round(ot / C), b < 0 && (b = 0), b >= m.length && (b = m.length - 1);
         } else
-          C = Math.round(w / S);
-        let F = C + 1;
-        if (l) {
-          F >= m.length && (F = 0);
-          const D = S;
-          p.scrollTo({
-            left: D + F * S,
+          b = Math.round(w / C);
+        let $ = b + 1;
+        if (x) {
+          $ >= m.length && ($ = 0);
+          const Q = C;
+          u.scrollTo({
+            left: Q + $ * C,
             behavior: "smooth"
           });
         } else
-          F >= m.length && (F = 0), Y(F);
+          $ >= m.length && ($ = 0), B($);
       }
     };
-    return n.current = setInterval(u, 4e3), () => {
+    return n.current = setInterval(d, 4e3), () => {
       n.current && (clearInterval(n.current), n.current = null);
     };
   }, [
-    W,
+    O,
     m.length,
-    l,
-    B,
-    L,
-    $,
-    Y
+    x,
+    W,
+    P,
+    z,
+    B
   ]);
-  const X = v.useCallback(() => {
-    c.current = !0, y.current && clearTimeout(y.current), y.current = setTimeout(() => {
-      c.current = !1;
+  const J = I.useCallback(() => {
+    l.current = !0, y.current && clearTimeout(y.current), y.current = setTimeout(() => {
+      l.current = !1;
     }, 3e3);
-  }, []), J = v.useRef(b);
-  v.useEffect(() => {
-    J.current = b;
-  }, [b]);
-  const _ = v.useCallback(
-    (u) => {
-      if (A.current === u) return;
-      A.current = u;
-      const p = J.current;
-      p.currentIndex === void 0 && I(u), p.onIndexChange && p.onIndexChange(u);
+  }, []), nt = I.useRef(s);
+  I.useEffect(() => {
+    nt.current = s;
+  }, [s]);
+  const D = I.useCallback(
+    (d) => {
+      if (T.current === d) return;
+      T.current = d;
+      const u = nt.current;
+      if (u.currentIndex === void 0 && E(d), u.onIndexChange && u.onIndexChange(d), typeof S == "function")
+        try {
+          S({
+            bravo: {
+              cancel: () => {
+              },
+              action: {
+                action: "index-change",
+                params: { index: d }
+              },
+              componentId: t
+            }
+          });
+        } catch {
+        }
     },
-    []
-    // Empty deps - we use ref to access latest controlProps
+    [S, t]
+    // Depend on onAction to ensure we call the latest version
   );
-  v.useEffect(() => {
-    const u = a.current;
-    if (!u) return;
-    let p = null;
+  I.useEffect(() => {
+    const d = a.current;
+    if (!d) return;
+    let u = null;
     const w = () => {
-      X(), l ? (p !== null && cancelAnimationFrame(p), p = requestAnimationFrame(() => {
-        k();
-        const F = K();
-        _(F);
-      })) : (p !== null && cancelAnimationFrame(p), p = requestAnimationFrame(() => {
-        const F = K();
-        _(F);
+      J(), x ? (u !== null && cancelAnimationFrame(u), u = requestAnimationFrame(() => {
+        Z();
+        const $ = _();
+        D($);
+      })) : (u !== null && cancelAnimationFrame(u), u = requestAnimationFrame(() => {
+        const $ = _();
+        D($);
       }));
-    }, S = () => X(), C = () => X();
-    return u.addEventListener("scroll", w, { passive: !0 }), u.addEventListener("touchstart", S, {
+    }, C = () => J(), b = () => J();
+    return d.addEventListener("scroll", w, { passive: !0 }), d.addEventListener("touchstart", C, {
       passive: !0
-    }), u.addEventListener("mousedown", C), () => {
-      u.removeEventListener("scroll", w), u.removeEventListener("touchstart", S), u.removeEventListener("mousedown", C), y.current && clearTimeout(y.current), p !== null && cancelAnimationFrame(p);
+    }), d.addEventListener("mousedown", b), () => {
+      d.removeEventListener("scroll", w), d.removeEventListener("touchstart", C), d.removeEventListener("mousedown", b), y.current && clearTimeout(y.current), u !== null && cancelAnimationFrame(u);
     };
   }, [
-    l,
-    X,
-    k,
-    K,
-    _
-  ]), v.useEffect(() => {
-    if (h) {
-      const u = h.getControlProps(t);
-      u && u !== b && s(u);
+    x,
+    J,
+    Z,
+    _,
+    D
+  ]), I.useEffect(() => {
+    if (g) {
+      const d = g.getControlProps(t);
+      d && d !== s && f(d);
     }
-  }, [t, h, b]), v.useEffect(() => {
-    if (b.currentIndex !== void 0 && a.current && m.length > 0 && B > 0) {
-      const u = Math.max(
+  }, [t, g, s]), I.useEffect(() => {
+    if (s.currentIndex !== void 0 && a.current && m.length > 0 && W > 0) {
+      const d = Math.max(
         0,
-        Math.min(b.currentIndex, m.length - 1)
-      ), p = K();
-      u !== p && Y(u, !0);
+        Math.min(s.currentIndex, m.length - 1)
+      ), u = _();
+      d !== u && B(d, !0);
     }
   }, [
-    b.currentIndex,
+    s.currentIndex,
     m.length,
     m.length,
+    W,
+    P,
+    z,
     B,
-    L,
-    $,
-    Y,
-    K
-  ]), v.useEffect(() => {
-    if (l && a.current && m.length > 0 && m.length > 0 && ($ ? L > 0 : B > 0)) {
-      const u = $ ? L : B;
+    _
+  ]), I.useEffect(() => {
+    if (x && a.current && m.length > 0 && m.length > 0 && (z ? P > 0 : W > 0)) {
+      const d = z ? P : W;
       setTimeout(() => {
-        a.current && ($ ? a.current.scrollTop = u : a.current.scrollLeft = u);
+        a.current && (z ? a.current.scrollTop = d : a.current.scrollLeft = d);
       }, 0);
     }
-  }, [l, m.length, B, L, $]), v.useEffect(() => {
-    if (!h) return;
-    const { registerContainer: u, unregisterContainer: p } = h;
+  }, [x, m.length, W, P, z]), I.useEffect(() => {
+    if (!g) return;
+    const { registerContainer: d, unregisterContainer: u } = g;
     return () => {
     };
   }, [
     t,
-    h?.registerContainer,
-    h?.unregisterContainer,
+    g?.registerContainer,
+    g?.unregisterContainer,
     // controlProps, // REMOVED to break infinite loop
-    Y,
-    K
+    B,
+    _
   ]);
-  const ot = {
+  const kt = {
     display: "flex",
-    flexDirection: $ ? "column" : "row",
-    overflowX: $ ? "hidden" : "auto",
-    overflowY: $ ? "auto" : "hidden",
-    scrollSnapType: $ ? "y mandatory" : "x mandatory",
+    flexDirection: z ? "column" : "row",
+    overflowX: z ? "hidden" : "auto",
+    overflowY: z ? "auto" : "hidden",
+    scrollSnapType: z ? "y mandatory" : "x mandatory",
     scrollBehavior: "smooth",
     width: "100%",
     height: "100%",
     WebkitOverflowScrolling: "touch"
     // Smooth scrolling on iOS
-  }, kt = {
+  }, zt = {
     flexShrink: 0,
     scrollSnapAlign: "start",
-    width: G.width > 0 ? G.width : void 0,
-    height: G.height > 0 ? G.height : void 0,
+    width: X.width > 0 ? X.width : void 0,
+    height: X.height > 0 ? X.height : void 0,
     position: "relative"
   };
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ p(
     "div",
     {
       "data-id": t,
       "data-name": r,
       "data-type": "SliderComponent",
-      ref: d,
-      style: H,
-      children: /* @__PURE__ */ f("div", { ref: a, style: ot, children: et.map((u, p) => /* @__PURE__ */ f(
-        O.Provider,
+      ref: c,
+      style: F,
+      children: /* @__PURE__ */ p("div", { ref: a, style: kt, children: q.map((d, u) => /* @__PURE__ */ p(
+        V.Provider,
         {
           value: {
             dimensions: {
-              width: G.width,
-              height: G.height
+              width: X.width,
+              height: X.height
             },
             isFlex: !1
           },
-          children: /* @__PURE__ */ f("div", { style: kt, children: u })
+          children: /* @__PURE__ */ p("div", { style: zt, children: d })
         },
-        u.key || `slide-${p}`
+        d.key || `slide-${u}`
       )) })
     }
   );
@@ -1279,15 +1295,15 @@ 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 } = 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 && 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 };
+}, Lt = ({ id: t, name: r, nodeData: e, children: o }) => {
+  const { dimensions: i, ref: c } = rt(), { componentId: a } = N(lt), n = N(V), l = e.style.originalSize?.[0] || 1, y = e.style.originalSize?.[1] || 1, v = n?.dimensions?.width, g = n?.dimensions?.height, S = window.innerWidth, s = window.innerHeight, f = v && v > 0 && v < S * 0.8;
+  let A, E;
+  i.width > 0 && i.height > 0 ? (A = i.width, E = i.height) : f && v && g || v && g && v > 0 && g > 0 ? (A = v, E = g) : (A = S, E = s);
+  const L = { scaleFactor: Math.min(A / l, E / y) || 1 };
   if (a) {
-    const P = Rt(o, a);
-    return P ? /* @__PURE__ */ f(ct.Provider, { value: E, children: /* @__PURE__ */ f(
-      O.Provider,
+    const F = Rt(o, a);
+    return F ? /* @__PURE__ */ p(ct.Provider, { value: L, children: /* @__PURE__ */ p(
+      V.Provider,
       {
         value: {
           dimensions: {
@@ -1295,14 +1311,14 @@ const ct = v.createContext({}), O = v.createContext(
             height: "100%"
           }
         },
-        children: P
+        children: F
       }
     ) }) : (console.warn(`Child with id "${a}" not found`), null);
   }
-  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;
+  const h = Array.isArray(o) ? o : [o], { scrollableChildren: x, nonScrollableChildren: O } = h.reduce(
+    (F, H) => {
+      const G = H.props.nodeData.type === "container:top-bar" ? "nonScrollableChildren" : "scrollableChildren";
+      return F[G].push(H), F;
     },
     {
       scrollableChildren: [],
@@ -1311,19 +1327,19 @@ const ct = v.createContext({}), O = v.createContext(
   );
   let M = e.style?.layout?.mode;
   if (!M && t === "01KASW494V02Y8P5JVWV5XK62X" && (console.log("🔧 PATCHING missing layout for page", t), M = "HORIZONTAL"), !M && o) {
-    const P = Array.isArray(o) ? o : [o];
-    let V = 0, N = 0;
-    P.forEach((et) => {
-      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})`
+    const F = Array.isArray(o) ? o : [o];
+    let H = 0, U = 0;
+    F.forEach((m) => {
+      const q = m?.props?.nodeData?.style?.width;
+      q && (H += q, q < 99 && U++);
+    }), U > 0 && H >= 99 && (console.log(
+      `[PATCH] Detected HORIZONTAL WRAP layout for page ${t} (Partial width children: ${U}, Total width: ${H})`
     ), 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");
   }
-  const Z = M === "HORIZONTAL" ? "row" : "column", H = U.some(
-    (P) => P?.props?.nodeData?.type !== "container:background"
+  const j = M === "HORIZONTAL" ? "row" : "column", K = O.some(
+    (F) => F?.props?.nodeData?.type !== "container:background"
   );
-  return /* @__PURE__ */ f(ct.Provider, { value: E, children: /* @__PURE__ */ it(
+  return /* @__PURE__ */ p(ct.Provider, { value: L, children: /* @__PURE__ */ it(
     "div",
     {
       style: {
@@ -1332,20 +1348,20 @@ const ct = v.createContext({}), O = v.createContext(
         position: "relative",
         overflow: "hidden",
         // Only use flex if we have non-background nonScrollableChildren (like top-bar)
-        ...H ? {
+        ...K ? {
           display: "flex",
-          flexDirection: Z,
+          flexDirection: j,
           gap: 0,
           rowGap: 0,
           columnGap: 0
         } : {}
       },
-      ref: d,
+      ref: c,
       children: [
-        U.filter(
-          (P) => P?.props?.nodeData?.type === "container:background"
-        ).map((P, V) => /* @__PURE__ */ f(
-          O.Provider,
+        O.filter(
+          (F) => F?.props?.nodeData?.type === "container:background"
+        ).map((F, H) => /* @__PURE__ */ p(
+          V.Provider,
           {
             value: {
               dimensions: {
@@ -1353,14 +1369,14 @@ const ct = v.createContext({}), O = v.createContext(
                 height: i.height
               }
             },
-            children: P
+            children: F
           },
-          `bg-${V}`
+          `bg-${H}`
         )),
-        H && U.filter(
-          (P) => P?.props?.nodeData?.type !== "container:background"
-        ).map((P, V) => /* @__PURE__ */ f(
-          O.Provider,
+        K && O.filter(
+          (F) => F?.props?.nodeData?.type !== "container:background"
+        ).map((F, H) => /* @__PURE__ */ p(
+          V.Provider,
           {
             value: {
               dimensions: {
@@ -1368,11 +1384,11 @@ const ct = v.createContext({}), O = v.createContext(
                 height: i.height
               }
             },
-            children: P
+            children: F
           },
-          `non-scroll-${V}`
+          `non-scroll-${H}`
         )),
-        /* @__PURE__ */ f(O.Provider, { value: { dimensions: i }, children: /* @__PURE__ */ f(
+        /* @__PURE__ */ p(V.Provider, { value: { dimensions: i }, children: /* @__PURE__ */ p(
           "div",
           {
             "data-id": t,
@@ -1380,80 +1396,80 @@ const ct = v.createContext({}), O = v.createContext(
             "data-type": "PageComponent",
             style: {
               position: "relative",
-              ...H ? {
+              ...K ? {
                 flex: 1,
-                ...Z === "row" ? { alignSelf: "stretch" } : {}
+                ...j === "row" ? { alignSelf: "stretch" } : {}
                 // Removed height: "100%" to allow HUG containers to size based on content
               } : {
                 width: "100%"
                 // Removed height: "100%" to allow HUG containers to size based on content
               },
               // Remove overflow: auto in horizontal mode as it causes height collapse
-              ...Z === "column" && { overflow: "auto" },
+              ...j === "column" && { overflow: "auto" },
               ...R(e.style, {
                 debug: !1
               })
             },
-            children: W
+            children: x
           }
         ) })
       ]
     }
   ) });
-}, Dt = {
-  WebViewComponent: ft,
-  ColorComponent: ht,
-  GradientComponent: gt,
-  ImageComponent: mt,
-  EmailInputComponent: yt,
-  HiddenInputComponent: bt,
-  ImageInputComponent: Ct,
-  PasswordInputComponent: St,
-  SelectInputComponent: xt,
-  TextInputComponent: vt,
-  LottieComponent: It,
-  SvgComponent: wt,
-  TextComponent: At,
+}, Qt = {
+  WebViewComponent: ht,
+  ColorComponent: gt,
+  GradientComponent: mt,
+  ImageComponent: yt,
+  EmailInputComponent: bt,
+  HiddenInputComponent: Ct,
+  ImageInputComponent: St,
+  PasswordInputComponent: xt,
+  SelectInputComponent: vt,
+  TextInputComponent: It,
+  LottieComponent: wt,
+  SvgComponent: At,
+  TextComponent: Et,
   StatefulSetComponent: dt,
-  StatefulCompoundComponent: Et,
-  BackgroundContainerComponent: Ft,
+  StatefulCompoundComponent: Ft,
+  BackgroundContainerComponent: Tt,
   ContainerComponent: pt,
-  CompoundComponent: Tt,
-  TopBarContainerComponent: Pt,
-  DefaultLayerComponent: jt,
-  TabsMenuComponent: $t,
-  MenuSideComponent: Wt,
+  CompoundComponent: Pt,
+  TopBarContainerComponent: $t,
+  DefaultLayerComponent: Ut,
+  TabsMenuComponent: Wt,
+  MenuSideComponent: Bt,
   SliderComponent: at,
-  PageComponent: Bt,
+  PageComponent: Lt,
   // Type string mappings for dynamically loaded components
-  "menu:side": Wt,
-  "page:default": Bt,
-  "container:background": Ft,
+  "menu:side": Bt,
+  "page:default": Lt,
+  "container:background": Tt,
   "container:default": pt,
-  "container:top-bar": Pt,
+  "container:top-bar": $t,
   "container:slider": at,
-  "component:text": At,
-  "component:color": ht,
-  "component:gradient": gt,
-  "component:image": mt,
-  "component:svg": wt,
-  "component:compound": Tt,
+  "component:text": Et,
+  "component:color": gt,
+  "component:gradient": mt,
+  "component:image": yt,
+  "component:svg": At,
+  "component:compound": Pt,
   "component:input-stateful-set": dt,
   "component:stateful-set": dt,
-  "component:stateful-compound": Et,
+  "component:stateful-compound": Ft,
   "component:slider": at,
-  "component:webview": ft,
-  "component:lottie": It,
-  "component:email-input": yt,
-  "component:text-input": vt,
-  "component:password-input": St,
-  "component:select-input": xt,
-  "component:image-input": Ct,
-  "component:hidden-input": bt,
-  "component:tabs-menu": $t,
+  "component:webview": ht,
+  "component:lottie": wt,
+  "component:email-input": bt,
+  "component:text-input": It,
+  "component:password-input": xt,
+  "component:select-input": vt,
+  "component:image-input": St,
+  "component:hidden-input": Ct,
+  "component:tabs-menu": Wt,
   ContainerSliderComponent: at
 };
 export {
-  Dt as default
+  Qt as default
 };
 //# sourceMappingURL=components.js.map