@brunoalz/smartgesti-site-editor 0.2.2 → 1.1.0

package/dist/engine/render/renderers/sections/HeroRenderer.js

@@ -1,155 +1,148 @@
-import { jsxs as n, Fragment as et, jsx as e } from "react/jsx-runtime";
-import { PLACEHOLDER_IMAGE_URL as w } from "../../../presets/heroVariations.js";
-import { gridPresetMap as tt } from "../../../shared/imageGrid/presets.js";
-import { mergeTypographyWithDefaults as P, heroTitleDefaults as rt, heroSubtitleDefaults as ot, heroDescriptionDefaults as it } from "../../../shared/typography/defaults.js";
-import { generateTypographyStyles as V } from "../../../shared/typography/cssGenerator.js";
-const I = {
-  none: "none",
-  sm: "0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)",
-  md: "0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06)",
-  lg: "0 10px 25px rgba(0,0,0,0.15), 0 5px 10px rgba(0,0,0,0.05)",
-  xl: "0 25px 50px rgba(0,0,0,0.25)"
-};
-function gt(i) {
+import { jsxs as a, Fragment as ot, jsx as e } from "react/jsx-runtime";
+import { PLACEHOLDER_IMAGE_URL as v, CAROUSEL_PLACEHOLDER_IMAGES as it } from "../../../presets/heroVariations.js";
+import { imageShadowMap as ce } from "../../../shared/shadowConstants.js";
+import { blockGapConfig as ge, contentPositionMap as me } from "../../../shared/layoutConstants.js";
+import { generateCarouselCSS as at } from "../../../shared/carouselAnimation.js";
+import { mergeTypographyWithDefaults as F, heroTitleDefaults as st, heroSubtitleDefaults as nt, heroDescriptionDefaults as lt } from "../../../shared/typography/defaults.js";
+import { generateTypographyStyles as U } from "../../../shared/typography/cssGenerator.js";
+import { gridPresetMap as dt } from "../../../shared/imageGrid/presets.js";
+function vt(i) {
   const {
     variation: o,
-    variant: s = "centered",
+    variant: n = "centered",
     title: W,
-    subtitle: A,
-    description: L,
-    primaryButton: k,
-    secondaryButton: N,
-    image: ae,
-    badge: O,
-    align: g = "center",
-    contentPosition: ne = "center",
-    contentSpacing: se = "default",
-    blockGap: le = "default",
-    minHeight: de = "80vh",
-    overlay: ce,
-    overlayColor: u,
-    background: y,
+    subtitle: Z,
+    description: q,
+    primaryButton: B,
+    secondaryButton: T,
+    image: pe,
+    badge: J,
+    align: p = "center",
+    contentPosition: Y = "center",
+    contentSpacing: he = "default",
+    blockGap: ue = "default",
+    minHeight: K = "80vh",
+    overlay: Q,
+    overlayColor: h,
+    background: _,
     // Typography colors (legacy)
-    titleColor: ge,
-    subtitleColor: me,
-    descriptionColor: pe,
+    titleColor: fe,
+    subtitleColor: ye,
+    descriptionColor: be,
     // Typography config (novo sistema)
-    titleTypography: he,
-    subtitleTypography: fe,
-    descriptionTypography: ue,
+    titleTypography: xe,
+    subtitleTypography: ve,
+    descriptionTypography: _e,
     // Badge styling
-    badgeColor: ye,
-    badgeTextColor: xe,
+    badgeColor: Ce,
+    badgeTextColor: Se,
     // Layout
-    contentMaxWidth: F = "800px",
+    contentMaxWidth: X = "800px",
     paddingY: l,
     // Image styling
-    imageRadius: H = 16,
-    imageShadow: Z = "lg",
-    imagePosition: q = "right",
+    imageRadius: ee = 16,
+    imageShadow: Ie = "lg",
+    imagePosition: te = "right",
     // Button styling
-    buttonSize: be = "md",
-    primaryButtonVariant: ve = "solid",
-    primaryButtonColor: _e,
-    primaryButtonTextColor: Ce,
-    primaryButtonRadius: Se = 8,
-    secondaryButtonVariant: we = "outline",
-    secondaryButtonColor: Ie,
-    secondaryButtonTextColor: We,
-    secondaryButtonRadius: ke = 8,
+    buttonSize: ke = "md",
+    primaryButtonVariant: Ne = "solid",
+    primaryButtonColor: we,
+    primaryButtonTextColor: ze,
+    primaryButtonRadius: We = 8,
+    secondaryButtonVariant: Be = "outline",
+    secondaryButtonColor: Te,
+    secondaryButtonTextColor: $e,
+    secondaryButtonRadius: Me = 8,
     // Decorative
-    showWave: Ne,
-    waveColor: J = "rgba(255,255,255,0.1)",
+    showWave: je,
+    waveColor: re = "rgba(255,255,255,0.1)",
     // Image Grid
-    imageGridEnabled: ze,
-    imageGridPreset: Me = "four-equal",
-    imageGridImages: x = [],
-    imageGridGap: je = 8
-  } = i.props, m = ae || w, z = o === "hero-split" || s === "split", M = o === "hero-parallax", j = o === "hero-overlay", U = o === "hero-gradient", Te = o === "hero-minimal", T = o === "hero-card", Y = (s === "image-bg" || j || M || T) && m, p = Y && ce, Be = x && x.length > 0 && x.some((t) => t?.src), d = ze && Be, h = [
+    imageGridEnabled: Ge,
+    imageGridPreset: Re = "four-equal",
+    imageGridImages: C = [],
+    imageGridGap: Ee = 8,
+    // Carousel
+    carouselImages: $,
+    carouselInterval: De = 5,
+    carouselTransition: ct = "crossfade"
+  } = i.props, u = pe || v, M = o === "hero-split" || n === "split", j = o === "hero-parallax", G = o === "hero-overlay", oe = o === "hero-gradient", Pe = o === "hero-minimal", R = o === "hero-card", S = o === "hero-carousel", ie = (n === "image-bg" || G || j || R || S) && u, f = ie && Q, Ae = C && C.length > 0 && C.some((t) => t?.src), d = Ge && Ae, c = [
     "sg-hero",
     o && `sg-hero--${o.replace("hero-", "")}`,
-    z && "sg-hero--split",
-    M && "sg-hero--parallax",
-    j && "sg-hero--overlay",
-    U && "sg-hero--gradient",
-    Te && "sg-hero--minimal",
-    T && "sg-hero--card",
+    M && "sg-hero--split",
+    j && "sg-hero--parallax",
+    G && "sg-hero--overlay",
+    oe && "sg-hero--gradient",
+    Pe && "sg-hero--minimal",
+    R && "sg-hero--card",
+    S && "sg-hero--carousel",
     d && "sg-hero--with-grid"
-  ].filter(Boolean).join(" "), $e = {
-    left: "flex-start",
-    center: "center",
-    right: "flex-end"
-  }, f = {
-    minHeight: de,
+  ].filter(Boolean).join(" "), y = {
+    minHeight: K,
     padding: l ? `${l} 2rem` : "6rem 2rem",
     display: "flex",
     alignItems: "center",
-    justifyContent: $e[ne] || "center",
+    justifyContent: me[Y] || "center",
     position: "relative",
     overflow: "hidden",
     // Background
-    ...y && { background: y },
-    ...Y && !z && {
-      backgroundImage: `url(${m})`,
+    ..._ && { background: _ },
+    ...ie && !M && {
+      backgroundImage: `url(${u})`,
       backgroundSize: "cover",
       backgroundPosition: "center"
     },
-    ...M && { backgroundAttachment: "fixed" }
-  }, B = p || U || j, Ge = B ? "#ffffff" : "var(--sg-text, #1f2937)", K = B ? "rgba(255,255,255,0.85)" : "var(--sg-muted-text, #6b7280)", Q = {
+    ...j && { backgroundAttachment: "fixed" }
+  }, E = f || oe || G || S, Le = E ? "#ffffff" : "var(--sg-text, #1f2937)", ae = E ? "rgba(255,255,255,0.85)" : "var(--sg-muted-text, #6b7280)", se = {
     compact: { title: "0.5rem", subtitle: "0.5rem", description: "1rem", badge: "1rem", actions: "0.25rem" },
     default: { title: "1rem", subtitle: "1rem", description: "2rem", badge: "1.5rem", actions: "0.5rem" },
     spacious: { title: "2rem", subtitle: "2rem", description: "3rem", badge: "2.5rem", actions: "1.5rem" }
-  }, c = Q[se] || Q.default, X = {
-    default: { justify: "center", blockMaxWidth: "45%", containerMaxWidth: "1200px", gap: "4rem" },
-    wide: { justify: "space-between", blockMaxWidth: "45%", containerMaxWidth: "1400px", gap: "2rem" },
-    "x-wide": { justify: "space-between", blockMaxWidth: "43%", containerMaxWidth: "100%", gap: "2rem" }
-  }, b = X[le] || X.default, $ = b.justify, v = b.blockMaxWidth, G = b.containerMaxWidth, R = b.gap, Re = P(
-    he,
-    { ...rt, color: ge || void 0 }
-  ), De = P(
-    fe,
-    { ...ot, color: me || void 0 }
-  ), Ee = P(
-    ue,
-    { ...it, color: pe || void 0 }
-  ), Pe = V(Re, Ge), Ve = V(De, K), Ae = V(Ee, K), Le = {
-    ...Pe.style,
-    marginBottom: c.title
-  }, Oe = {
-    ...Ve.style,
-    marginBottom: c.subtitle
-  }, Fe = {
-    ...Ae.style,
+  }, g = se[he] || se.default, I = ge[ue] || ge.default, D = I.justify, k = I.blockMaxWidth, P = I.containerMaxWidth, A = I.gap, Ve = F(
+    xe,
+    { ...st, color: fe || void 0 }
+  ), Oe = F(
+    ve,
+    { ...nt, color: ye || void 0 }
+  ), He = F(
+    _e,
+    { ...lt, color: be || void 0 }
+  ), Fe = U(Ve, Le), Ue = U(Oe, ae), Ze = U(He, ae), qe = {
+    ...Fe.style,
+    marginBottom: g.title
+  }, Je = {
+    ...Ue.style,
+    marginBottom: g.subtitle
+  }, Ye = {
+    ...Ze.style,
     maxWidth: "600px",
-    margin: g === "center" ? `0 auto ${c.description}` : `0 0 ${c.description}`
-  }, He = {
+    margin: p === "center" ? `0 auto ${g.description}` : `0 0 ${g.description}`
+  }, Ke = {
     display: "inline-block",
     padding: "0.5rem 1rem",
     borderRadius: "9999px",
     fontSize: "0.875rem",
     fontWeight: 600,
-    marginBottom: c.badge,
-    backgroundColor: ye || "var(--sg-primary, #3b82f6)",
-    color: xe || "#ffffff"
-  }, ee = {
+    marginBottom: g.badge,
+    backgroundColor: Ce || "var(--sg-primary, #3b82f6)",
+    color: Se || "#ffffff"
+  }, ne = {
     sm: { padding: "0.5rem 1rem", fontSize: "0.875rem" },
     md: { padding: "0.75rem 1.5rem", fontSize: "1rem" },
     lg: { padding: "1rem 2rem", fontSize: "1.125rem" }
-  }, _ = ee[be] || ee.md, Ze = () => {
+  }, N = ne[ke] || ne.md, Qe = () => {
     const t = {
       display: "inline-flex",
       alignItems: "center",
       justifyContent: "center",
       gap: "0.5rem",
-      padding: _.padding,
-      fontSize: _.fontSize,
+      padding: N.padding,
+      fontSize: N.fontSize,
       fontWeight: 600,
-      borderRadius: `${Se}px`,
+      borderRadius: `${We}px`,
       textDecoration: "none",
       transition: "all 0.2s ease",
       cursor: "pointer"
-    }, r = _e || "var(--sg-primary, #3b82f6)", a = Ce || "#ffffff";
-    switch (ve) {
+    }, r = we || "var(--sg-primary, #3b82f6)", s = ze || "#ffffff";
+    switch (Ne) {
       case "outline":
         return {
           ...t,
@@ -169,53 +162,53 @@ function gt(i) {
           ...t,
           backgroundColor: r,
           border: `2px solid ${r}`,
-          color: a
+          color: s
         };
     }
-  }, qe = () => {
+  }, Xe = () => {
     const t = {
       display: "inline-flex",
       alignItems: "center",
       justifyContent: "center",
       gap: "0.5rem",
-      padding: _.padding,
-      fontSize: _.fontSize,
+      padding: N.padding,
+      fontSize: N.fontSize,
       fontWeight: 600,
-      borderRadius: `${ke}px`,
+      borderRadius: `${Me}px`,
       textDecoration: "none",
       transition: "all 0.2s ease",
       cursor: "pointer"
-    }, r = Ie || (B ? "#ffffff" : "var(--sg-primary, #3b82f6)"), a = We || r;
-    switch (we) {
+    }, r = Te || (E ? "#ffffff" : "var(--sg-primary, #3b82f6)"), s = $e || r;
+    switch (Be) {
       case "solid":
         return {
           ...t,
           backgroundColor: r,
           border: `2px solid ${r}`,
-          color: a === r ? "#ffffff" : a
+          color: s === r ? "#ffffff" : s
         };
       case "ghost":
         return {
           ...t,
           backgroundColor: "transparent",
           border: "none",
-          color: a
+          color: s
         };
       default:
         return {
           ...t,
           backgroundColor: "transparent",
           border: `2px solid ${r}`,
-          color: a
+          color: s
         };
     }
-  }, C = {
-    maxWidth: F,
+  }, b = {
+    maxWidth: X,
     width: "100%",
-    textAlign: g,
+    textAlign: p,
     position: "relative",
     zIndex: 2
-  }, te = Ne ? /* @__PURE__ */ e(
+  }, le = je ? /* @__PURE__ */ e(
     "div",
     {
       style: {
@@ -227,7 +220,7 @@ function gt(i) {
         overflow: "hidden",
         zIndex: 1
       },
-      children: /* @__PURE__ */ n(
+      children: /* @__PURE__ */ a(
         "svg",
         {
           viewBox: "0 0 1200 120",
@@ -243,7 +236,7 @@ function gt(i) {
               "path",
               {
                 d: "M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z",
-                fill: J,
+                fill: re,
                 opacity: "0.5"
               }
             ),
@@ -251,7 +244,7 @@ function gt(i) {
               "path",
               {
                 d: "M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z",
-                fill: J,
+                fill: re,
                 opacity: "0.3"
               }
             )
@@ -259,12 +252,14 @@ function gt(i) {
         }
       )
     }
-  ) : null, S = /* @__PURE__ */ n(et, { children: [
-    O && /* @__PURE__ */ e("span", { style: He, children: O }),
-    W && /* @__PURE__ */ e("h1", { className: "sg-hero__title", style: Le, children: W }),
-    A && /* @__PURE__ */ e("h2", { className: "sg-hero__subtitle", style: Oe, children: A }),
-    L && /* @__PURE__ */ e("p", { className: "sg-hero__description", style: Fe, children: L }),
-    /* @__PURE__ */ n(
+  ) : null, x = /* @__PURE__ */ a(ot, { children: [
+    J && /* @__PURE__ */ e("span", { "data-block-group": "Badge", style: Ke, children: J }),
+    /* @__PURE__ */ a("div", { "data-block-group": "Conteúdo", children: [
+      W && /* @__PURE__ */ e("h1", { className: "sg-hero__title", style: qe, children: W }),
+      Z && /* @__PURE__ */ e("h2", { className: "sg-hero__subtitle", style: Je, children: Z }),
+      q && /* @__PURE__ */ e("p", { className: "sg-hero__description", style: Ye, children: q })
+    ] }),
+    /* @__PURE__ */ a(
       "div",
       {
         className: "sg-hero__actions",
@@ -272,146 +267,215 @@ function gt(i) {
           display: "flex",
           flexWrap: "wrap",
           gap: "1rem",
-          justifyContent: g === "center" ? "center" : "flex-start",
-          marginTop: c.actions
+          justifyContent: p === "center" ? "center" : "flex-start",
+          marginTop: g.actions
         },
         children: [
-          k && /* @__PURE__ */ e(
+          B && /* @__PURE__ */ e(
             "a",
             {
-              href: k.href || "#",
+              href: B.href || "#",
               className: "sg-hero__btn sg-hero__btn--primary",
-              style: Ze(),
-              children: k.text
+              "data-block-group": "Botão Primário",
+              style: Qe(),
+              children: B.text
             }
           ),
-          N && /* @__PURE__ */ e(
+          T && /* @__PURE__ */ e(
             "a",
             {
-              href: N.href || "#",
+              href: T.href || "#",
               className: "sg-hero__btn sg-hero__btn--secondary",
-              style: qe(),
-              children: N.text
+              "data-block-group": "Botão Secundário",
+              style: Xe(),
+              children: T.text
             }
           )
         ]
       }
     )
-  ] }), Je = {
+  ] }), et = {
     width: "100%",
     maxWidth: "500px",
     height: "auto",
-    borderRadius: `${H}px`,
-    boxShadow: I[Z] || I.lg,
+    borderRadius: `${ee}px`,
+    boxShadow: ce[Ie] || ce.lg,
     objectFit: "cover"
-  }, D = d ? /* @__PURE__ */ e(
+  }, L = d ? /* @__PURE__ */ e(
     "div",
     {
       className: "sg-hero__grid-wrapper",
+      "data-block-group": "Mídia",
       style: {
         position: "relative",
         zIndex: 3,
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
-        flex: "0 1 auto",
-        maxWidth: v
+        flex: "1 1 0%",
+        maxWidth: k
       },
-      children: ((t, r, a, Ue, Ye) => {
-        const re = tt[r], Ke = I[Ye] || I.lg;
+      children: ((t, r, s, w, m) => {
+        const z = dt[r];
         return /* @__PURE__ */ e(
           "div",
           {
             className: "sg-hero__image-grid",
             style: {
               display: "grid",
-              gridTemplate: re.gridTemplate,
-              gap: `${a}px`,
+              gridTemplate: z.gridTemplate,
+              gap: `${s}px`,
               width: "100%",
               maxWidth: "450px",
               aspectRatio: "1 / 1"
             },
-            children: re.positions.map((oe, E) => {
-              const ie = t[E], Qe = ie?.src || w;
+            children: z.positions.map((de, V) => {
+              const O = t[V], tt = O?.src || v, H = O?.scale ?? 1;
               return /* @__PURE__ */ e(
                 "div",
                 {
                   style: {
-                    gridColumn: oe.col,
-                    gridRow: oe.row,
+                    gridColumn: de.col,
+                    gridRow: de.row,
                     overflow: "hidden",
-                    borderRadius: `${Ue}px`
+                    borderRadius: `${w}px`,
+                    transform: H !== 1 ? `scale(${H})` : void 0,
+                    zIndex: H !== 1 ? 1 : void 0
                   },
                   children: /* @__PURE__ */ e(
                     "img",
                     {
-                      src: Qe,
-                      alt: ie?.alt || `Imagem ${E + 1}`,
+                      src: tt,
+                      alt: O?.alt || `Imagem ${V + 1}`,
                       style: {
                         width: "100%",
                         height: "100%",
-                        objectFit: "cover",
-                        boxShadow: Ke
+                        objectFit: "contain",
+                        display: "block"
                       },
-                      onError: (Xe) => {
-                        Xe.target.src = w;
+                      onError: (rt) => {
+                        rt.target.src = v;
                       }
                     }
                   )
                 },
-                E
+                V
               );
             })
           }
         );
       })(
-        x,
-        Me,
-        je,
-        H,
-        Z
+        C,
+        Re,
+        Ee,
+        ee
       )
     }
   ) : null;
-  if (z && m && !d) {
-    const t = q === "left", r = /* @__PURE__ */ e("div", { className: "sg-hero__split-image", style: { display: "flex", justifyContent: "center", flex: "0 1 auto", maxWidth: v }, children: /* @__PURE__ */ e(
+  if (S) {
+    const t = $ && $.length >= 2 ? $ : it, r = `sg-carousel-${i.id}`, s = at(
+      `#${r}`,
+      t.length,
+      De
+    );
+    return /* @__PURE__ */ a(
+      "section",
+      {
+        className: c,
+        style: {
+          minHeight: K,
+          padding: l ? `${l} 2rem` : "6rem 2rem",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: me[Y] || "center",
+          position: "relative",
+          overflow: "hidden",
+          background: "#000"
+        },
+        "data-variation": o || n,
+        "data-block-id": i.id,
+        children: [
+          /* @__PURE__ */ e("style", { dangerouslySetInnerHTML: { __html: s } }),
+          /* @__PURE__ */ a(
+            "div",
+            {
+              id: r,
+              style: { position: "absolute", inset: 0, zIndex: 0 },
+              children: [
+                t.map((w, m) => /* @__PURE__ */ e(
+                  "img",
+                  {
+                    src: w,
+                    alt: `Slide ${m + 1}`,
+                    className: "sg-carousel__img",
+                    style: m === 0 ? { opacity: 1 } : void 0,
+                    onError: (z) => {
+                      z.target.src = v;
+                    }
+                  },
+                  m
+                )),
+                /* @__PURE__ */ e("div", { className: "sg-carousel__dots", children: t.map((w, m) => /* @__PURE__ */ e("span", { className: "sg-carousel__dot" }, m)) })
+              ]
+            }
+          ),
+          Q && /* @__PURE__ */ e(
+            "div",
+            {
+              className: "sg-hero__overlay",
+              style: {
+                position: "absolute",
+                inset: 0,
+                background: h || "linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.7) 100%)",
+                zIndex: 1
+              }
+            }
+          ),
+          /* @__PURE__ */ e("div", { style: b, children: x })
+        ]
+      },
+      i.id
+    );
+  }
+  if (M && u && !d) {
+    const t = te === "left", r = /* @__PURE__ */ e("div", { className: "sg-hero__split-image", "data-block-group": "Mídia", style: { display: "flex", justifyContent: "center", flex: "0 1 auto", maxWidth: k }, children: /* @__PURE__ */ e(
       "img",
       {
-        src: m,
+        src: u,
         alt: W || "",
         className: "sg-hero__img",
-        style: Je,
-        onError: (a) => {
-          a.target.src = w;
+        style: et,
+        onError: (s) => {
+          s.target.src = v;
         }
       }
     ) });
     return /* @__PURE__ */ e(
       "section",
       {
-        className: h,
+        className: c,
         style: {
-          ...f,
+          ...y,
           backgroundImage: void 0,
-          background: y || "var(--sg-bg, #ffffff)"
+          background: _ || "var(--sg-bg, #ffffff)"
         },
-        "data-variation": o || s,
+        "data-variation": o || n,
         "data-block-id": i.id,
-        children: /* @__PURE__ */ n(
+        children: /* @__PURE__ */ a(
           "div",
           {
             className: "sg-hero__split-inner",
             style: {
               display: "flex",
-              justifyContent: $,
-              gap: R,
-              maxWidth: G,
+              justifyContent: D,
+              gap: A,
+              maxWidth: P,
               width: "100%",
               alignItems: "center"
             },
             children: [
               t && r,
-              /* @__PURE__ */ e("div", { className: "sg-hero__split-content", style: { ...C, flex: "0 1 auto", maxWidth: v }, children: S }),
+              /* @__PURE__ */ e("div", { className: "sg-hero__split-content", style: { ...b, flex: "0 1 auto", maxWidth: k }, children: x }),
               !t && r
             ]
           }
@@ -420,92 +484,92 @@ function gt(i) {
       i.id
     );
   }
-  if (T && m) {
+  if (R && u) {
     const t = /* @__PURE__ */ e(
       "div",
       {
         className: "sg-hero__card",
         style: {
-          ...C,
-          backgroundColor: y || "#ffffff",
+          ...b,
+          backgroundColor: _ || "#ffffff",
           padding: "2rem",
           borderRadius: "16px",
           boxShadow: "0 25px 50px rgba(0,0,0,0.25)",
           zIndex: 2,
-          maxWidth: d ? "500px" : F,
+          maxWidth: d ? "500px" : X,
           flex: "0 1 auto"
         },
-        children: S
+        children: x
       }
     );
-    return d ? /* @__PURE__ */ n(
+    return d ? /* @__PURE__ */ a(
       "section",
       {
-        className: h,
+        className: c,
         style: {
-          ...f,
+          ...y,
           justifyContent: "flex-start",
           padding: l ? `${l} 3rem` : "6rem 3rem"
         },
-        "data-variation": o || s,
+        "data-variation": o || n,
         "data-block-id": i.id,
         children: [
-          p && /* @__PURE__ */ e(
+          f && /* @__PURE__ */ e(
             "div",
             {
               className: "sg-hero__overlay",
               style: {
                 position: "absolute",
                 inset: 0,
-                background: u || "rgba(0,0,0,0.4)",
+                background: h || "rgba(0,0,0,0.4)",
                 zIndex: 1
               }
             }
           ),
-          /* @__PURE__ */ n(
+          /* @__PURE__ */ a(
             "div",
             {
               className: "sg-hero__card-grid-layout",
               style: {
                 display: "flex",
                 width: "100%",
-                maxWidth: G,
+                maxWidth: P,
                 alignItems: "center",
-                justifyContent: $,
+                justifyContent: D,
                 position: "relative",
                 zIndex: 2,
                 padding: "0 2rem",
-                gap: R
+                gap: A
               },
               children: [
                 t,
-                D
+                L
               ]
             }
           )
         ]
       },
       i.id
-    ) : /* @__PURE__ */ n(
+    ) : /* @__PURE__ */ a(
       "section",
       {
-        className: h,
+        className: c,
         style: {
-          ...f,
-          justifyContent: g === "center" ? "center" : g === "right" ? "flex-end" : "flex-start",
+          ...y,
+          justifyContent: p === "center" ? "center" : p === "right" ? "flex-end" : "flex-start",
           padding: l ? `${l} 3rem` : "6rem 3rem"
         },
-        "data-variation": o || s,
+        "data-variation": o || n,
         "data-block-id": i.id,
         children: [
-          p && /* @__PURE__ */ e(
+          f && /* @__PURE__ */ e(
             "div",
             {
               className: "sg-hero__overlay",
               style: {
                 position: "absolute",
                 inset: 0,
-                background: u || "rgba(0,0,0,0.4)",
+                background: h || "rgba(0,0,0,0.4)",
                 zIndex: 1
               }
             }
@@ -517,37 +581,37 @@ function gt(i) {
     );
   }
   if (d) {
-    const t = q === "left";
-    return /* @__PURE__ */ n(
+    const t = te === "left";
+    return /* @__PURE__ */ a(
       "section",
       {
-        className: h,
-        style: f,
-        "data-variation": o || s,
+        className: c,
+        style: y,
+        "data-variation": o || n,
         "data-block-id": i.id,
         children: [
-          p && /* @__PURE__ */ e(
+          f && /* @__PURE__ */ e(
             "div",
             {
               className: "sg-hero__overlay",
               style: {
                 position: "absolute",
                 inset: 0,
-                background: u || "linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 100%)",
+                background: h || "linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 100%)",
                 zIndex: 1
               }
             }
           ),
-          te,
-          /* @__PURE__ */ n(
+          le,
+          /* @__PURE__ */ a(
             "div",
             {
               className: "sg-hero__grid-layout",
               style: {
                 display: "flex",
-                justifyContent: $,
-                gap: R,
-                maxWidth: G,
+                justifyContent: D,
+                gap: A,
+                maxWidth: P,
                 width: "100%",
                 alignItems: "center",
                 position: "relative",
@@ -555,9 +619,9 @@ function gt(i) {
                 padding: "0 2rem"
               },
               children: [
-                t && D,
-                /* @__PURE__ */ e("div", { className: "sg-hero__content-side", style: { ...C, flex: "0 1 auto", maxWidth: v }, children: S }),
-                !t && D
+                t && L,
+                /* @__PURE__ */ e("div", { className: "sg-hero__content-side", style: { ...b, flex: "1 1 0%", maxWidth: k }, children: x }),
+                !t && L
               ]
             }
           )
@@ -566,34 +630,34 @@ function gt(i) {
       i.id
     );
   }
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ a(
     "section",
     {
-      className: h,
-      style: f,
-      "data-variation": o || s,
+      className: c,
+      style: y,
+      "data-variation": o || n,
       "data-block-id": i.id,
       children: [
-        p && /* @__PURE__ */ e(
+        f && /* @__PURE__ */ e(
           "div",
           {
             className: "sg-hero__overlay",
             style: {
               position: "absolute",
               inset: 0,
-              background: u || "linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 100%)",
+              background: h || "linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 100%)",
               zIndex: 1
             }
           }
         ),
-        te,
-        /* @__PURE__ */ e("div", { style: C, children: S })
+        le,
+        /* @__PURE__ */ e("div", { style: b, children: x })
       ]
     },
     i.id
   );
 }
 export {
-  gt as renderHero
+  vt as renderHero
 };
 //# sourceMappingURL=HeroRenderer.js.map