@bravostudioai/react 0.1.18 → 0.1.22

package/dist/components.js

@@ -1,12 +1,12 @@
 import { jsx as p, jsxs as it, Fragment as ut } from "react/jsx-runtime";
-import v, { useContext as N, useMemo as Ht, useState as Vt, useCallback as Nt } from "react";
+import x, { 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 Ot from "axios";
-import ht from "./contexts/EncoreActionContext.js";
+import ft from "./contexts/EncoreActionContext.js";
 import Mt from "./contexts/EncoreRepeatingContainerContext.js";
-const ct = v.createContext({}), V = v.createContext(
+const ct = x.createContext({}), V = x.createContext(
   {}
 ), st = (t) => t.replace(/#(\w{2})(\w{6})/, "#$2$1"), Gt = (t) => t.slice(1, 3) === "00", jt = (t) => {
   if (!Array.isArray(t)) return null;
@@ -15,8 +15,8 @@ const ct = v.createContext({}), V = v.createContext(
   const e = r.split(":");
   return e.length >= 3 ? { type: e[1], groupName: e[2] } : null;
 }, rt = () => {
-  const [t, r] = Vt({ width: 0, height: 0 }), e = v.useRef(null);
-  return v.useEffect(() => {
+  const [t, r] = Vt({ width: 0, height: 0 }), e = x.useRef(null);
+  return x.useEffect(() => {
     if (!e.current) return;
     const o = e.current, i = () => {
       const { width: n, height: m } = o.getBoundingClientRect();
@@ -27,8 +27,8 @@ const ct = v.createContext({}), V = v.createContext(
     });
     const l = new ResizeObserver((n) => {
       for (const m of n) {
-        const s = m.contentRect;
-        r({ width: s.width, height: s.height });
+        const a = m.contentRect;
+        r({ width: a.width, height: a.height });
       }
     });
     return l.observe(o), () => l.disconnect();
@@ -38,56 +38,52 @@ const ct = v.createContext({}), V = v.createContext(
     width: window.innerWidth,
     height: window.innerHeight
   }, l = Nt(
-    (a) => (o.dimensions?.width ?? 0) * 0.01 * a,
+    (s) => (o.dimensions?.width ?? 0) * 0.01 * s,
     [o.dimensions?.width]
   ), n = {};
   r = { debug: !1, ...r };
-  const m = k((a) => a.fontsById || {});
-  if (k((a) => a.fontsByIdFull || {}), !t || !t) return;
-  const s = o.dimensions?.width ?? i.width, y = o.dimensions?.height ?? i.height;
-  if (t.layout?.layoutSizingHorizontal || t.layout?.layoutSizingVertical || (t.width && s > 0 && (n.width = t.width * s * 0.01), t.aspectRatio && t.width ? s > 0 && (n.height = t.width * s * 0.01 / t.aspectRatio) : t.height && y > 0 && (n.height = t.height * y * 0.01)), !(o?.isFlex ?? !1) && t.positioning) {
-    const a = t.layout?.layoutSizingHorizontal === "FIXED" || t.layout?.layoutSizingVertical === "FIXED", u = a && t.positioning.top < 0 ? 0 : t.positioning.top, R = a && t.positioning.left < 0 ? 0 : t.positioning.left;
+  const m = k((s) => s.fontsById || {});
+  if (k((s) => s.fontsByIdFull || {}), !t || !t) return;
+  const a = o.dimensions?.width ?? i.width, y = o.dimensions?.height ?? i.height;
+  if (t.layout?.layoutSizingHorizontal || t.layout?.layoutSizingVertical || (t.width && a > 0 && (n.width = t.width * a * 0.01), t.aspectRatio && t.width ? a > 0 && (n.height = t.width * a * 0.01 / t.aspectRatio) : t.height && y > 0 && (n.height = t.height * y * 0.01)), !(o?.isFlex ?? !1) && t.positioning) {
+    const s = t.layout?.layoutSizingHorizontal === "FIXED" || t.layout?.layoutSizingVertical === "FIXED", u = s && t.positioning.top < 0 ? 0 : t.positioning.top, R = s && t.positioning.left < 0 ? 0 : t.positioning.left;
     let w = !1;
-    if (t.horizontalPosition === "center" && (w = !0), !w && a && t.layout?.layoutSizingHorizontal === "FIXED" && t.layout?.size?.x) {
-      const B = t.layout.size.x, z = e.scaleFactor ?? 1, f = B * z, S = o?.dimensions?.width;
-      S && typeof S == "number" && S > 0 && f / S >= 0.95 && R >= 15 && R <= 35 && (w = !0);
-    }
-    n.top = `${u}%`;
-    const x = !!t.inset;
+    t.horizontalPosition === "center" && (w = !0), n.top = `${u}%`;
+    const S = !!t.inset;
     if (w) {
-      if (x) {
-        const B = String(t.inset).split(/\s+/);
-        B.length === 3 ? n.inset = `${B[0]} 50% ${B[2]} auto` : B.length === 4 && (n.inset = `${B[0]} 50% ${B[2]} auto`), delete n.left, delete n.right;
+      if (S) {
+        const W = String(t.inset).split(/\s+/);
+        W.length === 3 ? n.inset = `${W[0]} 50% ${W[2]} auto` : W.length === 4 && (n.inset = `${W[0]} 50% ${W[2]} auto`), delete n.left, delete n.right;
       } else
         n.left = "50%", n.right = "auto";
       n.transform = "translateX(-50%)";
     } else
-      x ? n.inset = t.inset : n.left = `${R}%`;
-    a ? (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.inset = t.inset : n.left = `${R}%`;
+    s ? (n.right = "auto", n.bottom = "auto") : (t.positioning.bottom !== void 0 && (n.bottom = `${t.positioning.bottom}%`), t.positioning.right !== void 0 && (n.right = `${t.positioning.right}%`)), n.position = "absolute";
   }
   if (t.layout?.padding) {
-    const a = e.scaleFactor ?? 1, u = t.layout.padding;
-    u.top !== void 0 && (n.paddingTop = u.top * a), u.right !== void 0 && (n.paddingRight = u.right * a), u.bottom !== void 0 && (n.paddingBottom = u.bottom * a), u.left !== void 0 && (n.paddingLeft = u.left * a);
+    const s = e.scaleFactor ?? 1, u = t.layout.padding;
+    u.top !== void 0 && (n.paddingTop = u.top * s), u.right !== void 0 && (n.paddingRight = u.right * s), u.bottom !== void 0 && (n.paddingBottom = u.bottom * s), u.left !== void 0 && (n.paddingLeft = u.left * s);
   }
   if (t.layout?.mode) {
     n.display = "flex";
-    const a = (B) => B ? {
+    const s = (W) => W ? {
       MIN: "flex-start",
       MAX: "flex-end",
       CENTER: "center",
       SPACE_BETWEEN: "space-between",
       SPACE_AROUND: "space-around",
       SPACE_EVENLY: "space-evenly"
-    }[B] || B.toLowerCase().replace(/_/g, "-") : void 0;
-    t.layout.mode == "HORIZONTAL" ? (n.flexDirection = "row", t.layout.flexWrap && (n.flexWrap = t.layout.flexWrap), n.justifyContent = a(
+    }[W] || W.toLowerCase().replace(/_/g, "-") : void 0;
+    t.layout.mode == "HORIZONTAL" ? (n.flexDirection = "row", t.layout.flexWrap && (n.flexWrap = t.layout.flexWrap), n.justifyContent = s(
       t.layout.primaryAxisAlignItems
-    ), n.alignItems = t.layout.counterAxisAlignItems) : (n.flexDirection = "column", n.justifyContent = a(
+    ), 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 u = t.layout.itemSpacing, R = e.scaleFactor ?? 1, x = t.layout.primaryAxisAlignItems === "SPACE_BETWEEN" ? 0 : (u !== void 0 ? u : 0) * R;
-    n.gap = x === 0 ? "0px" : `${x}px`, n.rowGap = x === 0 ? "0px" : `${x}px`, n.columnGap = x === 0 ? "0px" : `${x}px`, (n.flexWrap === "wrap" || n.flexWrap === "wrap-reverse") && (n.alignContent = "flex-start"), r.debug || t.layout?.mode === "HORIZONTAL" && u === 0 ? console.log("[useEncoreStyle] Setting gap properties:", {
+    ), n.alignItems = t.layout.counterAxisAlignItems), n.flexGrow = t.layout.grow, t.layout.wrap === "WRAP" || t.layout.flexWrap === "wrap" ? n.flexWrap = "wrap" : t.layout.flexWrap ? n.flexWrap = t.layout.flexWrap : n.flexWrap = "nowrap";
+    const u = t.layout.itemSpacing, R = e.scaleFactor ?? 1, S = t.layout.primaryAxisAlignItems === "SPACE_BETWEEN" ? 0 : (u !== void 0 ? u : 0) * R;
+    n.gap = S === 0 ? "0px" : `${S}px`, n.rowGap = S === 0 ? "0px" : `${S}px`, n.columnGap = S === 0 ? "0px" : `${S}px`, (n.flexWrap === "wrap" || n.flexWrap === "wrap-reverse") && (n.alignContent = "flex-start"), r.debug || t.layout?.mode === "HORIZONTAL" && u === 0 ? console.log("[useEncoreStyle] Setting gap properties:", {
       itemSpacing: u,
-      spacing: x,
+      spacing: S,
       gap: n.gap,
       rowGap: n.rowGap,
       columnGap: n.columnGap,
@@ -101,12 +97,12 @@ const ct = v.createContext({}), V = v.createContext(
     );
   }
   if (t.layout?.layoutSizingHorizontal === "FILL" && (n.width = "100%"), t.layout?.layoutSizingHorizontal === "FIXED") {
-    const a = e.scaleFactor ?? 1;
-    n.width = t.layout.size.x * a;
+    const s = e.scaleFactor ?? 1;
+    n.width = t.layout.size.x * s;
   }
   if (t.layout?.layoutSizingHorizontal, t.layout?.layoutSizingVertical === "FIXED") {
-    const a = e.scaleFactor ?? 1;
-    n.height = t.layout.size.y * a;
+    const s = e.scaleFactor ?? 1;
+    n.height = t.layout.size.y * s;
   }
   if (t.layout?.layoutSizingVertical === "FILL")
     if (!(o?.isFlex ?? !1) && t.positioning && t.positioning?.top !== void 0) {
@@ -115,22 +111,22 @@ const ct = v.createContext({}), V = v.createContext(
     } else
       n.height = "100%";
   if (t.layout?.layoutSizingVertical, t.backgroundColor && !Gt(t.backgroundColor) && (n.backgroundColor = st(t.backgroundColor)), t.color && (n.color = st(t.color)), t.lineHeightPx && (n.lineHeight = (t.lineHeightPx * (e.scaleFactor ?? 1)).toString() + "px"), t.fontSize && (n.fontSize = t.fontSize * (e.scaleFactor ?? 1)), t.fontWeight && (n.fontWeight = `${t.fontWeight}`), t.opacity && (n.opacity = t.opacity * 0.01), t.fontId) {
-    const a = m[t.fontId] || "sans-serif";
-    n.fontFamily = `"${a}"`, console.log("[AG_DEBUG] [useEncoreStyle] Font Resolution:", {
+    const s = m[t.fontId] || "sans-serif";
+    n.fontFamily = `"${s}"`, console.log("[AG_DEBUG] [useEncoreStyle] Font Resolution:", {
       fontId: t.fontId,
-      resolvedFamily: a,
+      resolvedFamily: s,
       fontWeight: t.fontWeight,
       finalStyle: n.fontFamily
     });
   }
   if (t.borderRadius && (n.borderRadius = l(t.borderRadius)), t.cornerRadii) {
-    const a = t.cornerRadii.map(l);
-    n.borderTopLeftRadius = a[0], n.borderTopRightRadius = a[1], n.borderBottomRightRadius = a[2], n.borderBottomLeftRadius = a[3], delete n.borderRadius;
+    const s = t.cornerRadii.map(l);
+    n.borderTopLeftRadius = s[0], n.borderTopRightRadius = s[1], n.borderBottomRightRadius = s[2], n.borderBottomLeftRadius = s[3], delete n.borderRadius;
   }
   return t.borderWidth && (t.borderWidth > 5 ? n.borderWidth = t.borderWidth * 0.5 : n.borderWidth = t.borderWidth * 1.5), t.borderColor && (n.borderColor = st(t.borderColor)), (t.borderWidth || t.borderColor) && (n.borderStyle = "solid"), t.rotation && (n.transform = `rotate(${t.rotation}deg)`), t.textCase === "upper" && (n.textTransform = "uppercase"), t.textCase === "lower" && (n.textTransform = "lowercase"), t.letterSpacing && (n.letterSpacing = t.letterSpacing), t.textAlign && (n.textAlign = t.textAlign), r.debug && (n.borderWidth = 1, n.borderColor = "#FF0000FF", n.borderStyle = "solid"), n;
 }, et = ({ id: t, nodeData: r }) => {
   const e = N(tt), o = e?.nodeData?.[t], { patch: i, list: l } = o ?? { list: null, patch: null }, m = Array.isArray(r?.tags) && (r.tags.includes("encore:data:array") || r.tags.includes("bravo:data:array")) && e?.arrayDataById && e.arrayDataById[t] && Array.isArray(e.arrayDataById[t]) ? e.arrayDataById[t] : null;
-  let s = i ? {
+  let a = i ? {
     ...r,
     ...i || {},
     ...i && i.data ? { data: { ...r?.data || {}, ...i.data } } : {},
@@ -138,55 +134,55 @@ const ct = v.createContext({}), V = 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") && (s = {
-    ...s,
-    data: { ...s?.data || {}, text: String(y) }
+  y !== void 0 && Array.isArray(r?.tags) && r.tags.includes("PROP:TEXT_VAR") && (a = {
+    ...a,
+    data: { ...a?.data || {}, text: String(y) }
   });
-  const I = Array.isArray(r?.tags) && (r.tags.includes("encore:data") || r.tags.includes("bravo:data")), h = e?.rootData;
-  h && h[t] && typeof h[t] == "object" && (s = {
-    ...s,
+  const v = Array.isArray(r?.tags) && (r.tags.includes("encore:data") || r.tags.includes("bravo:data")), f = e?.rootData;
+  f && f[t] && typeof f[t] == "object" && (a = {
+    ...a,
     data: {
-      ...s.data || {},
-      ...h[t]
+      ...a.data || {},
+      ...f[t]
     }
   });
-  const a = e?.nodeData && typeof e.nodeData == "object";
-  if (I || a) {
+  const s = e?.nodeData && typeof e.nodeData == "object";
+  if (v || s) {
     const u = e?.nodeData;
     if (u && typeof u == "object") {
       if (u[t] !== void 0) {
         const w = u[t];
-        w && typeof w == "object" && s.data && (s = {
-          ...s,
+        w && typeof w == "object" && a.data && (a = {
+          ...a,
           data: {
-            ...s.data,
+            ...a.data,
             ...w
           }
         });
-      } else if (I && u.description && s.data && (s = {
-        ...s,
+      } else if (v && u.description && a.data && (a = {
+        ...a,
         data: {
-          ...s.data,
+          ...a.data,
           text: u.description
         }
-      }), u.image && s.data) {
+      }), u.image && a.data) {
         const w = u.image.startsWith("//") ? `https:${u.image}` : u.image;
-        s = {
-          ...s,
+        a = {
+          ...a,
           data: {
-            ...s.data,
+            ...a.data,
             imageUrl: w
           }
         };
       }
-      s.encoreData = u;
+      a.encoreData = u;
     }
   }
   return {
     patch: i,
     list: l || m,
     // Use arrayData if list is not provided
-    patchedNodeData: s,
+    patchedNodeData: a,
     arrayData: m
     // Also return separately for components that need it
   };
@@ -198,37 +194,37 @@ const ct = v.createContext({}), V = v.createContext(
   _parentInputGroupInfo: i,
   _parentName: l
 }) => {
-  const n = k((f) => f.baseURL), m = k((f) => f.appId);
-  k((f) => f.pageId);
-  const { onAction: s } = v.useContext(ht), { statefulSetId: y } = v.useContext(
+  const n = k((h) => h.baseURL), m = k((h) => h.appId);
+  k((h) => h.pageId);
+  const { onAction: a } = x.useContext(ft), { statefulSetId: y } = x.useContext(
     lt
-  ), I = o || y, { patchedNodeData: h } = et({ id: t, nodeData: r }), a = k(
-    (f) => f.setStatefulSetVariant
+  ), v = o || y, { patchedNodeData: f } = et({ id: t, nodeData: r }), s = k(
+    (h) => h.setStatefulSetVariant
   ), u = k(
-    (f) => f.setInputGroupValue
-  ), R = k((f) => f.setAccessToken), { app: w } = k((f) => f.app);
+    (h) => h.setInputGroupValue
+  ), R = k((h) => h.setAccessToken), { app: w } = k((h) => h.app);
   w.data?.app?.startPageId, w.data?.app?.PageId;
-  const x = L(
+  const S = L(
     {
       positioning: r.style?.positioning
     },
     { debug: !1 }
   );
-  x.zIndex = 99999, x.backgroundColor = "transparent", x.position = "absolute", x.top = "0", x.left = "0", x.right = "0", x.bottom = "0", x.width = "100%", x.height = "100%", x.pointerEvents = "auto", x.isolation = "isolate";
-  const B = async (f) => {
-    let S = !1;
-    const O = () => {
-      S = !1;
+  S.zIndex = 99999, S.backgroundColor = "transparent", S.position = "absolute", S.top = "0", S.left = "0", S.right = "0", S.bottom = "0", S.width = "100%", S.height = "100%", S.pointerEvents = "auto", S.isolation = "isolate";
+  const W = async (h) => {
+    let A = !1;
+    const G = () => {
+      A = !1;
     };
-    if (typeof s == "function")
+    if (typeof a == "function")
       try {
-        await s({ bravo: { cancel: O, action: f, componentId: t } }), S = !0;
+        await a({ bravo: { cancel: G, action: h, componentId: t } }), A = !0;
       } catch {
       }
     else
-      S = !0;
-    if (S)
-      switch (f.action) {
+      A = !0;
+    if (A)
+      switch (h.action) {
         case "login":
         // TODO firebase
         // TODO oauth
@@ -238,7 +234,7 @@ const ct = v.createContext({}), V = v.createContext(
         case "submit":
           break;
         case "email":
-          window.location.href = `mailto:${f.params.email}`;
+          window.location.href = `mailto:${h.params.email}`;
           break;
         case "goback":
           break;
@@ -252,27 +248,27 @@ const ct = v.createContext({}), V = v.createContext(
         case "none":
           break;
         case "openurl":
-          window.open(f.params.url, "_blank");
+          window.open(h.params.url, "_blank");
           break;
         case "phone":
-          window.location.href = `tel:${f.params.phone}`;
+          window.location.href = `tel:${h.params.phone}`;
           break;
         case "remote":
-          const M = btoa(JSON.stringify(f.params?.data || {})), j = `${n}/devices/apps/${m}/node/${t}/trigger/${f.event}?params=${M}`, K = await Ot.post(j);
-          K.data?.action && await B(K.data);
+          const O = btoa(JSON.stringify(h.params?.data || {})), j = `${n}/devices/apps/${m}/node/${t}/trigger/${h.event}?params=${O}`, K = await Ot.post(j);
+          K.data?.action && await W(K.data);
           break;
         case "set-access-token":
-          R(f.params);
+          R(h.params);
           break;
         case "set-state":
           if (i && l)
             if (console.log("🔵 Input group change:", {
               groupName: i.groupName,
               elementName: l,
-              hasOnAction: typeof s == "function"
-            }), u(i.groupName, l), typeof s == "function")
+              hasOnAction: typeof a == "function"
+            }), u(i.groupName, l), typeof a == "function")
               try {
-                await s({
+                await a({
                   bravo: {
                     cancel: () => {
                     },
@@ -294,23 +290,23 @@ const ct = v.createContext({}), V = v.createContext(
             else
               console.warn("⚠️ No onAction callback provided");
           else {
-            let E = I || f.params?.stateSetId || h.data?.stateSetId;
+            let E = v || h.params?.stateSetId || f.data?.stateSetId;
             if (!E) {
               console.error("❌ No stateSetId found in action or nodeData!", {
-                actionParams: f.params,
-                nodeDataStateSetId: h.data?.stateSetId,
-                parentStatefulSetId: I
+                actionParams: h.params,
+                nodeDataStateSetId: f.data?.stateSetId,
+                parentStatefulSetId: v
               });
               break;
             }
-            a(E, f.params.state);
+            s(E, h.params.state);
           }
           break;
         case "showalert":
-          alert(f.params.message);
+          alert(h.params.message);
           break;
         default:
-          console.log(f), alert(f.action);
+          console.log(h), alert(h.action);
       }
   };
   if (r.href)
@@ -319,13 +315,13 @@ const ct = v.createContext({}), V = v.createContext(
         "button",
         {
           type: "button",
-          onClick: () => B({
+          onClick: () => W({
             action: "goto",
             params: { href: r.href },
             event: "tap"
           }),
           style: {
-            ...x,
+            ...S,
             cursor: "pointer",
             background: "transparent",
             border: "none",
@@ -336,17 +332,17 @@ const ct = v.createContext({}), V = v.createContext(
       ),
       e
     ] });
-  let z = h.actions && h.actions.length > 0 ? h.actions : r.actions || [];
-  if (I && z.length > 0 && (z = z.map((f) => f.action === "set-state" ? (f.params?.stateSetId, {
-    ...f,
+  let $ = f.actions && f.actions.length > 0 ? f.actions : r.actions || [];
+  if (v && $.length > 0 && ($ = $.map((h) => h.action === "set-state" ? (h.params?.stateSetId, {
+    ...h,
     params: {
-      ...f.params,
-      stateSetId: I
+      ...h.params,
+      stateSetId: v
       // Always use parent's id
     }
-  }) : f)), z.length === 0 && (h.data?.stateSetId || I))
+  }) : h)), $.length === 0 && (f.data?.stateSetId || v))
     if (i && l)
-      z = [
+      $ = [
         {
           action: "set-state",
           params: {
@@ -357,13 +353,13 @@ const ct = v.createContext({}), V = v.createContext(
         }
       ];
     else {
-      const f = I || h.data.stateSetId;
-      f ? z = [
+      const h = v || f.data.stateSetId;
+      h ? $ = [
         {
           action: "set-state",
           params: {
-            state: k.getState().statefulSetVariants[f] === "active" ? "default" : "active",
-            stateSetId: f
+            state: k.getState().statefulSetVariants[h] === "active" ? "default" : "active",
+            stateSetId: h
             // Use parent's id or button's stateSetId
           },
           event: "tap"
@@ -373,25 +369,25 @@ const ct = v.createContext({}), V = v.createContext(
         { id: t, name: r.name }
       );
     }
-  if (z && z.length > 0) {
-    const f = z[0];
-    return f.event !== "tap" ? e : /* @__PURE__ */ it(ut, { children: [
+  if ($ && $.length > 0) {
+    const h = $[0];
+    return h.event !== "tap" ? e : /* @__PURE__ */ it(ut, { children: [
       e,
       /* @__PURE__ */ p(
         "div",
         {
-          onClick: (S) => {
-            S.stopPropagation(), B(f);
+          onClick: (A) => {
+            A.stopPropagation(), W(h);
           },
-          onMouseDown: (S) => S.stopPropagation(),
-          onMouseUp: (S) => S.stopPropagation(),
-          style: { ...x, cursor: "pointer", pointerEvents: "auto" }
+          onMouseDown: (A) => A.stopPropagation(),
+          onMouseUp: (A) => A.stopPropagation(),
+          style: { ...S, cursor: "pointer", pointerEvents: "auto" }
         }
       )
     ] });
   }
   return e;
-}, ft = ({ id: t, name: r, nodeData: e }) => {
+}, ht = ({ id: t, name: r, nodeData: e }) => {
   const o = L(e.style, {
     debug: !1
   });
@@ -412,11 +408,11 @@ const ct = v.createContext({}), V = v.createContext(
   if (!o.backgroundColor && !o.borderColor)
     return null;
   if (o.borderColor && !o.backgroundColor && (o.backgroundColor = "transparent"), o.borderColor && o.borderWidth) {
-    const I = Math.max(o.borderWidth || 0, 1);
-    (!o.width || typeof o.width == "number" && o.width === 0) && (o.width = I), (!o.height || typeof o.height == "number" && o.height === 0) && (o.height = I), 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"), l = N(V)?.isFlex ?? !1, n = e.style?.positioning, m = n && typeof n.top == "number" && typeof n.left == "number" && typeof n.right == "number" && typeof n.bottom == "number" && n.top === 0 && n.left === 0 && n.right === 0 && n.bottom === 0, s = i && (l || m), y = r && r.toLowerCase().startsWith("clip");
-  return s && (o.position = "absolute", o.top = 0, o.left = 0, o.right = 0, o.bottom = 0, o.zIndex = -1, o.width && typeof o.width == "string" && o.width.includes("%") && delete o.width, o.height && typeof o.height == "string" && o.height.includes("%") && delete o.height), y && (o.backgroundColor = "transparent"), /* @__PURE__ */ p(Y, { id: t, nodeData: e, children: /* @__PURE__ */ p("div", { "data-name": r, "data-type": "ColorComponent", style: o }) });
+  const i = Array.isArray(e.tags) && e.tags.includes("bravo:layer"), l = N(V)?.isFlex ?? !1, n = e.style?.positioning, m = n && typeof n.top == "number" && typeof n.left == "number" && typeof n.right == "number" && typeof n.bottom == "number" && n.top === 0 && n.left === 0 && n.right === 0 && n.bottom === 0, a = i && (l || m), y = r && r.toLowerCase().startsWith("clip");
+  return a && (o.position = "absolute", o.top = 0, o.left = 0, o.right = 0, o.bottom = 0, o.zIndex = -1, o.width && typeof o.width == "string" && o.width.includes("%") && delete o.width, o.height && typeof o.height == "string" && o.height.includes("%") && delete o.height), y && (o.backgroundColor = "transparent"), /* @__PURE__ */ p(Y, { id: t, nodeData: e, children: /* @__PURE__ */ p("div", { "data-name": r, "data-type": "ColorComponent", style: o }) });
 }, mt = ({
   id: t,
   name: r,
@@ -428,8 +424,8 @@ const ct = v.createContext({}), V = v.createContext(
     if (!n?.color) return null;
     const m = st(n.color);
     if (typeof n.position == "number") {
-      const s = n.position * 100;
-      return `${m} ${s}%`;
+      const a = n.position * 100;
+      return `${m} ${a}%`;
     }
     return m;
   }).filter(Boolean).join(", ") : "";
@@ -445,22 +441,22 @@ const ct = v.createContext({}), V = v.createContext(
     debug: !1
   }), l = N(V), n = k((u) => u.assetsById), m = e.style?.scaleMode || "fill";
   m === "fill" ? i.objectFit = "cover" : m === "fit" && (i.objectFit = "contain"), i.objectPosition = "center";
-  let s = e.data?.imageUrl;
-  !s && e.encoreData?.image && (s = e.encoreData.image.startsWith("//") ? `https:${e.encoreData.image}` : e.encoreData.image), s || (s = n[e.assetId]?.url);
-  const y = e.style?.positioning, I = e.style?.aspectRatio, h = l.dimensions?.width || 0, a = l.dimensions?.height || 0;
-  if (y && I && h > 0) {
+  let a = e.data?.imageUrl;
+  !a && e.encoreData?.image && (a = e.encoreData.image.startsWith("//") ? `https:${e.encoreData.image}` : e.encoreData.image), a || (a = n[e.assetId]?.url);
+  const y = e.style?.positioning, v = e.style?.aspectRatio, f = l.dimensions?.width || 0, s = l.dimensions?.height || 0;
+  if (y && v && f > 0) {
     const u = typeof y.left == "number" && typeof y.right == "number", R = typeof y.top == "number" && typeof y.bottom == "number";
     if (u) {
       const w = 100 - y.left - y.right;
       if (w > 0) {
-        const x = w * h / 100;
-        i.width = x, i.height = x / I, i.left = `${Math.max(0, y.left)}%`, i.top = `${Math.max(0, y.top)}%`, delete i.right, delete i.bottom;
+        const S = w * f / 100;
+        i.width = S, i.height = S / v, i.left = `${Math.max(0, y.left)}%`, i.top = `${Math.max(0, y.top)}%`, delete i.right, delete i.bottom;
       }
-    } else if (R && a > 0) {
+    } else if (R && s > 0) {
       const w = 100 - y.top - y.bottom;
       if (w > 0) {
-        const x = w * a / 100;
-        i.height = x, i.width = x * I, i.left = `${Math.max(0, y.left)}%`, i.top = `${Math.max(0, y.top)}%`, delete i.right, delete i.bottom;
+        const S = w * s / 100;
+        i.height = S, i.width = S * v, i.left = `${Math.max(0, y.left)}%`, i.top = `${Math.max(0, y.top)}%`, delete i.right, delete i.bottom;
       }
     }
   }
@@ -471,7 +467,7 @@ const ct = v.createContext({}), V = v.createContext(
       "data-name": r,
       "data-type": "ImageComponent",
       style: i,
-      src: s || n[e.assetId]?.url,
+      src: a || n[e.assetId]?.url,
       alt: r
     }
   ) });
@@ -559,9 +555,9 @@ const ct = v.createContext({}), V = v.createContext(
   name: r,
   nodeData: e
 }) => {
-  const o = k((h) => h.setFormInputValue), { onAction: i } = v.useContext(ht), { patchedNodeData: l } = et({ id: t, nodeData: e }), n = L(l.style, { debug: !1 });
+  const o = k((f) => f.setFormInputValue), { onAction: i } = x.useContext(ft), { patchedNodeData: l } = et({ id: t, nodeData: e }), n = L(l.style, { debug: !1 });
   n.width = "100%", n.flex = "1", n.minWidth = "0", n.boxSizing = "border-box", n.borderColor = n.borderColor ?? "transparent";
-  const m = l.data?.value, s = l.data?.options, y = v.useMemo(() => !s || !Array.isArray(s) ? [] : s.map((h) => typeof h == "string" ? { value: h, label: h } : h), [s]);
+  const m = l.data?.value, a = l.data?.options, y = x.useMemo(() => !a || !Array.isArray(a) ? [] : a.map((f) => typeof f == "string" ? { value: f, label: f } : f), [a]);
   return /* @__PURE__ */ it(
     "select",
     {
@@ -570,9 +566,9 @@ const ct = v.createContext({}), V = v.createContext(
       "data-type": "SelectInputComponent",
       value: m ?? "",
       style: n,
-      onChange: async (h) => {
-        const a = h.target.value;
-        if (o(t, a), console.log(`Select changed: ${a}`), typeof i == "function")
+      onChange: async (f) => {
+        const s = f.target.value;
+        if (o(t, s), console.log(`Select changed: ${s}`), typeof i == "function")
           try {
             await i({
               bravo: {
@@ -581,7 +577,7 @@ const ct = v.createContext({}), V = v.createContext(
                 action: {
                   action: "select-change",
                   nodeId: t,
-                  params: { value: a }
+                  params: { value: s }
                 },
                 componentId: t
               }
@@ -591,7 +587,7 @@ const ct = v.createContext({}), V = v.createContext(
       },
       children: [
         y.length === 0 && /* @__PURE__ */ p("option", { value: "", disabled: !0, children: "Select an option..." }),
-        y.map((h) => /* @__PURE__ */ p("option", { value: h.value, children: h.label }, h.value))
+        y.map((f) => /* @__PURE__ */ p("option", { value: f.value, children: f.label }, f.value))
       ]
     }
   );
@@ -631,8 +627,19 @@ const ct = v.createContext({}), V = v.createContext(
 }, At = ({ id: t, name: r, nodeData: e }) => {
   const o = L(e.style, {
     debug: !1
-  }), i = k((l) => l.assetsById);
-  return /* @__PURE__ */ p(Y, { id: t, nodeData: e, children: /* @__PURE__ */ p(
+  }), i = k((n) => n.assetsById), l = e.style?.positioning;
+  if (l) {
+    const n = typeof l.left == "number" && typeof l.right == "number", m = typeof l.top == "number" && typeof l.bottom == "number";
+    if (n) {
+      const a = 100 - l.left - l.right;
+      o.width = `${a}%`, o.left = `${l.left}%`, delete o.right;
+    }
+    if (m) {
+      const a = 100 - l.top - l.bottom;
+      o.height = `${a}%`, o.top = `${l.top}%`, delete o.bottom;
+    }
+  }
+  return o.objectFit || (o.objectFit = "fill"), /* @__PURE__ */ p(Y, { id: t, nodeData: e, children: /* @__PURE__ */ p(
     "img",
     {
       "data-id": t,
@@ -662,10 +669,10 @@ const ct = v.createContext({}), V = v.createContext(
     center: "center",
     "from-bottom": "flex-end"
   }[l.verticalPosition]);
-  const s = i && (i.includes(`
+  const a = i && (i.includes(`
 `) || i.includes("\r"));
   let y;
-  return s && m.flexDirection === "column" ? y = i.split(/\r?\n/).filter((h) => h.length > 0).map((h, a) => /* @__PURE__ */ p("div", { style: { lineHeight: "inherit" }, children: h }, a)) : y = i, /* @__PURE__ */ p(Y, { id: t, nodeData: e, children: /* @__PURE__ */ p(
+  return a && m.flexDirection === "column" ? y = i.split(/\r?\n/).filter((f) => f.length > 0).map((f, s) => /* @__PURE__ */ p("div", { style: { lineHeight: "inherit" }, children: f }, s)) : y = i, /* @__PURE__ */ p(Y, { id: t, nodeData: e, children: /* @__PURE__ */ p(
     "div",
     {
       "data-id": t,
@@ -683,29 +690,29 @@ const ct = v.createContext({}), V = v.createContext(
 }) => {
   const i = N(tt), { patchedNodeData: l } = et({ id: t, nodeData: e });
   e = l;
-  const n = jt(e.tags), m = n ? k((w) => w.inputGroups[n.groupName]) : null, s = k((w) => w.statefulSetVariants[t]), y = L(e.style, {
+  const n = jt(e.tags), m = n ? k((w) => w.inputGroups[n.groupName]) : null, a = k((w) => w.statefulSetVariants[t]), y = L(e.style, {
     debug: !1
   });
-  let I;
-  n && m !== null ? I = m === r ? "active" : "default" : I = s || e.data.initialState || "default";
-  const h = v.Children.toArray(o).find((w) => v.isValidElement(w) ? w.props?.nodeData?.data?.state === I : !1), a = v.isValidElement(h) ? v.cloneElement(h, {
+  let v;
+  n && m !== null ? v = m === r ? "active" : "default" : v = a || e.data.initialState || "default";
+  const f = x.Children.toArray(o).find((w) => x.isValidElement(w) ? w.props?.nodeData?.data?.state === v : !1), s = x.isValidElement(f) ? x.cloneElement(f, {
     _parentStatefulSetId: t,
     _parentInputGroupInfo: n,
     _parentName: r
     // Pass the name so we can identify which element is active
-  }) : h, u = /* @__PURE__ */ p(
+  }) : f, u = /* @__PURE__ */ p(
     "div",
     {
       "data-id": t,
       "data-name": r,
       "data-type": "StatefulSetComponent",
       style: y,
-      children: a
+      children: s
     }
   );
   if (e.type === "component:input-stateful-set")
     return u;
-  const R = v.useContext(lt);
+  const R = x.useContext(lt);
   return /* @__PURE__ */ p(
     tt.Provider,
     {
@@ -730,7 +737,7 @@ const ct = v.createContext({}), V = v.createContext(
 }) => {
   const m = L(e.style, {
     debug: !1
-  }), s = {
+  }), a = {
     ...m,
     position: m.position || "relative"
   };
@@ -740,7 +747,7 @@ const ct = v.createContext({}), V = v.createContext(
       "data-id": t,
       "data-name": r,
       "data-type": "StatefulCompoundComponent",
-      style: s,
+      style: a,
       children: /* @__PURE__ */ p(
         Y,
         {
@@ -788,40 +795,40 @@ const ct = v.createContext({}), V = v.createContext(
     `[DEBUG] ContainerComponent ${t} (Hero) FULL nodeData:`,
     JSON.stringify(e, null, 2)
   );
-  const n = N(tt), { patchedNodeData: m, list: s, arrayData: y } = et({
+  const n = N(tt), { patchedNodeData: m, list: a, arrayData: y } = et({
     id: t,
     nodeData: e
   });
   e = m;
-  const { dimensions: I, ref: h } = rt(), a = L(e.style, {
+  const { dimensions: v, ref: f } = rt(), s = L(e.style, {
     debug: !1
-  }), u = !!e.style.layout?.mode, R = e.style.layout?.mode === "HORIZONTAL" ? "row" : "column", w = a.width !== void 0, x = a.height !== void 0, B = N(V), z = B?.isFlex ?? !1, f = B?.flexDirection, S = z && f === "row", O = !z && 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 (!w && !S && !(O && (M || j)) && (a.width = "100%"), !x) {
-    const W = !z && e.style.positioning, Z = e.style.layout?.layoutSizingVertical === "FILL";
+  }), u = !!e.style.layout?.mode, R = e.style.layout?.mode === "HORIZONTAL" ? "row" : "column", w = s.width !== void 0, S = s.height !== void 0, W = N(V), $ = W?.isFlex ?? !1, h = W?.flexDirection, A = $ && h === "row", G = !$ && e.style.positioning, O = e.style.layout?.layoutSizingHorizontal === "FIXED" || e.style.layout?.layoutSizingVertical === "FIXED", j = e.style.layout?.layoutSizingHorizontal === "HUG" || e.style.layout?.layoutSizingVertical === "HUG";
+  if (!w && !A && !(G && (O || j)) && (s.width = "100%"), !S) {
+    const B = !$ && e.style.positioning, Z = e.style.layout?.layoutSizingVertical === "FILL";
     if (!(e.style.layout?.layoutSizingVertical === "HUG")) {
-      if (!u) if (W && Z && e.style.positioning?.top !== void 0) {
-        const D = 100 - e.style.positioning.top;
-        a.height = `${D}%`;
+      if (!u) if (B && Z && e.style.positioning?.top !== void 0) {
+        const Q = 100 - e.style.positioning.top;
+        s.height = `${Q}%`;
       } else
-        a.height = "100%";
+        s.height = "100%";
     }
   }
-  const K = e.style.layout?.layoutSizingHorizontal || e.style.layout?.layoutSizingVertical, H = e.style.positioning && !u && (K || !0) ? { ...a, position: "absolute" } : a.position === "absolute" ? a : { ...a, position: a.position || "relative" }, U = (W) => typeof W == "number" ? W : typeof W == "string" && W.endsWith("px") && parseFloat(W) || 0, G = U(a.paddingLeft), g = U(a.paddingRight), q = U(a.paddingTop), X = U(a.paddingBottom), P = M && typeof a.width == "number" && typeof a.height == "number" ? {
-    width: a.width - G - g,
-    height: a.height - q - X
+  const K = e.style.layout?.layoutSizingHorizontal || e.style.layout?.layoutSizingVertical, H = e.style.positioning && !u && (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, M = U(s.paddingLeft), g = U(s.paddingRight), q = U(s.paddingTop), X = U(s.paddingBottom), P = O && typeof s.width == "number" && typeof s.height == "number" ? {
+    width: s.width - M - g,
+    height: s.height - q - X
   } : {
-    width: I.width - G - g,
-    height: I.height - q - X
+    width: v.width - M - g,
+    height: v.height - q - X
   };
-  if (i != null && s) {
-    const W = s[i];
-    if (W !== void 0) {
-      const Z = typeof W == "object" && W !== null ? {
-        nodeData: W,
+  if (i != null && a) {
+    const B = a[i];
+    if (B !== void 0) {
+      const Z = typeof B == "object" && B !== null ? {
+        nodeData: B,
         arrayDataById: n?.arrayDataById,
         textOverridesById: n?.textOverridesById,
         rootData: n?.rootData
-      } : { nodeData: W };
+      } : { nodeData: B };
       return /* @__PURE__ */ p(tt.Provider, { value: Z, children: /* @__PURE__ */ p(
         V.Provider,
         {
@@ -840,10 +847,10 @@ const ct = v.createContext({}), V = v.createContext(
       ) });
     }
   }
-  if (s) {
-    const W = y || s;
-    return Ht(() => W.map((J, nt) => {
-      const D = typeof J == "object" && J !== null ? {
+  if (a) {
+    const B = y || a;
+    return Ht(() => B.map((J, nt) => {
+      const Q = typeof J == "object" && J !== null ? {
         nodeData: J,
         arrayDataById: n?.arrayDataById,
         textOverridesById: n?.textOverridesById,
@@ -852,7 +859,7 @@ const ct = v.createContext({}), V = v.createContext(
       return /* @__PURE__ */ p(
         tt.Provider,
         {
-          value: D,
+          value: Q,
           children: /* @__PURE__ */ p(
             V.Provider,
             {
@@ -872,16 +879,16 @@ const ct = v.createContext({}), V = v.createContext(
         },
         `${t}:${nt}`
       );
-    }), [W, t]);
+    }), [B, t]);
   }
   let F = e.actions || [];
   !Array.isArray(F) && typeof F == "object" && F !== null && (F = Object.entries(F).map(
-    ([W, Z]) => ({
-      event: W,
+    ([B, Z]) => ({
+      event: B,
       ...typeof Z == "object" && Z !== null ? Z : {}
     })
   ));
-  const $ = Array.isArray(F) && F.length > 0;
+  const z = Array.isArray(F) && F.length > 0;
   return /* @__PURE__ */ p(
     V.Provider,
     {
@@ -892,21 +899,21 @@ const ct = v.createContext({}), V = v.createContext(
           "data-id": t,
           "data-name": r,
           "data-type": "ContainerComponent",
-          ref: h,
+          ref: f,
           style: H,
-          children: $ ? /* @__PURE__ */ p(Y, { id: t, nodeData: e, children: o }) : o
+          children: z ? /* @__PURE__ */ p(Y, { id: t, nodeData: e, children: o }) : o
         }
       )
     }
   );
-}, Pt = pt, Wt = ({ id: t, name: r, nodeData: e, children: o }) => {
+}, Pt = pt, Bt = ({ id: t, name: r, nodeData: e, children: o }) => {
   const { dimensions: i, ref: l } = rt(), n = L(e.style, {
     debug: !1
-  }), m = !!e.style.layout?.mode, s = e.style.layout?.mode === "HORIZONTAL" ? "row" : "column", y = n.position ? n : { ...n, position: "relative" };
+  }), m = !!e.style.layout?.mode, a = e.style.layout?.mode === "HORIZONTAL" ? "row" : "column", y = n.position ? n : { ...n, position: "relative" };
   return /* @__PURE__ */ p(
     V.Provider,
     {
-      value: { dimensions: i, isFlex: m, flexDirection: s },
+      value: { dimensions: i, isFlex: m, flexDirection: a },
       children: /* @__PURE__ */ p(
         "div",
         {
@@ -932,7 +939,7 @@ const ct = v.createContext({}), V = v.createContext(
       children: o
     }
   );
-}, Bt = ({ id: t, name: r, nodeData: e, children: o }) => /* @__PURE__ */ p(
+}, Lt = ({ id: t, name: r, nodeData: e, children: o }) => /* @__PURE__ */ p(
   "div",
   {
     "data-id": t,
@@ -941,7 +948,7 @@ const ct = v.createContext({}), V = v.createContext(
     style: L(e.style),
     children: o
   }
-), Lt = ({ id: t, name: r, nodeData: e, children: o }) => {
+), Wt = ({ id: t, name: r, nodeData: e, children: o }) => {
   const i = L(e.style, {
     debug: !1
   });
@@ -960,191 +967,191 @@ const ct = v.createContext({}), V = v.createContext(
     `[DEBUG] SliderComponent ${t} FULL nodeData:`,
     JSON.stringify(e, null, 2)
   );
-  const { dimensions: i, ref: l } = rt(), n = v.useRef(null), m = v.useRef(null), s = v.useRef(!1), y = v.useRef(null), I = N(ct), h = N(Mt), { onAction: a } = N(ht), [u, R] = v.useState({
+  const { dimensions: i, ref: l } = rt(), n = x.useRef(null), m = x.useRef(null), a = x.useRef(!1), y = x.useRef(null), v = N(ct), f = N(Mt), { onAction: s } = N(ft), [u, R] = x.useState({
     currentIndex: void 0,
     onIndexChange: void 0
-  }), [w, x] = v.useState(0), B = v.useRef(null), { patchedNodeData: z } = et({ id: t, nodeData: e });
-  e = z;
-  const f = e.data?.params || {}, S = f.infinite === !0, O = f.automatic === !0;
+  }), [w, S] = x.useState(0), W = x.useRef(null), { patchedNodeData: $ } = et({ id: t, nodeData: e });
+  e = $;
+  const h = e.data?.params || {}, A = h.infinite === !0, G = h.automatic === !0;
   let j = Array.isArray(e.tags) && e.tags.some((c) => c.includes("container:slider:vertical")) || e.name && e.name.includes("container:slider:vertical");
-  if (!j && f.animation === "default") {
+  if (!j && h.animation === "default") {
     const c = e.style?.width, d = e.style?.height;
     typeof c == "number" && typeof d == "number" && d > c && (j = !0);
   }
-  const K = j ? "vertical" : f.animation === "default" ? "horizontal" : f.animation || "horizontal", E = L(e.style, {
+  const K = j ? "vertical" : h.animation === "default" ? "horizontal" : h.animation || "horizontal", E = L(e.style, {
     debug: !1
   }), H = E.width !== void 0, U = E.height !== void 0;
   H || (E.width = "100%"), U || (E.height = "100%"), E.position || (E.position = "relative");
-  const G = N(tt), g = v.useMemo(() => {
+  const M = N(tt), g = x.useMemo(() => {
     const c = [];
-    return v.Children.forEach(o, (d) => {
+    return x.Children.forEach(o, (d) => {
       if (d == null) return;
-      const A = d?.props || {}, C = A.nodeData || {};
-      if (Array.isArray(C?.tags) && (C.tags.includes("encore:data:array") || C.tags.includes("bravo:data:array")) && A.id && G) {
-        const T = G?.arrayDataById && G.arrayDataById[A.id] && Array.isArray(G.arrayDataById[A.id]) ? G.arrayDataById[A.id] : null;
-        T && T.length > 0 ? T.forEach((Q, ot) => {
+      const I = d?.props || {}, C = I.nodeData || {};
+      if (Array.isArray(C?.tags) && (C.tags.includes("encore:data:array") || C.tags.includes("bravo:data:array")) && I.id && M) {
+        const T = M?.arrayDataById && M.arrayDataById[I.id] && Array.isArray(M.arrayDataById[I.id]) ? M.arrayDataById[I.id] : null;
+        T && T.length > 0 ? T.forEach((D, ot) => {
           c.push(
-            v.cloneElement(d, {
-              key: `${A.id}:${ot}`,
+            x.cloneElement(d, {
+              key: `${I.id}:${ot}`,
               // ContainerComponent will use this to know which item to render
               _arrayItemIndex: ot,
-              _arrayItemData: Q
+              _arrayItemData: D
             })
           );
         }) : c.push(d);
       } else
         c.push(d);
     }), c;
-  }, [o, t, G]), q = v.useMemo(() => {
-    if (!S || g.length === 0)
+  }, [o, t, M]), q = x.useMemo(() => {
+    if (!A || g.length === 0)
       return g;
     const c = g[0], d = g[g.length - 1];
     return [
-      v.cloneElement(d, {
+      x.cloneElement(d, {
         key: `clone-last-${d.key || d.props.id}`
       }),
       ...g,
-      v.cloneElement(c, {
+      x.cloneElement(c, {
         key: `clone-first-${c.key || c.props.id}`
       })
     ];
-  }, [g, S]), X = v.useMemo(() => {
+  }, [g, A]), X = x.useMemo(() => {
     if (g.length === 0) return { width: 0, height: 0 };
-    const d = g[0]?.props?.nodeData?.style, A = I.scaleFactor || 1;
+    const d = g[0]?.props?.nodeData?.style, I = v.scaleFactor || 1;
     let C = 0, b = 0;
-    return d?.layout?.layoutSizingHorizontal === "FIXED" && d?.layout?.size?.x ? C = d.layout.size.x * A : C = i.width || 0, d?.layout?.layoutSizingVertical === "FIXED" && d?.layout?.size?.y ? b = d.layout.size.y * A : b = i.height || 0, { width: C, height: b };
-  }, [g, i.width, i.height, I.scaleFactor]), P = X.width, F = X.height, $ = K === "vertical", _ = v.useCallback(() => {
+    return d?.layout?.layoutSizingHorizontal === "FIXED" && d?.layout?.size?.x ? C = d.layout.size.x * I : C = i.width || 0, d?.layout?.layoutSizingVertical === "FIXED" && d?.layout?.size?.y ? b = d.layout.size.y * I : b = i.height || 0, { width: C, height: b };
+  }, [g, i.width, i.height, v.scaleFactor]), P = X.width, F = X.height, z = K === "vertical", _ = x.useCallback(() => {
     if (!n.current || g.length === 0)
       return 0;
     const c = n.current;
-    if ($) {
+    if (z) {
       if (F === 0) return 0;
       const d = c.scrollTop;
-      if (S) {
+      if (A) {
         const C = d - F;
         let b = Math.round(C / F);
         return b < 0 && (b = 0), b >= g.length && (b = g.length - 1), b;
       } else {
-        const A = Math.round(d / F);
-        return A < 0 ? 0 : A >= g.length ? g.length - 1 : A;
+        const I = Math.round(d / F);
+        return I < 0 ? 0 : I >= g.length ? g.length - 1 : I;
       }
     } else {
       if (P === 0) return 0;
       const d = c.scrollLeft;
-      if (S) {
+      if (A) {
         const C = d - P;
         let b = Math.round(C / P);
         return b < 0 && (b = 0), b >= g.length && (b = g.length - 1), b;
       } else {
-        const A = Math.round(d / P);
-        return A < 0 ? 0 : A >= g.length ? g.length - 1 : A;
+        const I = Math.round(d / P);
+        return I < 0 ? 0 : I >= g.length ? g.length - 1 : I;
       }
     }
-  }, [S, g.length, P, F, $]), W = v.useCallback(
+  }, [A, g.length, P, F, z]), B = x.useCallback(
     (c, d = !0) => {
       if (!n.current || g.length === 0) return;
-      const A = n.current;
-      if ($) {
+      const I = n.current;
+      if (z) {
         let C;
-        S ? C = F + c * F : C = c * F, A.scrollTo({
+        A ? C = F + c * F : C = c * F, I.scrollTo({
           top: C,
           behavior: d ? "smooth" : "auto"
         });
       } else {
         let C;
-        S ? C = P + c * P : C = c * P, A.scrollTo({
+        A ? C = P + c * P : C = c * P, I.scrollTo({
           left: C,
           behavior: d ? "smooth" : "auto"
         });
       }
     },
-    [P, F, S, g.length, $]
-  ), Z = v.useCallback(() => {
-    if (!S || !n.current || g.length === 0) return;
+    [P, F, A, g.length, z]
+  ), Z = x.useCallback(() => {
+    if (!A || !n.current || g.length === 0) return;
     const c = n.current, d = 1;
-    if ($) {
+    if (z) {
       if (F === 0) return;
-      const A = c.scrollTop, C = F, b = C, T = b + g.length * C;
-      A >= T - d ? c.scrollTop = b : A <= d && (c.scrollTop = T - C);
+      const I = c.scrollTop, C = F, b = C, T = b + g.length * C;
+      I >= T - d ? c.scrollTop = b : I <= d && (c.scrollTop = T - C);
     } else {
       if (P === 0) return;
-      const A = c.scrollLeft, C = P, b = C, T = b + g.length * C;
-      A >= T - d ? c.scrollLeft = b : A <= d && (c.scrollLeft = T - C);
+      const I = c.scrollLeft, C = P, b = C, T = b + g.length * C;
+      I >= T - d ? c.scrollLeft = b : I <= d && (c.scrollLeft = T - C);
     }
-  }, [S, g.length, P, F, $]);
-  v.useEffect(() => {
-    if (!O || g.length <= 1 || P === 0) return;
+  }, [A, g.length, P, F, z]);
+  x.useEffect(() => {
+    if (!G || g.length <= 1 || P === 0) return;
     const c = () => {
-      if (s.current || !n.current) return;
+      if (a.current || !n.current) return;
       const d = n.current;
-      if ($) {
+      if (z) {
         if (F === 0) return;
-        const A = d.scrollTop, C = F;
+        const I = d.scrollTop, C = F;
         let b;
-        if (S) {
-          const ot = A - C;
+        if (A) {
+          const ot = I - C;
           b = Math.round(ot / C), b < 0 && (b = 0), b >= g.length && (b = g.length - 1);
         } else
-          b = Math.round(A / C);
+          b = Math.round(I / C);
         let T = b + 1;
-        if (S) {
+        if (A) {
           T >= g.length && (T = 0);
-          const Q = C;
+          const D = C;
           d.scrollTo({
-            top: Q + T * C,
+            top: D + T * C,
             behavior: "smooth"
           });
         } else
-          T >= g.length && (T = 0), W(T);
+          T >= g.length && (T = 0), B(T);
       } else {
         if (P === 0) return;
-        const A = d.scrollLeft, C = P;
+        const I = d.scrollLeft, C = P;
         let b;
-        if (S) {
-          const ot = A - C;
+        if (A) {
+          const ot = I - C;
           b = Math.round(ot / C), b < 0 && (b = 0), b >= g.length && (b = g.length - 1);
         } else
-          b = Math.round(A / C);
+          b = Math.round(I / C);
         let T = b + 1;
-        if (S) {
+        if (A) {
           T >= g.length && (T = 0);
-          const Q = C;
+          const D = C;
           d.scrollTo({
-            left: Q + T * C,
+            left: D + T * C,
             behavior: "smooth"
           });
         } else
-          T >= g.length && (T = 0), W(T);
+          T >= g.length && (T = 0), B(T);
       }
     };
     return m.current = setInterval(c, 4e3), () => {
       m.current && (clearInterval(m.current), m.current = null);
     };
   }, [
-    O,
+    G,
     g.length,
-    S,
+    A,
     P,
     F,
-    $,
-    W
+    z,
+    B
   ]);
-  const J = v.useCallback(() => {
-    s.current = !0, y.current && clearTimeout(y.current), y.current = setTimeout(() => {
-      s.current = !1;
+  const J = x.useCallback(() => {
+    a.current = !0, y.current && clearTimeout(y.current), y.current = setTimeout(() => {
+      a.current = !1;
     }, 3e3);
-  }, []), nt = v.useRef(u);
-  v.useEffect(() => {
+  }, []), nt = x.useRef(u);
+  x.useEffect(() => {
     nt.current = u;
   }, [u]);
-  const D = v.useCallback(
+  const Q = x.useCallback(
     (c) => {
-      if (B.current === c) return;
-      B.current = c;
+      if (W.current === c) return;
+      W.current = c;
       const d = nt.current;
-      if (d.currentIndex === void 0 && x(c), d.onIndexChange && d.onIndexChange(c), typeof a == "function")
+      if (d.currentIndex === void 0 && S(c), d.onIndexChange && d.onIndexChange(c), typeof s == "function")
         try {
-          a({
+          s({
             bravo: {
               cancel: () => {
               },
@@ -1158,46 +1165,46 @@ const ct = v.createContext({}), V = v.createContext(
         } catch {
         }
     },
-    [a, t]
+    [s, t]
     // Depend on onAction to ensure we call the latest version
   );
-  v.useEffect(() => {
+  x.useEffect(() => {
     const c = n.current;
     if (!c) return;
     let d = null;
-    const A = () => {
-      J(), S ? (d !== null && cancelAnimationFrame(d), d = requestAnimationFrame(() => {
+    const I = () => {
+      J(), A ? (d !== null && cancelAnimationFrame(d), d = requestAnimationFrame(() => {
         Z();
         const T = _();
-        D(T);
+        Q(T);
       })) : (d !== null && cancelAnimationFrame(d), d = requestAnimationFrame(() => {
         const T = _();
-        D(T);
+        Q(T);
       }));
     }, C = () => J(), b = () => J();
-    return c.addEventListener("scroll", A, { passive: !0 }), c.addEventListener("touchstart", C, {
+    return c.addEventListener("scroll", I, { passive: !0 }), c.addEventListener("touchstart", C, {
       passive: !0
     }), c.addEventListener("mousedown", b), () => {
-      c.removeEventListener("scroll", A), c.removeEventListener("touchstart", C), c.removeEventListener("mousedown", b), y.current && clearTimeout(y.current), d !== null && cancelAnimationFrame(d);
+      c.removeEventListener("scroll", I), c.removeEventListener("touchstart", C), c.removeEventListener("mousedown", b), y.current && clearTimeout(y.current), d !== null && cancelAnimationFrame(d);
     };
   }, [
-    S,
+    A,
     J,
     Z,
     _,
-    D
-  ]), v.useEffect(() => {
-    if (h) {
-      const c = h.getControlProps(t);
+    Q
+  ]), x.useEffect(() => {
+    if (f) {
+      const c = f.getControlProps(t);
       c && c !== u && R(c);
     }
-  }, [t, h, u]), v.useEffect(() => {
+  }, [t, f, u]), x.useEffect(() => {
     if (u.currentIndex !== void 0 && n.current && g.length > 0 && P > 0) {
       const c = Math.max(
         0,
         Math.min(u.currentIndex, g.length - 1)
       ), d = _();
-      c !== d && W(c, !0);
+      c !== d && B(c, !0);
     }
   }, [
     u.currentIndex,
@@ -1205,41 +1212,41 @@ const ct = v.createContext({}), V = v.createContext(
     g.length,
     P,
     F,
-    $,
-    W,
+    z,
+    B,
     _
-  ]), v.useEffect(() => {
-    if (S && n.current && g.length > 0 && g.length > 0 && ($ ? F > 0 : P > 0)) {
-      const c = $ ? F : P;
+  ]), x.useEffect(() => {
+    if (A && n.current && g.length > 0 && g.length > 0 && (z ? F > 0 : P > 0)) {
+      const c = z ? F : P;
       setTimeout(() => {
-        n.current && ($ ? n.current.scrollTop = c : n.current.scrollLeft = c);
+        n.current && (z ? n.current.scrollTop = c : n.current.scrollLeft = c);
       }, 0);
     }
-  }, [S, g.length, P, F, $]), v.useEffect(() => {
-    if (!h) return;
-    const { registerContainer: c, unregisterContainer: d } = h;
+  }, [A, g.length, P, F, z]), x.useEffect(() => {
+    if (!f) return;
+    const { registerContainer: c, unregisterContainer: d } = f;
     return () => {
     };
   }, [
     t,
-    h?.registerContainer,
-    h?.unregisterContainer,
+    f?.registerContainer,
+    f?.unregisterContainer,
     // controlProps, // REMOVED to break infinite loop
-    W,
+    B,
     _
   ]);
-  const kt = {
+  const $t = {
     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
-  }, $t = {
+  }, zt = {
     flexShrink: 0,
     scrollSnapAlign: "start",
     width: X.width > 0 ? X.width : void 0,
@@ -1254,7 +1261,7 @@ const ct = v.createContext({}), V = v.createContext(
       "data-type": "SliderComponent",
       ref: l,
       style: E,
-      children: /* @__PURE__ */ p("div", { ref: n, style: kt, children: q.map((c, d) => /* @__PURE__ */ p(
+      children: /* @__PURE__ */ p("div", { ref: n, style: $t, children: q.map((c, d) => /* @__PURE__ */ p(
         V.Provider,
         {
           value: {
@@ -1264,32 +1271,32 @@ const ct = v.createContext({}), V = v.createContext(
             },
             isFlex: !1
           },
-          children: /* @__PURE__ */ p("div", { style: $t, children: c })
+          children: /* @__PURE__ */ p("div", { style: zt, children: c })
         },
         c.key || `slide-${d}`
       )) })
     }
   );
-}, zt = (t, r) => {
+}, kt = (t, r) => {
   const e = Array.isArray(t) ? t : [t];
   for (const o of e)
     if (!(!o || !o.props)) {
       if (o.props.id === r)
         return o;
       if (o.props.children) {
-        const i = zt(o.props.children, r);
+        const i = kt(o.props.children, r);
         if (i) return i;
       }
     }
   return null;
 }, Rt = ({ id: t, name: r, nodeData: e, children: o }) => {
-  const { dimensions: i, ref: l } = rt(), { componentId: n } = N(lt), m = N(V), s = e.style.originalSize?.[0] || 1, y = e.style.originalSize?.[1] || 1, I = m?.dimensions?.width, h = m?.dimensions?.height, a = window.innerWidth, u = window.innerHeight, R = I && I > 0 && I < a * 0.8;
-  let w, x;
-  i.width > 0 && i.height > 0 ? (w = i.width, x = i.height) : R && I && h || I && h && I > 0 && h > 0 ? (w = I, x = h) : (w = a, x = u);
-  const z = { scaleFactor: Math.min(w / s, x / y) || 1 };
+  const { dimensions: i, ref: l } = rt(), { componentId: n } = N(lt), m = N(V), a = e.style.originalSize?.[0] || 1, y = e.style.originalSize?.[1] || 1, v = m?.dimensions?.width, f = m?.dimensions?.height, s = window.innerWidth, u = window.innerHeight, R = v && v > 0 && v < s * 0.8;
+  let w, S;
+  i.width > 0 && i.height > 0 ? (w = i.width, S = i.height) : R && v && f || v && f && v > 0 && f > 0 ? (w = v, S = f) : (w = s, S = u);
+  const $ = { scaleFactor: Math.min(w / a, S / y) || 1 };
   if (n) {
-    const E = zt(o, n);
-    return E ? /* @__PURE__ */ p(ct.Provider, { value: z, children: /* @__PURE__ */ p(
+    const E = kt(o, n);
+    return E ? /* @__PURE__ */ p(ct.Provider, { value: $, children: /* @__PURE__ */ p(
       V.Provider,
       {
         value: {
@@ -1302,18 +1309,18 @@ const ct = v.createContext({}), V = v.createContext(
       }
     ) }) : (console.warn(`Child with id "${n}" not found`), null);
   }
-  const f = Array.isArray(o) ? o : [o], { scrollableChildren: S, nonScrollableChildren: O } = f.reduce(
+  const h = Array.isArray(o) ? o : [o], { scrollableChildren: A, nonScrollableChildren: G } = h.reduce(
     (E, H) => {
-      const G = H.props.nodeData.type === "container:top-bar" ? "nonScrollableChildren" : "scrollableChildren";
-      return E[G].push(H), E;
+      const M = H.props.nodeData.type === "container:top-bar" ? "nonScrollableChildren" : "scrollableChildren";
+      return E[M].push(H), E;
     },
     {
       scrollableChildren: [],
       nonScrollableChildren: []
     }
   );
-  let M = e.style?.layout?.mode;
-  if (!M && t === "01KASW494V02Y8P5JVWV5XK62X" && (console.log("🔧 PATCHING missing layout for page", t), M = "HORIZONTAL"), !M && o) {
+  let O = e.style?.layout?.mode;
+  if (!O && t === "01KASW494V02Y8P5JVWV5XK62X" && (console.log("🔧 PATCHING missing layout for page", t), O = "HORIZONTAL"), !O && o) {
     const E = Array.isArray(o) ? o : [o];
     let H = 0, U = 0;
     E.forEach((g) => {
@@ -1321,12 +1328,12 @@ const ct = v.createContext({}), V = v.createContext(
       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");
+    ), O = "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 j = M === "HORIZONTAL" ? "row" : "column", K = O.some(
+  const j = O === "HORIZONTAL" ? "row" : "column", K = G.some(
     (E) => E?.props?.nodeData?.type !== "container:background"
   );
-  return /* @__PURE__ */ p(ct.Provider, { value: z, children: /* @__PURE__ */ it(
+  return /* @__PURE__ */ p(ct.Provider, { value: $, children: /* @__PURE__ */ it(
     "div",
     {
       style: {
@@ -1345,7 +1352,7 @@ const ct = v.createContext({}), V = v.createContext(
       },
       ref: l,
       children: [
-        O.filter(
+        G.filter(
           (E) => E?.props?.nodeData?.type === "container:background"
         ).map((E, H) => /* @__PURE__ */ p(
           V.Provider,
@@ -1360,7 +1367,7 @@ const ct = v.createContext({}), V = v.createContext(
           },
           `bg-${H}`
         )),
-        K && O.filter(
+        K && G.filter(
           (E) => E?.props?.nodeData?.type !== "container:background"
         ).map((E, H) => /* @__PURE__ */ p(
           V.Provider,
@@ -1397,14 +1404,14 @@ const ct = v.createContext({}), V = v.createContext(
                 debug: !1
               })
             },
-            children: S
+            children: A
           }
         ) })
       ]
     }
   ) });
-}, Qt = {
-  WebViewComponent: ft,
+}, Dt = {
+  WebViewComponent: ht,
   ColorComponent: gt,
   GradientComponent: mt,
   ImageComponent: yt,
@@ -1422,18 +1429,18 @@ const ct = v.createContext({}), V = v.createContext(
   BackgroundContainerComponent: Tt,
   ContainerComponent: pt,
   CompoundComponent: Pt,
-  TopBarContainerComponent: Wt,
+  TopBarContainerComponent: Bt,
   DefaultLayerComponent: Ut,
-  TabsMenuComponent: Bt,
-  MenuSideComponent: Lt,
+  TabsMenuComponent: Lt,
+  MenuSideComponent: Wt,
   SliderComponent: at,
   PageComponent: Rt,
   // Type string mappings for dynamically loaded components
-  "menu:side": Lt,
+  "menu:side": Wt,
   "page:default": Rt,
   "container:background": Tt,
   "container:default": pt,
-  "container:top-bar": Wt,
+  "container:top-bar": Bt,
   "container:slider": at,
   "component:text": Et,
   "component:color": gt,
@@ -1445,7 +1452,7 @@ const ct = v.createContext({}), V = v.createContext(
   "component:stateful-set": dt,
   "component:stateful-compound": Ft,
   "component:slider": at,
-  "component:webview": ft,
+  "component:webview": ht,
   "component:lottie": wt,
   "component:email-input": bt,
   "component:text-input": It,
@@ -1453,10 +1460,10 @@ const ct = v.createContext({}), V = v.createContext(
   "component:select-input": vt,
   "component:image-input": St,
   "component:hidden-input": Ct,
-  "component:tabs-menu": Bt,
+  "component:tabs-menu": Lt,
   ContainerSliderComponent: at
 };
 export {
-  Qt as default
+  Dt as default
 };
 //# sourceMappingURL=components.js.map