@mission-studio/puck 1.0.0

package/dist/index.js

@@ -0,0 +1,2106 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// index.ts
+var index_exports = {};
+__export(index_exports, {
+  Button: () => Button,
+  Card: () => Card,
+  Columns: () => Columns,
+  Container: () => Container,
+  CustomImage: () => CustomImage,
+  DEFAULT_THEME: () => DEFAULT_THEME,
+  Divider: () => Divider,
+  FeatureGrid: () => FeatureGrid,
+  FeaturesList: () => FeaturesList,
+  Footer: () => Footer,
+  Heading: () => Heading,
+  Icon: () => Icon,
+  Image: () => Image,
+  ImageCarousel: () => ImageCarousel,
+  Paragraph: () => Paragraph,
+  Popup: () => Popup,
+  Section: () => Section,
+  Spacer: () => Spacer,
+  TextBlock: () => TextBlock,
+  ThemeProvider: () => ThemeProvider,
+  Topbar: () => Topbar,
+  VideoEmbed: () => VideoEmbed,
+  allColorPresets: () => allColorPresets,
+  availableIcons: () => availableIcons,
+  borderRadiusScale: () => borderRadiusScale,
+  fontFamilies: () => fontFamilies,
+  fontSizes: () => fontSizes,
+  fontWeights: () => fontWeights,
+  getBorderRadiusCSS: () => getBorderRadiusCSS,
+  getClosestBorderRadiusValue: () => getClosestBorderRadiusValue,
+  getClosestSpacingValue: () => getClosestSpacingValue,
+  getFontSizeCSS: () => getFontSizeCSS,
+  getShadowCSS: () => getShadowCSS,
+  neutralColors: () => neutralColors,
+  shadowPresets: () => shadowPresets,
+  spacingScale: () => spacingScale,
+  useTheme: () => useTheme
+});
+module.exports = __toCommonJS(index_exports);
+
+// entries/context.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var EntriesContext = (0, import_react.createContext)(null);
+function useEntries() {
+  const context = (0, import_react.useContext)(EntriesContext);
+  if (!context) {
+    return {
+      entries: [],
+      entryNames: [],
+      getEntry: () => void 0,
+      getEntryValue: () => void 0
+    };
+  }
+  return context;
+}
+
+// theme/context.tsx
+var import_react2 = require("react");
+
+// theme/defaults.ts
+var DEFAULT_THEME = {
+  id: "default",
+  name: "Default Theme",
+  colors: {
+    primary: { color: "#3B82F6", opacity: 100 },
+    secondary: { color: "#8B5CF6", opacity: 100 },
+    accent: { color: "#10B981", opacity: 100 },
+    background: { color: "#FFFFFF", opacity: 100 },
+    foreground: { color: "#111827", opacity: 100 },
+    muted: { color: "#F3F4F6", opacity: 100 }
+  },
+  typography: {
+    fontFamily: {
+      heading: "system-ui, sans-serif",
+      body: "system-ui, sans-serif"
+    },
+    fontSize: {
+      base: "base",
+      heading: "4xl"
+    },
+    fontWeight: {
+      normal: 400,
+      heading: 700
+    }
+  },
+  spacing: {
+    xs: 8,
+    sm: 12,
+    md: 16,
+    lg: 24,
+    xl: 32
+  },
+  borders: {
+    radiusSmall: 4,
+    radiusMedium: 8,
+    radiusLarge: 16
+  },
+  shadows: {
+    small: "sm",
+    medium: "md",
+    large: "lg"
+  }
+};
+
+// theme/context.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ThemeContext = (0, import_react2.createContext)(null);
+function ThemeProvider({
+  theme,
+  children
+}) {
+  const activeTheme = theme ?? DEFAULT_THEME;
+  const contextValue = {
+    theme: activeTheme,
+    resolveColor: (key) => activeTheme.colors[key],
+    resolveSpacing: (key) => activeTheme.spacing[key],
+    resolveBorderRadius: (key) => activeTheme.borders[key],
+    resolveShadow: (key) => activeTheme.shadows[key]
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ThemeContext.Provider, { value: contextValue, children });
+}
+function useTheme() {
+  const context = (0, import_react2.useContext)(ThemeContext);
+  if (!context) {
+    return {
+      theme: DEFAULT_THEME,
+      resolveColor: (key) => DEFAULT_THEME.colors[key],
+      resolveSpacing: (key) => DEFAULT_THEME.spacing[key],
+      resolveBorderRadius: (key) => DEFAULT_THEME.borders[key],
+      resolveShadow: (key) => DEFAULT_THEME.shadows[key]
+    };
+  }
+  return context;
+}
+
+// utils/index.ts
+var import_tailwind_merge = require("tailwind-merge");
+var import_clsx = require("clsx");
+function hexToRgba(hex, opacity) {
+  const sanitized = hex.replace("#", "");
+  const r = parseInt(sanitized.slice(0, 2), 16);
+  const g = parseInt(sanitized.slice(2, 4), 16);
+  const b = parseInt(sanitized.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${opacity / 100})`;
+}
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// components/page/Heading.tsx
+var import_jsx_runtime3 = require("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__ */ (0, import_jsx_runtime3.jsx)(Tag, { id, style, children: resolvedText });
+}
+
+// components/page/Paragraph.tsx
+var import_jsx_runtime4 = require("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__ */ (0, import_jsx_runtime4.jsx)("p", { id, style, children: resolvedText });
+}
+
+// components/page/Button.tsx
+var import_jsx_runtime5 = require("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__ */ (0, import_jsx_runtime5.jsx)("span", { style, children: resolvedText });
+  if (href) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "a",
+      {
+        id,
+        href,
+        target,
+        style,
+        rel: target === "_blank" ? "noopener noreferrer" : void 0,
+        children: resolvedText
+      }
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { id, type: "button", style, children: resolvedText }) });
+}
+
+// components/page/Image.tsx
+var import_jsx_runtime6 = require("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__ */ (0, import_jsx_runtime6.jsx)("div", { style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "div",
+      {
+        style: {
+          ...imageStyle,
+          backgroundColor: "#e5e7eb",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          minHeight: "200px",
+          color: "#9ca3af"
+        },
+        children: "No image"
+      }
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("figure", { id, style: { ...wrapperStyle, margin: 0 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("img", { src: resolvedSrc, alt, style: imageStyle, loading: "lazy" }),
+    resolvedCaption && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("figcaption", { style: captionStyle, children: resolvedCaption })
+  ] });
+}
+
+// components/page/ImageCarousel.tsx
+var import_react3 = require("react");
+var import_jsx_runtime7 = require("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] = (0, import_react3.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__ */ (0, import_jsx_runtime7.jsx)(
+      "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__ */ (0, import_jsx_runtime7.jsxs)("div", { id, style: containerStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: slideContainerStyle, children: images.map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: slideStyle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "img",
+      {
+        src: image.src,
+        alt: image.alt || "",
+        style: imageStyle,
+        loading: "lazy"
+      }
+    ) }, index)) }),
+    showArrows && images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: goToPrevious,
+          style: { ...arrowStyle, left: "16px" },
+          "aria-label": "Previous slide",
+          children: "\u2039"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: goToNext,
+          style: { ...arrowStyle, right: "16px" },
+          "aria-label": "Next slide",
+          children: "\u203A"
+        }
+      )
+    ] }),
+    showDots && images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: dotsContainerStyle, children: images.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => goToSlide(index),
+        style: dotStyle(index === currentIndex),
+        "aria-label": `Go to slide ${index + 1}`
+      },
+      index
+    )) })
+  ] });
+}
+
+// components/page/VideoEmbed.tsx
+var import_jsx_runtime8 = require("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__ */ (0, import_jsx_runtime8.jsx)(
+      "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__ */ (0, import_jsx_runtime8.jsx)("div", { id, style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "iframe",
+    {
+      src: finalUrl,
+      style: iframeStyle,
+      allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+      allowFullScreen: true,
+      loading: "lazy"
+    }
+  ) }) });
+}
+
+// components/page/Icon.tsx
+var import_jsx_runtime9 = require("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__ */ (0, import_jsx_runtime9.jsx)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polyline", { points: "20 6 9 17 4 12" })
+    }
+  ),
+  x: ({ size, color, strokeWidth }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      ]
+    }
+  ),
+  star: ({ size, color, strokeWidth }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: color,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime9.jsx)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime9.jsxs)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polyline", { points: "12 5 19 12 12 19" })
+      ]
+    }
+  ),
+  arrowLeft: ({ size, color, strokeWidth }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "19", y1: "12", x2: "5", y2: "12" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polyline", { points: "12 19 5 12 12 5" })
+      ]
+    }
+  ),
+  mail: ({ size, color, strokeWidth }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime9.jsx)("polyline", { points: "22,6 12,13 2,6" })
+      ]
+    }
+  ),
+  phone: ({ size, color, strokeWidth }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime9.jsxs)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "12", cy: "10", r: "3" })
+      ]
+    }
+  ),
+  zap: ({ size, color, strokeWidth }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polygon", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2" })
+    }
+  ),
+  shield: ({ size, color, strokeWidth }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" })
+    }
+  ),
+  users: ({ size, color, strokeWidth }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "9", cy: "7", r: "4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M23 21v-2a4 4 0 0 0-3-3.87" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime9.jsx)("div", { id, style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    IconComponent,
+    {
+      size: iconSize,
+      color: colorValue,
+      strokeWidth
+    }
+  ) });
+}
+var availableIcons = Object.keys(icons);
+
+// design-system/shadows.ts
+var shadowPresets = [
+  { label: "None", value: "none", css: "none" },
+  { label: "XS", value: "xs", css: "0 1px 2px 0 rgb(0 0 0 / 0.05)" },
+  {
+    label: "SM",
+    value: "sm",
+    css: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"
+  },
+  {
+    label: "MD",
+    value: "md",
+    css: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
+  },
+  {
+    label: "LG",
+    value: "lg",
+    css: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"
+  },
+  {
+    label: "XL",
+    value: "xl",
+    css: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
+  },
+  { label: "2XL", value: "2xl", css: "0 25px 50px -12px rgb(0 0 0 / 0.25)" },
+  {
+    label: "Inner",
+    value: "inner",
+    css: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"
+  }
+];
+var getShadowCSS = (value) => {
+  const preset = shadowPresets.find((p) => p.value === value);
+  return preset?.css ?? "none";
+};
+
+// components/page/Section.tsx
+var import_jsx_runtime10 = require("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__ */ (0, import_jsx_runtime10.jsx)(
+    "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__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mx-auto w-full", style: { maxWidth: contentMaxWidth }, children: DropZone && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DropZone, { zone: "content" }) })
+    }
+  );
+}
+
+// components/page/Container.tsx
+var import_jsx_runtime11 = require("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__ */ (0, import_jsx_runtime11.jsx)("div", { id, style, children: DropZone && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropZone, { zone: "container-content" }) });
+}
+
+// components/page/Columns.tsx
+var import_jsx_runtime12 = require("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__ */ (0, import_jsx_runtime12.jsx)("div", { id, style: containerStyle, children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { minWidth: 0 }, children: DropZone && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropZone, { zone: `column-${index}` }) }, index)) });
+}
+
+// components/page/Card.tsx
+var import_jsx_runtime13 = require("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__ */ (0, import_jsx_runtime13.jsx)("div", { id, style, children: DropZone && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropZone, { zone: "card-content" }) });
+}
+
+// components/page/Divider.tsx
+var import_jsx_runtime14 = require("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__ */ (0, import_jsx_runtime14.jsx)("div", { id, style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("hr", { style: hrStyle }) });
+}
+
+// components/page/Spacer.tsx
+var import_jsx_runtime15 = require("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__ */ (0, import_jsx_runtime15.jsx)("div", { id, style, "aria-hidden": "true" });
+}
+
+// components/page/TextBlock.tsx
+var import_jsx_runtime16 = require("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__ */ (0, import_jsx_runtime16.jsxs)(
+    "div",
+    {
+      id: anchorLink,
+      className: cn("flex flex-col gap-4", alignmentMap[alignment]),
+      children: [
+        resolvedTitle && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "h2",
+          {
+            className: cn("font-bold", sizeMap5[textSize]),
+            style: gradientStyle,
+            children: resolvedTitle
+          }
+        ),
+        resolvedSubtitle && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-xl", style: { color: subtitleColorValue }, children: resolvedSubtitle }),
+        resolvedBody && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "div",
+          {
+            className: "prose max-w-none",
+            style: { color: subtitleColorValue },
+            dangerouslySetInnerHTML: { __html: resolvedBody }
+          }
+        )
+      ]
+    }
+  );
+}
+
+// components/page/CustomImage.tsx
+var import_jsx_runtime17 = require("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__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex h-48 w-full items-center justify-center bg-gray-200 text-gray-400", children: "No image" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "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
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime18 = require("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 import_lucide_react.icons[formatted] || null;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "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__ */ (0, import_jsx_runtime18.jsxs)(
+          "div",
+          {
+            className: cn(
+              "flex gap-4",
+              align === "center" && "flex-col items-center",
+              align === "right" && "flex-row-reverse"
+            ),
+            children: [
+              feature.image ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                "img",
+                {
+                  src: feature.image,
+                  alt: feature.title || "",
+                  className: "object-contain",
+                  style: { width: sizeConfig.icon, height: sizeConfig.icon }
+                }
+              ) : IconComponent ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                IconComponent,
+                {
+                  size: sizeConfig.icon,
+                  style: { color: iconColor },
+                  className: "flex-shrink-0"
+                }
+              ) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                feature.title && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h3", { className: cn("font-semibold", sizeConfig.title), children: feature.title }),
+                feature.description && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: cn("text-gray-600", sizeConfig.desc), children: feature.description })
+              ] })
+            ]
+          },
+          index
+        );
+      })
+    }
+  );
+}
+
+// components/page/FeatureGrid.tsx
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime19 = require("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 import_lucide_react2.icons[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__ */ (0, import_jsx_runtime19.jsxs)("div", { id: anchorLink, className: "flex flex-col gap-8", children: [
+    (heading || description) && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+      "div",
+      {
+        className: cn(
+          "flex flex-col gap-2",
+          align === "center" && "text-center",
+          align === "right" && "text-right"
+        ),
+        children: [
+          heading && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h2", { className: "text-3xl font-bold", style: { color: textColor }, children: heading }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-gray-600", children: description })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("grid gap-6", columnClass[columns]), children: features.map((feature, index) => {
+      const IconComponent = feature.icon ? getIcon(feature.icon) : null;
+      return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+        "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__ */ (0, import_jsx_runtime19.jsx)(
+              "img",
+              {
+                src: feature.image,
+                alt: feature.title || "",
+                className: "object-contain",
+                style: { width: sizeConfig.icon, height: sizeConfig.icon }
+              }
+            ) : IconComponent ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              IconComponent,
+              {
+                size: sizeConfig.icon,
+                style: { color: iconColor }
+              }
+            ) : null,
+            feature.title && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              "h3",
+              {
+                className: cn("font-semibold", sizeConfig.title),
+                style: { color: textColor },
+                children: feature.title
+              }
+            ),
+            feature.description && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: cn("text-gray-600", sizeConfig.desc), children: feature.description })
+          ]
+        },
+        index
+      );
+    }) })
+  ] });
+}
+
+// components/page/Footer.tsx
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime20 = require("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: import_lucide_react3.Facebook },
+    { url: instagramUrl, Icon: import_lucide_react3.Instagram },
+    { url: twitterUrl, Icon: import_lucide_react3.Twitter }
+  ].filter((link) => link.url);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "footer",
+    {
+      className: "w-full px-6 py-8",
+      style: { backgroundColor, color: textColor },
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "mx-auto flex max-w-7xl flex-col items-center justify-between gap-6 md:flex-row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex items-center gap-4", children: logo && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("img", { src: logo, alt: "Logo", className: "h-8" }) }),
+        DropZone && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropZone, { zone: "footer-content" }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex items-center gap-4", children: socialLinks.map(({ url, Icon: Icon3 }, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "a",
+          {
+            href: url,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "transition-opacity hover:opacity-80",
+            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon3, { size: 24, style: { color: textColor } })
+          },
+          index
+        )) }),
+        copyright && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm opacity-80", children: copyright })
+      ] })
+    }
+  );
+}
+
+// components/page/Topbar.tsx
+var import_react4 = require("react");
+var import_link = __toESM(require("next/link"));
+var import_lucide_react4 = require("lucide-react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function Topbar({
+  logo,
+  logoUrl = "/",
+  navItems = [],
+  backgroundColor = "#ffffff",
+  textColor = "#000000",
+  maxWidth = "1400px",
+  puck
+}) {
+  const DropZone = puck?.renderDropZone;
+  const [mobileMenuOpen, setMobileMenuOpen] = (0, import_react4.useState)(false);
+  const renderLink = (item, index) => {
+    const className = "hover:opacity-80 transition-opacity";
+    if (item.linkType === "external") {
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "a",
+        {
+          href: item.url,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className,
+          children: item.name
+        },
+        index
+      );
+    }
+    if (item.linkType === "scrollTo") {
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("a", { href: item.url, className, children: item.name }, index);
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_link.default, { href: item.url, className, children: item.name }, index);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    "nav",
+    {
+      className: "sticky top-0 z-50 w-full px-6 py-4",
+      style: { backgroundColor, color: textColor },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+          "div",
+          {
+            className: "mx-auto flex items-center justify-between",
+            style: { maxWidth },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_link.default, { href: logoUrl, className: "flex-shrink-0", children: logo ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("img", { src: logo, alt: "Logo", className: "h-8" }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-xl font-bold", children: "Logo" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "hidden items-center gap-8 md:flex", children: [
+                navItems.map(renderLink),
+                DropZone && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropZone, { zone: "cta" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                "button",
+                {
+                  className: "md:hidden",
+                  onClick: () => setMobileMenuOpen(!mobileMenuOpen),
+                  children: mobileMenuOpen ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react4.X, { size: 24 }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react4.Menu, { size: 24 })
+                }
+              )
+            ]
+          }
+        ),
+        mobileMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+          "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__ */ (0, import_jsx_runtime21.jsx)(DropZone, { zone: "cta" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// components/page/Popup.tsx
+var import_react5 = require("react");
+var import_lucide_react5 = require("lucide-react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function Icon2({ name, ...props }) {
+  const formatted = name.charAt(0).toUpperCase() + name.slice(1);
+  const IconComponent = import_lucide_react5.icons[formatted];
+  if (!IconComponent) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(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] = (0, import_react5.useState)(false);
+  const trigger = textLink ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    "button",
+    {
+      onClick: () => setIsOpen(true),
+      className: "underline hover:opacity-80",
+      style: { color: buttonColor },
+      children: ctaText
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    "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__ */ (0, import_jsx_runtime22.jsx)(Icon2, { name: icon, size: 18 }),
+        ctaText,
+        icon && iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon2, { name: icon, size: 18 })
+      ]
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+    trigger,
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      "div",
+      {
+        className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
+        onClick: () => setIsOpen(false),
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+          "div",
+          {
+            className: cn(
+              "relative w-full rounded-lg bg-white p-6",
+              widthMap3[width]
+            ),
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                "button",
+                {
+                  onClick: () => setIsOpen(false),
+                  className: "absolute top-4 right-4 text-gray-500 hover:text-gray-700",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react5.X, { size: 24 })
+                }
+              ),
+              puck && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(puck.renderDropZone, { zone: "popup-content" })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// design-system/borders.ts
+var borderRadiusScale = [
+  { label: "None", value: 0 },
+  { label: "XS", value: 2 },
+  { label: "SM", value: 4 },
+  { label: "MD", value: 6 },
+  { label: "LG", value: 8 },
+  { label: "XL", value: 12 },
+  { label: "2XL", value: 16 },
+  { label: "3XL", value: 24 }
+];
+var getClosestBorderRadiusValue = (value) => {
+  return borderRadiusScale.reduce(
+    (prev, curr) => Math.abs(curr.value - value) < Math.abs(prev.value - value) ? curr : prev
+  ).value;
+};
+var getBorderRadiusCSS = (value) => {
+  return `${value}px`;
+};
+
+// design-system/colors.ts
+var neutralColors = [
+  { label: "White", value: "#FFFFFF" },
+  { label: "Gray 100", value: "#F3F4F6" },
+  { label: "Gray 300", value: "#D1D5DB" },
+  { label: "Gray 500", value: "#6B7280" },
+  { label: "Gray 700", value: "#374151" },
+  { label: "Gray 900", value: "#111827" },
+  { label: "Black", value: "#000000" }
+];
+var allColorPresets = [...neutralColors];
+
+// design-system/spacing.ts
+var spacingScale = [
+  { label: "None", value: 0 },
+  { label: "2XS", value: 4 },
+  { label: "XS", value: 8 },
+  { label: "SM", value: 12 },
+  { label: "MD", value: 16 },
+  { label: "LG", value: 24 },
+  { label: "XL", value: 32 },
+  { label: "2XL", value: 48 },
+  { label: "3XL", value: 64 },
+  { label: "4XL", value: 96 }
+];
+var getClosestSpacingValue = (value) => {
+  return spacingScale.reduce(
+    (prev, curr) => Math.abs(curr.value - value) < Math.abs(prev.value - value) ? curr : prev
+  ).value;
+};
+
+// design-system/typography.ts
+var fontFamilies = [
+  { label: "System", value: "system-ui, sans-serif" },
+  { label: "Sans", value: "ui-sans-serif, system-ui, sans-serif" },
+  { label: "Serif", value: "ui-serif, Georgia, serif" },
+  { label: "Mono", value: "ui-monospace, monospace" }
+];
+var fontSizes = [
+  { label: "XS", value: "xs", css: "0.75rem" },
+  { label: "SM", value: "sm", css: "0.875rem" },
+  { label: "Base", value: "base", css: "1rem" },
+  { label: "LG", value: "lg", css: "1.125rem" },
+  { label: "XL", value: "xl", css: "1.25rem" },
+  { label: "2XL", value: "2xl", css: "1.5rem" },
+  { label: "3XL", value: "3xl", css: "1.875rem" },
+  { label: "4XL", value: "4xl", css: "2.25rem" },
+  { label: "5XL", value: "5xl", css: "3rem" }
+];
+var fontWeights = [
+  { label: "Light", value: 300 },
+  { label: "Normal", value: 400 },
+  { label: "Medium", value: 500 },
+  { label: "Semibold", value: 600 },
+  { label: "Bold", value: 700 }
+];
+var getFontSizeCSS = (value) => {
+  const preset = fontSizes.find((p) => p.value === value);
+  return preset?.css ?? "1rem";
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  Card,
+  Columns,
+  Container,
+  CustomImage,
+  DEFAULT_THEME,
+  Divider,
+  FeatureGrid,
+  FeaturesList,
+  Footer,
+  Heading,
+  Icon,
+  Image,
+  ImageCarousel,
+  Paragraph,
+  Popup,
+  Section,
+  Spacer,
+  TextBlock,
+  ThemeProvider,
+  Topbar,
+  VideoEmbed,
+  allColorPresets,
+  availableIcons,
+  borderRadiusScale,
+  fontFamilies,
+  fontSizes,
+  fontWeights,
+  getBorderRadiusCSS,
+  getClosestBorderRadiusValue,
+  getClosestSpacingValue,
+  getFontSizeCSS,
+  getShadowCSS,
+  neutralColors,
+  shadowPresets,
+  spacingScale,
+  useTheme
+});