@mission-studio/puck 1.0.20 → 1.0.21

package/dist/config/server.js

@@ -91,9 +91,64 @@ function Heading({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tag, { id, style, children: resolvedText });
 }
 
+// components/page/primitives/Paragraph.ts
+var paragraphSizeMap = {
+  sm: "0.875rem",
+  base: "1rem",
+  lg: "1.125rem",
+  xl: "1.25rem"
+};
+var paragraphWeightMap = {
+  normal: 400,
+  medium: 500,
+  semibold: 600
+};
+var paragraphLineHeightMap = {
+  tight: "1.4",
+  normal: "1.6",
+  relaxed: "1.75",
+  loose: "2"
+};
+function getParagraphStyle(props) {
+  return {
+    fontSize: paragraphSizeMap[props.size],
+    fontWeight: paragraphWeightMap[props.weight],
+    color: props.color,
+    textAlign: props.align,
+    lineHeight: paragraphLineHeightMap[props.lineHeight],
+    maxWidth: props.maxWidth || void 0,
+    margin: 0
+  };
+}
+
+// components/page/astro/Paragraph.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Paragraph({
+  text,
+  size = "base",
+  weight = "normal",
+  color = "rgba(0, 0, 0, 1)",
+  align = "left",
+  lineHeight = "normal",
+  maxWidth,
+  id
+}) {
+  const resolvedText = text || "";
+  const style = getParagraphStyle({
+    size,
+    weight,
+    color,
+    align,
+    lineHeight,
+    maxWidth
+  });
+  if (!resolvedText) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { id, style, children: resolvedText });
+}
+
 // entries/context.tsx
 var import_react = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var EntriesContext = (0, import_react.createContext)(null);
 function useEntries() {
   const context = (0, import_react.useContext)(EntriesContext);
@@ -108,8 +163,71 @@ function useEntries() {
   return context;
 }
 
-// theme/context.tsx
+// hooks/useGtmEvent.ts
+function useGtmEvent() {
+  return (eventName, data) => {
+    if (typeof window === "undefined") return;
+    if (typeof window.gtag === "function") {
+      window.gtag("event", eventName, data || {});
+    }
+  };
+}
+
+// hooks/useUtmParams.ts
 var import_react2 = require("react");
+function useUtmParams() {
+  const [utmParams, setUtmParams] = (0, import_react2.useState)({});
+  (0, import_react2.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const urlParams = new URLSearchParams(window.location.search);
+    const source = urlParams.get("utm_source");
+    const medium = urlParams.get("utm_medium");
+    const campaign = urlParams.get("utm_campaign");
+    const content = urlParams.get("utm_content");
+    const term = urlParams.get("utm_term");
+    const params = {};
+    if (source) {
+      params.source = source;
+      sessionStorage.setItem("utm_source", source);
+    } else {
+      const stored = sessionStorage.getItem("utm_source");
+      if (stored) params.source = stored;
+    }
+    if (medium) {
+      params.medium = medium;
+      sessionStorage.setItem("utm_medium", medium);
+    } else {
+      const stored = sessionStorage.getItem("utm_medium");
+      if (stored) params.medium = stored;
+    }
+    if (campaign) {
+      params.campaign = campaign;
+      sessionStorage.setItem("utm_campaign", campaign);
+    } else {
+      const stored = sessionStorage.getItem("utm_campaign");
+      if (stored) params.campaign = stored;
+    }
+    if (content) {
+      params.content = content;
+      sessionStorage.setItem("utm_content", content);
+    } else {
+      const stored = sessionStorage.getItem("utm_content");
+      if (stored) params.content = stored;
+    }
+    if (term) {
+      params.term = term;
+      sessionStorage.setItem("utm_term", term);
+    } else {
+      const stored = sessionStorage.getItem("utm_term");
+      if (stored) params.term = stored;
+    }
+    setUtmParams(params);
+  }, []);
+  return utmParams;
+}
+
+// theme/context.tsx
+var import_react3 = require("react");
 
 // theme/defaults.ts
 var DEFAULT_THEME = {
@@ -157,10 +275,10 @@ var DEFAULT_THEME = {
 };
 
 // theme/context.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var ThemeContext = (0, import_react2.createContext)(null);
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ThemeContext = (0, import_react3.createContext)(null);
 function useTheme() {
-  const context = (0, import_react2.useContext)(ThemeContext);
+  const context = (0, import_react3.useContext)(ThemeContext);
   if (!context) {
     return {
       theme: DEFAULT_THEME,
@@ -201,139 +319,6 @@ function cn(...inputs) {
   return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
 }
 
-// components/page/Paragraph.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var sizeMap = {
-  sm: "0.875rem",
-  base: "1rem",
-  lg: "1.125rem",
-  xl: "1.25rem"
-};
-var weightMap = {
-  normal: 400,
-  medium: 500,
-  semibold: 600
-};
-var lineHeightMap = {
-  tight: "1.4",
-  normal: "1.6",
-  relaxed: "1.75",
-  loose: "2"
-};
-function isThemeableValue(value) {
-  return typeof value === "object" && value !== null && "useTheme" in value;
-}
-function isEntryBoundValue(value) {
-  return typeof value === "object" && value !== null && "useEntry" in value;
-}
-function Paragraph({
-  text,
-  size = "base",
-  weight = "normal",
-  color,
-  align = "left",
-  lineHeight = "normal",
-  maxWidth,
-  id
-}) {
-  const { resolveColor: resolveColor2 } = useTheme();
-  const { getEntryValue } = useEntries();
-  const resolvedText = (() => {
-    if (!text) return "";
-    if (typeof text === "string") return text;
-    if (isEntryBoundValue(text)) {
-      if (text.useEntry) {
-        return String(getEntryValue(text.entryName, text.fieldKey) ?? "");
-      }
-      return text.value;
-    }
-    return "";
-  })();
-  const resolvedColor = (() => {
-    if (!color) return resolveColor2("foreground");
-    if (typeof color === "string") return { color, opacity: 100 };
-    if (isThemeableValue(color)) {
-      return color.useTheme ? resolveColor2(color.themeKey) : color.value;
-    }
-    if ("color" in color) return color;
-    return resolveColor2("foreground");
-  })();
-  const style = {
-    fontSize: sizeMap[size],
-    fontWeight: weightMap[weight],
-    color: hexToRgba(resolvedColor.color, resolvedColor.opacity),
-    textAlign: align,
-    lineHeight: lineHeightMap[lineHeight],
-    maxWidth: maxWidth || void 0,
-    margin: 0
-  };
-  if (!resolvedText) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { id, style, children: resolvedText });
-}
-
-// hooks/useGtmEvent.ts
-function useGtmEvent() {
-  return (eventName, data) => {
-    if (typeof window === "undefined") return;
-    if (typeof window.gtag === "function") {
-      window.gtag("event", eventName, data || {});
-    }
-  };
-}
-
-// hooks/useUtmParams.ts
-var import_react3 = require("react");
-function useUtmParams() {
-  const [utmParams, setUtmParams] = (0, import_react3.useState)({});
-  (0, import_react3.useEffect)(() => {
-    if (typeof window === "undefined") return;
-    const urlParams = new URLSearchParams(window.location.search);
-    const source = urlParams.get("utm_source");
-    const medium = urlParams.get("utm_medium");
-    const campaign = urlParams.get("utm_campaign");
-    const content = urlParams.get("utm_content");
-    const term = urlParams.get("utm_term");
-    const params = {};
-    if (source) {
-      params.source = source;
-      sessionStorage.setItem("utm_source", source);
-    } else {
-      const stored = sessionStorage.getItem("utm_source");
-      if (stored) params.source = stored;
-    }
-    if (medium) {
-      params.medium = medium;
-      sessionStorage.setItem("utm_medium", medium);
-    } else {
-      const stored = sessionStorage.getItem("utm_medium");
-      if (stored) params.medium = stored;
-    }
-    if (campaign) {
-      params.campaign = campaign;
-      sessionStorage.setItem("utm_campaign", campaign);
-    } else {
-      const stored = sessionStorage.getItem("utm_campaign");
-      if (stored) params.campaign = stored;
-    }
-    if (content) {
-      params.content = content;
-      sessionStorage.setItem("utm_content", content);
-    } else {
-      const stored = sessionStorage.getItem("utm_content");
-      if (stored) params.content = stored;
-    }
-    if (term) {
-      params.term = term;
-      sessionStorage.setItem("utm_term", term);
-    } else {
-      const stored = sessionStorage.getItem("utm_term");
-      if (stored) params.term = stored;
-    }
-    setUtmParams(params);
-  }, []);
-  return utmParams;
-}
-
 // components/page/Button.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var sizeStyles = {
@@ -349,10 +334,10 @@ var radiusMap = {
   lg: "16px",
   full: "9999px"
 };
-function isThemeableValue2(value) {
+function isThemeableValue(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
-function isEntryBoundValue2(value) {
+function isEntryBoundValue(value) {
   return typeof value === "object" && value !== null && "useEntry" in value;
 }
 function Button({
@@ -375,7 +360,7 @@ function Button({
   const resolvedText = (() => {
     if (!text) return "Button";
     if (typeof text === "string") return text;
-    if (isEntryBoundValue2(text)) {
+    if (isEntryBoundValue(text)) {
       if (text.useEntry) {
         return String(getEntryValue(text.entryName, text.fieldKey) ?? "Button");
       }
@@ -396,7 +381,7 @@ function Button({
   const resolvedColor = (() => {
     if (!color) return resolveColor2("primary");
     if (typeof color === "string") return { color, opacity: 100 };
-    if (isThemeableValue2(color)) {
+    if (isThemeableValue(color)) {
       return color.useTheme ? resolveColor2(color.themeKey) : color.value;
     }
     if ("color" in color) return color;
@@ -409,7 +394,7 @@ function Button({
     }
     if (typeof textColor === "string")
       return { color: textColor, opacity: 100 };
-    if (isThemeableValue2(textColor)) {
+    if (isThemeableValue(textColor)) {
       return textColor.useTheme ? resolveColor2(textColor.themeKey) : textColor.value;
     }
     if ("color" in textColor) return textColor;
@@ -506,10 +491,10 @@ var shadowMap = {
   lg: "0 10px 15px rgba(0,0,0,0.1)",
   xl: "0 20px 25px rgba(0,0,0,0.15)"
 };
-function isThemeableValue3(value) {
+function isThemeableValue2(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
-function isEntryBoundValue3(value) {
+function isEntryBoundValue2(value) {
   return typeof value === "object" && value !== null && "useEntry" in value;
 }
 function Image({
@@ -530,7 +515,7 @@ function Image({
   const resolvedSrc = (() => {
     if (!src) return "";
     if (typeof src === "string") return src;
-    if (isEntryBoundValue3(src)) {
+    if (isEntryBoundValue2(src)) {
       if (src.useEntry) {
         return String(getEntryValue(src.entryName, src.fieldKey) ?? "");
       }
@@ -541,7 +526,7 @@ function Image({
   const resolvedCaption = (() => {
     if (!caption) return "";
     if (typeof caption === "string") return caption;
-    if (isEntryBoundValue3(caption)) {
+    if (isEntryBoundValue2(caption)) {
       if (caption.useEntry) {
         return String(getEntryValue(caption.entryName, caption.fieldKey) ?? "");
       }
@@ -553,7 +538,7 @@ function Image({
     if (!captionColor) return resolveColor2("muted");
     if (typeof captionColor === "string")
       return { color: captionColor, opacity: 100 };
-    if (isThemeableValue3(captionColor)) {
+    if (isThemeableValue2(captionColor)) {
       return captionColor.useTheme ? resolveColor2(captionColor.themeKey) : captionColor.value;
     }
     if ("color" in captionColor) return captionColor;
@@ -618,7 +603,7 @@ var radiusMap3 = {
   md: "8px",
   lg: "16px"
 };
-function isThemeableValue4(value) {
+function isThemeableValue3(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
 function ImageCarousel({
@@ -639,7 +624,7 @@ function ImageCarousel({
     if (!arrowColor) return { color: "#FFFFFF", opacity: 100 };
     if (typeof arrowColor === "string")
       return { color: arrowColor, opacity: 100 };
-    if (isThemeableValue4(arrowColor)) {
+    if (isThemeableValue3(arrowColor)) {
       return arrowColor.useTheme ? resolveColor2(arrowColor.themeKey) : arrowColor.value;
     }
     if ("color" in arrowColor) return arrowColor;
@@ -648,7 +633,7 @@ function ImageCarousel({
   const resolvedDotColor = (() => {
     if (!dotColor) return resolveColor2("primary");
     if (typeof dotColor === "string") return { color: dotColor, opacity: 100 };
-    if (isThemeableValue4(dotColor)) {
+    if (isThemeableValue3(dotColor)) {
       return dotColor.useTheme ? resolveColor2(dotColor.themeKey) : dotColor.value;
     }
     if ("color" in dotColor) return dotColor;
@@ -822,7 +807,7 @@ var maxWidthMap = {
   xl: "1000px",
   full: "100%"
 };
-function isEntryBoundValue4(value) {
+function isEntryBoundValue3(value) {
   return typeof value === "object" && value !== null && "useEntry" in value;
 }
 function parseVideoUrl(url) {
@@ -859,7 +844,7 @@ function VideoEmbed({
   const resolvedUrl = (() => {
     if (!url) return "";
     if (typeof url === "string") return url;
-    if (isEntryBoundValue4(url)) {
+    if (isEntryBoundValue3(url)) {
       if (url.useEntry) {
         return String(getEntryValue(url.entryName, url.fieldKey) ?? "");
       }
@@ -927,7 +912,7 @@ function VideoEmbed({
 
 // components/page/Icon.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var sizeMap2 = {
+var sizeMap = {
   sm: { size: "16px", strokeWidth: 2 },
   md: { size: "24px", strokeWidth: 2 },
   lg: { size: "32px", strokeWidth: 1.5 },
@@ -1124,7 +1109,7 @@ var icons = {
     }
   )
 };
-function isThemeableValue5(value) {
+function isThemeableValue4(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
 function Icon({
@@ -1138,14 +1123,14 @@ function Icon({
   const resolvedColor = (() => {
     if (!color) return resolveColor2("primary");
     if (typeof color === "string") return { color, opacity: 100 };
-    if (isThemeableValue5(color)) {
+    if (isThemeableValue4(color)) {
       return color.useTheme ? resolveColor2(color.themeKey) : color.value;
     }
     if ("color" in color) return color;
     return resolveColor2("primary");
   })();
   const IconComponent = icons[name.toLowerCase()] || icons.check;
-  const { size: iconSize, strokeWidth } = sizeMap2[size];
+  const { size: iconSize, strokeWidth } = sizeMap[size];
   const colorValue = hexToRgba(resolvedColor.color, resolvedColor.opacity);
   const wrapperStyle = {
     display: "flex",
@@ -1200,13 +1185,13 @@ var getShadowCSS = (value) => {
 
 // components/page/Section.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-function isThemeableValue6(value) {
+function isThemeableValue5(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
 function resolveBackgroundColor(bg, resolveColor2) {
   if (!bg) return void 0;
   if (typeof bg === "string") return bg;
-  if (isThemeableValue6(bg)) {
+  if (isThemeableValue5(bg)) {
     if (bg.useTheme) {
       const themeColor = resolveColor2(bg.themeKey);
       return hexToRgba(themeColor.color, themeColor.opacity);
@@ -1284,7 +1269,7 @@ var paddingMap = {
   lg: "32px",
   xl: "48px"
 };
-function isThemeableValue7(value) {
+function isThemeableValue6(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
 function Container({
@@ -1303,7 +1288,7 @@ function Container({
     if (!backgroundColor) return null;
     if (typeof backgroundColor === "string")
       return { color: backgroundColor, opacity: 100 };
-    if (isThemeableValue7(backgroundColor)) {
+    if (isThemeableValue6(backgroundColor)) {
       return backgroundColor.useTheme ? resolveColor2(backgroundColor.themeKey) : backgroundColor.value;
     }
     if ("color" in backgroundColor) return backgroundColor;
@@ -1387,7 +1372,7 @@ var paddingMap2 = {
   lg: "32px",
   xl: "48px"
 };
-function isThemeableValue8(value) {
+function isThemeableValue7(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
 function Card({
@@ -1406,7 +1391,7 @@ function Card({
     if (!backgroundColor) return resolveColor2("background");
     if (typeof backgroundColor === "string")
       return { color: backgroundColor, opacity: 100 };
-    if (isThemeableValue8(backgroundColor)) {
+    if (isThemeableValue7(backgroundColor)) {
       return backgroundColor.useTheme ? resolveColor2(backgroundColor.themeKey) : backgroundColor.value;
     }
     if ("color" in backgroundColor) return backgroundColor;
@@ -1416,7 +1401,7 @@ function Card({
     if (!borderColor) return resolveColor2("muted");
     if (typeof borderColor === "string")
       return { color: borderColor, opacity: 100 };
-    if (isThemeableValue8(borderColor)) {
+    if (isThemeableValue7(borderColor)) {
       return borderColor.useTheme ? resolveColor2(borderColor.themeKey) : borderColor.value;
     }
     if ("color" in borderColor) return borderColor;
@@ -1451,7 +1436,7 @@ var spacingMap = {
   lg: "32px",
   xl: "48px"
 };
-function isThemeableValue9(value) {
+function isThemeableValue8(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
 function Divider({
@@ -1467,7 +1452,7 @@ function Divider({
   const resolvedColor = (() => {
     if (!color) return resolveColor2("muted");
     if (typeof color === "string") return { color, opacity: 100 };
-    if (isThemeableValue9(color)) {
+    if (isThemeableValue8(color)) {
       return color.useTheme ? resolveColor2(color.themeKey) : color.value;
     }
     if ("color" in color) return color;
@@ -1489,7 +1474,7 @@ function Divider({
 
 // components/page/Spacer.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var sizeMap3 = {
+var sizeMap2 = {
   xs: "8px",
   sm: "16px",
   md: "24px",
@@ -1500,7 +1485,7 @@ var sizeMap3 = {
 };
 function Spacer({ size = "md", id }) {
   const style = {
-    height: sizeMap3[size],
+    height: sizeMap2[size],
     width: "100%"
   };
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { id, style, "aria-hidden": "true" });
@@ -1513,23 +1498,23 @@ var alignmentMap = {
   center: "text-center",
   right: "text-right"
 };
-var sizeMap4 = {
+var sizeMap3 = {
   small: "text-2xl",
   "medium-small": "text-3xl",
   medium: "text-4xl",
   large: "text-5xl",
   xlarge: "text-6xl"
 };
-function isThemeableValue10(value) {
+function isThemeableValue9(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
-function isEntryBoundValue5(value) {
+function isEntryBoundValue4(value) {
   return typeof value === "object" && value !== null && "useEntry" in value;
 }
 function resolveColor(color, resolveThemeColor) {
   if (!color) return "#000000";
   if (typeof color === "string") return color;
-  if (isThemeableValue10(color)) {
+  if (isThemeableValue9(color)) {
     if (color.useTheme) {
       const themeColor = resolveThemeColor(color.themeKey);
       return hexToRgba(themeColor.color, themeColor.opacity);
@@ -1544,7 +1529,7 @@ function resolveColor(color, resolveThemeColor) {
 function resolveColorHex(color, resolveThemeColor) {
   if (!color) return "#000000";
   if (typeof color === "string") return color;
-  if (isThemeableValue10(color)) {
+  if (isThemeableValue9(color)) {
     if (color.useTheme) {
       return resolveThemeColor(color.themeKey).color;
     }
@@ -1573,7 +1558,7 @@ function TextBlock({
   const resolveText = (value) => {
     if (!value) return void 0;
     if (typeof value === "string") return value;
-    if (isEntryBoundValue5(value)) {
+    if (isEntryBoundValue4(value)) {
       if (value.useEntry) {
         const entryVal = getEntryValue(value.entryName, value.fieldKey);
         return entryVal != null ? String(entryVal) : void 0;
@@ -1602,7 +1587,7 @@ function TextBlock({
         resolvedTitle && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "h2",
           {
-            className: cn("font-bold", sizeMap4[textSize]),
+            className: cn("font-bold", sizeMap3[textSize]),
             style: gradientStyle,
             children: resolvedTitle
           }
@@ -1656,7 +1641,7 @@ function CustomImage({
 // components/page/FeaturesList.tsx
 var import_lucide_react = require("lucide-react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var sizeMap5 = {
+var sizeMap4 = {
   small: { icon: 24, title: "text-base", desc: "text-sm" },
   medium: { icon: 32, title: "text-lg", desc: "text-base" },
   large: { icon: 48, title: "text-xl", desc: "text-lg" }
@@ -1668,7 +1653,7 @@ function FeaturesList({
   iconColor = "#000000",
   anchorLink
 }) {
-  const sizeConfig = sizeMap5[size];
+  const sizeConfig = sizeMap4[size];
   const getIcon = (iconName) => {
     const formatted = iconName.charAt(0).toUpperCase() + iconName.slice(1);
     return import_lucide_react.icons[formatted] || null;
@@ -1725,7 +1710,7 @@ function FeaturesList({
 // components/page/FeatureGrid.tsx
 var import_lucide_react2 = require("lucide-react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var sizeMap6 = {
+var sizeMap5 = {
   small: { icon: 24, title: "text-base", desc: "text-sm" },
   medium: { icon: 32, title: "text-lg", desc: "text-base" },
   large: { icon: 48, title: "text-xl", desc: "text-lg" }
@@ -1741,7 +1726,7 @@ function FeatureGrid({
   textColor = "#000000",
   anchorLink
 }) {
-  const sizeConfig = sizeMap6[size];
+  const sizeConfig = sizeMap5[size];
   const getIcon = (iconName) => {
     const formatted = iconName.charAt(0).toUpperCase() + iconName.slice(1);
     return import_lucide_react2.icons[formatted] || null;
@@ -2008,7 +1993,7 @@ var widthMap3 = {
   medium: "max-w-lg",
   large: "max-w-2xl"
 };
-var sizeMap7 = {
+var sizeMap6 = {
   small: "px-3 py-1.5 text-sm",
   medium: "px-4 py-2 text-base",
   large: "px-6 py-3 text-lg"
@@ -2053,7 +2038,7 @@ function Popup({
       onClick: handleOpen,
       className: cn(
         "flex items-center gap-2 rounded-full font-medium",
-        sizeMap7[size]
+        sizeMap6[size]
       ),
       style: { backgroundColor: buttonColor, color: textColor },
       children: [