@bravostudioai/react 0.1.45 → 0.1.47

package/dist/components.js

@@ -1,95 +1,95 @@
-import { jsx as d, jsxs as it, Fragment as pt } from "react/jsx-runtime";
-import v, { useContext as M, useMemo as Ht, useState as Mt, useCallback as Nt } from "react";
+import { jsx as d, jsxs as pt, Fragment as Vt } from "react/jsx-runtime";
+import v, { useContext as N, useMemo as Ht, useState as Nt, useCallback as Ot } from "react";
 import q from "./contexts/EncoreBindingContext.js";
-import $ from "./stores/useEncoreState.js";
-import lt from "./contexts/EncoreComponentIdContext.js";
-import Ot from "axios";
-import ht from "./contexts/EncoreActionContext.js";
+import k from "./stores/useEncoreState.js";
+import st from "./contexts/EncoreComponentIdContext.js";
+import Mt from "axios";
+import ft from "./contexts/EncoreActionContext.js";
 import Gt from "./contexts/EncoreRepeatingContainerContext.js";
-const ct = v.createContext({}), H = v.createContext(
+const lt = v.createContext({}), H = v.createContext(
   {}
-), st = (t) => t.replace(/#(\w{2})(\w{6})/, "#$2$1"), jt = (t) => t.slice(1, 3) === "00", Ut = (t) => {
+), at = (t) => t.replace(/#(\w{2})(\w{6})/, "#$2$1"), jt = (t) => t.slice(1, 3) === "00", Ut = (t) => {
   if (!Array.isArray(t)) return null;
   const r = t.find((n) => n.startsWith("input-group:"));
   if (!r) return null;
   const e = r.split(":");
   return e.length >= 3 ? { type: e[1], groupName: e[2] } : null;
-}, rt = () => {
-  const [t, r] = Mt({ width: 0, height: 0 }), e = v.useRef(null);
+}, it = () => {
+  const [t, r] = Nt({ width: 0, height: 0 }), e = v.useRef(null);
   return v.useEffect(() => {
     if (!e.current) return;
     const n = e.current, i = () => {
-      const { width: o, height: p } = n.getBoundingClientRect();
-      r({ width: o, height: p });
+      const { width: o, height: f } = n.getBoundingClientRect();
+      r({ width: o, height: f });
     };
     i(), requestAnimationFrame(() => {
       i();
     });
     const s = new ResizeObserver((o) => {
-      for (const p of o) {
-        const a = p.contentRect;
+      for (const f of o) {
+        const a = f.contentRect;
         r({ width: a.width, height: a.height });
       }
     });
     return s.observe(n), () => s.disconnect();
   }, []), { dimensions: t, ref: e };
 }, W = (t, r = {}) => {
-  const e = M(ct), n = M(H), i = {
+  const e = N(lt), n = N(H), i = {
     width: window.innerWidth,
     height: window.innerHeight
-  }, s = Nt(
+  }, s = Ot(
     (l) => (n.dimensions?.width ?? 0) * 0.01 * l,
     [n.dimensions?.width]
   ), o = {};
   r = { debug: !1, ...r };
-  const p = $((l) => l.fontsById || {});
-  if ($((l) => l.fontsByIdFull || {}), !t || !t) return;
-  const a = n.dimensions?.width ?? i.width, g = n.dimensions?.height ?? i.height;
+  const f = k((l) => l.fontsById || {});
+  if (k((l) => l.fontsByIdFull || {}), !t || !t) return;
+  const a = n.dimensions?.width ?? i.width, h = n.dimensions?.height ?? i.height;
   t.layout?.mode === "GRID" && console.log("[DEBUG] GRID MODE DETECTED", {
     id: "unknown",
     // style object doesn't have ID context here easily without prop drill
     layout: t.layout
-  }), t.layout?.layoutSizingHorizontal || t.layout?.layoutSizingVertical || (t.width && a > 0 && (o.width = t.width * a * 0.01), t.aspectRatio && t.width ? a > 0 && (o.height = t.width * a * 0.01 / t.aspectRatio) : t.height && g > 0 && (o.height = t.height * g * 0.01));
-  const f = n?.isFlex ?? !1;
-  if (!f && t.positioning) {
-    const l = t.layout?.layoutSizingHorizontal === "FIXED" || t.layout?.layoutSizingVertical === "FIXED", I = l && t.positioning.top < 0 ? 0 : t.positioning.top, F = l && t.positioning.left < 0 ? 0 : t.positioning.left;
-    let w = !1;
-    t.horizontalPosition === "center" && (w = !0), o.top = `${I}%`;
-    const k = !!t.inset;
-    if (w) {
-      if (k) {
-        const T = String(t.inset).split(/\s+/);
-        T.length === 3 ? o.inset = `${T[0]} 50% ${T[2]} auto` : T.length === 4 && (o.inset = `${T[0]} 50% ${T[2]} auto`), delete o.left, delete o.right;
+  }), t.layout?.layoutSizingHorizontal || t.layout?.layoutSizingVertical || (t.width && a > 0 && (o.width = t.width * a * 0.01), t.aspectRatio && t.width ? a > 0 && (o.height = t.width * a * 0.01 / t.aspectRatio) : t.height && h > 0 && (o.height = t.height * h * 0.01));
+  const g = n?.isFlex ?? !1;
+  if (!g && t.positioning) {
+    const l = t.layout?.layoutSizingHorizontal === "FIXED" || t.layout?.layoutSizingVertical === "FIXED", S = l && t.positioning.top < 0 ? 0 : t.positioning.top, w = l && t.positioning.left < 0 ? 0 : t.positioning.left;
+    let L = !1;
+    t.horizontalPosition === "center" && (L = !0), o.top = `${S}%`;
+    const E = !!t.inset;
+    if (L) {
+      if (E) {
+        const c = String(t.inset).split(/\s+/);
+        c.length === 3 ? o.inset = `${c[0]} 50% ${c[2]} auto` : c.length === 4 && (o.inset = `${c[0]} 50% ${c[2]} auto`), delete o.left, delete o.right;
       } else
         o.left = "50%", o.right = "auto";
       o.transform = "translateX(-50%)";
     } else
-      k ? o.inset = t.inset : o.left = `${F}%`;
+      E ? o.inset = t.inset : o.left = `${w}%`;
     l ? (o.right = "auto", o.bottom = "auto") : (t.positioning.bottom !== void 0 && (o.bottom = `${t.positioning.bottom}%`), t.positioning.right !== void 0 && (o.right = `${t.positioning.right}%`)), o.position = "absolute";
   }
   if (t.layout?.padding) {
-    const l = e.scaleFactor ?? 1, I = t.layout.padding;
-    I.top !== void 0 && (o.paddingTop = I.top * l), I.right !== void 0 && (o.paddingRight = I.right * l), I.bottom !== void 0 && (o.paddingBottom = I.bottom * l), I.left !== void 0 && (o.paddingLeft = I.left * l);
+    const l = e.scaleFactor ?? 1, S = t.layout.padding;
+    S.top !== void 0 && (o.paddingTop = S.top * l), S.right !== void 0 && (o.paddingRight = S.right * l), S.bottom !== void 0 && (o.paddingBottom = S.bottom * l), S.left !== void 0 && (o.paddingLeft = S.left * l);
   }
   if (t.layout?.mode) {
     o.display = "flex";
-    const l = (T) => T ? {
+    const l = (c) => c ? {
       MIN: "flex-start",
       MAX: "flex-end",
       CENTER: "center",
       SPACE_BETWEEN: "space-between",
       SPACE_AROUND: "space-around",
       SPACE_EVENLY: "space-evenly"
-    }[T] || T.toLowerCase().replace(/_/g, "-") : void 0;
+    }[c] || c.toLowerCase().replace(/_/g, "-") : void 0;
     t.layout.mode == "HORIZONTAL" || t.layout.mode == "GRID" ? (o.flexDirection = "row", t.layout.flexWrap && (o.flexWrap = t.layout.flexWrap), o.justifyContent = l(
       t.layout.primaryAxisAlignItems
     ), o.alignItems = t.layout.counterAxisAlignItems) : (o.flexDirection = "column", o.justifyContent = l(
       t.layout.primaryAxisAlignItems
     ), o.alignItems = t.layout.counterAxisAlignItems), o.flexGrow = t.layout.grow, t.layout.wrap === "WRAP" || t.layout.flexWrap === "wrap" || t.layout.mode === "GRID" ? o.flexWrap = "wrap" : t.layout.flexWrap ? o.flexWrap = t.layout.flexWrap : o.flexWrap = "nowrap";
-    const I = t.layout.itemSpacing, F = e.scaleFactor ?? 1, k = t.layout.primaryAxisAlignItems === "SPACE_BETWEEN" ? 0 : (I !== void 0 ? I : 0) * F;
-    o.gap = k === 0 ? "0px" : `${k}px`, o.rowGap = k === 0 ? "0px" : `${k}px`, o.columnGap = k === 0 ? "0px" : `${k}px`, (o.flexWrap === "wrap" || o.flexWrap === "wrap-reverse") && (o.alignContent = "flex-start"), r.debug || t.layout?.mode === "HORIZONTAL" && I === 0 ? console.log("[useEncoreStyle] Setting gap properties:", {
-      itemSpacing: I,
-      spacing: k,
+    const S = t.layout.itemSpacing, w = e.scaleFactor ?? 1, E = t.layout.primaryAxisAlignItems === "SPACE_BETWEEN" ? 0 : (S !== void 0 ? S : 0) * w;
+    o.gap = E === 0 ? "0px" : `${E}px`, o.rowGap = E === 0 ? "0px" : `${E}px`, o.columnGap = E === 0 ? "0px" : `${E}px`, (o.flexWrap === "wrap" || o.flexWrap === "wrap-reverse") && (o.alignContent = "flex-start"), r.debug || t.layout?.mode === "HORIZONTAL" && S === 0 ? console.log("[useEncoreStyle] Setting gap properties:", {
+      itemSpacing: S,
+      spacing: E,
       gap: o.gap,
       rowGap: o.rowGap,
       columnGap: o.columnGap,
@@ -99,10 +99,10 @@ const ct = v.createContext({}), H = v.createContext(
       "[useEncoreStyle] No gap properties set",
       r.debug,
       t.layout?.mode,
-      I
+      S
     );
   }
-  if (t.layout?.layoutSizingHorizontal === "FILL" && (f || (o.width = "100%")), t.layout?.layoutSizingHorizontal === "FIXED") {
+  if (t.layout?.layoutSizingHorizontal === "FILL" && (g || (o.width = "100%")), t.layout?.layoutSizingHorizontal === "FIXED") {
     const l = e.scaleFactor ?? 1;
     o.width = t.layout.size.x * l;
   }
@@ -112,12 +112,12 @@ const ct = v.createContext({}), H = v.createContext(
   }
   if (t.layout?.layoutSizingVertical === "FILL")
     if (!(n?.isFlex ?? !1) && t.positioning && t.positioning?.top !== void 0) {
-      const w = 100 - t.positioning.top;
-      o.height = `${w}%`;
+      const L = 100 - t.positioning.top;
+      o.height = `${L}%`;
     } else
       o.height = "100%";
-  t.layout?.layoutSizingVertical, t.backgroundColor && !jt(t.backgroundColor) && (o.backgroundColor = st(t.backgroundColor)), t.color && (o.color = st(t.color)), t.lineHeightPx && (o.lineHeight = (t.lineHeightPx * (e.scaleFactor ?? 1)).toString() + "px"), t.fontSize && (o.fontSize = t.fontSize * (e.scaleFactor ?? 1)), t.fontWeight && (o.fontWeight = `${t.fontWeight}`), t.opacity && (o.opacity = t.opacity * 0.01);
-  const y = (t.fontId ? p[t.fontId] : void 0) || t.fontFamily || void 0;
+  t.layout?.layoutSizingVertical, t.backgroundColor && !jt(t.backgroundColor) && (o.backgroundColor = at(t.backgroundColor)), t.color && (o.color = at(t.color)), t.lineHeightPx && (o.lineHeight = (t.lineHeightPx * (e.scaleFactor ?? 1)).toString() + "px"), t.fontSize && (o.fontSize = t.fontSize * (e.scaleFactor ?? 1)), t.fontWeight && (o.fontWeight = `${t.fontWeight}`), t.opacity && (o.opacity = t.opacity * 0.01);
+  const y = (t.fontId ? f[t.fontId] : void 0) || t.fontFamily || void 0;
   if (y ? ([
     "sans-serif",
     "serif",
@@ -138,9 +138,9 @@ const ct = v.createContext({}), H = v.createContext(
     const l = t.cornerRadii.map(s);
     o.borderTopLeftRadius = l[0], o.borderTopRightRadius = l[1], o.borderBottomRightRadius = l[2], o.borderBottomLeftRadius = l[3], delete o.borderRadius;
   }
-  return t.borderWidth && (t.borderWidth > 5 ? o.borderWidth = t.borderWidth * 0.5 : o.borderWidth = t.borderWidth * 1.5), t.borderColor && (o.borderColor = st(t.borderColor)), (t.borderWidth || t.borderColor) && (o.borderStyle = "solid"), t.rotation && (o.transform = `rotate(${t.rotation}deg)`), t.textCase === "upper" && (o.textTransform = "uppercase"), t.textCase === "lower" && (o.textTransform = "lowercase"), t.letterSpacing && (o.letterSpacing = t.letterSpacing), t.textAlign && (o.textAlign = t.textAlign), r.debug && (o.borderWidth = 1, o.borderColor = "#FF0000FF", o.borderStyle = "solid"), o;
+  return t.borderWidth && (t.borderWidth > 5 ? o.borderWidth = t.borderWidth * 0.5 : o.borderWidth = t.borderWidth * 1.5), t.borderColor && (o.borderColor = at(t.borderColor)), (t.borderWidth || t.borderColor) && (o.borderStyle = "solid"), t.rotation && (o.transform = `rotate(${t.rotation}deg)`), t.textCase === "upper" && (o.textTransform = "uppercase"), t.textCase === "lower" && (o.textTransform = "lowercase"), t.letterSpacing && (o.letterSpacing = t.letterSpacing), t.textAlign && (o.textAlign = t.textAlign), r.debug && (o.borderWidth = 1, o.borderColor = "#FF0000FF", o.borderStyle = "solid"), o;
 }, J = ({ id: t, nodeData: r }) => {
-  const e = M(q), n = e?.nodeData?.[t], { patch: i, list: s } = n ?? { list: null, patch: null }, p = Array.isArray(r?.tags) && (r.tags.includes("encore:data:array") || r.tags.includes("bravo:data:array")) && e?.arrayDataById && e.arrayDataById[t] && Array.isArray(e.arrayDataById[t]) ? e.arrayDataById[t] : null;
+  const e = N(q), n = e?.nodeData?.[t], { patch: i, list: s } = n ?? { list: null, patch: null }, f = Array.isArray(r?.tags) && (r.tags.includes("encore:data:array") || r.tags.includes("bravo:data:array")) && e?.arrayDataById && e.arrayDataById[t] && Array.isArray(e.arrayDataById[t]) ? e.arrayDataById[t] : null;
   let a = i ? {
     ...r,
     ...i || {},
@@ -148,45 +148,45 @@ const ct = v.createContext({}), H = v.createContext(
     // Preserve original actions if patch has empty or missing actions
     actions: i.actions && Array.isArray(i.actions) && i.actions.length > 0 ? i.actions : r.actions || i.actions || []
   } : r;
-  const g = e?.textOverridesById && e.textOverridesById[t] !== void 0 ? e.textOverridesById[t] : void 0;
-  g !== void 0 && Array.isArray(r?.tags) && r.tags.includes("PROP:TEXT_VAR") && (a = {
+  const h = e?.textOverridesById && e.textOverridesById[t] !== void 0 ? e.textOverridesById[t] : void 0;
+  h !== void 0 && Array.isArray(r?.tags) && r.tags.includes("PROP:TEXT_VAR") && (a = {
     ...a,
-    data: { ...a?.data || {}, text: String(g) }
+    data: { ...a?.data || {}, text: String(h) }
   });
-  const E = 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 = {
+  const I = Array.isArray(r?.tags) && (r.tags.includes("encore:data") || r.tags.includes("bravo:data")), g = e?.rootData;
+  g && g[t] && typeof g[t] == "object" && (a = {
     ...a,
     data: {
       ...a.data || {},
-      ...f[t]
+      ...g[t]
     }
   });
   const y = e?.nodeData && typeof e.nodeData == "object";
-  if (E || y) {
+  if (I || y) {
     const l = e?.nodeData;
     if (l && typeof l == "object") {
       if (l[t] !== void 0) {
-        const F = l[t];
-        F && typeof F == "object" && a.data && (a = {
+        const w = l[t];
+        w && typeof w == "object" && a.data && (a = {
           ...a,
           data: {
             ...a.data,
-            ...F
+            ...w
           }
         });
-      } else if (E && l.description && a.data && (a = {
+      } else if (I && l.description && a.data && (a = {
         ...a,
         data: {
           ...a.data,
           text: l.description
         }
       }), l.image && a.data) {
-        const F = l.image.startsWith("//") ? `https:${l.image}` : l.image;
+        const w = l.image.startsWith("//") ? `https:${l.image}` : l.image;
         a = {
           ...a,
           data: {
             ...a.data,
-            imageUrl: F
+            imageUrl: w
           }
         };
       }
@@ -195,10 +195,10 @@ const ct = v.createContext({}), H = v.createContext(
   }
   return {
     patch: i,
-    list: s || p,
+    list: s || f,
     // Use arrayData if list is not provided
     patchedNodeData: a,
-    arrayData: p
+    arrayData: f
     // Also return separately for components that need it
   };
 }, Q = ({
@@ -209,37 +209,30 @@ const ct = v.createContext({}), H = v.createContext(
   _parentInputGroupInfo: i,
   _parentName: s
 }) => {
-  const o = $((h) => h.baseURL), p = $((h) => h.appId);
-  $((h) => h.pageId);
-  const { onAction: a } = v.useContext(ht), { statefulSetId: g } = v.useContext(
-    lt
-  ), E = n || g, { patchedNodeData: f } = J({ id: t, nodeData: r }), y = $(
-    (h) => h.setStatefulSetVariant
-  ), l = $(
-    (h) => h.setInputGroupValue
-  ), I = $((h) => h.setAccessToken), { app: F } = $((h) => h.app);
-  F.data?.app?.startPageId, F.data?.app?.PageId;
-  const w = W(
-    {
-      positioning: r.style?.positioning
-    },
-    { debug: !1 }
-  );
-  w.zIndex = 99999, w.backgroundColor = "transparent", w.position = "absolute", w.top = "0", w.left = "0", w.right = "0", w.bottom = "0", w.width = "100%", w.height = "100%", w.pointerEvents = "auto", w.isolation = "isolate";
-  const k = async (h) => {
-    let S = !1;
-    const G = () => {
-      S = !1;
+  const o = k((c) => c.baseURL), f = k((c) => c.appId);
+  k((c) => c.pageId);
+  const { onAction: a } = v.useContext(ft), { statefulSetId: h } = v.useContext(
+    st
+  ), I = n || h, { patchedNodeData: g } = J({ id: t, nodeData: r }), y = k(
+    (c) => c.setStatefulSetVariant
+  ), l = k(
+    (c) => c.setInputGroupValue
+  ), S = k((c) => c.setAccessToken), { app: w } = k((c) => c.app);
+  w.data?.app?.startPageId, w.data?.app?.PageId;
+  const L = async (c) => {
+    let $ = !1;
+    const A = () => {
+      $ = !1;
     };
     if (typeof a == "function")
       try {
-        await a({ bravo: { cancel: G, action: h, componentId: t } }), S = !0;
+        await a({ bravo: { cancel: A, action: c, componentId: t } }), $ = !0;
       } catch {
       }
     else
-      S = !0;
-    if (S)
-      switch (h.action) {
+      $ = !0;
+    if ($)
+      switch (c.action) {
         case "login":
         // TODO firebase
         // TODO oauth
@@ -249,7 +242,7 @@ const ct = v.createContext({}), H = v.createContext(
         case "submit":
           break;
         case "email":
-          window.location.href = `mailto:${h.params.email}`;
+          window.location.href = `mailto:${c.params.email}`;
           break;
         case "goback":
           break;
@@ -258,22 +251,22 @@ const ct = v.createContext({}), H = v.createContext(
         case "homepage":
           break;
         case "logout":
-          I(void 0);
+          S(void 0);
           break;
         case "none":
           break;
         case "openurl":
-          window.open(h.params.url, "_blank");
+          window.open(c.params.url, "_blank");
           break;
         case "phone":
-          window.location.href = `tel:${h.params.phone}`;
+          window.location.href = `tel:${c.params.phone}`;
           break;
         case "remote":
-          const N = btoa(JSON.stringify(h.params?.data || {})), j = `${o}/devices/apps/${p}/node/${t}/trigger/${h.event}?params=${N}`, D = await Ot.post(j);
-          D.data?.action && await k(D.data);
+          const O = btoa(JSON.stringify(c.params?.data || {})), U = `${o}/devices/apps/${f}/node/${t}/trigger/${c.event}?params=${O}`, M = await Mt.post(U);
+          M.data?.action && await L(M.data);
           break;
         case "set-access-token":
-          I(h.params);
+          S(c.params);
           break;
         case "set-state":
           if (i && s)
@@ -299,65 +292,60 @@ const ct = v.createContext({}), H = v.createContext(
                     componentId: t
                   }
                 }), console.log("✅ Input group change event fired");
-              } catch (A) {
-                console.error("❌ Error in onAction callback:", A);
+              } catch (G) {
+                console.error("❌ Error in onAction callback:", G);
               }
             else
               console.warn("⚠️ No onAction callback provided");
           else {
-            let A = E || h.params?.stateSetId || f.data?.stateSetId;
-            if (!A) {
+            let G = I || c.params?.stateSetId || g.data?.stateSetId;
+            if (!G) {
               console.error("❌ No stateSetId found in action or nodeData!", {
-                actionParams: h.params,
-                nodeDataStateSetId: f.data?.stateSetId,
-                parentStatefulSetId: E
+                actionParams: c.params,
+                nodeDataStateSetId: g.data?.stateSetId,
+                parentStatefulSetId: I
               });
               break;
             }
-            y(A, h.params.state);
+            y(G, c.params.state);
           }
           break;
         case "showalert":
-          alert(h.params.message);
+          alert(c.params.message);
           break;
         default:
-          console.log(h), alert(h.action);
+          console.log(c), alert(c.action);
       }
   };
   if (r.href)
-    return /* @__PURE__ */ it(pt, { children: [
-      /* @__PURE__ */ d(
-        "button",
-        {
-          type: "button",
-          onClick: () => k({
-            action: "goto",
-            params: { href: r.href },
-            event: "tap"
-          }),
-          style: {
-            ...w,
-            cursor: "pointer",
-            background: "transparent",
-            border: "none",
-            padding: 0
-          },
-          "aria-label": `Go to ${r.href}`
-        }
-      ),
-      e
-    ] });
-  let T = f.actions && f.actions.length > 0 ? f.actions : r.actions || [];
-  if (E && T.length > 0 && (T = T.map((h) => h.action === "set-state" ? (h.params?.stateSetId, {
-    ...h,
+    return /* @__PURE__ */ d(
+      "div",
+      {
+        onClick: () => L({
+          action: "goto",
+          params: { href: r.href },
+          event: "tap"
+        }),
+        style: {
+          display: "contents",
+          cursor: "pointer"
+        },
+        role: "button",
+        "aria-label": `Go to ${r.href}`,
+        children: e
+      }
+    );
+  let E = g.actions && g.actions.length > 0 ? g.actions : r.actions || [];
+  if (I && E.length > 0 && (E = E.map((c) => c.action === "set-state" ? (c.params?.stateSetId, {
+    ...c,
     params: {
-      ...h.params,
-      stateSetId: E
+      ...c.params,
+      stateSetId: I
       // Always use parent's id
     }
-  }) : h)), T.length === 0 && (f.data?.stateSetId || E))
+  }) : c)), E.length === 0 && (g.data?.stateSetId || I))
     if (i && s)
-      T = [
+      E = [
         {
           action: "set-state",
           params: {
@@ -368,13 +356,13 @@ const ct = v.createContext({}), H = v.createContext(
         }
       ];
     else {
-      const h = E || f.data.stateSetId;
-      h ? T = [
+      const c = I || g.data.stateSetId;
+      c ? E = [
         {
           action: "set-state",
           params: {
-            state: $.getState().statefulSetVariants[h] === "active" ? "default" : "active",
-            stateSetId: h
+            state: k.getState().statefulSetVariants[c] === "active" ? "default" : "active",
+            stateSetId: c
             // Use parent's id or button's stateSetId
           },
           event: "tap"
@@ -384,25 +372,35 @@ const ct = v.createContext({}), H = v.createContext(
         { id: t, name: r.name }
       );
     }
-  if (T && T.length > 0) {
-    const h = T[0];
-    return h.event !== "tap" ? e : /* @__PURE__ */ it(pt, { children: [
-      e,
-      /* @__PURE__ */ d(
-        "div",
+  if (E && E.length > 0) {
+    const c = E[0];
+    if (c.event === "tap") {
+      const $ = (O) => {
+        O.stopPropagation(), L(c);
+      }, A = {
+        display: "contents",
+        cursor: "pointer"
+        // Ensure the wrapper doesn't block pointer events, but its children should capture them.
+        // pointerEvents: 'auto' is default.
+      };
+      return c.action === "openurl" && c.params?.url ? /* @__PURE__ */ d(
+        "a",
         {
-          onClick: (S) => {
-            S.stopPropagation(), k(h);
+          href: c.params.url,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          onClick: (O) => {
+            O.stopPropagation();
           },
-          onMouseDown: (S) => S.stopPropagation(),
-          onMouseUp: (S) => S.stopPropagation(),
-          style: { ...w, cursor: "pointer", pointerEvents: "auto" }
+          style: A,
+          "aria-label": r.name || "Open Link",
+          children: e
         }
-      )
-    ] });
+      ) : /* @__PURE__ */ d("div", { onClick: $, style: A, children: e });
+    }
   }
   return e;
-}, dt = ({ id: t, name: r, nodeData: e }) => {
+}, ct = ({ id: t, name: r, nodeData: e }) => {
   const { patchedNodeData: n } = J({ id: t, nodeData: e }), i = W(n.style, {
     debug: !1
   });
@@ -421,34 +419,34 @@ const ct = v.createContext({}), H = v.createContext(
   e = n;
   const i = W(e.style, {
     debug: !1
-  }), s = $((a) => a.assetsById), o = e.style?.scaleMode || "fill";
+  }), s = k((a) => a.assetsById), o = e.style?.scaleMode || "fill";
   o === "fill" ? i.objectFit = "cover" : o === "fit" && (i.objectFit = "contain"), i.objectPosition = "center";
-  let p = e.data?.videoUrl;
-  return !p && e.encoreData?.video && (p = e.encoreData.video), p || (p = s[e.assetId]?.url), !p && !i.backgroundColor && !i.borderColor ? null : /* @__PURE__ */ d(
+  let f = e.data?.videoUrl;
+  return !f && e.encoreData?.video && (f = e.encoreData.video), f || (f = s[e.assetId]?.url), !f && !i.backgroundColor && !i.borderColor ? null : /* @__PURE__ */ d(
     "video",
     {
       "data-id": t,
       "data-name": r,
       "data-type": "VideoComponent",
       style: { ...i },
-      src: p,
+      src: f,
       controls: !0,
       playsInline: !0
     }
   );
-}, gt = ({ id: t, name: r, nodeData: e }) => {
+}, ht = ({ id: t, name: r, nodeData: e }) => {
   const n = W(e.style, {
     debug: !1
   });
   if (!n.backgroundColor && !n.borderColor)
     return null;
   if (n.borderColor && !n.backgroundColor && (n.backgroundColor = "transparent"), n.borderColor && n.borderWidth) {
-    const E = Math.max(n.borderWidth || 0, 1);
-    (!n.width || typeof n.width == "number" && n.width === 0) && (n.width = E), (!n.height || typeof n.height == "number" && n.height === 0) && (n.height = E), n.boxSizing = "border-box";
+    const I = Math.max(n.borderWidth || 0, 1);
+    (!n.width || typeof n.width == "number" && n.width === 0) && (n.width = I), (!n.height || typeof n.height == "number" && n.height === 0) && (n.height = I), n.boxSizing = "border-box";
   }
-  const i = Array.isArray(e.tags) && e.tags.includes("bravo:layer"), s = M(H)?.isFlex ?? !1, o = e.style?.positioning, p = o && typeof o.top == "number" && typeof o.left == "number" && typeof o.right == "number" && typeof o.bottom == "number" && o.top === 0 && o.left === 0 && o.right === 0 && o.bottom === 0, a = i && (s || p), g = r && r.toLowerCase().startsWith("clip");
-  return a && (n.position = "absolute", n.top = 0, n.left = 0, n.right = 0, n.bottom = 0, n.zIndex = -1, n.width && typeof n.width == "string" && n.width.includes("%") && delete n.width, n.height && typeof n.height == "string" && n.height.includes("%") && delete n.height), g && (n.backgroundColor = "transparent"), /* @__PURE__ */ d(Q, { id: t, nodeData: e, children: /* @__PURE__ */ d("div", { "data-name": r, "data-type": "ColorComponent", style: n }) });
-}, mt = ({
+  const i = Array.isArray(e.tags) && e.tags.includes("bravo:layer"), s = N(H)?.isFlex ?? !1, o = e.style?.positioning, f = o && typeof o.top == "number" && typeof o.left == "number" && typeof o.right == "number" && typeof o.bottom == "number" && o.top === 0 && o.left === 0 && o.right === 0 && o.bottom === 0, a = i && (s || f), h = r && r.toLowerCase().startsWith("clip");
+  return a && (n.position = "absolute", n.top = 0, n.left = 0, n.right = 0, n.bottom = 0, n.zIndex = -1, n.width && typeof n.width == "string" && n.width.includes("%") && delete n.width, n.height && typeof n.height == "string" && n.height.includes("%") && delete n.height), h && (n.backgroundColor = "transparent"), /* @__PURE__ */ d(Q, { id: t, nodeData: e, children: /* @__PURE__ */ d("div", { "data-name": r, "data-type": "ColorComponent", style: n }) });
+}, gt = ({
   id: t,
   name: r,
   nodeData: e
@@ -457,41 +455,41 @@ const ct = v.createContext({}), H = v.createContext(
     debug: !1
   }), i = e.style, s = Array.isArray(i?.gradientColorStops) ? i.gradientColorStops.map((o) => {
     if (!o?.color) return null;
-    const p = st(o.color);
+    const f = at(o.color);
     if (typeof o.position == "number") {
       const a = o.position * 100;
-      return `${p} ${a}%`;
+      return `${f} ${a}%`;
     }
-    return p;
+    return f;
   }).filter(Boolean).join(", ") : "";
   if (s) {
     const o = i?.gradientType || "linear";
     n.backgroundImage = o === "radial" ? `radial-gradient(${s})` : `linear-gradient(${s})`, delete n.backgroundColor;
   }
   return /* @__PURE__ */ d(Q, { id: t, nodeData: e, children: /* @__PURE__ */ d("div", { "data-name": r, "data-type": "GradientComponent", style: n }) });
-}, yt = ({ id: t, name: r, nodeData: e }) => {
+}, mt = ({ id: t, name: r, nodeData: e }) => {
   const { patchedNodeData: n } = J({ id: t, nodeData: e });
   e = n;
   const i = W(e.style, {
     debug: !1
-  }), s = M(H), o = $((l) => l.assetsById), p = e.style?.scaleMode || "fill";
-  p === "fill" ? i.objectFit = "cover" : p === "fit" && (i.objectFit = "contain"), i.objectPosition = "center";
+  }), s = N(H), o = k((l) => l.assetsById), f = e.style?.scaleMode || "fill";
+  f === "fill" ? i.objectFit = "cover" : f === "fit" && (i.objectFit = "contain"), i.objectPosition = "center";
   let a = e.data?.imageUrl;
   !a && e.encoreData?.image && (a = e.encoreData.image.startsWith("//") ? `https:${e.encoreData.image}` : e.encoreData.image), a || (a = o[e.assetId]?.url);
-  const g = e.style?.positioning, E = e.style?.aspectRatio, f = s.dimensions?.width || 0, y = s.dimensions?.height || 0;
-  if (g && E && f > 0) {
-    const l = typeof g.left == "number" && typeof g.right == "number", I = typeof g.top == "number" && typeof g.bottom == "number";
+  const h = e.style?.positioning, I = e.style?.aspectRatio, g = s.dimensions?.width || 0, y = s.dimensions?.height || 0;
+  if (h && I && g > 0) {
+    const l = typeof h.left == "number" && typeof h.right == "number", S = typeof h.top == "number" && typeof h.bottom == "number";
     if (l) {
-      const F = 100 - g.left - g.right;
-      if (F > 0) {
-        const w = F * f / 100;
-        i.width = w, i.height = w / E, i.left = `${Math.max(0, g.left)}%`, i.top = `${Math.max(0, g.top)}%`, delete i.right, delete i.bottom;
+      const w = 100 - h.left - h.right;
+      if (w > 0) {
+        const L = w * g / 100;
+        i.width = L, i.height = L / I, i.left = `${Math.max(0, h.left)}%`, i.top = `${Math.max(0, h.top)}%`, delete i.right, delete i.bottom;
       }
-    } else if (I && y > 0) {
-      const F = 100 - g.top - g.bottom;
-      if (F > 0) {
-        const w = F * y / 100;
-        i.height = w, i.width = w * E, i.left = `${Math.max(0, g.left)}%`, i.top = `${Math.max(0, g.top)}%`, delete i.right, delete i.bottom;
+    } else if (S && y > 0) {
+      const w = 100 - h.top - h.bottom;
+      if (w > 0) {
+        const L = w * y / 100;
+        i.height = L, i.width = L * I, i.left = `${Math.max(0, h.left)}%`, i.top = `${Math.max(0, h.top)}%`, delete i.right, delete i.bottom;
       }
     }
   }
@@ -506,12 +504,12 @@ const ct = v.createContext({}), H = v.createContext(
       alt: r
     }
   ) });
-}, bt = ({
+}, yt = ({
   id: t,
   name: r,
   nodeData: e
 }) => {
-  const n = $((s) => s.setFormInputValue), i = W(e.style, { debug: !1 });
+  const n = k((s) => s.setFormInputValue), i = W(e.style, { debug: !1 });
   return /* @__PURE__ */ d(
     "input",
     {
@@ -524,7 +522,7 @@ const ct = v.createContext({}), H = v.createContext(
       type: "email"
     }
   );
-}, Ct = ({
+}, bt = ({
   id: t,
   name: r,
   nodeData: e
@@ -540,13 +538,13 @@ const ct = v.createContext({}), H = v.createContext(
       type: "hidden"
     }
   );
-}, vt = ({
+}, Ct = ({
   id: t,
   name: r,
   nodeData: e
 }) => {
-  const n = $((o) => o.setFormInputValue), i = W(e.style, { debug: !1 }), s = $((o) => o.assetsById);
-  return /* @__PURE__ */ it(pt, { children: [
+  const n = k((o) => o.setFormInputValue), i = W(e.style, { debug: !1 }), s = k((o) => o.assetsById);
+  return /* @__PURE__ */ pt(Vt, { children: [
     /* @__PURE__ */ d(
       "div",
       {
@@ -567,12 +565,12 @@ const ct = v.createContext({}), H = v.createContext(
       }
     )
   ] });
-}, xt = ({
+}, vt = ({
   id: t,
   name: r,
   nodeData: e
 }) => {
-  const n = $((s) => s.setFormInputValue), i = W(e.style, { debug: !1 });
+  const n = k((s) => s.setFormInputValue), i = W(e.style, { debug: !1 });
   return /* @__PURE__ */ d(
     "input",
     {
@@ -585,24 +583,24 @@ const ct = v.createContext({}), H = v.createContext(
       type: "password"
     }
   );
-}, St = ({
+}, xt = ({
   id: t,
   name: r,
   nodeData: e
 }) => {
-  const n = $((f) => f.setFormInputValue), { onAction: i } = v.useContext(ht), { patchedNodeData: s } = J({ id: t, nodeData: e }), o = W(s.style, { debug: !1 });
+  const n = k((g) => g.setFormInputValue), { onAction: i } = v.useContext(ft), { patchedNodeData: s } = J({ id: t, nodeData: e }), o = W(s.style, { debug: !1 });
   o.width = "100%", o.flex = "1", o.minWidth = "0", o.boxSizing = "border-box", o.borderColor = o.borderColor ?? "transparent";
-  const p = s.data?.value, a = s.data?.options, g = v.useMemo(() => !a || !Array.isArray(a) ? [] : a.map((f) => typeof f == "string" ? { value: f, label: f } : f), [a]);
-  return /* @__PURE__ */ it(
+  const f = s.data?.value, a = s.data?.options, h = v.useMemo(() => !a || !Array.isArray(a) ? [] : a.map((g) => typeof g == "string" ? { value: g, label: g } : g), [a]);
+  return /* @__PURE__ */ pt(
     "select",
     {
       "data-id": t,
       "data-name": r,
       "data-type": "SelectInputComponent",
-      value: p ?? "",
+      value: f ?? "",
       style: o,
-      onChange: async (f) => {
-        const y = f.target.value;
+      onChange: async (g) => {
+        const y = g.target.value;
         if (n(t, y), console.log(`Select changed: ${y}`), typeof i == "function")
           try {
             await i({
@@ -621,17 +619,17 @@ const ct = v.createContext({}), H = v.createContext(
           }
       },
       children: [
-        g.length === 0 && /* @__PURE__ */ d("option", { value: "", disabled: !0, children: "Select an option..." }),
-        g.map((f) => /* @__PURE__ */ d("option", { value: f.value, children: f.label }, f.value))
+        h.length === 0 && /* @__PURE__ */ d("option", { value: "", disabled: !0, children: "Select an option..." }),
+        h.map((g) => /* @__PURE__ */ d("option", { value: g.value, children: g.label }, g.value))
       ]
     }
   );
-}, It = ({
+}, St = ({
   id: t,
   name: r,
   nodeData: e
 }) => {
-  const n = $((s) => s.setFormInputValue), i = W(e.style, {
+  const n = k((s) => s.setFormInputValue), i = W(e.style, {
     debug: !1
   });
   return /* @__PURE__ */ d(
@@ -647,7 +645,7 @@ const ct = v.createContext({}), H = v.createContext(
       type: "text"
     }
   );
-}, wt = ({
+}, It = ({
   id: t,
   name: r,
   nodeData: e,
@@ -664,17 +662,17 @@ const ct = v.createContext({}), H = v.createContext(
       children: n
     }
   ) });
-}, At = ({ id: t, name: r, nodeData: e }) => {
+}, wt = ({ id: t, name: r, nodeData: e }) => {
   const n = W(e.style, {
     debug: !1
-  }), i = $((o) => o.assetsById), s = e.style?.positioning;
+  }), i = k((o) => o.assetsById), s = e.style?.positioning;
   if (s) {
-    const o = typeof s.left == "number" && typeof s.right == "number", p = typeof s.top == "number" && typeof s.bottom == "number";
+    const o = typeof s.left == "number" && typeof s.right == "number", f = typeof s.top == "number" && typeof s.bottom == "number";
     if (o) {
       const a = 100 - s.left - s.right;
       n.width = `${a}%`, n.left = `${s.left}%`, delete n.right;
     }
-    if (p) {
+    if (f) {
       const a = 100 - s.top - s.bottom;
       n.height = `${a}%`, n.top = `${s.top}%`, delete n.bottom;
     }
@@ -690,7 +688,7 @@ const ct = v.createContext({}), H = v.createContext(
       alt: r
     }
   ) });
-}, Et = ({ id: t, name: r, nodeData: e }) => {
+}, At = ({ id: t, name: r, nodeData: e }) => {
   const { patchedNodeData: n } = J({ id: t, nodeData: e });
   e = n;
   const i = e.data?.text;
@@ -701,66 +699,66 @@ const ct = v.createContext({}), H = v.createContext(
     style: e.style,
     color: e.style?.color
   });
-  const s = e.style, o = e.fontId ? { ...s, fontId: e.fontId } : s, p = W(o, {
+  const s = e.style, o = e.fontId ? { ...s, fontId: e.fontId } : s, f = W(o, {
     debug: !1
   });
-  p.display = "flex", p.flexDirection = "column", s.verticalPosition && (p.justifyContent = {
+  f.display = "flex", f.flexDirection = "column", s.verticalPosition && (f.justifyContent = {
     "from-top": "flex-start",
     center: "center",
     "from-bottom": "flex-end"
   }[s.verticalPosition]);
   const a = i && (i.includes(`
 `) || i.includes("\r"));
-  let g;
-  return a && p.flexDirection === "column" ? g = i.split(/\r?\n/).filter((f) => f.length > 0).map((f, y) => /* @__PURE__ */ d("div", { style: { lineHeight: "inherit" }, children: f }, y)) : g = i, /* @__PURE__ */ d(Q, { id: t, nodeData: e, children: /* @__PURE__ */ d(
+  let h;
+  return a && f.flexDirection === "column" ? h = i.split(/\r?\n/).map((g, y) => /* @__PURE__ */ d("div", { style: { lineHeight: "inherit" }, children: g || " " }, y)) : h = i, /* @__PURE__ */ d(Q, { id: t, nodeData: e, children: /* @__PURE__ */ d(
     "div",
     {
       "data-id": t,
       "data-name": r,
       "data-type": "TextComponent",
-      style: p,
-      children: g
+      style: f,
+      children: h
     }
   ) });
-}, ut = ({
+}, dt = ({
   id: t,
   name: r,
   nodeData: e,
   children: n
 }) => {
-  const i = M(q), { patchedNodeData: s } = J({ id: t, nodeData: e });
+  const i = N(q), { patchedNodeData: s } = J({ id: t, nodeData: e });
   e = s;
-  const o = Ut(e.tags), p = o ? $((F) => F.inputGroups[o.groupName]) : null, a = $((F) => F.statefulSetVariants[t]), g = W(e.style, {
+  const o = Ut(e.tags), f = o ? k((w) => w.inputGroups[o.groupName]) : null, a = k((w) => w.statefulSetVariants[t]), h = W(e.style, {
     debug: !1
   });
-  let E;
-  o && p !== null ? E = p === r ? "active" : "default" : E = a || e.data.initialState || "default";
-  const f = v.Children.toArray(n).find((F) => v.isValidElement(F) ? F.props?.nodeData?.data?.state === E : !1), y = v.isValidElement(f) ? v.cloneElement(f, {
+  let I;
+  o && f !== null ? I = f === r ? "active" : "default" : I = a || e.data.initialState || "default";
+  const g = v.Children.toArray(n).find((w) => v.isValidElement(w) ? w.props?.nodeData?.data?.state === I : !1), y = v.isValidElement(g) ? v.cloneElement(g, {
     _parentStatefulSetId: t,
     _parentInputGroupInfo: o,
     _parentName: r
     // Pass the name so we can identify which element is active
-  }) : f, l = /* @__PURE__ */ d(
+  }) : g, l = /* @__PURE__ */ d(
     "div",
     {
       "data-id": t,
       "data-name": r,
       "data-type": "StatefulSetComponent",
-      style: g,
+      style: h,
       children: y
     }
   );
   if (e.type === "component:input-stateful-set")
     return l;
-  const I = v.useContext(lt);
+  const S = v.useContext(st);
   return /* @__PURE__ */ d(
     q.Provider,
     {
       value: { nodeData: i?.nodeData?.[t] || {} },
       children: /* @__PURE__ */ d(
-        lt.Provider,
+        st.Provider,
         {
-          value: { ...I, statefulSetId: t },
+          value: { ...S, statefulSetId: t },
           children: l
         }
       )
@@ -775,11 +773,11 @@ const ct = v.createContext({}), H = v.createContext(
   _parentInputGroupInfo: s,
   _parentName: o
 }) => {
-  const p = W(e.style, {
+  const f = W(e.style, {
     debug: !1
   }), a = {
-    ...p,
-    position: p.position || "relative"
+    ...f,
+    position: f.position || "relative"
   };
   return /* @__PURE__ */ d(
     "div",
@@ -801,9 +799,9 @@ const ct = v.createContext({}), H = v.createContext(
       )
     }
   );
-}, Tt = ({ id: t, name: r, children: e }) => {
-  M(H);
-  const { dimensions: n, ref: i } = rt(), s = {
+}, Et = ({ id: t, name: r, children: e }) => {
+  N(H);
+  const { dimensions: n, ref: i } = it(), s = {
     zIndex: 0,
     flex: 1,
     position: "absolute",
@@ -823,7 +821,7 @@ const ct = v.createContext({}), H = v.createContext(
       children: e
     }
   ) });
-}, ft = ({
+}, ut = ({
   id: t,
   name: r,
   nodeData: e,
@@ -835,12 +833,12 @@ const ct = v.createContext({}), H = v.createContext(
     `[DEBUG] ContainerComponent ${t} (Hero) FULL nodeData:`,
     JSON.stringify(e, null, 2)
   );
-  const o = M(q), { patchedNodeData: p, list: a, arrayData: g } = J({
+  const o = N(q), { patchedNodeData: f, list: a, arrayData: h } = J({
     id: t,
     nodeData: e
   });
-  e = p;
-  const { dimensions: E, ref: f } = rt(), y = W(e.style, {
+  e = f;
+  const { dimensions: I, ref: g } = it(), y = W(e.style, {
     debug: !1
   });
   t === "01KF5PAFET1VY5E81B68GQ9BFQ" && console.log("[DEBUG] Embed Container Render", {
@@ -850,37 +848,37 @@ const ct = v.createContext({}), H = v.createContext(
     layout: e.style.layout,
     hasPositioning: !!e.style.positioning
   });
-  const l = !!e.style.layout?.mode, I = e.style.layout?.mode === "HORIZONTAL" || e.style.layout?.mode === "GRID" ? "row" : "column", F = y.width !== void 0, w = y.height !== void 0, k = M(H), T = k?.isFlex ?? !1, h = k?.flexDirection, S = T && h === "row", G = !T && e.style.positioning, N = e.style.layout?.layoutSizingHorizontal === "FIXED" || e.style.layout?.layoutSizingVertical === "FIXED", j = e.style.layout?.layoutSizingHorizontal === "HUG" || e.style.layout?.layoutSizingVertical === "HUG";
-  if (!F && !S && !(G && (N || j)) && (y.width = "100%"), !w) {
-    const L = !T && e.style.positioning, Z = e.style.layout?.layoutSizingVertical === "FILL";
+  const l = !!e.style.layout?.mode, S = e.style.layout?.mode === "HORIZONTAL" || e.style.layout?.mode === "GRID" ? "row" : "column", w = y.width !== void 0, L = y.height !== void 0, E = N(H), c = E?.isFlex ?? !1, $ = E?.flexDirection, A = c && $ === "row", O = !c && e.style.positioning, U = e.style.layout?.layoutSizingHorizontal === "FIXED" || e.style.layout?.layoutSizingVertical === "FIXED", M = e.style.layout?.layoutSizingHorizontal === "HUG" || e.style.layout?.layoutSizingVertical === "HUG";
+  if (!w && !A && !(O && (U || M)) && (y.width = "100%"), !L) {
+    const R = !c && e.style.positioning, K = e.style.layout?.layoutSizingVertical === "FILL";
     if (!(e.style.layout?.layoutSizingVertical === "HUG")) {
-      if (!l) if (L && Z && e.style.positioning?.top !== void 0) {
+      if (!l) if (R && K && e.style.positioning?.top !== void 0) {
         const tt = 100 - e.style.positioning.top;
         y.height = `${tt}%`;
       } else
         y.height = "100%";
     }
   }
-  const D = e.style.layout?.layoutSizingHorizontal || e.style.layout?.layoutSizingVertical, V = e.style.positioning && !l && (D || !0) ? { ...y, position: "absolute" } : y.position === "absolute" ? y : { ...y, position: y.position || "relative" }, U = (L) => typeof L == "number" ? L : typeof L == "string" && L.endsWith("px") && parseFloat(L) || 0, O = U(y.paddingLeft), m = U(y.paddingRight), Y = U(y.paddingTop), X = U(y.paddingBottom), R = N && typeof y.width == "number" && typeof y.height == "number" ? {
-    width: y.width - O - m,
-    height: y.height - Y - X
+  const G = e.style.layout?.layoutSizingHorizontal || e.style.layout?.layoutSizingVertical, V = e.style.positioning && !l && !c && (G || !0) ? { ...y, position: "absolute" } : y.position === "absolute" ? y : { ...y, position: y.position || "relative" }, X = (R) => typeof R == "number" ? R : typeof R == "string" && R.endsWith("px") && parseFloat(R) || 0, j = X(y.paddingLeft), m = X(y.paddingRight), Y = X(y.paddingTop), Z = X(y.paddingBottom), B = U && typeof y.width == "number" && typeof y.height == "number" ? {
+    width: y.width - j - m,
+    height: y.height - Y - Z
   } : {
-    width: E.width - O - m,
-    height: E.height - Y - X
+    width: I.width - j - m,
+    height: I.height - Y - Z
   };
   if (i != null && a) {
-    const L = a[i];
-    if (L !== void 0) {
-      const Z = typeof L == "object" && L !== null ? {
-        nodeData: L,
+    const R = a[i];
+    if (R !== void 0) {
+      const K = typeof R == "object" && R !== null ? {
+        nodeData: R,
         arrayDataById: o?.arrayDataById,
         textOverridesById: o?.textOverridesById,
         rootData: o?.rootData
-      } : { nodeData: L };
-      return /* @__PURE__ */ d(q.Provider, { value: Z, children: /* @__PURE__ */ d(
+      } : { nodeData: R };
+      return /* @__PURE__ */ d(q.Provider, { value: K, children: /* @__PURE__ */ d(
         H.Provider,
         {
-          value: { dimensions: R, isFlex: l, flexDirection: I },
+          value: { dimensions: B, isFlex: l, flexDirection: S },
           children: /* @__PURE__ */ d(
             "div",
             {
@@ -896,14 +894,14 @@ const ct = v.createContext({}), H = v.createContext(
     }
   }
   if (a) {
-    const L = g || a;
-    return Ht(() => L.map((K, ot) => {
-      const tt = typeof K == "object" && K !== null ? {
-        nodeData: K,
+    const R = h || a;
+    return Ht(() => R.map((D, ot) => {
+      const tt = typeof D == "object" && D !== null ? {
+        nodeData: D,
         arrayDataById: o?.arrayDataById,
         textOverridesById: o?.textOverridesById,
         rootData: o?.rootData
-      } : { nodeData: K };
+      } : { nodeData: D };
       return /* @__PURE__ */ d(
         q.Provider,
         {
@@ -911,7 +909,7 @@ const ct = v.createContext({}), H = v.createContext(
           children: /* @__PURE__ */ d(
             H.Provider,
             {
-              value: { dimensions: R, isFlex: l, flexDirection: I },
+              value: { dimensions: B, isFlex: l, flexDirection: S },
               children: /* @__PURE__ */ d(
                 "div",
                 {
@@ -927,41 +925,41 @@ const ct = v.createContext({}), H = v.createContext(
         },
         `${t}:${ot}`
       );
-    }), [L, t]);
+    }), [R, t]);
   }
-  let P = e.actions || [];
-  !Array.isArray(P) && typeof P == "object" && P !== null && (P = Object.entries(P).map(
-    ([L, Z]) => ({
-      event: L,
-      ...typeof Z == "object" && Z !== null ? Z : {}
+  let T = e.actions || [];
+  !Array.isArray(T) && typeof T == "object" && T !== null && (T = Object.entries(T).map(
+    ([R, K]) => ({
+      event: R,
+      ...typeof K == "object" && K !== null ? K : {}
     })
   ));
-  const z = Array.isArray(P) && P.length > 0;
+  const z = Array.isArray(T) && T.length > 0;
   return /* @__PURE__ */ d(
     H.Provider,
     {
-      value: { dimensions: R, isFlex: l, flexDirection: I },
+      value: { dimensions: B, isFlex: l, flexDirection: S },
       children: /* @__PURE__ */ d(
         "div",
         {
           "data-id": t,
           "data-name": r,
           "data-type": "ContainerComponent",
-          ref: f,
+          ref: g,
           style: V,
           children: z ? /* @__PURE__ */ d(Q, { id: t, nodeData: e, children: n }) : n
         }
       )
     }
   );
-}, Pt = ft, Bt = ({ id: t, name: r, nodeData: e, children: n }) => {
-  const { dimensions: i, ref: s } = rt(), o = W(e.style, {
+}, Tt = ut, Pt = ({ id: t, name: r, nodeData: e, children: n }) => {
+  const { dimensions: i, ref: s } = it(), o = W(e.style, {
     debug: !1
-  }), p = !!e.style.layout?.mode, a = e.style.layout?.mode === "HORIZONTAL" ? "row" : "column", g = o.position ? o : { ...o, position: "relative" };
+  }), f = !!e.style.layout?.mode, a = e.style.layout?.mode === "HORIZONTAL" ? "row" : "column", h = o.position ? o : { ...o, position: "relative" };
   return /* @__PURE__ */ d(
     H.Provider,
     {
-      value: { dimensions: i, isFlex: p, flexDirection: a },
+      value: { dimensions: i, isFlex: f, flexDirection: a },
       children: /* @__PURE__ */ d(
         "div",
         {
@@ -969,7 +967,7 @@ const ct = v.createContext({}), H = v.createContext(
           "data-name": r,
           "data-type": "TopBarContainerComponent",
           ref: s,
-          style: g,
+          style: h,
           children: n
         }
       )
@@ -987,7 +985,7 @@ const ct = v.createContext({}), H = v.createContext(
       children: n
     }
   );
-}, Rt = ({ id: t, name: r, nodeData: e, children: n }) => /* @__PURE__ */ d(
+}, Bt = ({ id: t, name: r, nodeData: e, children: n }) => /* @__PURE__ */ d(
   "div",
   {
     "data-id": t,
@@ -996,7 +994,7 @@ const ct = v.createContext({}), H = v.createContext(
     style: W(e.style),
     children: n
   }
-), Lt = ({ id: t, name: r, nodeData: e, children: n }) => {
+), Rt = ({ id: t, name: r, nodeData: e, children: n }) => {
   const i = W(e.style, {
     debug: !1
   });
@@ -1010,182 +1008,182 @@ const ct = v.createContext({}), H = v.createContext(
       children: n
     }
   );
-}, at = ({ id: t, name: r, nodeData: e, children: n }) => {
+}, rt = ({ id: t, name: r, nodeData: e, children: n }) => {
   t === "01KB929X1DQJN954WNGF5AH38B" && console.log(
     `[DEBUG] SliderComponent ${t} FULL nodeData:`,
     JSON.stringify(e, null, 2)
   );
-  const { dimensions: i, ref: s } = rt(), o = v.useRef(null), p = v.useRef(null), a = v.useRef(!1), g = v.useRef(null), E = M(ct), f = M(Gt), { onAction: y } = M(ht), [l, I] = v.useState({
+  const { dimensions: i, ref: s } = it(), o = v.useRef(null), f = v.useRef(null), a = v.useRef(!1), h = v.useRef(null), I = N(lt), g = N(Gt), { onAction: y } = N(ft), [l, S] = v.useState({
     currentIndex: void 0,
     onIndexChange: void 0
-  }), [F, w] = v.useState(0), k = v.useRef(null), { patchedNodeData: T } = J({ id: t, nodeData: e });
-  e = T;
-  const h = e.data?.params || {}, S = 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 && h.animation === "default") {
-    const c = e.style?.width, u = e.style?.height;
-    typeof c == "number" && typeof u == "number" && u > c && (j = !0);
+  }), [w, L] = v.useState(0), E = v.useRef(null), { patchedNodeData: c } = J({ id: t, nodeData: e });
+  e = c;
+  const $ = e.data?.params || {}, A = $.infinite === !0, O = $.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 && $.animation === "default") {
+    const u = e.style?.width, p = e.style?.height;
+    typeof u == "number" && typeof p == "number" && p > u && (M = !0);
   }
-  const D = j ? "vertical" : h.animation === "default" ? "horizontal" : h.animation || "horizontal", A = W(e.style, {
+  const G = M ? "vertical" : $.animation === "default" ? "horizontal" : $.animation || "horizontal", F = W(e.style, {
     debug: !1
-  }), V = A.width !== void 0, U = A.height !== void 0;
-  V || (A.width = "100%"), U || (A.height = "100%"), A.position || (A.position = "relative");
-  const O = M(q), m = v.useMemo(() => {
-    const c = [];
-    return v.Children.forEach(n, (u) => {
-      if (u == null) return;
-      const x = u?.props || {}, C = x.nodeData || {};
-      if (Array.isArray(C?.tags) && (C.tags.includes("encore:data:array") || C.tags.includes("bravo:data:array")) && x.id && O) {
-        const B = O?.arrayDataById && O.arrayDataById[x.id] && Array.isArray(O.arrayDataById[x.id]) ? O.arrayDataById[x.id] : null;
-        B && B.length > 0 ? B.forEach((et, nt) => {
-          c.push(
-            v.cloneElement(u, {
+  }), V = F.width !== void 0, X = F.height !== void 0;
+  V || (F.width = "100%"), X || (F.height = "100%"), F.position || (F.position = "relative");
+  const j = N(q), m = v.useMemo(() => {
+    const u = [];
+    return v.Children.forEach(n, (p) => {
+      if (p == null) return;
+      const x = p?.props || {}, C = x.nodeData || {};
+      if (Array.isArray(C?.tags) && (C.tags.includes("encore:data:array") || C.tags.includes("bravo:data:array")) && x.id && j) {
+        const P = j?.arrayDataById && j.arrayDataById[x.id] && Array.isArray(j.arrayDataById[x.id]) ? j.arrayDataById[x.id] : null;
+        P && P.length > 0 ? P.forEach((et, nt) => {
+          u.push(
+            v.cloneElement(p, {
               key: `${x.id}:${nt}`,
               // ContainerComponent will use this to know which item to render
               _arrayItemIndex: nt,
               _arrayItemData: et
             })
           );
-        }) : c.push(u);
+        }) : u.push(p);
       } else
-        c.push(u);
-    }), c;
-  }, [n, t, O]), Y = v.useMemo(() => {
-    if (!S || m.length === 0)
+        u.push(p);
+    }), u;
+  }, [n, t, j]), Y = v.useMemo(() => {
+    if (!A || m.length === 0)
       return m;
-    const c = m[0], u = m[m.length - 1];
+    const u = m[0], p = m[m.length - 1];
     return [
-      v.cloneElement(u, {
-        key: `clone-last-${u.key || u.props.id}`
+      v.cloneElement(p, {
+        key: `clone-last-${p.key || p.props.id}`
       }),
       ...m,
-      v.cloneElement(c, {
-        key: `clone-first-${c.key || c.props.id}`
+      v.cloneElement(u, {
+        key: `clone-first-${u.key || u.props.id}`
       })
     ];
-  }, [m, S]), X = v.useMemo(() => {
+  }, [m, A]), Z = v.useMemo(() => {
     if (m.length === 0) return { width: 0, height: 0 };
-    const u = m[0]?.props?.nodeData?.style, x = E.scaleFactor || 1;
+    const p = m[0]?.props?.nodeData?.style, x = I.scaleFactor || 1;
     let C = 0, b = 0;
-    return u?.layout?.layoutSizingHorizontal === "FIXED" && u?.layout?.size?.x ? C = u.layout.size.x * x : C = i.width || 0, u?.layout?.layoutSizingVertical === "FIXED" && u?.layout?.size?.y ? b = u.layout.size.y * x : b = i.height || 0, { width: C, height: b };
-  }, [m, i.width, i.height, E.scaleFactor]), R = X.width, P = X.height, z = D === "vertical", _ = v.useCallback(() => {
+    return p?.layout?.layoutSizingHorizontal === "FIXED" && p?.layout?.size?.x ? C = p.layout.size.x * x : C = i.width || 0, p?.layout?.layoutSizingVertical === "FIXED" && p?.layout?.size?.y ? b = p.layout.size.y * x : b = i.height || 0, { width: C, height: b };
+  }, [m, i.width, i.height, I.scaleFactor]), B = Z.width, T = Z.height, z = G === "vertical", _ = v.useCallback(() => {
     if (!o.current || m.length === 0)
       return 0;
-    const c = o.current;
+    const u = o.current;
     if (z) {
-      if (P === 0) return 0;
-      const u = c.scrollTop;
-      if (S) {
-        const C = u - P;
-        let b = Math.round(C / P);
+      if (T === 0) return 0;
+      const p = u.scrollTop;
+      if (A) {
+        const C = p - T;
+        let b = Math.round(C / T);
         return b < 0 && (b = 0), b >= m.length && (b = m.length - 1), b;
       } else {
-        const x = Math.round(u / P);
+        const x = Math.round(p / T);
         return x < 0 ? 0 : x >= m.length ? m.length - 1 : x;
       }
     } else {
-      if (R === 0) return 0;
-      const u = c.scrollLeft;
-      if (S) {
-        const C = u - R;
-        let b = Math.round(C / R);
+      if (B === 0) return 0;
+      const p = u.scrollLeft;
+      if (A) {
+        const C = p - B;
+        let b = Math.round(C / B);
         return b < 0 && (b = 0), b >= m.length && (b = m.length - 1), b;
       } else {
-        const x = Math.round(u / R);
+        const x = Math.round(p / B);
         return x < 0 ? 0 : x >= m.length ? m.length - 1 : x;
       }
     }
-  }, [S, m.length, R, P, z]), L = v.useCallback(
-    (c, u = !0) => {
+  }, [A, m.length, B, T, z]), R = v.useCallback(
+    (u, p = !0) => {
       if (!o.current || m.length === 0) return;
       const x = o.current;
       if (z) {
         let C;
-        S ? C = P + c * P : C = c * P, x.scrollTo({
+        A ? C = T + u * T : C = u * T, x.scrollTo({
           top: C,
-          behavior: u ? "smooth" : "auto"
+          behavior: p ? "smooth" : "auto"
         });
       } else {
         let C;
-        S ? C = R + c * R : C = c * R, x.scrollTo({
+        A ? C = B + u * B : C = u * B, x.scrollTo({
           left: C,
-          behavior: u ? "smooth" : "auto"
+          behavior: p ? "smooth" : "auto"
         });
       }
     },
-    [R, P, S, m.length, z]
-  ), Z = v.useCallback(() => {
-    if (!S || !o.current || m.length === 0) return;
-    const c = o.current, u = 1;
+    [B, T, A, m.length, z]
+  ), K = v.useCallback(() => {
+    if (!A || !o.current || m.length === 0) return;
+    const u = o.current, p = 1;
     if (z) {
-      if (P === 0) return;
-      const x = c.scrollTop, C = P, b = C, B = b + m.length * C;
-      x >= B - u ? c.scrollTop = b : x <= u && (c.scrollTop = B - C);
+      if (T === 0) return;
+      const x = u.scrollTop, C = T, b = C, P = b + m.length * C;
+      x >= P - p ? u.scrollTop = b : x <= p && (u.scrollTop = P - C);
     } else {
-      if (R === 0) return;
-      const x = c.scrollLeft, C = R, b = C, B = b + m.length * C;
-      x >= B - u ? c.scrollLeft = b : x <= u && (c.scrollLeft = B - C);
+      if (B === 0) return;
+      const x = u.scrollLeft, C = B, b = C, P = b + m.length * C;
+      x >= P - p ? u.scrollLeft = b : x <= p && (u.scrollLeft = P - C);
     }
-  }, [S, m.length, R, P, z]);
+  }, [A, m.length, B, T, z]);
   v.useEffect(() => {
-    if (!G || m.length <= 1 || R === 0) return;
-    const c = () => {
+    if (!O || m.length <= 1 || B === 0) return;
+    const u = () => {
       if (a.current || !o.current) return;
-      const u = o.current;
+      const p = o.current;
       if (z) {
-        if (P === 0) return;
-        const x = u.scrollTop, C = P;
+        if (T === 0) return;
+        const x = p.scrollTop, C = T;
         let b;
-        if (S) {
+        if (A) {
           const nt = x - C;
           b = Math.round(nt / C), b < 0 && (b = 0), b >= m.length && (b = m.length - 1);
         } else
           b = Math.round(x / C);
-        let B = b + 1;
-        if (S) {
-          B >= m.length && (B = 0);
+        let P = b + 1;
+        if (A) {
+          P >= m.length && (P = 0);
           const et = C;
-          u.scrollTo({
-            top: et + B * C,
+          p.scrollTo({
+            top: et + P * C,
             behavior: "smooth"
           });
         } else
-          B >= m.length && (B = 0), L(B);
+          P >= m.length && (P = 0), R(P);
       } else {
-        if (R === 0) return;
-        const x = u.scrollLeft, C = R;
+        if (B === 0) return;
+        const x = p.scrollLeft, C = B;
         let b;
-        if (S) {
+        if (A) {
           const nt = x - C;
           b = Math.round(nt / C), b < 0 && (b = 0), b >= m.length && (b = m.length - 1);
         } else
           b = Math.round(x / C);
-        let B = b + 1;
-        if (S) {
-          B >= m.length && (B = 0);
+        let P = b + 1;
+        if (A) {
+          P >= m.length && (P = 0);
           const et = C;
-          u.scrollTo({
-            left: et + B * C,
+          p.scrollTo({
+            left: et + P * C,
             behavior: "smooth"
           });
         } else
-          B >= m.length && (B = 0), L(B);
+          P >= m.length && (P = 0), R(P);
       }
     };
-    return p.current = setInterval(c, 4e3), () => {
-      p.current && (clearInterval(p.current), p.current = null);
+    return f.current = setInterval(u, 4e3), () => {
+      f.current && (clearInterval(f.current), f.current = null);
     };
   }, [
-    G,
+    O,
     m.length,
-    S,
-    R,
-    P,
+    A,
+    B,
+    T,
     z,
-    L
+    R
   ]);
-  const K = v.useCallback(() => {
-    a.current = !0, g.current && clearTimeout(g.current), g.current = setTimeout(() => {
+  const D = v.useCallback(() => {
+    a.current = !0, h.current && clearTimeout(h.current), h.current = setTimeout(() => {
       a.current = !1;
     }, 3e3);
   }, []), ot = v.useRef(l);
@@ -1193,11 +1191,11 @@ const ct = v.createContext({}), H = v.createContext(
     ot.current = l;
   }, [l]);
   const tt = v.useCallback(
-    (c) => {
-      if (k.current === c) return;
-      k.current = c;
-      const u = ot.current;
-      if (u.currentIndex === void 0 && w(c), u.onIndexChange && u.onIndexChange(c), typeof y == "function")
+    (u) => {
+      if (E.current === u) return;
+      E.current = u;
+      const p = ot.current;
+      if (p.currentIndex === void 0 && L(u), p.onIndexChange && p.onIndexChange(u), typeof y == "function")
         try {
           y({
             bravo: {
@@ -1205,7 +1203,7 @@ const ct = v.createContext({}), H = v.createContext(
               },
               action: {
                 action: "index-change",
-                params: { index: c }
+                params: { index: u }
               },
               componentId: t
             }
@@ -1217,73 +1215,73 @@ const ct = v.createContext({}), H = v.createContext(
     // Depend on onAction to ensure we call the latest version
   );
   v.useEffect(() => {
-    const c = o.current;
-    if (!c) return;
-    let u = null;
+    const u = o.current;
+    if (!u) return;
+    let p = null;
     const x = () => {
-      K(), S ? (u !== null && cancelAnimationFrame(u), u = requestAnimationFrame(() => {
-        Z();
-        const B = _();
-        tt(B);
-      })) : (u !== null && cancelAnimationFrame(u), u = requestAnimationFrame(() => {
-        const B = _();
-        tt(B);
+      D(), A ? (p !== null && cancelAnimationFrame(p), p = requestAnimationFrame(() => {
+        K();
+        const P = _();
+        tt(P);
+      })) : (p !== null && cancelAnimationFrame(p), p = requestAnimationFrame(() => {
+        const P = _();
+        tt(P);
       }));
-    }, C = () => K(), b = () => K();
-    return c.addEventListener("scroll", x, { passive: !0 }), c.addEventListener("touchstart", C, {
+    }, C = () => D(), b = () => D();
+    return u.addEventListener("scroll", x, { passive: !0 }), u.addEventListener("touchstart", C, {
       passive: !0
-    }), c.addEventListener("mousedown", b), () => {
-      c.removeEventListener("scroll", x), c.removeEventListener("touchstart", C), c.removeEventListener("mousedown", b), g.current && clearTimeout(g.current), u !== null && cancelAnimationFrame(u);
+    }), u.addEventListener("mousedown", b), () => {
+      u.removeEventListener("scroll", x), u.removeEventListener("touchstart", C), u.removeEventListener("mousedown", b), h.current && clearTimeout(h.current), p !== null && cancelAnimationFrame(p);
     };
   }, [
-    S,
+    A,
+    D,
     K,
-    Z,
     _,
     tt
   ]), v.useEffect(() => {
-    if (f) {
-      const c = f.getControlProps(t);
-      c && c !== l && I(c);
+    if (g) {
+      const u = g.getControlProps(t);
+      u && u !== l && S(u);
     }
-  }, [t, f, l]), v.useEffect(() => {
-    if (l.currentIndex !== void 0 && o.current && m.length > 0 && R > 0) {
-      const c = Math.max(
+  }, [t, g, l]), v.useEffect(() => {
+    if (l.currentIndex !== void 0 && o.current && m.length > 0 && B > 0) {
+      const u = Math.max(
         0,
         Math.min(l.currentIndex, m.length - 1)
-      ), u = _();
-      c !== u && L(c, !0);
+      ), p = _();
+      u !== p && R(u, !0);
     }
   }, [
     l.currentIndex,
     m.length,
     m.length,
-    R,
-    P,
+    B,
+    T,
     z,
-    L,
+    R,
     _
   ]), v.useEffect(() => {
-    if (S && o.current && m.length > 0 && m.length > 0 && (z ? P > 0 : R > 0)) {
-      const c = z ? P : R;
+    if (A && o.current && m.length > 0 && m.length > 0 && (z ? T > 0 : B > 0)) {
+      const u = z ? T : B;
       setTimeout(() => {
-        o.current && (z ? o.current.scrollTop = c : o.current.scrollLeft = c);
+        o.current && (z ? o.current.scrollTop = u : o.current.scrollLeft = u);
       }, 0);
     }
-  }, [S, m.length, R, P, z]), v.useEffect(() => {
-    if (!f) return;
-    const { registerContainer: c, unregisterContainer: u } = f;
+  }, [A, m.length, B, T, z]), v.useEffect(() => {
+    if (!g) return;
+    const { registerContainer: u, unregisterContainer: p } = g;
     return () => {
     };
   }, [
     t,
-    f?.registerContainer,
-    f?.unregisterContainer,
+    g?.registerContainer,
+    g?.unregisterContainer,
     // controlProps, // REMOVED to break infinite loop
-    L,
+    R,
     _
   ]);
-  const zt = {
+  const $t = {
     display: "flex",
     flexDirection: z ? "column" : "row",
     overflowX: z ? "hidden" : "auto",
@@ -1294,11 +1292,11 @@ const ct = v.createContext({}), H = v.createContext(
     height: "100%",
     WebkitOverflowScrolling: "touch"
     // Smooth scrolling on iOS
-  }, Vt = {
+  }, zt = {
     flexShrink: 0,
     scrollSnapAlign: "start",
-    width: X.width > 0 ? X.width : void 0,
-    height: X.height > 0 ? X.height : void 0,
+    width: Z.width > 0 ? Z.width : void 0,
+    height: Z.height > 0 ? Z.height : void 0,
     position: "relative"
   };
   return /* @__PURE__ */ d(
@@ -1308,51 +1306,51 @@ const ct = v.createContext({}), H = v.createContext(
       "data-name": r,
       "data-type": "SliderComponent",
       ref: s,
-      style: A,
-      children: /* @__PURE__ */ d("div", { ref: o, style: zt, children: Y.map((c, u) => /* @__PURE__ */ d(
+      style: F,
+      children: /* @__PURE__ */ d("div", { ref: o, style: $t, children: Y.map((u, p) => /* @__PURE__ */ d(
         H.Provider,
         {
           value: {
             dimensions: {
-              width: X.width,
-              height: X.height
+              width: Z.width,
+              height: Z.height
             },
             isFlex: !1
           },
-          children: /* @__PURE__ */ d("div", { style: Vt, children: c })
+          children: /* @__PURE__ */ d("div", { style: zt, children: u })
         },
-        c.key || `slide-${u}`
+        u.key || `slide-${p}`
       )) })
     }
   );
-}, $t = (t, r) => {
+}, kt = (t, r) => {
   const e = Array.isArray(t) ? t : [t];
   for (const n of e)
     if (!(!n || !n.props)) {
       if (n.props.id === r)
         return n;
       if (n.props.children) {
-        const i = $t(n.props.children, r);
+        const i = kt(n.props.children, r);
         if (i) return i;
       }
     }
   return null;
-}, Wt = ({ id: t, name: r, nodeData: e, children: n }) => {
-  const { dimensions: i, ref: s } = rt(), { componentId: o } = M(lt), p = M(H), a = e.style.originalSize?.[0] || 375;
+}, Lt = ({ id: t, name: r, nodeData: e, children: n }) => {
+  const { dimensions: i, ref: s } = it(), { componentId: o } = N(st), f = N(H), a = e.style.originalSize?.[0] || 375;
   e.style.originalSize?.[1];
-  const g = p?.dimensions?.width, E = p?.dimensions?.height, f = window.innerWidth, y = g && g > 0 && g < f * 0.8;
+  const h = f?.dimensions?.width, I = f?.dimensions?.height, g = window.innerWidth, y = h && h > 0 && h < g * 0.8;
   let l;
-  i.width > 0 && i.height > 0 ? (l = i.width, i.height) : y && g && E || g && E && g > 0 && E > 0 ? l = g : l = f;
-  const I = a < 768;
-  let F = l, w = "100%";
-  if (I && l > a * 1.5) {
-    const A = Math.round(a * 1.5);
-    F = A, w = A;
+  i.width > 0 && i.height > 0 ? (l = i.width, i.height) : y && h && I || h && I && h > 0 && I > 0 ? l = h : l = g;
+  const S = a < 768;
+  let w = l, L = "100%";
+  if (S && l > a * 1.5) {
+    const F = Math.round(a * 1.5);
+    w = F, L = F;
   }
-  const T = { scaleFactor: F / a || 1 };
+  const c = { scaleFactor: w / a || 1 };
   if (o) {
-    const A = $t(n, o);
-    return A ? /* @__PURE__ */ d(ct.Provider, { value: T, children: /* @__PURE__ */ d(
+    const F = kt(n, o);
+    return F ? /* @__PURE__ */ d(lt.Provider, { value: c, children: /* @__PURE__ */ d(
       H.Provider,
       {
         value: {
@@ -1361,48 +1359,48 @@ const ct = v.createContext({}), H = v.createContext(
             height: "100%"
           }
         },
-        children: A
+        children: F
       }
     ) }) : (console.warn(`Child with id "${o}" not found`), null);
   }
-  const h = Array.isArray(n) ? n : [n], { scrollableChildren: S, nonScrollableChildren: G } = h.reduce(
-    (A, V) => {
-      const O = V.props.nodeData.type === "container:top-bar" ? "nonScrollableChildren" : "scrollableChildren";
-      return A[O].push(V), A;
+  const $ = Array.isArray(n) ? n : [n], { scrollableChildren: A, nonScrollableChildren: O } = $.reduce(
+    (F, V) => {
+      const j = V.props.nodeData.type === "container:top-bar" ? "nonScrollableChildren" : "scrollableChildren";
+      return F[j].push(V), F;
     },
     {
       scrollableChildren: [],
       nonScrollableChildren: []
     }
   );
-  let N = e.style?.layout?.mode;
-  if (!N && t === "01KASW494V02Y8P5JVWV5XK62X" && (console.log("🔧 PATCHING missing layout for page", t), N = "HORIZONTAL"), !N && n) {
-    const A = Array.isArray(n) ? n : [n];
-    let V = 0, U = 0;
-    A.forEach((m) => {
+  let U = e.style?.layout?.mode;
+  if (!U && t === "01KASW494V02Y8P5JVWV5XK62X" && (console.log("🔧 PATCHING missing layout for page", t), U = "HORIZONTAL"), !U && n) {
+    const F = Array.isArray(n) ? n : [n];
+    let V = 0, X = 0;
+    F.forEach((m) => {
       const Y = m?.props?.nodeData?.style?.width;
-      Y && (V += Y, Y < 99 && U++);
-    }), U > 0 && V >= 99 && (console.log(
-      `[PATCH] Detected HORIZONTAL WRAP layout for page ${t} (Partial width children: ${U}, Total width: ${V})`
-    ), N = "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");
+      Y && (V += Y, Y < 99 && X++);
+    }), X > 0 && V >= 99 && (console.log(
+      `[PATCH] Detected HORIZONTAL WRAP layout for page ${t} (Partial width children: ${X}, Total width: ${V})`
+    ), U = "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 = N === "HORIZONTAL" ? "row" : "column", D = G.some(
-    (A) => A?.props?.nodeData?.type !== "container:background"
+  const M = U === "HORIZONTAL" ? "row" : "column", G = O.some(
+    (F) => F?.props?.nodeData?.type !== "container:background"
   );
-  return /* @__PURE__ */ d(ct.Provider, { value: T, children: /* @__PURE__ */ it(
+  return /* @__PURE__ */ d(lt.Provider, { value: c, children: /* @__PURE__ */ pt(
     "div",
     {
       style: {
         width: "100%",
         height: "100%",
-        maxWidth: typeof w == "number" ? `${w}px` : w,
-        margin: I ? "0 auto" : 0,
+        maxWidth: typeof L == "number" ? `${L}px` : L,
+        margin: S ? "0 auto" : 0,
         position: "relative",
         overflow: "hidden",
         // Only use flex if we have non-background nonScrollableChildren (like top-bar)
-        ...D ? {
+        ...G ? {
           display: "flex",
-          flexDirection: j,
+          flexDirection: M,
           gap: 0,
           rowGap: 0,
           columnGap: 0
@@ -1410,9 +1408,9 @@ const ct = v.createContext({}), H = v.createContext(
       },
       ref: s,
       children: [
-        G.filter(
-          (A) => A?.props?.nodeData?.type === "container:background"
-        ).map((A, V) => /* @__PURE__ */ d(
+        O.filter(
+          (F) => F?.props?.nodeData?.type === "container:background"
+        ).map((F, V) => /* @__PURE__ */ d(
           H.Provider,
           {
             value: {
@@ -1421,13 +1419,13 @@ const ct = v.createContext({}), H = v.createContext(
                 height: i.height
               }
             },
-            children: A
+            children: F
           },
           `bg-${V}`
         )),
-        D && G.filter(
-          (A) => A?.props?.nodeData?.type !== "container:background"
-        ).map((A, V) => /* @__PURE__ */ d(
+        G && O.filter(
+          (F) => F?.props?.nodeData?.type !== "container:background"
+        ).map((F, V) => /* @__PURE__ */ d(
           H.Provider,
           {
             value: {
@@ -1436,7 +1434,7 @@ const ct = v.createContext({}), H = v.createContext(
                 height: i.height
               }
             },
-            children: A
+            children: F
           },
           `non-scroll-${V}`
         )),
@@ -1448,32 +1446,32 @@ const ct = v.createContext({}), H = v.createContext(
             "data-type": "PageComponent",
             style: {
               position: "relative",
-              ...D ? {
+              ...G ? {
                 flex: 1,
-                ...j === "row" ? { alignSelf: "stretch" } : {}
+                ...M === "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
-              ...j === "column" && { overflow: "auto" },
+              ...M === "column" && { overflow: "auto" },
               ...W(e.style, {
                 debug: !1
               })
             },
-            children: S
+            children: A
           }
         ) })
       ]
     }
   ) });
-}, kt = ({
+}, Wt = ({
   id: t,
   nodeData: r,
   children: e
 }) => {
-  const i = M(q)?.embedsById?.[t], s = W(r.style, { debug: !1 });
+  const i = N(q)?.embedsById?.[t], s = W(r.style, { debug: !1 });
   return i ? /* @__PURE__ */ d(
     "div",
     {
@@ -1491,61 +1489,61 @@ const ct = v.createContext({}), H = v.createContext(
     }
   ) : /* @__PURE__ */ d("div", { style: s, "data-type": "EmbedComponent-Empty", "data-id": t, children: e });
 }, ee = {
-  EmbedComponent: kt,
-  WebViewComponent: dt,
-  ColorComponent: gt,
-  GradientComponent: mt,
-  ImageComponent: yt,
-  EmailInputComponent: bt,
-  HiddenInputComponent: Ct,
-  ImageInputComponent: vt,
-  PasswordInputComponent: xt,
-  SelectInputComponent: St,
-  TextInputComponent: It,
-  LottieComponent: wt,
-  SvgComponent: At,
-  TextComponent: Et,
-  StatefulSetComponent: ut,
+  EmbedComponent: Wt,
+  WebViewComponent: ct,
+  ColorComponent: ht,
+  GradientComponent: gt,
+  ImageComponent: mt,
+  EmailInputComponent: yt,
+  HiddenInputComponent: bt,
+  ImageInputComponent: Ct,
+  PasswordInputComponent: vt,
+  SelectInputComponent: xt,
+  TextInputComponent: St,
+  LottieComponent: It,
+  SvgComponent: wt,
+  TextComponent: At,
+  StatefulSetComponent: dt,
   StatefulCompoundComponent: Ft,
-  BackgroundContainerComponent: Tt,
-  ContainerComponent: ft,
-  CompoundComponent: Pt,
-  TopBarContainerComponent: Bt,
+  BackgroundContainerComponent: Et,
+  ContainerComponent: ut,
+  CompoundComponent: Tt,
+  TopBarContainerComponent: Pt,
   DefaultLayerComponent: Zt,
-  TabsMenuComponent: Rt,
-  MenuSideComponent: Lt,
-  SliderComponent: at,
-  PageComponent: Wt,
+  TabsMenuComponent: Bt,
+  MenuSideComponent: Rt,
+  SliderComponent: rt,
+  PageComponent: Lt,
   // Type string mappings for dynamically loaded components
-  "menu:side": Lt,
-  "page:default": Wt,
-  "container:background": Tt,
-  "container:default": ft,
-  "container:top-bar": Bt,
-  "container:slider": at,
-  "component:text": Et,
-  "component:color": gt,
-  "component:gradient": mt,
-  "component:image": yt,
-  "component:svg": At,
-  "component:compound": Pt,
-  "component:input-stateful-set": ut,
-  "component:stateful-set": ut,
+  "menu:side": Rt,
+  "page:default": Lt,
+  "container:background": Et,
+  "container:default": ut,
+  "container:top-bar": Pt,
+  "container:slider": rt,
+  "component:text": At,
+  "component:color": ht,
+  "component:gradient": gt,
+  "component:image": mt,
+  "component:svg": wt,
+  "component:compound": Tt,
+  "component:input-stateful-set": dt,
+  "component:stateful-set": dt,
   "component:stateful-compound": Ft,
-  "component:slider": at,
-  "component:webview": dt,
-  "component:web-view": dt,
+  "component:slider": rt,
+  "component:webview": ct,
+  "component:web-view": ct,
   "component:video": Xt,
-  "component:lottie": wt,
-  "component:email-input": bt,
-  "component:text-input": It,
-  "component:password-input": xt,
-  "component:select-input": St,
-  "component:image-input": vt,
-  "component:hidden-input": Ct,
-  "component:tabs-menu": Rt,
-  "component:embed": kt,
-  ContainerSliderComponent: at
+  "component:lottie": It,
+  "component:email-input": yt,
+  "component:text-input": St,
+  "component:password-input": vt,
+  "component:select-input": xt,
+  "component:image-input": Ct,
+  "component:hidden-input": bt,
+  "component:tabs-menu": Bt,
+  "component:embed": Wt,
+  ContainerSliderComponent: rt
 };
 export {
   ee as default