@mission-studio/puck 1.0.21 → 1.0.24

package/dist/config-entry.js

@@ -413,8 +413,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" },
@@ -434,6 +433,54 @@ function isThemeableValue3(value) {
 function isEntryBoundValue3(value) {
   return typeof value === "object" && value !== null && "useEntry" in value;
 }
+function getBaseStyle(size4, borderRadius, fullWidth) {
+  return {
+    ...sizeStyles[size4],
+    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,
@@ -496,46 +543,10 @@ function Button({
   })();
   const bgColor = hexToRgba(resolvedColor.color, resolvedColor.opacity);
   const fgColor = hexToRgba(resolvedTextColor.color, resolvedTextColor.opacity);
-  const baseStyle = {
-    ...sizeStyles[size4],
-    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(size4, 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",
@@ -553,8 +564,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%",
@@ -591,6 +601,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 = "",
@@ -638,33 +678,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",
@@ -677,14 +709,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",
@@ -700,6 +733,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",
@@ -763,79 +873,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, index2) => /* @__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, index2) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: slideStyle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "img",
       {
         src: image.src,
@@ -850,7 +899,7 @@ function ImageCarousel({
         {
           type: "button",
           onClick: goToPrevious,
-          style: { ...arrowStyle, left: "16px" },
+          style: { ...getArrowStyle(arrowColorStr), left: "16px" },
           "aria-label": "Previous slide",
           children: "\u2039"
         }
@@ -860,7 +909,7 @@ function ImageCarousel({
         {
           type: "button",
           onClick: goToNext,
-          style: { ...arrowStyle, right: "16px" },
+          style: { ...getArrowStyle(arrowColorStr), right: "16px" },
           "aria-label": "Next slide",
           children: "\u203A"
         }
@@ -871,7 +920,7 @@ function ImageCarousel({
       {
         type: "button",
         onClick: () => goToSlide(index2),
-        style: dotStyle(index2 === currentIndex),
+        style: getDotStyle(index2 === currentIndex, dotColorStr),
         "aria-label": `Go to slide ${index2 + 1}`
       },
       index2
@@ -1004,7 +1053,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 },
@@ -1206,6 +1255,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: size4 = "md",
@@ -1226,11 +1285,8 @@ function Icon({
   const IconComponent = icons[name.toLowerCase()] || icons.check;
   const { size: iconSize, strokeWidth } = sizeMap[size4];
   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,
@@ -1239,7 +1295,6 @@ function Icon({
     }
   ) });
 }
-var availableIcons = Object.keys(icons);
 
 // design-system/shadows.ts
 var shadowPresets = [
@@ -1277,8 +1332,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;
 }
@@ -1310,6 +1364,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,
@@ -1326,28 +1394,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",
@@ -1366,6 +1436,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,
@@ -1390,22 +1476,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",
@@ -1419,6 +1500,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",
@@ -1428,17 +1520,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((_, index2) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { minWidth: 0 }, children: DropZone && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropZone, { zone: `column-${index2}` }) }, index2)) });
+  const containerStyle = getContainerStyle3(columns, gap, verticalAlign);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { id, style: containerStyle, children: Array.from({ length: columns }).map((_, index2) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { minWidth: 0 }, children: DropZone && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropZone, { zone: `column-${index2}` }) }, index2)) });
 }
 
-// components/page/Card.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+// components/page/primitives/Card.ts
 var borderWidthMap = {
   none: "0",
   thin: "1px",
@@ -1469,6 +1555,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,
@@ -1501,18 +1599,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",
@@ -1533,6 +1631,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",
@@ -1552,22 +1668,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",
@@ -1577,16 +1688,19 @@ var sizeMap2 = {
   "2xl": "64px",
   "3xl": "96px"
 };
+
+// components/page/next/Spacer.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function Spacer({ size: size4 = "md", id }) {
   const style = {
     height: sizeMap2[size4],
     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",
@@ -1672,13 +1786,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]),
@@ -1686,8 +1800,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",
@@ -1701,7 +1815,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",
@@ -1715,9 +1829,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,
@@ -1734,7 +1848,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" },
@@ -1752,7 +1866,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,
@@ -1763,7 +1877,7 @@ function FeaturesList({
       ),
       children: features.map((feature, index2) => {
         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(
@@ -1772,7 +1886,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,
@@ -1780,7 +1894,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,
@@ -1788,9 +1902,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 })
               ] })
             ]
           },
@@ -1803,7 +1917,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" },
@@ -1830,8 +1944,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(
@@ -1840,14 +1954,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, index2) => {
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn("grid gap-6", columnClass[columns]), children: features.map((feature, index2) => {
       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(
@@ -1855,7 +1969,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,
@@ -1863,14 +1977,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),
@@ -1878,7 +1992,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 })
           ]
         },
         index2
@@ -1889,7 +2003,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.",
@@ -1924,15 +2038,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: Icon4 }, index2) => /* @__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: Icon4 }, index2) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "a",
           {
             href: url,
@@ -1940,11 +2054,11 @@ function Footer({
             rel: "noopener noreferrer",
             className: "transition-opacity hover:opacity-80",
             onClick: () => handleSocialClick(url),
-            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon4, { size: 24, style: { color: textColor } })
+            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon4, { size: 24, style: { color: textColor } })
           },
           index2
         )) }),
-        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 })
       ] })
     }
   );
@@ -1953,7 +2067,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 = "/",
@@ -1986,7 +2100,7 @@ function Topbar({
   const renderLink = (item, index2) => {
     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,
@@ -2000,7 +2114,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,
@@ -2011,7 +2125,7 @@ function Topbar({
         index2
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "a",
       {
         href: item.url,
@@ -2022,19 +2136,19 @@ function Topbar({
       index2
     );
   };
-  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,
@@ -2045,25 +2159,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" })
             ]
           }
         )
@@ -2075,12 +2189,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",
@@ -2118,7 +2232,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,
@@ -2126,7 +2240,7 @@ function Popup({
       style: { color: buttonColor },
       children: ctaText
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "button",
     {
       onClick: handleOpen,
@@ -2136,20 +2250,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(
@@ -2158,15 +2272,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" })
             ]
           }
         )
@@ -2182,7 +2296,7 @@ var import_lucide_react6 = require("lucide-react");
 // shadcn/button.tsx
 var import_react_slot = require("@radix-ui/react-slot");
 var import_class_variance_authority = require("class-variance-authority");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority.cva)(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
@@ -2220,7 +2334,7 @@ function Button2({
   ...props
 }) {
   const Comp = asChild ? import_react_slot.Slot : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     Comp,
     {
       "data-slot": "button",
@@ -2233,9 +2347,9 @@ function Button2({
 }
 
 // shadcn/input.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function Input({ className, type, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "input",
     {
       type,
@@ -2253,12 +2367,12 @@ function Input({ className, type, ...props }) {
 
 // shadcn/label.tsx
 var LabelPrimitive = __toESM(require("@radix-ui/react-label"));
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function Label({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     LabelPrimitive.Root,
     {
       "data-slot": "label",
@@ -2274,7 +2388,7 @@ function Label({
 // shadcn/slider.tsx
 var React = __toESM(require("react"));
 var import_radix_ui = require("radix-ui");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function Slider({
   className,
   defaultValue,
@@ -2287,7 +2401,7 @@ function Slider({
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min2, max2],
     [value, defaultValue, min2, max2]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     import_radix_ui.Slider.Root,
     {
       "data-slot": "slider",
@@ -2301,14 +2415,14 @@ function Slider({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           import_radix_ui.Slider.Track,
           {
             "data-slot": "slider-track",
             className: cn(
               "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               import_radix_ui.Slider.Range,
               {
                 "data-slot": "slider-range",
@@ -2319,7 +2433,7 @@ function Slider({
             )
           }
         ),
-        Array.from({ length: _values.length }, (_, index2) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        Array.from({ length: _values.length }, (_, index2) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           import_radix_ui.Slider.Thumb,
           {
             "data-slot": "slider-thumb",
@@ -2335,7 +2449,7 @@ function Slider({
 // shadcn/toggle.tsx
 var import_class_variance_authority2 = require("class-variance-authority");
 var import_radix_ui2 = require("radix-ui");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var toggleVariants = (0, import_class_variance_authority2.cva)(
   "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
   {
@@ -2362,7 +2476,7 @@ function Toggle({
   size: size4,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     import_radix_ui2.Toggle.Root,
     {
       "data-slot": "toggle",
@@ -2390,7 +2504,7 @@ var getClosestBorderRadiusValue = (value) => {
 };
 
 // fields/BorderRadiusField.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var MAX_VALUE = borderRadiusScale[borderRadiusScale.length - 1].value;
 function BorderRadiusField({
   value,
@@ -2432,10 +2546,10 @@ function BorderRadiusField({
     (s) => s.value === currentValue
   );
   const displayLabel = matchingPreset?.label ?? "Custom";
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col gap-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Label, { className: "text-sm font-medium", children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Label, { className: "text-sm font-medium", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         Toggle,
         {
           pressed: quantized,
@@ -2444,13 +2558,13 @@ function BorderRadiusField({
           variant: "outline",
           "aria-label": "Snap to grid",
           title: quantized ? "Snap to grid (on)" : "Snap to grid (off)",
-          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react6.Magnet, { className: "size-3.5" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react6.Magnet, { className: "size-3.5" })
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-muted-foreground flex-1 text-sm", children: displayLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-muted-foreground flex-1 text-sm", children: displayLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         Input,
         {
           type: "number",
@@ -2462,9 +2576,9 @@ function BorderRadiusField({
           max: MAX_VALUE
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-muted-foreground text-xs", children: "px" })
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-muted-foreground text-xs", children: "px" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       Slider,
       {
         value: [currentValue],
@@ -2475,7 +2589,7 @@ function BorderRadiusField({
         disabled
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex flex-wrap gap-1", children: borderRadiusScale.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex flex-wrap gap-1", children: borderRadiusScale.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       Button2,
       {
         type: "button",
@@ -2493,7 +2607,7 @@ function BorderRadiusField({
 // fields/ColorPickerField.tsx
 var import_react8 = require("react");
 var import_lucide_react7 = require("lucide-react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function ColorPickerField({
   value,
   onChangeAction,
@@ -2516,19 +2630,19 @@ function ColorPickerField({
   const handleOpacityChange = (values) => {
     onChangeAction({ color: currentColor, opacity: values[0] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col gap-3", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col gap-3", children: [
     label,
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Label, { className: "text-muted-foreground mb-1.5 text-xs", children: "Custom" }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Label, { className: "text-muted-foreground mb-1.5 text-xs", children: "Custom" }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           "label",
           {
             className: "border-input relative size-9 shrink-0 cursor-pointer rounded-md border transition-transform hover:scale-105",
             style: {
               backgroundColor: hexToRgba(currentColor, currentOpacity)
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
               "input",
               {
                 type: "color",
@@ -2544,7 +2658,7 @@ function ColorPickerField({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           Input,
           {
             type: "text",
@@ -2560,15 +2674,15 @@ function ColorPickerField({
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "mb-1.5 flex items-center justify-between", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Label, { className: "text-muted-foreground text-xs", children: "Opacity" }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "text-muted-foreground text-xs", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "mb-1.5 flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Label, { className: "text-muted-foreground text-xs", children: "Opacity" }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "text-muted-foreground text-xs", children: [
           currentOpacity,
           "%"
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         Slider,
         {
           value: [currentOpacity],
@@ -2608,7 +2722,7 @@ var import_react9 = __toESM(require("react"), 1);
 
 // node_modules/@radix-ui/react-context/dist/index.mjs
 var React2 = __toESM(require("react"), 1);
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function createContextScope(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
   function createContext32(rootComponentName, defaultContext) {
@@ -2619,7 +2733,7 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
       const { scope, children, ...context } = props;
       const Context = scope?.[scopeName]?.[index2] || BaseContext;
       const value = React2.useMemo(() => context, Object.values(context));
-      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Context.Provider, { value, children });
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Context.Provider, { value, children });
     };
     Provider.displayName = rootComponentName + "Provider";
     function useContext22(consumerName, scope) {
@@ -2706,10 +2820,10 @@ function useComposedRefs(...refs) {
 
 // node_modules/@radix-ui/react-collection/dist/index.mjs
 var import_react_slot2 = require("@radix-ui/react-slot");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var import_react10 = __toESM(require("react"), 1);
 var import_react_slot3 = require("@radix-ui/react-slot");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function createCollection(name) {
   const PROVIDER_NAME = name + "CollectionProvider";
   const [createCollectionContext, createCollectionScope2] = createContextScope(PROVIDER_NAME);
@@ -2721,7 +2835,7 @@ function createCollection(name) {
     const { scope, children } = props;
     const ref = import_react9.default.useRef(null);
     const itemMap = import_react9.default.useRef(/* @__PURE__ */ new Map()).current;
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   };
   CollectionProvider.displayName = PROVIDER_NAME;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
@@ -2731,7 +2845,7 @@ function createCollection(name) {
       const { scope, children } = props;
       const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
       const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
-      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CollectionSlotImpl, { ref: composedRefs, children });
+      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CollectionSlotImpl, { ref: composedRefs, children });
     }
   );
   CollectionSlot.displayName = COLLECTION_SLOT_NAME;
@@ -2748,7 +2862,7 @@ function createCollection(name) {
         context.itemMap.set(ref, { ref, ...itemData });
         return () => void context.itemMap.delete(ref);
       });
-      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
+      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
     }
   );
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
@@ -2775,7 +2889,7 @@ function createCollection(name) {
 
 // node_modules/@radix-ui/react-direction/dist/index.mjs
 var React5 = __toESM(require("react"), 1);
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var DirectionContext = React5.createContext(void 0);
 function useDirection(localDir) {
   const globalDir = React5.useContext(DirectionContext);
@@ -2789,7 +2903,7 @@ var React9 = __toESM(require("react"), 1);
 var React6 = __toESM(require("react"), 1);
 var ReactDOM = __toESM(require("react-dom"), 1);
 var import_react_slot4 = require("@radix-ui/react-slot");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var NODES = [
   "a",
   "button",
@@ -2817,7 +2931,7 @@ var Primitive = NODES.reduce((primitive, node) => {
     if (typeof window !== "undefined") {
       window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Comp, { ...primitiveProps, ref: forwardedRef });
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Comp, { ...primitiveProps, ref: forwardedRef });
   });
   Node2.displayName = `Primitive.${node}`;
   return { ...primitive, [node]: Node2 };
@@ -2852,7 +2966,7 @@ function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.docum
 }
 
 // node_modules/@radix-ui/react-dismissable-layer/dist/index.mjs
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var DISMISSABLE_LAYER_NAME = "DismissableLayer";
 var CONTEXT_UPDATE = "dismissableLayer.update";
 var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
@@ -2940,7 +3054,7 @@ var DismissableLayer = React9.forwardRef(
       document.addEventListener(CONTEXT_UPDATE, handleUpdate);
       return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
     }, []);
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       Primitive.div,
       {
         ...layerProps,
@@ -2974,7 +3088,7 @@ var DismissableLayerBranch = React9.forwardRef((props, forwardedRef) => {
       };
     }
   }, [context.branches]);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Primitive.div, { ...props, ref: composedRefs });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Primitive.div, { ...props, ref: composedRefs });
 });
 DismissableLayerBranch.displayName = BRANCH_NAME;
 function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?.document) {
@@ -3086,7 +3200,7 @@ function createFocusGuard() {
 
 // node_modules/@radix-ui/react-focus-scope/dist/index.mjs
 var React11 = __toESM(require("react"), 1);
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
 var AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount";
 var EVENT_OPTIONS = { bubbles: false, cancelable: true };
@@ -3205,7 +3319,7 @@ var FocusScope = React11.forwardRef((props, forwardedRef) => {
     },
     [loop, trapped, focusScope.paused]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Primitive.div, { tabIndex: -1, ...scopeProps, ref: composedRefs, onKeyDown: handleKeyDown });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Primitive.div, { tabIndex: -1, ...scopeProps, ref: composedRefs, onKeyDown: handleKeyDown });
 });
 FocusScope.displayName = FOCUS_SCOPE_NAME;
 function focusFirst(candidates, { select = false } = {}) {
@@ -5208,11 +5322,11 @@ var arrow3 = (options, deps) => ({
 
 // node_modules/@radix-ui/react-arrow/dist/index.mjs
 var React15 = __toESM(require("react"), 1);
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var NAME = "Arrow";
 var Arrow = React15.forwardRef((props, forwardedRef) => {
   const { children, width = 10, height = 5, ...arrowProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     Primitive.svg,
     {
       ...arrowProps,
@@ -5221,7 +5335,7 @@ var Arrow = React15.forwardRef((props, forwardedRef) => {
       height,
       viewBox: "0 0 30 10",
       preserveAspectRatio: "none",
-      children: props.asChild ? children : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("polygon", { points: "0,0 30,0 15,10" })
+      children: props.asChild ? children : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("polygon", { points: "0,0 30,0 15,10" })
     }
   );
 });
@@ -5266,14 +5380,14 @@ function useSize(element) {
 }
 
 // node_modules/@radix-ui/react-popper/dist/index.mjs
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var POPPER_NAME = "Popper";
 var [createPopperContext, createPopperScope] = createContextScope(POPPER_NAME);
 var [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
 var Popper = (props) => {
   const { __scopePopper, children } = props;
   const [anchor, setAnchor] = React17.useState(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PopperProvider, { scope: __scopePopper, anchor, onAnchorChange: setAnchor, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PopperProvider, { scope: __scopePopper, anchor, onAnchorChange: setAnchor, children });
 };
 Popper.displayName = POPPER_NAME;
 var ANCHOR_NAME = "PopperAnchor";
@@ -5291,7 +5405,7 @@ var PopperAnchor = React17.forwardRef(
         context.onAnchorChange(anchorRef.current);
       }
     });
-    return virtualRef ? null : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Primitive.div, { ...anchorProps, ref: composedRefs });
+    return virtualRef ? null : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Primitive.div, { ...anchorProps, ref: composedRefs });
   }
 );
 PopperAnchor.displayName = ANCHOR_NAME;
@@ -5384,7 +5498,7 @@ var PopperContent = React17.forwardRef(
     useLayoutEffect2(() => {
       if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
     }, [content]);
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       "div",
       {
         ref: refs.setFloating,
@@ -5408,7 +5522,7 @@ var PopperContent = React17.forwardRef(
           }
         },
         dir: props.dir,
-        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           PopperContentProvider,
           {
             scope: __scopePopper,
@@ -5417,7 +5531,7 @@ var PopperContent = React17.forwardRef(
             arrowX,
             arrowY,
             shouldHideArrow: cannotCenterArrow,
-            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               Primitive.div,
               {
                 "data-side": placedSide,
@@ -5454,7 +5568,7 @@ var PopperArrow = React17.forwardRef(function PopperArrow2(props, forwardedRef)
     // we have to use an extra wrapper because `ResizeObserver` (used by `useSize`)
     // doesn't report size as we'd expect on SVG elements.
     // it reports their bounding box which is effectively the largest path inside the SVG.
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       "span",
       {
         ref: contentContext.onArrowChange,
@@ -5477,7 +5591,7 @@ var PopperArrow = React17.forwardRef(function PopperArrow2(props, forwardedRef)
           }[contentContext.placedSide],
           visibility: contentContext.shouldHideArrow ? "hidden" : void 0
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           Root2,
           {
             ...arrowProps,
@@ -5540,14 +5654,14 @@ var Arrow2 = PopperArrow;
 // node_modules/@radix-ui/react-portal/dist/index.mjs
 var React18 = __toESM(require("react"), 1);
 var import_react_dom2 = __toESM(require("react-dom"), 1);
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var PORTAL_NAME = "Portal";
 var Portal = React18.forwardRef((props, forwardedRef) => {
   const { container: containerProp, ...portalProps } = props;
   const [mounted, setMounted] = React18.useState(false);
   useLayoutEffect2(() => setMounted(true), []);
   const container = containerProp || mounted && globalThis?.document?.body;
-  return container ? import_react_dom2.default.createPortal(/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
+  return container ? import_react_dom2.default.createPortal(/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
 });
 Portal.displayName = PORTAL_NAME;
 
@@ -5637,7 +5751,7 @@ function usePrevious(value) {
 
 // node_modules/@radix-ui/react-visually-hidden/dist/index.mjs
 var React21 = __toESM(require("react"), 1);
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var VISUALLY_HIDDEN_STYLES = Object.freeze({
   // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
   position: "absolute",
@@ -5654,7 +5768,7 @@ var VISUALLY_HIDDEN_STYLES = Object.freeze({
 var NAME2 = "VisuallyHidden";
 var VisuallyHidden = React21.forwardRef(
   (props, forwardedRef) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       Primitive.span,
       {
         ...props,
@@ -6508,7 +6622,7 @@ ReactRemoveScroll.classNames = RemoveScroll.classNames;
 var Combination_default = ReactRemoveScroll;
 
 // node_modules/@radix-ui/react-select/dist/index.mjs
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var OPEN_KEYS = [" ", "Enter", "ArrowUp", "ArrowDown"];
 var SELECTION_KEYS = [" ", "Enter"];
 var SELECT_NAME = "Select";
@@ -6558,7 +6672,7 @@ var Select = (props) => {
   const isFormControl = trigger ? form || !!trigger.closest("form") : true;
   const [nativeOptionsSet, setNativeOptionsSet] = React31.useState(/* @__PURE__ */ new Set());
   const nativeSelectKey = Array.from(nativeOptionsSet).map((option) => option.props.value).join(";");
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Root22, { ...popperScope, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Root22, { ...popperScope, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     SelectProvider,
     {
       required,
@@ -6578,7 +6692,7 @@ var Select = (props) => {
       triggerPointerDownPosRef,
       disabled,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Collection.Provider, { scope: __scopeSelect, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Collection.Provider, { scope: __scopeSelect, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           SelectNativeOptionsProvider,
           {
             scope: props.__scopeSelect,
@@ -6595,7 +6709,7 @@ var Select = (props) => {
             children
           }
         ) }),
-        isFormControl ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+        isFormControl ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
           SelectBubbleInput,
           {
             "aria-hidden": true,
@@ -6608,7 +6722,7 @@ var Select = (props) => {
             disabled,
             form,
             children: [
-              value === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("option", { value: "" }) : null,
+              value === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("option", { value: "" }) : null,
               Array.from(nativeOptionsSet)
             ]
           },
@@ -6649,7 +6763,7 @@ var SelectTrigger = React31.forwardRef(
         };
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Anchor, { asChild: true, ...popperScope, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Anchor, { asChild: true, ...popperScope, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       Primitive.button,
       {
         type: "button",
@@ -6708,13 +6822,13 @@ var SelectValue = React31.forwardRef(
     useLayoutEffect2(() => {
       onValueNodeHasChildrenChange(hasChildren);
     }, [onValueNodeHasChildrenChange, hasChildren]);
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       Primitive.span,
       {
         ...valueProps,
         ref: composedRefs,
         style: { pointerEvents: "none" },
-        children: shouldShowPlaceholder(context.value) ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_jsx_runtime41.Fragment, { children: placeholder }) : children
+        children: shouldShowPlaceholder(context.value) ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_jsx_runtime42.Fragment, { children: placeholder }) : children
       }
     );
   }
@@ -6724,13 +6838,13 @@ var ICON_NAME = "SelectIcon";
 var SelectIcon = React31.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSelect, children, ...iconProps } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Primitive.span, { "aria-hidden": true, ...iconProps, ref: forwardedRef, children: children || "\u25BC" });
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Primitive.span, { "aria-hidden": true, ...iconProps, ref: forwardedRef, children: children || "\u25BC" });
   }
 );
 SelectIcon.displayName = ICON_NAME;
 var PORTAL_NAME2 = "SelectPortal";
 var SelectPortal = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Portal, { asChild: true, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Portal, { asChild: true, ...props });
 };
 SelectPortal.displayName = PORTAL_NAME2;
 var CONTENT_NAME2 = "SelectContent";
@@ -6744,11 +6858,11 @@ var SelectContent = React31.forwardRef(
     if (!context.open) {
       const frag = fragment;
       return frag ? ReactDOM4.createPortal(
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SelectContentProvider, { scope: props.__scopeSelect, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Collection.Slot, { scope: props.__scopeSelect, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { children: props.children }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectContentProvider, { scope: props.__scopeSelect, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Collection.Slot, { scope: props.__scopeSelect, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { children: props.children }) }) }),
         frag
       ) : null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SelectContentImpl, { ...props, ref: forwardedRef });
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectContentImpl, { ...props, ref: forwardedRef });
   }
 );
 SelectContent.displayName = CONTENT_NAME2;
@@ -6902,7 +7016,7 @@ var SelectContentImpl = React31.forwardRef(
       hideWhenDetached,
       avoidCollisions
     } : {};
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       SelectContentProvider,
       {
         scope: __scopeSelect,
@@ -6918,7 +7032,7 @@ var SelectContentImpl = React31.forwardRef(
         position,
         isPositioned,
         searchRef,
-        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Combination_default, { as: Slot2, allowPinchZoom: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Combination_default, { as: Slot2, allowPinchZoom: true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           FocusScope,
           {
             asChild: true,
@@ -6930,7 +7044,7 @@ var SelectContentImpl = React31.forwardRef(
               context.trigger?.focus({ preventScroll: true });
               event.preventDefault();
             }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               DismissableLayer,
               {
                 asChild: true,
@@ -6939,7 +7053,7 @@ var SelectContentImpl = React31.forwardRef(
                 onPointerDownOutside,
                 onFocusOutside: (event) => event.preventDefault(),
                 onDismiss: () => context.onOpenChange(false),
-                children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                   SelectPosition,
                   {
                     role: "listbox",
@@ -7115,14 +7229,14 @@ var SelectItemAlignedPosition = React31.forwardRef((props, forwardedRef) => {
     },
     [position, focusSelectedItem]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     SelectViewportProvider,
     {
       scope: __scopeSelect,
       contentWrapper,
       shouldExpandOnScrollRef,
       onScrollButtonChange: handleScrollButtonChange,
-      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         "div",
         {
           ref: setContentWrapper,
@@ -7132,7 +7246,7 @@ var SelectItemAlignedPosition = React31.forwardRef((props, forwardedRef) => {
             position: "fixed",
             zIndex: contentZIndex
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             Primitive.div,
             {
               ...popperProps,
@@ -7162,7 +7276,7 @@ var SelectPopperPosition = React31.forwardRef((props, forwardedRef) => {
     ...popperProps
   } = props;
   const popperScope = usePopperScope(__scopeSelect);
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     Content,
     {
       ...popperScope,
@@ -7196,8 +7310,8 @@ var SelectViewport = React31.forwardRef(
     const viewportContext = useSelectViewportContext(VIEWPORT_NAME, __scopeSelect);
     const composedRefs = useComposedRefs(forwardedRef, contentContext.onViewportChange);
     const prevScrollTopRef = React31.useRef(0);
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         "style",
         {
           dangerouslySetInnerHTML: {
@@ -7206,7 +7320,7 @@ var SelectViewport = React31.forwardRef(
           nonce
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Collection.Slot, { scope: __scopeSelect, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Collection.Slot, { scope: __scopeSelect, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         Primitive.div,
         {
           "data-radix-select-viewport": "",
@@ -7262,7 +7376,7 @@ var SelectGroup = React31.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSelect, ...groupProps } = props;
     const groupId = useId();
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SelectGroupContextProvider, { scope: __scopeSelect, id: groupId, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Primitive.div, { role: "group", "aria-labelledby": groupId, ...groupProps, ref: forwardedRef }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectGroupContextProvider, { scope: __scopeSelect, id: groupId, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Primitive.div, { role: "group", "aria-labelledby": groupId, ...groupProps, ref: forwardedRef }) });
   }
 );
 SelectGroup.displayName = GROUP_NAME;
@@ -7271,7 +7385,7 @@ var SelectLabel = React31.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSelect, ...labelProps } = props;
     const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Primitive.div, { id: groupContext.id, ...labelProps, ref: forwardedRef });
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Primitive.div, { id: groupContext.id, ...labelProps, ref: forwardedRef });
   }
 );
 SelectLabel.displayName = LABEL_NAME;
@@ -7308,7 +7422,7 @@ var SelectItem = React31.forwardRef(
         "A <Select.Item /> must have a value prop that is not an empty string. This is because the Select value can be set to an empty string to clear the selection and show the placeholder."
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       SelectItemContextProvider,
       {
         scope: __scopeSelect,
@@ -7319,14 +7433,14 @@ var SelectItem = React31.forwardRef(
         onItemTextChange: React31.useCallback((node) => {
           setTextValue((prevTextValue) => prevTextValue || (node?.textContent ?? "").trim());
         }, []),
-        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           Collection.ItemSlot,
           {
             scope: __scopeSelect,
             value,
             disabled,
             textValue,
-            children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               Primitive.div,
               {
                 role: "option",
@@ -7395,7 +7509,7 @@ var SelectItemText = React31.forwardRef(
     );
     const textContent = itemTextNode?.textContent;
     const nativeOption = React31.useMemo(
-      () => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("option", { value: itemContext.value, disabled: itemContext.disabled, children: textContent }, itemContext.value),
+      () => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("option", { value: itemContext.value, disabled: itemContext.disabled, children: textContent }, itemContext.value),
       [itemContext.disabled, itemContext.value, textContent]
     );
     const { onNativeOptionAdd, onNativeOptionRemove } = nativeOptionsContext;
@@ -7403,8 +7517,8 @@ var SelectItemText = React31.forwardRef(
       onNativeOptionAdd(nativeOption);
       return () => onNativeOptionRemove(nativeOption);
     }, [onNativeOptionAdd, onNativeOptionRemove, nativeOption]);
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Primitive.span, { id: itemContext.textId, ...itemTextProps, ref: composedRefs }),
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Primitive.span, { id: itemContext.textId, ...itemTextProps, ref: composedRefs }),
       itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren ? ReactDOM4.createPortal(itemTextProps.children, context.valueNode) : null
     ] });
   }
@@ -7415,7 +7529,7 @@ var SelectItemIndicator = React31.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSelect, ...itemIndicatorProps } = props;
     const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
-    return itemContext.isSelected ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Primitive.span, { "aria-hidden": true, ...itemIndicatorProps, ref: forwardedRef }) : null;
+    return itemContext.isSelected ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Primitive.span, { "aria-hidden": true, ...itemIndicatorProps, ref: forwardedRef }) : null;
   }
 );
 SelectItemIndicator.displayName = ITEM_INDICATOR_NAME;
@@ -7438,7 +7552,7 @@ var SelectScrollUpButton = React31.forwardRef((props, forwardedRef) => {
       return () => viewport.removeEventListener("scroll", handleScroll22);
     }
   }, [contentContext.viewport, contentContext.isPositioned]);
-  return canScrollUp ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return canScrollUp ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     SelectScrollButtonImpl,
     {
       ...props,
@@ -7473,7 +7587,7 @@ var SelectScrollDownButton = React31.forwardRef((props, forwardedRef) => {
       return () => viewport.removeEventListener("scroll", handleScroll22);
     }
   }, [contentContext.viewport, contentContext.isPositioned]);
-  return canScrollDown ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return canScrollDown ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     SelectScrollButtonImpl,
     {
       ...props,
@@ -7506,7 +7620,7 @@ var SelectScrollButtonImpl = React31.forwardRef((props, forwardedRef) => {
     const activeItem = getItems().find((item) => item.ref.current === document.activeElement);
     activeItem?.ref.current?.scrollIntoView({ block: "nearest" });
   }, [getItems]);
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     Primitive.div,
     {
       "aria-hidden": true,
@@ -7534,7 +7648,7 @@ var SEPARATOR_NAME = "SelectSeparator";
 var SelectSeparator = React31.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSelect, ...separatorProps } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Primitive.div, { "aria-hidden": true, ...separatorProps, ref: forwardedRef });
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Primitive.div, { "aria-hidden": true, ...separatorProps, ref: forwardedRef });
   }
 );
 SelectSeparator.displayName = SEPARATOR_NAME;
@@ -7545,7 +7659,7 @@ var SelectArrow = React31.forwardRef(
     const popperScope = usePopperScope(__scopeSelect);
     const context = useSelectContext(ARROW_NAME2, __scopeSelect);
     const contentContext = useSelectContentContext(ARROW_NAME2, __scopeSelect);
-    return context.open && contentContext.position === "popper" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Arrow2, { ...popperScope, ...arrowProps, ref: forwardedRef }) : null;
+    return context.open && contentContext.position === "popper" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Arrow2, { ...popperScope, ...arrowProps, ref: forwardedRef }) : null;
   }
 );
 SelectArrow.displayName = ARROW_NAME2;
@@ -7570,7 +7684,7 @@ var SelectBubbleInput = React31.forwardRef(
         select.dispatchEvent(event);
       }
     }, [prevValue, value]);
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       Primitive.select,
       {
         ...props,
@@ -7640,16 +7754,16 @@ var ScrollDownButton = SelectScrollDownButton;
 
 // shadcn/select.tsx
 var import_lucide_react8 = require("lucide-react");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function Select2({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Root23, { "data-slot": "select", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Root23, { "data-slot": "select", ...props });
 }
 function SelectValue2({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Value, { "data-slot": "select-value", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Value, { "data-slot": "select-value", ...props });
 }
 function SelectTrigger2({
   className,
@@ -7657,7 +7771,7 @@ function SelectTrigger2({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     Trigger,
     {
       "data-slot": "select-trigger",
@@ -7669,7 +7783,7 @@ function SelectTrigger2({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon3, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react8.ChevronDownIcon, { className: "size-4 opacity-50" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icon3, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react8.ChevronDownIcon, { className: "size-4 opacity-50" }) })
       ]
     }
   );
@@ -7681,7 +7795,7 @@ function SelectContent2({
   align = "center",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Portal2, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Portal2, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     Content2,
     {
       "data-slot": "select-content",
@@ -7694,8 +7808,8 @@ function SelectContent2({
       align,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectScrollUpButton2, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SelectScrollUpButton2, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           Viewport,
           {
             className: cn(
@@ -7705,7 +7819,7 @@ function SelectContent2({
             children
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectScrollDownButton2, {})
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SelectScrollDownButton2, {})
       ]
     }
   ) });
@@ -7715,7 +7829,7 @@ function SelectItem2({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     Item,
     {
       "data-slot": "select-item",
@@ -7725,15 +7839,15 @@ function SelectItem2({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           "span",
           {
             "data-slot": "select-item-indicator",
             className: "absolute right-2 flex size-3.5 items-center justify-center",
-            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react8.CheckIcon, { className: "size-4" }) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react8.CheckIcon, { className: "size-4" }) })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ItemText, { children })
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ItemText, { children })
       ]
     }
   );
@@ -7742,7 +7856,7 @@ function SelectScrollUpButton2({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     ScrollUpButton,
     {
       "data-slot": "select-scroll-up-button",
@@ -7751,7 +7865,7 @@ function SelectScrollUpButton2({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react8.ChevronUpIcon, { className: "size-4" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react8.ChevronUpIcon, { className: "size-4" })
     }
   );
 }
@@ -7759,7 +7873,7 @@ function SelectScrollDownButton2({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     ScrollDownButton,
     {
       "data-slot": "select-scroll-down-button",
@@ -7768,13 +7882,13 @@ function SelectScrollDownButton2({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react8.ChevronDownIcon, { className: "size-4" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react8.ChevronDownIcon, { className: "size-4" })
     }
   );
 }
 
 // fields/EntryBoundTextField.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function isEntryBoundValue7(value) {
   return typeof value === "object" && value !== null && "useEntry" in value;
 }
@@ -7829,10 +7943,10 @@ function EntryBoundTextField({
     }
   };
   const hasEntries = entryNames.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "text-sm font-medium", children: label }),
-      hasEntries && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-sm font-medium", children: label }),
+      hasEntries && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         Toggle,
         {
           pressed: isUsingEntry,
@@ -7845,38 +7959,38 @@ function EntryBoundTextField({
         }
       )
     ] }),
-    isUsingEntry ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+    isUsingEntry ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
           Select2,
           {
             value: currentEntryName,
             onValueChange: handleEntryChange,
             disabled,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SelectTrigger2, { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SelectValue2, { placeholder: "Select entry" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SelectContent2, { children: entryNames.map((name) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SelectItem2, { value: name, children: name }, name)) })
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SelectTrigger2, { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SelectValue2, { placeholder: "Select entry" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SelectContent2, { children: entryNames.map((name) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SelectItem2, { value: name, children: name }, name)) })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
           Select2,
           {
             value: currentFieldKey,
             onValueChange: handleFieldChange,
             disabled: disabled || !currentEntryName,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SelectTrigger2, { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SelectValue2, { placeholder: "Select field" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SelectContent2, { children: availableFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SelectItem2, { value: field, children: field }, field)) })
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SelectTrigger2, { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SelectValue2, { placeholder: "Select field" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SelectContent2, { children: availableFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SelectItem2, { value: field, children: field }, field)) })
             ]
           }
         )
       ] }),
-      resolvedValue && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "bg-muted rounded-md p-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Label, { className: "text-muted-foreground text-xs", children: "Preview" }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "text-sm", children: resolvedValue })
+      resolvedValue && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "bg-muted rounded-md p-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Label, { className: "text-muted-foreground text-xs", children: "Preview" }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "text-sm", children: resolvedValue })
       ] })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       Input,
       {
         value: resolvedValue,
@@ -7895,7 +8009,7 @@ function createEntryBoundTextField(label, placeholder) {
       value,
       onChange,
       readOnly
-    }) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    }) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       EntryBoundTextField,
       {
         value,
@@ -7910,7 +8024,7 @@ function createEntryBoundTextField(label, placeholder) {
 
 // fields/ResponsiveToggleField.tsx
 var import_lucide_react9 = require("lucide-react");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var breakpoints = [
   { key: "mobile", label: "Mobile", icon: import_lucide_react9.Smartphone },
   { key: "desktop", label: "Desktop", icon: import_lucide_react9.Monitor }
@@ -7931,9 +8045,9 @@ function ResponsiveToggleField({
       [key]: !visibility[key]
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex flex-col gap-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Label, { className: "text-sm font-medium", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex gap-2", children: breakpoints.map(({ key, label: bpLabel, icon: Icon4 }) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Label, { className: "text-sm font-medium", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex gap-2", children: breakpoints.map(({ key, label: bpLabel, icon: Icon4 }) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
       "button",
       {
         type: "button",
@@ -7945,13 +8059,13 @@ function ResponsiveToggleField({
         ),
         "aria-label": `${bpLabel} visibility`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icon4, { className: "size-5" }),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-xs font-medium", children: bpLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Icon4, { className: "size-5" }),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-xs font-medium", children: bpLabel })
         ]
       },
       key
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "text-muted-foreground text-xs", children: !visibility.mobile && !visibility.desktop ? "Hidden on all devices" : `Visible on ${[
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "text-muted-foreground text-xs", children: !visibility.mobile && !visibility.desktop ? "Hidden on all devices" : `Visible on ${[
       visibility.mobile && "mobile",
       visibility.desktop && "desktop"
     ].filter(Boolean).join(" & ")}` })
@@ -7959,7 +8073,7 @@ function ResponsiveToggleField({
 }
 
 // fields/ShadowField.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function ShadowField({
   value,
   onChangeAction,
@@ -7967,9 +8081,9 @@ function ShadowField({
   label
 }) {
   const currentValue = value ?? "none";
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-col gap-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Label, { className: "text-sm font-medium", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "grid grid-cols-4 gap-2", children: shadowPresets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Label, { className: "text-sm font-medium", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "grid grid-cols-4 gap-2", children: shadowPresets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
       Button2,
       {
         type: "button",
@@ -7982,14 +8096,14 @@ function ShadowField({
           currentValue === preset.value && "ring-ring ring-2"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
             "div",
             {
               className: "bg-background size-8 rounded",
               style: { boxShadow: preset.css }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-xs", children: preset.label })
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-xs", children: preset.label })
         ]
       },
       preset.value
@@ -8021,7 +8135,7 @@ var getClosestSpacingValue = (value) => {
 };
 
 // fields/SpacingSliderField.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var MAX_VALUE2 = spacingScale[spacingScale.length - 1].value;
 function SpacingSliderField({
   value,
@@ -8061,10 +8175,10 @@ function SpacingSliderField({
   };
   const matchingPreset = spacingScale.find((s) => s.value === currentValue);
   const displayLabel = matchingPreset?.label ?? "Custom";
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex flex-col gap-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Label, { className: "text-sm font-medium", children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Label, { className: "text-sm font-medium", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         Toggle,
         {
           pressed: quantized,
@@ -8073,13 +8187,13 @@ function SpacingSliderField({
           variant: "outline",
           "aria-label": "Snap to grid",
           title: quantized ? "Snap to grid (on)" : "Snap to grid (off)",
-          children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react10.Magnet, { className: "size-3.5" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react10.Magnet, { className: "size-3.5" })
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-muted-foreground flex-1 text-sm", children: displayLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-muted-foreground flex-1 text-sm", children: displayLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         Input,
         {
           type: "number",
@@ -8091,9 +8205,9 @@ function SpacingSliderField({
           max: MAX_VALUE2
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-muted-foreground text-xs", children: "px" })
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-muted-foreground text-xs", children: "px" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       Slider,
       {
         value: [currentValue],
@@ -8104,7 +8218,7 @@ function SpacingSliderField({
         disabled
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex flex-wrap gap-1", children: spacingScale.filter((_, i) => i % 2 === 0 || i === spacingScale.length - 1).map((preset) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex flex-wrap gap-1", children: spacingScale.filter((_, i) => i % 2 === 0 || i === spacingScale.length - 1).map((preset) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       Button2,
       {
         type: "button",
@@ -8120,7 +8234,7 @@ function SpacingSliderField({
 }
 
 // fields/ThemeableColorField.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function isThemeableValue12(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
@@ -8145,10 +8259,10 @@ function ThemeableColorField({
   const handleColorChange = (newColor) => {
     onChange({ useTheme: false, value: newColor });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-sm font-medium", children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-sm font-medium", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
         Toggle,
         {
           pressed: isUsingTheme,
@@ -8161,8 +8275,8 @@ function ThemeableColorField({
         }
       )
     ] }),
-    isUsingTheme ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center gap-2 rounded-md border p-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    isUsingTheme ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center gap-2 rounded-md border p-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
         "div",
         {
           className: "size-6 shrink-0 rounded border",
@@ -8171,11 +8285,11 @@ function ThemeableColorField({
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "text-muted-foreground text-sm capitalize", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("span", { className: "text-muted-foreground text-sm capitalize", children: [
         "Theme: ",
         themeKey
       ] })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       ColorPickerField,
       {
         value: customValue,
@@ -8194,7 +8308,7 @@ function createThemeableColorField(label, themeKey) {
       value,
       onChange,
       readOnly
-    }) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    }) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       ThemeableColorField,
       {
         value,
@@ -8208,10 +8322,10 @@ function createThemeableColorField(label, themeKey) {
 }
 
 // fields/TypographyField.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 
 // fields/index.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function createColorField(label) {
   return {
     type: "custom",
@@ -8220,7 +8334,7 @@ function createColorField(label) {
       value,
       onChange,
       readOnly
-    }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    }) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       ColorPickerField,
       {
         value,
@@ -8239,7 +8353,7 @@ function createSpacingField(label) {
       value,
       onChange,
       readOnly
-    }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    }) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       SpacingSliderField,
       {
         value,
@@ -8258,7 +8372,7 @@ function createShadowField(label) {
       value,
       onChange,
       readOnly
-    }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    }) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       ShadowField,
       {
         value,
@@ -8277,7 +8391,7 @@ function createBorderRadiusField(label) {
       value,
       onChange,
       readOnly
-    }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    }) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       BorderRadiusField,
       {
         value,
@@ -8296,7 +8410,7 @@ function createResponsiveField(label) {
       value,
       onChange,
       readOnly
-    }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    }) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       ResponsiveToggleField,
       {
         value,
@@ -8309,7 +8423,7 @@ function createResponsiveField(label) {
 }
 
 // config.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var config = {
   categories: {
     typography: {
@@ -8426,7 +8540,7 @@ var config = {
         letterSpacing: "normal",
         lineHeight: "tight"
       },
-      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Heading, { ...props })
+      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Heading, { ...props })
     },
     Paragraph: {
       fields: {
@@ -8477,7 +8591,7 @@ var config = {
         align: "left",
         lineHeight: "normal"
       },
-      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Paragraph, { ...props })
+      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Paragraph, { ...props })
     },
     // ==================
     // ACTIONS
@@ -8550,7 +8664,7 @@ var config = {
         align: "center",
         target: "_self"
       },
-      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Button, { ...props })
+      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Button, { ...props })
     },
     // ==================
     // MEDIA
@@ -8630,7 +8744,7 @@ var config = {
         align: "center",
         captionColor: { useTheme: true, themeKey: "muted" }
       },
-      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Image, { ...props })
+      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Image, { ...props })
     },
     ImageCarousel: {
       fields: {
@@ -8694,7 +8808,7 @@ var config = {
         arrowColor: { useTheme: true, themeKey: "background" },
         dotColor: { useTheme: true, themeKey: "primary" }
       },
-      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ImageCarousel, { ...props })
+      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ImageCarousel, { ...props })
     },
     VideoEmbed: {
       fields: {
@@ -8766,7 +8880,7 @@ var config = {
         muted: false,
         loop: false
       },
-      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(VideoEmbed, { ...props })
+      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(VideoEmbed, { ...props })
     },
     Icon: {
       fields: {
@@ -8803,7 +8917,7 @@ var config = {
         color: { useTheme: true, themeKey: "primary" },
         align: "center"
       },
-      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Icon, { ...props })
+      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Icon, { ...props })
     },
     // ==================
     // LAYOUT
@@ -8834,7 +8948,7 @@ var config = {
         contentMaxWidth: "1400px",
         visibility: { mobile: true, desktop: true }
       },
-      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Section, { ...props })
+      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Section, { ...props })
     },
     Container: {
       fields: {
@@ -8887,7 +9001,7 @@ var config = {
         paddingY: "none",
         centered: true
       },
-      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Container, { ...props })
+      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Container, { ...props })
     },
     Columns: {
       fields: {
@@ -8932,7 +9046,7 @@ var config = {
         verticalAlign: "top",
         stackOnMobile: true
       },
-      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Columns, { ...props })
+      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Columns, { ...props })
     },
     Card: {
       fields: {
@@ -8989,7 +9103,7 @@ var config = {
         shadow: "sm",
         padding: "md"
       },
-      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Card, { ...props })
+      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Card, { ...props })
     },
     Divider: {
       fields: {
@@ -9045,7 +9159,7 @@ var config = {
         align: "center",
         spacing: "md"
       },
-      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Divider, { ...props })
+      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Divider, { ...props })
     },
     Spacer: {
       fields: {
@@ -9065,7 +9179,7 @@ var config = {
       defaultProps: {
         size: "md"
       },
-      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Spacer, { ...props })
+      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Spacer, { ...props })
     },
     // ==================
     // LEGACY COMPONENTS
@@ -9118,7 +9232,7 @@ var config = {
         gradientColor1: { useTheme: true, themeKey: "primary" },
         gradientColor2: { useTheme: true, themeKey: "secondary" }
       },
-      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(TextBlock, { ...props })
+      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TextBlock, { ...props })
     },
     CustomImage: {
       fields: {
@@ -9145,7 +9259,7 @@ var config = {
         alignment: "center",
         fitContent: false
       },
-      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(CustomImage, { ...props })
+      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(CustomImage, { ...props })
     },
     FeaturesList: {
       fields: {
@@ -9186,7 +9300,7 @@ var config = {
         size: "medium",
         iconColor: { color: "#3B82F6", opacity: 100 }
       },
-      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(FeaturesList, { ...props })
+      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(FeaturesList, { ...props })
     },
     FeatureGrid: {
       fields: {
@@ -9242,7 +9356,7 @@ var config = {
         iconColor: { color: "#3B82F6", opacity: 100 },
         textColor: { color: "#000000", opacity: 100 }
       },
-      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(FeatureGrid, { ...props })
+      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(FeatureGrid, { ...props })
     },
     Footer: {
       fields: {
@@ -9259,7 +9373,7 @@ var config = {
         backgroundColor: { color: "#111827", opacity: 100 },
         textColor: { color: "#FFFFFF", opacity: 100 }
       },
-      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Footer, { ...props })
+      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Footer, { ...props })
     },
     Topbar: {
       fields: {
@@ -9294,7 +9408,7 @@ var config = {
         textColor: { color: "#000000", opacity: 100 },
         maxWidth: "1400px"
       },
-      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Topbar, { ...props })
+      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Topbar, { ...props })
     },
     Popup: {
       fields: {
@@ -9342,7 +9456,7 @@ var config = {
         width: "medium",
         textLink: false
       },
-      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Popup, { ...props })
+      render: (props) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Popup, { ...props })
     }
   }
 };