@mission-studio/puck 1.0.2 → 1.0.3

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

@@ -158,21 +158,8 @@ function Paragraph({
   return /* @__PURE__ */ jsx2("p", { id, style, children: resolvedText });
 }
 
-// hooks/useGtmEvent.ts
-function useGtmEvent() {
-  return (eventName, data) => {
-    if (typeof window === "undefined") return;
-    if (typeof window.gtag !== "function") {
-      console.warn("GTM not initialized. Make sure @next/third-parties/google GoogleTagManager is added to your layout.");
-      return;
-    }
-    const eventData = {
-      event: eventName,
-      ...data && { value: data }
-    };
-    window.gtag("event", eventName, data || {});
-  };
-}
+// components/page/Button.tsx
+import { sendGTMEvent } from "@next/third-parties/google";
 
 // hooks/useUtmParams.ts
 import { useEffect, useState } from "react";
@@ -263,7 +250,6 @@ function Button({
 }) {
   const { resolveColor: resolveColor2 } = useTheme();
   const { getEntryValue } = useEntries();
-  const sendEvent = useGtmEvent();
   const utm = useUtmParams();
   const resolvedText = (() => {
     if (!text) return "Button";
@@ -277,11 +263,14 @@ function Button({
     return "Button";
   })();
   const handleClick = () => {
-    sendEvent("button_click", {
-      text: resolvedText,
-      href: href || void 0,
-      variant,
-      ...utm
+    sendGTMEvent({
+      event: "button_click",
+      value: {
+        text: resolvedText,
+        href: href || void 0,
+        variant,
+        ...utm
+      }
     });
   };
   const resolvedColor = (() => {
@@ -496,6 +485,7 @@ function Image({
 
 // components/page/ImageCarousel.tsx
 import { useState as useState2 } from "react";
+import { sendGTMEvent as sendGTMEvent2 } from "@next/third-parties/google";
 import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 var aspectRatioMap2 = {
   "16:9": "16 / 9",
@@ -524,7 +514,6 @@ function ImageCarousel({
 }) {
   const [currentIndex, setCurrentIndex] = useState2(0);
   const { resolveColor: resolveColor2 } = useTheme();
-  const sendEvent = useGtmEvent();
   const utm = useUtmParams();
   const resolvedArrowColor = (() => {
     if (!arrowColor) return { color: "#FFFFFF", opacity: 100 };
@@ -548,30 +537,39 @@ function ImageCarousel({
   const goToPrevious = () => {
     const newIndex = currentIndex === 0 ? images.length - 1 : currentIndex - 1;
     setCurrentIndex(newIndex);
-    sendEvent("carousel_navigate", {
-      direction: "previous",
-      slideIndex: newIndex,
-      totalSlides: images.length,
-      ...utm
+    sendGTMEvent2({
+      event: "carousel_navigate",
+      value: {
+        direction: "previous",
+        slideIndex: newIndex,
+        totalSlides: images.length,
+        ...utm
+      }
     });
   };
   const goToNext = () => {
     const newIndex = currentIndex === images.length - 1 ? 0 : currentIndex + 1;
     setCurrentIndex(newIndex);
-    sendEvent("carousel_navigate", {
-      direction: "next",
-      slideIndex: newIndex,
-      totalSlides: images.length,
-      ...utm
+    sendGTMEvent2({
+      event: "carousel_navigate",
+      value: {
+        direction: "next",
+        slideIndex: newIndex,
+        totalSlides: images.length,
+        ...utm
+      }
     });
   };
   const goToSlide = (index) => {
     setCurrentIndex(index);
-    sendEvent("carousel_navigate", {
-      direction: "direct",
-      slideIndex: index,
-      totalSlides: images.length,
-      ...utm
+    sendGTMEvent2({
+      event: "carousel_navigate",
+      value: {
+        direction: "direct",
+        slideIndex: index,
+        totalSlides: images.length,
+        ...utm
+      }
     });
   };
   if (images.length === 0) {
@@ -1665,6 +1663,7 @@ 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,7 +1676,6 @@ function Footer({
   puck
 }) {
   const DropZone = puck?.renderDropZone;
-  const sendEvent = useGtmEvent();
   const utm = useUtmParams();
   const getSocialPlatform = (url) => {
     if (url.includes("facebook")) return "facebook";
@@ -1687,17 +1685,22 @@ function Footer({
   };
   const handleSocialClick = (url) => {
     const platform = getSocialPlatform(url);
-    sendEvent("social_click", {
-      platform,
-      url,
-      ...utm
+    sendGTMEvent3({
+      event: "social_click",
+      value: {
+        platform,
+        url,
+        ...utm
+      }
     });
   };
   const socialLinks = [
     { url: facebookUrl, Icon: Facebook },
     { url: instagramUrl, Icon: Instagram },
     { url: twitterUrl, Icon: Twitter }
-  ].filter((link) => !!link.url);
+  ].filter(
+    (link) => !!link.url
+  );
   return /* @__PURE__ */ jsx18(
     "footer",
     {
@@ -1728,6 +1731,7 @@ function Footer({
 import { useState as useState3 } from "react";
 import Link from "next/link";
 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,
@@ -1740,22 +1744,27 @@ function Topbar({
 }) {
   const DropZone = puck?.renderDropZone;
   const [mobileMenuOpen, setMobileMenuOpen] = useState3(false);
-  const sendEvent = useGtmEvent();
   const utm = useUtmParams();
   const handleNavClick = (item) => {
-    sendEvent("nav_click", {
-      name: item.name,
-      url: item.url,
-      linkType: item.linkType || "internal",
-      ...utm
+    sendGTMEvent4({
+      event: "nav_click",
+      value: {
+        name: item.name,
+        url: item.url,
+        linkType: item.linkType || "internal",
+        ...utm
+      }
     });
   };
   const handleMobileMenuToggle = () => {
     const newState = !mobileMenuOpen;
     setMobileMenuOpen(newState);
-    sendEvent("mobile_menu_toggle", {
-      open: newState,
-      ...utm
+    sendGTMEvent4({
+      event: "mobile_menu_toggle",
+      value: {
+        open: newState,
+        ...utm
+      }
     });
   };
   const renderLink = (item, index) => {
@@ -1814,11 +1823,14 @@ function Topbar({
                 {
                   href: logoUrl,
                   className: "flex-shrink-0",
-                  onClick: () => sendEvent("nav_click", {
-                    name: "logo",
-                    url: logoUrl,
-                    linkType: "internal",
-                    ...utm
+                  onClick: () => sendGTMEvent4({
+                    event: "nav_click",
+                    value: {
+                      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" })
                 }
@@ -1850,6 +1862,7 @@ function Topbar({
 // components/page/Popup.tsx
 import { useState as useState4 } 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);
@@ -1879,19 +1892,24 @@ function Popup({
   puck
 }) {
   const [isOpen, setIsOpen] = useState4(false);
-  const sendEvent = useGtmEvent();
   const utm = useUtmParams();
   const handleOpen = () => {
     setIsOpen(true);
-    sendEvent("popup_open", {
-      ctaText,
-      type: textLink ? "link" : "button",
-      ...utm
+    sendGTMEvent5({
+      event: "popup_open",
+      value: {
+        ctaText,
+        type: textLink ? "link" : "button",
+        ...utm
+      }
     });
   };
   const handleClose = () => {
     setIsOpen(false);
-    sendEvent("popup_close", { ctaText, ...utm });
+    sendGTMEvent5({
+      event: "popup_close",
+      value: { ctaText, ...utm }
+    });
   };
   const trigger = textLink ? /* @__PURE__ */ jsx20(
     "button",

package/dist/config-entry.js

@@ -292,21 +292,8 @@ function Paragraph({
   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") {
-      console.warn("GTM not initialized. Make sure @next/third-parties/google GoogleTagManager is added to your layout.");
-      return;
-    }
-    const eventData = {
-      event: eventName,
-      ...data && { value: data }
-    };
-    window.gtag("event", eventName, data || {});
-  };
-}
+// components/page/Button.tsx
+var import_google = require("@next/third-parties/google");
 
 // hooks/useUtmParams.ts
 var import_react3 = require("react");
@@ -397,7 +384,6 @@ function Button({
 }) {
   const { resolveColor: resolveColor2 } = useTheme();
   const { getEntryValue } = useEntries();
-  const sendEvent = useGtmEvent();
   const utm = useUtmParams();
   const resolvedText = (() => {
     if (!text) return "Button";
@@ -411,11 +397,14 @@ function Button({
     return "Button";
   })();
   const handleClick = () => {
-    sendEvent("button_click", {
-      text: resolvedText,
-      href: href || void 0,
-      variant,
-      ...utm
+    (0, import_google.sendGTMEvent)({
+      event: "button_click",
+      value: {
+        text: resolvedText,
+        href: href || void 0,
+        variant,
+        ...utm
+      }
     });
   };
   const resolvedColor = (() => {
@@ -630,6 +619,7 @@ function Image({
 
 // components/page/ImageCarousel.tsx
 var import_react4 = require("react");
+var import_google2 = require("@next/third-parties/google");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var aspectRatioMap2 = {
   "16:9": "16 / 9",
@@ -658,7 +648,6 @@ function ImageCarousel({
 }) {
   const [currentIndex, setCurrentIndex] = (0, import_react4.useState)(0);
   const { resolveColor: resolveColor2 } = useTheme();
-  const sendEvent = useGtmEvent();
   const utm = useUtmParams();
   const resolvedArrowColor = (() => {
     if (!arrowColor) return { color: "#FFFFFF", opacity: 100 };
@@ -682,30 +671,39 @@ function ImageCarousel({
   const goToPrevious = () => {
     const newIndex = currentIndex === 0 ? images.length - 1 : currentIndex - 1;
     setCurrentIndex(newIndex);
-    sendEvent("carousel_navigate", {
-      direction: "previous",
-      slideIndex: newIndex,
-      totalSlides: images.length,
-      ...utm
+    (0, import_google2.sendGTMEvent)({
+      event: "carousel_navigate",
+      value: {
+        direction: "previous",
+        slideIndex: newIndex,
+        totalSlides: images.length,
+        ...utm
+      }
     });
   };
   const goToNext = () => {
     const newIndex = currentIndex === images.length - 1 ? 0 : currentIndex + 1;
     setCurrentIndex(newIndex);
-    sendEvent("carousel_navigate", {
-      direction: "next",
-      slideIndex: newIndex,
-      totalSlides: images.length,
-      ...utm
+    (0, import_google2.sendGTMEvent)({
+      event: "carousel_navigate",
+      value: {
+        direction: "next",
+        slideIndex: newIndex,
+        totalSlides: images.length,
+        ...utm
+      }
     });
   };
   const goToSlide = (index2) => {
     setCurrentIndex(index2);
-    sendEvent("carousel_navigate", {
-      direction: "direct",
-      slideIndex: index2,
-      totalSlides: images.length,
-      ...utm
+    (0, import_google2.sendGTMEvent)({
+      event: "carousel_navigate",
+      value: {
+        direction: "direct",
+        slideIndex: index2,
+        totalSlides: images.length,
+        ...utm
+      }
     });
   };
   if (images.length === 0) {
@@ -1835,6 +1833,7 @@ function FeatureGrid({
 
 // components/page/Footer.tsx
 var import_lucide_react3 = require("lucide-react");
+var import_google3 = require("@next/third-parties/google");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 function Footer({
   logo,
@@ -1847,7 +1846,6 @@ function Footer({
   puck
 }) {
   const DropZone = puck?.renderDropZone;
-  const sendEvent = useGtmEvent();
   const utm = useUtmParams();
   const getSocialPlatform = (url) => {
     if (url.includes("facebook")) return "facebook";
@@ -1857,17 +1855,22 @@ function Footer({
   };
   const handleSocialClick = (url) => {
     const platform2 = getSocialPlatform(url);
-    sendEvent("social_click", {
-      platform: platform2,
-      url,
-      ...utm
+    (0, import_google3.sendGTMEvent)({
+      event: "social_click",
+      value: {
+        platform: platform2,
+        url,
+        ...utm
+      }
     });
   };
   const socialLinks = [
     { url: facebookUrl, Icon: import_lucide_react3.Facebook },
     { url: instagramUrl, Icon: import_lucide_react3.Instagram },
     { url: twitterUrl, Icon: import_lucide_react3.Twitter }
-  ].filter((link) => !!link.url);
+  ].filter(
+    (link) => !!link.url
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "footer",
     {
@@ -1898,6 +1901,7 @@ function Footer({
 var import_react5 = require("react");
 var import_link = __toESM(require("next/link"));
 var import_lucide_react4 = require("lucide-react");
+var import_google4 = require("@next/third-parties/google");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function Topbar({
   logo,
@@ -1910,22 +1914,27 @@ function Topbar({
 }) {
   const DropZone = puck?.renderDropZone;
   const [mobileMenuOpen, setMobileMenuOpen] = (0, import_react5.useState)(false);
-  const sendEvent = useGtmEvent();
   const utm = useUtmParams();
   const handleNavClick = (item) => {
-    sendEvent("nav_click", {
-      name: item.name,
-      url: item.url,
-      linkType: item.linkType || "internal",
-      ...utm
+    (0, import_google4.sendGTMEvent)({
+      event: "nav_click",
+      value: {
+        name: item.name,
+        url: item.url,
+        linkType: item.linkType || "internal",
+        ...utm
+      }
     });
   };
   const handleMobileMenuToggle = () => {
     const newState = !mobileMenuOpen;
     setMobileMenuOpen(newState);
-    sendEvent("mobile_menu_toggle", {
-      open: newState,
-      ...utm
+    (0, import_google4.sendGTMEvent)({
+      event: "mobile_menu_toggle",
+      value: {
+        open: newState,
+        ...utm
+      }
     });
   };
   const renderLink = (item, index2) => {
@@ -1984,11 +1993,14 @@ function Topbar({
                 {
                   href: logoUrl,
                   className: "flex-shrink-0",
-                  onClick: () => sendEvent("nav_click", {
-                    name: "logo",
-                    url: logoUrl,
-                    linkType: "internal",
-                    ...utm
+                  onClick: () => (0, import_google4.sendGTMEvent)({
+                    event: "nav_click",
+                    value: {
+                      name: "logo",
+                      url: logoUrl,
+                      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" })
                 }
@@ -2020,6 +2032,7 @@ function Topbar({
 // components/page/Popup.tsx
 var import_react6 = require("react");
 var import_lucide_react5 = require("lucide-react");
+var import_google5 = require("@next/third-parties/google");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 function Icon2({ name, ...props }) {
   const formatted = name.charAt(0).toUpperCase() + name.slice(1);
@@ -2049,19 +2062,24 @@ function Popup({
   puck
 }) {
   const [isOpen, setIsOpen] = (0, import_react6.useState)(false);
-  const sendEvent = useGtmEvent();
   const utm = useUtmParams();
   const handleOpen = () => {
     setIsOpen(true);
-    sendEvent("popup_open", {
-      ctaText,
-      type: textLink ? "link" : "button",
-      ...utm
+    (0, import_google5.sendGTMEvent)({
+      event: "popup_open",
+      value: {
+        ctaText,
+        type: textLink ? "link" : "button",
+        ...utm
+      }
     });
   };
   const handleClose = () => {
     setIsOpen(false);
-    sendEvent("popup_close", { ctaText, ...utm });
+    (0, import_google5.sendGTMEvent)({
+      event: "popup_close",
+      value: { ctaText, ...utm }
+    });
   };
   const trigger = textLink ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "button",

package/dist/config-entry.mjs

@@ -29,7 +29,7 @@ import {
   Topbar,
   VideoEmbed,
   availableIcons
-} from "./chunk-RVOG4KFI.mjs";
+} from "./chunk-F47J7QDM.mjs";
 import "./chunk-TTKY3YGP.mjs";
 
 // config.tsx

package/dist/index.js

@@ -332,21 +332,8 @@ function Paragraph({
   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") {
-      console.warn("GTM not initialized. Make sure @next/third-parties/google GoogleTagManager is added to your layout.");
-      return;
-    }
-    const eventData = {
-      event: eventName,
-      ...data && { value: data }
-    };
-    window.gtag("event", eventName, data || {});
-  };
-}
+// components/page/Button.tsx
+var import_google = require("@next/third-parties/google");
 
 // hooks/useUtmParams.ts
 var import_react3 = require("react");
@@ -437,7 +424,6 @@ function Button({
 }) {
   const { resolveColor: resolveColor2 } = useTheme();
   const { getEntryValue } = useEntries();
-  const sendEvent = useGtmEvent();
   const utm = useUtmParams();
   const resolvedText = (() => {
     if (!text) return "Button";
@@ -451,11 +437,14 @@ function Button({
     return "Button";
   })();
   const handleClick = () => {
-    sendEvent("button_click", {
-      text: resolvedText,
-      href: href || void 0,
-      variant,
-      ...utm
+    (0, import_google.sendGTMEvent)({
+      event: "button_click",
+      value: {
+        text: resolvedText,
+        href: href || void 0,
+        variant,
+        ...utm
+      }
     });
   };
   const resolvedColor = (() => {
@@ -670,6 +659,7 @@ function Image({
 
 // components/page/ImageCarousel.tsx
 var import_react4 = require("react");
+var import_google2 = require("@next/third-parties/google");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var aspectRatioMap2 = {
   "16:9": "16 / 9",
@@ -698,7 +688,6 @@ function ImageCarousel({
 }) {
   const [currentIndex, setCurrentIndex] = (0, import_react4.useState)(0);
   const { resolveColor: resolveColor2 } = useTheme();
-  const sendEvent = useGtmEvent();
   const utm = useUtmParams();
   const resolvedArrowColor = (() => {
     if (!arrowColor) return { color: "#FFFFFF", opacity: 100 };
@@ -722,30 +711,39 @@ function ImageCarousel({
   const goToPrevious = () => {
     const newIndex = currentIndex === 0 ? images.length - 1 : currentIndex - 1;
     setCurrentIndex(newIndex);
-    sendEvent("carousel_navigate", {
-      direction: "previous",
-      slideIndex: newIndex,
-      totalSlides: images.length,
-      ...utm
+    (0, import_google2.sendGTMEvent)({
+      event: "carousel_navigate",
+      value: {
+        direction: "previous",
+        slideIndex: newIndex,
+        totalSlides: images.length,
+        ...utm
+      }
     });
   };
   const goToNext = () => {
     const newIndex = currentIndex === images.length - 1 ? 0 : currentIndex + 1;
     setCurrentIndex(newIndex);
-    sendEvent("carousel_navigate", {
-      direction: "next",
-      slideIndex: newIndex,
-      totalSlides: images.length,
-      ...utm
+    (0, import_google2.sendGTMEvent)({
+      event: "carousel_navigate",
+      value: {
+        direction: "next",
+        slideIndex: newIndex,
+        totalSlides: images.length,
+        ...utm
+      }
     });
   };
   const goToSlide = (index) => {
     setCurrentIndex(index);
-    sendEvent("carousel_navigate", {
-      direction: "direct",
-      slideIndex: index,
-      totalSlides: images.length,
-      ...utm
+    (0, import_google2.sendGTMEvent)({
+      event: "carousel_navigate",
+      value: {
+        direction: "direct",
+        slideIndex: index,
+        totalSlides: images.length,
+        ...utm
+      }
     });
   };
   if (images.length === 0) {
@@ -1875,6 +1873,7 @@ function FeatureGrid({
 
 // components/page/Footer.tsx
 var import_lucide_react3 = require("lucide-react");
+var import_google3 = require("@next/third-parties/google");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 function Footer({
   logo,
@@ -1887,7 +1886,6 @@ function Footer({
   puck
 }) {
   const DropZone = puck?.renderDropZone;
-  const sendEvent = useGtmEvent();
   const utm = useUtmParams();
   const getSocialPlatform = (url) => {
     if (url.includes("facebook")) return "facebook";
@@ -1897,17 +1895,22 @@ function Footer({
   };
   const handleSocialClick = (url) => {
     const platform = getSocialPlatform(url);
-    sendEvent("social_click", {
-      platform,
-      url,
-      ...utm
+    (0, import_google3.sendGTMEvent)({
+      event: "social_click",
+      value: {
+        platform,
+        url,
+        ...utm
+      }
     });
   };
   const socialLinks = [
     { url: facebookUrl, Icon: import_lucide_react3.Facebook },
     { url: instagramUrl, Icon: import_lucide_react3.Instagram },
     { url: twitterUrl, Icon: import_lucide_react3.Twitter }
-  ].filter((link) => !!link.url);
+  ].filter(
+    (link) => !!link.url
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "footer",
     {
@@ -1938,6 +1941,7 @@ function Footer({
 var import_react5 = require("react");
 var import_link = __toESM(require("next/link"));
 var import_lucide_react4 = require("lucide-react");
+var import_google4 = require("@next/third-parties/google");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function Topbar({
   logo,
@@ -1950,22 +1954,27 @@ function Topbar({
 }) {
   const DropZone = puck?.renderDropZone;
   const [mobileMenuOpen, setMobileMenuOpen] = (0, import_react5.useState)(false);
-  const sendEvent = useGtmEvent();
   const utm = useUtmParams();
   const handleNavClick = (item) => {
-    sendEvent("nav_click", {
-      name: item.name,
-      url: item.url,
-      linkType: item.linkType || "internal",
-      ...utm
+    (0, import_google4.sendGTMEvent)({
+      event: "nav_click",
+      value: {
+        name: item.name,
+        url: item.url,
+        linkType: item.linkType || "internal",
+        ...utm
+      }
     });
   };
   const handleMobileMenuToggle = () => {
     const newState = !mobileMenuOpen;
     setMobileMenuOpen(newState);
-    sendEvent("mobile_menu_toggle", {
-      open: newState,
-      ...utm
+    (0, import_google4.sendGTMEvent)({
+      event: "mobile_menu_toggle",
+      value: {
+        open: newState,
+        ...utm
+      }
     });
   };
   const renderLink = (item, index) => {
@@ -2024,11 +2033,14 @@ function Topbar({
                 {
                   href: logoUrl,
                   className: "flex-shrink-0",
-                  onClick: () => sendEvent("nav_click", {
-                    name: "logo",
-                    url: logoUrl,
-                    linkType: "internal",
-                    ...utm
+                  onClick: () => (0, import_google4.sendGTMEvent)({
+                    event: "nav_click",
+                    value: {
+                      name: "logo",
+                      url: logoUrl,
+                      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" })
                 }
@@ -2060,6 +2072,7 @@ function Topbar({
 // components/page/Popup.tsx
 var import_react6 = require("react");
 var import_lucide_react5 = require("lucide-react");
+var import_google5 = require("@next/third-parties/google");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 function Icon2({ name, ...props }) {
   const formatted = name.charAt(0).toUpperCase() + name.slice(1);
@@ -2089,19 +2102,24 @@ function Popup({
   puck
 }) {
   const [isOpen, setIsOpen] = (0, import_react6.useState)(false);
-  const sendEvent = useGtmEvent();
   const utm = useUtmParams();
   const handleOpen = () => {
     setIsOpen(true);
-    sendEvent("popup_open", {
-      ctaText,
-      type: textLink ? "link" : "button",
-      ...utm
+    (0, import_google5.sendGTMEvent)({
+      event: "popup_open",
+      value: {
+        ctaText,
+        type: textLink ? "link" : "button",
+        ...utm
+      }
     });
   };
   const handleClose = () => {
     setIsOpen(false);
-    sendEvent("popup_close", { ctaText, ...utm });
+    (0, import_google5.sendGTMEvent)({
+      event: "popup_close",
+      value: { ctaText, ...utm }
+    });
   };
   const trigger = textLink ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "button",

package/dist/index.mjs

@@ -20,7 +20,7 @@ import {
   Topbar,
   VideoEmbed,
   availableIcons
-} from "./chunk-RVOG4KFI.mjs";
+} from "./chunk-F47J7QDM.mjs";
 import {
   allColorPresets,
   neutralColors

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mission-studio/puck",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A collection of puck components and configurations for internal use at Mission Studio.",
   "repository": {
     "type": "git",
@@ -52,6 +52,7 @@
   },
   "dependencies": {
     "@measured/puck": "^0.20.2",
+    "@next/third-parties": "^16.1.6",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-slot": "^1.2.4",
     "@tailwindcss/postcss": "^4.1.18",