@maildeno/editor 0.4.2 → 0.4.4

package/CHANGELOG.md

@@ -1,5 +1,80 @@
 # Changelog
 
+## 0.4.4
+
+Packaging only. No API change, no behaviour change in the editor itself.
+The published package drops from 8.13 MB unpacked to 5.48 MB, 32.6% smaller.
+
+### Changed
+
+**React Email export formats with prettier's babel-ts parser** instead of
+the typescript parser. `prettier/plugins/typescript` is 900kB of source
+against babel's 318kB and was the largest single file in the package.
+Output is byte-identical on the TSX this package generates, verified
+across generics, JSX, inline style objects and mapped children. The
+typescript parser is the stricter of the two, which matters for arbitrary
+user code but not for TSX `react-email.ts` generated moments earlier.
+Saves 600kB.
+
+**Both build passes are minified.** They have to agree: the two passes
+share chunks by content hash, so identical output collapses to one file
+and differing output ships two. Minifying only the element pass made the
+package *larger* — 8.68 MB — because every prettier chunk was then
+carried twice, once minified and once not. Saves 1.92MB with both on.
+
+**`element-scoped-styles.css` is no longer emitted.** Nothing referenced
+it: not `src/`, not the framework guides, not the README, not the exports
+map. The shadow root reads those rules from the substituted string inside
+the chunk, and Vite only extracted the file because library mode always
+does. `dist/editor.css` is unaffected and `./style.css` still resolves.
+Saves 72kB.
+
+## 0.4.3
+
+### Fixed
+
+**Every component `<style scoped>` block was missing when installing from
+npm and using the `EmailEditor` Vue component.** The editor rendered
+unstyled panels — `HealthIndicator`, `DesktopOnlyNotice`, the text panel,
+and 29 other scoped blocks — while Tailwind, the fonts and the icons all
+applied normally. `init()` and the custom element were unaffected, and
+building against a local `dist/` folder never reproduced it.
+
+0.4.2 delivered those styles by prepending a self-executing snippet to the
+entry chunk:
+
+```js
+(function(){ /* … document.head.appendChild(style) … */ })();
+import { a, c, g, … } from "./index-DhFg3uKs.js";
+export { a as EmailEditor, … };
+```
+
+`package.json` declares `sideEffects` as covering CSS files only, which
+tells a consumer's bundler that every `.js` in the package is pure. Rollup
+had emitted `dist/index.js` as a thin facade holding nothing but that
+snippet and a set of re-exports — and a pure module whose exports can be
+reached directly is one a bundler may delete outright. So consumer builds
+dropped the file, the snippet went with it, and the CSS never ran.
+Verified against the published 0.4.2 tarball: zero of 32 scoped selectors
+survived a consumer build.
+
+Whether Rollup emits that facade is a chunking decision, which is why the
+same source built correctly in this repo and shipped broken. The styles
+are now substituted into a value `baseStyles.ts` returns, so
+`EmailEditor.vue` injects them on mount alongside Tailwind and the fonts.
+Reachable from the component, they cannot be dropped without dropping the
+component — the mechanism `shadowStyles.ts` has always used for the shadow
+root. Confirmed surviving even under `sideEffects: false`.
+
+Nothing changed in the public API, and no CSS import is needed.
+
+### Changed
+
+**A missing style substitution now fails the build instead of warning.**
+Both build passes error out if the placeholder cannot be found in any
+chunk. A warning in a build log was not enough to catch this before
+publishing.
+
 ## 0.4.2
 
 Docs only — no code changes. 0.4.1's `onSave` fix is confirmed working on the

package/dist/RowPreviewChildren-C_6CFAct.js

@@ -0,0 +1,4 @@
+import { _ as f } from "./index-Cud9IN-O.js";
+export {
+  f as default
+};

package/dist/RowPreviewChildren-y7meU9Pj.js

@@ -0,0 +1,4 @@
+import { G as f } from "./element-DyFj9kgl.js";
+export {
+  f as default
+};

package/dist/RowPreviewLegacyComponent-B1rwsYW_.js

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