@maildeno/editor 0.4.3 → 0.4.5

package/dist/RowPreviewLegacyComponent-DVxrCJ14.js

@@ -0,0 +1,402 @@
+import { H as G, L as o, S as V, T as q, _ as J, f as b, g as c, h as O, v, vt as a, y as r, yt as x, z as S } from "./vue.runtime.esm-bundler-CsdyQceJ.js";
+var K = ["innerHTML"], Q = ["src", "alt"], U = ["src", "alt"], X = {
+  style: {
+    width: "30%",
+    height: "30%",
+    color: "#9ca3af"
+  },
+  fill: "currentColor",
+  viewBox: "0 0 20 20"
+}, Y = ["src", "alt"], Z = ["src", "alt"], _ = ["innerHTML"], tt = { key: 8 }, et = { key: 0 }, nt = ["src", "alt"], it = {
+  key: 1,
+  style: {
+    "font-size": "7px",
+    color: "#9ca3af",
+    "font-style": "italic"
+  }
+}, ot = {
+  key: 11,
+  class: "rounded truncate",
+  style: {
+    "font-size": "7px",
+    color: "#9ca3af",
+    background: "#f3f4f6",
+    padding: "1px 3px"
+  }
+}, at = /* @__PURE__ */ q({
+  __name: "RowPreviewLegacyComponent",
+  props: {
+    comp: {},
+    scale: {}
+  },
+  setup(e) {
+    const y = e, l = O(() => y.comp.componentType ?? y.comp.type);
+    function u(t) {
+      return t ? t.replace(/<span[^>]*\bdata-merge="([^"]+)"(?:[^>]*\bdata-merge-default="([^"]*)")?[^>]*>.*?<\/span>/gs, (n, i, g) => {
+        const d = i.trim(), f = g?.trim();
+        return f ? `{{ ${d}|'${f}' }}` : `{{ ${d} }}`;
+      }) : "";
+    }
+    function s(t) {
+      const n = t?.backgroundGradient;
+      if (n?.useGradient === !0 && Array.isArray(n?.gradient?.colors) && n.gradient.colors.length >= 2) {
+        const { type: i, direction: g, colors: d } = n.gradient, f = d.map((p) => `${p.color} ${p.position}%`).join(", ");
+        return i === "radial" ? `radial-gradient(circle at center, ${f})` : `linear-gradient(${g}, ${f})`;
+      }
+      return t?.backgroundColor || "transparent";
+    }
+    function m(t) {
+      if (t && (t.includes(" ") || [
+        "Roboto",
+        "Open Sans",
+        "Lato",
+        "Montserrat",
+        "Poppins",
+        "Nunito",
+        "Raleway",
+        "Plus Jakarta Sans"
+      ].some((n) => t.includes(n))) && typeof document < "u") {
+        const n = `https://fonts.googleapis.com/css2?family=${t.replace(/ /g, "+")}:wght@300;400;500;600;700;800&display=swap`;
+        if (!document.querySelector(`link[href="${n}"]`)) {
+          const i = document.createElement("link");
+          i.href = n, i.rel = "stylesheet", document.head.appendChild(i);
+        }
+      }
+    }
+    function k(t) {
+      return t?.fontFamily && m(t.fontFamily), {
+        fontSize: Math.max(7, t?.fontSize || 24) + "px",
+        color: t?.color || "#111111",
+        fontWeight: t?.fontWeight || "bold",
+        fontFamily: t?.fontFamily || "Arial, sans-serif",
+        textAlign: t?.align || "left",
+        lineHeight: String(t?.lineHeight ?? 1.2),
+        letterSpacing: `${t?.letterSpacing ?? 0}px`,
+        textTransform: t?.textTransform || "none",
+        textDecoration: t?.textDecoration || "none",
+        background: s(t),
+        margin: `${t?.margin?.top ?? 0}px ${t?.margin?.right ?? 0}px ${t?.margin?.bottom ?? 4}px ${t?.margin?.left ?? 0}px`,
+        padding: `${t?.padding?.top ?? 0}px ${t?.padding?.right ?? 0}px ${t?.padding?.bottom ?? 0}px ${t?.padding?.left ?? 0}px`
+      };
+    }
+    function w(t) {
+      return t?.fontFamily && m(t.fontFamily), {
+        fontSize: Math.max(6, t?.fontSize || 16) + "px",
+        color: t?.color || "#111111",
+        fontFamily: t?.fontFamily || "Arial, sans-serif",
+        fontWeight: t?.fontWeight || "normal",
+        fontStyle: t?.fontStyle || "normal",
+        textAlign: t?.align || "left",
+        lineHeight: String(t?.lineHeight ?? 1.5),
+        letterSpacing: `${t?.letterSpacing ?? 0}px`,
+        textTransform: t?.textTransform || "none",
+        textDecoration: t?.textDecoration || "none",
+        background: s(t),
+        margin: `${t?.margin?.top ?? 0}px ${t?.margin?.right ?? 0}px ${t?.margin?.bottom ?? 4}px ${t?.margin?.left ?? 0}px`,
+        padding: `${t?.padding?.top ?? 0}px ${t?.padding?.right ?? 0}px ${t?.padding?.bottom ?? 0}px ${t?.padding?.left ?? 0}px`
+      };
+    }
+    function F(t) {
+      return {
+        margin: `${t?.margin?.top ?? 0}px ${t?.margin?.right ?? 0}px ${t?.margin?.bottom ?? 0}px ${t?.margin?.left ?? 0}px`,
+        padding: `${t?.padding?.top ?? 0}px ${t?.padding?.right ?? 0}px ${t?.padding?.bottom ?? 0}px ${t?.padding?.left ?? 0}px`,
+        textAlign: t?.align || "left"
+      };
+    }
+    function z(t) {
+      const n = t?.align || "left";
+      return {
+        width: (t?.width || 100) + "%",
+        height: t?.height || "auto",
+        borderRadius: (t?.borderRadius || 0) + "px",
+        border: `${t?.border?.width || 0}px ${t?.border?.style || "solid"} ${t?.border?.color || "#000000"}`,
+        display: "block",
+        margin: n === "center" ? "0 auto" : n === "right" ? "0 0 0 auto" : "0"
+      };
+    }
+    function A(t) {
+      return {
+        margin: `${t?.margin?.top ?? 0}px ${t?.margin?.right ?? 0}px ${t?.margin?.bottom ?? 0}px ${t?.margin?.left ?? 0}px`,
+        padding: `${t?.padding?.top ?? 0}px ${t?.padding?.right ?? 0}px ${t?.padding?.bottom ?? 0}px ${t?.padding?.left ?? 0}px`,
+        textAlign: t?.align || "left",
+        maxWidth: "100%"
+      };
+    }
+    function C(t) {
+      const n = t?.align || "left";
+      return {
+        width: "100%",
+        maxWidth: "100%",
+        paddingBottom: "56.25%",
+        height: "0",
+        position: "relative",
+        display: "inline-block",
+        borderRadius: (t?.borderRadius || 0) + "px",
+        border: `${t?.border?.width || 0}px ${t?.border?.style || "solid"} ${t?.border?.color || "#000000"}`,
+        overflow: "hidden",
+        marginLeft: n === "center" || n === "right" ? "auto" : "0",
+        marginRight: n === "center" ? "auto" : "0",
+        boxSizing: "border-box"
+      };
+    }
+    function H() {
+      return {
+        position: "absolute",
+        top: "0",
+        left: "0",
+        width: "100%",
+        height: "100%",
+        objectFit: "cover",
+        display: "block"
+      };
+    }
+    function T() {
+      return {
+        position: "absolute",
+        top: "0",
+        left: "0",
+        width: "100%",
+        height: "100%",
+        background: "#e5e7eb",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      };
+    }
+    function L(t) {
+      return {
+        margin: `${t?.margin?.top ?? 0}px ${t?.margin?.right ?? 0}px ${t?.margin?.bottom ?? 4}px ${t?.margin?.left ?? 0}px`,
+        textAlign: t?.align || "center"
+      };
+    }
+    function M(t) {
+      t?.fontFamily && m(t.fontFamily);
+      const n = !!t?.icon;
+      return {
+        background: s(t),
+        color: t?.color || "#ffffff",
+        fontSize: Math.max(5, t?.fontSize || 16) + "px",
+        fontWeight: t?.fontWeight || "500",
+        fontFamily: t?.fontFamily || "Arial, sans-serif",
+        letterSpacing: `${t?.letterSpacing ?? 0}px`,
+        padding: `${t?.padding?.top ?? 8}px ${t?.padding?.right ?? 16}px ${t?.padding?.bottom ?? 8}px ${t?.padding?.left ?? 16}px`,
+        borderRadius: (t?.borderRadius || 4) + "px",
+        border: `${t?.border?.width || 0}px ${t?.border?.style || "solid"} ${t?.border?.color || "#000000"}`,
+        ...n ? {
+          display: "inline-flex",
+          alignItems: "center",
+          verticalAlign: "middle"
+        } : { display: "inline-block" },
+        lineHeight: "1.2",
+        textDecoration: "none"
+      };
+    }
+    function h(t) {
+      const n = Math.max(4, t?.iconSize ?? 20), i = t?.iconGap ?? 8, g = t?.iconPosition !== "after";
+      return {
+        display: "block",
+        width: n + "px",
+        height: n + "px",
+        flexShrink: "0",
+        marginRight: g ? i + "px" : "0",
+        marginLeft: g ? "0" : i + "px"
+      };
+    }
+    function $(t) {
+      const n = t.target;
+      n.style.display = "none";
+    }
+    function R(t) {
+      return {
+        margin: `${t?.margin?.top ?? 0}px ${t?.margin?.right ?? 0}px ${t?.margin?.bottom ?? 4}px ${t?.margin?.left ?? 0}px`,
+        padding: `${t?.padding?.top ?? 0}px ${t?.padding?.right ?? 0}px ${t?.padding?.bottom ?? 0}px ${t?.padding?.left ?? 0}px`,
+        textAlign: t?.align || "left"
+      };
+    }
+    function W(t) {
+      return t?.fontFamily && m(t.fontFamily), {
+        color: t?.color || "#007bff",
+        fontSize: Math.max(6, t?.fontSize || 16) + "px",
+        fontWeight: t?.fontWeight || "normal",
+        fontFamily: t?.fontFamily || "Arial, sans-serif",
+        letterSpacing: `${t?.letterSpacing ?? 0}px`,
+        textDecoration: t?.textDecoration || "underline"
+      };
+    }
+    function D(t) {
+      return t?.fontFamily && m(t.fontFamily), {
+        margin: `${t?.margin?.top ?? 0}px ${t?.margin?.right ?? 0}px ${t?.margin?.bottom ?? 0}px ${t?.margin?.left ?? 0}px`,
+        padding: `${t?.padding?.top ?? 0}px ${t?.padding?.right ?? 0}px ${t?.padding?.bottom ?? 0}px ${t?.padding?.left ?? 16}px`,
+        fontSize: Math.max(6, t?.fontSize || 16) + "px",
+        fontFamily: t?.fontFamily || "Arial, sans-serif",
+        lineHeight: String(t?.lineHeight ?? 1.5),
+        letterSpacing: `${t?.letterSpacing ?? 0}px`,
+        color: t?.color || "#111111",
+        background: s(t)
+      };
+    }
+    function I(t) {
+      return {
+        margin: `${t?.margin?.top ?? 0}px ${t?.margin?.right ?? 0}px ${t?.margin?.bottom ?? 0}px ${t?.margin?.left ?? 0}px`,
+        padding: `${t?.padding?.top ?? 0}px ${t?.padding?.right ?? 0}px ${t?.padding?.bottom ?? 0}px ${t?.padding?.left ?? 0}px`,
+        textAlign: t?.align || "left"
+      };
+    }
+    function P(t) {
+      const n = t?.align || "left";
+      return {
+        width: (t?.width || 100) + "%",
+        height: (t?.height || 1) + "px",
+        background: s(t),
+        border: "none",
+        margin: n === "center" ? "0 auto" : n === "right" ? "0 0 0 auto" : "0"
+      };
+    }
+    function B(t) {
+      return {
+        width: "100%",
+        height: (t?.height || 16) + "px",
+        background: s(t)
+      };
+    }
+    function j(t) {
+      return t?.fontFamily && m(t.fontFamily), {
+        margin: `${t?.margin?.top ?? 0}px ${t?.margin?.right ?? 0}px ${t?.margin?.bottom ?? 0}px ${t?.margin?.left ?? 0}px`,
+        padding: `${t?.padding?.top ?? 0}px ${t?.padding?.right ?? 0}px ${t?.padding?.bottom ?? 0}px ${t?.padding?.left ?? 0}px`,
+        textAlign: t?.align || "left",
+        lineHeight: "0",
+        background: s(t)
+      };
+    }
+    function E(t, n, i) {
+      t?.fontFamily && m(t.fontFamily);
+      const g = t?.mobileStack === !0, d = t?.spacing ?? 8, f = n === 0, p = n === i - 1;
+      return {
+        display: "inline-block",
+        marginLeft: f ? "0px" : `${d / 2}px`,
+        marginRight: p ? "0px" : `${d / 2}px`,
+        fontSize: Math.max(6, t?.fontSize ?? 14) + "px",
+        lineHeight: String(t?.lineHeight ?? 1.4),
+        letterSpacing: (t?.letterSpacing ?? 0) + "px",
+        color: t?.color || "#111111",
+        fontWeight: t?.fontWeight || "normal",
+        fontFamily: t?.fontFamily ? `'${t.fontFamily}', Arial, sans-serif` : "Arial, sans-serif",
+        fontStyle: t?.fontStyle || "normal",
+        textTransform: t?.textTransform || "none",
+        textDecoration: t?.textDecoration || "none",
+        whiteSpace: g ? "normal" : "nowrap",
+        cursor: "default"
+      };
+    }
+    function N(t) {
+      return {
+        margin: `${t?.margin?.top ?? 0}px ${t?.margin?.right ?? 0}px ${t?.margin?.bottom ?? 0}px ${t?.margin?.left ?? 0}px`,
+        padding: `${t?.padding?.top ?? 0}px ${t?.padding?.right ?? 0}px ${t?.padding?.bottom ?? 0}px ${t?.padding?.left ?? 0}px`,
+        textAlign: t?.align || "left",
+        display: "flex",
+        flexWrap: "wrap",
+        gap: (t?.spacing ?? 8) + "px",
+        justifyContent: t?.align === "center" ? "center" : t?.align === "right" ? "flex-end" : "flex-start"
+      };
+    }
+    return (t, n) => l.value === "heading" ? (o(), J(G(e.comp.props?.level || "h2"), {
+      key: 0,
+      style: a(k(e.comp.props)),
+      class: "truncate",
+      innerHTML: u(e.comp.props?.content) || "Heading"
+    }, null, 8, ["style", "innerHTML"])) : l.value === "paragraph" ? (o(), r("p", {
+      key: 1,
+      style: a([w(e.comp.props), {
+        display: "-webkit-box",
+        "-webkit-line-clamp": "2",
+        "-webkit-box-orient": "vertical"
+      }]),
+      class: "overflow-hidden",
+      innerHTML: u(e.comp.props?.content) || "Text"
+    }, null, 12, K)) : l.value === "image" ? (o(), r("div", {
+      key: 2,
+      style: a(F(e.comp.props))
+    }, [c("img", {
+      src: e.comp.props?.src,
+      alt: e.comp.props?.alt || "",
+      style: a(z(e.comp.props))
+    }, null, 12, Q)], 4)) : l.value === "video" ? (o(), r("div", {
+      key: 3,
+      style: a(A(e.comp.props))
+    }, [c("div", { style: a(C(e.comp.props)) }, [e.comp.props?.coverImage ? (o(), r("img", {
+      key: 0,
+      src: e.comp.props.coverImage,
+      alt: e.comp.props?.alt || "Video",
+      style: a(H())
+    }, null, 12, U)) : (o(), r("div", {
+      key: 1,
+      style: a(T())
+    }, [(o(), r("svg", X, [...n[0] || (n[0] = [c("path", {
+      "fill-rule": "evenodd",
+      d: "M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z",
+      "clip-rule": "evenodd"
+    }, null, -1)])]))], 4))], 4)], 4)) : l.value === "button" ? (o(), r("div", {
+      key: 4,
+      style: a(L(e.comp.props))
+    }, [c("span", {
+      style: a(M(e.comp.props)),
+      class: "inline-block truncate"
+    }, [
+      e.comp.props?.icon && e.comp.props?.iconPosition !== "after" ? (o(), r("img", {
+        key: 0,
+        src: e.comp.props.icon,
+        alt: e.comp.props?.iconAlt || "",
+        style: a(h(e.comp.props)),
+        onError: $
+      }, null, 44, Y)) : v("", !0),
+      V(" " + x(e.comp.props?.text || "Button") + " ", 1),
+      e.comp.props?.icon && e.comp.props?.iconPosition === "after" ? (o(), r("img", {
+        key: 1,
+        src: e.comp.props.icon,
+        alt: e.comp.props?.iconAlt || "",
+        style: a(h(e.comp.props)),
+        onError: $
+      }, null, 44, Z)) : v("", !0)
+    ], 4)], 4)) : l.value === "anchor" ? (o(), r("div", {
+      key: 5,
+      style: a(R(e.comp.props))
+    }, [c("span", {
+      style: a(W(e.comp.props)),
+      class: "truncate block"
+    }, x(e.comp.props?.text || "Link"), 5)], 4)) : l.value === "list" ? (o(), r("div", {
+      key: 6,
+      style: a(D(e.comp.props)),
+      innerHTML: u(e.comp.props?.content) || "<ul><li>Item</li></ul>"
+    }, null, 12, _)) : l.value === "divider" ? (o(), r("div", {
+      key: 7,
+      style: a(I(e.comp.props))
+    }, [c("hr", { style: a(P(e.comp.props)) }, null, 4)], 4)) : l.value === "spacer" ? (o(), r("div", tt, [c("div", { style: a(B(e.comp.props)) }, null, 4)])) : l.value === "menu" ? (o(), r("div", {
+      key: 9,
+      style: a(j(e.comp.props))
+    }, [e.comp.props?.items?.some((i) => i.enabled && i.label) ? (o(!0), r(b, { key: 1 }, S(e.comp.props.items.filter((i) => i.enabled && i.label), (i, g) => (o(), r("span", {
+      key: i._id || g,
+      style: a(E(e.comp.props, Number(g), e.comp.props.items.filter((d) => d.enabled && d.label).length))
+    }, x(i.label), 5))), 128)) : (o(), r("div", et, " Menu "))], 4)) : l.value === "socials" ? (o(), r("div", {
+      key: 10,
+      style: a(N(e.comp.props))
+    }, [e.comp.props?.platforms?.some((i) => i.enabled && i.link) ? (o(!0), r(b, { key: 0 }, S(e.comp.props.platforms.filter((i) => i.enabled && i.link), (i) => (o(), r("span", {
+      key: i.name,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }
+    }, [c("img", {
+      src: i.icon,
+      alt: i.name,
+      style: a({
+        width: (e.comp.props?.iconSize || 24) + "px",
+        height: (e.comp.props?.iconSize || 24) + "px",
+        display: "block"
+      })
+    }, null, 12, nt)]))), 128)) : (o(), r("span", it, "Socials"))], 4)) : (o(), r("div", ot, x(l.value), 1));
+  }
+}), lt = at;
+export {
+  lt as default
+};

package/dist/RowPreviewRow-0pEQLmS4.js

@@ -0,0 +1,80 @@
+import { Fragment as $, computed as w, createCommentVNode as p, createElementBlock as c, createVNode as k, defineAsyncComponent as v, defineComponent as y, normalizeStyle as b, openBlock as l, renderList as P, unref as S } from "vue";
+var R = {
+  key: 0,
+  class: "w-full border border-dashed border-(--md-border) rounded",
+  style: { "min-height": "10px" }
+}, C = /* @__PURE__ */ y({
+  __name: "RowPreviewRow",
+  props: {
+    row: {},
+    scale: {},
+    depth: {}
+  },
+  setup(n) {
+    const h = v(() => import("./index.js").then((e) => e.t)), m = n;
+    function g(e) {
+      const r = e?.backgroundGradient;
+      if (r?.useGradient === !0 && Array.isArray(r?.gradient?.colors) && r.gradient.colors.length >= 2) {
+        const { type: t, direction: a, colors: o } = r.gradient, s = o.map((d) => `${d.color} ${d.position}%`).join(", ");
+        return t === "radial" ? `radial-gradient(circle at center, ${s})` : `linear-gradient(${a}, ${s})`;
+      }
+      return e?.backgroundColor ?? "transparent";
+    }
+    const x = w(() => {
+      const e = m.row, r = {
+        display: "flex",
+        flexDirection: "row",
+        background: g(e),
+        padding: `${e.padding?.top ?? 0}px ${e.padding?.right ?? 0}px ${e.padding?.bottom ?? 0}px ${e.padding?.left ?? 0}px`,
+        alignItems: "stretch",
+        border: `${e.border?.width ?? 0}px ${e.border?.style ?? "solid"} ${e.border?.color ?? "transparent"}`,
+        borderRadius: `${e.border?.radius ?? 0}px`,
+        gap: `${e.gap ?? 0}px`,
+        overflow: "hidden"
+      };
+      return e.backgroundImage && (r.backgroundImage = `url(${e.backgroundImage})`, r.backgroundSize = e.backgroundSize ?? "cover", r.backgroundPosition = e.backgroundPosition ?? "center center"), r;
+    });
+    function f(e, r) {
+      const t = {
+        top: "flex-start",
+        middle: "center",
+        bottom: "flex-end"
+      }, a = e.width ?? 50, o = r?.columns?.length || 1, s = r?.gap ?? 0, d = o > 1 ? s * (o - 1) / o : 0, u = d > 0 ? `calc(${a}% - ${d}px)` : `${a}%`, i = {
+        flex: `0 0 ${u}`,
+        width: u,
+        maxWidth: u,
+        boxSizing: "border-box",
+        background: g(e),
+        padding: `${e.padding?.top ?? 10}px ${e.padding?.right ?? 10}px ${e.padding?.bottom ?? 10}px ${e.padding?.left ?? 10}px`,
+        border: `${e.border?.width ?? 0}px ${e.border?.style ?? "solid"} ${e.border?.color ?? "transparent"}`,
+        borderRadius: `${e.border?.radius ?? 0}px`,
+        overflow: "hidden",
+        minWidth: "0",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: t[e.verticalAlign] ?? "flex-start"
+      };
+      return e.backgroundImage && (i.backgroundImage = `url(${e.backgroundImage})`, i.backgroundSize = e.backgroundSize ?? "cover", i.backgroundPosition = e.backgroundPosition ?? "center center", i.minHeight = "14px"), i;
+    }
+    return (e, r) => (n.depth ?? 0) < 5 ? (l(), c("div", {
+      key: 0,
+      style: b(x.value),
+      class: "w-full"
+    }, [(l(!0), c($, null, P(n.row.columns ?? [], (t) => (l(), c("div", {
+      key: t.id,
+      style: b(f(t, n.row)),
+      class: "overflow-hidden shrink-0"
+    }, [k(S(h), {
+      children: t.children ?? t.components ?? [],
+      scale: n.scale,
+      depth: (n.depth ?? 0) + 1
+    }, null, 8, [
+      "children",
+      "scale",
+      "depth"
+    ]), (t.children ?? t.components ?? []).length === 0 ? (l(), c("div", R)) : p("", !0)], 4))), 128))], 4)) : p("", !0);
+  }
+}), z = C;
+export {
+  z as default
+};

package/dist/RowPreviewRow-Eum1wh1W.js

@@ -0,0 +1,80 @@
+import { C as w, L as c, T as $, f as k, h as v, mt as y, v as p, vt as b, w as P, y as l, z as S } from "./vue.runtime.esm-bundler-CsdyQceJ.js";
+var C = {
+  key: 0,
+  class: "w-full border border-dashed border-(--md-border) rounded",
+  style: { "min-height": "10px" }
+}, R = /* @__PURE__ */ $({
+  __name: "RowPreviewRow",
+  props: {
+    row: {},
+    scale: {},
+    depth: {}
+  },
+  setup(n) {
+    const h = P(() => import("./element-Dq6bmt2l.js").then((e) => e.o)), m = n;
+    function g(e) {
+      const r = e?.backgroundGradient;
+      if (r?.useGradient === !0 && Array.isArray(r?.gradient?.colors) && r.gradient.colors.length >= 2) {
+        const { type: t, direction: i, colors: o } = r.gradient, s = o.map((d) => `${d.color} ${d.position}%`).join(", ");
+        return t === "radial" ? `radial-gradient(circle at center, ${s})` : `linear-gradient(${i}, ${s})`;
+      }
+      return e?.backgroundColor ?? "transparent";
+    }
+    const x = v(() => {
+      const e = m.row, r = {
+        display: "flex",
+        flexDirection: "row",
+        background: g(e),
+        padding: `${e.padding?.top ?? 0}px ${e.padding?.right ?? 0}px ${e.padding?.bottom ?? 0}px ${e.padding?.left ?? 0}px`,
+        alignItems: "stretch",
+        border: `${e.border?.width ?? 0}px ${e.border?.style ?? "solid"} ${e.border?.color ?? "transparent"}`,
+        borderRadius: `${e.border?.radius ?? 0}px`,
+        gap: `${e.gap ?? 0}px`,
+        overflow: "hidden"
+      };
+      return e.backgroundImage && (r.backgroundImage = `url(${e.backgroundImage})`, r.backgroundSize = e.backgroundSize ?? "cover", r.backgroundPosition = e.backgroundPosition ?? "center center"), r;
+    });
+    function f(e, r) {
+      const t = {
+        top: "flex-start",
+        middle: "center",
+        bottom: "flex-end"
+      }, i = e.width ?? 50, o = r?.columns?.length || 1, s = r?.gap ?? 0, d = o > 1 ? s * (o - 1) / o : 0, u = d > 0 ? `calc(${i}% - ${d}px)` : `${i}%`, a = {
+        flex: `0 0 ${u}`,
+        width: u,
+        maxWidth: u,
+        boxSizing: "border-box",
+        background: g(e),
+        padding: `${e.padding?.top ?? 10}px ${e.padding?.right ?? 10}px ${e.padding?.bottom ?? 10}px ${e.padding?.left ?? 10}px`,
+        border: `${e.border?.width ?? 0}px ${e.border?.style ?? "solid"} ${e.border?.color ?? "transparent"}`,
+        borderRadius: `${e.border?.radius ?? 0}px`,
+        overflow: "hidden",
+        minWidth: "0",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: t[e.verticalAlign] ?? "flex-start"
+      };
+      return e.backgroundImage && (a.backgroundImage = `url(${e.backgroundImage})`, a.backgroundSize = e.backgroundSize ?? "cover", a.backgroundPosition = e.backgroundPosition ?? "center center", a.minHeight = "14px"), a;
+    }
+    return (e, r) => (n.depth ?? 0) < 5 ? (c(), l("div", {
+      key: 0,
+      style: b(x.value),
+      class: "w-full"
+    }, [(c(!0), l(k, null, S(n.row.columns ?? [], (t) => (c(), l("div", {
+      key: t.id,
+      style: b(f(t, n.row)),
+      class: "overflow-hidden shrink-0"
+    }, [w(y(h), {
+      children: t.children ?? t.components ?? [],
+      scale: n.scale,
+      depth: (n.depth ?? 0) + 1
+    }, null, 8, [
+      "children",
+      "scale",
+      "depth"
+    ]), (t.children ?? t.components ?? []).length === 0 ? (c(), l("div", C)) : p("", !0)], 4))), 128))], 4)) : p("", !0);
+  }
+}), I = R;
+export {
+  I as default
+};