@mission-studio/puck 1.0.19 → 1.0.21

package/dist/{chunk-723Z3YKC.mjs → chunk-MWW5LYLN.mjs}

@@ -12,160 +12,8 @@ import {
   hexToRgba
 } from "./chunk-C6V3YUPF.mjs";
 
-// components/page/Heading.tsx
-import { jsx } from "react/jsx-runtime";
-var sizeMap = {
-  xs: "0.875rem",
-  sm: "1rem",
-  md: "1.25rem",
-  lg: "1.5rem",
-  xl: "2rem",
-  "2xl": "2.5rem",
-  "3xl": "3rem",
-  "4xl": "4rem"
-};
-var weightMap = {
-  normal: 400,
-  medium: 500,
-  semibold: 600,
-  bold: 700,
-  extrabold: 800
-};
-var letterSpacingMap = {
-  tight: "-0.025em",
-  normal: "0",
-  wide: "0.05em"
-};
-var lineHeightMap = {
-  tight: "1.1",
-  normal: "1.4",
-  relaxed: "1.6"
-};
-function isThemeableValue(value) {
-  return typeof value === "object" && value !== null && "useTheme" in value;
-}
-function isEntryBoundValue(value) {
-  return typeof value === "object" && value !== null && "useEntry" in value;
-}
-function Heading({
-  text,
-  level = "h2",
-  size = "2xl",
-  weight = "bold",
-  color,
-  align = "left",
-  letterSpacing = "normal",
-  lineHeight = "tight",
-  id
-}) {
-  const { resolveColor: resolveColor2 } = useTheme();
-  const { getEntryValue } = useEntries();
-  const resolvedText = (() => {
-    if (!text) return "";
-    if (typeof text === "string") return text;
-    if (isEntryBoundValue(text)) {
-      if (text.useEntry) {
-        return String(getEntryValue(text.entryName, text.fieldKey) ?? "");
-      }
-      return text.value;
-    }
-    return "";
-  })();
-  const resolvedColor = (() => {
-    if (!color) return resolveColor2("foreground");
-    if (typeof color === "string") return { color, opacity: 100 };
-    if (isThemeableValue(color)) {
-      return color.useTheme ? resolveColor2(color.themeKey) : color.value;
-    }
-    if ("color" in color) return color;
-    return resolveColor2("foreground");
-  })();
-  const Tag = level;
-  const style = {
-    fontSize: sizeMap[size],
-    fontWeight: weightMap[weight],
-    color: hexToRgba(resolvedColor.color, resolvedColor.opacity),
-    textAlign: align,
-    letterSpacing: letterSpacingMap[letterSpacing],
-    lineHeight: lineHeightMap[lineHeight],
-    margin: 0
-  };
-  if (!resolvedText) return null;
-  return /* @__PURE__ */ jsx(Tag, { id, style, children: resolvedText });
-}
-
-// components/page/Paragraph.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var sizeMap2 = {
-  sm: "0.875rem",
-  base: "1rem",
-  lg: "1.125rem",
-  xl: "1.25rem"
-};
-var weightMap2 = {
-  normal: 400,
-  medium: 500,
-  semibold: 600
-};
-var lineHeightMap2 = {
-  tight: "1.4",
-  normal: "1.6",
-  relaxed: "1.75",
-  loose: "2"
-};
-function isThemeableValue2(value) {
-  return typeof value === "object" && value !== null && "useTheme" in value;
-}
-function isEntryBoundValue2(value) {
-  return typeof value === "object" && value !== null && "useEntry" in value;
-}
-function Paragraph({
-  text,
-  size = "base",
-  weight = "normal",
-  color,
-  align = "left",
-  lineHeight = "normal",
-  maxWidth,
-  id
-}) {
-  const { resolveColor: resolveColor2 } = useTheme();
-  const { getEntryValue } = useEntries();
-  const resolvedText = (() => {
-    if (!text) return "";
-    if (typeof text === "string") return text;
-    if (isEntryBoundValue2(text)) {
-      if (text.useEntry) {
-        return String(getEntryValue(text.entryName, text.fieldKey) ?? "");
-      }
-      return text.value;
-    }
-    return "";
-  })();
-  const resolvedColor = (() => {
-    if (!color) return resolveColor2("foreground");
-    if (typeof color === "string") return { color, opacity: 100 };
-    if (isThemeableValue2(color)) {
-      return color.useTheme ? resolveColor2(color.themeKey) : color.value;
-    }
-    if ("color" in color) return color;
-    return resolveColor2("foreground");
-  })();
-  const style = {
-    fontSize: sizeMap2[size],
-    fontWeight: weightMap2[weight],
-    color: hexToRgba(resolvedColor.color, resolvedColor.opacity),
-    textAlign: align,
-    lineHeight: lineHeightMap2[lineHeight],
-    maxWidth: maxWidth || void 0,
-    margin: 0
-  };
-  if (!resolvedText) return null;
-  return /* @__PURE__ */ jsx2("p", { id, style, children: resolvedText });
-}
-
 // components/page/Button.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 var sizeStyles = {
   sm: { padding: "8px 16px", fontSize: "0.875rem" },
   md: { padding: "12px 24px", fontSize: "1rem" },
@@ -179,10 +27,10 @@ var radiusMap = {
   lg: "16px",
   full: "9999px"
 };
-function isThemeableValue3(value) {
+function isThemeableValue(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
-function isEntryBoundValue3(value) {
+function isEntryBoundValue(value) {
   return typeof value === "object" && value !== null && "useEntry" in value;
 }
 function Button({
@@ -205,7 +53,7 @@ function Button({
   const resolvedText = (() => {
     if (!text) return "Button";
     if (typeof text === "string") return text;
-    if (isEntryBoundValue3(text)) {
+    if (isEntryBoundValue(text)) {
       if (text.useEntry) {
         return String(getEntryValue(text.entryName, text.fieldKey) ?? "Button");
       }
@@ -226,7 +74,7 @@ function Button({
   const resolvedColor = (() => {
     if (!color) return resolveColor2("primary");
     if (typeof color === "string") return { color, opacity: 100 };
-    if (isThemeableValue3(color)) {
+    if (isThemeableValue(color)) {
       return color.useTheme ? resolveColor2(color.themeKey) : color.value;
     }
     if ("color" in color) return color;
@@ -239,7 +87,7 @@ function Button({
     }
     if (typeof textColor === "string")
       return { color: textColor, opacity: 100 };
-    if (isThemeableValue3(textColor)) {
+    if (isThemeableValue(textColor)) {
       return textColor.useTheme ? resolveColor2(textColor.themeKey) : textColor.value;
     }
     if ("color" in textColor) return textColor;
@@ -286,9 +134,9 @@ function Button({
     display: "flex",
     justifyContent: align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center"
   };
-  const content = /* @__PURE__ */ jsx3("span", { style, children: resolvedText });
+  const content = /* @__PURE__ */ jsx("span", { style, children: resolvedText });
   if (href) {
-    return /* @__PURE__ */ jsx3("div", { style: wrapperStyle, children: /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsx("div", { style: wrapperStyle, children: /* @__PURE__ */ jsx(
       "a",
       {
         id,
@@ -301,11 +149,11 @@ function Button({
       }
     ) });
   }
-  return /* @__PURE__ */ jsx3("div", { style: wrapperStyle, children: /* @__PURE__ */ jsx3("button", { id, type: "button", style, onClick: handleClick, children: resolvedText }) });
+  return /* @__PURE__ */ jsx("div", { style: wrapperStyle, children: /* @__PURE__ */ jsx("button", { id, type: "button", style, onClick: handleClick, children: resolvedText }) });
 }
 
 // components/page/Image.tsx
-import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var widthMap = {
   auto: "auto",
   full: "100%",
@@ -336,10 +184,10 @@ var shadowMap = {
   lg: "0 10px 15px rgba(0,0,0,0.1)",
   xl: "0 20px 25px rgba(0,0,0,0.15)"
 };
-function isThemeableValue4(value) {
+function isThemeableValue2(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
-function isEntryBoundValue4(value) {
+function isEntryBoundValue2(value) {
   return typeof value === "object" && value !== null && "useEntry" in value;
 }
 function Image({
@@ -360,7 +208,7 @@ function Image({
   const resolvedSrc = (() => {
     if (!src) return "";
     if (typeof src === "string") return src;
-    if (isEntryBoundValue4(src)) {
+    if (isEntryBoundValue2(src)) {
       if (src.useEntry) {
         return String(getEntryValue(src.entryName, src.fieldKey) ?? "");
       }
@@ -371,7 +219,7 @@ function Image({
   const resolvedCaption = (() => {
     if (!caption) return "";
     if (typeof caption === "string") return caption;
-    if (isEntryBoundValue4(caption)) {
+    if (isEntryBoundValue2(caption)) {
       if (caption.useEntry) {
         return String(getEntryValue(caption.entryName, caption.fieldKey) ?? "");
       }
@@ -383,7 +231,7 @@ function Image({
     if (!captionColor) return resolveColor2("muted");
     if (typeof captionColor === "string")
       return { color: captionColor, opacity: 100 };
-    if (isThemeableValue4(captionColor)) {
+    if (isThemeableValue2(captionColor)) {
       return captionColor.useTheme ? resolveColor2(captionColor.themeKey) : captionColor.value;
     }
     if ("color" in captionColor) return captionColor;
@@ -411,7 +259,7 @@ function Image({
     maxWidth: widthMap[width]
   };
   if (!resolvedSrc) {
-    return /* @__PURE__ */ jsx4("div", { style: wrapperStyle, children: /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx2("div", { style: wrapperStyle, children: /* @__PURE__ */ jsx2(
       "div",
       {
         style: {
@@ -428,14 +276,14 @@ function Image({
     ) });
   }
   return /* @__PURE__ */ jsxs("figure", { id, style: { ...wrapperStyle, margin: 0 }, children: [
-    /* @__PURE__ */ jsx4("img", { src: resolvedSrc, alt, style: imageStyle, loading: "lazy" }),
-    resolvedCaption && /* @__PURE__ */ jsx4("figcaption", { style: captionStyle, children: resolvedCaption })
+    /* @__PURE__ */ jsx2("img", { src: resolvedSrc, alt, style: imageStyle, loading: "lazy" }),
+    resolvedCaption && /* @__PURE__ */ jsx2("figcaption", { style: captionStyle, children: resolvedCaption })
   ] });
 }
 
 // components/page/ImageCarousel.tsx
 import { useState } from "react";
-import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var aspectRatioMap2 = {
   "16:9": "16 / 9",
   "4:3": "4 / 3",
@@ -448,7 +296,7 @@ var radiusMap3 = {
   md: "8px",
   lg: "16px"
 };
-function isThemeableValue5(value) {
+function isThemeableValue3(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
 function ImageCarousel({
@@ -469,7 +317,7 @@ function ImageCarousel({
     if (!arrowColor) return { color: "#FFFFFF", opacity: 100 };
     if (typeof arrowColor === "string")
       return { color: arrowColor, opacity: 100 };
-    if (isThemeableValue5(arrowColor)) {
+    if (isThemeableValue3(arrowColor)) {
       return arrowColor.useTheme ? resolveColor2(arrowColor.themeKey) : arrowColor.value;
     }
     if ("color" in arrowColor) return arrowColor;
@@ -478,7 +326,7 @@ function ImageCarousel({
   const resolvedDotColor = (() => {
     if (!dotColor) return resolveColor2("primary");
     if (typeof dotColor === "string") return { color: dotColor, opacity: 100 };
-    if (isThemeableValue5(dotColor)) {
+    if (isThemeableValue3(dotColor)) {
       return dotColor.useTheme ? resolveColor2(dotColor.themeKey) : dotColor.value;
     }
     if ("color" in dotColor) return dotColor;
@@ -514,7 +362,7 @@ function ImageCarousel({
     });
   };
   if (images.length === 0) {
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx3(
       "div",
       {
         style: {
@@ -586,7 +434,7 @@ function ImageCarousel({
     backgroundColor: isActive ? hexToRgba(resolvedDotColor.color, resolvedDotColor.opacity) : "rgba(255,255,255,0.5)"
   });
   return /* @__PURE__ */ jsxs2("div", { id, style: containerStyle, children: [
-    /* @__PURE__ */ jsx5("div", { style: slideContainerStyle, children: images.map((image, index) => /* @__PURE__ */ jsx5("div", { style: slideStyle, children: /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx3("div", { style: slideContainerStyle, children: images.map((image, index) => /* @__PURE__ */ jsx3("div", { style: slideStyle, children: /* @__PURE__ */ jsx3(
       "img",
       {
         src: image.src,
@@ -596,7 +444,7 @@ function ImageCarousel({
       }
     ) }, index)) }),
     showArrows && images.length > 1 && /* @__PURE__ */ jsxs2(Fragment, { children: [
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx3(
         "button",
         {
           type: "button",
@@ -606,7 +454,7 @@ function ImageCarousel({
           children: "\u2039"
         }
       ),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx3(
         "button",
         {
           type: "button",
@@ -617,7 +465,7 @@ function ImageCarousel({
         }
       )
     ] }),
-    showDots && images.length > 1 && /* @__PURE__ */ jsx5("div", { style: dotsContainerStyle, children: images.map((_, index) => /* @__PURE__ */ jsx5(
+    showDots && images.length > 1 && /* @__PURE__ */ jsx3("div", { style: dotsContainerStyle, children: images.map((_, index) => /* @__PURE__ */ jsx3(
       "button",
       {
         type: "button",
@@ -631,7 +479,7 @@ function ImageCarousel({
 }
 
 // components/page/VideoEmbed.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var aspectRatioMap3 = {
   "16:9": "56.25%",
   // 9/16 * 100
@@ -652,7 +500,7 @@ var maxWidthMap = {
   xl: "1000px",
   full: "100%"
 };
-function isEntryBoundValue5(value) {
+function isEntryBoundValue3(value) {
   return typeof value === "object" && value !== null && "useEntry" in value;
 }
 function parseVideoUrl(url) {
@@ -689,7 +537,7 @@ function VideoEmbed({
   const resolvedUrl = (() => {
     if (!url) return "";
     if (typeof url === "string") return url;
-    if (isEntryBoundValue5(url)) {
+    if (isEntryBoundValue3(url)) {
       if (url.useEntry) {
         return String(getEntryValue(url.entryName, url.fieldKey) ?? "");
       }
@@ -698,7 +546,7 @@ function VideoEmbed({
     return "";
   })();
   if (!resolvedUrl) {
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx4(
       "div",
       {
         style: {
@@ -743,7 +591,7 @@ function VideoEmbed({
     height: "100%",
     border: "none"
   };
-  return /* @__PURE__ */ jsx6("div", { id, style: wrapperStyle, children: /* @__PURE__ */ jsx6("div", { style: containerStyle, children: /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx4("div", { id, style: wrapperStyle, children: /* @__PURE__ */ jsx4("div", { style: containerStyle, children: /* @__PURE__ */ jsx4(
     "iframe",
     {
       src: finalUrl,
@@ -756,8 +604,8 @@ function VideoEmbed({
 }
 
 // components/page/Icon.tsx
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
-var sizeMap3 = {
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var sizeMap = {
   sm: { size: "16px", strokeWidth: 2 },
   md: { size: "24px", strokeWidth: 2 },
   lg: { size: "32px", strokeWidth: 1.5 },
@@ -765,7 +613,7 @@ var sizeMap3 = {
   "2xl": { size: "64px", strokeWidth: 1.5 }
 };
 var icons = {
-  check: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsx7(
+  check: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsx5(
     "svg",
     {
       width: size,
@@ -776,7 +624,7 @@ var icons = {
       strokeWidth,
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx7("polyline", { points: "20 6 9 17 4 12" })
+      children: /* @__PURE__ */ jsx5("polyline", { points: "20 6 9 17 4 12" })
     }
   ),
   x: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsxs3(
@@ -791,12 +639,12 @@ var icons = {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx7("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-        /* @__PURE__ */ jsx7("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+        /* @__PURE__ */ jsx5("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ jsx5("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
       ]
     }
   ),
-  star: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsx7(
+  star: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsx5(
     "svg",
     {
       width: size,
@@ -807,10 +655,10 @@ var icons = {
       strokeWidth,
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx7("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" })
+      children: /* @__PURE__ */ jsx5("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" })
     }
   ),
-  heart: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsx7(
+  heart: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsx5(
     "svg",
     {
       width: size,
@@ -821,7 +669,7 @@ var icons = {
       strokeWidth,
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx7("path", { d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" })
+      children: /* @__PURE__ */ jsx5("path", { d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" })
     }
   ),
   arrowRight: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsxs3(
@@ -836,8 +684,8 @@ var icons = {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx7("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
-        /* @__PURE__ */ jsx7("polyline", { points: "12 5 19 12 12 19" })
+        /* @__PURE__ */ jsx5("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
+        /* @__PURE__ */ jsx5("polyline", { points: "12 5 19 12 12 19" })
       ]
     }
   ),
@@ -853,8 +701,8 @@ var icons = {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx7("line", { x1: "19", y1: "12", x2: "5", y2: "12" }),
-        /* @__PURE__ */ jsx7("polyline", { points: "12 19 5 12 12 5" })
+        /* @__PURE__ */ jsx5("line", { x1: "19", y1: "12", x2: "5", y2: "12" }),
+        /* @__PURE__ */ jsx5("polyline", { points: "12 19 5 12 12 5" })
       ]
     }
   ),
@@ -870,12 +718,12 @@ var icons = {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx7("path", { d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" }),
-        /* @__PURE__ */ jsx7("polyline", { points: "22,6 12,13 2,6" })
+        /* @__PURE__ */ jsx5("path", { d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" }),
+        /* @__PURE__ */ jsx5("polyline", { points: "22,6 12,13 2,6" })
       ]
     }
   ),
-  phone: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsx7(
+  phone: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsx5(
     "svg",
     {
       width: size,
@@ -886,7 +734,7 @@ var icons = {
       strokeWidth,
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx7("path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" })
+      children: /* @__PURE__ */ jsx5("path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" })
     }
   ),
   mapPin: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsxs3(
@@ -901,12 +749,12 @@ var icons = {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx7("path", { d: "M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" }),
-        /* @__PURE__ */ jsx7("circle", { cx: "12", cy: "10", r: "3" })
+        /* @__PURE__ */ jsx5("path", { d: "M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" }),
+        /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "10", r: "3" })
       ]
     }
   ),
-  zap: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsx7(
+  zap: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsx5(
     "svg",
     {
       width: size,
@@ -917,10 +765,10 @@ var icons = {
       strokeWidth,
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx7("polygon", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2" })
+      children: /* @__PURE__ */ jsx5("polygon", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2" })
     }
   ),
-  shield: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsx7(
+  shield: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsx5(
     "svg",
     {
       width: size,
@@ -931,7 +779,7 @@ var icons = {
       strokeWidth,
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx7("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" })
+      children: /* @__PURE__ */ jsx5("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" })
     }
   ),
   users: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsxs3(
@@ -946,15 +794,15 @@ var icons = {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx7("path", { d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
-        /* @__PURE__ */ jsx7("circle", { cx: "9", cy: "7", r: "4" }),
-        /* @__PURE__ */ jsx7("path", { d: "M23 21v-2a4 4 0 0 0-3-3.87" }),
-        /* @__PURE__ */ jsx7("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })
+        /* @__PURE__ */ jsx5("path", { d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
+        /* @__PURE__ */ jsx5("circle", { cx: "9", cy: "7", r: "4" }),
+        /* @__PURE__ */ jsx5("path", { d: "M23 21v-2a4 4 0 0 0-3-3.87" }),
+        /* @__PURE__ */ jsx5("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })
       ]
     }
   )
 };
-function isThemeableValue6(value) {
+function isThemeableValue4(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
 function Icon({
@@ -968,20 +816,20 @@ function Icon({
   const resolvedColor = (() => {
     if (!color) return resolveColor2("primary");
     if (typeof color === "string") return { color, opacity: 100 };
-    if (isThemeableValue6(color)) {
+    if (isThemeableValue4(color)) {
       return color.useTheme ? resolveColor2(color.themeKey) : color.value;
     }
     if ("color" in color) return color;
     return resolveColor2("primary");
   })();
   const IconComponent = icons[name.toLowerCase()] || icons.check;
-  const { size: iconSize, strokeWidth } = sizeMap3[size];
+  const { size: iconSize, strokeWidth } = sizeMap[size];
   const colorValue = hexToRgba(resolvedColor.color, resolvedColor.opacity);
   const wrapperStyle = {
     display: "flex",
     justifyContent: align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center"
   };
-  return /* @__PURE__ */ jsx7("div", { id, style: wrapperStyle, children: /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx5("div", { id, style: wrapperStyle, children: /* @__PURE__ */ jsx5(
     IconComponent,
     {
       size: iconSize,
@@ -993,14 +841,14 @@ function Icon({
 var availableIcons = Object.keys(icons);
 
 // components/page/Section.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
-function isThemeableValue7(value) {
+import { jsx as jsx6 } from "react/jsx-runtime";
+function isThemeableValue5(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
 function resolveBackgroundColor(bg, resolveColor2) {
   if (!bg) return void 0;
   if (typeof bg === "string") return bg;
-  if (isThemeableValue7(bg)) {
+  if (isThemeableValue5(bg)) {
     if (bg.useTheme) {
       const themeColor = resolveColor2(bg.themeKey);
       return hexToRgba(themeColor.color, themeColor.opacity);
@@ -1041,7 +889,7 @@ function Section({
 }) {
   const { resolveColor: resolveColor2 } = useTheme();
   const DropZone = puck?.renderDropZone;
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx6(
     "section",
     {
       id: anchorLink,
@@ -1056,13 +904,13 @@ function Section({
         boxShadow: getShadowCSS(shadow),
         borderRadius: `${borderRadius}px`
       },
-      children: /* @__PURE__ */ jsx8("div", { className: "mx-auto w-full", style: { maxWidth: contentMaxWidth }, children: DropZone && /* @__PURE__ */ jsx8(DropZone, { zone: "content" }) })
+      children: /* @__PURE__ */ jsx6("div", { className: "mx-auto w-full", style: { maxWidth: contentMaxWidth }, children: DropZone && /* @__PURE__ */ jsx6(DropZone, { zone: "content" }) })
     }
   );
 }
 
 // components/page/Container.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var maxWidthMap2 = {
   sm: "640px",
   md: "768px",
@@ -1078,7 +926,7 @@ var paddingMap = {
   lg: "32px",
   xl: "48px"
 };
-function isThemeableValue8(value) {
+function isThemeableValue6(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
 function Container({
@@ -1097,7 +945,7 @@ function Container({
     if (!backgroundColor) return null;
     if (typeof backgroundColor === "string")
       return { color: backgroundColor, opacity: 100 };
-    if (isThemeableValue8(backgroundColor)) {
+    if (isThemeableValue6(backgroundColor)) {
       return backgroundColor.useTheme ? resolveColor2(backgroundColor.themeKey) : backgroundColor.value;
     }
     if ("color" in backgroundColor) return backgroundColor;
@@ -1116,11 +964,11 @@ function Container({
     backgroundColor: resolvedBgColor ? hexToRgba(resolvedBgColor.color, resolvedBgColor.opacity) : void 0,
     width: "100%"
   };
-  return /* @__PURE__ */ jsx9("div", { id, style, children: DropZone && /* @__PURE__ */ jsx9(DropZone, { zone: "container-content" }) });
+  return /* @__PURE__ */ jsx7("div", { id, style, children: DropZone && /* @__PURE__ */ jsx7(DropZone, { zone: "container-content" }) });
 }
 
 // components/page/Columns.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var gapMap = {
   none: "0",
   sm: "16px",
@@ -1149,11 +997,11 @@ function Columns({
     gap: gapMap[gap],
     alignItems: alignMap[verticalAlign]
   };
-  return /* @__PURE__ */ jsx10("div", { id, style: containerStyle, children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ jsx10("div", { style: { minWidth: 0 }, children: DropZone && /* @__PURE__ */ jsx10(DropZone, { zone: `column-${index}` }) }, index)) });
+  return /* @__PURE__ */ jsx8("div", { id, style: containerStyle, children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ jsx8("div", { style: { minWidth: 0 }, children: DropZone && /* @__PURE__ */ jsx8(DropZone, { zone: `column-${index}` }) }, index)) });
 }
 
 // components/page/Card.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var borderWidthMap = {
   none: "0",
   thin: "1px",
@@ -1181,7 +1029,7 @@ var paddingMap2 = {
   lg: "32px",
   xl: "48px"
 };
-function isThemeableValue9(value) {
+function isThemeableValue7(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
 function Card({
@@ -1200,7 +1048,7 @@ function Card({
     if (!backgroundColor) return resolveColor2("background");
     if (typeof backgroundColor === "string")
       return { color: backgroundColor, opacity: 100 };
-    if (isThemeableValue9(backgroundColor)) {
+    if (isThemeableValue7(backgroundColor)) {
       return backgroundColor.useTheme ? resolveColor2(backgroundColor.themeKey) : backgroundColor.value;
     }
     if ("color" in backgroundColor) return backgroundColor;
@@ -1210,7 +1058,7 @@ function Card({
     if (!borderColor) return resolveColor2("muted");
     if (typeof borderColor === "string")
       return { color: borderColor, opacity: 100 };
-    if (isThemeableValue9(borderColor)) {
+    if (isThemeableValue7(borderColor)) {
       return borderColor.useTheme ? resolveColor2(borderColor.themeKey) : borderColor.value;
     }
     if ("color" in borderColor) return borderColor;
@@ -1223,11 +1071,11 @@ function Card({
     boxShadow: shadowMap2[shadow],
     padding: paddingMap2[padding]
   };
-  return /* @__PURE__ */ jsx11("div", { id, style, children: DropZone && /* @__PURE__ */ jsx11(DropZone, { zone: "card-content" }) });
+  return /* @__PURE__ */ jsx9("div", { id, style, children: DropZone && /* @__PURE__ */ jsx9(DropZone, { zone: "card-content" }) });
 }
 
 // components/page/Divider.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var thicknessMap = {
   thin: "1px",
   medium: "2px",
@@ -1245,7 +1093,7 @@ var spacingMap = {
   lg: "32px",
   xl: "48px"
 };
-function isThemeableValue10(value) {
+function isThemeableValue8(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
 function Divider({
@@ -1261,7 +1109,7 @@ function Divider({
   const resolvedColor = (() => {
     if (!color) return resolveColor2("muted");
     if (typeof color === "string") return { color, opacity: 100 };
-    if (isThemeableValue10(color)) {
+    if (isThemeableValue8(color)) {
       return color.useTheme ? resolveColor2(color.themeKey) : color.value;
     }
     if ("color" in color) return color;
@@ -1278,12 +1126,12 @@ function Divider({
     borderTop: `${thicknessMap[thickness]} ${lineStyle} ${hexToRgba(resolvedColor.color, resolvedColor.opacity)}`,
     margin: 0
   };
-  return /* @__PURE__ */ jsx12("div", { id, style: wrapperStyle, children: /* @__PURE__ */ jsx12("hr", { style: hrStyle }) });
+  return /* @__PURE__ */ jsx10("div", { id, style: wrapperStyle, children: /* @__PURE__ */ jsx10("hr", { style: hrStyle }) });
 }
 
 // components/page/Spacer.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
-var sizeMap4 = {
+import { jsx as jsx11 } from "react/jsx-runtime";
+var sizeMap2 = {
   xs: "8px",
   sm: "16px",
   md: "24px",
@@ -1294,36 +1142,36 @@ var sizeMap4 = {
 };
 function Spacer({ size = "md", id }) {
   const style = {
-    height: sizeMap4[size],
+    height: sizeMap2[size],
     width: "100%"
   };
-  return /* @__PURE__ */ jsx13("div", { id, style, "aria-hidden": "true" });
+  return /* @__PURE__ */ jsx11("div", { id, style, "aria-hidden": "true" });
 }
 
 // components/page/TextBlock.tsx
-import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
 var alignmentMap = {
   left: "text-left",
   center: "text-center",
   right: "text-right"
 };
-var sizeMap5 = {
+var sizeMap3 = {
   small: "text-2xl",
   "medium-small": "text-3xl",
   medium: "text-4xl",
   large: "text-5xl",
   xlarge: "text-6xl"
 };
-function isThemeableValue11(value) {
+function isThemeableValue9(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
-function isEntryBoundValue6(value) {
+function isEntryBoundValue4(value) {
   return typeof value === "object" && value !== null && "useEntry" in value;
 }
 function resolveColor(color, resolveThemeColor) {
   if (!color) return "#000000";
   if (typeof color === "string") return color;
-  if (isThemeableValue11(color)) {
+  if (isThemeableValue9(color)) {
     if (color.useTheme) {
       const themeColor = resolveThemeColor(color.themeKey);
       return hexToRgba(themeColor.color, themeColor.opacity);
@@ -1338,7 +1186,7 @@ function resolveColor(color, resolveThemeColor) {
 function resolveColorHex(color, resolveThemeColor) {
   if (!color) return "#000000";
   if (typeof color === "string") return color;
-  if (isThemeableValue11(color)) {
+  if (isThemeableValue9(color)) {
     if (color.useTheme) {
       return resolveThemeColor(color.themeKey).color;
     }
@@ -1367,7 +1215,7 @@ function TextBlock({
   const resolveText = (value) => {
     if (!value) return void 0;
     if (typeof value === "string") return value;
-    if (isEntryBoundValue6(value)) {
+    if (isEntryBoundValue4(value)) {
       if (value.useEntry) {
         const entryVal = getEntryValue(value.entryName, value.fieldKey);
         return entryVal != null ? String(entryVal) : void 0;
@@ -1393,16 +1241,16 @@ function TextBlock({
       id: anchorLink,
       className: cn("flex flex-col gap-4", alignmentMap[alignment]),
       children: [
-        resolvedTitle && /* @__PURE__ */ jsx14(
+        resolvedTitle && /* @__PURE__ */ jsx12(
           "h2",
           {
-            className: cn("font-bold", sizeMap5[textSize]),
+            className: cn("font-bold", sizeMap3[textSize]),
             style: gradientStyle,
             children: resolvedTitle
           }
         ),
-        resolvedSubtitle && /* @__PURE__ */ jsx14("p", { className: "text-xl", style: { color: subtitleColorValue }, children: resolvedSubtitle }),
-        resolvedBody && /* @__PURE__ */ jsx14(
+        resolvedSubtitle && /* @__PURE__ */ jsx12("p", { className: "text-xl", style: { color: subtitleColorValue }, children: resolvedSubtitle }),
+        resolvedBody && /* @__PURE__ */ jsx12(
           "div",
           {
             className: "prose max-w-none",
@@ -1416,7 +1264,7 @@ function TextBlock({
 }
 
 // components/page/CustomImage.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var alignmentMap2 = {
   left: "mr-auto",
   center: "mx-auto",
@@ -1430,9 +1278,9 @@ function CustomImage({
   fitContent = false
 }) {
   if (!image) {
-    return /* @__PURE__ */ jsx15("div", { className: "flex h-48 w-full items-center justify-center bg-gray-200 text-gray-400", children: "No image" });
+    return /* @__PURE__ */ jsx13("div", { className: "flex h-48 w-full items-center justify-center bg-gray-200 text-gray-400", children: "No image" });
   }
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx13(
     "img",
     {
       src: image,
@@ -1449,8 +1297,8 @@ function CustomImage({
 
 // components/page/FeaturesList.tsx
 import { icons as icons2 } from "lucide-react";
-import { jsx as jsx16, jsxs as jsxs5 } from "react/jsx-runtime";
-var sizeMap6 = {
+import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+var sizeMap4 = {
   small: { icon: 24, title: "text-base", desc: "text-sm" },
   medium: { icon: 32, title: "text-lg", desc: "text-base" },
   large: { icon: 48, title: "text-xl", desc: "text-lg" }
@@ -1462,12 +1310,12 @@ function FeaturesList({
   iconColor = "#000000",
   anchorLink
 }) {
-  const sizeConfig = sizeMap6[size];
+  const sizeConfig = sizeMap4[size];
   const getIcon = (iconName) => {
     const formatted = iconName.charAt(0).toUpperCase() + iconName.slice(1);
     return icons2[formatted] || null;
   };
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx14(
     "div",
     {
       id: anchorLink,
@@ -1487,7 +1335,7 @@ function FeaturesList({
               align === "right" && "flex-row-reverse"
             ),
             children: [
-              feature.image ? /* @__PURE__ */ jsx16(
+              feature.image ? /* @__PURE__ */ jsx14(
                 "img",
                 {
                   src: feature.image,
@@ -1495,7 +1343,7 @@ function FeaturesList({
                   className: "object-contain",
                   style: { width: sizeConfig.icon, height: sizeConfig.icon }
                 }
-              ) : IconComponent ? /* @__PURE__ */ jsx16(
+              ) : IconComponent ? /* @__PURE__ */ jsx14(
                 IconComponent,
                 {
                   size: sizeConfig.icon,
@@ -1504,8 +1352,8 @@ function FeaturesList({
                 }
               ) : null,
               /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-1", children: [
-                feature.title && /* @__PURE__ */ jsx16("h3", { className: cn("font-semibold", sizeConfig.title), children: feature.title }),
-                feature.description && /* @__PURE__ */ jsx16("p", { className: cn("text-gray-600", sizeConfig.desc), children: feature.description })
+                feature.title && /* @__PURE__ */ jsx14("h3", { className: cn("font-semibold", sizeConfig.title), children: feature.title }),
+                feature.description && /* @__PURE__ */ jsx14("p", { className: cn("text-gray-600", sizeConfig.desc), children: feature.description })
               ] })
             ]
           },
@@ -1518,8 +1366,8 @@ function FeaturesList({
 
 // components/page/FeatureGrid.tsx
 import { icons as icons3 } from "lucide-react";
-import { jsx as jsx17, jsxs as jsxs6 } from "react/jsx-runtime";
-var sizeMap7 = {
+import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
+var sizeMap5 = {
   small: { icon: 24, title: "text-base", desc: "text-sm" },
   medium: { icon: 32, title: "text-lg", desc: "text-base" },
   large: { icon: 48, title: "text-xl", desc: "text-lg" }
@@ -1535,7 +1383,7 @@ function FeatureGrid({
   textColor = "#000000",
   anchorLink
 }) {
-  const sizeConfig = sizeMap7[size];
+  const sizeConfig = sizeMap5[size];
   const getIcon = (iconName) => {
     const formatted = iconName.charAt(0).toUpperCase() + iconName.slice(1);
     return icons3[formatted] || null;
@@ -1555,12 +1403,12 @@ function FeatureGrid({
           align === "right" && "text-right"
         ),
         children: [
-          heading && /* @__PURE__ */ jsx17("h2", { className: "text-3xl font-bold", style: { color: textColor }, children: heading }),
-          description && /* @__PURE__ */ jsx17("p", { className: "text-gray-600", children: description })
+          heading && /* @__PURE__ */ jsx15("h2", { className: "text-3xl font-bold", style: { color: textColor }, children: heading }),
+          description && /* @__PURE__ */ jsx15("p", { className: "text-gray-600", children: description })
         ]
       }
     ),
-    /* @__PURE__ */ jsx17("div", { className: cn("grid gap-6", columnClass[columns]), children: features.map((feature, index) => {
+    /* @__PURE__ */ jsx15("div", { className: cn("grid gap-6", columnClass[columns]), children: features.map((feature, index) => {
       const IconComponent = feature.icon ? getIcon(feature.icon) : null;
       return /* @__PURE__ */ jsxs6(
         "div",
@@ -1570,7 +1418,7 @@ function FeatureGrid({
             align === "center" && "items-center text-center"
           ),
           children: [
-            feature.image ? /* @__PURE__ */ jsx17(
+            feature.image ? /* @__PURE__ */ jsx15(
               "img",
               {
                 src: feature.image,
@@ -1578,14 +1426,14 @@ function FeatureGrid({
                 className: "object-contain",
                 style: { width: sizeConfig.icon, height: sizeConfig.icon }
               }
-            ) : IconComponent ? /* @__PURE__ */ jsx17(
+            ) : IconComponent ? /* @__PURE__ */ jsx15(
               IconComponent,
               {
                 size: sizeConfig.icon,
                 style: { color: iconColor }
               }
             ) : null,
-            feature.title && /* @__PURE__ */ jsx17(
+            feature.title && /* @__PURE__ */ jsx15(
               "h3",
               {
                 className: cn("font-semibold", sizeConfig.title),
@@ -1593,7 +1441,7 @@ function FeatureGrid({
                 children: feature.title
               }
             ),
-            feature.description && /* @__PURE__ */ jsx17("p", { className: cn("text-gray-600", sizeConfig.desc), children: feature.description })
+            feature.description && /* @__PURE__ */ jsx15("p", { className: cn("text-gray-600", sizeConfig.desc), children: feature.description })
           ]
         },
         index
@@ -1604,7 +1452,7 @@ function FeatureGrid({
 
 // components/page/Footer.tsx
 import { Facebook, Instagram, Twitter } from "lucide-react";
-import { jsx as jsx18, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 function Footer({
   logo,
   copyright = "\xA9 2024 Company. All rights reserved.",
@@ -1639,15 +1487,15 @@ function Footer({
   ].filter(
     (link) => !!link.url
   );
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx16(
     "footer",
     {
       className: "w-full px-6 py-8",
       style: { backgroundColor, color: textColor },
       children: /* @__PURE__ */ jsxs7("div", { className: "mx-auto flex max-w-7xl flex-col items-center justify-between gap-6 md:flex-row", children: [
-        /* @__PURE__ */ jsx18("div", { className: "flex items-center gap-4", children: logo && /* @__PURE__ */ jsx18("img", { src: logo, alt: "Logo", className: "h-8" }) }),
-        DropZone && /* @__PURE__ */ jsx18(DropZone, { zone: "footer-content" }),
-        /* @__PURE__ */ jsx18("div", { className: "flex items-center gap-4", children: socialLinks.map(({ url, Icon: Icon3 }, index) => /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx16("div", { className: "flex items-center gap-4", children: logo && /* @__PURE__ */ jsx16("img", { src: logo, alt: "Logo", className: "h-8" }) }),
+        DropZone && /* @__PURE__ */ jsx16(DropZone, { zone: "footer-content" }),
+        /* @__PURE__ */ jsx16("div", { className: "flex items-center gap-4", children: socialLinks.map(({ url, Icon: Icon3 }, index) => /* @__PURE__ */ jsx16(
           "a",
           {
             href: url,
@@ -1655,11 +1503,11 @@ function Footer({
             rel: "noopener noreferrer",
             className: "transition-opacity hover:opacity-80",
             onClick: () => handleSocialClick(url),
-            children: /* @__PURE__ */ jsx18(Icon3, { size: 24, style: { color: textColor } })
+            children: /* @__PURE__ */ jsx16(Icon3, { size: 24, style: { color: textColor } })
           },
           index
         )) }),
-        copyright && /* @__PURE__ */ jsx18("p", { className: "text-sm opacity-80", children: copyright })
+        copyright && /* @__PURE__ */ jsx16("p", { className: "text-sm opacity-80", children: copyright })
       ] })
     }
   );
@@ -1668,7 +1516,7 @@ function Footer({
 // components/page/Topbar.tsx
 import { useState as useState2 } from "react";
 import { Menu, X } from "lucide-react";
-import { jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
 function Topbar({
   logo,
   logoUrl = "/",
@@ -1701,7 +1549,7 @@ function Topbar({
   const renderLink = (item, index) => {
     const className = "hover:opacity-80 transition-opacity";
     if (item.linkType === "external") {
-      return /* @__PURE__ */ jsx19(
+      return /* @__PURE__ */ jsx17(
         "a",
         {
           href: item.url,
@@ -1715,7 +1563,7 @@ function Topbar({
       );
     }
     if (item.linkType === "scrollTo") {
-      return /* @__PURE__ */ jsx19(
+      return /* @__PURE__ */ jsx17(
         "a",
         {
           href: item.url,
@@ -1726,7 +1574,7 @@ function Topbar({
         index
       );
     }
-    return /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx17(
       "a",
       {
         href: item.url,
@@ -1749,7 +1597,7 @@ function Topbar({
             className: "mx-auto flex items-center justify-between",
             style: { maxWidth },
             children: [
-              /* @__PURE__ */ jsx19(
+              /* @__PURE__ */ jsx17(
                 "a",
                 {
                   href: logoUrl,
@@ -1760,14 +1608,14 @@ function Topbar({
                     linkType: "internal",
                     ...utm
                   }),
-                  children: logo ? /* @__PURE__ */ jsx19("img", { src: logo, alt: "Logo", className: "h-8" }) : /* @__PURE__ */ jsx19("span", { className: "text-xl font-bold", children: "Logo" })
+                  children: logo ? /* @__PURE__ */ jsx17("img", { src: logo, alt: "Logo", className: "h-8" }) : /* @__PURE__ */ jsx17("span", { className: "text-xl font-bold", children: "Logo" })
                 }
               ),
               /* @__PURE__ */ jsxs8("div", { className: "hidden items-center gap-8 md:flex", children: [
                 navItems.map(renderLink),
-                DropZone && /* @__PURE__ */ jsx19(DropZone, { zone: "cta" })
+                DropZone && /* @__PURE__ */ jsx17(DropZone, { zone: "cta" })
               ] }),
-              /* @__PURE__ */ jsx19("button", { className: "md:hidden", onClick: handleMobileMenuToggle, children: mobileMenuOpen ? /* @__PURE__ */ jsx19(X, { size: 24 }) : /* @__PURE__ */ jsx19(Menu, { size: 24 }) })
+              /* @__PURE__ */ jsx17("button", { className: "md:hidden", onClick: handleMobileMenuToggle, children: mobileMenuOpen ? /* @__PURE__ */ jsx17(X, { size: 24 }) : /* @__PURE__ */ jsx17(Menu, { size: 24 }) })
             ]
           }
         ),
@@ -1778,7 +1626,7 @@ function Topbar({
             style: { backgroundColor },
             children: [
               navItems.map(renderLink),
-              DropZone && /* @__PURE__ */ jsx19(DropZone, { zone: "cta" })
+              DropZone && /* @__PURE__ */ jsx17(DropZone, { zone: "cta" })
             ]
           }
         )
@@ -1790,19 +1638,19 @@ function Topbar({
 // components/page/Popup.tsx
 import { useState as useState3 } from "react";
 import { icons as icons4, X as X2 } from "lucide-react";
-import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
 function Icon2({ name, ...props }) {
   const formatted = name.charAt(0).toUpperCase() + name.slice(1);
   const IconComponent = icons4[formatted];
   if (!IconComponent) return null;
-  return /* @__PURE__ */ jsx20(IconComponent, { ...props });
+  return /* @__PURE__ */ jsx18(IconComponent, { ...props });
 }
 var widthMap3 = {
   small: "max-w-sm",
   medium: "max-w-lg",
   large: "max-w-2xl"
 };
-var sizeMap8 = {
+var sizeMap6 = {
   small: "px-3 py-1.5 text-sm",
   medium: "px-4 py-2 text-base",
   large: "px-6 py-3 text-lg"
@@ -1833,7 +1681,7 @@ function Popup({
     setIsOpen(false);
     sendEvent("popup_close", { ctaText, ...utm });
   };
-  const trigger = textLink ? /* @__PURE__ */ jsx20(
+  const trigger = textLink ? /* @__PURE__ */ jsx18(
     "button",
     {
       onClick: handleOpen,
@@ -1847,19 +1695,19 @@ function Popup({
       onClick: handleOpen,
       className: cn(
         "flex items-center gap-2 rounded-full font-medium",
-        sizeMap8[size]
+        sizeMap6[size]
       ),
       style: { backgroundColor: buttonColor, color: textColor },
       children: [
-        icon && iconPosition === "left" && /* @__PURE__ */ jsx20(Icon2, { name: icon, size: 18 }),
+        icon && iconPosition === "left" && /* @__PURE__ */ jsx18(Icon2, { name: icon, size: 18 }),
         ctaText,
-        icon && iconPosition === "right" && /* @__PURE__ */ jsx20(Icon2, { name: icon, size: 18 })
+        icon && iconPosition === "right" && /* @__PURE__ */ jsx18(Icon2, { name: icon, size: 18 })
       ]
     }
   );
   return /* @__PURE__ */ jsxs9(Fragment2, { children: [
     trigger,
-    isOpen && /* @__PURE__ */ jsx20(
+    isOpen && /* @__PURE__ */ jsx18(
       "div",
       {
         className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
@@ -1873,15 +1721,15 @@ function Popup({
             ),
             onClick: (e) => e.stopPropagation(),
             children: [
-              /* @__PURE__ */ jsx20(
+              /* @__PURE__ */ jsx18(
                 "button",
                 {
                   onClick: handleClose,
                   className: "absolute top-4 right-4 text-gray-500 hover:text-gray-700",
-                  children: /* @__PURE__ */ jsx20(X2, { size: 24 })
+                  children: /* @__PURE__ */ jsx18(X2, { size: 24 })
                 }
               ),
-              puck && /* @__PURE__ */ jsx20(puck.renderDropZone, { zone: "popup-content" })
+              puck && /* @__PURE__ */ jsx18(puck.renderDropZone, { zone: "popup-content" })
             ]
           }
         )
@@ -1890,9 +1738,79 @@ function Popup({
   ] });
 }
 
+// components/page/primitives/Heading.ts
+var headingSizeMap = {
+  xs: "0.875rem",
+  sm: "1rem",
+  md: "1.25rem",
+  lg: "1.5rem",
+  xl: "2rem",
+  "2xl": "2.5rem",
+  "3xl": "3rem",
+  "4xl": "4rem"
+};
+var headingWeightMap = {
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+  extrabold: 800
+};
+var headingLetterSpacingMap = {
+  tight: "-0.025em",
+  normal: "0",
+  wide: "0.05em"
+};
+var headingLineHeightMap = {
+  tight: "1.1",
+  normal: "1.4",
+  relaxed: "1.6"
+};
+function getHeadingStyle(props) {
+  return {
+    fontSize: headingSizeMap[props.size],
+    fontWeight: headingWeightMap[props.weight],
+    color: props.color,
+    textAlign: props.align,
+    letterSpacing: headingLetterSpacingMap[props.letterSpacing],
+    lineHeight: headingLineHeightMap[props.lineHeight],
+    margin: 0
+  };
+}
+
+// components/page/primitives/Paragraph.ts
+var paragraphSizeMap = {
+  sm: "0.875rem",
+  base: "1rem",
+  lg: "1.125rem",
+  xl: "1.25rem"
+};
+var paragraphWeightMap = {
+  normal: 400,
+  medium: 500,
+  semibold: 600
+};
+var paragraphLineHeightMap = {
+  tight: "1.4",
+  normal: "1.6",
+  relaxed: "1.75",
+  loose: "2"
+};
+function getParagraphStyle(props) {
+  return {
+    fontSize: paragraphSizeMap[props.size],
+    fontWeight: paragraphWeightMap[props.weight],
+    color: props.color,
+    textAlign: props.align,
+    lineHeight: paragraphLineHeightMap[props.lineHeight],
+    maxWidth: props.maxWidth || void 0,
+    margin: 0
+  };
+}
+
 export {
-  Heading,
-  Paragraph,
+  getHeadingStyle,
+  getParagraphStyle,
   Button,
   Image,
   ImageCarousel,