@mission-studio/puck 1.0.3 → 1.0.15

package/dist/{ResponsiveToggleField-CVhKzDAT.d.mts → ResponsiveToggleField-BGofgB3u.d.mts}

@@ -108,54 +108,6 @@ declare function useTheme(): ThemeContextValue;
 
 declare const DEFAULT_THEME: PageTheme;
 
-type BorderRadiusPreset = {
-    label: string;
-    value: number;
-};
-declare const borderRadiusScale: BorderRadiusPreset[];
-declare const getClosestBorderRadiusValue: (value: number) => number;
-declare const getBorderRadiusCSS: (value: number) => string;
-
-type ColorPreset = {
-    label: string;
-    value: string;
-};
-declare const neutralColors: ColorPreset[];
-declare const allColorPresets: ColorPreset[];
-
-type ShadowPreset = {
-    label: string;
-    value: string;
-    css: string;
-};
-declare const shadowPresets: ShadowPreset[];
-declare const getShadowCSS: (value: string) => string;
-
-type SpacingPreset = {
-    label: string;
-    value: number;
-};
-declare const spacingScale: SpacingPreset[];
-declare const getClosestSpacingValue: (value: number) => number;
-
-type FontFamilyPreset = {
-    label: string;
-    value: string;
-};
-type FontSizePreset = {
-    label: string;
-    value: string;
-    css: string;
-};
-type FontWeightPreset = {
-    label: string;
-    value: number;
-};
-declare const fontFamilies: FontFamilyPreset[];
-declare const fontSizes: FontSizePreset[];
-declare const fontWeights: FontWeightPreset[];
-declare const getFontSizeCSS: (value: string) => string;
-
 type EntryContent = Record<string, string | number | boolean | null>;
 type Entry = {
     id: string;
@@ -180,4 +132,4 @@ type ResponsiveVisibility = {
 };
 declare function ResponsiveToggleField({ value, onChangeAction, disabled, label, }: CustomFieldProps<ResponsiveVisibility>): react_jsx_runtime.JSX.Element;
 
-export { getBorderRadiusCSS as A, type BorderRadiusPreset as B, type ColorValue as C, DEFAULT_THEME as D, type Entry as E, type FontFamilyPreset as F, getClosestBorderRadiusValue as G, getClosestSpacingValue as H, getFontSizeCSS as I, getShadowCSS as J, neutralColors as K, shadowPresets as L, spacingScale as M, useTheme as N, type PageTheme as P, type ResponsiveVisibility as R, type ShadowPreset as S, type ThemeableColorValue as T, type EntryBoundValue as a, type ThemeColorKey as b, type CustomFieldProps as c, type ColorPreset as d, type EntryContent as e, type FontSizePreset as f, type FontWeightPreset as g, ResponsiveToggleField as h, type SpacingPreset as i, type ThemeBorderKey as j, type ThemeBorders as k, type ThemeColors as l, ThemeProvider as m, type ThemeShadowKey as n, type ThemeShadows as o, type ThemeSpacing as p, type ThemeSpacingKey as q, type ThemeTypography as r, type ThemeableBorderRadiusValue as s, type ThemeableShadowValue as t, type ThemeableSpacingValue as u, allColorPresets as v, borderRadiusScale as w, fontFamilies as x, fontSizes as y, fontWeights as z };
+export { type ColorValue as C, DEFAULT_THEME as D, type Entry as E, type PageTheme as P, type ResponsiveVisibility as R, type ThemeBorderKey as T, type ThemeBorders as a, type ThemeColorKey as b, type ThemeColors as c, ThemeProvider as d, type ThemeShadowKey as e, type ThemeShadows as f, type ThemeSpacing as g, type ThemeSpacingKey as h, type ThemeTypography as i, type ThemeableBorderRadiusValue as j, type ThemeableColorValue as k, type ThemeableShadowValue as l, type ThemeableSpacingValue as m, type EntryBoundValue as n, type CustomFieldProps as o, type EntryContent as p, ResponsiveToggleField as q, useTheme as u };

package/dist/{ResponsiveToggleField-CVhKzDAT.d.ts → ResponsiveToggleField-BGofgB3u.d.ts}

@@ -108,54 +108,6 @@ declare function useTheme(): ThemeContextValue;
 
 declare const DEFAULT_THEME: PageTheme;
 
-type BorderRadiusPreset = {
-    label: string;
-    value: number;
-};
-declare const borderRadiusScale: BorderRadiusPreset[];
-declare const getClosestBorderRadiusValue: (value: number) => number;
-declare const getBorderRadiusCSS: (value: number) => string;
-
-type ColorPreset = {
-    label: string;
-    value: string;
-};
-declare const neutralColors: ColorPreset[];
-declare const allColorPresets: ColorPreset[];
-
-type ShadowPreset = {
-    label: string;
-    value: string;
-    css: string;
-};
-declare const shadowPresets: ShadowPreset[];
-declare const getShadowCSS: (value: string) => string;
-
-type SpacingPreset = {
-    label: string;
-    value: number;
-};
-declare const spacingScale: SpacingPreset[];
-declare const getClosestSpacingValue: (value: number) => number;
-
-type FontFamilyPreset = {
-    label: string;
-    value: string;
-};
-type FontSizePreset = {
-    label: string;
-    value: string;
-    css: string;
-};
-type FontWeightPreset = {
-    label: string;
-    value: number;
-};
-declare const fontFamilies: FontFamilyPreset[];
-declare const fontSizes: FontSizePreset[];
-declare const fontWeights: FontWeightPreset[];
-declare const getFontSizeCSS: (value: string) => string;
-
 type EntryContent = Record<string, string | number | boolean | null>;
 type Entry = {
     id: string;
@@ -180,4 +132,4 @@ type ResponsiveVisibility = {
 };
 declare function ResponsiveToggleField({ value, onChangeAction, disabled, label, }: CustomFieldProps<ResponsiveVisibility>): react_jsx_runtime.JSX.Element;
 
-export { getBorderRadiusCSS as A, type BorderRadiusPreset as B, type ColorValue as C, DEFAULT_THEME as D, type Entry as E, type FontFamilyPreset as F, getClosestBorderRadiusValue as G, getClosestSpacingValue as H, getFontSizeCSS as I, getShadowCSS as J, neutralColors as K, shadowPresets as L, spacingScale as M, useTheme as N, type PageTheme as P, type ResponsiveVisibility as R, type ShadowPreset as S, type ThemeableColorValue as T, type EntryBoundValue as a, type ThemeColorKey as b, type CustomFieldProps as c, type ColorPreset as d, type EntryContent as e, type FontSizePreset as f, type FontWeightPreset as g, ResponsiveToggleField as h, type SpacingPreset as i, type ThemeBorderKey as j, type ThemeBorders as k, type ThemeColors as l, ThemeProvider as m, type ThemeShadowKey as n, type ThemeShadows as o, type ThemeSpacing as p, type ThemeSpacingKey as q, type ThemeTypography as r, type ThemeableBorderRadiusValue as s, type ThemeableShadowValue as t, type ThemeableSpacingValue as u, allColorPresets as v, borderRadiusScale as w, fontFamilies as x, fontSizes as y, fontWeights as z };
+export { type ColorValue as C, DEFAULT_THEME as D, type Entry as E, type PageTheme as P, type ResponsiveVisibility as R, type ThemeBorderKey as T, type ThemeBorders as a, type ThemeColorKey as b, type ThemeColors as c, ThemeProvider as d, type ThemeShadowKey as e, type ThemeShadows as f, type ThemeSpacing as g, type ThemeSpacingKey as h, type ThemeTypography as i, type ThemeableBorderRadiusValue as j, type ThemeableColorValue as k, type ThemeableShadowValue as l, type ThemeableSpacingValue as m, type EntryBoundValue as n, type CustomFieldProps as o, type EntryContent as p, ResponsiveToggleField as q, useTheme as u };

package/dist/chunk-A3QDUUOF.mjs

@@ -0,0 +1,80 @@
+// design-system/borders.ts
+var borderRadiusScale = [
+  { label: "None", value: 0 },
+  { label: "XS", value: 2 },
+  { label: "SM", value: 4 },
+  { label: "MD", value: 6 },
+  { label: "LG", value: 8 },
+  { label: "XL", value: 12 },
+  { label: "2XL", value: 16 },
+  { label: "3XL", value: 24 }
+];
+var getClosestBorderRadiusValue = (value) => {
+  return borderRadiusScale.reduce(
+    (prev, curr) => Math.abs(curr.value - value) < Math.abs(prev.value - value) ? curr : prev
+  ).value;
+};
+var getBorderRadiusCSS = (value) => {
+  return `${value}px`;
+};
+
+// design-system/spacing.ts
+var spacingScale = [
+  { label: "None", value: 0 },
+  { label: "2XS", value: 4 },
+  { label: "XS", value: 8 },
+  { label: "SM", value: 12 },
+  { label: "MD", value: 16 },
+  { label: "LG", value: 24 },
+  { label: "XL", value: 32 },
+  { label: "2XL", value: 48 },
+  { label: "3XL", value: 64 },
+  { label: "4XL", value: 96 }
+];
+var getClosestSpacingValue = (value) => {
+  return spacingScale.reduce(
+    (prev, curr) => Math.abs(curr.value - value) < Math.abs(prev.value - value) ? curr : prev
+  ).value;
+};
+
+// design-system/typography.ts
+var fontFamilies = [
+  { label: "System", value: "system-ui, sans-serif" },
+  { label: "Sans", value: "ui-sans-serif, system-ui, sans-serif" },
+  { label: "Serif", value: "ui-serif, Georgia, serif" },
+  { label: "Mono", value: "ui-monospace, monospace" }
+];
+var fontSizes = [
+  { label: "XS", value: "xs", css: "0.75rem" },
+  { label: "SM", value: "sm", css: "0.875rem" },
+  { label: "Base", value: "base", css: "1rem" },
+  { label: "LG", value: "lg", css: "1.125rem" },
+  { label: "XL", value: "xl", css: "1.25rem" },
+  { label: "2XL", value: "2xl", css: "1.5rem" },
+  { label: "3XL", value: "3xl", css: "1.875rem" },
+  { label: "4XL", value: "4xl", css: "2.25rem" },
+  { label: "5XL", value: "5xl", css: "3rem" }
+];
+var fontWeights = [
+  { label: "Light", value: 300 },
+  { label: "Normal", value: 400 },
+  { label: "Medium", value: 500 },
+  { label: "Semibold", value: 600 },
+  { label: "Bold", value: 700 }
+];
+var getFontSizeCSS = (value) => {
+  const preset = fontSizes.find((p) => p.value === value);
+  return preset?.css ?? "1rem";
+};
+
+export {
+  borderRadiusScale,
+  getClosestBorderRadiusValue,
+  getBorderRadiusCSS,
+  spacingScale,
+  getClosestSpacingValue,
+  fontFamilies,
+  fontSizes,
+  fontWeights,
+  getFontSizeCSS
+};

package/dist/{chunk-F47J7QDM.mjs → chunk-HHHD5TX2.mjs}

@@ -4,7 +4,11 @@ import {
   hexToRgba,
   useEntries,
   useTheme
-} from "./chunk-TTKY3YGP.mjs";
+} from "./chunk-XRKFMCSS.mjs";
+import {
+  useGtmEvent,
+  useUtmParams
+} from "./chunk-QSWQDR6M.mjs";
 
 // components/page/Heading.tsx
 import { jsx } from "react/jsx-runtime";
@@ -158,62 +162,6 @@ function Paragraph({
   return /* @__PURE__ */ jsx2("p", { id, style, children: resolvedText });
 }
 
-// components/page/Button.tsx
-import { sendGTMEvent } from "@next/third-parties/google";
-
-// hooks/useUtmParams.ts
-import { useEffect, useState } from "react";
-function useUtmParams() {
-  const [utmParams, setUtmParams] = useState({});
-  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
 import { jsx as jsx3 } from "react/jsx-runtime";
 var sizeStyles = {
@@ -251,6 +199,7 @@ function Button({
   const { resolveColor: resolveColor2 } = useTheme();
   const { getEntryValue } = useEntries();
   const utm = useUtmParams();
+  const sendEvent = useGtmEvent();
   const resolvedText = (() => {
     if (!text) return "Button";
     if (typeof text === "string") return text;
@@ -263,14 +212,13 @@ function Button({
     return "Button";
   })();
   const handleClick = () => {
-    sendGTMEvent({
-      event: "button_click",
-      value: {
-        text: resolvedText,
-        href: href || void 0,
-        variant,
-        ...utm
-      }
+    const sessionId = typeof window !== "undefined" ? sessionStorage.getItem("session_id") : null;
+    sendEvent("button_click", {
+      text: resolvedText,
+      href: href || void 0,
+      variant,
+      session_id: sessionId,
+      ...utm
     });
   };
   const resolvedColor = (() => {
@@ -484,8 +432,7 @@ function Image({
 }
 
 // components/page/ImageCarousel.tsx
-import { useState as useState2 } from "react";
-import { sendGTMEvent as sendGTMEvent2 } from "@next/third-parties/google";
+import { useState } from "react";
 import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 var aspectRatioMap2 = {
   "16:9": "16 / 9",
@@ -512,9 +459,10 @@ function ImageCarousel({
   dotColor,
   id
 }) {
-  const [currentIndex, setCurrentIndex] = useState2(0);
+  const [currentIndex, setCurrentIndex] = useState(0);
   const { resolveColor: resolveColor2 } = useTheme();
   const utm = useUtmParams();
+  const sendEvent = useGtmEvent();
   const resolvedArrowColor = (() => {
     if (!arrowColor) return { color: "#FFFFFF", opacity: 100 };
     if (typeof arrowColor === "string")
@@ -537,39 +485,30 @@ function ImageCarousel({
   const goToPrevious = () => {
     const newIndex = currentIndex === 0 ? images.length - 1 : currentIndex - 1;
     setCurrentIndex(newIndex);
-    sendGTMEvent2({
-      event: "carousel_navigate",
-      value: {
-        direction: "previous",
-        slideIndex: newIndex,
-        totalSlides: images.length,
-        ...utm
-      }
+    sendEvent("carousel_navigate", {
+      direction: "previous",
+      slideIndex: newIndex,
+      totalSlides: images.length,
+      ...utm
     });
   };
   const goToNext = () => {
     const newIndex = currentIndex === images.length - 1 ? 0 : currentIndex + 1;
     setCurrentIndex(newIndex);
-    sendGTMEvent2({
-      event: "carousel_navigate",
-      value: {
-        direction: "next",
-        slideIndex: newIndex,
-        totalSlides: images.length,
-        ...utm
-      }
+    sendEvent("carousel_navigate", {
+      direction: "next",
+      slideIndex: newIndex,
+      totalSlides: images.length,
+      ...utm
     });
   };
   const goToSlide = (index) => {
     setCurrentIndex(index);
-    sendGTMEvent2({
-      event: "carousel_navigate",
-      value: {
-        direction: "direct",
-        slideIndex: index,
-        totalSlides: images.length,
-        ...utm
-      }
+    sendEvent("carousel_navigate", {
+      direction: "direct",
+      slideIndex: index,
+      totalSlides: images.length,
+      ...utm
     });
   };
   if (images.length === 0) {
@@ -1663,7 +1602,6 @@ function FeatureGrid({
 
 // components/page/Footer.tsx
 import { Facebook, Instagram, Twitter } from "lucide-react";
-import { sendGTMEvent as sendGTMEvent3 } from "@next/third-parties/google";
 import { jsx as jsx18, jsxs as jsxs7 } from "react/jsx-runtime";
 function Footer({
   logo,
@@ -1677,6 +1615,7 @@ function Footer({
 }) {
   const DropZone = puck?.renderDropZone;
   const utm = useUtmParams();
+  const sendEvent = useGtmEvent();
   const getSocialPlatform = (url) => {
     if (url.includes("facebook")) return "facebook";
     if (url.includes("instagram")) return "instagram";
@@ -1685,13 +1624,10 @@ function Footer({
   };
   const handleSocialClick = (url) => {
     const platform = getSocialPlatform(url);
-    sendGTMEvent3({
-      event: "social_click",
-      value: {
-        platform,
-        url,
-        ...utm
-      }
+    sendEvent("social_click", {
+      platform,
+      url,
+      ...utm
     });
   };
   const socialLinks = [
@@ -1728,10 +1664,8 @@ function Footer({
 }
 
 // components/page/Topbar.tsx
-import { useState as useState3 } from "react";
-import Link from "next/link";
+import { useState as useState2 } from "react";
 import { Menu, X } from "lucide-react";
-import { sendGTMEvent as sendGTMEvent4 } from "@next/third-parties/google";
 import { jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
 function Topbar({
   logo,
@@ -1743,28 +1677,23 @@ function Topbar({
   puck
 }) {
   const DropZone = puck?.renderDropZone;
-  const [mobileMenuOpen, setMobileMenuOpen] = useState3(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState2(false);
   const utm = useUtmParams();
+  const sendEvent = useGtmEvent();
   const handleNavClick = (item) => {
-    sendGTMEvent4({
-      event: "nav_click",
-      value: {
-        name: item.name,
-        url: item.url,
-        linkType: item.linkType || "internal",
-        ...utm
-      }
+    sendEvent("nav_click", {
+      name: item.name,
+      url: item.url,
+      linkType: item.linkType || "internal",
+      ...utm
     });
   };
   const handleMobileMenuToggle = () => {
     const newState = !mobileMenuOpen;
     setMobileMenuOpen(newState);
-    sendGTMEvent4({
-      event: "mobile_menu_toggle",
-      value: {
-        open: newState,
-        ...utm
-      }
+    sendEvent("mobile_menu_toggle", {
+      open: newState,
+      ...utm
     });
   };
   const renderLink = (item, index) => {
@@ -1796,7 +1725,7 @@ function Topbar({
       );
     }
     return /* @__PURE__ */ jsx19(
-      Link,
+      "a",
       {
         href: item.url,
         className,
@@ -1819,18 +1748,15 @@ function Topbar({
             style: { maxWidth },
             children: [
               /* @__PURE__ */ jsx19(
-                Link,
+                "a",
                 {
                   href: logoUrl,
                   className: "flex-shrink-0",
-                  onClick: () => sendGTMEvent4({
-                    event: "nav_click",
-                    value: {
-                      name: "logo",
-                      url: logoUrl,
-                      linkType: "internal",
-                      ...utm
-                    }
+                  onClick: () => sendEvent("nav_click", {
+                    name: "logo",
+                    url: logoUrl,
+                    linkType: "internal",
+                    ...utm
                   }),
                   children: logo ? /* @__PURE__ */ jsx19("img", { src: logo, alt: "Logo", className: "h-8" }) : /* @__PURE__ */ jsx19("span", { className: "text-xl font-bold", children: "Logo" })
                 }
@@ -1860,9 +1786,8 @@ function Topbar({
 }
 
 // components/page/Popup.tsx
-import { useState as useState4 } from "react";
+import { useState as useState3 } from "react";
 import { icons as icons4, X as X2 } from "lucide-react";
-import { sendGTMEvent as sendGTMEvent5 } from "@next/third-parties/google";
 import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
 function Icon2({ name, ...props }) {
   const formatted = name.charAt(0).toUpperCase() + name.slice(1);
@@ -1891,25 +1816,20 @@ function Popup({
   textLink = false,
   puck
 }) {
-  const [isOpen, setIsOpen] = useState4(false);
+  const [isOpen, setIsOpen] = useState3(false);
   const utm = useUtmParams();
+  const sendEvent = useGtmEvent();
   const handleOpen = () => {
     setIsOpen(true);
-    sendGTMEvent5({
-      event: "popup_open",
-      value: {
-        ctaText,
-        type: textLink ? "link" : "button",
-        ...utm
-      }
+    sendEvent("popup_open", {
+      ctaText,
+      type: textLink ? "link" : "button",
+      ...utm
     });
   };
   const handleClose = () => {
     setIsOpen(false);
-    sendGTMEvent5({
-      event: "popup_close",
-      value: { ctaText, ...utm }
-    });
+    sendEvent("popup_close", { ctaText, ...utm });
   };
   const trigger = textLink ? /* @__PURE__ */ jsx20(
     "button",