@mission-studio/puck 1.0.21 → 1.0.24

package/dist/renderer.js

@@ -430,8 +430,7 @@ function useUtmParams() {
   return utmParams;
 }
 
-// components/page/Button.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+// components/page/primitives/Button.ts
 var sizeStyles = {
   sm: { padding: "8px 16px", fontSize: "0.875rem" },
   md: { padding: "12px 24px", fontSize: "1rem" },
@@ -451,6 +450,54 @@ function isThemeableValue3(value) {
 function isEntryBoundValue3(value) {
   return typeof value === "object" && value !== null && "useEntry" in value;
 }
+function getBaseStyle(size, borderRadius, fullWidth) {
+  return {
+    ...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"
+  };
+}
+function getVariantStyles(variant, bgColor, fgColor) {
+  const variantStyles = {
+    solid: {
+      backgroundColor: bgColor,
+      color: fgColor
+    },
+    outline: {
+      backgroundColor: "transparent",
+      color: bgColor,
+      border: `2px solid ${bgColor}`
+    },
+    ghost: {
+      backgroundColor: "transparent",
+      color: bgColor
+    },
+    link: {
+      backgroundColor: "transparent",
+      color: bgColor,
+      padding: "0",
+      textDecoration: "underline"
+    }
+  };
+  return variantStyles[variant] || variantStyles.solid;
+}
+function getWrapperStyle(align) {
+  return {
+    display: "flex",
+    justifyContent: align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center"
+  };
+}
+
+// components/page/next/Button.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function Button({
   text,
   href,
@@ -513,46 +560,10 @@ function Button({
   })();
   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 });
+  const baseStyle = getBaseStyle(size, borderRadius, fullWidth);
+  const variantStyle = getVariantStyles(variant, bgColor, fgColor);
+  const style = { ...baseStyle, ...variantStyle };
+  const wrapperStyle = getWrapperStyle(align);
   if (href) {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "a",
@@ -570,8 +581,7 @@ function Button({
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { id, type: "button", style, onClick: handleClick, children: resolvedText }) });
 }
 
-// components/page/Image.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+// components/page/primitives/Image.ts
 var widthMap = {
   auto: "auto",
   full: "100%",
@@ -608,6 +618,36 @@ function isThemeableValue4(value) {
 function isEntryBoundValue4(value) {
   return typeof value === "object" && value !== null && "useEntry" in value;
 }
+function getWrapperStyle2(align) {
+  return {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center",
+    gap: "8px"
+  };
+}
+function getImageStyle(width, aspectRatio, objectFit, borderRadius, shadow) {
+  return {
+    width: widthMap[width],
+    maxWidth: "100%",
+    aspectRatio: aspectRatioMap[aspectRatio],
+    objectFit,
+    borderRadius: radiusMap2[borderRadius],
+    boxShadow: shadowMap[shadow],
+    display: "block"
+  };
+}
+function getCaptionStyle(align, width, captionColor) {
+  return {
+    fontSize: "0.875rem",
+    color: captionColor,
+    textAlign: align,
+    maxWidth: widthMap[width]
+  };
+}
+
+// components/page/next/Image.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function Image({
   src,
   alt = "",
@@ -655,33 +695,25 @@ function Image({
     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],
+  const wrapperStyle = getWrapperStyle2(align);
+  const imageStyle2 = getImageStyle(
+    width,
+    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]
-  };
+    borderRadius,
+    shadow
+  );
+  const captionStyle = getCaptionStyle(
+    align,
+    width,
+    hexToRgba(resolvedCaptionColor.color, resolvedCaptionColor.opacity)
+  );
   if (!resolvedSrc) {
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "div",
       {
         style: {
-          ...imageStyle,
+          ...imageStyle2,
           backgroundColor: "#e5e7eb",
           display: "flex",
           alignItems: "center",
@@ -694,14 +726,15 @@ function 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" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("img", { src: resolvedSrc, alt, style: imageStyle2, loading: "lazy" }),
     resolvedCaption && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("figcaption", { style: captionStyle, children: resolvedCaption })
   ] });
 }
 
-// components/page/ImageCarousel.tsx
+// components/page/next/ImageCarousel.tsx
 var import_react4 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+
+// components/page/primitives/ImageCarousel.ts
 var aspectRatioMap2 = {
   "16:9": "16 / 9",
   "4:3": "4 / 3",
@@ -717,6 +750,83 @@ var radiusMap3 = {
 function isThemeableValue5(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
+function getContainerStyle(aspectRatio, borderRadius) {
+  return {
+    position: "relative",
+    aspectRatio: aspectRatioMap2[aspectRatio],
+    borderRadius: radiusMap3[borderRadius],
+    overflow: "hidden"
+  };
+}
+function getSlideContainerStyle(currentIndex) {
+  return {
+    display: "flex",
+    transition: "transform 0.3s ease-in-out",
+    transform: `translateX(-${currentIndex * 100}%)`,
+    height: "100%"
+  };
+}
+var slideStyle = {
+  minWidth: "100%",
+  height: "100%"
+};
+var imageStyle = {
+  width: "100%",
+  height: "100%",
+  objectFit: "cover"
+};
+function getArrowStyle(arrowColor) {
+  return {
+    position: "absolute",
+    top: "50%",
+    transform: "translateY(-50%)",
+    backgroundColor: "rgba(0,0,0,0.5)",
+    color: arrowColor,
+    border: "none",
+    borderRadius: "50%",
+    width: "40px",
+    height: "40px",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "20px",
+    zIndex: 1
+  };
+}
+var dotsContainerStyle = {
+  position: "absolute",
+  bottom: "16px",
+  left: "50%",
+  transform: "translateX(-50%)",
+  display: "flex",
+  gap: "8px",
+  zIndex: 1
+};
+function getDotStyle(isActive, dotColor) {
+  return {
+    width: "10px",
+    height: "10px",
+    borderRadius: "50%",
+    border: "none",
+    cursor: "pointer",
+    backgroundColor: isActive ? dotColor : "rgba(255,255,255,0.5)"
+  };
+}
+function getEmptyState(aspectRatio, borderRadius) {
+  return {
+    aspectRatio: aspectRatioMap2[aspectRatio],
+    backgroundColor: "#e5e7eb",
+    borderRadius: radiusMap3[borderRadius],
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: "#9ca3af"
+  };
+}
+
+// components/page/next/ImageCarousel.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function ImageCarousel({
   images = [],
   aspectRatio = "16:9",
@@ -780,79 +890,18 @@ function ImageCarousel({
     });
   };
   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"
-      }
-    );
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: getEmptyState(aspectRatio, borderRadius), 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)(
+  const arrowColorStr = hexToRgba(
+    resolvedArrowColor.color,
+    resolvedArrowColor.opacity
+  );
+  const dotColorStr = hexToRgba(
+    resolvedDotColor.color,
+    resolvedDotColor.opacity
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { id, style: getContainerStyle(aspectRatio, borderRadius), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: getSlideContainerStyle(currentIndex), 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,
@@ -867,7 +916,7 @@ function ImageCarousel({
         {
           type: "button",
           onClick: goToPrevious,
-          style: { ...arrowStyle, left: "16px" },
+          style: { ...getArrowStyle(arrowColorStr), left: "16px" },
           "aria-label": "Previous slide",
           children: "\u2039"
         }
@@ -877,7 +926,7 @@ function ImageCarousel({
         {
           type: "button",
           onClick: goToNext,
-          style: { ...arrowStyle, right: "16px" },
+          style: { ...getArrowStyle(arrowColorStr), right: "16px" },
           "aria-label": "Next slide",
           children: "\u203A"
         }
@@ -888,7 +937,7 @@ function ImageCarousel({
       {
         type: "button",
         onClick: () => goToSlide(index),
-        style: dotStyle(index === currentIndex),
+        style: getDotStyle(index === currentIndex, dotColorStr),
         "aria-label": `Go to slide ${index + 1}`
       },
       index
@@ -1021,7 +1070,7 @@ function VideoEmbed({
   ) }) });
 }
 
-// components/page/Icon.tsx
+// components/page/primitives/Icon.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var sizeMap = {
   sm: { size: "16px", strokeWidth: 2 },
@@ -1223,6 +1272,16 @@ var icons = {
 function isThemeableValue6(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
+function getWrapperStyle3(align) {
+  return {
+    display: "flex",
+    justifyContent: align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center"
+  };
+}
+var availableIcons = Object.keys(icons);
+
+// components/page/next/Icon.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function Icon({
   name = "check",
   size = "md",
@@ -1243,11 +1302,8 @@ function Icon({
   const IconComponent = icons[name.toLowerCase()] || icons.check;
   const { size: iconSize, strokeWidth } = sizeMap[size];
   const colorValue = hexToRgba(resolvedColor.color, resolvedColor.opacity);
-  const wrapperStyle = {
-    display: "flex",
-    justifyContent: align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center"
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { id, style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  const wrapperStyle = getWrapperStyle3(align);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { id, style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     IconComponent,
     {
       size: iconSize,
@@ -1256,7 +1312,6 @@ function Icon({
     }
   ) });
 }
-var availableIcons = Object.keys(icons);
 
 // design-system/shadows.ts
 var shadowPresets = [
@@ -1294,8 +1349,7 @@ var getShadowCSS = (value) => {
   return preset?.css ?? "none";
 };
 
-// components/page/Section.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+// components/page/primitives/Section.ts
 function isThemeableValue7(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
@@ -1327,6 +1381,20 @@ function getVisibilityClasses(visibility) {
   }
   return "";
 }
+function getSectionStyle(verticalPadding, horizontalPadding, gap, backgroundColor, backgroundImage, shadow, borderRadius) {
+  return {
+    padding: `${verticalPadding}px ${horizontalPadding}px`,
+    gap: `${gap}px`,
+    backgroundColor,
+    backgroundImage: backgroundImage ? `url(${backgroundImage})` : void 0,
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+    borderRadius: `${borderRadius}px`
+  };
+}
+
+// components/page/next/Section.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function Section({
   children: _children,
   verticalPadding = 48,
@@ -1343,28 +1411,30 @@ function Section({
 }) {
   const { resolveColor: resolveColor2 } = useTheme();
   const DropZone = puck?.renderDropZone;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  const style = {
+    ...getSectionStyle(
+      verticalPadding,
+      horizontalPadding,
+      gap,
+      resolveBackgroundColor(backgroundColor, resolveColor2),
+      backgroundImage,
+      shadow,
+      borderRadius
+    ),
+    boxShadow: getShadowCSS(shadow)
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime11.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" }) })
+      style,
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "mx-auto w-full", style: { maxWidth: contentMaxWidth }, children: DropZone && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropZone, { zone: "content" }) })
     }
   );
 }
 
-// components/page/Container.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+// components/page/primitives/Container.ts
 var maxWidthMap2 = {
   sm: "640px",
   md: "768px",
@@ -1383,6 +1453,22 @@ var paddingMap = {
 function isThemeableValue8(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
+function getContainerStyle2(maxWidth, paddingX, paddingY, centered, backgroundColor) {
+  return {
+    maxWidth: maxWidthMap2[maxWidth],
+    marginLeft: centered ? "auto" : void 0,
+    marginRight: centered ? "auto" : void 0,
+    paddingLeft: paddingMap[paddingX],
+    paddingRight: paddingMap[paddingX],
+    paddingTop: paddingMap[paddingY],
+    paddingBottom: paddingMap[paddingY],
+    backgroundColor,
+    width: "100%"
+  };
+}
+
+// components/page/next/Container.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function Container({
   maxWidth = "lg",
   padding,
@@ -1407,22 +1493,17 @@ function Container({
   })();
   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" }) });
+  const style = getContainerStyle2(
+    maxWidth,
+    effectivePaddingX,
+    effectivePaddingY,
+    centered,
+    resolvedBgColor ? hexToRgba(resolvedBgColor.color, resolvedBgColor.opacity) : void 0
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { id, style, children: DropZone && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropZone, { zone: "container-content" }) });
 }
 
-// components/page/Columns.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+// components/page/primitives/Columns.ts
 var gapMap = {
   none: "0",
   sm: "16px",
@@ -1436,6 +1517,17 @@ var alignMap = {
   bottom: "flex-end",
   stretch: "stretch"
 };
+function getContainerStyle3(columns, gap, verticalAlign) {
+  return {
+    display: "grid",
+    gridTemplateColumns: `repeat(${columns}, 1fr)`,
+    gap: gapMap[gap],
+    alignItems: alignMap[verticalAlign]
+  };
+}
+
+// components/page/next/Columns.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function Columns({
   columns = 2,
   gap = "md",
@@ -1445,17 +1537,11 @@ function Columns({
   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)) });
+  const containerStyle = getContainerStyle3(columns, gap, verticalAlign);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { id, style: containerStyle, children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { minWidth: 0 }, children: DropZone && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropZone, { zone: `column-${index}` }) }, index)) });
 }
 
-// components/page/Card.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+// components/page/primitives/Card.ts
 var borderWidthMap = {
   none: "0",
   thin: "1px",
@@ -1486,6 +1572,18 @@ var paddingMap2 = {
 function isThemeableValue9(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
+function getCardStyle(backgroundColor, borderColor, borderWidth, borderRadius, shadow, padding) {
+  return {
+    backgroundColor,
+    border: borderWidth !== "none" ? `${borderWidthMap[borderWidth]} solid ${borderColor}` : "none",
+    borderRadius: radiusMap5[borderRadius],
+    boxShadow: shadowMap2[shadow],
+    padding: paddingMap2[padding]
+  };
+}
+
+// components/page/next/Card.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function Card({
   backgroundColor,
   borderColor,
@@ -1518,18 +1616,18 @@ function Card({
     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" }) });
+  const style = getCardStyle(
+    hexToRgba(resolvedBgColor.color, resolvedBgColor.opacity),
+    hexToRgba(resolvedBorderColor.color, resolvedBorderColor.opacity),
+    borderWidth,
+    borderRadius,
+    shadow,
+    padding
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { id, style, children: DropZone && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropZone, { zone: "card-content" }) });
 }
 
-// components/page/Divider.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+// components/page/primitives/Divider.ts
 var thicknessMap = {
   thin: "1px",
   medium: "2px",
@@ -1550,6 +1648,24 @@ var spacingMap = {
 function isThemeableValue10(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
+function getWrapperStyle4(align, spacing) {
+  return {
+    display: "flex",
+    justifyContent: align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center",
+    padding: `${spacingMap[spacing]} 0`
+  };
+}
+function getHrStyle(width, thickness, lineStyle, color) {
+  return {
+    width: widthMap2[width],
+    border: "none",
+    borderTop: `${thicknessMap[thickness]} ${lineStyle} ${color}`,
+    margin: 0
+  };
+}
+
+// components/page/next/Divider.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function Divider({
   style: lineStyle = "solid",
   thickness = "thin",
@@ -1569,22 +1685,17 @@ function Divider({
     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 }) });
+  const wrapperStyle = getWrapperStyle4(align, spacing);
+  const hrStyle = getHrStyle(
+    width,
+    thickness,
+    lineStyle,
+    hexToRgba(resolvedColor.color, resolvedColor.opacity)
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { id, style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("hr", { style: hrStyle }) });
 }
 
-// components/page/Spacer.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+// components/page/primitives/Spacer.ts
 var sizeMap2 = {
   xs: "8px",
   sm: "16px",
@@ -1594,16 +1705,19 @@ var sizeMap2 = {
   "2xl": "64px",
   "3xl": "96px"
 };
+
+// components/page/next/Spacer.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function Spacer({ size = "md", id }) {
   const style = {
     height: sizeMap2[size],
     width: "100%"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { id, style, "aria-hidden": "true" });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { id, style, "aria-hidden": "true" });
 }
 
 // components/page/TextBlock.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var alignmentMap = {
   left: "text-left",
   center: "text-center",
@@ -1689,13 +1803,13 @@ function TextBlock({
     WebkitTextFillColor: "transparent",
     backgroundClip: "text"
   } : { color: titleColorValue };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "div",
     {
       id: anchorLink,
       className: cn("flex flex-col gap-4", alignmentMap[alignment]),
       children: [
-        resolvedTitle && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        resolvedTitle && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "h2",
           {
             className: cn("font-bold", sizeMap3[textSize]),
@@ -1703,8 +1817,8 @@ function TextBlock({
             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)(
+        resolvedSubtitle && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-xl", style: { color: subtitleColorValue }, children: resolvedSubtitle }),
+        resolvedBody && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "div",
           {
             className: "prose max-w-none",
@@ -1718,7 +1832,7 @@ function TextBlock({
 }
 
 // components/page/CustomImage.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var alignmentMap2 = {
   left: "mr-auto",
   center: "mx-auto",
@@ -1732,9 +1846,9 @@ function CustomImage({
   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_runtime18.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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "img",
     {
       src: image,
@@ -1751,7 +1865,7 @@ function CustomImage({
 
 // components/page/FeaturesList.tsx
 var import_lucide_react = require("lucide-react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var sizeMap4 = {
   small: { icon: 24, title: "text-base", desc: "text-sm" },
   medium: { icon: 32, title: "text-lg", desc: "text-base" },
@@ -1769,7 +1883,7 @@ function FeaturesList({
     const formatted = iconName.charAt(0).toUpperCase() + iconName.slice(1);
     return import_lucide_react.icons[formatted] || null;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "div",
     {
       id: anchorLink,
@@ -1780,7 +1894,7 @@ function FeaturesList({
       ),
       children: features.map((feature, index) => {
         const IconComponent = feature.icon ? getIcon(feature.icon) : null;
-        return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
           "div",
           {
             className: cn(
@@ -1789,7 +1903,7 @@ function FeaturesList({
               align === "right" && "flex-row-reverse"
             ),
             children: [
-              feature.image ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              feature.image ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 "img",
                 {
                   src: feature.image,
@@ -1797,7 +1911,7 @@ function FeaturesList({
                   className: "object-contain",
                   style: { width: sizeConfig.icon, height: sizeConfig.icon }
                 }
-              ) : IconComponent ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              ) : IconComponent ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 IconComponent,
                 {
                   size: sizeConfig.icon,
@@ -1805,9 +1919,9 @@ function FeaturesList({
                   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 })
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                feature.title && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { className: cn("font-semibold", sizeConfig.title), children: feature.title }),
+                feature.description && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: cn("text-gray-600", sizeConfig.desc), children: feature.description })
               ] })
             ]
           },
@@ -1820,7 +1934,7 @@ function FeaturesList({
 
 // components/page/FeatureGrid.tsx
 var import_lucide_react2 = require("lucide-react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var sizeMap5 = {
   small: { icon: 24, title: "text-base", desc: "text-sm" },
   medium: { icon: 32, title: "text-lg", desc: "text-base" },
@@ -1847,8 +1961,8 @@ function FeatureGrid({
     3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
     4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { id: anchorLink, className: "flex flex-col gap-8", children: [
-    (heading || description) && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { id: anchorLink, className: "flex flex-col gap-8", children: [
+    (heading || description) && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "div",
       {
         className: cn(
@@ -1857,14 +1971,14 @@ function FeatureGrid({
           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 })
+          heading && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h2", { className: "text-3xl font-bold", style: { color: textColor }, children: heading }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime20.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) => {
+    /* @__PURE__ */ (0, import_jsx_runtime20.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)(
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
         "div",
         {
           className: cn(
@@ -1872,7 +1986,7 @@ function FeatureGrid({
             align === "center" && "items-center text-center"
           ),
           children: [
-            feature.image ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            feature.image ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               "img",
               {
                 src: feature.image,
@@ -1880,14 +1994,14 @@ function FeatureGrid({
                 className: "object-contain",
                 style: { width: sizeConfig.icon, height: sizeConfig.icon }
               }
-            ) : IconComponent ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            ) : IconComponent ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               IconComponent,
               {
                 size: sizeConfig.icon,
                 style: { color: iconColor }
               }
             ) : null,
-            feature.title && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            feature.title && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               "h3",
               {
                 className: cn("font-semibold", sizeConfig.title),
@@ -1895,7 +2009,7 @@ function FeatureGrid({
                 children: feature.title
               }
             ),
-            feature.description && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: cn("text-gray-600", sizeConfig.desc), children: feature.description })
+            feature.description && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: cn("text-gray-600", sizeConfig.desc), children: feature.description })
           ]
         },
         index
@@ -1906,7 +2020,7 @@ function FeatureGrid({
 
 // components/page/Footer.tsx
 var import_lucide_react3 = require("lucide-react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function Footer({
   logo,
   copyright = "\xA9 2024 Company. All rights reserved.",
@@ -1941,15 +2055,15 @@ function Footer({
   ].filter(
     (link) => !!link.url
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.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)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.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_runtime21.jsx)("div", { className: "flex items-center gap-4", children: logo && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("img", { src: logo, alt: "Logo", className: "h-8" }) }),
+        DropZone && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropZone, { zone: "footer-content" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex items-center gap-4", children: socialLinks.map(({ url, Icon: Icon3 }, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "a",
           {
             href: url,
@@ -1957,11 +2071,11 @@ function Footer({
             rel: "noopener noreferrer",
             className: "transition-opacity hover:opacity-80",
             onClick: () => handleSocialClick(url),
-            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon3, { size: 24, style: { color: textColor } })
+            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon3, { size: 24, style: { color: textColor } })
           },
           index
         )) }),
-        copyright && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm opacity-80", children: copyright })
+        copyright && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-sm opacity-80", children: copyright })
       ] })
     }
   );
@@ -1970,7 +2084,7 @@ function Footer({
 // components/page/Topbar.tsx
 var import_react5 = require("react");
 var import_lucide_react4 = require("lucide-react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function Topbar({
   logo,
   logoUrl = "/",
@@ -2003,7 +2117,7 @@ function Topbar({
   const renderLink = (item, index) => {
     const className = "hover:opacity-80 transition-opacity";
     if (item.linkType === "external") {
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "a",
         {
           href: item.url,
@@ -2017,7 +2131,7 @@ function Topbar({
       );
     }
     if (item.linkType === "scrollTo") {
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "a",
         {
           href: item.url,
@@ -2028,7 +2142,7 @@ function Topbar({
         index
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "a",
       {
         href: item.url,
@@ -2039,19 +2153,19 @@ function Topbar({
       index
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.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)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
           "div",
           {
             className: "mx-auto flex items-center justify-between",
             style: { maxWidth },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                 "a",
                 {
                   href: logoUrl,
@@ -2062,25 +2176,25 @@ function Topbar({
                     linkType: "internal",
                     ...utm
                   }),
-                  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" })
+                  children: logo ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("img", { src: logo, alt: "Logo", className: "h-8" }) : /* @__PURE__ */ (0, import_jsx_runtime22.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: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "hidden items-center gap-8 md:flex", children: [
                 navItems.map(renderLink),
-                DropZone && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropZone, { zone: "cta" })
+                DropZone && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropZone, { zone: "cta" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { className: "md:hidden", onClick: handleMobileMenuToggle, 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 }) })
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { className: "md:hidden", onClick: handleMobileMenuToggle, children: mobileMenuOpen ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react4.X, { size: 24 }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react4.Menu, { size: 24 }) })
             ]
           }
         ),
-        mobileMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+        mobileMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime22.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" })
+              DropZone && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropZone, { zone: "cta" })
             ]
           }
         )
@@ -2092,12 +2206,12 @@ function Topbar({
 // components/page/Popup.tsx
 var import_react6 = require("react");
 var import_lucide_react5 = require("lucide-react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = 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 });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(IconComponent, { ...props });
 }
 var widthMap3 = {
   small: "max-w-sm",
@@ -2135,7 +2249,7 @@ function Popup({
     setIsOpen(false);
     sendEvent("popup_close", { ctaText, ...utm });
   };
-  const trigger = textLink ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  const trigger = textLink ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "button",
     {
       onClick: handleOpen,
@@ -2143,7 +2257,7 @@ function Popup({
       style: { color: buttonColor },
       children: ctaText
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "button",
     {
       onClick: handleOpen,
@@ -2153,20 +2267,20 @@ function Popup({
       ),
       style: { backgroundColor: buttonColor, color: textColor },
       children: [
-        icon && iconPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon2, { name: icon, size: 18 }),
+        icon && iconPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon2, { name: icon, size: 18 }),
         ctaText,
-        icon && iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon2, { name: icon, size: 18 })
+        icon && iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon2, { name: icon, size: 18 })
       ]
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
     trigger,
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "div",
       {
         className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
         onClick: handleClose,
-        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
           "div",
           {
             className: cn(
@@ -2175,15 +2289,15 @@ function Popup({
             ),
             onClick: (e) => e.stopPropagation(),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                 "button",
                 {
                   onClick: handleClose,
                   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 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react5.X, { size: 24 })
                 }
               ),
-              puck && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(puck.renderDropZone, { zone: "popup-content" })
+              puck && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(puck.renderDropZone, { zone: "popup-content" })
             ]
           }
         )