@mission-studio/puck 1.0.19 → 1.0.21

package/dist/index.js

@@ -184,9 +184,8 @@ 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 = {
+// components/page/primitives/Heading.ts
+var headingSizeMap = {
   xs: "0.875rem",
   sm: "1rem",
   md: "1.25rem",
@@ -196,23 +195,37 @@ var sizeMap = {
   "3xl": "3rem",
   "4xl": "4rem"
 };
-var weightMap = {
+var headingWeightMap = {
   normal: 400,
   medium: 500,
   semibold: 600,
   bold: 700,
   extrabold: 800
 };
-var letterSpacingMap = {
+var headingLetterSpacingMap = {
   tight: "-0.025em",
   normal: "0",
   wide: "0.05em"
 };
-var lineHeightMap = {
+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/next/Heading.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function isThemeableValue(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
@@ -244,47 +257,69 @@ function Heading({
     return "";
   })();
   const resolvedColor = (() => {
-    if (!color) return resolveColor2("foreground");
-    if (typeof color === "string") return { color, opacity: 100 };
+    if (!color)
+      return hexToRgba(
+        resolveColor2("foreground").color,
+        resolveColor2("foreground").opacity
+      );
+    if (typeof color === "string") return color;
     if (isThemeableValue(color)) {
-      return color.useTheme ? resolveColor2(color.themeKey) : color.value;
+      return color.useTheme ? hexToRgba(
+        resolveColor2(color.themeKey).color,
+        resolveColor2(color.themeKey).opacity
+      ) : hexToRgba(color.value.color, color.value.opacity);
     }
-    if ("color" in color) return color;
-    return resolveColor2("foreground");
+    if ("color" in color) return hexToRgba(color.color, color.opacity);
+    return hexToRgba(
+      resolveColor2("foreground").color,
+      resolveColor2("foreground").opacity
+    );
   })();
   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
-  };
+  const style = getHeadingStyle({
+    size,
+    weight,
+    color: resolvedColor,
+    align,
+    letterSpacing,
+    lineHeight
+  });
   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 = {
+// components/page/primitives/Paragraph.ts
+var paragraphSizeMap = {
   sm: "0.875rem",
   base: "1rem",
   lg: "1.125rem",
   xl: "1.25rem"
 };
-var weightMap2 = {
+var paragraphWeightMap = {
   normal: 400,
   medium: 500,
   semibold: 600
 };
-var lineHeightMap2 = {
+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/next/Paragraph.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function isThemeableValue2(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
@@ -315,23 +350,32 @@ function Paragraph({
     return "";
   })();
   const resolvedColor = (() => {
-    if (!color) return resolveColor2("foreground");
-    if (typeof color === "string") return { color, opacity: 100 };
+    if (!color)
+      return hexToRgba(
+        resolveColor2("foreground").color,
+        resolveColor2("foreground").opacity
+      );
+    if (typeof color === "string") return color;
     if (isThemeableValue2(color)) {
-      return color.useTheme ? resolveColor2(color.themeKey) : color.value;
+      return color.useTheme ? hexToRgba(
+        resolveColor2(color.themeKey).color,
+        resolveColor2(color.themeKey).opacity
+      ) : hexToRgba(color.value.color, color.value.opacity);
     }
-    if ("color" in color) return color;
-    return resolveColor2("foreground");
+    if ("color" in color) return hexToRgba(color.color, color.opacity);
+    return hexToRgba(
+      resolveColor2("foreground").color,
+      resolveColor2("foreground").opacity
+    );
   })();
-  const style = {
-    fontSize: sizeMap2[size],
-    fontWeight: weightMap2[weight],
-    color: hexToRgba(resolvedColor.color, resolvedColor.opacity),
-    textAlign: align,
-    lineHeight: lineHeightMap2[lineHeight],
-    maxWidth: maxWidth || void 0,
-    margin: 0
-  };
+  const style = getParagraphStyle({
+    size,
+    weight,
+    color: resolvedColor,
+    align,
+    lineHeight,
+    maxWidth
+  });
   if (!resolvedText) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { id, style, children: resolvedText });
 }
@@ -992,7 +1036,7 @@ function VideoEmbed({
 
 // components/page/Icon.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var sizeMap3 = {
+var sizeMap = {
   sm: { size: "16px", strokeWidth: 2 },
   md: { size: "24px", strokeWidth: 2 },
   lg: { size: "32px", strokeWidth: 1.5 },
@@ -1210,7 +1254,7 @@ function Icon({
     return resolveColor2("primary");
   })();
   const IconComponent = icons[name.toLowerCase()] || icons.check;
-  const { size: iconSize, strokeWidth } = sizeMap3[size];
+  const { size: iconSize, strokeWidth } = sizeMap[size];
   const colorValue = hexToRgba(resolvedColor.color, resolvedColor.opacity);
   const wrapperStyle = {
     display: "flex",
@@ -1554,7 +1598,7 @@ function Divider({
 
 // components/page/Spacer.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var sizeMap4 = {
+var sizeMap2 = {
   xs: "8px",
   sm: "16px",
   md: "24px",
@@ -1565,7 +1609,7 @@ var sizeMap4 = {
 };
 function Spacer({ size = "md", id }) {
   const style = {
-    height: sizeMap4[size],
+    height: sizeMap2[size],
     width: "100%"
   };
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { id, style, "aria-hidden": "true" });
@@ -1578,7 +1622,7 @@ var alignmentMap = {
   center: "text-center",
   right: "text-right"
 };
-var sizeMap5 = {
+var sizeMap3 = {
   small: "text-2xl",
   "medium-small": "text-3xl",
   medium: "text-4xl",
@@ -1667,7 +1711,7 @@ function TextBlock({
         resolvedTitle && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "h2",
           {
-            className: cn("font-bold", sizeMap5[textSize]),
+            className: cn("font-bold", sizeMap3[textSize]),
             style: gradientStyle,
             children: resolvedTitle
           }
@@ -1721,7 +1765,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 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" }
@@ -1733,7 +1777,7 @@ function FeaturesList({
   iconColor = "#000000",
   anchorLink
 }) {
-  const sizeConfig = sizeMap6[size];
+  const sizeConfig = sizeMap4[size];
   const getIcon = (iconName) => {
     const formatted = iconName.charAt(0).toUpperCase() + iconName.slice(1);
     return import_lucide_react.icons[formatted] || null;
@@ -1790,7 +1834,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 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" }
@@ -1806,7 +1850,7 @@ function FeatureGrid({
   textColor = "#000000",
   anchorLink
 }) {
-  const sizeConfig = sizeMap7[size];
+  const sizeConfig = sizeMap5[size];
   const getIcon = (iconName) => {
     const formatted = iconName.charAt(0).toUpperCase() + iconName.slice(1);
     return import_lucide_react2.icons[formatted] || null;
@@ -2073,7 +2117,7 @@ var widthMap3 = {
   medium: "max-w-lg",
   large: "max-w-2xl"
 };
-var sizeMap8 = {
+var sizeMap6 = {
   small: "px-3 py-1.5 text-sm",
   medium: "px-4 py-2 text-base",
   large: "px-6 py-3 text-lg"
@@ -2118,7 +2162,7 @@ function Popup({
       onClick: handleOpen,
       className: cn(
         "flex items-center gap-2 rounded-full font-medium",
-        sizeMap8[size]
+        sizeMap6[size]
       ),
       style: { backgroundColor: buttonColor, color: textColor },
       children: [

package/dist/index.mjs

@@ -13,6 +13,10 @@ import {
   getFontSizeCSS,
   spacingScale
 } from "./chunk-A3QDUUOF.mjs";
+import {
+  Heading,
+  Paragraph
+} from "./chunk-WFLVAZV2.mjs";
 import {
   Button,
   Card,
@@ -23,11 +27,9 @@ import {
   FeatureGrid,
   FeaturesList,
   Footer,
-  Heading,
   Icon,
   Image,
   ImageCarousel,
-  Paragraph,
   Popup,
   Section,
   Spacer,
@@ -35,7 +37,7 @@ import {
   Topbar,
   VideoEmbed,
   availableIcons
-} from "./chunk-723Z3YKC.mjs";
+} from "./chunk-MWW5LYLN.mjs";
 import {
   ThemeProvider,
   getShadowCSS,

package/dist/renderer.d.mts

@@ -6,28 +6,40 @@ import { R as ResponsiveVisibility } from './ResponsiveToggleField-BihXsGIJ.mjs'
 export { D as DEFAULT_THEME, T as ThemeProvider, u as useTheme } from './ResponsiveToggleField-BihXsGIJ.mjs';
 import { PuckContext } from '@measured/puck';
 
+type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+type HeadingSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
+type HeadingWeight = "normal" | "medium" | "semibold" | "bold" | "extrabold";
+type HeadingAlign = "left" | "center" | "right";
+type HeadingLetterSpacing = "tight" | "normal" | "wide";
+type HeadingLineHeight = "tight" | "normal" | "relaxed";
+
 type HeadingProps = {
     text?: EntryBoundValue<string> | string;
-    level?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
-    weight?: "normal" | "medium" | "semibold" | "bold" | "extrabold";
+    level?: HeadingLevel;
+    size?: HeadingSize;
+    weight?: HeadingWeight;
     color?: ThemeableColorValue | ColorValue | string;
-    align?: "left" | "center" | "right";
-    letterSpacing?: "tight" | "normal" | "wide";
-    lineHeight?: "tight" | "normal" | "relaxed";
+    align?: HeadingAlign;
+    letterSpacing?: HeadingLetterSpacing;
+    lineHeight?: HeadingLineHeight;
     id?: string;
     puck?: unknown;
     editMode?: boolean;
 };
 declare function Heading({ text, level, size, weight, color, align, letterSpacing, lineHeight, id, }: HeadingProps): react_jsx_runtime.JSX.Element | null;
 
+type ParagraphSize = "sm" | "base" | "lg" | "xl";
+type ParagraphWeight = "normal" | "medium" | "semibold";
+type ParagraphAlign = "left" | "center" | "right" | "justify";
+type ParagraphLineHeight = "tight" | "normal" | "relaxed" | "loose";
+
 type ParagraphProps = {
     text?: EntryBoundValue<string> | string;
-    size?: "sm" | "base" | "lg" | "xl";
-    weight?: "normal" | "medium" | "semibold";
+    size?: ParagraphSize;
+    weight?: ParagraphWeight;
     color?: ThemeableColorValue | ColorValue | string;
-    align?: "left" | "center" | "right" | "justify";
-    lineHeight?: "tight" | "normal" | "relaxed" | "loose";
+    align?: ParagraphAlign;
+    lineHeight?: ParagraphLineHeight;
     maxWidth?: string;
     id?: string;
     puck?: unknown;

package/dist/renderer.d.ts

@@ -6,28 +6,40 @@ import { R as ResponsiveVisibility } from './ResponsiveToggleField-CfBKL5oY.js';
 export { D as DEFAULT_THEME, T as ThemeProvider, u as useTheme } from './ResponsiveToggleField-CfBKL5oY.js';
 import { PuckContext } from '@measured/puck';
 
+type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+type HeadingSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
+type HeadingWeight = "normal" | "medium" | "semibold" | "bold" | "extrabold";
+type HeadingAlign = "left" | "center" | "right";
+type HeadingLetterSpacing = "tight" | "normal" | "wide";
+type HeadingLineHeight = "tight" | "normal" | "relaxed";
+
 type HeadingProps = {
     text?: EntryBoundValue<string> | string;
-    level?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
-    weight?: "normal" | "medium" | "semibold" | "bold" | "extrabold";
+    level?: HeadingLevel;
+    size?: HeadingSize;
+    weight?: HeadingWeight;
     color?: ThemeableColorValue | ColorValue | string;
-    align?: "left" | "center" | "right";
-    letterSpacing?: "tight" | "normal" | "wide";
-    lineHeight?: "tight" | "normal" | "relaxed";
+    align?: HeadingAlign;
+    letterSpacing?: HeadingLetterSpacing;
+    lineHeight?: HeadingLineHeight;
     id?: string;
     puck?: unknown;
     editMode?: boolean;
 };
 declare function Heading({ text, level, size, weight, color, align, letterSpacing, lineHeight, id, }: HeadingProps): react_jsx_runtime.JSX.Element | null;
 
+type ParagraphSize = "sm" | "base" | "lg" | "xl";
+type ParagraphWeight = "normal" | "medium" | "semibold";
+type ParagraphAlign = "left" | "center" | "right" | "justify";
+type ParagraphLineHeight = "tight" | "normal" | "relaxed" | "loose";
+
 type ParagraphProps = {
     text?: EntryBoundValue<string> | string;
-    size?: "sm" | "base" | "lg" | "xl";
-    weight?: "normal" | "medium" | "semibold";
+    size?: ParagraphSize;
+    weight?: ParagraphWeight;
     color?: ThemeableColorValue | ColorValue | string;
-    align?: "left" | "center" | "right" | "justify";
-    lineHeight?: "tight" | "normal" | "relaxed" | "loose";
+    align?: ParagraphAlign;
+    lineHeight?: ParagraphLineHeight;
     maxWidth?: string;
     id?: string;
     puck?: unknown;