@bravostudioai/react 0.1.0

package/dist/components.js

@@ -0,0 +1,1454 @@
+import { jsx as h, jsxs as it, Fragment as ut } from "react/jsx-runtime";
+import v, { useContext as G, useMemo as zt, useState as Ht, useCallback as Vt } from "react";
+import Q from "./contexts/EncoreBindingContext.js";
+import z from "./stores/useEncoreState.js";
+import lt from "./contexts/EncoreComponentIdContext.js";
+import Nt from "axios";
+import Lt from "./contexts/EncoreActionContext.js";
+import Ot from "./contexts/EncoreRepeatingContainerContext.js";
+const ct = v.createContext({}), O = v.createContext(
+  {}
+), st = (t) => t.replace(/#(\w{2})(\w{6})/, "#$2$1"), Mt = (t) => t.slice(1, 3) === "00", jt = (t) => {
+  if (!Array.isArray(t)) return null;
+  const r = t.find((o) => o.startsWith("input-group:"));
+  if (!r) return null;
+  const e = r.split(":");
+  return e.length >= 3 ? { type: e[1], groupName: e[2] } : null;
+}, rt = () => {
+  const [t, r] = Ht({ width: 0, height: 0 }), e = v.useRef(null);
+  return v.useEffect(() => {
+    if (!e.current) return;
+    const o = e.current, i = () => {
+      const { width: a, height: n } = o.getBoundingClientRect();
+      r({ width: a, height: n });
+    };
+    i(), requestAnimationFrame(() => {
+      i();
+    });
+    const d = new ResizeObserver((a) => {
+      for (const n of a) {
+        const c = n.contentRect;
+        r({ width: c.width, height: c.height });
+      }
+    });
+    return d.observe(o), () => d.disconnect();
+  }, []), { dimensions: t, ref: e };
+}, R = (t, r = {}) => {
+  let e = !1;
+  const o = G(ct), i = G(O), d = {
+    width: window.innerWidth,
+    height: window.innerHeight
+  }, a = Vt(
+    (l) => (i.dimensions?.width ?? 0) * 0.01 * l,
+    [i.dimensions?.width]
+  ), n = {};
+  r = { debug: !1, ...r };
+  const c = z((l) => l.fontsById || {});
+  if (z((l) => l.fontsByIdFull || {}), !t) return;
+  const y = i.dimensions?.width ?? d.width, S = i.dimensions?.height ?? d.height;
+  if (t.layout?.layoutSizingHorizontal || t.layout?.layoutSizingVertical || (t.width && y > 0 && (n.width = t.width * y * 0.01), t.aspectRatio && t.width ? y > 0 && (n.height = t.width * y * 0.01 / t.aspectRatio) : t.height && S > 0 && (n.height = t.height * S * 0.01)), !(i?.isFlex ?? !1) && t.positioning) {
+    const l = t.layout?.layoutSizingHorizontal === "FIXED" || t.layout?.layoutSizingVertical === "FIXED", g = l && t.positioning.top < 0 ? 0 : t.positioning.top, I = l && t.positioning.left < 0 ? 0 : t.positioning.left;
+    if (l && t.layout?.layoutSizingHorizontal === "FIXED" && t.layout?.size?.x) {
+      const F = t.layout.size.x, E = o.scaleFactor ?? 1, s = F * E, W = i?.dimensions?.width;
+      W && typeof W == "number" && W > 0 && s / W >= 0.95 && I >= 15 && I <= 35 && (e = !0);
+    }
+    n.top = `${g}%`;
+    const A = !!t.inset;
+    if (e)
+      if (A) {
+        const F = String(t.inset).split(/\s+/);
+        F.length === 3 ? n.inset = `${F[0]} 50% ${F[2]} auto` : F.length === 4 && (n.inset = `${F[0]} 50% ${F[2]} auto`), delete n.left, delete n.right;
+      } else
+        n.left = "50%", n.right = "auto";
+    else
+      A ? n.inset = t.inset : n.left = `${I}%`;
+    l ? (n.right = "auto", n.bottom = "auto") : (t.positioning.bottom !== void 0 && (n.bottom = `${t.positioning.bottom}%`), t.positioning.right !== void 0 && (n.right = `${t.positioning.right}%`)), n.position = "absolute";
+  }
+  if (t.layout?.padding) {
+    const l = o.scaleFactor ?? 1, g = t.layout.padding;
+    g.top !== void 0 && (n.paddingTop = g.top * l), g.right !== void 0 && (n.paddingRight = g.right * l), g.bottom !== void 0 && (n.paddingBottom = g.bottom * l), g.left !== void 0 && (n.paddingLeft = g.left * l);
+  }
+  if (t.layout?.mode) {
+    n.display = "flex";
+    const l = (E) => E ? {
+      MIN: "flex-start",
+      MAX: "flex-end",
+      CENTER: "center",
+      SPACE_BETWEEN: "space-between",
+      SPACE_AROUND: "space-around",
+      SPACE_EVENLY: "space-evenly"
+    }[E] || E.toLowerCase().replace(/_/g, "-") : void 0;
+    t.layout.mode == "HORIZONTAL" ? (n.flexDirection = "row", t.layout.flexWrap && (n.flexWrap = t.layout.flexWrap), n.justifyContent = l(
+      t.layout.primaryAxisAlignItems
+    ), n.alignItems = t.layout.counterAxisAlignItems) : (n.flexDirection = "column", n.justifyContent = l(
+      t.layout.primaryAxisAlignItems
+    ), n.alignItems = t.layout.counterAxisAlignItems), n.flexGrow = t.layout.grow, t.layout.wrap === "NO_WRAP" ? n.flexWrap = "nowrap" : t.layout.flexWrap ? n.flexWrap = t.layout.flexWrap : n.flexWrap = "wrap";
+    const g = t.layout.itemSpacing, I = o.scaleFactor ?? 1, F = t.layout.primaryAxisAlignItems === "SPACE_BETWEEN" ? 0 : (g !== void 0 ? g : 0) * I;
+    n.gap = F === 0 ? "0px" : `${F}px`, n.rowGap = F === 0 ? "0px" : `${F}px`, n.columnGap = F === 0 ? "0px" : `${F}px`, (n.flexWrap === "wrap" || n.flexWrap === "wrap-reverse") && (n.alignContent = "flex-start"), r.debug || t.layout?.mode === "HORIZONTAL" && g === 0 ? console.log("[useEncoreStyle] Setting gap properties:", {
+      itemSpacing: g,
+      spacing: F,
+      gap: n.gap,
+      rowGap: n.rowGap,
+      columnGap: n.columnGap,
+      hasLayout: !!t.layout,
+      layoutMode: t.layout?.mode
+    }) : console.log(
+      "[useEncoreStyle] No gap properties set",
+      r.debug,
+      t.layout?.mode,
+      g
+    );
+  }
+  if (t.layout?.layoutSizingHorizontal === "FILL" && (n.width = "100%"), t.layout?.layoutSizingHorizontal === "FIXED") {
+    const l = o.scaleFactor ?? 1;
+    n.width = t.layout.size.x * l;
+  }
+  if (t.layout?.layoutSizingVertical === "FIXED") {
+    const l = o.scaleFactor ?? 1;
+    n.height = t.layout.size.y * l;
+  }
+  if (t.layout?.layoutSizingVertical === "FILL")
+    if (!(i?.isFlex ?? !1) && t.positioning && t.positioning?.top !== void 0) {
+      const A = 100 - t.positioning.top;
+      n.height = `${A}%`;
+    } else
+      n.height = "100%";
+  if (t.layout?.layoutSizingVertical, t.backgroundColor && !Mt(t.backgroundColor) && (n.backgroundColor = st(t.backgroundColor)), t.color && (n.color = st(t.color)), t.lineHeightPx && (n.lineHeight = (t.lineHeightPx * (o.scaleFactor ?? 1)).toString() + "px"), t.fontSize && (n.fontSize = t.fontSize * (o.scaleFactor ?? 1)), t.fontWeight && (n.fontWeight = `${t.fontWeight}`), t.opacity && (n.opacity = t.opacity * 0.01), t.fontId) {
+    const l = c[t.fontId] || "sans-serif";
+    n.fontFamily = l;
+  }
+  if (t.borderRadius && (n.borderRadius = a(t.borderRadius)), t.cornerRadii) {
+    const l = t.cornerRadii.map(a);
+    n.borderTopLeftRadius = l[0], n.borderTopRightRadius = l[1], n.borderBottomRightRadius = l[2], n.borderBottomLeftRadius = l[3], delete n.borderRadius;
+  }
+  if (t.borderWidth && (t.borderWidth > 5 ? n.borderWidth = t.borderWidth * 0.5 : n.borderWidth = t.borderWidth * 1.5), t.borderColor && (n.borderColor = st(t.borderColor)), (t.borderWidth || t.borderColor) && (n.borderStyle = "solid"), t.rotation && (n.transform = `rotate(${t.rotation}deg)`), e) {
+    const l = n.transform || "";
+    if (n.transform = l ? `${l} translateX(-50%)` : "translateX(-50%)", n.inset) {
+      const g = String(n.inset).split(/\s+/);
+      g.length === 3 ? n.inset = `${g[0]} 50% ${g[2]} auto` : g.length === 4 && (n.inset = `${g[0]} 50% ${g[2]} auto`);
+    } else if (t.inset) {
+      const g = String(t.inset).split(/\s+/);
+      g.length === 3 ? n.inset = `${g[0]} 50% ${g[2]} auto` : g.length === 4 && (n.inset = `${g[0]} 50% ${g[2]} auto`);
+    }
+  }
+  if (t.textCase === "upper" && (n.textTransform = "uppercase"), t.textCase === "lower" && (n.textTransform = "lowercase"), t.letterSpacing && (n.letterSpacing = t.letterSpacing), t.textAlign && (n.textAlign = t.textAlign), r.debug && (n.borderWidth = 1, n.borderColor = "#FF0000FF", n.borderStyle = "solid"), e && (n.inset || t.inset)) {
+    const l = n.inset || t.inset, g = String(l).split(/\s+/);
+    g.length === 3 ? n.inset = `${g[0]} 50% ${g[2]} auto` : g.length === 4 && (n.inset = `${g[0]} 50% ${g[2]} auto`);
+  }
+  return n;
+}, tt = ({ id: t, nodeData: r }) => {
+  const e = G(Q), o = e?.nodeData?.[t], { patch: i, list: d } = o ?? { list: null, patch: null }, n = Array.isArray(r?.tags) && (r.tags.includes("encore:data:array") || r.tags.includes("bravo:data:array")) && e?.arrayDataById && e.arrayDataById[t] && Array.isArray(e.arrayDataById[t]) ? e.arrayDataById[t] : null;
+  let c = i ? {
+    ...r,
+    ...i || {},
+    ...i && i.data ? { data: { ...r?.data || {}, ...i.data } } : {},
+    // 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 y = e?.textOverridesById && e.textOverridesById[t] !== void 0 ? e.textOverridesById[t] : void 0;
+  y !== void 0 && Array.isArray(r?.tags) && r.tags.includes("PROP:TEXT_VAR") && (c = {
+    ...c,
+    data: { ...c?.data || {}, text: String(y) }
+  });
+  const S = Array.isArray(r?.tags) && (r.tags.includes("encore:data") || r.tags.includes("bravo:data")), f = e?.rootData;
+  f && f[t] && typeof f[t] == "object" && (c = {
+    ...c,
+    data: {
+      ...c.data || {},
+      ...f[t]
+    }
+  });
+  const b = e?.nodeData && typeof e.nodeData == "object";
+  if (S || b) {
+    const l = e?.nodeData;
+    if (l && typeof l == "object") {
+      if (l[t] !== void 0) {
+        const I = l[t];
+        I && typeof I == "object" && c.data && (c = {
+          ...c,
+          data: {
+            ...c.data,
+            ...I
+          }
+        });
+      } else if (S && l.description && c.data && (c = {
+        ...c,
+        data: {
+          ...c.data,
+          text: l.description
+        }
+      }), l.image && c.data) {
+        const I = l.image.startsWith("//") ? `https:${l.image}` : l.image;
+        c = {
+          ...c,
+          data: {
+            ...c.data,
+            imageUrl: I
+          }
+        };
+      }
+      c.encoreData = l;
+    }
+  }
+  return {
+    patch: i,
+    list: d || n,
+    // Use arrayData if list is not provided
+    patchedNodeData: c,
+    arrayData: n
+    // Also return separately for components that need it
+  };
+}, q = ({
+  id: t,
+  nodeData: r,
+  children: e,
+  _parentStatefulSetId: o,
+  _parentInputGroupInfo: i,
+  _parentName: d
+}) => {
+  const a = z((s) => s.baseURL), n = z((s) => s.appId);
+  z((s) => s.pageId);
+  const { onAction: c } = v.useContext(Lt), { statefulSetId: y } = v.useContext(
+    lt
+  ), S = o || y, { patchedNodeData: f } = tt({ id: t, nodeData: r }), b = z(
+    (s) => s.setStatefulSetVariant
+  ), l = z(
+    (s) => s.setInputGroupValue
+  ), g = z((s) => s.setAccessToken), { app: I } = z((s) => s.app);
+  I.data?.app?.startPageId, I.data?.app?.PageId;
+  const A = R(
+    {
+      positioning: r.style?.positioning
+    },
+    { debug: !1 }
+  );
+  A.zIndex = 99999, A.backgroundColor = "transparent", A.position = "absolute", A.top = "0", A.left = "0", A.right = "0", A.bottom = "0", A.width = "100%", A.height = "100%", A.pointerEvents = "auto", A.isolation = "isolate";
+  const F = async (s) => {
+    let W = !1;
+    const U = () => {
+      W = !1;
+    };
+    if (typeof c == "function")
+      try {
+        await c({ bravo: { cancel: U, action: s } }), W = !0;
+      } catch {
+      }
+    else
+      W = !0;
+    if (W)
+      switch (s.action) {
+        case "login":
+        // TODO firebase
+        // TODO oauth
+        // TODO actually check if this app has custom login
+        // For now, just assume it's a custom login (which is just a form submission)
+        // Intentional fallthrough
+        case "submit":
+          break;
+        case "email":
+          window.location.href = `mailto:${s.params.email}`;
+          break;
+        case "goback":
+          break;
+        case "goto":
+          break;
+        case "homepage":
+          break;
+        case "logout":
+          g(void 0);
+          break;
+        case "none":
+          break;
+        case "openurl":
+          window.open(s.params.url, "_blank");
+          break;
+        case "phone":
+          window.location.href = `tel:${s.params.phone}`;
+          break;
+        case "remote":
+          const M = btoa(JSON.stringify(s.params?.data || {})), Z = `${a}/devices/apps/${n}/node/${t}/trigger/${s.event}?params=${M}`, H = await Nt.post(Z);
+          H.data?.action && await F(H.data);
+          break;
+        case "set-access-token":
+          g(s.params);
+          break;
+        case "set-state":
+          if (i && d)
+            if (console.log("🔵 Input group change:", {
+              groupName: i.groupName,
+              elementName: d,
+              hasOnAction: typeof c == "function"
+            }), l(i.groupName, d), typeof c == "function")
+              try {
+                await c({
+                  bravo: {
+                    cancel: () => {
+                    },
+                    action: {
+                      action: "input-group-change",
+                      params: {
+                        groupName: i.groupName,
+                        groupType: i.type,
+                        value: d
+                      },
+                      event: "tap"
+                    }
+                  }
+                }), console.log("✅ Input group change event fired");
+              } catch (P) {
+                console.error("❌ Error in onAction callback:", P);
+              }
+            else
+              console.warn("⚠️ No onAction callback provided");
+          else {
+            let P = S || s.params?.stateSetId || f.data?.stateSetId;
+            if (!P) {
+              console.error("❌ No stateSetId found in action or nodeData!", {
+                actionParams: s.params,
+                nodeDataStateSetId: f.data?.stateSetId,
+                parentStatefulSetId: S
+              });
+              break;
+            }
+            b(P, s.params.state);
+          }
+          break;
+        case "showalert":
+          alert(s.params.message);
+          break;
+        default:
+          console.log(s), alert(s.action);
+      }
+  };
+  if (r.href)
+    return /* @__PURE__ */ it(ut, { children: [
+      /* @__PURE__ */ h(
+        "button",
+        {
+          type: "button",
+          onClick: () => F({
+            action: "goto",
+            params: { href: r.href },
+            event: "tap"
+          }),
+          style: {
+            ...A,
+            cursor: "pointer",
+            background: "transparent",
+            border: "none",
+            padding: 0
+          },
+          "aria-label": `Go to ${r.href}`
+        }
+      ),
+      e
+    ] });
+  let E = f.actions && f.actions.length > 0 ? f.actions : r.actions || [];
+  if (S && E.length > 0 && (E = E.map((s) => s.action === "set-state" ? (s.params?.stateSetId, {
+    ...s,
+    params: {
+      ...s.params,
+      stateSetId: S
+      // Always use parent's id
+    }
+  }) : s)), E.length === 0 && (f.data?.stateSetId || S))
+    if (i && d)
+      E = [
+        {
+          action: "set-state",
+          params: {
+            state: "active"
+            // Will be handled by input group logic
+          },
+          event: "tap"
+        }
+      ];
+    else {
+      const s = S || f.data.stateSetId;
+      s ? E = [
+        {
+          action: "set-state",
+          params: {
+            state: z.getState().statefulSetVariants[s] === "active" ? "default" : "active",
+            stateSetId: s
+            // Use parent's id or button's stateSetId
+          },
+          event: "tap"
+        }
+      ] : console.warn(
+        "⚠️ No stateSetId available for stateful compound component",
+        { id: t, name: r.name }
+      );
+    }
+  if (E && E.length > 0) {
+    const s = E[0];
+    return s.event !== "tap" ? e : /* @__PURE__ */ it(ut, { children: [
+      e,
+      /* @__PURE__ */ h(
+        "div",
+        {
+          onClick: (W) => {
+            W.stopPropagation(), F(s);
+          },
+          onMouseDown: (W) => W.stopPropagation(),
+          onMouseUp: (W) => W.stopPropagation(),
+          style: { ...A, cursor: "pointer", pointerEvents: "auto" }
+        }
+      )
+    ] });
+  }
+  return e;
+}, ht = ({ id: t, name: r, nodeData: e }) => {
+  const o = R(e.style, {
+    debug: !1
+  });
+  return /* @__PURE__ */ h(
+    "iframe",
+    {
+      "data-id": t,
+      "data-name": r,
+      "data-type": "WebViewComponent",
+      style: { border: "none", ...o },
+      src: e.data?.params?.url
+    }
+  );
+}, ft = ({ id: t, name: r, nodeData: e }) => {
+  const o = R(e.style, {
+    debug: !1
+  });
+  if (!o.backgroundColor && !o.borderColor)
+    return null;
+  if (o.borderColor && !o.backgroundColor && (o.backgroundColor = "transparent"), o.borderColor && o.borderWidth) {
+    const S = Math.max(o.borderWidth || 0, 1);
+    (!o.width || typeof o.width == "number" && o.width === 0) && (o.width = S), (!o.height || typeof o.height == "number" && o.height === 0) && (o.height = S), o.boxSizing = "border-box";
+  }
+  const i = Array.isArray(e.tags) && e.tags.includes("bravo:layer"), d = G(O)?.isFlex ?? !1, a = e.style?.positioning, n = a && typeof a.top == "number" && typeof a.left == "number" && typeof a.right == "number" && typeof a.bottom == "number" && a.top === 0 && a.left === 0 && a.right === 0 && a.bottom === 0, c = i && (d || n), y = r && r.toLowerCase().startsWith("clip");
+  return c && (o.position = "absolute", o.top = 0, o.left = 0, o.right = 0, o.bottom = 0, o.zIndex = -1, o.width && typeof o.width == "string" && o.width.includes("%") && delete o.width, o.height && typeof o.height == "string" && o.height.includes("%") && delete o.height), y && (o.backgroundColor = "transparent"), /* @__PURE__ */ h(q, { id: t, nodeData: e, children: /* @__PURE__ */ h("div", { "data-name": r, "data-type": "ColorComponent", style: o }) });
+}, gt = ({
+  id: t,
+  name: r,
+  nodeData: e
+}) => {
+  const o = R(e.style, {
+    debug: !1
+  }), i = e.style, d = Array.isArray(i?.gradientColorStops) ? i.gradientColorStops.map((a) => {
+    if (!a?.color) return null;
+    const n = st(a.color);
+    if (typeof a.position == "number") {
+      const c = a.position * 100;
+      return `${n} ${c}%`;
+    }
+    return n;
+  }).filter(Boolean).join(", ") : "";
+  if (d) {
+    const a = i?.gradientType || "linear";
+    o.backgroundImage = a === "radial" ? `radial-gradient(${d})` : `linear-gradient(${d})`, delete o.backgroundColor;
+  }
+  return /* @__PURE__ */ h(q, { id: t, nodeData: e, children: /* @__PURE__ */ h("div", { "data-name": r, "data-type": "GradientComponent", style: o }) });
+}, mt = ({ id: t, name: r, nodeData: e }) => {
+  const { patchedNodeData: o } = tt({ id: t, nodeData: e });
+  e = o;
+  const i = R(e.style, {
+    debug: !1
+  }), d = G(O), a = z((l) => l.assetsById), n = e.style?.scaleMode || "fill";
+  n === "fill" ? i.objectFit = "cover" : n === "fit" && (i.objectFit = "contain"), i.objectPosition = "center";
+  let c = e.data?.imageUrl;
+  !c && e.encoreData?.image && (c = e.encoreData.image.startsWith("//") ? `https:${e.encoreData.image}` : e.encoreData.image), c || (c = a[e.assetId]?.url);
+  const y = e.style?.positioning, S = e.style?.aspectRatio, f = d.dimensions?.width || 0, b = d.dimensions?.height || 0;
+  if (y && S && f > 0) {
+    const l = typeof y.left == "number" && typeof y.right == "number", g = typeof y.top == "number" && typeof y.bottom == "number";
+    if (l) {
+      const I = 100 - y.left - y.right;
+      if (I > 0) {
+        const A = I * f / 100;
+        i.width = A, i.height = A / S, i.left = `${Math.max(0, y.left)}%`, i.top = `${Math.max(0, y.top)}%`, delete i.right, delete i.bottom;
+      }
+    } else if (g && b > 0) {
+      const I = 100 - y.top - y.bottom;
+      if (I > 0) {
+        const A = I * b / 100;
+        i.height = A, i.width = A * S, i.left = `${Math.max(0, y.left)}%`, i.top = `${Math.max(0, y.top)}%`, delete i.right, delete i.bottom;
+      }
+    }
+  }
+  return /* @__PURE__ */ h(q, { id: t, nodeData: e, children: /* @__PURE__ */ h(
+    "img",
+    {
+      "data-id": t,
+      "data-name": r,
+      "data-type": "ImageComponent",
+      style: i,
+      src: c || a[e.assetId]?.url,
+      alt: r
+    }
+  ) });
+}, yt = ({
+  id: t,
+  name: r,
+  nodeData: e
+}) => {
+  const o = z((d) => d.setFormInputValue), i = R(e.style, { debug: !1 });
+  return /* @__PURE__ */ h(
+    "input",
+    {
+      onChange: (d) => o(t, d.target.value),
+      "data-id": t,
+      "data-name": r,
+      "data-type": "EmailInputComponent",
+      placeholder: e.data.text,
+      style: i,
+      type: "email"
+    }
+  );
+}, bt = ({
+  id: t,
+  name: r,
+  nodeData: e
+}) => {
+  const o = R(e.style);
+  return o.visibility = "hidden", /* @__PURE__ */ h(
+    "input",
+    {
+      "data-id": t,
+      "data-name": r,
+      "data-type": "HiddenInputComponent",
+      style: o,
+      type: "hidden"
+    }
+  );
+}, Ct = ({
+  id: t,
+  name: r,
+  nodeData: e
+}) => {
+  const o = z((a) => a.setFormInputValue), i = R(e.style, { debug: !1 }), d = z((a) => a.assetsById);
+  return /* @__PURE__ */ it(ut, { children: [
+    /* @__PURE__ */ h(
+      "div",
+      {
+        style: { ...i, zIndex: 9999, cursor: "pointer" },
+        onClick: () => alert("Image picker")
+      }
+    ),
+    /* @__PURE__ */ h(
+      "img",
+      {
+        onChange: (a) => o(t, a.target.value),
+        style: i,
+        "data-id": t,
+        "data-name": r,
+        "data-type": "ImageInputComponent",
+        src: d[e.assetId]?.url,
+        alt: r
+      }
+    )
+  ] });
+}, xt = ({
+  id: t,
+  name: r,
+  nodeData: e
+}) => {
+  const o = z((d) => d.setFormInputValue), i = R(e.style, { debug: !1 });
+  return /* @__PURE__ */ h(
+    "input",
+    {
+      onChange: (d) => o(t, d.target.value),
+      "data-id": t,
+      "data-name": r,
+      "data-type": "PasswordInputComponent",
+      placeholder: e.data.text,
+      style: i,
+      type: "password"
+    }
+  );
+}, St = ({
+  id: t,
+  name: r,
+  nodeData: e
+}) => {
+  const o = z((f) => f.setFormInputValue), { onAction: i } = v.useContext(Lt), { patchedNodeData: d } = tt({ id: t, nodeData: e }), a = R(d.style, { debug: !1 });
+  a.width = "100%", a.flex = "1", a.minWidth = "0", a.boxSizing = "border-box", a.borderColor = a.borderColor ?? "transparent";
+  const n = d.data?.value, c = d.data?.options, y = v.useMemo(() => !c || !Array.isArray(c) ? [] : c.map((f) => typeof f == "string" ? { value: f, label: f } : f), [c]);
+  return /* @__PURE__ */ it(
+    "select",
+    {
+      "data-id": t,
+      "data-name": r,
+      "data-type": "SelectInputComponent",
+      value: n ?? "",
+      style: a,
+      onChange: async (f) => {
+        const b = f.target.value;
+        if (o(t, b), console.log(`Select changed: ${b}`), typeof i == "function")
+          try {
+            await i({
+              bravo: {
+                cancel: () => {
+                },
+                action: {
+                  action: "select-change",
+                  nodeId: t,
+                  params: { value: b }
+                }
+              }
+            });
+          } catch {
+          }
+      },
+      children: [
+        y.length === 0 && /* @__PURE__ */ h("option", { value: "", disabled: !0, children: "Select an option..." }),
+        y.map((f) => /* @__PURE__ */ h("option", { value: f.value, children: f.label }, f.value))
+      ]
+    }
+  );
+}, vt = ({
+  id: t,
+  name: r,
+  nodeData: e
+}) => {
+  const o = z((d) => d.setFormInputValue), i = R(e.style, {
+    debug: !1
+  });
+  return /* @__PURE__ */ h(
+    "input",
+    {
+      onChange: (d) => o(t, d.target.value),
+      name: t,
+      "data-id": t,
+      "data-name": r,
+      "data-type": "TextInputComponent",
+      placeholder: e.data.text,
+      style: i,
+      type: "text"
+    }
+  );
+}, It = ({ id: t, name: r, nodeData: e }) => {
+  const o = R(e.style);
+  return /* @__PURE__ */ h(q, { id: t, nodeData: e, children: /* @__PURE__ */ h(
+    "div",
+    {
+      "data-id": t,
+      "data-name": r,
+      "data-type": "LottieComponent",
+      style: o,
+      children
+    }
+  ) });
+}, wt = ({ id: t, name: r, nodeData: e }) => {
+  const o = R(e.style, {
+    debug: !1
+  }), i = z((d) => d.assetsById);
+  return /* @__PURE__ */ h(q, { id: t, nodeData: e, children: /* @__PURE__ */ h(
+    "img",
+    {
+      "data-id": t,
+      "data-name": r,
+      "data-type": "SvgComponent",
+      style: o,
+      src: i[e.assetId]?.url,
+      alt: r
+    }
+  ) });
+}, At = ({ id: t, name: r, nodeData: e }) => {
+  const { patchedNodeData: o } = tt({ id: t, nodeData: e });
+  e = o;
+  const i = e.data?.text;
+  r && r.includes("Purpose") && console.log("TextComponent Debug:", {
+    id: t,
+    name: r,
+    nodeData: e,
+    style: e.style,
+    color: e.style?.color
+  });
+  const d = e.style, a = e.fontId ? { ...d, fontId: e.fontId } : d, n = R(a, {
+    debug: !1
+  });
+  n.display = "flex", n.flexDirection = "column", d.verticalPosition && (n.justifyContent = {
+    "from-top": "flex-start",
+    center: "center",
+    "from-bottom": "flex-end"
+  }[d.verticalPosition]);
+  const c = i && (i.includes(`
+`) || i.includes("\r"));
+  let y;
+  return c && n.flexDirection === "column" ? y = i.split(/\r?\n/).filter((f) => f.length > 0).map((f, b) => /* @__PURE__ */ h("div", { style: { lineHeight: "inherit" }, children: f }, b)) : y = i, /* @__PURE__ */ h(q, { id: t, nodeData: e, children: /* @__PURE__ */ h(
+    "div",
+    {
+      "data-id": t,
+      "data-name": r,
+      "data-type": "TextComponent",
+      style: n,
+      children: y
+    }
+  ) });
+}, dt = ({
+  id: t,
+  name: r,
+  nodeData: e,
+  children: o
+}) => {
+  const i = G(Q), { patchedNodeData: d } = tt({ id: t, nodeData: e });
+  e = d;
+  const a = jt(e.tags), n = a ? z((I) => I.inputGroups[a.groupName]) : null, c = z((I) => I.statefulSetVariants[t]), y = R(e.style, {
+    debug: !1
+  });
+  let S;
+  a && n !== null ? S = n === r ? "active" : "default" : S = c || e.data.initialState || "default";
+  const f = v.Children.toArray(o).find((I) => v.isValidElement(I) ? I.props?.nodeData?.data?.state === S : !1), b = v.isValidElement(f) ? v.cloneElement(f, {
+    _parentStatefulSetId: t,
+    _parentInputGroupInfo: a,
+    _parentName: r
+    // Pass the name so we can identify which element is active
+  }) : f, l = /* @__PURE__ */ h(
+    "div",
+    {
+      "data-id": t,
+      "data-name": r,
+      "data-type": "StatefulSetComponent",
+      style: y,
+      children: b
+    }
+  );
+  if (e.type === "component:input-stateful-set")
+    return l;
+  const g = v.useContext(lt);
+  return /* @__PURE__ */ h(
+    Q.Provider,
+    {
+      value: { nodeData: i?.nodeData?.[t] || {} },
+      children: /* @__PURE__ */ h(
+        lt.Provider,
+        {
+          value: { ...g, statefulSetId: t },
+          children: l
+        }
+      )
+    }
+  );
+}, Et = ({
+  id: t,
+  name: r,
+  nodeData: e,
+  children: o,
+  _parentStatefulSetId: i,
+  _parentInputGroupInfo: d,
+  _parentName: a
+}) => {
+  const n = R(e.style, {
+    debug: !1
+  }), c = {
+    ...n,
+    position: n.position || "relative"
+  };
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      "data-id": t,
+      "data-name": r,
+      "data-type": "StatefulCompoundComponent",
+      style: c,
+      children: /* @__PURE__ */ h(
+        q,
+        {
+          id: t,
+          nodeData: e,
+          _parentStatefulSetId: i,
+          _parentInputGroupInfo: d,
+          _parentName: a,
+          children: o
+        }
+      )
+    }
+  );
+}, Tt = ({ id: t, name: r, children: e }) => {
+  G(O);
+  const { dimensions: o, ref: i } = rt(), d = {
+    zIndex: 0,
+    flex: 1,
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%"
+  };
+  return /* @__PURE__ */ h(O.Provider, { value: { dimensions: o, isFlex: !1 }, children: /* @__PURE__ */ h(
+    "div",
+    {
+      "data-id": t,
+      "data-name": r,
+      "data-type": "BackgroundContainerComponent",
+      ref: i,
+      style: d,
+      children: e
+    }
+  ) });
+}, pt = ({
+  id: t,
+  name: r,
+  nodeData: e,
+  children: o,
+  _arrayItemIndex: i,
+  _arrayItemData: d
+}) => {
+  t === "01KB929X1KK5TX0K8VBNP6ZDPG" && console.log(
+    `[DEBUG] ContainerComponent ${t} (Hero) FULL nodeData:`,
+    JSON.stringify(e, null, 2)
+  );
+  const a = G(Q), { patchedNodeData: n, list: c, arrayData: y } = tt({
+    id: t,
+    nodeData: e
+  });
+  e = n;
+  const { dimensions: S, ref: f } = rt(), b = R(e.style, {
+    debug: !1
+  }), l = !!e.style.layout?.mode, g = e.style.layout?.mode === "HORIZONTAL" ? "row" : "column", I = b.width !== void 0, A = b.height !== void 0, F = G(O), E = F?.isFlex ?? !1, s = F?.flexDirection, W = E && s === "row", U = !E && e.style.positioning, M = e.style.layout?.layoutSizingHorizontal === "FIXED" || e.style.layout?.layoutSizingVertical === "FIXED", Z = e.style.layout?.layoutSizingHorizontal === "HUG" || e.style.layout?.layoutSizingVertical === "HUG";
+  if (!I && !W && !(U && (M || Z)) && (b.width = "100%"), !A) {
+    const k = !E && e.style.positioning, X = e.style.layout?.layoutSizingVertical === "FILL";
+    if (!(e.style.layout?.layoutSizingVertical === "HUG")) {
+      if (!l) if (k && X && e.style.positioning?.top !== void 0) {
+        const ot = 100 - e.style.positioning.top;
+        b.height = `${ot}%`;
+      } else
+        b.height = "100%";
+    }
+  }
+  const H = e.style.layout?.layoutSizingHorizontal || e.style.layout?.layoutSizingVertical, V = e.style.positioning && !l && (H || !0) ? { ...b, position: "absolute" } : b.position === "absolute" ? b : { ...b, position: b.position || "relative" }, N = (k) => typeof k == "number" ? k : typeof k == "string" && k.endsWith("px") && parseFloat(k) || 0, m = N(b.paddingLeft), et = N(b.paddingRight), j = N(b.paddingTop), B = N(b.paddingBottom), L = M && typeof b.width == "number" && typeof b.height == "number" ? {
+    width: b.width - m - et,
+    height: b.height - j - B
+  } : {
+    width: S.width - m - et,
+    height: S.height - j - B
+  };
+  if (i != null && c) {
+    const k = c[i];
+    if (k !== void 0) {
+      const X = typeof k == "object" && k !== null ? {
+        nodeData: k,
+        arrayDataById: a?.arrayDataById,
+        textOverridesById: a?.textOverridesById,
+        rootData: a?.rootData
+      } : { nodeData: k };
+      return /* @__PURE__ */ h(Q.Provider, { value: X, children: /* @__PURE__ */ h(
+        O.Provider,
+        {
+          value: { dimensions: L, isFlex: l, flexDirection: g },
+          children: /* @__PURE__ */ h(
+            "div",
+            {
+              "data-id": `${t}:${i}`,
+              "data-name": r,
+              "data-type": "ContainerComponent",
+              style: V,
+              children: o
+            }
+          )
+        }
+      ) });
+    }
+  }
+  if (c) {
+    const k = y || c;
+    return zt(() => k.map((J, _) => {
+      const ot = typeof J == "object" && J !== null ? {
+        nodeData: J,
+        arrayDataById: a?.arrayDataById,
+        textOverridesById: a?.textOverridesById,
+        rootData: a?.rootData
+      } : { nodeData: J };
+      return /* @__PURE__ */ h(
+        Q.Provider,
+        {
+          value: ot,
+          children: /* @__PURE__ */ h(
+            O.Provider,
+            {
+              value: { dimensions: L, isFlex: l, flexDirection: g },
+              children: /* @__PURE__ */ h(
+                "div",
+                {
+                  "data-id": `${t}:${_}`,
+                  "data-name": r,
+                  "data-type": "ContainerComponent",
+                  style: V,
+                  children: o
+                }
+              )
+            }
+          )
+        },
+        `${t}:${_}`
+      );
+    }), [k, t]);
+  }
+  let $ = e.actions || [];
+  !Array.isArray($) && typeof $ == "object" && $ !== null && ($ = Object.entries($).map(
+    ([k, X]) => ({
+      event: k,
+      ...typeof X == "object" && X !== null ? X : {}
+    })
+  ));
+  const K = Array.isArray($) && $.length > 0;
+  return /* @__PURE__ */ h(
+    O.Provider,
+    {
+      value: { dimensions: L, isFlex: l, flexDirection: g },
+      children: /* @__PURE__ */ h(
+        "div",
+        {
+          "data-id": t,
+          "data-name": r,
+          "data-type": "ContainerComponent",
+          ref: f,
+          style: V,
+          children: K ? /* @__PURE__ */ h(q, { id: t, nodeData: e, children: o }) : o
+        }
+      )
+    }
+  );
+}, Ft = pt, Pt = ({ id: t, name: r, nodeData: e, children: o }) => {
+  const { dimensions: i, ref: d } = rt(), a = R(e.style, {
+    debug: !1
+  }), n = !!e.style.layout?.mode, c = e.style.layout?.mode === "HORIZONTAL" ? "row" : "column", y = a.position ? a : { ...a, position: "relative" };
+  return /* @__PURE__ */ h(
+    O.Provider,
+    {
+      value: { dimensions: i, isFlex: n, flexDirection: c },
+      children: /* @__PURE__ */ h(
+        "div",
+        {
+          "data-id": t,
+          "data-name": r,
+          "data-type": "TopBarContainerComponent",
+          ref: d,
+          style: y,
+          children: o
+        }
+      )
+    }
+  );
+}, Gt = ({ id: t, name: r, nodeData: e, children: o }) => {
+  const i = R(e.style, { debug: !1 });
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      "data-id": t,
+      "data-name": r,
+      "data-type": "DefaultLayerComponent",
+      style: i,
+      children: o
+    }
+  );
+}, $t = ({ id: t, name: r, nodeData: e, children: o }) => /* @__PURE__ */ h(
+  "div",
+  {
+    "data-id": t,
+    "data-name": r,
+    "data-type": "TabsMenuComponent",
+    style: R(e.style),
+    children: o
+  }
+), Wt = ({ id: t, name: r, nodeData: e, children: o }) => {
+  const i = R(e.style, {
+    debug: !1
+  });
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      "data-id": t,
+      "data-name": r,
+      "data-type": "MenuSideComponent",
+      style: i,
+      children: o
+    }
+  );
+}, at = ({ id: t, name: r, nodeData: e, children: o }) => {
+  t === "01KB929X1DQJN954WNGF5AH38B" && console.log(
+    `[DEBUG] SliderComponent ${t} FULL nodeData:`,
+    JSON.stringify(e, null, 2)
+  );
+  const { dimensions: i, ref: d } = rt(), a = v.useRef(null), n = v.useRef(null), c = v.useRef(!1), y = v.useRef(null), S = G(ct), f = G(Ot), [b, l] = v.useState({
+    currentIndex: void 0,
+    onIndexChange: void 0
+  }), [g, I] = v.useState(0), A = v.useRef(null), { patchedNodeData: F } = tt({ id: t, nodeData: e });
+  e = F;
+  const E = e.data?.params || {}, s = E.infinite === !0, W = E.automatic === !0;
+  let M = Array.isArray(e.tags) && e.tags.some((u) => u.includes("container:slider:vertical")) || e.name && e.name.includes("container:slider:vertical");
+  if (!M && E.animation === "default") {
+    const u = e.style?.width, p = e.style?.height;
+    typeof u == "number" && typeof p == "number" && p > u && (M = !0);
+  }
+  const Z = M ? "vertical" : E.animation === "default" ? "horizontal" : E.animation || "horizontal", H = R(e.style, {
+    debug: !1
+  }), P = H.width !== void 0, V = H.height !== void 0;
+  P || (H.width = "100%"), V || (H.height = "100%"), H.position || (H.position = "relative");
+  const N = G(Q), m = v.useMemo(() => {
+    const u = [];
+    return v.Children.forEach(o, (p) => {
+      if (p == null) return;
+      const w = p?.props || {}, x = w.nodeData || {};
+      if (Array.isArray(x?.tags) && (x.tags.includes("encore:data:array") || x.tags.includes("bravo:data:array")) && w.id && N) {
+        const T = N?.arrayDataById && N.arrayDataById[w.id] && Array.isArray(N.arrayDataById[w.id]) ? N.arrayDataById[w.id] : null;
+        T && T.length > 0 ? T.forEach((D, nt) => {
+          u.push(
+            v.cloneElement(p, {
+              key: `${w.id}:${nt}`,
+              // ContainerComponent will use this to know which item to render
+              _arrayItemIndex: nt,
+              _arrayItemData: D
+            })
+          );
+        }) : u.push(p);
+      } else
+        u.push(p);
+    }), u;
+  }, [o, t, N]), et = v.useMemo(() => {
+    if (!s || m.length === 0)
+      return m;
+    const u = m[0], p = m[m.length - 1];
+    return [
+      v.cloneElement(p, {
+        key: `clone-last-${p.key || p.props.id}`
+      }),
+      ...m,
+      v.cloneElement(u, {
+        key: `clone-first-${u.key || u.props.id}`
+      })
+    ];
+  }, [m, s]), j = v.useMemo(() => {
+    if (m.length === 0) return { width: 0, height: 0 };
+    const p = m[0]?.props?.nodeData?.style, w = S.scaleFactor || 1;
+    let x = 0, C = 0;
+    return p?.layout?.layoutSizingHorizontal === "FIXED" && p?.layout?.size?.x ? x = p.layout.size.x * w : x = i.width || 0, p?.layout?.layoutSizingVertical === "FIXED" && p?.layout?.size?.y ? C = p.layout.size.y * w : C = i.height || 0, { width: x, height: C };
+  }, [m, i.width, i.height, S.scaleFactor]), B = j.width, L = j.height, $ = Z === "vertical", K = v.useCallback(() => {
+    if (!a.current || m.length === 0)
+      return 0;
+    const u = a.current;
+    if ($) {
+      if (L === 0) return 0;
+      const p = u.scrollTop;
+      if (s) {
+        const x = p - L;
+        let C = Math.round(x / L);
+        return C < 0 && (C = 0), C >= m.length && (C = m.length - 1), C;
+      } else {
+        const w = Math.round(p / L);
+        return w < 0 ? 0 : w >= m.length ? m.length - 1 : w;
+      }
+    } else {
+      if (B === 0) return 0;
+      const p = u.scrollLeft;
+      if (s) {
+        const x = p - B;
+        let C = Math.round(x / B);
+        return C < 0 && (C = 0), C >= m.length && (C = m.length - 1), C;
+      } else {
+        const w = Math.round(p / B);
+        return w < 0 ? 0 : w >= m.length ? m.length - 1 : w;
+      }
+    }
+  }, [s, m.length, B, L, $]), Y = v.useCallback(
+    (u, p = !0) => {
+      if (!a.current || m.length === 0) return;
+      const w = a.current;
+      if ($) {
+        let x;
+        s ? x = L + u * L : x = u * L, w.scrollTo({
+          top: x,
+          behavior: p ? "smooth" : "auto"
+        });
+      } else {
+        let x;
+        s ? x = B + u * B : x = u * B, w.scrollTo({
+          left: x,
+          behavior: p ? "smooth" : "auto"
+        });
+      }
+    },
+    [B, L, s, m.length, $]
+  ), k = v.useCallback(() => {
+    if (!s || !a.current || m.length === 0) return;
+    const u = a.current, p = 1;
+    if ($) {
+      if (L === 0) return;
+      const w = u.scrollTop, x = L, C = x, T = C + m.length * x;
+      w >= T - p ? u.scrollTop = C : w <= p && (u.scrollTop = T - x);
+    } else {
+      if (B === 0) return;
+      const w = u.scrollLeft, x = B, C = x, T = C + m.length * x;
+      w >= T - p ? u.scrollLeft = C : w <= p && (u.scrollLeft = T - x);
+    }
+  }, [s, m.length, B, L, $]);
+  v.useEffect(() => {
+    if (!W || m.length <= 1 || B === 0) return;
+    const u = () => {
+      if (c.current || !a.current) return;
+      const p = a.current;
+      if ($) {
+        if (L === 0) return;
+        const w = p.scrollTop, x = L;
+        let C;
+        if (s) {
+          const nt = w - x;
+          C = Math.round(nt / x), C < 0 && (C = 0), C >= m.length && (C = m.length - 1);
+        } else
+          C = Math.round(w / x);
+        let T = C + 1;
+        if (s) {
+          T >= m.length && (T = 0);
+          const D = x;
+          p.scrollTo({
+            top: D + T * x,
+            behavior: "smooth"
+          });
+        } else
+          T >= m.length && (T = 0), Y(T);
+      } else {
+        if (B === 0) return;
+        const w = p.scrollLeft, x = B;
+        let C;
+        if (s) {
+          const nt = w - x;
+          C = Math.round(nt / x), C < 0 && (C = 0), C >= m.length && (C = m.length - 1);
+        } else
+          C = Math.round(w / x);
+        let T = C + 1;
+        if (s) {
+          T >= m.length && (T = 0);
+          const D = x;
+          p.scrollTo({
+            left: D + T * x,
+            behavior: "smooth"
+          });
+        } else
+          T >= m.length && (T = 0), Y(T);
+      }
+    };
+    return n.current = setInterval(u, 4e3), () => {
+      n.current && (clearInterval(n.current), n.current = null);
+    };
+  }, [
+    W,
+    m.length,
+    s,
+    B,
+    L,
+    $,
+    Y
+  ]);
+  const X = v.useCallback(() => {
+    c.current = !0, y.current && clearTimeout(y.current), y.current = setTimeout(() => {
+      c.current = !1;
+    }, 3e3);
+  }, []), J = v.useRef(b);
+  v.useEffect(() => {
+    J.current = b;
+  }, [b]);
+  const _ = v.useCallback(
+    (u) => {
+      if (A.current === u) return;
+      A.current = u;
+      const p = J.current;
+      p.currentIndex === void 0 && I(u), p.onIndexChange && p.onIndexChange(u);
+    },
+    []
+    // Empty deps - we use ref to access latest controlProps
+  );
+  v.useEffect(() => {
+    const u = a.current;
+    if (!u) return;
+    let p = null;
+    const w = () => {
+      X(), s ? (p !== null && cancelAnimationFrame(p), p = requestAnimationFrame(() => {
+        k();
+        const T = K();
+        _(T);
+      })) : (p !== null && cancelAnimationFrame(p), p = requestAnimationFrame(() => {
+        const T = K();
+        _(T);
+      }));
+    }, x = () => X(), C = () => X();
+    return u.addEventListener("scroll", w, { passive: !0 }), u.addEventListener("touchstart", x, {
+      passive: !0
+    }), u.addEventListener("mousedown", C), () => {
+      u.removeEventListener("scroll", w), u.removeEventListener("touchstart", x), u.removeEventListener("mousedown", C), y.current && clearTimeout(y.current), p !== null && cancelAnimationFrame(p);
+    };
+  }, [
+    s,
+    X,
+    k,
+    K,
+    _
+  ]), v.useEffect(() => {
+    if (f) {
+      const u = f.getControlProps(t);
+      u && u !== b && l(u);
+    }
+  }, [t, f, b]), v.useEffect(() => {
+    if (b.currentIndex !== void 0 && a.current && m.length > 0 && B > 0) {
+      const u = Math.max(
+        0,
+        Math.min(b.currentIndex, m.length - 1)
+      ), p = K();
+      u !== p && Y(u, !0);
+    }
+  }, [
+    b.currentIndex,
+    m.length,
+    m.length,
+    B,
+    L,
+    $,
+    Y,
+    K
+  ]), v.useEffect(() => {
+    if (s && a.current && m.length > 0 && m.length > 0 && ($ ? L > 0 : B > 0)) {
+      const u = $ ? L : B;
+      setTimeout(() => {
+        a.current && ($ ? a.current.scrollTop = u : a.current.scrollLeft = u);
+      }, 0);
+    }
+  }, [s, m.length, B, L, $]), v.useEffect(() => {
+    if (!f) return;
+    const { registerContainer: u, unregisterContainer: p } = f;
+    return () => {
+    };
+  }, [
+    t,
+    f?.registerContainer,
+    f?.unregisterContainer,
+    // controlProps, // REMOVED to break infinite loop
+    Y,
+    K
+  ]);
+  const ot = {
+    display: "flex",
+    flexDirection: $ ? "column" : "row",
+    overflowX: $ ? "hidden" : "auto",
+    overflowY: $ ? "auto" : "hidden",
+    scrollSnapType: $ ? "y mandatory" : "x mandatory",
+    scrollBehavior: "smooth",
+    width: "100%",
+    height: "100%",
+    WebkitOverflowScrolling: "touch"
+    // Smooth scrolling on iOS
+  }, kt = {
+    flexShrink: 0,
+    scrollSnapAlign: "start",
+    width: j.width > 0 ? j.width : void 0,
+    height: j.height > 0 ? j.height : void 0,
+    position: "relative"
+  };
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      "data-id": t,
+      "data-name": r,
+      "data-type": "SliderComponent",
+      ref: d,
+      style: H,
+      children: /* @__PURE__ */ h("div", { ref: a, style: ot, children: et.map((u, p) => /* @__PURE__ */ h(
+        O.Provider,
+        {
+          value: {
+            dimensions: {
+              width: j.width,
+              height: j.height
+            },
+            isFlex: !1
+          },
+          children: /* @__PURE__ */ h("div", { style: kt, children: u })
+        },
+        u.key || `slide-${p}`
+      )) })
+    }
+  );
+}, Rt = (t, r) => {
+  const e = Array.isArray(t) ? t : [t];
+  for (const o of e)
+    if (!(!o || !o.props)) {
+      if (o.props.id === r)
+        return o;
+      if (o.props.children) {
+        const i = Rt(o.props.children, r);
+        if (i) return i;
+      }
+    }
+  return null;
+}, Bt = ({ id: t, name: r, nodeData: e, children: o }) => {
+  const { dimensions: i, ref: d } = rt(), { componentId: a } = G(lt), n = G(O), c = e.style.originalSize?.[0] || 1, y = e.style.originalSize?.[1] || 1, S = n?.dimensions?.width, f = n?.dimensions?.height, b = window.innerWidth, l = window.innerHeight, g = S && S > 0 && S < b * 0.8;
+  let I, A;
+  i.width > 0 && i.height > 0 ? (I = i.width, A = i.height) : g && S && f || S && f && S > 0 && f > 0 ? (I = S, A = f) : (I = b, A = l);
+  const E = { scaleFactor: Math.min(I / c, A / y) || 1 };
+  if (a) {
+    const P = Rt(o, a);
+    return P ? /* @__PURE__ */ h(ct.Provider, { value: E, children: /* @__PURE__ */ h(
+      O.Provider,
+      {
+        value: {
+          dimensions: {
+            width: "100%",
+            height: "100%"
+          }
+        },
+        children: P
+      }
+    ) }) : (console.warn(`Child with id "${a}" not found`), null);
+  }
+  const s = Array.isArray(o) ? o : [o], { scrollableChildren: W, nonScrollableChildren: U } = s.reduce(
+    (P, V) => {
+      const m = V.props.nodeData.type === "container:top-bar" ? "nonScrollableChildren" : "scrollableChildren";
+      return P[m].push(V), P;
+    },
+    {
+      scrollableChildren: [],
+      nonScrollableChildren: []
+    }
+  );
+  let M = e.style?.layout?.mode;
+  if (!M && t === "01KASW494V02Y8P5JVWV5XK62X" && (console.log("🔧 PATCHING missing layout for page", t), M = "HORIZONTAL"), !M && o) {
+    const P = Array.isArray(o) ? o : [o];
+    let V = 0, N = 0;
+    P.forEach((et) => {
+      const j = et?.props?.nodeData?.style?.width;
+      j && (V += j, j < 99 && N++);
+    }), N > 0 && V >= 99 && (console.log(
+      `[PATCH] Detected HORIZONTAL WRAP layout for page ${t} (Partial width children: ${N}, Total width: ${V})`
+    ), M = "HORIZONTAL", e.style || (e.style = {}), e.style.layout || (e.style.layout = {}), e.style.layout.mode = "HORIZONTAL", e.style.layout.flexWrap = "wrap", e.style.layout.primaryAxisAlignItems = "flex-start", e.style.layout.counterAxisAlignItems = "flex-start");
+  }
+  const Z = M === "HORIZONTAL" ? "row" : "column", H = U.some(
+    (P) => P?.props?.nodeData?.type !== "container:background"
+  );
+  return /* @__PURE__ */ h(ct.Provider, { value: E, children: /* @__PURE__ */ it(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        position: "relative",
+        overflow: "hidden",
+        // Only use flex if we have non-background nonScrollableChildren (like top-bar)
+        ...H ? {
+          display: "flex",
+          flexDirection: Z,
+          gap: 0,
+          rowGap: 0,
+          columnGap: 0
+        } : {}
+      },
+      ref: d,
+      children: [
+        U.filter(
+          (P) => P?.props?.nodeData?.type === "container:background"
+        ).map((P, V) => /* @__PURE__ */ h(
+          O.Provider,
+          {
+            value: {
+              dimensions: {
+                width: i.width,
+                height: i.height
+              }
+            },
+            children: P
+          },
+          `bg-${V}`
+        )),
+        H && U.filter(
+          (P) => P?.props?.nodeData?.type !== "container:background"
+        ).map((P, V) => /* @__PURE__ */ h(
+          O.Provider,
+          {
+            value: {
+              dimensions: {
+                width: i.width,
+                height: i.height
+              }
+            },
+            children: P
+          },
+          `non-scroll-${V}`
+        )),
+        /* @__PURE__ */ h(O.Provider, { value: { dimensions: i }, children: /* @__PURE__ */ h(
+          "div",
+          {
+            "data-id": t,
+            "data-name": r,
+            "data-type": "PageComponent",
+            style: {
+              position: "relative",
+              ...H ? {
+                flex: 1,
+                ...Z === "row" ? { alignSelf: "stretch" } : {}
+                // Removed height: "100%" to allow HUG containers to size based on content
+              } : {
+                width: "100%"
+                // Removed height: "100%" to allow HUG containers to size based on content
+              },
+              // Remove overflow: auto in horizontal mode as it causes height collapse
+              ...Z === "column" && { overflow: "auto" },
+              ...R(e.style, {
+                debug: !1
+              })
+            },
+            children: W
+          }
+        ) })
+      ]
+    }
+  ) });
+}, Dt = {
+  WebViewComponent: ht,
+  ColorComponent: ft,
+  GradientComponent: gt,
+  ImageComponent: mt,
+  EmailInputComponent: yt,
+  HiddenInputComponent: bt,
+  ImageInputComponent: Ct,
+  PasswordInputComponent: xt,
+  SelectInputComponent: St,
+  TextInputComponent: vt,
+  LottieComponent: It,
+  SvgComponent: wt,
+  TextComponent: At,
+  StatefulSetComponent: dt,
+  StatefulCompoundComponent: Et,
+  BackgroundContainerComponent: Tt,
+  ContainerComponent: pt,
+  CompoundComponent: Ft,
+  TopBarContainerComponent: Pt,
+  DefaultLayerComponent: Gt,
+  TabsMenuComponent: $t,
+  MenuSideComponent: Wt,
+  SliderComponent: at,
+  PageComponent: Bt,
+  // Type string mappings for dynamically loaded components
+  "menu:side": Wt,
+  "page:default": Bt,
+  "container:background": Tt,
+  "container:default": pt,
+  "container:top-bar": Pt,
+  "container:slider": at,
+  "component:text": At,
+  "component:color": ft,
+  "component:gradient": gt,
+  "component:image": mt,
+  "component:svg": wt,
+  "component:compound": Ft,
+  "component:input-stateful-set": dt,
+  "component:stateful-set": dt,
+  "component:stateful-compound": Et,
+  "component:slider": at,
+  "component:webview": ht,
+  "component:lottie": It,
+  "component:email-input": yt,
+  "component:text-input": vt,
+  "component:password-input": xt,
+  "component:select-input": St,
+  "component:image-input": Ct,
+  "component:hidden-input": bt,
+  "component:tabs-menu": $t,
+  ContainerSliderComponent: at
+};
+export {
+  Dt as default
+};
+//# sourceMappingURL=components.js.map