@mission-studio/puck 1.0.21 → 1.0.24

package/dist/{chunk-MWW5LYLN.mjs → chunk-YIPEC4L4.mjs}

@@ -1,5 +1,4 @@
 import {
-  getShadowCSS,
   useEntries,
   useTheme
 } from "./chunk-PJXZC564.mjs";
@@ -12,586 +11,120 @@ import {
   hexToRgba
 } from "./chunk-C6V3YUPF.mjs";
 
-// components/page/Button.tsx
+// components/page/VideoEmbed.tsx
 import { jsx } from "react/jsx-runtime";
-var sizeStyles = {
-  sm: { padding: "8px 16px", fontSize: "0.875rem" },
-  md: { padding: "12px 24px", fontSize: "1rem" },
-  lg: { padding: "16px 32px", fontSize: "1.125rem" },
-  xl: { padding: "20px 40px", fontSize: "1.25rem" }
+var aspectRatioMap = {
+  "16:9": "56.25%",
+  // 9/16 * 100
+  "4:3": "75%",
+  "1:1": "100%",
+  "21:9": "42.86%"
 };
 var radiusMap = {
   none: "0",
   sm: "4px",
   md: "8px",
-  lg: "16px",
-  full: "9999px"
+  lg: "16px"
+};
+var maxWidthMap = {
+  sm: "400px",
+  md: "600px",
+  lg: "800px",
+  xl: "1000px",
+  full: "100%"
 };
-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 Button({
-  text,
-  href,
-  target = "_self",
-  variant = "solid",
-  size = "md",
-  color,
-  textColor,
-  borderRadius = "md",
-  fullWidth = false,
-  align = "center",
-  id
-}) {
-  const { resolveColor: resolveColor2 } = useTheme();
-  const { getEntryValue } = useEntries();
-  const utm = useUtmParams();
-  const sendEvent = useGtmEvent();
-  const resolvedText = (() => {
-    if (!text) return "Button";
-    if (typeof text === "string") return text;
-    if (isEntryBoundValue(text)) {
-      if (text.useEntry) {
-        return String(getEntryValue(text.entryName, text.fieldKey) ?? "Button");
-      }
-      return text.value;
-    }
-    return "Button";
-  })();
-  const handleClick = () => {
-    const sessionId = typeof window !== "undefined" ? sessionStorage.getItem("session_id") : null;
-    sendEvent("button_click", {
-      text: resolvedText,
-      href: href || void 0,
-      variant,
-      session_id: sessionId,
-      ...utm
-    });
-  };
-  const resolvedColor = (() => {
-    if (!color) return resolveColor2("primary");
-    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("primary");
-  })();
-  const resolvedTextColor = (() => {
-    if (!textColor) {
-      if (variant === "solid") return { color: "#FFFFFF", opacity: 100 };
-      return resolvedColor;
-    }
-    if (typeof textColor === "string")
-      return { color: textColor, opacity: 100 };
-    if (isThemeableValue(textColor)) {
-      return textColor.useTheme ? resolveColor2(textColor.themeKey) : textColor.value;
-    }
-    if ("color" in textColor) return textColor;
-    return { color: "#FFFFFF", opacity: 100 };
-  })();
-  const bgColor = hexToRgba(resolvedColor.color, resolvedColor.opacity);
-  const fgColor = hexToRgba(resolvedTextColor.color, resolvedTextColor.opacity);
-  const baseStyle = {
-    ...sizeStyles[size],
-    borderRadius: radiusMap[borderRadius],
-    fontWeight: 600,
-    cursor: "pointer",
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    textDecoration: "none",
-    transition: "opacity 0.2s, transform 0.2s",
-    width: fullWidth ? "100%" : "auto",
-    border: "none"
-  };
-  const variantStyles = {
-    solid: {
-      backgroundColor: bgColor,
-      color: fgColor
-    },
-    outline: {
-      backgroundColor: "transparent",
-      color: bgColor,
-      border: `2px solid ${bgColor}`
-    },
-    ghost: {
-      backgroundColor: "transparent",
-      color: bgColor
-    },
-    link: {
-      backgroundColor: "transparent",
-      color: bgColor,
-      padding: "0",
-      textDecoration: "underline"
-    }
-  };
-  const style = { ...baseStyle, ...variantStyles[variant] };
-  const wrapperStyle = {
-    display: "flex",
-    justifyContent: align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center"
-  };
-  const content = /* @__PURE__ */ jsx("span", { style, children: resolvedText });
-  if (href) {
-    return /* @__PURE__ */ jsx("div", { style: wrapperStyle, children: /* @__PURE__ */ jsx(
-      "a",
-      {
-        id,
-        href,
-        target,
-        style,
-        rel: target === "_blank" ? "noopener noreferrer" : void 0,
-        onClick: handleClick,
-        children: resolvedText
-      }
-    ) });
+function parseVideoUrl(url) {
+  const ytMatch = url.match(
+    /(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/
+  );
+  if (ytMatch) {
+    return {
+      type: "youtube",
+      embedUrl: `https://www.youtube.com/embed/${ytMatch[1]}`
+    };
   }
-  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 jsx2, jsxs } from "react/jsx-runtime";
-var widthMap = {
-  auto: "auto",
-  full: "100%",
-  sm: "300px",
-  md: "500px",
-  lg: "700px",
-  xl: "900px"
-};
-var aspectRatioMap = {
-  auto: void 0,
-  "1:1": "1 / 1",
-  "4:3": "4 / 3",
-  "16:9": "16 / 9",
-  "21:9": "21 / 9"
-};
-var radiusMap2 = {
-  none: "0",
-  sm: "4px",
-  md: "8px",
-  lg: "16px",
-  xl: "24px",
-  full: "9999px"
-};
-var shadowMap = {
-  none: "none",
-  sm: "0 1px 2px rgba(0,0,0,0.05)",
-  md: "0 4px 6px rgba(0,0,0,0.1)",
-  lg: "0 10px 15px rgba(0,0,0,0.1)",
-  xl: "0 20px 25px rgba(0,0,0,0.15)"
-};
-function isThemeableValue2(value) {
-  return typeof value === "object" && value !== null && "useTheme" in value;
-}
-function isEntryBoundValue2(value) {
-  return typeof value === "object" && value !== null && "useEntry" in value;
+  const vimeoMatch = url.match(/(?:vimeo\.com\/)(\d+)/);
+  if (vimeoMatch) {
+    return {
+      type: "vimeo",
+      embedUrl: `https://player.vimeo.com/video/${vimeoMatch[1]}`
+    };
+  }
+  return { type: "unknown", embedUrl: url };
 }
-function Image({
-  src,
-  alt = "",
-  width = "full",
-  aspectRatio = "auto",
-  objectFit = "cover",
+function VideoEmbed({
+  url,
+  aspectRatio = "16:9",
   borderRadius = "none",
-  shadow = "none",
+  autoplay = false,
+  muted = false,
+  loop = false,
   align = "center",
-  caption,
-  captionColor,
+  maxWidth = "full",
   id
 }) {
-  const { resolveColor: resolveColor2 } = useTheme();
   const { getEntryValue } = useEntries();
-  const resolvedSrc = (() => {
-    if (!src) return "";
-    if (typeof src === "string") return src;
-    if (isEntryBoundValue2(src)) {
-      if (src.useEntry) {
-        return String(getEntryValue(src.entryName, src.fieldKey) ?? "");
-      }
-      return src.value;
-    }
-    return "";
-  })();
-  const resolvedCaption = (() => {
-    if (!caption) return "";
-    if (typeof caption === "string") return caption;
-    if (isEntryBoundValue2(caption)) {
-      if (caption.useEntry) {
-        return String(getEntryValue(caption.entryName, caption.fieldKey) ?? "");
+  const resolvedUrl = (() => {
+    if (!url) return "";
+    if (typeof url === "string") return url;
+    if (isEntryBoundValue(url)) {
+      if (url.useEntry) {
+        return String(getEntryValue(url.entryName, url.fieldKey) ?? "");
       }
-      return caption.value;
+      return url.value;
     }
     return "";
   })();
-  const resolvedCaptionColor = (() => {
-    if (!captionColor) return resolveColor2("muted");
-    if (typeof captionColor === "string")
-      return { color: captionColor, opacity: 100 };
-    if (isThemeableValue2(captionColor)) {
-      return captionColor.useTheme ? resolveColor2(captionColor.themeKey) : captionColor.value;
-    }
-    if ("color" in captionColor) return captionColor;
-    return resolveColor2("muted");
-  })();
-  const wrapperStyle = {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center",
-    gap: "8px"
-  };
-  const imageStyle = {
-    width: widthMap[width],
-    maxWidth: "100%",
-    aspectRatio: aspectRatioMap[aspectRatio],
-    objectFit,
-    borderRadius: radiusMap2[borderRadius],
-    boxShadow: shadowMap[shadow],
-    display: "block"
-  };
-  const captionStyle = {
-    fontSize: "0.875rem",
-    color: hexToRgba(resolvedCaptionColor.color, resolvedCaptionColor.opacity),
-    textAlign: align,
-    maxWidth: widthMap[width]
-  };
-  if (!resolvedSrc) {
-    return /* @__PURE__ */ jsx2("div", { style: wrapperStyle, children: /* @__PURE__ */ jsx2(
-      "div",
-      {
-        style: {
-          ...imageStyle,
-          backgroundColor: "#e5e7eb",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          minHeight: "200px",
-          color: "#9ca3af"
-        },
-        children: "No image"
-      }
-    ) });
-  }
-  return /* @__PURE__ */ jsxs("figure", { id, style: { ...wrapperStyle, margin: 0 }, children: [
-    /* @__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 jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var aspectRatioMap2 = {
-  "16:9": "16 / 9",
-  "4:3": "4 / 3",
-  "1:1": "1 / 1",
-  "21:9": "21 / 9"
-};
-var radiusMap3 = {
-  none: "0",
-  sm: "4px",
-  md: "8px",
-  lg: "16px"
-};
-function isThemeableValue3(value) {
-  return typeof value === "object" && value !== null && "useTheme" in value;
-}
-function ImageCarousel({
-  images = [],
-  aspectRatio = "16:9",
-  borderRadius = "none",
-  showDots = true,
-  showArrows = true,
-  arrowColor,
-  dotColor,
-  id
-}) {
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const { resolveColor: resolveColor2 } = useTheme();
-  const utm = useUtmParams();
-  const sendEvent = useGtmEvent();
-  const resolvedArrowColor = (() => {
-    if (!arrowColor) return { color: "#FFFFFF", opacity: 100 };
-    if (typeof arrowColor === "string")
-      return { color: arrowColor, opacity: 100 };
-    if (isThemeableValue3(arrowColor)) {
-      return arrowColor.useTheme ? resolveColor2(arrowColor.themeKey) : arrowColor.value;
-    }
-    if ("color" in arrowColor) return arrowColor;
-    return { color: "#FFFFFF", opacity: 100 };
-  })();
-  const resolvedDotColor = (() => {
-    if (!dotColor) return resolveColor2("primary");
-    if (typeof dotColor === "string") return { color: dotColor, opacity: 100 };
-    if (isThemeableValue3(dotColor)) {
-      return dotColor.useTheme ? resolveColor2(dotColor.themeKey) : dotColor.value;
-    }
-    if ("color" in dotColor) return dotColor;
-    return resolveColor2("primary");
-  })();
-  const goToPrevious = () => {
-    const newIndex = currentIndex === 0 ? images.length - 1 : currentIndex - 1;
-    setCurrentIndex(newIndex);
-    sendEvent("carousel_navigate", {
-      direction: "previous",
-      slideIndex: newIndex,
-      totalSlides: images.length,
-      ...utm
-    });
-  };
-  const goToNext = () => {
-    const newIndex = currentIndex === images.length - 1 ? 0 : currentIndex + 1;
-    setCurrentIndex(newIndex);
-    sendEvent("carousel_navigate", {
-      direction: "next",
-      slideIndex: newIndex,
-      totalSlides: images.length,
-      ...utm
-    });
-  };
-  const goToSlide = (index) => {
-    setCurrentIndex(index);
-    sendEvent("carousel_navigate", {
-      direction: "direct",
-      slideIndex: index,
-      totalSlides: images.length,
-      ...utm
-    });
-  };
-  if (images.length === 0) {
-    return /* @__PURE__ */ jsx3(
+  if (!resolvedUrl) {
+    return /* @__PURE__ */ jsx(
       "div",
       {
         style: {
-          aspectRatio: aspectRatioMap2[aspectRatio],
-          backgroundColor: "#e5e7eb",
-          borderRadius: radiusMap3[borderRadius],
+          backgroundColor: "#1f2937",
+          borderRadius: radiusMap[borderRadius],
+          aspectRatio: aspectRatio.replace(":", " / "),
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          color: "#9ca3af"
+          color: "#9ca3af",
+          maxWidth: maxWidthMap[maxWidth],
+          marginLeft: align === "center" ? "auto" : align === "right" ? "auto" : void 0,
+          marginRight: align === "center" ? "auto" : align === "left" ? "auto" : void 0
         },
-        children: "No images"
+        children: "No video URL"
       }
     );
   }
+  const { embedUrl } = parseVideoUrl(resolvedUrl);
+  const params = new URLSearchParams();
+  if (autoplay) params.set("autoplay", "1");
+  if (muted) params.set("mute", "1");
+  if (loop) params.set("loop", "1");
+  const finalUrl = params.toString() ? `${embedUrl}?${params.toString()}` : embedUrl;
+  const wrapperStyle = {
+    display: "flex",
+    justifyContent: align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center"
+  };
   const containerStyle = {
     position: "relative",
-    aspectRatio: aspectRatioMap2[aspectRatio],
-    borderRadius: radiusMap3[borderRadius],
+    width: "100%",
+    maxWidth: maxWidthMap[maxWidth],
+    paddingBottom: aspectRatioMap[aspectRatio],
+    borderRadius: radiusMap[borderRadius],
     overflow: "hidden"
   };
-  const slideContainerStyle = {
-    display: "flex",
-    transition: "transform 0.3s ease-in-out",
-    transform: `translateX(-${currentIndex * 100}%)`,
-    height: "100%"
-  };
-  const slideStyle = {
-    minWidth: "100%",
-    height: "100%"
-  };
-  const imageStyle = {
+  const iframeStyle = {
+    position: "absolute",
+    top: 0,
+    left: 0,
     width: "100%",
     height: "100%",
-    objectFit: "cover"
+    border: "none"
   };
-  const arrowStyle = {
-    position: "absolute",
-    top: "50%",
-    transform: "translateY(-50%)",
-    backgroundColor: "rgba(0,0,0,0.5)",
-    color: hexToRgba(resolvedArrowColor.color, resolvedArrowColor.opacity),
-    border: "none",
-    borderRadius: "50%",
-    width: "40px",
-    height: "40px",
-    cursor: "pointer",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    fontSize: "20px",
-    zIndex: 1
-  };
-  const dotsContainerStyle = {
-    position: "absolute",
-    bottom: "16px",
-    left: "50%",
-    transform: "translateX(-50%)",
-    display: "flex",
-    gap: "8px",
-    zIndex: 1
-  };
-  const dotStyle = (isActive) => ({
-    width: "10px",
-    height: "10px",
-    borderRadius: "50%",
-    border: "none",
-    cursor: "pointer",
-    backgroundColor: isActive ? hexToRgba(resolvedDotColor.color, resolvedDotColor.opacity) : "rgba(255,255,255,0.5)"
-  });
-  return /* @__PURE__ */ jsxs2("div", { id, style: containerStyle, children: [
-    /* @__PURE__ */ jsx3("div", { style: slideContainerStyle, children: images.map((image, index) => /* @__PURE__ */ jsx3("div", { style: slideStyle, children: /* @__PURE__ */ jsx3(
-      "img",
-      {
-        src: image.src,
-        alt: image.alt || "",
-        style: imageStyle,
-        loading: "lazy"
-      }
-    ) }, index)) }),
-    showArrows && images.length > 1 && /* @__PURE__ */ jsxs2(Fragment, { children: [
-      /* @__PURE__ */ jsx3(
-        "button",
-        {
-          type: "button",
-          onClick: goToPrevious,
-          style: { ...arrowStyle, left: "16px" },
-          "aria-label": "Previous slide",
-          children: "\u2039"
-        }
-      ),
-      /* @__PURE__ */ jsx3(
-        "button",
-        {
-          type: "button",
-          onClick: goToNext,
-          style: { ...arrowStyle, right: "16px" },
-          "aria-label": "Next slide",
-          children: "\u203A"
-        }
-      )
-    ] }),
-    showDots && images.length > 1 && /* @__PURE__ */ jsx3("div", { style: dotsContainerStyle, children: images.map((_, index) => /* @__PURE__ */ jsx3(
-      "button",
-      {
-        type: "button",
-        onClick: () => goToSlide(index),
-        style: dotStyle(index === currentIndex),
-        "aria-label": `Go to slide ${index + 1}`
-      },
-      index
-    )) })
-  ] });
-}
-
-// components/page/VideoEmbed.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-var aspectRatioMap3 = {
-  "16:9": "56.25%",
-  // 9/16 * 100
-  "4:3": "75%",
-  "1:1": "100%",
-  "21:9": "42.86%"
-};
-var radiusMap4 = {
-  none: "0",
-  sm: "4px",
-  md: "8px",
-  lg: "16px"
-};
-var maxWidthMap = {
-  sm: "400px",
-  md: "600px",
-  lg: "800px",
-  xl: "1000px",
-  full: "100%"
-};
-function isEntryBoundValue3(value) {
-  return typeof value === "object" && value !== null && "useEntry" in value;
-}
-function parseVideoUrl(url) {
-  const ytMatch = url.match(
-    /(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/
-  );
-  if (ytMatch) {
-    return {
-      type: "youtube",
-      embedUrl: `https://www.youtube.com/embed/${ytMatch[1]}`
-    };
-  }
-  const vimeoMatch = url.match(/(?:vimeo\.com\/)(\d+)/);
-  if (vimeoMatch) {
-    return {
-      type: "vimeo",
-      embedUrl: `https://player.vimeo.com/video/${vimeoMatch[1]}`
-    };
-  }
-  return { type: "unknown", embedUrl: url };
-}
-function VideoEmbed({
-  url,
-  aspectRatio = "16:9",
-  borderRadius = "none",
-  autoplay = false,
-  muted = false,
-  loop = false,
-  align = "center",
-  maxWidth = "full",
-  id
-}) {
-  const { getEntryValue } = useEntries();
-  const resolvedUrl = (() => {
-    if (!url) return "";
-    if (typeof url === "string") return url;
-    if (isEntryBoundValue3(url)) {
-      if (url.useEntry) {
-        return String(getEntryValue(url.entryName, url.fieldKey) ?? "");
-      }
-      return url.value;
-    }
-    return "";
-  })();
-  if (!resolvedUrl) {
-    return /* @__PURE__ */ jsx4(
-      "div",
-      {
-        style: {
-          backgroundColor: "#1f2937",
-          borderRadius: radiusMap4[borderRadius],
-          aspectRatio: aspectRatio.replace(":", " / "),
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          color: "#9ca3af",
-          maxWidth: maxWidthMap[maxWidth],
-          marginLeft: align === "center" ? "auto" : align === "right" ? "auto" : void 0,
-          marginRight: align === "center" ? "auto" : align === "left" ? "auto" : void 0
-        },
-        children: "No video URL"
-      }
-    );
-  }
-  const { embedUrl } = parseVideoUrl(resolvedUrl);
-  const params = new URLSearchParams();
-  if (autoplay) params.set("autoplay", "1");
-  if (muted) params.set("mute", "1");
-  if (loop) params.set("loop", "1");
-  const finalUrl = params.toString() ? `${embedUrl}?${params.toString()}` : embedUrl;
-  const wrapperStyle = {
-    display: "flex",
-    justifyContent: align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center"
-  };
-  const containerStyle = {
-    position: "relative",
-    width: "100%",
-    maxWidth: maxWidthMap[maxWidth],
-    paddingBottom: aspectRatioMap3[aspectRatio],
-    borderRadius: radiusMap4[borderRadius],
-    overflow: "hidden"
-  };
-  const iframeStyle = {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    width: "100%",
-    height: "100%",
-    border: "none"
-  };
-  return /* @__PURE__ */ jsx4("div", { id, style: wrapperStyle, children: /* @__PURE__ */ jsx4("div", { style: containerStyle, children: /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx("div", { id, style: wrapperStyle, children: /* @__PURE__ */ jsx("div", { style: containerStyle, children: /* @__PURE__ */ jsx(
     "iframe",
     {
       src: finalUrl,
@@ -603,8 +136,8 @@ function VideoEmbed({
   ) }) });
 }
 
-// components/page/Icon.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+// components/page/primitives/Icon.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var sizeMap = {
   sm: { size: "16px", strokeWidth: 2 },
   md: { size: "24px", strokeWidth: 2 },
@@ -613,7 +146,7 @@ var sizeMap = {
   "2xl": { size: "64px", strokeWidth: 1.5 }
 };
 var icons = {
-  check: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsx5(
+  check: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsx2(
     "svg",
     {
       width: size,
@@ -624,10 +157,10 @@ var icons = {
       strokeWidth,
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx5("polyline", { points: "20 6 9 17 4 12" })
+      children: /* @__PURE__ */ jsx2("polyline", { points: "20 6 9 17 4 12" })
     }
   ),
-  x: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsxs3(
+  x: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsxs(
     "svg",
     {
       width: size,
@@ -639,12 +172,12 @@ var icons = {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx5("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-        /* @__PURE__ */ jsx5("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+        /* @__PURE__ */ jsx2("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ jsx2("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
       ]
     }
   ),
-  star: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsx5(
+  star: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsx2(
     "svg",
     {
       width: size,
@@ -655,10 +188,10 @@ var icons = {
       strokeWidth,
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      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" })
+      children: /* @__PURE__ */ jsx2("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__ */ jsx5(
+  heart: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsx2(
     "svg",
     {
       width: size,
@@ -669,10 +202,10 @@ var icons = {
       strokeWidth,
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      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" })
+      children: /* @__PURE__ */ jsx2("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(
+  arrowRight: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsxs(
     "svg",
     {
       width: size,
@@ -684,12 +217,12 @@ var icons = {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx5("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
-        /* @__PURE__ */ jsx5("polyline", { points: "12 5 19 12 12 19" })
+        /* @__PURE__ */ jsx2("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
+        /* @__PURE__ */ jsx2("polyline", { points: "12 5 19 12 12 19" })
       ]
     }
   ),
-  arrowLeft: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsxs3(
+  arrowLeft: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsxs(
     "svg",
     {
       width: size,
@@ -701,12 +234,12 @@ var icons = {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx5("line", { x1: "19", y1: "12", x2: "5", y2: "12" }),
-        /* @__PURE__ */ jsx5("polyline", { points: "12 19 5 12 12 5" })
+        /* @__PURE__ */ jsx2("line", { x1: "19", y1: "12", x2: "5", y2: "12" }),
+        /* @__PURE__ */ jsx2("polyline", { points: "12 19 5 12 12 5" })
       ]
     }
   ),
-  mail: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsxs3(
+  mail: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsxs(
     "svg",
     {
       width: size,
@@ -718,12 +251,12 @@ var icons = {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__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" })
+        /* @__PURE__ */ jsx2("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__ */ jsx2("polyline", { points: "22,6 12,13 2,6" })
       ]
     }
   ),
-  phone: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsx5(
+  phone: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsx2(
     "svg",
     {
       width: size,
@@ -734,10 +267,10 @@ var icons = {
       strokeWidth,
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      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" })
+      children: /* @__PURE__ */ jsx2("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(
+  mapPin: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsxs(
     "svg",
     {
       width: size,
@@ -749,12 +282,12 @@ var icons = {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__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" })
+        /* @__PURE__ */ jsx2("path", { d: "M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" }),
+        /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "10", r: "3" })
       ]
     }
   ),
-  zap: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsx5(
+  zap: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsx2(
     "svg",
     {
       width: size,
@@ -765,10 +298,10 @@ var icons = {
       strokeWidth,
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx5("polygon", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2" })
+      children: /* @__PURE__ */ jsx2("polygon", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2" })
     }
   ),
-  shield: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsx5(
+  shield: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsx2(
     "svg",
     {
       width: size,
@@ -779,10 +312,10 @@ var icons = {
       strokeWidth,
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx5("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" })
+      children: /* @__PURE__ */ jsx2("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" })
     }
   ),
-  users: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsxs3(
+  users: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsxs(
     "svg",
     {
       width: size,
@@ -794,463 +327,128 @@ var icons = {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__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" })
+        /* @__PURE__ */ jsx2("path", { d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
+        /* @__PURE__ */ jsx2("circle", { cx: "9", cy: "7", r: "4" }),
+        /* @__PURE__ */ jsx2("path", { d: "M23 21v-2a4 4 0 0 0-3-3.87" }),
+        /* @__PURE__ */ jsx2("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })
       ]
     }
   )
 };
-function isThemeableValue4(value) {
+function isThemeableValue(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
-function Icon({
-  name = "check",
-  size = "md",
-  color,
-  align = "center",
-  id
-}) {
-  const { resolveColor: resolveColor2 } = useTheme();
-  const resolvedColor = (() => {
-    if (!color) return resolveColor2("primary");
-    if (typeof color === "string") return { color, opacity: 100 };
-    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 } = sizeMap[size];
-  const colorValue = hexToRgba(resolvedColor.color, resolvedColor.opacity);
-  const wrapperStyle = {
+function getWrapperStyle(align) {
+  return {
     display: "flex",
     justifyContent: align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center"
   };
-  return /* @__PURE__ */ jsx5("div", { id, style: wrapperStyle, children: /* @__PURE__ */ jsx5(
-    IconComponent,
-    {
-      size: iconSize,
-      color: colorValue,
-      strokeWidth
-    }
-  ) });
 }
 var availableIcons = Object.keys(icons);
 
-// components/page/Section.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-function isThemeableValue5(value) {
+// components/page/TextBlock.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var alignmentMap = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right"
+};
+var sizeMap2 = {
+  small: "text-2xl",
+  "medium-small": "text-3xl",
+  medium: "text-4xl",
+  large: "text-5xl",
+  xlarge: "text-6xl"
+};
+function isThemeableValue2(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 (isThemeableValue5(bg)) {
-    if (bg.useTheme) {
-      const themeColor = resolveColor2(bg.themeKey);
+function isEntryBoundValue2(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 (isThemeableValue2(color)) {
+    if (color.useTheme) {
+      const themeColor = resolveThemeColor(color.themeKey);
       return hexToRgba(themeColor.color, themeColor.opacity);
     }
-    return hexToRgba(bg.value.color, bg.value.opacity);
+    return hexToRgba(color.value.color, color.value.opacity);
   }
-  if ("color" in bg && "opacity" in bg) {
-    return hexToRgba(bg.color, bg.opacity);
+  if ("color" in color && "opacity" in color) {
+    return hexToRgba(color.color, color.opacity);
   }
-  return void 0;
+  return "#000000";
 }
-function getVisibilityClasses(visibility) {
-  if (!visibility) return "";
-  if (!visibility.mobile && !visibility.desktop) {
-    return "hidden";
-  }
-  if (!visibility.mobile && visibility.desktop) {
-    return "hidden md:block";
+function resolveColorHex(color, resolveThemeColor) {
+  if (!color) return "#000000";
+  if (typeof color === "string") return color;
+  if (isThemeableValue2(color)) {
+    if (color.useTheme) {
+      return resolveThemeColor(color.themeKey).color;
+    }
+    return color.value.color;
   }
-  if (visibility.mobile && !visibility.desktop) {
-    return "md:hidden";
+  if ("color" in color) {
+    return color.color;
   }
-  return "";
+  return "#000000";
 }
-function Section({
-  children: _children,
-  verticalPadding = 48,
-  horizontalPadding = 32,
-  gap = 24,
-  backgroundColor,
-  backgroundImage,
-  shadow = "none",
-  borderRadius = 0,
-  contentMaxWidth = "1400px",
-  anchorLink,
-  visibility,
-  puck
+function TextBlock({
+  title,
+  subtitle,
+  body,
+  alignment = "left",
+  textSize = "medium",
+  textColor,
+  subtitleBodyColor,
+  useGradientText = false,
+  gradientColor1,
+  gradientColor2,
+  anchorLink
 }) {
-  const { resolveColor: resolveColor2 } = useTheme();
-  const DropZone = puck?.renderDropZone;
-  return /* @__PURE__ */ jsx6(
-    "section",
-    {
-      id: anchorLink,
-      className: cn("flex w-full flex-col", getVisibilityClasses(visibility)),
-      style: {
-        padding: `${verticalPadding}px ${horizontalPadding}px`,
-        gap: `${gap}px`,
-        backgroundColor: resolveBackgroundColor(backgroundColor, resolveColor2),
-        backgroundImage: backgroundImage ? `url(${backgroundImage})` : void 0,
-        backgroundSize: "cover",
-        backgroundPosition: "center",
-        boxShadow: getShadowCSS(shadow),
-        borderRadius: `${borderRadius}px`
-      },
-      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 jsx7 } from "react/jsx-runtime";
-var maxWidthMap2 = {
-  sm: "640px",
-  md: "768px",
-  lg: "1024px",
-  xl: "1280px",
-  "2xl": "1536px",
-  full: "100%"
-};
-var paddingMap = {
-  none: "0",
-  sm: "16px",
-  md: "24px",
-  lg: "32px",
-  xl: "48px"
-};
-function isThemeableValue6(value) {
-  return typeof value === "object" && value !== null && "useTheme" in value;
-}
-function Container({
-  maxWidth = "lg",
-  padding,
-  paddingX = "md",
-  paddingY = "none",
-  backgroundColor,
-  centered = true,
-  id,
-  puck
-}) {
-  const { resolveColor: resolveColor2 } = useTheme();
-  const DropZone = puck?.renderDropZone;
-  const resolvedBgColor = (() => {
-    if (!backgroundColor) return null;
-    if (typeof backgroundColor === "string")
-      return { color: backgroundColor, opacity: 100 };
-    if (isThemeableValue6(backgroundColor)) {
-      return backgroundColor.useTheme ? resolveColor2(backgroundColor.themeKey) : backgroundColor.value;
-    }
-    if ("color" in backgroundColor) return backgroundColor;
-    return null;
-  })();
-  const effectivePaddingX = padding || paddingX;
-  const effectivePaddingY = padding || paddingY;
-  const style = {
-    maxWidth: maxWidthMap2[maxWidth],
-    marginLeft: centered ? "auto" : void 0,
-    marginRight: centered ? "auto" : void 0,
-    paddingLeft: paddingMap[effectivePaddingX],
-    paddingRight: paddingMap[effectivePaddingX],
-    paddingTop: paddingMap[effectivePaddingY],
-    paddingBottom: paddingMap[effectivePaddingY],
-    backgroundColor: resolvedBgColor ? hexToRgba(resolvedBgColor.color, resolvedBgColor.opacity) : void 0,
-    width: "100%"
-  };
-  return /* @__PURE__ */ jsx7("div", { id, style, children: DropZone && /* @__PURE__ */ jsx7(DropZone, { zone: "container-content" }) });
-}
-
-// components/page/Columns.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
-var gapMap = {
-  none: "0",
-  sm: "16px",
-  md: "24px",
-  lg: "32px",
-  xl: "48px"
-};
-var alignMap = {
-  top: "flex-start",
-  center: "center",
-  bottom: "flex-end",
-  stretch: "stretch"
-};
-function Columns({
-  columns = 2,
-  gap = "md",
-  verticalAlign = "top",
-  stackOnMobile = true,
-  id,
-  puck
-}) {
-  const DropZone = puck?.renderDropZone;
-  const containerStyle = {
-    display: "grid",
-    gridTemplateColumns: `repeat(${columns}, 1fr)`,
-    gap: gapMap[gap],
-    alignItems: alignMap[verticalAlign]
-  };
-  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 jsx9 } from "react/jsx-runtime";
-var borderWidthMap = {
-  none: "0",
-  thin: "1px",
-  medium: "2px",
-  thick: "4px"
-};
-var radiusMap5 = {
-  none: "0",
-  sm: "4px",
-  md: "8px",
-  lg: "16px",
-  xl: "24px"
-};
-var shadowMap2 = {
-  none: "none",
-  sm: "0 1px 2px rgba(0,0,0,0.05)",
-  md: "0 4px 6px rgba(0,0,0,0.1)",
-  lg: "0 10px 15px rgba(0,0,0,0.1)",
-  xl: "0 20px 25px rgba(0,0,0,0.15)"
-};
-var paddingMap2 = {
-  none: "0",
-  sm: "16px",
-  md: "24px",
-  lg: "32px",
-  xl: "48px"
-};
-function isThemeableValue7(value) {
-  return typeof value === "object" && value !== null && "useTheme" in value;
-}
-function Card({
-  backgroundColor,
-  borderColor,
-  borderWidth = "thin",
-  borderRadius = "md",
-  shadow = "sm",
-  padding = "md",
-  id,
-  puck
-}) {
-  const { resolveColor: resolveColor2 } = useTheme();
-  const DropZone = puck?.renderDropZone;
-  const resolvedBgColor = (() => {
-    if (!backgroundColor) return resolveColor2("background");
-    if (typeof backgroundColor === "string")
-      return { color: backgroundColor, opacity: 100 };
-    if (isThemeableValue7(backgroundColor)) {
-      return backgroundColor.useTheme ? resolveColor2(backgroundColor.themeKey) : backgroundColor.value;
-    }
-    if ("color" in backgroundColor) return backgroundColor;
-    return resolveColor2("background");
-  })();
-  const resolvedBorderColor = (() => {
-    if (!borderColor) return resolveColor2("muted");
-    if (typeof borderColor === "string")
-      return { color: borderColor, opacity: 100 };
-    if (isThemeableValue7(borderColor)) {
-      return borderColor.useTheme ? resolveColor2(borderColor.themeKey) : borderColor.value;
-    }
-    if ("color" in borderColor) return borderColor;
-    return resolveColor2("muted");
-  })();
-  const style = {
-    backgroundColor: hexToRgba(resolvedBgColor.color, resolvedBgColor.opacity),
-    border: borderWidth !== "none" ? `${borderWidthMap[borderWidth]} solid ${hexToRgba(resolvedBorderColor.color, resolvedBorderColor.opacity)}` : "none",
-    borderRadius: radiusMap5[borderRadius],
-    boxShadow: shadowMap2[shadow],
-    padding: paddingMap2[padding]
-  };
-  return /* @__PURE__ */ jsx9("div", { id, style, children: DropZone && /* @__PURE__ */ jsx9(DropZone, { zone: "card-content" }) });
-}
-
-// components/page/Divider.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
-var thicknessMap = {
-  thin: "1px",
-  medium: "2px",
-  thick: "4px"
-};
-var widthMap2 = {
-  full: "100%",
-  "3/4": "75%",
-  "1/2": "50%",
-  "1/4": "25%"
-};
-var spacingMap = {
-  sm: "16px",
-  md: "24px",
-  lg: "32px",
-  xl: "48px"
-};
-function isThemeableValue8(value) {
-  return typeof value === "object" && value !== null && "useTheme" in value;
-}
-function Divider({
-  style: lineStyle = "solid",
-  thickness = "thin",
-  color,
-  width = "full",
-  align = "center",
-  spacing = "md",
-  id
-}) {
-  const { resolveColor: resolveColor2 } = useTheme();
-  const resolvedColor = (() => {
-    if (!color) return resolveColor2("muted");
-    if (typeof color === "string") return { color, opacity: 100 };
-    if (isThemeableValue8(color)) {
-      return color.useTheme ? resolveColor2(color.themeKey) : color.value;
-    }
-    if ("color" in color) return color;
-    return resolveColor2("muted");
-  })();
-  const wrapperStyle = {
-    display: "flex",
-    justifyContent: align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center",
-    padding: `${spacingMap[spacing]} 0`
-  };
-  const hrStyle = {
-    width: widthMap2[width],
-    border: "none",
-    borderTop: `${thicknessMap[thickness]} ${lineStyle} ${hexToRgba(resolvedColor.color, resolvedColor.opacity)}`,
-    margin: 0
-  };
-  return /* @__PURE__ */ jsx10("div", { id, style: wrapperStyle, children: /* @__PURE__ */ jsx10("hr", { style: hrStyle }) });
-}
-
-// components/page/Spacer.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
-var sizeMap2 = {
-  xs: "8px",
-  sm: "16px",
-  md: "24px",
-  lg: "32px",
-  xl: "48px",
-  "2xl": "64px",
-  "3xl": "96px"
-};
-function Spacer({ size = "md", id }) {
-  const style = {
-    height: sizeMap2[size],
-    width: "100%"
-  };
-  return /* @__PURE__ */ jsx11("div", { id, style, "aria-hidden": "true" });
-}
-
-// components/page/TextBlock.tsx
-import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
-var alignmentMap = {
-  left: "text-left",
-  center: "text-center",
-  right: "text-right"
-};
-var sizeMap3 = {
-  small: "text-2xl",
-  "medium-small": "text-3xl",
-  medium: "text-4xl",
-  large: "text-5xl",
-  xlarge: "text-6xl"
-};
-function isThemeableValue9(value) {
-  return typeof value === "object" && value !== null && "useTheme" in 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 (isThemeableValue9(color)) {
-    if (color.useTheme) {
-      const themeColor = resolveThemeColor(color.themeKey);
-      return hexToRgba(themeColor.color, themeColor.opacity);
-    }
-    return hexToRgba(color.value.color, color.value.opacity);
-  }
-  if ("color" in color && "opacity" in color) {
-    return hexToRgba(color.color, color.opacity);
-  }
-  return "#000000";
-}
-function resolveColorHex(color, resolveThemeColor) {
-  if (!color) return "#000000";
-  if (typeof color === "string") return color;
-  if (isThemeableValue9(color)) {
-    if (color.useTheme) {
-      return resolveThemeColor(color.themeKey).color;
-    }
-    return color.value.color;
-  }
-  if ("color" in color) {
-    return color.color;
-  }
-  return "#000000";
-}
-function TextBlock({
-  title,
-  subtitle,
-  body,
-  alignment = "left",
-  textSize = "medium",
-  textColor,
-  subtitleBodyColor,
-  useGradientText = false,
-  gradientColor1,
-  gradientColor2,
-  anchorLink
-}) {
-  const { resolveColor: resolveThemeColor } = useTheme();
-  const { getEntryValue } = useEntries();
-  const resolveText = (value) => {
-    if (!value) return void 0;
-    if (typeof value === "string") return value;
-    if (isEntryBoundValue4(value)) {
-      if (value.useEntry) {
-        const entryVal = getEntryValue(value.entryName, value.fieldKey);
-        return entryVal != null ? String(entryVal) : void 0;
-      }
-      return value.value;
-    }
-    return void 0;
-  };
-  const resolvedTitle = resolveText(title);
-  const resolvedSubtitle = resolveText(subtitle);
-  const resolvedBody = resolveText(body);
-  const titleColorValue = resolveColor(textColor, resolveThemeColor);
-  const subtitleColorValue = resolveColor(subtitleBodyColor, resolveThemeColor);
-  const gradientStyle = useGradientText ? {
-    backgroundImage: `linear-gradient(90deg, ${resolveColorHex(gradientColor1, resolveThemeColor)}, ${resolveColorHex(gradientColor2, resolveThemeColor)})`,
-    WebkitBackgroundClip: "text",
-    WebkitTextFillColor: "transparent",
-    backgroundClip: "text"
-  } : { color: titleColorValue };
-  return /* @__PURE__ */ jsxs4(
-    "div",
+  const { resolveColor: resolveThemeColor } = useTheme();
+  const { getEntryValue } = useEntries();
+  const resolveText = (value) => {
+    if (!value) return void 0;
+    if (typeof value === "string") return value;
+    if (isEntryBoundValue2(value)) {
+      if (value.useEntry) {
+        const entryVal = getEntryValue(value.entryName, value.fieldKey);
+        return entryVal != null ? String(entryVal) : void 0;
+      }
+      return value.value;
+    }
+    return void 0;
+  };
+  const resolvedTitle = resolveText(title);
+  const resolvedSubtitle = resolveText(subtitle);
+  const resolvedBody = resolveText(body);
+  const titleColorValue = resolveColor(textColor, resolveThemeColor);
+  const subtitleColorValue = resolveColor(subtitleBodyColor, resolveThemeColor);
+  const gradientStyle = useGradientText ? {
+    backgroundImage: `linear-gradient(90deg, ${resolveColorHex(gradientColor1, resolveThemeColor)}, ${resolveColorHex(gradientColor2, resolveThemeColor)})`,
+    WebkitBackgroundClip: "text",
+    WebkitTextFillColor: "transparent",
+    backgroundClip: "text"
+  } : { color: titleColorValue };
+  return /* @__PURE__ */ jsxs2(
+    "div",
     {
       id: anchorLink,
       className: cn("flex flex-col gap-4", alignmentMap[alignment]),
       children: [
-        resolvedTitle && /* @__PURE__ */ jsx12(
+        resolvedTitle && /* @__PURE__ */ jsx3(
           "h2",
           {
-            className: cn("font-bold", sizeMap3[textSize]),
+            className: cn("font-bold", sizeMap2[textSize]),
             style: gradientStyle,
             children: resolvedTitle
           }
         ),
-        resolvedSubtitle && /* @__PURE__ */ jsx12("p", { className: "text-xl", style: { color: subtitleColorValue }, children: resolvedSubtitle }),
-        resolvedBody && /* @__PURE__ */ jsx12(
+        resolvedSubtitle && /* @__PURE__ */ jsx3("p", { className: "text-xl", style: { color: subtitleColorValue }, children: resolvedSubtitle }),
+        resolvedBody && /* @__PURE__ */ jsx3(
           "div",
           {
             className: "prose max-w-none",
@@ -1264,7 +462,7 @@ function TextBlock({
 }
 
 // components/page/CustomImage.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var alignmentMap2 = {
   left: "mr-auto",
   center: "mx-auto",
@@ -1278,9 +476,9 @@ function CustomImage({
   fitContent = false
 }) {
   if (!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__ */ jsx4("div", { className: "flex h-48 w-full items-center justify-center bg-gray-200 text-gray-400", children: "No image" });
   }
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx4(
     "img",
     {
       src: image,
@@ -1297,8 +495,8 @@ function CustomImage({
 
 // components/page/FeaturesList.tsx
 import { icons as icons2 } from "lucide-react";
-import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
-var sizeMap4 = {
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var sizeMap3 = {
   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" }
@@ -1310,12 +508,12 @@ function FeaturesList({
   iconColor = "#000000",
   anchorLink
 }) {
-  const sizeConfig = sizeMap4[size];
+  const sizeConfig = sizeMap3[size];
   const getIcon = (iconName) => {
     const formatted = iconName.charAt(0).toUpperCase() + iconName.slice(1);
     return icons2[formatted] || null;
   };
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx5(
     "div",
     {
       id: anchorLink,
@@ -1326,7 +524,7 @@ function FeaturesList({
       ),
       children: features.map((feature, index) => {
         const IconComponent = feature.icon ? getIcon(feature.icon) : null;
-        return /* @__PURE__ */ jsxs5(
+        return /* @__PURE__ */ jsxs3(
           "div",
           {
             className: cn(
@@ -1335,7 +533,7 @@ function FeaturesList({
               align === "right" && "flex-row-reverse"
             ),
             children: [
-              feature.image ? /* @__PURE__ */ jsx14(
+              feature.image ? /* @__PURE__ */ jsx5(
                 "img",
                 {
                   src: feature.image,
@@ -1343,7 +541,7 @@ function FeaturesList({
                   className: "object-contain",
                   style: { width: sizeConfig.icon, height: sizeConfig.icon }
                 }
-              ) : IconComponent ? /* @__PURE__ */ jsx14(
+              ) : IconComponent ? /* @__PURE__ */ jsx5(
                 IconComponent,
                 {
                   size: sizeConfig.icon,
@@ -1351,9 +549,9 @@ function FeaturesList({
                   className: "flex-shrink-0"
                 }
               ) : null,
-              /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-1", children: [
-                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 })
+              /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-1", children: [
+                feature.title && /* @__PURE__ */ jsx5("h3", { className: cn("font-semibold", sizeConfig.title), children: feature.title }),
+                feature.description && /* @__PURE__ */ jsx5("p", { className: cn("text-gray-600", sizeConfig.desc), children: feature.description })
               ] })
             ]
           },
@@ -1366,8 +564,8 @@ function FeaturesList({
 
 // components/page/FeatureGrid.tsx
 import { icons as icons3 } from "lucide-react";
-import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
-var sizeMap5 = {
+import { jsx as jsx6, jsxs as jsxs4 } 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" }
@@ -1383,7 +581,7 @@ function FeatureGrid({
   textColor = "#000000",
   anchorLink
 }) {
-  const sizeConfig = sizeMap5[size];
+  const sizeConfig = sizeMap4[size];
   const getIcon = (iconName) => {
     const formatted = iconName.charAt(0).toUpperCase() + iconName.slice(1);
     return icons3[formatted] || null;
@@ -1393,8 +591,8 @@ function FeatureGrid({
     3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
     4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
   };
-  return /* @__PURE__ */ jsxs6("div", { id: anchorLink, className: "flex flex-col gap-8", children: [
-    (heading || description) && /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs4("div", { id: anchorLink, className: "flex flex-col gap-8", children: [
+    (heading || description) && /* @__PURE__ */ jsxs4(
       "div",
       {
         className: cn(
@@ -1403,14 +601,14 @@ function FeatureGrid({
           align === "right" && "text-right"
         ),
         children: [
-          heading && /* @__PURE__ */ jsx15("h2", { className: "text-3xl font-bold", style: { color: textColor }, children: heading }),
-          description && /* @__PURE__ */ jsx15("p", { className: "text-gray-600", children: description })
+          heading && /* @__PURE__ */ jsx6("h2", { className: "text-3xl font-bold", style: { color: textColor }, children: heading }),
+          description && /* @__PURE__ */ jsx6("p", { className: "text-gray-600", children: description })
         ]
       }
     ),
-    /* @__PURE__ */ jsx15("div", { className: cn("grid gap-6", columnClass[columns]), children: features.map((feature, index) => {
+    /* @__PURE__ */ jsx6("div", { className: cn("grid gap-6", columnClass[columns]), children: features.map((feature, index) => {
       const IconComponent = feature.icon ? getIcon(feature.icon) : null;
-      return /* @__PURE__ */ jsxs6(
+      return /* @__PURE__ */ jsxs4(
         "div",
         {
           className: cn(
@@ -1418,7 +616,7 @@ function FeatureGrid({
             align === "center" && "items-center text-center"
           ),
           children: [
-            feature.image ? /* @__PURE__ */ jsx15(
+            feature.image ? /* @__PURE__ */ jsx6(
               "img",
               {
                 src: feature.image,
@@ -1426,14 +624,14 @@ function FeatureGrid({
                 className: "object-contain",
                 style: { width: sizeConfig.icon, height: sizeConfig.icon }
               }
-            ) : IconComponent ? /* @__PURE__ */ jsx15(
+            ) : IconComponent ? /* @__PURE__ */ jsx6(
               IconComponent,
               {
                 size: sizeConfig.icon,
                 style: { color: iconColor }
               }
             ) : null,
-            feature.title && /* @__PURE__ */ jsx15(
+            feature.title && /* @__PURE__ */ jsx6(
               "h3",
               {
                 className: cn("font-semibold", sizeConfig.title),
@@ -1441,7 +639,7 @@ function FeatureGrid({
                 children: feature.title
               }
             ),
-            feature.description && /* @__PURE__ */ jsx15("p", { className: cn("text-gray-600", sizeConfig.desc), children: feature.description })
+            feature.description && /* @__PURE__ */ jsx6("p", { className: cn("text-gray-600", sizeConfig.desc), children: feature.description })
           ]
         },
         index
@@ -1452,7 +650,7 @@ function FeatureGrid({
 
 // components/page/Footer.tsx
 import { Facebook, Instagram, Twitter } from "lucide-react";
-import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function Footer({
   logo,
   copyright = "\xA9 2024 Company. All rights reserved.",
@@ -1487,15 +685,15 @@ function Footer({
   ].filter(
     (link) => !!link.url
   );
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx7(
     "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__ */ 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(
+      children: /* @__PURE__ */ jsxs5("div", { className: "mx-auto flex max-w-7xl flex-col items-center justify-between gap-6 md:flex-row", children: [
+        /* @__PURE__ */ jsx7("div", { className: "flex items-center gap-4", children: logo && /* @__PURE__ */ jsx7("img", { src: logo, alt: "Logo", className: "h-8" }) }),
+        DropZone && /* @__PURE__ */ jsx7(DropZone, { zone: "footer-content" }),
+        /* @__PURE__ */ jsx7("div", { className: "flex items-center gap-4", children: socialLinks.map(({ url, Icon: Icon2 }, index) => /* @__PURE__ */ jsx7(
           "a",
           {
             href: url,
@@ -1503,20 +701,20 @@ function Footer({
             rel: "noopener noreferrer",
             className: "transition-opacity hover:opacity-80",
             onClick: () => handleSocialClick(url),
-            children: /* @__PURE__ */ jsx16(Icon3, { size: 24, style: { color: textColor } })
+            children: /* @__PURE__ */ jsx7(Icon2, { size: 24, style: { color: textColor } })
           },
           index
         )) }),
-        copyright && /* @__PURE__ */ jsx16("p", { className: "text-sm opacity-80", children: copyright })
+        copyright && /* @__PURE__ */ jsx7("p", { className: "text-sm opacity-80", children: copyright })
       ] })
     }
   );
 }
 
 // components/page/Topbar.tsx
-import { useState as useState2 } from "react";
+import { useState } from "react";
 import { Menu, X } from "lucide-react";
-import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function Topbar({
   logo,
   logoUrl = "/",
@@ -1527,7 +725,7 @@ function Topbar({
   puck
 }) {
   const DropZone = puck?.renderDropZone;
-  const [mobileMenuOpen, setMobileMenuOpen] = useState2(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const utm = useUtmParams();
   const sendEvent = useGtmEvent();
   const handleNavClick = (item) => {
@@ -1549,7 +747,7 @@ function Topbar({
   const renderLink = (item, index) => {
     const className = "hover:opacity-80 transition-opacity";
     if (item.linkType === "external") {
-      return /* @__PURE__ */ jsx17(
+      return /* @__PURE__ */ jsx8(
         "a",
         {
           href: item.url,
@@ -1563,7 +761,7 @@ function Topbar({
       );
     }
     if (item.linkType === "scrollTo") {
-      return /* @__PURE__ */ jsx17(
+      return /* @__PURE__ */ jsx8(
         "a",
         {
           href: item.url,
@@ -1574,7 +772,7 @@ function Topbar({
         index
       );
     }
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx8(
       "a",
       {
         href: item.url,
@@ -1585,19 +783,19 @@ function Topbar({
       index
     );
   };
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs6(
     "nav",
     {
       className: "sticky top-0 z-50 w-full px-6 py-4",
       style: { backgroundColor, color: textColor },
       children: [
-        /* @__PURE__ */ jsxs8(
+        /* @__PURE__ */ jsxs6(
           "div",
           {
             className: "mx-auto flex items-center justify-between",
             style: { maxWidth },
             children: [
-              /* @__PURE__ */ jsx17(
+              /* @__PURE__ */ jsx8(
                 "a",
                 {
                   href: logoUrl,
@@ -1608,25 +806,25 @@ function Topbar({
                     linkType: "internal",
                     ...utm
                   }),
-                  children: logo ? /* @__PURE__ */ jsx17("img", { src: logo, alt: "Logo", className: "h-8" }) : /* @__PURE__ */ jsx17("span", { className: "text-xl font-bold", children: "Logo" })
+                  children: logo ? /* @__PURE__ */ jsx8("img", { src: logo, alt: "Logo", className: "h-8" }) : /* @__PURE__ */ jsx8("span", { className: "text-xl font-bold", children: "Logo" })
                 }
               ),
-              /* @__PURE__ */ jsxs8("div", { className: "hidden items-center gap-8 md:flex", children: [
+              /* @__PURE__ */ jsxs6("div", { className: "hidden items-center gap-8 md:flex", children: [
                 navItems.map(renderLink),
-                DropZone && /* @__PURE__ */ jsx17(DropZone, { zone: "cta" })
+                DropZone && /* @__PURE__ */ jsx8(DropZone, { zone: "cta" })
               ] }),
-              /* @__PURE__ */ jsx17("button", { className: "md:hidden", onClick: handleMobileMenuToggle, children: mobileMenuOpen ? /* @__PURE__ */ jsx17(X, { size: 24 }) : /* @__PURE__ */ jsx17(Menu, { size: 24 }) })
+              /* @__PURE__ */ jsx8("button", { className: "md:hidden", onClick: handleMobileMenuToggle, children: mobileMenuOpen ? /* @__PURE__ */ jsx8(X, { size: 24 }) : /* @__PURE__ */ jsx8(Menu, { size: 24 }) })
             ]
           }
         ),
-        mobileMenuOpen && /* @__PURE__ */ jsxs8(
+        mobileMenuOpen && /* @__PURE__ */ jsxs6(
           "div",
           {
             className: "absolute top-full right-0 left-0 flex flex-col gap-4 px-6 py-4 md:hidden",
             style: { backgroundColor },
             children: [
               navItems.map(renderLink),
-              DropZone && /* @__PURE__ */ jsx17(DropZone, { zone: "cta" })
+              DropZone && /* @__PURE__ */ jsx8(DropZone, { zone: "cta" })
             ]
           }
         )
@@ -1636,21 +834,21 @@ function Topbar({
 }
 
 // components/page/Popup.tsx
-import { useState as useState3 } from "react";
+import { useState as useState2 } from "react";
 import { icons as icons4, X as X2 } from "lucide-react";
-import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
-function Icon2({ name, ...props }) {
+import { Fragment, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+function Icon({ name, ...props }) {
   const formatted = name.charAt(0).toUpperCase() + name.slice(1);
   const IconComponent = icons4[formatted];
   if (!IconComponent) return null;
-  return /* @__PURE__ */ jsx18(IconComponent, { ...props });
+  return /* @__PURE__ */ jsx9(IconComponent, { ...props });
 }
-var widthMap3 = {
+var widthMap = {
   small: "max-w-sm",
   medium: "max-w-lg",
   large: "max-w-2xl"
 };
-var sizeMap6 = {
+var sizeMap5 = {
   small: "px-3 py-1.5 text-sm",
   medium: "px-4 py-2 text-base",
   large: "px-6 py-3 text-lg"
@@ -1666,7 +864,7 @@ function Popup({
   textLink = false,
   puck
 }) {
-  const [isOpen, setIsOpen] = useState3(false);
+  const [isOpen, setIsOpen] = useState2(false);
   const utm = useUtmParams();
   const sendEvent = useGtmEvent();
   const handleOpen = () => {
@@ -1681,7 +879,7 @@ function Popup({
     setIsOpen(false);
     sendEvent("popup_close", { ctaText, ...utm });
   };
-  const trigger = textLink ? /* @__PURE__ */ jsx18(
+  const trigger = textLink ? /* @__PURE__ */ jsx9(
     "button",
     {
       onClick: handleOpen,
@@ -1689,47 +887,47 @@ function Popup({
       style: { color: buttonColor },
       children: ctaText
     }
-  ) : /* @__PURE__ */ jsxs9(
+  ) : /* @__PURE__ */ jsxs7(
     "button",
     {
       onClick: handleOpen,
       className: cn(
         "flex items-center gap-2 rounded-full font-medium",
-        sizeMap6[size]
+        sizeMap5[size]
       ),
       style: { backgroundColor: buttonColor, color: textColor },
       children: [
-        icon && iconPosition === "left" && /* @__PURE__ */ jsx18(Icon2, { name: icon, size: 18 }),
+        icon && iconPosition === "left" && /* @__PURE__ */ jsx9(Icon, { name: icon, size: 18 }),
         ctaText,
-        icon && iconPosition === "right" && /* @__PURE__ */ jsx18(Icon2, { name: icon, size: 18 })
+        icon && iconPosition === "right" && /* @__PURE__ */ jsx9(Icon, { name: icon, size: 18 })
       ]
     }
   );
-  return /* @__PURE__ */ jsxs9(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs7(Fragment, { children: [
     trigger,
-    isOpen && /* @__PURE__ */ jsx18(
+    isOpen && /* @__PURE__ */ jsx9(
       "div",
       {
         className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
         onClick: handleClose,
-        children: /* @__PURE__ */ jsxs9(
+        children: /* @__PURE__ */ jsxs7(
           "div",
           {
             className: cn(
               "relative w-full rounded-lg bg-white p-6",
-              widthMap3[width]
+              widthMap[width]
             ),
             onClick: (e) => e.stopPropagation(),
             children: [
-              /* @__PURE__ */ jsx18(
+              /* @__PURE__ */ jsx9(
                 "button",
                 {
                   onClick: handleClose,
                   className: "absolute top-4 right-4 text-gray-500 hover:text-gray-700",
-                  children: /* @__PURE__ */ jsx18(X2, { size: 24 })
+                  children: /* @__PURE__ */ jsx9(X2, { size: 24 })
                 }
               ),
-              puck && /* @__PURE__ */ jsx18(puck.renderDropZone, { zone: "popup-content" })
+              puck && /* @__PURE__ */ jsx9(puck.renderDropZone, { zone: "popup-content" })
             ]
           }
         )
@@ -1808,21 +1006,457 @@ function getParagraphStyle(props) {
   };
 }
 
+// components/page/primitives/Button.ts
+var sizeStyles = {
+  sm: { padding: "8px 16px", fontSize: "0.875rem" },
+  md: { padding: "12px 24px", fontSize: "1rem" },
+  lg: { padding: "16px 32px", fontSize: "1.125rem" },
+  xl: { padding: "20px 40px", fontSize: "1.25rem" }
+};
+var radiusMap2 = {
+  none: "0",
+  sm: "4px",
+  md: "8px",
+  lg: "16px",
+  full: "9999px"
+};
+function isThemeableValue3(value) {
+  return typeof value === "object" && value !== null && "useTheme" in value;
+}
+function isEntryBoundValue3(value) {
+  return typeof value === "object" && value !== null && "useEntry" in value;
+}
+function getBaseStyle(size, borderRadius, fullWidth) {
+  return {
+    ...sizeStyles[size],
+    borderRadius: radiusMap2[borderRadius],
+    fontWeight: 600,
+    cursor: "pointer",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    textDecoration: "none",
+    transition: "opacity 0.2s, transform 0.2s",
+    width: fullWidth ? "100%" : "auto",
+    border: "none"
+  };
+}
+function getVariantStyles(variant, bgColor, fgColor) {
+  const variantStyles = {
+    solid: {
+      backgroundColor: bgColor,
+      color: fgColor
+    },
+    outline: {
+      backgroundColor: "transparent",
+      color: bgColor,
+      border: `2px solid ${bgColor}`
+    },
+    ghost: {
+      backgroundColor: "transparent",
+      color: bgColor
+    },
+    link: {
+      backgroundColor: "transparent",
+      color: bgColor,
+      padding: "0",
+      textDecoration: "underline"
+    }
+  };
+  return variantStyles[variant] || variantStyles.solid;
+}
+function getWrapperStyle2(align) {
+  return {
+    display: "flex",
+    justifyContent: align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center"
+  };
+}
+
+// components/page/primitives/Image.ts
+var widthMap2 = {
+  auto: "auto",
+  full: "100%",
+  sm: "300px",
+  md: "500px",
+  lg: "700px",
+  xl: "900px"
+};
+var aspectRatioMap2 = {
+  auto: void 0,
+  "1:1": "1 / 1",
+  "4:3": "4 / 3",
+  "16:9": "16 / 9",
+  "21:9": "21 / 9"
+};
+var radiusMap3 = {
+  none: "0",
+  sm: "4px",
+  md: "8px",
+  lg: "16px",
+  xl: "24px",
+  full: "9999px"
+};
+var shadowMap = {
+  none: "none",
+  sm: "0 1px 2px rgba(0,0,0,0.05)",
+  md: "0 4px 6px rgba(0,0,0,0.1)",
+  lg: "0 10px 15px rgba(0,0,0,0.1)",
+  xl: "0 20px 25px rgba(0,0,0,0.15)"
+};
+function isThemeableValue4(value) {
+  return typeof value === "object" && value !== null && "useTheme" in value;
+}
+function isEntryBoundValue4(value) {
+  return typeof value === "object" && value !== null && "useEntry" in value;
+}
+function getWrapperStyle3(align) {
+  return {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center",
+    gap: "8px"
+  };
+}
+function getImageStyle(width, aspectRatio, objectFit, borderRadius, shadow) {
+  return {
+    width: widthMap2[width],
+    maxWidth: "100%",
+    aspectRatio: aspectRatioMap2[aspectRatio],
+    objectFit,
+    borderRadius: radiusMap3[borderRadius],
+    boxShadow: shadowMap[shadow],
+    display: "block"
+  };
+}
+function getCaptionStyle(align, width, captionColor) {
+  return {
+    fontSize: "0.875rem",
+    color: captionColor,
+    textAlign: align,
+    maxWidth: widthMap2[width]
+  };
+}
+
+// components/page/primitives/ImageCarousel.ts
+var aspectRatioMap3 = {
+  "16:9": "16 / 9",
+  "4:3": "4 / 3",
+  "1:1": "1 / 1",
+  "21:9": "21 / 9"
+};
+var radiusMap4 = {
+  none: "0",
+  sm: "4px",
+  md: "8px",
+  lg: "16px"
+};
+function isThemeableValue5(value) {
+  return typeof value === "object" && value !== null && "useTheme" in value;
+}
+function getContainerStyle(aspectRatio, borderRadius) {
+  return {
+    position: "relative",
+    aspectRatio: aspectRatioMap3[aspectRatio],
+    borderRadius: radiusMap4[borderRadius],
+    overflow: "hidden"
+  };
+}
+function getSlideContainerStyle(currentIndex) {
+  return {
+    display: "flex",
+    transition: "transform 0.3s ease-in-out",
+    transform: `translateX(-${currentIndex * 100}%)`,
+    height: "100%"
+  };
+}
+var slideStyle = {
+  minWidth: "100%",
+  height: "100%"
+};
+var imageStyle = {
+  width: "100%",
+  height: "100%",
+  objectFit: "cover"
+};
+function getArrowStyle(arrowColor) {
+  return {
+    position: "absolute",
+    top: "50%",
+    transform: "translateY(-50%)",
+    backgroundColor: "rgba(0,0,0,0.5)",
+    color: arrowColor,
+    border: "none",
+    borderRadius: "50%",
+    width: "40px",
+    height: "40px",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "20px",
+    zIndex: 1
+  };
+}
+var dotsContainerStyle = {
+  position: "absolute",
+  bottom: "16px",
+  left: "50%",
+  transform: "translateX(-50%)",
+  display: "flex",
+  gap: "8px",
+  zIndex: 1
+};
+function getDotStyle(isActive, dotColor) {
+  return {
+    width: "10px",
+    height: "10px",
+    borderRadius: "50%",
+    border: "none",
+    cursor: "pointer",
+    backgroundColor: isActive ? dotColor : "rgba(255,255,255,0.5)"
+  };
+}
+function getEmptyState(aspectRatio, borderRadius) {
+  return {
+    aspectRatio: aspectRatioMap3[aspectRatio],
+    backgroundColor: "#e5e7eb",
+    borderRadius: radiusMap4[borderRadius],
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: "#9ca3af"
+  };
+}
+
+// components/page/primitives/Section.ts
+function isThemeableValue6(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 (isThemeableValue6(bg)) {
+    if (bg.useTheme) {
+      const themeColor = resolveColor2(bg.themeKey);
+      return hexToRgba(themeColor.color, themeColor.opacity);
+    }
+    return hexToRgba(bg.value.color, bg.value.opacity);
+  }
+  if ("color" in bg && "opacity" in bg) {
+    return hexToRgba(bg.color, bg.opacity);
+  }
+  return void 0;
+}
+function getVisibilityClasses(visibility) {
+  if (!visibility) return "";
+  if (!visibility.mobile && !visibility.desktop) {
+    return "hidden";
+  }
+  if (!visibility.mobile && visibility.desktop) {
+    return "hidden md:block";
+  }
+  if (visibility.mobile && !visibility.desktop) {
+    return "md:hidden";
+  }
+  return "";
+}
+function getSectionStyle(verticalPadding, horizontalPadding, gap, backgroundColor, backgroundImage, shadow, borderRadius) {
+  return {
+    padding: `${verticalPadding}px ${horizontalPadding}px`,
+    gap: `${gap}px`,
+    backgroundColor,
+    backgroundImage: backgroundImage ? `url(${backgroundImage})` : void 0,
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+    borderRadius: `${borderRadius}px`
+  };
+}
+
+// components/page/primitives/Container.ts
+var maxWidthMap2 = {
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+  "2xl": "1536px",
+  full: "100%"
+};
+var paddingMap = {
+  none: "0",
+  sm: "16px",
+  md: "24px",
+  lg: "32px",
+  xl: "48px"
+};
+function isThemeableValue7(value) {
+  return typeof value === "object" && value !== null && "useTheme" in value;
+}
+function getContainerStyle2(maxWidth, paddingX, paddingY, centered, backgroundColor) {
+  return {
+    maxWidth: maxWidthMap2[maxWidth],
+    marginLeft: centered ? "auto" : void 0,
+    marginRight: centered ? "auto" : void 0,
+    paddingLeft: paddingMap[paddingX],
+    paddingRight: paddingMap[paddingX],
+    paddingTop: paddingMap[paddingY],
+    paddingBottom: paddingMap[paddingY],
+    backgroundColor,
+    width: "100%"
+  };
+}
+
+// components/page/primitives/Columns.ts
+var gapMap = {
+  none: "0",
+  sm: "16px",
+  md: "24px",
+  lg: "32px",
+  xl: "48px"
+};
+var alignMap = {
+  top: "flex-start",
+  center: "center",
+  bottom: "flex-end",
+  stretch: "stretch"
+};
+function getContainerStyle3(columns, gap, verticalAlign) {
+  return {
+    display: "grid",
+    gridTemplateColumns: `repeat(${columns}, 1fr)`,
+    gap: gapMap[gap],
+    alignItems: alignMap[verticalAlign]
+  };
+}
+
+// components/page/primitives/Card.ts
+var borderWidthMap = {
+  none: "0",
+  thin: "1px",
+  medium: "2px",
+  thick: "4px"
+};
+var radiusMap5 = {
+  none: "0",
+  sm: "4px",
+  md: "8px",
+  lg: "16px",
+  xl: "24px"
+};
+var shadowMap2 = {
+  none: "none",
+  sm: "0 1px 2px rgba(0,0,0,0.05)",
+  md: "0 4px 6px rgba(0,0,0,0.1)",
+  lg: "0 10px 15px rgba(0,0,0,0.1)",
+  xl: "0 20px 25px rgba(0,0,0,0.15)"
+};
+var paddingMap2 = {
+  none: "0",
+  sm: "16px",
+  md: "24px",
+  lg: "32px",
+  xl: "48px"
+};
+function isThemeableValue8(value) {
+  return typeof value === "object" && value !== null && "useTheme" in value;
+}
+function getCardStyle(backgroundColor, borderColor, borderWidth, borderRadius, shadow, padding) {
+  return {
+    backgroundColor,
+    border: borderWidth !== "none" ? `${borderWidthMap[borderWidth]} solid ${borderColor}` : "none",
+    borderRadius: radiusMap5[borderRadius],
+    boxShadow: shadowMap2[shadow],
+    padding: paddingMap2[padding]
+  };
+}
+
+// components/page/primitives/Divider.ts
+var thicknessMap = {
+  thin: "1px",
+  medium: "2px",
+  thick: "4px"
+};
+var widthMap3 = {
+  full: "100%",
+  "3/4": "75%",
+  "1/2": "50%",
+  "1/4": "25%"
+};
+var spacingMap = {
+  sm: "16px",
+  md: "24px",
+  lg: "32px",
+  xl: "48px"
+};
+function isThemeableValue9(value) {
+  return typeof value === "object" && value !== null && "useTheme" in value;
+}
+function getWrapperStyle4(align, spacing) {
+  return {
+    display: "flex",
+    justifyContent: align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center",
+    padding: `${spacingMap[spacing]} 0`
+  };
+}
+function getHrStyle(width, thickness, lineStyle, color) {
+  return {
+    width: widthMap3[width],
+    border: "none",
+    borderTop: `${thicknessMap[thickness]} ${lineStyle} ${color}`,
+    margin: 0
+  };
+}
+
+// components/page/primitives/Spacer.ts
+var sizeMap6 = {
+  xs: "8px",
+  sm: "16px",
+  md: "24px",
+  lg: "32px",
+  xl: "48px",
+  "2xl": "64px",
+  "3xl": "96px"
+};
+
 export {
   getHeadingStyle,
   getParagraphStyle,
-  Button,
-  Image,
-  ImageCarousel,
+  isThemeableValue3 as isThemeableValue,
+  isEntryBoundValue3 as isEntryBoundValue,
+  getBaseStyle,
+  getVariantStyles,
+  getWrapperStyle2 as getWrapperStyle,
+  isThemeableValue4 as isThemeableValue2,
+  isEntryBoundValue4 as isEntryBoundValue2,
+  getWrapperStyle3 as getWrapperStyle2,
+  getImageStyle,
+  getCaptionStyle,
+  isThemeableValue5 as isThemeableValue3,
+  getContainerStyle,
+  getSlideContainerStyle,
+  slideStyle,
+  imageStyle,
+  getArrowStyle,
+  dotsContainerStyle,
+  getDotStyle,
+  getEmptyState,
   VideoEmbed,
-  Icon,
+  sizeMap,
+  icons,
+  isThemeableValue as isThemeableValue4,
+  getWrapperStyle as getWrapperStyle3,
   availableIcons,
-  Section,
-  Container,
-  Columns,
-  Card,
-  Divider,
-  Spacer,
+  resolveBackgroundColor,
+  getVisibilityClasses,
+  getSectionStyle,
+  isThemeableValue7 as isThemeableValue5,
+  getContainerStyle2,
+  getContainerStyle3,
+  isThemeableValue8 as isThemeableValue6,
+  getCardStyle,
+  isThemeableValue9 as isThemeableValue7,
+  getWrapperStyle4,
+  getHrStyle,
+  sizeMap6 as sizeMap2,
   TextBlock,
   CustomImage,
   FeaturesList,