@bravostudioai/react 0.1.34 → 0.1.36

package/dist/components.js

@@ -1,89 +1,89 @@
-import { jsx as p, jsxs as it, Fragment as ut } from "react/jsx-runtime";
-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 { jsx as d, jsxs as it, Fragment as ut } from "react/jsx-runtime";
+import x, { useContext as M, useMemo as Vt, useState as Mt, useCallback as Nt } from "react";
+import Y from "./contexts/EncoreBindingContext.js";
+import R from "./stores/useEncoreState.js";
 import lt from "./contexts/EncoreComponentIdContext.js";
 import Ot from "axios";
 import ft from "./contexts/EncoreActionContext.js";
-import Mt from "./contexts/EncoreRepeatingContainerContext.js";
+import jt from "./contexts/EncoreRepeatingContainerContext.js";
 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) => {
+), st = (t) => t.replace(/#(\w{2})(\w{6})/, "#$2$1"), Gt = (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] = Vt({ width: 0, height: 0 }), e = x.useRef(null);
+  const [t, r] = Mt({ width: 0, height: 0 }), e = x.useRef(null);
   return x.useEffect(() => {
     if (!e.current) return;
     const n = e.current, i = () => {
-      const { width: o, height: m } = n.getBoundingClientRect();
-      r({ width: o, height: m });
+      const { width: o, height: g } = n.getBoundingClientRect();
+      r({ width: o, height: g });
     };
     i(), requestAnimationFrame(() => {
       i();
     });
-    const l = new ResizeObserver((o) => {
-      for (const m of o) {
-        const a = m.contentRect;
+    const s = new ResizeObserver((o) => {
+      for (const g of o) {
+        const a = g.contentRect;
         r({ width: a.width, height: a.height });
       }
     });
-    return l.observe(n), () => l.disconnect();
+    return s.observe(n), () => s.disconnect();
   }, []), { dimensions: t, ref: e };
-}, L = (t, r = {}) => {
-  const e = N(ct), n = N(V), i = {
+}, W = (t, r = {}) => {
+  const e = M(ct), n = M(V), i = {
     width: window.innerWidth,
     height: window.innerHeight
-  }, l = Nt(
-    (s) => (n.dimensions?.width ?? 0) * 0.01 * s,
+  }, s = Nt(
+    (l) => (n.dimensions?.width ?? 0) * 0.01 * l,
     [n.dimensions?.width]
   ), o = {};
   r = { debug: !1, ...r };
-  const m = k((s) => s.fontsById || {});
-  if (k((s) => s.fontsByIdFull || {}), !t || !t) return;
+  const g = R((l) => l.fontsById || {});
+  if (R((l) => l.fontsByIdFull || {}), !t || !t) return;
   const a = n.dimensions?.width ?? i.width, y = n.dimensions?.height ?? i.height;
   if (t.layout?.layoutSizingHorizontal || t.layout?.layoutSizingVertical || (t.width && a > 0 && (o.width = t.width * a * 0.01), t.aspectRatio && t.width ? a > 0 && (o.height = t.width * a * 0.01 / t.aspectRatio) : t.height && y > 0 && (o.height = t.height * y * 0.01)), !(n?.isFlex ?? !1) && t.positioning) {
-    const s = t.layout?.layoutSizingHorizontal === "FIXED" || t.layout?.layoutSizingVertical === "FIXED", u = s && t.positioning.top < 0 ? 0 : t.positioning.top, R = s && t.positioning.left < 0 ? 0 : t.positioning.left;
+    const l = t.layout?.layoutSizingHorizontal === "FIXED" || t.layout?.layoutSizingVertical === "FIXED", u = l && t.positioning.top < 0 ? 0 : t.positioning.top, k = l && t.positioning.left < 0 ? 0 : t.positioning.left;
     let w = !1;
     t.horizontalPosition === "center" && (w = !0), o.top = `${u}%`;
-    const S = !!t.inset;
+    const v = !!t.inset;
     if (w) {
-      if (S) {
-        const W = String(t.inset).split(/\s+/);
-        W.length === 3 ? o.inset = `${W[0]} 50% ${W[2]} auto` : W.length === 4 && (o.inset = `${W[0]} 50% ${W[2]} auto`), delete o.left, delete o.right;
+      if (v) {
+        const L = String(t.inset).split(/\s+/);
+        L.length === 3 ? o.inset = `${L[0]} 50% ${L[2]} auto` : L.length === 4 && (o.inset = `${L[0]} 50% ${L[2]} auto`), delete o.left, delete o.right;
       } else
         o.left = "50%", o.right = "auto";
       o.transform = "translateX(-50%)";
     } else
-      S ? o.inset = t.inset : o.left = `${R}%`;
-    s ? (o.right = "auto", o.bottom = "auto") : (t.positioning.bottom !== void 0 && (o.bottom = `${t.positioning.bottom}%`), t.positioning.right !== void 0 && (o.right = `${t.positioning.right}%`)), o.position = "absolute";
+      v ? o.inset = t.inset : o.left = `${k}%`;
+    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 s = e.scaleFactor ?? 1, u = t.layout.padding;
-    u.top !== void 0 && (o.paddingTop = u.top * s), u.right !== void 0 && (o.paddingRight = u.right * s), u.bottom !== void 0 && (o.paddingBottom = u.bottom * s), u.left !== void 0 && (o.paddingLeft = u.left * s);
+    const l = e.scaleFactor ?? 1, u = t.layout.padding;
+    u.top !== void 0 && (o.paddingTop = u.top * l), u.right !== void 0 && (o.paddingRight = u.right * l), u.bottom !== void 0 && (o.paddingBottom = u.bottom * l), u.left !== void 0 && (o.paddingLeft = u.left * l);
   }
   if (t.layout?.mode) {
     o.display = "flex";
-    const s = (W) => W ? {
+    const l = (L) => L ? {
       MIN: "flex-start",
       MAX: "flex-end",
       CENTER: "center",
       SPACE_BETWEEN: "space-between",
       SPACE_AROUND: "space-around",
       SPACE_EVENLY: "space-evenly"
-    }[W] || W.toLowerCase().replace(/_/g, "-") : void 0;
-    t.layout.mode == "HORIZONTAL" ? (o.flexDirection = "row", t.layout.flexWrap && (o.flexWrap = t.layout.flexWrap), o.justifyContent = s(
+    }[L] || L.toLowerCase().replace(/_/g, "-") : void 0;
+    t.layout.mode == "HORIZONTAL" ? (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 = s(
+    ), 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" ? o.flexWrap = "wrap" : t.layout.flexWrap ? o.flexWrap = t.layout.flexWrap : o.flexWrap = "nowrap";
-    const u = t.layout.itemSpacing, R = e.scaleFactor ?? 1, S = t.layout.primaryAxisAlignItems === "SPACE_BETWEEN" ? 0 : (u !== void 0 ? u : 0) * R;
-    o.gap = S === 0 ? "0px" : `${S}px`, o.rowGap = S === 0 ? "0px" : `${S}px`, o.columnGap = S === 0 ? "0px" : `${S}px`, (o.flexWrap === "wrap" || o.flexWrap === "wrap-reverse") && (o.alignContent = "flex-start"), r.debug || t.layout?.mode === "HORIZONTAL" && u === 0 ? console.log("[useEncoreStyle] Setting gap properties:", {
+    const u = t.layout.itemSpacing, k = e.scaleFactor ?? 1, v = t.layout.primaryAxisAlignItems === "SPACE_BETWEEN" ? 0 : (u !== void 0 ? u : 0) * k;
+    o.gap = v === 0 ? "0px" : `${v}px`, o.rowGap = v === 0 ? "0px" : `${v}px`, o.columnGap = v === 0 ? "0px" : `${v}px`, (o.flexWrap === "wrap" || o.flexWrap === "wrap-reverse") && (o.alignContent = "flex-start"), r.debug || t.layout?.mode === "HORIZONTAL" && u === 0 ? console.log("[useEncoreStyle] Setting gap properties:", {
       itemSpacing: u,
-      spacing: S,
+      spacing: v,
       gap: o.gap,
       rowGap: o.rowGap,
       columnGap: o.columnGap,
@@ -97,12 +97,12 @@ const ct = x.createContext({}), V = x.createContext(
     );
   }
   if (t.layout?.layoutSizingHorizontal === "FILL" && (o.width = "100%"), t.layout?.layoutSizingHorizontal === "FIXED") {
-    const s = e.scaleFactor ?? 1;
-    o.width = t.layout.size.x * s;
+    const l = e.scaleFactor ?? 1;
+    o.width = t.layout.size.x * l;
   }
   if (t.layout?.layoutSizingHorizontal, t.layout?.layoutSizingVertical === "FIXED") {
-    const s = e.scaleFactor ?? 1;
-    o.height = t.layout.size.y * s;
+    const l = e.scaleFactor ?? 1;
+    o.height = t.layout.size.y * l;
   }
   if (t.layout?.layoutSizingVertical === "FILL")
     if (!(n?.isFlex ?? !1) && t.positioning && t.positioning?.top !== void 0) {
@@ -111,21 +111,32 @@ const ct = x.createContext({}), V = x.createContext(
     } else
       o.height = "100%";
   if (t.layout?.layoutSizingVertical, t.backgroundColor && !Gt(t.backgroundColor) && (o.backgroundColor = st(t.backgroundColor)), t.color && (o.color = st(t.color)), t.lineHeightPx && (o.lineHeight = (t.lineHeightPx * (e.scaleFactor ?? 1)).toString() + "px"), t.fontSize && (o.fontSize = t.fontSize * (e.scaleFactor ?? 1)), t.fontWeight && (o.fontWeight = `${t.fontWeight}`), t.opacity && (o.opacity = t.opacity * 0.01), t.fontId) {
-    const s = m[t.fontId] || "sans-serif";
-    o.fontFamily = `"${s}"`, console.log("[AG_DEBUG] [useEncoreStyle] Font Resolution:", {
+    const l = g[t.fontId] || "sans-serif";
+    [
+      "sans-serif",
+      "serif",
+      "monospace",
+      "cursive",
+      "fantasy",
+      "system-ui",
+      "ui-sans-serif",
+      "ui-serif",
+      "ui-monospace",
+      "ui-rounded"
+    ].includes(l.toLowerCase()) ? o.fontFamily = l : o.fontFamily = `"${l}"`, console.log("[AG_DEBUG] [useEncoreStyle] Font Resolution:", {
       fontId: t.fontId,
-      resolvedFamily: s,
+      resolvedFamily: l,
       fontWeight: t.fontWeight,
       finalStyle: o.fontFamily
     });
   }
-  if (t.borderRadius && (o.borderRadius = l(t.borderRadius)), t.cornerRadii) {
-    const s = t.cornerRadii.map(l);
-    o.borderTopLeftRadius = s[0], o.borderTopRightRadius = s[1], o.borderBottomRightRadius = s[2], o.borderBottomLeftRadius = s[3], delete o.borderRadius;
+  if (t.borderRadius && (o.borderRadius = s(t.borderRadius)), t.cornerRadii) {
+    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;
-}, et = ({ id: t, nodeData: r }) => {
-  const e = N(tt), n = e?.nodeData?.[t], { patch: i, list: l } = n ?? { list: null, patch: null }, m = Array.isArray(r?.tags) && (r.tags.includes("encore:data:array") || r.tags.includes("bravo:data:array")) && e?.arrayDataById && e.arrayDataById[t] && Array.isArray(e.arrayDataById[t]) ? e.arrayDataById[t] : null;
+}, _ = ({ id: t, nodeData: r }) => {
+  const e = M(Y), n = e?.nodeData?.[t], { patch: i, list: s } = n ?? { list: null, patch: null }, g = 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 || {},
@@ -138,16 +149,16 @@ const ct = x.createContext({}), V = x.createContext(
     ...a,
     data: { ...a?.data || {}, text: String(y) }
   });
-  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 = {
+  const S = Array.isArray(r?.tags) && (r.tags.includes("encore:data") || r.tags.includes("bravo:data")), m = e?.rootData;
+  m && m[t] && typeof m[t] == "object" && (a = {
     ...a,
     data: {
       ...a.data || {},
-      ...f[t]
+      ...m[t]
     }
   });
-  const s = e?.nodeData && typeof e.nodeData == "object";
-  if (v || s) {
+  const l = e?.nodeData && typeof e.nodeData == "object";
+  if (S || l) {
     const u = e?.nodeData;
     if (u && typeof u == "object") {
       if (u[t] !== void 0) {
@@ -159,7 +170,7 @@ const ct = x.createContext({}), V = x.createContext(
             ...w
           }
         });
-      } else if (v && u.description && a.data && (a = {
+      } else if (S && u.description && a.data && (a = {
         ...a,
         data: {
           ...a.data,
@@ -180,45 +191,45 @@ const ct = x.createContext({}), V = x.createContext(
   }
   return {
     patch: i,
-    list: l || m,
+    list: s || g,
     // Use arrayData if list is not provided
     patchedNodeData: a,
-    arrayData: m
+    arrayData: g
     // Also return separately for components that need it
   };
-}, Y = ({
+}, Q = ({
   id: t,
   nodeData: r,
   children: e,
   _parentStatefulSetId: n,
   _parentInputGroupInfo: i,
-  _parentName: l
+  _parentName: s
 }) => {
-  const o = k((h) => h.baseURL), m = k((h) => h.appId);
-  k((h) => h.pageId);
+  const o = R((h) => h.baseURL), g = R((h) => h.appId);
+  R((h) => h.pageId);
   const { onAction: a } = x.useContext(ft), { statefulSetId: y } = x.useContext(
     lt
-  ), v = n || y, { patchedNodeData: f } = et({ id: t, nodeData: r }), s = k(
+  ), S = n || y, { patchedNodeData: m } = _({ id: t, nodeData: r }), l = R(
     (h) => h.setStatefulSetVariant
-  ), u = k(
+  ), u = R(
     (h) => h.setInputGroupValue
-  ), R = k((h) => h.setAccessToken), { app: w } = k((h) => h.app);
+  ), k = R((h) => h.setAccessToken), { app: w } = R((h) => h.app);
   w.data?.app?.startPageId, w.data?.app?.PageId;
-  const S = L(
+  const v = W(
     {
       positioning: r.style?.positioning
     },
     { debug: !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) => {
+  v.zIndex = 99999, v.backgroundColor = "transparent", v.position = "absolute", v.top = "0", v.left = "0", v.right = "0", v.bottom = "0", v.width = "100%", v.height = "100%", v.pointerEvents = "auto", v.isolation = "isolate";
+  const L = async (h) => {
     let A = !1;
-    const G = () => {
+    const j = () => {
       A = !1;
     };
     if (typeof a == "function")
       try {
-        await a({ bravo: { cancel: G, action: h, componentId: t } }), A = !0;
+        await a({ bravo: { cancel: j, action: h, componentId: t } }), A = !0;
       } catch {
       }
     else
@@ -243,7 +254,7 @@ const ct = x.createContext({}), V = x.createContext(
         case "homepage":
           break;
         case "logout":
-          R(void 0);
+          k(void 0);
           break;
         case "none":
           break;
@@ -254,19 +265,19 @@ const ct = x.createContext({}), V = x.createContext(
           window.location.href = `tel:${h.params.phone}`;
           break;
         case "remote":
-          const O = btoa(JSON.stringify(h.params?.data || {})), j = `${o}/devices/apps/${m}/node/${t}/trigger/${h.event}?params=${O}`, K = await Ot.post(j);
-          K.data?.action && await W(K.data);
+          const q = btoa(JSON.stringify(h.params?.data || {})), Z = `${o}/devices/apps/${g}/node/${t}/trigger/${h.event}?params=${q}`, G = await Ot.post(Z);
+          G.data?.action && await L(G.data);
           break;
         case "set-access-token":
-          R(h.params);
+          k(h.params);
           break;
         case "set-state":
-          if (i && l)
+          if (i && s)
             if (console.log("🔵 Input group change:", {
               groupName: i.groupName,
-              elementName: l,
+              elementName: s,
               hasOnAction: typeof a == "function"
-            }), u(i.groupName, l), typeof a == "function")
+            }), u(i.groupName, s), typeof a == "function")
               try {
                 await a({
                   bravo: {
@@ -277,29 +288,29 @@ const ct = x.createContext({}), V = x.createContext(
                       params: {
                         groupName: i.groupName,
                         groupType: i.type,
-                        value: l
+                        value: s
                       },
                       event: "tap"
                     },
                     componentId: t
                   }
                 }), console.log("✅ Input group change event fired");
-              } catch (E) {
-                console.error("❌ Error in onAction callback:", E);
+              } catch (z) {
+                console.error("❌ Error in onAction callback:", z);
               }
             else
               console.warn("⚠️ No onAction callback provided");
           else {
-            let E = v || h.params?.stateSetId || f.data?.stateSetId;
-            if (!E) {
+            let z = S || h.params?.stateSetId || m.data?.stateSetId;
+            if (!z) {
               console.error("❌ No stateSetId found in action or nodeData!", {
                 actionParams: h.params,
-                nodeDataStateSetId: f.data?.stateSetId,
-                parentStatefulSetId: v
+                nodeDataStateSetId: m.data?.stateSetId,
+                parentStatefulSetId: S
               });
               break;
             }
-            s(E, h.params.state);
+            l(z, h.params.state);
           }
           break;
         case "showalert":
@@ -311,17 +322,17 @@ const ct = x.createContext({}), V = x.createContext(
   };
   if (r.href)
     return /* @__PURE__ */ it(ut, { children: [
-      /* @__PURE__ */ p(
+      /* @__PURE__ */ d(
         "button",
         {
           type: "button",
-          onClick: () => W({
+          onClick: () => L({
             action: "goto",
             params: { href: r.href },
             event: "tap"
           }),
           style: {
-            ...S,
+            ...v,
             cursor: "pointer",
             background: "transparent",
             border: "none",
@@ -332,16 +343,16 @@ const ct = x.createContext({}), V = x.createContext(
       ),
       e
     ] });
-  let $ = f.actions && f.actions.length > 0 ? f.actions : r.actions || [];
-  if (v && $.length > 0 && ($ = $.map((h) => h.action === "set-state" ? (h.params?.stateSetId, {
+  let $ = m.actions && m.actions.length > 0 ? m.actions : r.actions || [];
+  if (S && $.length > 0 && ($ = $.map((h) => h.action === "set-state" ? (h.params?.stateSetId, {
     ...h,
     params: {
       ...h.params,
-      stateSetId: v
+      stateSetId: S
       // Always use parent's id
     }
-  }) : h)), $.length === 0 && (f.data?.stateSetId || v))
-    if (i && l)
+  }) : h)), $.length === 0 && (m.data?.stateSetId || S))
+    if (i && s)
       $ = [
         {
           action: "set-state",
@@ -353,12 +364,12 @@ const ct = x.createContext({}), V = x.createContext(
         }
       ];
     else {
-      const h = v || f.data.stateSetId;
+      const h = S || m.data.stateSetId;
       h ? $ = [
         {
           action: "set-state",
           params: {
-            state: k.getState().statefulSetVariants[h] === "active" ? "default" : "active",
+            state: R.getState().statefulSetVariants[h] === "active" ? "default" : "active",
             stateSetId: h
             // Use parent's id or button's stateSetId
           },
@@ -373,25 +384,25 @@ const ct = x.createContext({}), V = x.createContext(
     const h = $[0];
     return h.event !== "tap" ? e : /* @__PURE__ */ it(ut, { children: [
       e,
-      /* @__PURE__ */ p(
+      /* @__PURE__ */ d(
         "div",
         {
           onClick: (A) => {
-            A.stopPropagation(), W(h);
+            A.stopPropagation(), L(h);
           },
           onMouseDown: (A) => A.stopPropagation(),
           onMouseUp: (A) => A.stopPropagation(),
-          style: { ...S, cursor: "pointer", pointerEvents: "auto" }
+          style: { ...v, cursor: "pointer", pointerEvents: "auto" }
         }
       )
     ] });
   }
   return e;
 }, ht = ({ id: t, name: r, nodeData: e }) => {
-  const n = L(e.style, {
+  const n = W(e.style, {
     debug: !1
   });
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ d(
     "iframe",
     {
       "data-id": t,
@@ -401,66 +412,86 @@ const ct = x.createContext({}), V = x.createContext(
       src: e.data?.params?.url
     }
   );
+}, Xt = ({ id: t, name: r, nodeData: e }) => {
+  const { patchedNodeData: n } = _({ id: t, nodeData: e });
+  e = n;
+  const i = W(e.style, {
+    debug: !1
+  }), s = R((a) => a.assetsById), o = e.style?.scaleMode || "fill";
+  o === "fill" ? i.objectFit = "cover" : o === "fit" && (i.objectFit = "contain"), i.objectPosition = "center";
+  let g = e.data?.videoUrl;
+  return !g && e.encoreData?.video && (g = e.encoreData.video), g || (g = s[e.assetId]?.url), !g && !i.backgroundColor && !i.borderColor ? null : /* @__PURE__ */ d(
+    "video",
+    {
+      "data-id": t,
+      "data-name": r,
+      "data-type": "VideoComponent",
+      style: { ...i },
+      src: g,
+      controls: !0,
+      playsInline: !0
+    }
+  );
 }, gt = ({ id: t, name: r, nodeData: e }) => {
-  const n = L(e.style, {
+  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 v = Math.max(n.borderWidth || 0, 1);
-    (!n.width || typeof n.width == "number" && n.width === 0) && (n.width = v), (!n.height || typeof n.height == "number" && n.height === 0) && (n.height = v), n.boxSizing = "border-box";
+    const S = Math.max(n.borderWidth || 0, 1);
+    (!n.width || typeof n.width == "number" && n.width === 0) && (n.width = S), (!n.height || typeof n.height == "number" && n.height === 0) && (n.height = S), n.boxSizing = "border-box";
   }
-  const i = Array.isArray(e.tags) && e.tags.includes("bravo:layer"), l = N(V)?.isFlex ?? !1, o = e.style?.positioning, m = o && typeof o.top == "number" && typeof o.left == "number" && typeof o.right == "number" && typeof o.bottom == "number" && o.top === 0 && o.left === 0 && o.right === 0 && o.bottom === 0, a = i && (l || m), y = r && r.toLowerCase().startsWith("clip");
-  return a && (n.position = "absolute", n.top = 0, n.left = 0, n.right = 0, n.bottom = 0, n.zIndex = -1, n.width && typeof n.width == "string" && n.width.includes("%") && delete n.width, n.height && typeof n.height == "string" && n.height.includes("%") && delete n.height), y && (n.backgroundColor = "transparent"), /* @__PURE__ */ p(Y, { id: t, nodeData: e, children: /* @__PURE__ */ p("div", { "data-name": r, "data-type": "ColorComponent", style: n }) });
+  const i = Array.isArray(e.tags) && e.tags.includes("bravo:layer"), s = M(V)?.isFlex ?? !1, o = e.style?.positioning, g = 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 || g), y = r && r.toLowerCase().startsWith("clip");
+  return a && (n.position = "absolute", n.top = 0, n.left = 0, n.right = 0, n.bottom = 0, n.zIndex = -1, n.width && typeof n.width == "string" && n.width.includes("%") && delete n.width, n.height && typeof n.height == "string" && n.height.includes("%") && delete n.height), y && (n.backgroundColor = "transparent"), /* @__PURE__ */ d(Q, { id: t, nodeData: e, children: /* @__PURE__ */ d("div", { "data-name": r, "data-type": "ColorComponent", style: n }) });
 }, mt = ({
   id: t,
   name: r,
   nodeData: e
 }) => {
-  const n = L(e.style, {
+  const n = W(e.style, {
     debug: !1
-  }), i = e.style, l = Array.isArray(i?.gradientColorStops) ? i.gradientColorStops.map((o) => {
+  }), i = e.style, s = Array.isArray(i?.gradientColorStops) ? i.gradientColorStops.map((o) => {
     if (!o?.color) return null;
-    const m = st(o.color);
+    const g = st(o.color);
     if (typeof o.position == "number") {
       const a = o.position * 100;
-      return `${m} ${a}%`;
+      return `${g} ${a}%`;
     }
-    return m;
+    return g;
   }).filter(Boolean).join(", ") : "";
-  if (l) {
+  if (s) {
     const o = i?.gradientType || "linear";
-    n.backgroundImage = o === "radial" ? `radial-gradient(${l})` : `linear-gradient(${l})`, delete n.backgroundColor;
+    n.backgroundImage = o === "radial" ? `radial-gradient(${s})` : `linear-gradient(${s})`, delete n.backgroundColor;
   }
-  return /* @__PURE__ */ p(Y, { id: t, nodeData: e, children: /* @__PURE__ */ p("div", { "data-name": r, "data-type": "GradientComponent", style: n }) });
+  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 }) => {
-  const { patchedNodeData: n } = et({ id: t, nodeData: e });
+  const { patchedNodeData: n } = _({ id: t, nodeData: e });
   e = n;
-  const i = L(e.style, {
+  const i = W(e.style, {
     debug: !1
-  }), l = N(V), o = k((u) => u.assetsById), m = e.style?.scaleMode || "fill";
-  m === "fill" ? i.objectFit = "cover" : m === "fit" && (i.objectFit = "contain"), i.objectPosition = "center";
+  }), s = M(V), o = R((u) => u.assetsById), g = e.style?.scaleMode || "fill";
+  g === "fill" ? i.objectFit = "cover" : g === "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 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";
+  const y = e.style?.positioning, S = e.style?.aspectRatio, m = s.dimensions?.width || 0, l = s.dimensions?.height || 0;
+  if (y && S && m > 0) {
+    const u = typeof y.left == "number" && typeof y.right == "number", k = typeof y.top == "number" && typeof y.bottom == "number";
     if (u) {
       const w = 100 - y.left - y.right;
       if (w > 0) {
-        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;
+        const v = w * m / 100;
+        i.width = v, i.height = v / S, i.left = `${Math.max(0, y.left)}%`, i.top = `${Math.max(0, y.top)}%`, delete i.right, delete i.bottom;
       }
-    } else if (R && s > 0) {
+    } else if (k && l > 0) {
       const w = 100 - y.top - y.bottom;
       if (w > 0) {
-        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;
+        const v = w * l / 100;
+        i.height = v, i.width = v * S, i.left = `${Math.max(0, y.left)}%`, i.top = `${Math.max(0, y.top)}%`, delete i.right, delete i.bottom;
       }
     }
   }
-  return /* @__PURE__ */ p(Y, { id: t, nodeData: e, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ d(Q, { id: t, nodeData: e, children: /* @__PURE__ */ d(
     "img",
     {
       "data-id": t,
@@ -476,11 +507,11 @@ const ct = x.createContext({}), V = x.createContext(
   name: r,
   nodeData: e
 }) => {
-  const n = k((l) => l.setFormInputValue), i = L(e.style, { debug: !1 });
-  return /* @__PURE__ */ p(
+  const n = R((s) => s.setFormInputValue), i = W(e.style, { debug: !1 });
+  return /* @__PURE__ */ d(
     "input",
     {
-      onChange: (l) => n(t, l.target.value),
+      onChange: (s) => n(t, s.target.value),
       "data-id": t,
       "data-name": r,
       "data-type": "EmailInputComponent",
@@ -494,8 +525,8 @@ const ct = x.createContext({}), V = x.createContext(
   name: r,
   nodeData: e
 }) => {
-  const n = L(e.style);
-  return n.visibility = "hidden", /* @__PURE__ */ p(
+  const n = W(e.style);
+  return n.visibility = "hidden", /* @__PURE__ */ d(
     "input",
     {
       "data-id": t,
@@ -505,21 +536,21 @@ const ct = x.createContext({}), V = x.createContext(
       type: "hidden"
     }
   );
-}, St = ({
+}, vt = ({
   id: t,
   name: r,
   nodeData: e
 }) => {
-  const n = k((o) => o.setFormInputValue), i = L(e.style, { debug: !1 }), l = k((o) => o.assetsById);
+  const n = R((o) => o.setFormInputValue), i = W(e.style, { debug: !1 }), s = R((o) => o.assetsById);
   return /* @__PURE__ */ it(ut, { children: [
-    /* @__PURE__ */ p(
+    /* @__PURE__ */ d(
       "div",
       {
         style: { ...i, zIndex: 9999, cursor: "pointer" },
         onClick: () => alert("Image picker")
       }
     ),
-    /* @__PURE__ */ p(
+    /* @__PURE__ */ d(
       "img",
       {
         onChange: (o) => n(t, o.target.value),
@@ -527,7 +558,7 @@ const ct = x.createContext({}), V = x.createContext(
         "data-id": t,
         "data-name": r,
         "data-type": "ImageInputComponent",
-        src: l[e.assetId]?.url,
+        src: s[e.assetId]?.url,
         alt: r
       }
     )
@@ -537,11 +568,11 @@ const ct = x.createContext({}), V = x.createContext(
   name: r,
   nodeData: e
 }) => {
-  const n = k((l) => l.setFormInputValue), i = L(e.style, { debug: !1 });
-  return /* @__PURE__ */ p(
+  const n = R((s) => s.setFormInputValue), i = W(e.style, { debug: !1 });
+  return /* @__PURE__ */ d(
     "input",
     {
-      onChange: (l) => n(t, l.target.value),
+      onChange: (s) => n(t, s.target.value),
       "data-id": t,
       "data-name": r,
       "data-type": "PasswordInputComponent",
@@ -550,25 +581,25 @@ const ct = x.createContext({}), V = x.createContext(
       type: "password"
     }
   );
-}, vt = ({
+}, St = ({
   id: t,
   name: r,
   nodeData: e
 }) => {
-  const n = k((f) => f.setFormInputValue), { onAction: i } = x.useContext(ft), { patchedNodeData: l } = et({ id: t, nodeData: e }), o = L(l.style, { debug: !1 });
+  const n = R((m) => m.setFormInputValue), { onAction: i } = x.useContext(ft), { patchedNodeData: s } = _({ 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 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]);
+  const g = s.data?.value, a = s.data?.options, y = x.useMemo(() => !a || !Array.isArray(a) ? [] : a.map((m) => typeof m == "string" ? { value: m, label: m } : m), [a]);
   return /* @__PURE__ */ it(
     "select",
     {
       "data-id": t,
       "data-name": r,
       "data-type": "SelectInputComponent",
-      value: m ?? "",
+      value: g ?? "",
       style: o,
-      onChange: async (f) => {
-        const s = f.target.value;
-        if (n(t, s), console.log(`Select changed: ${s}`), typeof i == "function")
+      onChange: async (m) => {
+        const l = m.target.value;
+        if (n(t, l), console.log(`Select changed: ${l}`), typeof i == "function")
           try {
             await i({
               bravo: {
@@ -577,7 +608,7 @@ const ct = x.createContext({}), V = x.createContext(
                 action: {
                   action: "select-change",
                   nodeId: t,
-                  params: { value: s }
+                  params: { value: l }
                 },
                 componentId: t
               }
@@ -586,8 +617,8 @@ const ct = x.createContext({}), V = x.createContext(
           }
       },
       children: [
-        y.length === 0 && /* @__PURE__ */ p("option", { value: "", disabled: !0, children: "Select an option..." }),
-        y.map((f) => /* @__PURE__ */ p("option", { value: f.value, children: f.label }, f.value))
+        y.length === 0 && /* @__PURE__ */ d("option", { value: "", disabled: !0, children: "Select an option..." }),
+        y.map((m) => /* @__PURE__ */ d("option", { value: m.value, children: m.label }, m.value))
       ]
     }
   );
@@ -596,13 +627,13 @@ const ct = x.createContext({}), V = x.createContext(
   name: r,
   nodeData: e
 }) => {
-  const n = k((l) => l.setFormInputValue), i = L(e.style, {
+  const n = R((s) => s.setFormInputValue), i = W(e.style, {
     debug: !1
   });
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ d(
     "input",
     {
-      onChange: (l) => n(t, l.target.value),
+      onChange: (s) => n(t, s.target.value),
       name: t,
       "data-id": t,
       "data-name": r,
@@ -618,8 +649,8 @@ const ct = x.createContext({}), V = x.createContext(
   nodeData: e,
   children: n
 }) => {
-  const i = L(e.style);
-  return /* @__PURE__ */ p(Y, { id: t, nodeData: e, children: /* @__PURE__ */ p(
+  const i = W(e.style);
+  return /* @__PURE__ */ d(Q, { id: t, nodeData: e, children: /* @__PURE__ */ d(
     "div",
     {
       "data-id": t,
@@ -630,21 +661,21 @@ const ct = x.createContext({}), V = x.createContext(
     }
   ) });
 }, At = ({ id: t, name: r, nodeData: e }) => {
-  const n = L(e.style, {
+  const n = W(e.style, {
     debug: !1
-  }), i = k((o) => o.assetsById), l = e.style?.positioning;
-  if (l) {
-    const o = typeof l.left == "number" && typeof l.right == "number", m = typeof l.top == "number" && typeof l.bottom == "number";
+  }), i = R((o) => o.assetsById), s = e.style?.positioning;
+  if (s) {
+    const o = typeof s.left == "number" && typeof s.right == "number", g = typeof s.top == "number" && typeof s.bottom == "number";
     if (o) {
-      const a = 100 - l.left - l.right;
-      n.width = `${a}%`, n.left = `${l.left}%`, delete n.right;
+      const a = 100 - s.left - s.right;
+      n.width = `${a}%`, n.left = `${s.left}%`, delete n.right;
     }
-    if (m) {
-      const a = 100 - l.top - l.bottom;
-      n.height = `${a}%`, n.top = `${l.top}%`, delete n.bottom;
+    if (g) {
+      const a = 100 - s.top - s.bottom;
+      n.height = `${a}%`, n.top = `${s.top}%`, delete n.bottom;
     }
   }
-  return n.objectFit || (n.objectFit = "fill"), /* @__PURE__ */ p(Y, { id: t, nodeData: e, children: /* @__PURE__ */ p(
+  return n.objectFit || (n.objectFit = "fill"), /* @__PURE__ */ d(Q, { id: t, nodeData: e, children: /* @__PURE__ */ d(
     "img",
     {
       "data-id": t,
@@ -655,8 +686,8 @@ const ct = x.createContext({}), V = x.createContext(
       alt: r
     }
   ) });
-}, Et = ({ id: t, name: r, nodeData: e }) => {
-  const { patchedNodeData: n } = et({ id: t, nodeData: e });
+}, Ft = ({ id: t, name: r, nodeData: e }) => {
+  const { patchedNodeData: n } = _({ id: t, nodeData: e });
   e = n;
   const i = e.data?.text;
   r && r.includes("Purpose") && console.log("TextComponent Debug:", {
@@ -666,24 +697,24 @@ const ct = x.createContext({}), V = x.createContext(
     style: e.style,
     color: e.style?.color
   });
-  const l = e.style, o = e.fontId ? { ...l, fontId: e.fontId } : l, m = L(o, {
+  const s = e.style, o = e.fontId ? { ...s, fontId: e.fontId } : s, g = W(o, {
     debug: !1
   });
-  m.display = "flex", m.flexDirection = "column", l.verticalPosition && (m.justifyContent = {
+  g.display = "flex", g.flexDirection = "column", s.verticalPosition && (g.justifyContent = {
     "from-top": "flex-start",
     center: "center",
     "from-bottom": "flex-end"
-  }[l.verticalPosition]);
+  }[s.verticalPosition]);
   const a = i && (i.includes(`
 `) || i.includes("\r"));
   let y;
-  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(
+  return a && g.flexDirection === "column" ? y = i.split(/\r?\n/).filter((m) => m.length > 0).map((m, l) => /* @__PURE__ */ d("div", { style: { lineHeight: "inherit" }, children: m }, l)) : y = i, /* @__PURE__ */ d(Q, { id: t, nodeData: e, children: /* @__PURE__ */ d(
     "div",
     {
       "data-id": t,
       "data-name": r,
       "data-type": "TextComponent",
-      style: m,
+      style: g,
       children: y
     }
   ) });
@@ -693,82 +724,82 @@ const ct = x.createContext({}), V = x.createContext(
   nodeData: e,
   children: n
 }) => {
-  const i = N(tt), { patchedNodeData: l } = et({ id: t, nodeData: e });
-  e = l;
-  const o = jt(e.tags), m = o ? k((w) => w.inputGroups[o.groupName]) : null, a = k((w) => w.statefulSetVariants[t]), y = L(e.style, {
+  const i = M(Y), { patchedNodeData: s } = _({ id: t, nodeData: e });
+  e = s;
+  const o = Ut(e.tags), g = o ? R((w) => w.inputGroups[o.groupName]) : null, a = R((w) => w.statefulSetVariants[t]), y = W(e.style, {
     debug: !1
   });
-  let v;
-  o && m !== null ? v = m === r ? "active" : "default" : v = a || e.data.initialState || "default";
-  const f = x.Children.toArray(n).find((w) => x.isValidElement(w) ? w.props?.nodeData?.data?.state === v : !1), s = x.isValidElement(f) ? x.cloneElement(f, {
+  let S;
+  o && g !== null ? S = g === r ? "active" : "default" : S = a || e.data.initialState || "default";
+  const m = x.Children.toArray(n).find((w) => x.isValidElement(w) ? w.props?.nodeData?.data?.state === S : !1), l = x.isValidElement(m) ? x.cloneElement(m, {
     _parentStatefulSetId: t,
     _parentInputGroupInfo: o,
     _parentName: r
     // Pass the name so we can identify which element is active
-  }) : f, u = /* @__PURE__ */ p(
+  }) : m, u = /* @__PURE__ */ d(
     "div",
     {
       "data-id": t,
       "data-name": r,
       "data-type": "StatefulSetComponent",
       style: y,
-      children: s
+      children: l
     }
   );
   if (e.type === "component:input-stateful-set")
     return u;
-  const R = x.useContext(lt);
-  return /* @__PURE__ */ p(
-    tt.Provider,
+  const k = x.useContext(lt);
+  return /* @__PURE__ */ d(
+    Y.Provider,
     {
       value: { nodeData: i?.nodeData?.[t] || {} },
-      children: /* @__PURE__ */ p(
+      children: /* @__PURE__ */ d(
         lt.Provider,
         {
-          value: { ...R, statefulSetId: t },
+          value: { ...k, statefulSetId: t },
           children: u
         }
       )
     }
   );
-}, Ft = ({
+}, Et = ({
   id: t,
   name: r,
   nodeData: e,
   children: n,
   _parentStatefulSetId: i,
-  _parentInputGroupInfo: l,
+  _parentInputGroupInfo: s,
   _parentName: o
 }) => {
-  const m = L(e.style, {
+  const g = W(e.style, {
     debug: !1
   }), a = {
-    ...m,
-    position: m.position || "relative"
+    ...g,
+    position: g.position || "relative"
   };
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ d(
     "div",
     {
       "data-id": t,
       "data-name": r,
       "data-type": "StatefulCompoundComponent",
       style: a,
-      children: /* @__PURE__ */ p(
-        Y,
+      children: /* @__PURE__ */ d(
+        Q,
         {
           id: t,
           nodeData: e,
           _parentStatefulSetId: i,
-          _parentInputGroupInfo: l,
+          _parentInputGroupInfo: s,
           _parentName: o,
           children: n
         }
       )
     }
   );
-}, Tt = ({ id: t, name: r, children: e }) => {
-  N(V);
-  const { dimensions: n, ref: i } = rt(), l = {
+}, Pt = ({ id: t, name: r, children: e }) => {
+  M(V);
+  const { dimensions: n, ref: i } = rt(), s = {
     zIndex: 0,
     flex: 1,
     position: "absolute",
@@ -777,14 +808,14 @@ const ct = x.createContext({}), V = x.createContext(
     width: "100%",
     height: "100%"
   };
-  return /* @__PURE__ */ p(V.Provider, { value: { dimensions: n, isFlex: !1 }, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ d(V.Provider, { value: { dimensions: n, isFlex: !1 }, children: /* @__PURE__ */ d(
     "div",
     {
       "data-id": t,
       "data-name": r,
       "data-type": "BackgroundContainerComponent",
       ref: i,
-      style: l,
+      style: s,
       children: e
     }
   ) });
@@ -794,57 +825,57 @@ const ct = x.createContext({}), V = x.createContext(
   nodeData: e,
   children: n,
   _arrayItemIndex: i,
-  _arrayItemData: l
+  _arrayItemData: s
 }) => {
   t === "01KB929X1KK5TX0K8VBNP6ZDPG" && console.log(
     `[DEBUG] ContainerComponent ${t} (Hero) FULL nodeData:`,
     JSON.stringify(e, null, 2)
   );
-  const o = N(tt), { patchedNodeData: m, list: a, arrayData: y } = et({
+  const o = M(Y), { patchedNodeData: g, list: a, arrayData: y } = _({
     id: t,
     nodeData: e
   });
-  e = m;
-  const { dimensions: v, ref: f } = rt(), s = L(e.style, {
+  e = g;
+  const { dimensions: S, ref: m } = rt(), l = W(e.style, {
     debug: !1
-  }), 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";
+  }), u = !!e.style.layout?.mode, k = e.style.layout?.mode === "HORIZONTAL" ? "row" : "column", w = l.width !== void 0, v = l.height !== void 0, L = M(V), $ = L?.isFlex ?? !1, h = L?.flexDirection, A = $ && h === "row", j = !$ && e.style.positioning, q = e.style.layout?.layoutSizingHorizontal === "FIXED" || e.style.layout?.layoutSizingVertical === "FIXED", Z = e.style.layout?.layoutSizingHorizontal === "HUG" || e.style.layout?.layoutSizingVertical === "HUG";
+  if (!w && !A && !(j && (q || Z)) && (l.width = "100%"), !v) {
+    const B = !$ && e.style.positioning, O = e.style.layout?.layoutSizingVertical === "FILL";
     if (!(e.style.layout?.layoutSizingVertical === "HUG")) {
-      if (!u) if (B && Z && e.style.positioning?.top !== void 0) {
-        const Q = 100 - e.style.positioning.top;
-        s.height = `${Q}%`;
+      if (!u) if (B && O && e.style.positioning?.top !== void 0) {
+        const tt = 100 - e.style.positioning.top;
+        l.height = `${tt}%`;
       } else
-        s.height = "100%";
+        l.height = "100%";
     }
   }
-  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
+  const G = e.style.layout?.layoutSizingHorizontal || e.style.layout?.layoutSizingVertical, K = e.style.positioning && !u && (G || !0) ? { ...l, position: "absolute" } : l.position === "absolute" ? l : { ...l, position: l.position || "relative" }, U = (B) => typeof B == "number" ? B : typeof B == "string" && B.endsWith("px") && parseFloat(B) || 0, E = U(l.paddingLeft), p = U(l.paddingRight), J = U(l.paddingTop), N = U(l.paddingBottom), P = q && typeof l.width == "number" && typeof l.height == "number" ? {
+    width: l.width - E - p,
+    height: l.height - J - N
   } : {
-    width: v.width - M - g,
-    height: v.height - q - X
+    width: S.width - E - p,
+    height: S.height - J - N
   };
   if (i != null && a) {
     const B = a[i];
     if (B !== void 0) {
-      const Z = typeof B == "object" && B !== null ? {
+      const O = typeof B == "object" && B !== null ? {
         nodeData: B,
         arrayDataById: o?.arrayDataById,
         textOverridesById: o?.textOverridesById,
         rootData: o?.rootData
       } : { nodeData: B };
-      return /* @__PURE__ */ p(tt.Provider, { value: Z, children: /* @__PURE__ */ p(
+      return /* @__PURE__ */ d(Y.Provider, { value: O, children: /* @__PURE__ */ d(
         V.Provider,
         {
-          value: { dimensions: P, isFlex: u, flexDirection: R },
-          children: /* @__PURE__ */ p(
+          value: { dimensions: P, isFlex: u, flexDirection: k },
+          children: /* @__PURE__ */ d(
             "div",
             {
               "data-id": `${t}:${i}`,
               "data-name": r,
               "data-type": "ContainerComponent",
-              style: H,
+              style: K,
               children: n
             }
           )
@@ -854,28 +885,28 @@ const ct = x.createContext({}), V = x.createContext(
   }
   if (a) {
     const B = y || a;
-    return Ht(() => B.map((J, ot) => {
-      const Q = typeof J == "object" && J !== null ? {
-        nodeData: J,
+    return Vt(() => B.map((X, ot) => {
+      const tt = typeof X == "object" && X !== null ? {
+        nodeData: X,
         arrayDataById: o?.arrayDataById,
         textOverridesById: o?.textOverridesById,
         rootData: o?.rootData
-      } : { nodeData: J };
-      return /* @__PURE__ */ p(
-        tt.Provider,
+      } : { nodeData: X };
+      return /* @__PURE__ */ d(
+        Y.Provider,
         {
-          value: Q,
-          children: /* @__PURE__ */ p(
+          value: tt,
+          children: /* @__PURE__ */ d(
             V.Provider,
             {
-              value: { dimensions: P, isFlex: u, flexDirection: R },
-              children: /* @__PURE__ */ p(
+              value: { dimensions: P, isFlex: u, flexDirection: k },
+              children: /* @__PURE__ */ d(
                 "div",
                 {
                   "data-id": `${t}:${ot}`,
                   "data-name": r,
                   "data-type": "ContainerComponent",
-                  style: H,
+                  style: K,
                   children: n
                 }
               )
@@ -888,53 +919,53 @@ const ct = x.createContext({}), V = x.createContext(
   }
   let F = e.actions || [];
   !Array.isArray(F) && typeof F == "object" && F !== null && (F = Object.entries(F).map(
-    ([B, Z]) => ({
+    ([B, O]) => ({
       event: B,
-      ...typeof Z == "object" && Z !== null ? Z : {}
+      ...typeof O == "object" && O !== null ? O : {}
     })
   ));
-  const z = Array.isArray(F) && F.length > 0;
-  return /* @__PURE__ */ p(
+  const H = Array.isArray(F) && F.length > 0;
+  return /* @__PURE__ */ d(
     V.Provider,
     {
-      value: { dimensions: P, isFlex: u, flexDirection: R },
-      children: /* @__PURE__ */ p(
+      value: { dimensions: P, isFlex: u, flexDirection: k },
+      children: /* @__PURE__ */ d(
         "div",
         {
           "data-id": t,
           "data-name": r,
           "data-type": "ContainerComponent",
-          ref: f,
-          style: H,
-          children: z ? /* @__PURE__ */ p(Y, { id: t, nodeData: e, children: n }) : n
+          ref: m,
+          style: K,
+          children: H ? /* @__PURE__ */ d(Q, { id: t, nodeData: e, children: n }) : n
         }
       )
     }
   );
-}, Pt = pt, Bt = ({ id: t, name: r, nodeData: e, children: n }) => {
-  const { dimensions: i, ref: l } = rt(), o = L(e.style, {
+}, Tt = pt, Bt = ({ id: t, name: r, nodeData: e, children: n }) => {
+  const { dimensions: i, ref: s } = rt(), o = W(e.style, {
     debug: !1
-  }), m = !!e.style.layout?.mode, a = e.style.layout?.mode === "HORIZONTAL" ? "row" : "column", y = o.position ? o : { ...o, position: "relative" };
-  return /* @__PURE__ */ p(
+  }), g = !!e.style.layout?.mode, a = e.style.layout?.mode === "HORIZONTAL" ? "row" : "column", y = o.position ? o : { ...o, position: "relative" };
+  return /* @__PURE__ */ d(
     V.Provider,
     {
-      value: { dimensions: i, isFlex: m, flexDirection: a },
-      children: /* @__PURE__ */ p(
+      value: { dimensions: i, isFlex: g, flexDirection: a },
+      children: /* @__PURE__ */ d(
         "div",
         {
           "data-id": t,
           "data-name": r,
           "data-type": "TopBarContainerComponent",
-          ref: l,
+          ref: s,
           style: y,
           children: n
         }
       )
     }
   );
-}, Ut = ({ id: t, name: r, nodeData: e, children: n }) => {
-  const i = L(e.style, { debug: !1 });
-  return /* @__PURE__ */ p(
+}, Zt = ({ id: t, name: r, nodeData: e, children: n }) => {
+  const i = W(e.style, { debug: !1 });
+  return /* @__PURE__ */ d(
     "div",
     {
       "data-id": t,
@@ -944,20 +975,20 @@ const ct = x.createContext({}), V = x.createContext(
       children: n
     }
   );
-}, Lt = ({ id: t, name: r, nodeData: e, children: n }) => /* @__PURE__ */ p(
+}, Wt = ({ id: t, name: r, nodeData: e, children: n }) => /* @__PURE__ */ d(
   "div",
   {
     "data-id": t,
     "data-name": r,
     "data-type": "TabsMenuComponent",
-    style: L(e.style),
+    style: W(e.style),
     children: n
   }
-), Wt = ({ id: t, name: r, nodeData: e, children: n }) => {
-  const i = L(e.style, {
+), Lt = ({ id: t, name: r, nodeData: e, children: n }) => {
+  const i = W(e.style, {
     debug: !1
   });
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ d(
     "div",
     {
       "data-id": t,
@@ -972,176 +1003,176 @@ const ct = x.createContext({}), V = x.createContext(
     `[DEBUG] SliderComponent ${t} FULL nodeData:`,
     JSON.stringify(e, null, 2)
   );
-  const { dimensions: i, ref: l } = rt(), o = x.useRef(null), m = x.useRef(null), a = x.useRef(!1), y = x.useRef(null), v = N(ct), f = N(Mt), { onAction: s } = N(ft), [u, R] = x.useState({
+  const { dimensions: i, ref: s } = rt(), o = x.useRef(null), g = x.useRef(null), a = x.useRef(!1), y = x.useRef(null), S = M(ct), m = M(jt), { onAction: l } = M(ft), [u, k] = x.useState({
     currentIndex: void 0,
     onIndexChange: void 0
-  }), [w, S] = x.useState(0), W = x.useRef(null), { patchedNodeData: $ } = et({ id: t, nodeData: e });
+  }), [w, v] = x.useState(0), L = x.useRef(null), { patchedNodeData: $ } = _({ 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 && h.animation === "default") {
-    const c = e.style?.width, d = e.style?.height;
-    typeof c == "number" && typeof d == "number" && d > c && (j = !0);
+  const h = e.data?.params || {}, A = h.infinite === !0, j = h.automatic === !0;
+  let Z = Array.isArray(e.tags) && e.tags.some((c) => c.includes("container:slider:vertical")) || e.name && e.name.includes("container:slider:vertical");
+  if (!Z && h.animation === "default") {
+    const c = e.style?.width, f = e.style?.height;
+    typeof c == "number" && typeof f == "number" && f > c && (Z = !0);
   }
-  const K = j ? "vertical" : h.animation === "default" ? "horizontal" : h.animation || "horizontal", E = L(e.style, {
+  const G = Z ? "vertical" : h.animation === "default" ? "horizontal" : h.animation || "horizontal", z = W(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 M = N(tt), g = x.useMemo(() => {
+  }), K = z.width !== void 0, U = z.height !== void 0;
+  K || (z.width = "100%"), U || (z.height = "100%"), z.position || (z.position = "relative");
+  const E = M(Y), p = x.useMemo(() => {
     const c = [];
-    return x.Children.forEach(n, (d) => {
-      if (d == null) return;
-      const I = d?.props || {}, C = I.nodeData || {};
-      if (Array.isArray(C?.tags) && (C.tags.includes("encore:data:array") || C.tags.includes("bravo:data:array")) && I.id && M) {
-        const T = M?.arrayDataById && M.arrayDataById[I.id] && Array.isArray(M.arrayDataById[I.id]) ? M.arrayDataById[I.id] : null;
-        T && T.length > 0 ? T.forEach((D, nt) => {
+    return x.Children.forEach(n, (f) => {
+      if (f == null) return;
+      const I = f?.props || {}, C = I.nodeData || {};
+      if (Array.isArray(C?.tags) && (C.tags.includes("encore:data:array") || C.tags.includes("bravo:data:array")) && I.id && E) {
+        const T = E?.arrayDataById && E.arrayDataById[I.id] && Array.isArray(E.arrayDataById[I.id]) ? E.arrayDataById[I.id] : null;
+        T && T.length > 0 ? T.forEach((et, nt) => {
           c.push(
-            x.cloneElement(d, {
+            x.cloneElement(f, {
               key: `${I.id}:${nt}`,
               // ContainerComponent will use this to know which item to render
               _arrayItemIndex: nt,
-              _arrayItemData: D
+              _arrayItemData: et
             })
           );
-        }) : c.push(d);
+        }) : c.push(f);
       } else
-        c.push(d);
+        c.push(f);
     }), c;
-  }, [n, t, M]), q = x.useMemo(() => {
-    if (!A || g.length === 0)
-      return g;
-    const c = g[0], d = g[g.length - 1];
+  }, [n, t, E]), J = x.useMemo(() => {
+    if (!A || p.length === 0)
+      return p;
+    const c = p[0], f = p[p.length - 1];
     return [
-      x.cloneElement(d, {
-        key: `clone-last-${d.key || d.props.id}`
+      x.cloneElement(f, {
+        key: `clone-last-${f.key || f.props.id}`
       }),
-      ...g,
+      ...p,
       x.cloneElement(c, {
         key: `clone-first-${c.key || c.props.id}`
       })
     ];
-  }, [g, A]), X = x.useMemo(() => {
-    if (g.length === 0) return { width: 0, height: 0 };
-    const d = g[0]?.props?.nodeData?.style, I = v.scaleFactor || 1;
+  }, [p, A]), N = x.useMemo(() => {
+    if (p.length === 0) return { width: 0, height: 0 };
+    const f = p[0]?.props?.nodeData?.style, I = S.scaleFactor || 1;
     let C = 0, b = 0;
-    return d?.layout?.layoutSizingHorizontal === "FIXED" && d?.layout?.size?.x ? C = d.layout.size.x * I : C = i.width || 0, d?.layout?.layoutSizingVertical === "FIXED" && d?.layout?.size?.y ? b = d.layout.size.y * I : b = i.height || 0, { width: C, height: b };
-  }, [g, i.width, i.height, v.scaleFactor]), P = X.width, F = X.height, z = K === "vertical", _ = x.useCallback(() => {
-    if (!o.current || g.length === 0)
+    return f?.layout?.layoutSizingHorizontal === "FIXED" && f?.layout?.size?.x ? C = f.layout.size.x * I : C = i.width || 0, f?.layout?.layoutSizingVertical === "FIXED" && f?.layout?.size?.y ? b = f.layout.size.y * I : b = i.height || 0, { width: C, height: b };
+  }, [p, i.width, i.height, S.scaleFactor]), P = N.width, F = N.height, H = G === "vertical", D = x.useCallback(() => {
+    if (!o.current || p.length === 0)
       return 0;
     const c = o.current;
-    if (z) {
+    if (H) {
       if (F === 0) return 0;
-      const d = c.scrollTop;
+      const f = c.scrollTop;
       if (A) {
-        const C = d - F;
+        const C = f - F;
         let b = Math.round(C / F);
-        return b < 0 && (b = 0), b >= g.length && (b = g.length - 1), b;
+        return b < 0 && (b = 0), b >= p.length && (b = p.length - 1), b;
       } else {
-        const I = Math.round(d / F);
-        return I < 0 ? 0 : I >= g.length ? g.length - 1 : I;
+        const I = Math.round(f / F);
+        return I < 0 ? 0 : I >= p.length ? p.length - 1 : I;
       }
     } else {
       if (P === 0) return 0;
-      const d = c.scrollLeft;
+      const f = c.scrollLeft;
       if (A) {
-        const C = d - P;
+        const C = f - P;
         let b = Math.round(C / P);
-        return b < 0 && (b = 0), b >= g.length && (b = g.length - 1), b;
+        return b < 0 && (b = 0), b >= p.length && (b = p.length - 1), b;
       } else {
-        const I = Math.round(d / P);
-        return I < 0 ? 0 : I >= g.length ? g.length - 1 : I;
+        const I = Math.round(f / P);
+        return I < 0 ? 0 : I >= p.length ? p.length - 1 : I;
       }
     }
-  }, [A, g.length, P, F, z]), B = x.useCallback(
-    (c, d = !0) => {
-      if (!o.current || g.length === 0) return;
+  }, [A, p.length, P, F, H]), B = x.useCallback(
+    (c, f = !0) => {
+      if (!o.current || p.length === 0) return;
       const I = o.current;
-      if (z) {
+      if (H) {
         let C;
         A ? C = F + c * F : C = c * F, I.scrollTo({
           top: C,
-          behavior: d ? "smooth" : "auto"
+          behavior: f ? "smooth" : "auto"
         });
       } else {
         let C;
         A ? C = P + c * P : C = c * P, I.scrollTo({
           left: C,
-          behavior: d ? "smooth" : "auto"
+          behavior: f ? "smooth" : "auto"
         });
       }
     },
-    [P, F, A, g.length, z]
-  ), Z = x.useCallback(() => {
-    if (!A || !o.current || g.length === 0) return;
-    const c = o.current, d = 1;
-    if (z) {
+    [P, F, A, p.length, H]
+  ), O = x.useCallback(() => {
+    if (!A || !o.current || p.length === 0) return;
+    const c = o.current, f = 1;
+    if (H) {
       if (F === 0) return;
-      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);
+      const I = c.scrollTop, C = F, b = C, T = b + p.length * C;
+      I >= T - f ? c.scrollTop = b : I <= f && (c.scrollTop = T - C);
     } else {
       if (P === 0) return;
-      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);
+      const I = c.scrollLeft, C = P, b = C, T = b + p.length * C;
+      I >= T - f ? c.scrollLeft = b : I <= f && (c.scrollLeft = T - C);
     }
-  }, [A, g.length, P, F, z]);
+  }, [A, p.length, P, F, H]);
   x.useEffect(() => {
-    if (!G || g.length <= 1 || P === 0) return;
+    if (!j || p.length <= 1 || P === 0) return;
     const c = () => {
       if (a.current || !o.current) return;
-      const d = o.current;
-      if (z) {
+      const f = o.current;
+      if (H) {
         if (F === 0) return;
-        const I = d.scrollTop, C = F;
+        const I = f.scrollTop, C = F;
         let b;
         if (A) {
           const nt = I - C;
-          b = Math.round(nt / C), b < 0 && (b = 0), b >= g.length && (b = g.length - 1);
+          b = Math.round(nt / C), b < 0 && (b = 0), b >= p.length && (b = p.length - 1);
         } else
           b = Math.round(I / C);
         let T = b + 1;
         if (A) {
-          T >= g.length && (T = 0);
-          const D = C;
-          d.scrollTo({
-            top: D + T * C,
+          T >= p.length && (T = 0);
+          const et = C;
+          f.scrollTo({
+            top: et + T * C,
             behavior: "smooth"
           });
         } else
-          T >= g.length && (T = 0), B(T);
+          T >= p.length && (T = 0), B(T);
       } else {
         if (P === 0) return;
-        const I = d.scrollLeft, C = P;
+        const I = f.scrollLeft, C = P;
         let b;
         if (A) {
           const nt = I - C;
-          b = Math.round(nt / C), b < 0 && (b = 0), b >= g.length && (b = g.length - 1);
+          b = Math.round(nt / C), b < 0 && (b = 0), b >= p.length && (b = p.length - 1);
         } else
           b = Math.round(I / C);
         let T = b + 1;
         if (A) {
-          T >= g.length && (T = 0);
-          const D = C;
-          d.scrollTo({
-            left: D + T * C,
+          T >= p.length && (T = 0);
+          const et = C;
+          f.scrollTo({
+            left: et + T * C,
             behavior: "smooth"
           });
         } else
-          T >= g.length && (T = 0), B(T);
+          T >= p.length && (T = 0), B(T);
       }
     };
-    return m.current = setInterval(c, 4e3), () => {
-      m.current && (clearInterval(m.current), m.current = null);
+    return g.current = setInterval(c, 4e3), () => {
+      g.current && (clearInterval(g.current), g.current = null);
     };
   }, [
-    G,
-    g.length,
+    j,
+    p.length,
     A,
     P,
     F,
-    z,
+    H,
     B
   ]);
-  const J = x.useCallback(() => {
+  const X = x.useCallback(() => {
     a.current = !0, y.current && clearTimeout(y.current), y.current = setTimeout(() => {
       a.current = !1;
     }, 3e3);
@@ -1149,14 +1180,14 @@ const ct = x.createContext({}), V = x.createContext(
   x.useEffect(() => {
     ot.current = u;
   }, [u]);
-  const Q = x.useCallback(
+  const tt = x.useCallback(
     (c) => {
-      if (W.current === c) return;
-      W.current = c;
-      const d = ot.current;
-      if (d.currentIndex === void 0 && S(c), d.onIndexChange && d.onIndexChange(c), typeof s == "function")
+      if (L.current === c) return;
+      L.current = c;
+      const f = ot.current;
+      if (f.currentIndex === void 0 && v(c), f.onIndexChange && f.onIndexChange(c), typeof l == "function")
         try {
-          s({
+          l({
             bravo: {
               cancel: () => {
               },
@@ -1170,138 +1201,144 @@ const ct = x.createContext({}), V = x.createContext(
         } catch {
         }
     },
-    [s, t]
+    [l, t]
     // Depend on onAction to ensure we call the latest version
   );
   x.useEffect(() => {
     const c = o.current;
     if (!c) return;
-    let d = null;
+    let f = null;
     const I = () => {
-      J(), A ? (d !== null && cancelAnimationFrame(d), d = requestAnimationFrame(() => {
-        Z();
-        const T = _();
-        Q(T);
-      })) : (d !== null && cancelAnimationFrame(d), d = requestAnimationFrame(() => {
-        const T = _();
-        Q(T);
+      X(), A ? (f !== null && cancelAnimationFrame(f), f = requestAnimationFrame(() => {
+        O();
+        const T = D();
+        tt(T);
+      })) : (f !== null && cancelAnimationFrame(f), f = requestAnimationFrame(() => {
+        const T = D();
+        tt(T);
       }));
-    }, C = () => J(), b = () => J();
+    }, C = () => X(), b = () => X();
     return c.addEventListener("scroll", I, { passive: !0 }), c.addEventListener("touchstart", C, {
       passive: !0
     }), c.addEventListener("mousedown", b), () => {
-      c.removeEventListener("scroll", I), 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), f !== null && cancelAnimationFrame(f);
     };
   }, [
     A,
-    J,
-    Z,
-    _,
-    Q
+    X,
+    O,
+    D,
+    tt
   ]), x.useEffect(() => {
-    if (f) {
-      const c = f.getControlProps(t);
-      c && c !== u && R(c);
+    if (m) {
+      const c = m.getControlProps(t);
+      c && c !== u && k(c);
     }
-  }, [t, f, u]), x.useEffect(() => {
-    if (u.currentIndex !== void 0 && o.current && g.length > 0 && P > 0) {
+  }, [t, m, u]), x.useEffect(() => {
+    if (u.currentIndex !== void 0 && o.current && p.length > 0 && P > 0) {
       const c = Math.max(
         0,
-        Math.min(u.currentIndex, g.length - 1)
-      ), d = _();
-      c !== d && B(c, !0);
+        Math.min(u.currentIndex, p.length - 1)
+      ), f = D();
+      c !== f && B(c, !0);
     }
   }, [
     u.currentIndex,
-    g.length,
-    g.length,
+    p.length,
+    p.length,
     P,
     F,
-    z,
+    H,
     B,
-    _
+    D
   ]), x.useEffect(() => {
-    if (A && o.current && g.length > 0 && g.length > 0 && (z ? F > 0 : P > 0)) {
-      const c = z ? F : P;
+    if (A && o.current && p.length > 0 && p.length > 0 && (H ? F > 0 : P > 0)) {
+      const c = H ? F : P;
       setTimeout(() => {
-        o.current && (z ? o.current.scrollTop = c : o.current.scrollLeft = c);
+        o.current && (H ? o.current.scrollTop = c : o.current.scrollLeft = c);
       }, 0);
     }
-  }, [A, g.length, P, F, z]), x.useEffect(() => {
-    if (!f) return;
-    const { registerContainer: c, unregisterContainer: d } = f;
+  }, [A, p.length, P, F, H]), x.useEffect(() => {
+    if (!m) return;
+    const { registerContainer: c, unregisterContainer: f } = m;
     return () => {
     };
   }, [
     t,
-    f?.registerContainer,
-    f?.unregisterContainer,
+    m?.registerContainer,
+    m?.unregisterContainer,
     // controlProps, // REMOVED to break infinite loop
     B,
-    _
+    D
   ]);
-  const $t = {
+  const zt = {
     display: "flex",
-    flexDirection: z ? "column" : "row",
-    overflowX: z ? "hidden" : "auto",
-    overflowY: z ? "auto" : "hidden",
-    scrollSnapType: z ? "y mandatory" : "x mandatory",
+    flexDirection: H ? "column" : "row",
+    overflowX: H ? "hidden" : "auto",
+    overflowY: H ? "auto" : "hidden",
+    scrollSnapType: H ? "y mandatory" : "x mandatory",
     scrollBehavior: "smooth",
     width: "100%",
     height: "100%",
     WebkitOverflowScrolling: "touch"
     // Smooth scrolling on iOS
-  }, zt = {
+  }, Ht = {
     flexShrink: 0,
     scrollSnapAlign: "start",
-    width: X.width > 0 ? X.width : void 0,
-    height: X.height > 0 ? X.height : void 0,
+    width: N.width > 0 ? N.width : void 0,
+    height: N.height > 0 ? N.height : void 0,
     position: "relative"
   };
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ d(
     "div",
     {
       "data-id": t,
       "data-name": r,
       "data-type": "SliderComponent",
-      ref: l,
-      style: E,
-      children: /* @__PURE__ */ p("div", { ref: o, style: $t, children: q.map((c, d) => /* @__PURE__ */ p(
+      ref: s,
+      style: z,
+      children: /* @__PURE__ */ d("div", { ref: o, style: zt, children: J.map((c, f) => /* @__PURE__ */ d(
         V.Provider,
         {
           value: {
             dimensions: {
-              width: X.width,
-              height: X.height
+              width: N.width,
+              height: N.height
             },
             isFlex: !1
           },
-          children: /* @__PURE__ */ p("div", { style: zt, children: c })
+          children: /* @__PURE__ */ d("div", { style: Ht, children: c })
         },
-        c.key || `slide-${d}`
+        c.key || `slide-${f}`
       )) })
     }
   );
-}, kt = (t, r) => {
+}, $t = (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 = kt(n.props.children, r);
+        const i = $t(n.props.children, r);
         if (i) return i;
       }
     }
   return null;
 }, Rt = ({ id: t, name: r, nodeData: e, children: n }) => {
-  const { dimensions: i, ref: l } = rt(), { componentId: o } = N(lt), m = N(V), a = e.style.originalSize?.[0] || 1, y = e.style.originalSize?.[1] || 1, v = m?.dimensions?.width, f = m?.dimensions?.height, s = window.innerWidth, u = window.innerHeight, R = v && v > 0 && v < s * 0.8;
-  let w, S;
-  i.width > 0 && i.height > 0 ? (w = i.width, S = i.height) : R && v && f || v && f && v > 0 && f > 0 ? (w = v, S = f) : (w = s, S = u);
-  const $ = { scaleFactor: Math.min(w / a, S / y) || 1 };
+  const { dimensions: i, ref: s } = rt(), { componentId: o } = M(lt), g = M(V), a = e.style.originalSize?.[0] || 1, y = e.style.originalSize?.[1] || 1, S = g?.dimensions?.width, m = g?.dimensions?.height, l = window.innerWidth, u = window.innerHeight, k = S && S > 0 && S < l * 0.8;
+  let w, v;
+  i.width > 0 && i.height > 0 ? (w = i.width, v = i.height) : k && S && m || S && m && S > 0 && m > 0 ? (w = S, v = m) : (w = l, v = u);
+  const L = a < 768;
+  let $ = w, h = "100%";
+  if (L && w > a * 1.5) {
+    const E = Math.round(a * 1.5);
+    $ = E, h = E;
+  }
+  const j = { scaleFactor: Math.min($ / a, v / y) || 1 };
   if (o) {
-    const E = kt(n, o);
-    return E ? /* @__PURE__ */ p(ct.Provider, { value: $, children: /* @__PURE__ */ p(
+    const E = $t(n, o);
+    return E ? /* @__PURE__ */ d(ct.Provider, { value: j, children: /* @__PURE__ */ d(
       V.Provider,
       {
         value: {
@@ -1314,52 +1351,54 @@ const ct = x.createContext({}), V = x.createContext(
       }
     ) }) : (console.warn(`Child with id "${o}" not found`), null);
   }
-  const h = Array.isArray(n) ? n : [n], { scrollableChildren: A, nonScrollableChildren: G } = h.reduce(
-    (E, H) => {
-      const M = H.props.nodeData.type === "container:top-bar" ? "nonScrollableChildren" : "scrollableChildren";
-      return E[M].push(H), E;
+  const q = Array.isArray(n) ? n : [n], { scrollableChildren: Z, nonScrollableChildren: G } = q.reduce(
+    (E, p) => {
+      const N = p.props.nodeData.type === "container:top-bar" ? "nonScrollableChildren" : "scrollableChildren";
+      return E[N].push(p), E;
     },
     {
       scrollableChildren: [],
       nonScrollableChildren: []
     }
   );
-  let O = e.style?.layout?.mode;
-  if (!O && t === "01KASW494V02Y8P5JVWV5XK62X" && (console.log("🔧 PATCHING missing layout for page", t), O = "HORIZONTAL"), !O && n) {
+  let z = e.style?.layout?.mode;
+  if (!z && t === "01KASW494V02Y8P5JVWV5XK62X" && (console.log("🔧 PATCHING missing layout for page", t), z = "HORIZONTAL"), !z && n) {
     const E = Array.isArray(n) ? n : [n];
-    let H = 0, U = 0;
-    E.forEach((g) => {
-      const q = g?.props?.nodeData?.style?.width;
-      q && (H += q, q < 99 && U++);
-    }), U > 0 && H >= 99 && (console.log(
-      `[PATCH] Detected HORIZONTAL WRAP layout for page ${t} (Partial width children: ${U}, Total width: ${H})`
-    ), 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");
+    let p = 0, J = 0;
+    E.forEach((P) => {
+      const F = P?.props?.nodeData?.style?.width;
+      F && (p += F, F < 99 && J++);
+    }), J > 0 && p >= 99 && (console.log(
+      `[PATCH] Detected HORIZONTAL WRAP layout for page ${t} (Partial width children: ${J}, Total width: ${p})`
+    ), z = "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 = O === "HORIZONTAL" ? "row" : "column", K = G.some(
+  const K = z === "HORIZONTAL" ? "row" : "column", U = G.some(
     (E) => E?.props?.nodeData?.type !== "container:background"
   );
-  return /* @__PURE__ */ p(ct.Provider, { value: $, children: /* @__PURE__ */ it(
+  return /* @__PURE__ */ d(ct.Provider, { value: j, children: /* @__PURE__ */ it(
     "div",
     {
       style: {
         width: "100%",
         height: "100%",
+        maxWidth: typeof h == "number" ? `${h}px` : h,
+        margin: L ? "0 auto" : 0,
         position: "relative",
         overflow: "hidden",
         // Only use flex if we have non-background nonScrollableChildren (like top-bar)
-        ...K ? {
+        ...U ? {
           display: "flex",
-          flexDirection: j,
+          flexDirection: K,
           gap: 0,
           rowGap: 0,
           columnGap: 0
         } : {}
       },
-      ref: l,
+      ref: s,
       children: [
         G.filter(
           (E) => E?.props?.nodeData?.type === "container:background"
-        ).map((E, H) => /* @__PURE__ */ p(
+        ).map((E, p) => /* @__PURE__ */ d(
           V.Provider,
           {
             value: {
@@ -1370,11 +1409,11 @@ const ct = x.createContext({}), V = x.createContext(
             },
             children: E
           },
-          `bg-${H}`
+          `bg-${p}`
         )),
-        K && G.filter(
+        U && G.filter(
           (E) => E?.props?.nodeData?.type !== "container:background"
-        ).map((E, H) => /* @__PURE__ */ p(
+        ).map((E, p) => /* @__PURE__ */ d(
           V.Provider,
           {
             value: {
@@ -1385,9 +1424,9 @@ const ct = x.createContext({}), V = x.createContext(
             },
             children: E
           },
-          `non-scroll-${H}`
+          `non-scroll-${p}`
         )),
-        /* @__PURE__ */ p(V.Provider, { value: { dimensions: i }, children: /* @__PURE__ */ p(
+        /* @__PURE__ */ d(V.Provider, { value: { dimensions: i }, children: /* @__PURE__ */ d(
           "div",
           {
             "data-id": t,
@@ -1395,80 +1434,104 @@ const ct = x.createContext({}), V = x.createContext(
             "data-type": "PageComponent",
             style: {
               position: "relative",
-              ...K ? {
+              ...U ? {
                 flex: 1,
-                ...j === "row" ? { alignSelf: "stretch" } : {}
+                ...K === "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" },
-              ...L(e.style, {
+              ...K === "column" && { overflow: "auto" },
+              ...W(e.style, {
                 debug: !1
               })
             },
-            children: A
+            children: Z
           }
         ) })
       ]
     }
   ) });
-}, Dt = {
+}, kt = ({
+  id: t,
+  nodeData: r,
+  children: e
+}) => {
+  const i = M(Y)?.embedsById?.[t], s = W(r.style, { debug: !1 });
+  return i ? /* @__PURE__ */ d(
+    "div",
+    {
+      style: {
+        ...s,
+        display: "flex",
+        flexDirection: "column",
+        // Reset positioning if provided by wrapper
+        position: "absolute"
+      },
+      "data-type": "EmbedComponent",
+      "data-id": t,
+      children: i
+    }
+  ) : /* @__PURE__ */ d("div", { style: s, "data-type": "EmbedComponent-Empty", "data-id": t, children: e });
+}, ee = {
+  EmbedComponent: kt,
   WebViewComponent: ht,
   ColorComponent: gt,
   GradientComponent: mt,
   ImageComponent: yt,
   EmailInputComponent: bt,
   HiddenInputComponent: Ct,
-  ImageInputComponent: St,
+  ImageInputComponent: vt,
   PasswordInputComponent: xt,
-  SelectInputComponent: vt,
+  SelectInputComponent: St,
   TextInputComponent: It,
   LottieComponent: wt,
   SvgComponent: At,
-  TextComponent: Et,
+  TextComponent: Ft,
   StatefulSetComponent: dt,
-  StatefulCompoundComponent: Ft,
-  BackgroundContainerComponent: Tt,
+  StatefulCompoundComponent: Et,
+  BackgroundContainerComponent: Pt,
   ContainerComponent: pt,
-  CompoundComponent: Pt,
+  CompoundComponent: Tt,
   TopBarContainerComponent: Bt,
-  DefaultLayerComponent: Ut,
-  TabsMenuComponent: Lt,
-  MenuSideComponent: Wt,
+  DefaultLayerComponent: Zt,
+  TabsMenuComponent: Wt,
+  MenuSideComponent: Lt,
   SliderComponent: at,
   PageComponent: Rt,
   // Type string mappings for dynamically loaded components
-  "menu:side": Wt,
+  "menu:side": Lt,
   "page:default": Rt,
-  "container:background": Tt,
+  "container:background": Pt,
   "container:default": pt,
   "container:top-bar": Bt,
   "container:slider": at,
-  "component:text": Et,
+  "component:text": Ft,
   "component:color": gt,
   "component:gradient": mt,
   "component:image": yt,
   "component:svg": At,
-  "component:compound": Pt,
+  "component:compound": Tt,
   "component:input-stateful-set": dt,
   "component:stateful-set": dt,
-  "component:stateful-compound": Ft,
+  "component:stateful-compound": Et,
   "component:slider": at,
   "component:webview": ht,
+  "component:video": Xt,
   "component:lottie": wt,
   "component:email-input": bt,
   "component:text-input": It,
   "component:password-input": xt,
-  "component:select-input": vt,
-  "component:image-input": St,
+  "component:select-input": St,
+  "component:image-input": vt,
   "component:hidden-input": Ct,
-  "component:tabs-menu": Lt,
+  "component:tabs-menu": Wt,
+  "component:embed": kt,
   ContainerSliderComponent: at
 };
 export {
-  Dt as default
+  ee as default
 };
 //# sourceMappingURL=components.js.map