@mission-studio/puck 1.0.0

package/dist/chunk-ZZF2BIMW.mjs

@@ -0,0 +1,1799 @@
+import {
+  cn,
+  getShadowCSS,
+  hexToRgba,
+  useEntries,
+  useTheme
+} from "./chunk-TTKY3YGP.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";
+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 radiusMap = {
+  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 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 resolvedText = (() => {
+    if (!text) return "Button";
+    if (typeof text === "string") return text;
+    if (isEntryBoundValue3(text)) {
+      if (text.useEntry) {
+        return String(getEntryValue(text.entryName, text.fieldKey) ?? "Button");
+      }
+      return text.value;
+    }
+    return "Button";
+  })();
+  const resolvedColor = (() => {
+    if (!color) return resolveColor2("primary");
+    if (typeof color === "string") return { color, opacity: 100 };
+    if (isThemeableValue3(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 (isThemeableValue3(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__ */ jsx3("span", { style, children: resolvedText });
+  if (href) {
+    return /* @__PURE__ */ jsx3("div", { style: wrapperStyle, children: /* @__PURE__ */ jsx3(
+      "a",
+      {
+        id,
+        href,
+        target,
+        style,
+        rel: target === "_blank" ? "noopener noreferrer" : void 0,
+        children: resolvedText
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx3("div", { style: wrapperStyle, children: /* @__PURE__ */ jsx3("button", { id, type: "button", style, children: resolvedText }) });
+}
+
+// components/page/Image.tsx
+import { jsx as jsx4, 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 isThemeableValue4(value) {
+  return typeof value === "object" && value !== null && "useTheme" in value;
+}
+function isEntryBoundValue4(value) {
+  return typeof value === "object" && value !== null && "useEntry" in value;
+}
+function Image({
+  src,
+  alt = "",
+  width = "full",
+  aspectRatio = "auto",
+  objectFit = "cover",
+  borderRadius = "none",
+  shadow = "none",
+  align = "center",
+  caption,
+  captionColor,
+  id
+}) {
+  const { resolveColor: resolveColor2 } = useTheme();
+  const { getEntryValue } = useEntries();
+  const resolvedSrc = (() => {
+    if (!src) return "";
+    if (typeof src === "string") return src;
+    if (isEntryBoundValue4(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 (isEntryBoundValue4(caption)) {
+      if (caption.useEntry) {
+        return String(getEntryValue(caption.entryName, caption.fieldKey) ?? "");
+      }
+      return caption.value;
+    }
+    return "";
+  })();
+  const resolvedCaptionColor = (() => {
+    if (!captionColor) return resolveColor2("muted");
+    if (typeof captionColor === "string")
+      return { color: captionColor, opacity: 100 };
+    if (isThemeableValue4(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__ */ jsx4("div", { style: wrapperStyle, children: /* @__PURE__ */ jsx4(
+      "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__ */ jsx4("img", { src: resolvedSrc, alt, style: imageStyle, loading: "lazy" }),
+    resolvedCaption && /* @__PURE__ */ jsx4("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";
+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 isThemeableValue5(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 resolvedArrowColor = (() => {
+    if (!arrowColor) return { color: "#FFFFFF", opacity: 100 };
+    if (typeof arrowColor === "string")
+      return { color: arrowColor, opacity: 100 };
+    if (isThemeableValue5(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 (isThemeableValue5(dotColor)) {
+      return dotColor.useTheme ? resolveColor2(dotColor.themeKey) : dotColor.value;
+    }
+    if ("color" in dotColor) return dotColor;
+    return resolveColor2("primary");
+  })();
+  const goToPrevious = () => {
+    setCurrentIndex((prev) => prev === 0 ? images.length - 1 : prev - 1);
+  };
+  const goToNext = () => {
+    setCurrentIndex((prev) => prev === images.length - 1 ? 0 : prev + 1);
+  };
+  const goToSlide = (index) => {
+    setCurrentIndex(index);
+  };
+  if (images.length === 0) {
+    return /* @__PURE__ */ jsx5(
+      "div",
+      {
+        style: {
+          aspectRatio: aspectRatioMap2[aspectRatio],
+          backgroundColor: "#e5e7eb",
+          borderRadius: radiusMap3[borderRadius],
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "#9ca3af"
+        },
+        children: "No images"
+      }
+    );
+  }
+  const containerStyle = {
+    position: "relative",
+    aspectRatio: aspectRatioMap2[aspectRatio],
+    borderRadius: radiusMap3[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 = {
+    width: "100%",
+    height: "100%",
+    objectFit: "cover"
+  };
+  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__ */ jsx5("div", { style: slideContainerStyle, children: images.map((image, index) => /* @__PURE__ */ jsx5("div", { style: slideStyle, children: /* @__PURE__ */ jsx5(
+      "img",
+      {
+        src: image.src,
+        alt: image.alt || "",
+        style: imageStyle,
+        loading: "lazy"
+      }
+    ) }, index)) }),
+    showArrows && images.length > 1 && /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          onClick: goToPrevious,
+          style: { ...arrowStyle, left: "16px" },
+          "aria-label": "Previous slide",
+          children: "\u2039"
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          onClick: goToNext,
+          style: { ...arrowStyle, right: "16px" },
+          "aria-label": "Next slide",
+          children: "\u203A"
+        }
+      )
+    ] }),
+    showDots && images.length > 1 && /* @__PURE__ */ jsx5("div", { style: dotsContainerStyle, children: images.map((_, index) => /* @__PURE__ */ jsx5(
+      "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 jsx6 } 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 isEntryBoundValue5(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 (isEntryBoundValue5(url)) {
+      if (url.useEntry) {
+        return String(getEntryValue(url.entryName, url.fieldKey) ?? "");
+      }
+      return url.value;
+    }
+    return "";
+  })();
+  if (!resolvedUrl) {
+    return /* @__PURE__ */ jsx6(
+      "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__ */ jsx6("div", { id, style: wrapperStyle, children: /* @__PURE__ */ jsx6("div", { style: containerStyle, children: /* @__PURE__ */ jsx6(
+    "iframe",
+    {
+      src: finalUrl,
+      style: iframeStyle,
+      allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+      allowFullScreen: true,
+      loading: "lazy"
+    }
+  ) }) });
+}
+
+// components/page/Icon.tsx
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var sizeMap3 = {
+  sm: { size: "16px", strokeWidth: 2 },
+  md: { size: "24px", strokeWidth: 2 },
+  lg: { size: "32px", strokeWidth: 1.5 },
+  xl: { size: "48px", strokeWidth: 1.5 },
+  "2xl": { size: "64px", strokeWidth: 1.5 }
+};
+var icons = {
+  check: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsx7(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx7("polyline", { points: "20 6 9 17 4 12" })
+    }
+  ),
+  x: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsxs3(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth,
+      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" })
+      ]
+    }
+  ),
+  star: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsx7(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: color,
+      stroke: color,
+      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" })
+    }
+  ),
+  heart: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsx7(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      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" })
+    }
+  ),
+  arrowRight: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsxs3(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth,
+      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" })
+      ]
+    }
+  ),
+  arrowLeft: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsxs3(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth,
+      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" })
+      ]
+    }
+  ),
+  mail: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsxs3(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth,
+      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" })
+      ]
+    }
+  ),
+  phone: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsx7(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      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" })
+    }
+  ),
+  mapPin: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsxs3(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth,
+      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" })
+      ]
+    }
+  ),
+  zap: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsx7(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx7("polygon", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2" })
+    }
+  ),
+  shield: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsx7(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx7("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" })
+    }
+  ),
+  users: ({ size, color, strokeWidth }) => /* @__PURE__ */ jsxs3(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth,
+      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" })
+      ]
+    }
+  )
+};
+function isThemeableValue6(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 (isThemeableValue6(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 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(
+    IconComponent,
+    {
+      size: iconSize,
+      color: colorValue,
+      strokeWidth
+    }
+  ) });
+}
+var availableIcons = Object.keys(icons);
+
+// components/page/Section.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function isThemeableValue7(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 (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 Section({
+  children: _children,
+  verticalPadding = 48,
+  horizontalPadding = 32,
+  gap = 24,
+  backgroundColor,
+  backgroundImage,
+  shadow = "none",
+  borderRadius = 0,
+  contentMaxWidth = "1400px",
+  anchorLink,
+  visibility,
+  puck
+}) {
+  const { resolveColor: resolveColor2 } = useTheme();
+  const DropZone = puck?.renderDropZone;
+  return /* @__PURE__ */ jsx8(
+    "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__ */ jsx8("div", { className: "mx-auto w-full", style: { maxWidth: contentMaxWidth }, children: DropZone && /* @__PURE__ */ jsx8(DropZone, { zone: "content" }) })
+    }
+  );
+}
+
+// components/page/Container.tsx
+import { jsx as jsx9 } 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 isThemeableValue8(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 (isThemeableValue8(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__ */ jsx9("div", { id, style, children: DropZone && /* @__PURE__ */ jsx9(DropZone, { zone: "container-content" }) });
+}
+
+// components/page/Columns.tsx
+import { jsx as jsx10 } 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__ */ 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)) });
+}
+
+// components/page/Card.tsx
+import { jsx as jsx11 } 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 isThemeableValue9(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 (isThemeableValue9(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 (isThemeableValue9(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__ */ jsx11("div", { id, style, children: DropZone && /* @__PURE__ */ jsx11(DropZone, { zone: "card-content" }) });
+}
+
+// components/page/Divider.tsx
+import { jsx as jsx12 } 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 isThemeableValue10(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 (isThemeableValue10(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__ */ jsx12("div", { id, style: wrapperStyle, children: /* @__PURE__ */ jsx12("hr", { style: hrStyle }) });
+}
+
+// components/page/Spacer.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var sizeMap4 = {
+  xs: "8px",
+  sm: "16px",
+  md: "24px",
+  lg: "32px",
+  xl: "48px",
+  "2xl": "64px",
+  "3xl": "96px"
+};
+function Spacer({ size = "md", id }) {
+  const style = {
+    height: sizeMap4[size],
+    width: "100%"
+  };
+  return /* @__PURE__ */ jsx13("div", { id, style, "aria-hidden": "true" });
+}
+
+// components/page/TextBlock.tsx
+import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
+var alignmentMap = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right"
+};
+var sizeMap5 = {
+  small: "text-2xl",
+  "medium-small": "text-3xl",
+  medium: "text-4xl",
+  large: "text-5xl",
+  xlarge: "text-6xl"
+};
+function isThemeableValue11(value) {
+  return typeof value === "object" && value !== null && "useTheme" in value;
+}
+function isEntryBoundValue6(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 (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 (isThemeableValue11(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 (isEntryBoundValue6(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",
+    {
+      id: anchorLink,
+      className: cn("flex flex-col gap-4", alignmentMap[alignment]),
+      children: [
+        resolvedTitle && /* @__PURE__ */ jsx14(
+          "h2",
+          {
+            className: cn("font-bold", sizeMap5[textSize]),
+            style: gradientStyle,
+            children: resolvedTitle
+          }
+        ),
+        resolvedSubtitle && /* @__PURE__ */ jsx14("p", { className: "text-xl", style: { color: subtitleColorValue }, children: resolvedSubtitle }),
+        resolvedBody && /* @__PURE__ */ jsx14(
+          "div",
+          {
+            className: "prose max-w-none",
+            style: { color: subtitleColorValue },
+            dangerouslySetInnerHTML: { __html: resolvedBody }
+          }
+        )
+      ]
+    }
+  );
+}
+
+// components/page/CustomImage.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+var alignmentMap2 = {
+  left: "mr-auto",
+  center: "mx-auto",
+  right: "ml-auto"
+};
+function CustomImage({
+  image,
+  alt = "",
+  maxWidth,
+  alignment = "center",
+  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__ */ jsx15(
+    "img",
+    {
+      src: image,
+      alt,
+      className: cn(
+        "block",
+        alignmentMap2[alignment],
+        fitContent && "h-full w-full object-cover"
+      ),
+      style: { maxWidth: maxWidth ? `${maxWidth}px` : void 0 }
+    }
+  );
+}
+
+// components/page/FeaturesList.tsx
+import { icons as icons2 } from "lucide-react";
+import { jsx as jsx16, jsxs as jsxs5 } from "react/jsx-runtime";
+var sizeMap6 = {
+  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" }
+};
+function FeaturesList({
+  features = [],
+  align = "left",
+  size = "medium",
+  iconColor = "#000000",
+  anchorLink
+}) {
+  const sizeConfig = sizeMap6[size];
+  const getIcon = (iconName) => {
+    const formatted = iconName.charAt(0).toUpperCase() + iconName.slice(1);
+    return icons2[formatted] || null;
+  };
+  return /* @__PURE__ */ jsx16(
+    "div",
+    {
+      id: anchorLink,
+      className: cn(
+        "flex flex-col gap-6",
+        align === "center" && "items-center text-center",
+        align === "right" && "items-end text-right"
+      ),
+      children: features.map((feature, index) => {
+        const IconComponent = feature.icon ? getIcon(feature.icon) : null;
+        return /* @__PURE__ */ jsxs5(
+          "div",
+          {
+            className: cn(
+              "flex gap-4",
+              align === "center" && "flex-col items-center",
+              align === "right" && "flex-row-reverse"
+            ),
+            children: [
+              feature.image ? /* @__PURE__ */ jsx16(
+                "img",
+                {
+                  src: feature.image,
+                  alt: feature.title || "",
+                  className: "object-contain",
+                  style: { width: sizeConfig.icon, height: sizeConfig.icon }
+                }
+              ) : IconComponent ? /* @__PURE__ */ jsx16(
+                IconComponent,
+                {
+                  size: sizeConfig.icon,
+                  style: { color: iconColor },
+                  className: "flex-shrink-0"
+                }
+              ) : 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 })
+              ] })
+            ]
+          },
+          index
+        );
+      })
+    }
+  );
+}
+
+// components/page/FeatureGrid.tsx
+import { icons as icons3 } from "lucide-react";
+import { jsx as jsx17, jsxs as jsxs6 } from "react/jsx-runtime";
+var sizeMap7 = {
+  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" }
+};
+function FeatureGrid({
+  heading,
+  description,
+  features = [],
+  columns = 3,
+  align = "left",
+  size = "medium",
+  iconColor = "#3B82F6",
+  textColor = "#000000",
+  anchorLink
+}) {
+  const sizeConfig = sizeMap7[size];
+  const getIcon = (iconName) => {
+    const formatted = iconName.charAt(0).toUpperCase() + iconName.slice(1);
+    return icons3[formatted] || null;
+  };
+  const columnClass = {
+    2: "grid-cols-1 md:grid-cols-2",
+    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(
+      "div",
+      {
+        className: cn(
+          "flex flex-col gap-2",
+          align === "center" && "text-center",
+          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 })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx17("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",
+        {
+          className: cn(
+            "flex flex-col gap-3 rounded-lg bg-gray-50 p-6",
+            align === "center" && "items-center text-center"
+          ),
+          children: [
+            feature.image ? /* @__PURE__ */ jsx17(
+              "img",
+              {
+                src: feature.image,
+                alt: feature.title || "",
+                className: "object-contain",
+                style: { width: sizeConfig.icon, height: sizeConfig.icon }
+              }
+            ) : IconComponent ? /* @__PURE__ */ jsx17(
+              IconComponent,
+              {
+                size: sizeConfig.icon,
+                style: { color: iconColor }
+              }
+            ) : null,
+            feature.title && /* @__PURE__ */ jsx17(
+              "h3",
+              {
+                className: cn("font-semibold", sizeConfig.title),
+                style: { color: textColor },
+                children: feature.title
+              }
+            ),
+            feature.description && /* @__PURE__ */ jsx17("p", { className: cn("text-gray-600", sizeConfig.desc), children: feature.description })
+          ]
+        },
+        index
+      );
+    }) })
+  ] });
+}
+
+// components/page/Footer.tsx
+import { Facebook, Instagram, Twitter } from "lucide-react";
+import { jsx as jsx18, jsxs as jsxs7 } from "react/jsx-runtime";
+function Footer({
+  logo,
+  copyright = "\xA9 2024 Company. All rights reserved.",
+  backgroundColor = "#111827",
+  textColor = "#ffffff",
+  facebookUrl,
+  instagramUrl,
+  twitterUrl,
+  puck
+}) {
+  const DropZone = puck?.renderDropZone;
+  const socialLinks = [
+    { url: facebookUrl, Icon: Facebook },
+    { url: instagramUrl, Icon: Instagram },
+    { url: twitterUrl, Icon: Twitter }
+  ].filter((link) => link.url);
+  return /* @__PURE__ */ jsx18(
+    "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(
+          "a",
+          {
+            href: url,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "transition-opacity hover:opacity-80",
+            children: /* @__PURE__ */ jsx18(Icon3, { size: 24, style: { color: textColor } })
+          },
+          index
+        )) }),
+        copyright && /* @__PURE__ */ jsx18("p", { className: "text-sm opacity-80", children: copyright })
+      ] })
+    }
+  );
+}
+
+// components/page/Topbar.tsx
+import { useState as useState2 } from "react";
+import Link from "next/link";
+import { Menu, X } from "lucide-react";
+import { jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
+function Topbar({
+  logo,
+  logoUrl = "/",
+  navItems = [],
+  backgroundColor = "#ffffff",
+  textColor = "#000000",
+  maxWidth = "1400px",
+  puck
+}) {
+  const DropZone = puck?.renderDropZone;
+  const [mobileMenuOpen, setMobileMenuOpen] = useState2(false);
+  const renderLink = (item, index) => {
+    const className = "hover:opacity-80 transition-opacity";
+    if (item.linkType === "external") {
+      return /* @__PURE__ */ jsx19(
+        "a",
+        {
+          href: item.url,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className,
+          children: item.name
+        },
+        index
+      );
+    }
+    if (item.linkType === "scrollTo") {
+      return /* @__PURE__ */ jsx19("a", { href: item.url, className, children: item.name }, index);
+    }
+    return /* @__PURE__ */ jsx19(Link, { href: item.url, className, children: item.name }, index);
+  };
+  return /* @__PURE__ */ jsxs8(
+    "nav",
+    {
+      className: "sticky top-0 z-50 w-full px-6 py-4",
+      style: { backgroundColor, color: textColor },
+      children: [
+        /* @__PURE__ */ jsxs8(
+          "div",
+          {
+            className: "mx-auto flex items-center justify-between",
+            style: { maxWidth },
+            children: [
+              /* @__PURE__ */ jsx19(Link, { href: logoUrl, className: "flex-shrink-0", children: logo ? /* @__PURE__ */ jsx19("img", { src: logo, alt: "Logo", className: "h-8" }) : /* @__PURE__ */ jsx19("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" })
+              ] }),
+              /* @__PURE__ */ jsx19(
+                "button",
+                {
+                  className: "md:hidden",
+                  onClick: () => setMobileMenuOpen(!mobileMenuOpen),
+                  children: mobileMenuOpen ? /* @__PURE__ */ jsx19(X, { size: 24 }) : /* @__PURE__ */ jsx19(Menu, { size: 24 })
+                }
+              )
+            ]
+          }
+        ),
+        mobileMenuOpen && /* @__PURE__ */ jsxs8(
+          "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__ */ jsx19(DropZone, { zone: "cta" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// 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";
+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 });
+}
+var widthMap3 = {
+  small: "max-w-sm",
+  medium: "max-w-lg",
+  large: "max-w-2xl"
+};
+var sizeMap8 = {
+  small: "px-3 py-1.5 text-sm",
+  medium: "px-4 py-2 text-base",
+  large: "px-6 py-3 text-lg"
+};
+function Popup({
+  ctaText = "Open",
+  buttonColor = "#3B82F6",
+  textColor = "#ffffff",
+  icon,
+  iconPosition = "left",
+  size = "medium",
+  width = "medium",
+  textLink = false,
+  puck
+}) {
+  const [isOpen, setIsOpen] = useState3(false);
+  const trigger = textLink ? /* @__PURE__ */ jsx20(
+    "button",
+    {
+      onClick: () => setIsOpen(true),
+      className: "underline hover:opacity-80",
+      style: { color: buttonColor },
+      children: ctaText
+    }
+  ) : /* @__PURE__ */ jsxs9(
+    "button",
+    {
+      onClick: () => setIsOpen(true),
+      className: cn(
+        "flex items-center gap-2 rounded-full font-medium",
+        sizeMap8[size]
+      ),
+      style: { backgroundColor: buttonColor, color: textColor },
+      children: [
+        icon && iconPosition === "left" && /* @__PURE__ */ jsx20(Icon2, { name: icon, size: 18 }),
+        ctaText,
+        icon && iconPosition === "right" && /* @__PURE__ */ jsx20(Icon2, { name: icon, size: 18 })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs9(Fragment2, { children: [
+    trigger,
+    isOpen && /* @__PURE__ */ jsx20(
+      "div",
+      {
+        className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
+        onClick: () => setIsOpen(false),
+        children: /* @__PURE__ */ jsxs9(
+          "div",
+          {
+            className: cn(
+              "relative w-full rounded-lg bg-white p-6",
+              widthMap3[width]
+            ),
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsx20(
+                "button",
+                {
+                  onClick: () => setIsOpen(false),
+                  className: "absolute top-4 right-4 text-gray-500 hover:text-gray-700",
+                  children: /* @__PURE__ */ jsx20(X2, { size: 24 })
+                }
+              ),
+              puck && /* @__PURE__ */ jsx20(puck.renderDropZone, { zone: "popup-content" })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+
+export {
+  Heading,
+  Paragraph,
+  Button,
+  Image,
+  ImageCarousel,
+  VideoEmbed,
+  Icon,
+  availableIcons,
+  Section,
+  Container,
+  Columns,
+  Card,
+  Divider,
+  Spacer,
+  TextBlock,
+  CustomImage,
+  FeaturesList,
+  FeatureGrid,
+  Footer,
+  Topbar,
+  Popup
+};