@mission-studio/puck 1.0.18 → 1.0.20

package/dist/config/server.js

@@ -24,9 +24,76 @@ __export(server_exports, {
 });
 module.exports = __toCommonJS(server_exports);
 
+// components/page/primitives/Heading.ts
+var headingSizeMap = {
+  xs: "0.875rem",
+  sm: "1rem",
+  md: "1.25rem",
+  lg: "1.5rem",
+  xl: "2rem",
+  "2xl": "2.5rem",
+  "3xl": "3rem",
+  "4xl": "4rem"
+};
+var headingWeightMap = {
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+  extrabold: 800
+};
+var headingLetterSpacingMap = {
+  tight: "-0.025em",
+  normal: "0",
+  wide: "0.05em"
+};
+var headingLineHeightMap = {
+  tight: "1.1",
+  normal: "1.4",
+  relaxed: "1.6"
+};
+function getHeadingStyle(props) {
+  return {
+    fontSize: headingSizeMap[props.size],
+    fontWeight: headingWeightMap[props.weight],
+    color: props.color,
+    textAlign: props.align,
+    letterSpacing: headingLetterSpacingMap[props.letterSpacing],
+    lineHeight: headingLineHeightMap[props.lineHeight],
+    margin: 0
+  };
+}
+
+// components/page/astro/Heading.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Heading({
+  text,
+  level = "h2",
+  size = "2xl",
+  weight = "bold",
+  color = "rgba(0, 0, 0, 1)",
+  align = "left",
+  letterSpacing = "normal",
+  lineHeight = "tight",
+  id
+}) {
+  const resolvedText = text || "";
+  const Tag = level;
+  const style = getHeadingStyle({
+    size,
+    weight,
+    color,
+    align,
+    letterSpacing,
+    lineHeight
+  });
+  if (!resolvedText) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tag, { id, style, children: resolvedText });
+}
+
 // entries/context.tsx
 var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var EntriesContext = (0, import_react.createContext)(null);
 function useEntries() {
   const context = (0, import_react.useContext)(EntriesContext);
@@ -90,7 +157,7 @@ var DEFAULT_THEME = {
 };
 
 // theme/context.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var ThemeContext = (0, import_react2.createContext)(null);
 function useTheme() {
   const context = (0, import_react2.useContext)(ThemeContext);
@@ -134,111 +201,29 @@ function cn(...inputs) {
   return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
 }
 
-// components/page/Heading.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var sizeMap = {
-  xs: "0.875rem",
-  sm: "1rem",
-  md: "1.25rem",
-  lg: "1.5rem",
-  xl: "2rem",
-  "2xl": "2.5rem",
-  "3xl": "3rem",
-  "4xl": "4rem"
-};
-var weightMap = {
-  normal: 400,
-  medium: 500,
-  semibold: 600,
-  bold: 700,
-  extrabold: 800
-};
-var letterSpacingMap = {
-  tight: "-0.025em",
-  normal: "0",
-  wide: "0.05em"
-};
-var lineHeightMap = {
-  tight: "1.1",
-  normal: "1.4",
-  relaxed: "1.6"
-};
-function isThemeableValue(value) {
-  return typeof value === "object" && value !== null && "useTheme" in value;
-}
-function isEntryBoundValue(value) {
-  return typeof value === "object" && value !== null && "useEntry" in value;
-}
-function Heading({
-  text,
-  level = "h2",
-  size = "2xl",
-  weight = "bold",
-  color,
-  align = "left",
-  letterSpacing = "normal",
-  lineHeight = "tight",
-  id
-}) {
-  const { resolveColor: resolveColor2 } = useTheme();
-  const { getEntryValue } = useEntries();
-  const resolvedText = (() => {
-    if (!text) return "";
-    if (typeof text === "string") return text;
-    if (isEntryBoundValue(text)) {
-      if (text.useEntry) {
-        return String(getEntryValue(text.entryName, text.fieldKey) ?? "");
-      }
-      return text.value;
-    }
-    return "";
-  })();
-  const resolvedColor = (() => {
-    if (!color) return resolveColor2("foreground");
-    if (typeof color === "string") return { color, opacity: 100 };
-    if (isThemeableValue(color)) {
-      return color.useTheme ? resolveColor2(color.themeKey) : color.value;
-    }
-    if ("color" in color) return color;
-    return resolveColor2("foreground");
-  })();
-  const Tag = level;
-  const style = {
-    fontSize: sizeMap[size],
-    fontWeight: weightMap[weight],
-    color: hexToRgba(resolvedColor.color, resolvedColor.opacity),
-    textAlign: align,
-    letterSpacing: letterSpacingMap[letterSpacing],
-    lineHeight: lineHeightMap[lineHeight],
-    margin: 0
-  };
-  if (!resolvedText) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Tag, { id, style, children: resolvedText });
-}
-
 // components/page/Paragraph.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var sizeMap2 = {
+var sizeMap = {
   sm: "0.875rem",
   base: "1rem",
   lg: "1.125rem",
   xl: "1.25rem"
 };
-var weightMap2 = {
+var weightMap = {
   normal: 400,
   medium: 500,
   semibold: 600
 };
-var lineHeightMap2 = {
+var lineHeightMap = {
   tight: "1.4",
   normal: "1.6",
   relaxed: "1.75",
   loose: "2"
 };
-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 Paragraph({
@@ -256,7 +241,7 @@ function Paragraph({
   const resolvedText = (() => {
     if (!text) return "";
     if (typeof text === "string") return text;
-    if (isEntryBoundValue2(text)) {
+    if (isEntryBoundValue(text)) {
       if (text.useEntry) {
         return String(getEntryValue(text.entryName, text.fieldKey) ?? "");
       }
@@ -267,18 +252,18 @@ function Paragraph({
   const resolvedColor = (() => {
     if (!color) return resolveColor2("foreground");
     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;
     return resolveColor2("foreground");
   })();
   const style = {
-    fontSize: sizeMap2[size],
-    fontWeight: weightMap2[weight],
+    fontSize: sizeMap[size],
+    fontWeight: weightMap[weight],
     color: hexToRgba(resolvedColor.color, resolvedColor.opacity),
     textAlign: align,
-    lineHeight: lineHeightMap2[lineHeight],
+    lineHeight: lineHeightMap[lineHeight],
     maxWidth: maxWidth || void 0,
     margin: 0
   };
@@ -364,10 +349,10 @@ var radiusMap = {
   lg: "16px",
   full: "9999px"
 };
-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 Button({
@@ -390,7 +375,7 @@ function Button({
   const resolvedText = (() => {
     if (!text) return "Button";
     if (typeof text === "string") return text;
-    if (isEntryBoundValue3(text)) {
+    if (isEntryBoundValue2(text)) {
       if (text.useEntry) {
         return String(getEntryValue(text.entryName, text.fieldKey) ?? "Button");
       }
@@ -411,7 +396,7 @@ function Button({
   const resolvedColor = (() => {
     if (!color) return resolveColor2("primary");
     if (typeof color === "string") return { color, opacity: 100 };
-    if (isThemeableValue3(color)) {
+    if (isThemeableValue2(color)) {
       return color.useTheme ? resolveColor2(color.themeKey) : color.value;
     }
     if ("color" in color) return color;
@@ -424,7 +409,7 @@ function Button({
     }
     if (typeof textColor === "string")
       return { color: textColor, opacity: 100 };
-    if (isThemeableValue3(textColor)) {
+    if (isThemeableValue2(textColor)) {
       return textColor.useTheme ? resolveColor2(textColor.themeKey) : textColor.value;
     }
     if ("color" in textColor) return textColor;
@@ -521,10 +506,10 @@ var shadowMap = {
   lg: "0 10px 15px rgba(0,0,0,0.1)",
   xl: "0 20px 25px rgba(0,0,0,0.15)"
 };
-function isThemeableValue4(value) {
+function isThemeableValue3(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
-function isEntryBoundValue4(value) {
+function isEntryBoundValue3(value) {
   return typeof value === "object" && value !== null && "useEntry" in value;
 }
 function Image({
@@ -545,7 +530,7 @@ function Image({
   const resolvedSrc = (() => {
     if (!src) return "";
     if (typeof src === "string") return src;
-    if (isEntryBoundValue4(src)) {
+    if (isEntryBoundValue3(src)) {
       if (src.useEntry) {
         return String(getEntryValue(src.entryName, src.fieldKey) ?? "");
       }
@@ -556,7 +541,7 @@ function Image({
   const resolvedCaption = (() => {
     if (!caption) return "";
     if (typeof caption === "string") return caption;
-    if (isEntryBoundValue4(caption)) {
+    if (isEntryBoundValue3(caption)) {
       if (caption.useEntry) {
         return String(getEntryValue(caption.entryName, caption.fieldKey) ?? "");
       }
@@ -568,7 +553,7 @@ function Image({
     if (!captionColor) return resolveColor2("muted");
     if (typeof captionColor === "string")
       return { color: captionColor, opacity: 100 };
-    if (isThemeableValue4(captionColor)) {
+    if (isThemeableValue3(captionColor)) {
       return captionColor.useTheme ? resolveColor2(captionColor.themeKey) : captionColor.value;
     }
     if ("color" in captionColor) return captionColor;
@@ -633,7 +618,7 @@ var radiusMap3 = {
   md: "8px",
   lg: "16px"
 };
-function isThemeableValue5(value) {
+function isThemeableValue4(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
 function ImageCarousel({
@@ -654,7 +639,7 @@ function ImageCarousel({
     if (!arrowColor) return { color: "#FFFFFF", opacity: 100 };
     if (typeof arrowColor === "string")
       return { color: arrowColor, opacity: 100 };
-    if (isThemeableValue5(arrowColor)) {
+    if (isThemeableValue4(arrowColor)) {
       return arrowColor.useTheme ? resolveColor2(arrowColor.themeKey) : arrowColor.value;
     }
     if ("color" in arrowColor) return arrowColor;
@@ -663,7 +648,7 @@ function ImageCarousel({
   const resolvedDotColor = (() => {
     if (!dotColor) return resolveColor2("primary");
     if (typeof dotColor === "string") return { color: dotColor, opacity: 100 };
-    if (isThemeableValue5(dotColor)) {
+    if (isThemeableValue4(dotColor)) {
       return dotColor.useTheme ? resolveColor2(dotColor.themeKey) : dotColor.value;
     }
     if ("color" in dotColor) return dotColor;
@@ -837,7 +822,7 @@ var maxWidthMap = {
   xl: "1000px",
   full: "100%"
 };
-function isEntryBoundValue5(value) {
+function isEntryBoundValue4(value) {
   return typeof value === "object" && value !== null && "useEntry" in value;
 }
 function parseVideoUrl(url) {
@@ -874,7 +859,7 @@ function VideoEmbed({
   const resolvedUrl = (() => {
     if (!url) return "";
     if (typeof url === "string") return url;
-    if (isEntryBoundValue5(url)) {
+    if (isEntryBoundValue4(url)) {
       if (url.useEntry) {
         return String(getEntryValue(url.entryName, url.fieldKey) ?? "");
       }
@@ -942,7 +927,7 @@ function VideoEmbed({
 
 // components/page/Icon.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var sizeMap3 = {
+var sizeMap2 = {
   sm: { size: "16px", strokeWidth: 2 },
   md: { size: "24px", strokeWidth: 2 },
   lg: { size: "32px", strokeWidth: 1.5 },
@@ -1139,7 +1124,7 @@ var icons = {
     }
   )
 };
-function isThemeableValue6(value) {
+function isThemeableValue5(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
 function Icon({
@@ -1153,14 +1138,14 @@ function Icon({
   const resolvedColor = (() => {
     if (!color) return resolveColor2("primary");
     if (typeof color === "string") return { color, opacity: 100 };
-    if (isThemeableValue6(color)) {
+    if (isThemeableValue5(color)) {
       return color.useTheme ? resolveColor2(color.themeKey) : color.value;
     }
     if ("color" in color) return color;
     return resolveColor2("primary");
   })();
   const IconComponent = icons[name.toLowerCase()] || icons.check;
-  const { size: iconSize, strokeWidth } = sizeMap3[size];
+  const { size: iconSize, strokeWidth } = sizeMap2[size];
   const colorValue = hexToRgba(resolvedColor.color, resolvedColor.opacity);
   const wrapperStyle = {
     display: "flex",
@@ -1215,13 +1200,13 @@ var getShadowCSS = (value) => {
 
 // components/page/Section.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-function isThemeableValue7(value) {
+function isThemeableValue6(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
 function resolveBackgroundColor(bg, resolveColor2) {
   if (!bg) return void 0;
   if (typeof bg === "string") return bg;
-  if (isThemeableValue7(bg)) {
+  if (isThemeableValue6(bg)) {
     if (bg.useTheme) {
       const themeColor = resolveColor2(bg.themeKey);
       return hexToRgba(themeColor.color, themeColor.opacity);
@@ -1299,7 +1284,7 @@ var paddingMap = {
   lg: "32px",
   xl: "48px"
 };
-function isThemeableValue8(value) {
+function isThemeableValue7(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
 function Container({
@@ -1318,7 +1303,7 @@ function Container({
     if (!backgroundColor) return null;
     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;
@@ -1402,7 +1387,7 @@ var paddingMap2 = {
   lg: "32px",
   xl: "48px"
 };
-function isThemeableValue9(value) {
+function isThemeableValue8(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
 function Card({
@@ -1421,7 +1406,7 @@ function Card({
     if (!backgroundColor) return resolveColor2("background");
     if (typeof backgroundColor === "string")
       return { color: backgroundColor, opacity: 100 };
-    if (isThemeableValue9(backgroundColor)) {
+    if (isThemeableValue8(backgroundColor)) {
       return backgroundColor.useTheme ? resolveColor2(backgroundColor.themeKey) : backgroundColor.value;
     }
     if ("color" in backgroundColor) return backgroundColor;
@@ -1431,7 +1416,7 @@ function Card({
     if (!borderColor) return resolveColor2("muted");
     if (typeof borderColor === "string")
       return { color: borderColor, opacity: 100 };
-    if (isThemeableValue9(borderColor)) {
+    if (isThemeableValue8(borderColor)) {
       return borderColor.useTheme ? resolveColor2(borderColor.themeKey) : borderColor.value;
     }
     if ("color" in borderColor) return borderColor;
@@ -1466,7 +1451,7 @@ var spacingMap = {
   lg: "32px",
   xl: "48px"
 };
-function isThemeableValue10(value) {
+function isThemeableValue9(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
 function Divider({
@@ -1482,7 +1467,7 @@ function Divider({
   const resolvedColor = (() => {
     if (!color) return resolveColor2("muted");
     if (typeof color === "string") return { color, opacity: 100 };
-    if (isThemeableValue10(color)) {
+    if (isThemeableValue9(color)) {
       return color.useTheme ? resolveColor2(color.themeKey) : color.value;
     }
     if ("color" in color) return color;
@@ -1504,7 +1489,7 @@ function Divider({
 
 // components/page/Spacer.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var sizeMap4 = {
+var sizeMap3 = {
   xs: "8px",
   sm: "16px",
   md: "24px",
@@ -1515,7 +1500,7 @@ var sizeMap4 = {
 };
 function Spacer({ size = "md", id }) {
   const style = {
-    height: sizeMap4[size],
+    height: sizeMap3[size],
     width: "100%"
   };
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { id, style, "aria-hidden": "true" });
@@ -1528,23 +1513,23 @@ var alignmentMap = {
   center: "text-center",
   right: "text-right"
 };
-var sizeMap5 = {
+var sizeMap4 = {
   small: "text-2xl",
   "medium-small": "text-3xl",
   medium: "text-4xl",
   large: "text-5xl",
   xlarge: "text-6xl"
 };
-function isThemeableValue11(value) {
+function isThemeableValue10(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
-function isEntryBoundValue6(value) {
+function isEntryBoundValue5(value) {
   return typeof value === "object" && value !== null && "useEntry" in value;
 }
 function resolveColor(color, resolveThemeColor) {
   if (!color) return "#000000";
   if (typeof color === "string") return color;
-  if (isThemeableValue11(color)) {
+  if (isThemeableValue10(color)) {
     if (color.useTheme) {
       const themeColor = resolveThemeColor(color.themeKey);
       return hexToRgba(themeColor.color, themeColor.opacity);
@@ -1559,7 +1544,7 @@ function resolveColor(color, resolveThemeColor) {
 function resolveColorHex(color, resolveThemeColor) {
   if (!color) return "#000000";
   if (typeof color === "string") return color;
-  if (isThemeableValue11(color)) {
+  if (isThemeableValue10(color)) {
     if (color.useTheme) {
       return resolveThemeColor(color.themeKey).color;
     }
@@ -1588,7 +1573,7 @@ function TextBlock({
   const resolveText = (value) => {
     if (!value) return void 0;
     if (typeof value === "string") return value;
-    if (isEntryBoundValue6(value)) {
+    if (isEntryBoundValue5(value)) {
       if (value.useEntry) {
         const entryVal = getEntryValue(value.entryName, value.fieldKey);
         return entryVal != null ? String(entryVal) : void 0;
@@ -1617,7 +1602,7 @@ function TextBlock({
         resolvedTitle && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "h2",
           {
-            className: cn("font-bold", sizeMap5[textSize]),
+            className: cn("font-bold", sizeMap4[textSize]),
             style: gradientStyle,
             children: resolvedTitle
           }
@@ -1671,7 +1656,7 @@ function CustomImage({
 // components/page/FeaturesList.tsx
 var import_lucide_react = require("lucide-react");
 var import_jsx_runtime18 = 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" }
@@ -1683,7 +1668,7 @@ function FeaturesList({
   iconColor = "#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_react.icons[formatted] || null;
@@ -1740,7 +1725,7 @@ function FeaturesList({
 // components/page/FeatureGrid.tsx
 var import_lucide_react2 = require("lucide-react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var sizeMap7 = {
+var sizeMap6 = {
   small: { icon: 24, title: "text-base", desc: "text-sm" },
   medium: { icon: 32, title: "text-lg", desc: "text-base" },
   large: { icon: 48, title: "text-xl", desc: "text-lg" }
@@ -1756,7 +1741,7 @@ function FeatureGrid({
   textColor = "#000000",
   anchorLink
 }) {
-  const sizeConfig = sizeMap7[size];
+  const sizeConfig = sizeMap6[size];
   const getIcon = (iconName) => {
     const formatted = iconName.charAt(0).toUpperCase() + iconName.slice(1);
     return import_lucide_react2.icons[formatted] || null;
@@ -2023,7 +2008,7 @@ var widthMap3 = {
   medium: "max-w-lg",
   large: "max-w-2xl"
 };
-var sizeMap8 = {
+var sizeMap7 = {
   small: "px-3 py-1.5 text-sm",
   medium: "px-4 py-2 text-base",
   large: "px-6 py-3 text-lg"
@@ -2068,7 +2053,7 @@ function Popup({
       onClick: handleOpen,
       className: cn(
         "flex items-center gap-2 rounded-full font-medium",
-        sizeMap8[size]
+        sizeMap7[size]
       ),
       style: { backgroundColor: buttonColor, color: textColor },
       children: [