@mission-studio/puck 1.0.3 → 1.0.15

package/dist/index.d.ts

@@ -1,287 +1,6 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as EntryBoundValue, T as ThemeableColorValue, C as ColorValue, R as ResponsiveVisibility } from './ResponsiveToggleField-CVhKzDAT.js';
-export { B as BorderRadiusPreset, d as ColorPreset, D as DEFAULT_THEME, F as FontFamilyPreset, f as FontSizePreset, g as FontWeightPreset, P as PageTheme, S as ShadowPreset, i as SpacingPreset, j as ThemeBorderKey, k as ThemeBorders, b as ThemeColorKey, l as ThemeColors, m as ThemeProvider, n as ThemeShadowKey, o as ThemeShadows, p as ThemeSpacing, q as ThemeSpacingKey, r as ThemeTypography, s as ThemeableBorderRadiusValue, t as ThemeableShadowValue, u as ThemeableSpacingValue, v as allColorPresets, w as borderRadiusScale, x as fontFamilies, y as fontSizes, z as fontWeights, A as getBorderRadiusCSS, G as getClosestBorderRadiusValue, H as getClosestSpacingValue, I as getFontSizeCSS, J as getShadowCSS, K as neutralColors, L as shadowPresets, M as spacingScale, N as useTheme } from './ResponsiveToggleField-CVhKzDAT.js';
-import { ReactNode } from 'react';
-import { PuckContext } from '@measured/puck';
-
-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";
-    color?: ThemeableColorValue | ColorValue | string;
-    align?: "left" | "center" | "right";
-    letterSpacing?: "tight" | "normal" | "wide";
-    lineHeight?: "tight" | "normal" | "relaxed";
-    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 ParagraphProps = {
-    text?: EntryBoundValue<string> | string;
-    size?: "sm" | "base" | "lg" | "xl";
-    weight?: "normal" | "medium" | "semibold";
-    color?: ThemeableColorValue | ColorValue | string;
-    align?: "left" | "center" | "right" | "justify";
-    lineHeight?: "tight" | "normal" | "relaxed" | "loose";
-    maxWidth?: string;
-    id?: string;
-    puck?: unknown;
-    editMode?: boolean;
-};
-declare function Paragraph({ text, size, weight, color, align, lineHeight, maxWidth, id, }: ParagraphProps): react_jsx_runtime.JSX.Element | null;
-
-type ButtonProps = {
-    text?: EntryBoundValue<string> | string;
-    href?: string;
-    target?: "_self" | "_blank";
-    variant?: "solid" | "outline" | "ghost" | "link";
-    size?: "sm" | "md" | "lg" | "xl";
-    color?: ThemeableColorValue | ColorValue | string;
-    textColor?: ThemeableColorValue | ColorValue | string;
-    borderRadius?: "none" | "sm" | "md" | "lg" | "full";
-    fullWidth?: boolean;
-    align?: "left" | "center" | "right";
-    id?: string;
-    puck?: unknown;
-    editMode?: boolean;
-};
-declare function Button({ text, href, target, variant, size, color, textColor, borderRadius, fullWidth, align, id, }: ButtonProps): react_jsx_runtime.JSX.Element;
-
-type ImageProps = {
-    src?: EntryBoundValue<string> | string;
-    alt?: string;
-    width?: "auto" | "full" | "sm" | "md" | "lg" | "xl";
-    aspectRatio?: "auto" | "1:1" | "4:3" | "16:9" | "21:9";
-    objectFit?: "contain" | "cover" | "fill" | "none";
-    borderRadius?: "none" | "sm" | "md" | "lg" | "xl" | "full";
-    shadow?: "none" | "sm" | "md" | "lg" | "xl";
-    align?: "left" | "center" | "right";
-    caption?: EntryBoundValue<string> | string;
-    captionColor?: ThemeableColorValue | ColorValue | string;
-    id?: string;
-    puck?: unknown;
-    editMode?: boolean;
-};
-declare function Image({ src, alt, width, aspectRatio, objectFit, borderRadius, shadow, align, caption, captionColor, id, }: ImageProps): react_jsx_runtime.JSX.Element;
-
-type CarouselImage = {
-    src: string;
-    alt?: string;
-};
-type ImageCarouselProps = {
-    images?: CarouselImage[];
-    aspectRatio?: "16:9" | "4:3" | "1:1" | "21:9";
-    borderRadius?: "none" | "sm" | "md" | "lg";
-    showDots?: boolean;
-    showArrows?: boolean;
-    arrowColor?: ThemeableColorValue | ColorValue | string;
-    dotColor?: ThemeableColorValue | ColorValue | string;
-    autoPlay?: boolean;
-    autoPlayInterval?: number;
-    id?: string;
-    puck?: unknown;
-    editMode?: boolean;
-};
-declare function ImageCarousel({ images, aspectRatio, borderRadius, showDots, showArrows, arrowColor, dotColor, id, }: ImageCarouselProps): react_jsx_runtime.JSX.Element;
-
-type VideoEmbedProps = {
-    url?: EntryBoundValue<string> | string;
-    aspectRatio?: "16:9" | "4:3" | "1:1" | "21:9";
-    borderRadius?: "none" | "sm" | "md" | "lg";
-    autoplay?: boolean;
-    muted?: boolean;
-    loop?: boolean;
-    align?: "left" | "center" | "right";
-    maxWidth?: "sm" | "md" | "lg" | "xl" | "full";
-    id?: string;
-    puck?: unknown;
-    editMode?: boolean;
-};
-declare function VideoEmbed({ url, aspectRatio, borderRadius, autoplay, muted, loop, align, maxWidth, id, }: VideoEmbedProps): react_jsx_runtime.JSX.Element;
-
-type IconProps = {
-    name?: string;
-    size?: "sm" | "md" | "lg" | "xl" | "2xl";
-    color?: ThemeableColorValue | ColorValue | string;
-    align?: "left" | "center" | "right";
-    id?: string;
-    puck?: unknown;
-    editMode?: boolean;
-};
-declare function Icon({ name, size, color, align, id, }: IconProps): react_jsx_runtime.JSX.Element;
-declare const availableIcons: string[];
-
-type PuckProps = {
-    puck?: PuckContext;
-    editMode?: boolean;
-    id?: string;
-};
-
-type SectionProps = {
-    children?: ReactNode;
-    verticalPadding?: number;
-    horizontalPadding?: number;
-    gap?: number;
-    backgroundColor?: ThemeableColorValue | ColorValue | string;
-    backgroundImage?: string;
-    shadow?: string;
-    borderRadius?: number;
-    contentMaxWidth?: string;
-    anchorLink?: string;
-    visibility?: ResponsiveVisibility;
-} & PuckProps;
-declare function Section({ children: _children, verticalPadding, horizontalPadding, gap, backgroundColor, backgroundImage, shadow, borderRadius, contentMaxWidth, anchorLink, visibility, puck, }: SectionProps): react_jsx_runtime.JSX.Element;
-
-type ContainerProps = {
-    maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
-    padding?: "none" | "sm" | "md" | "lg" | "xl";
-    paddingX?: "none" | "sm" | "md" | "lg" | "xl";
-    paddingY?: "none" | "sm" | "md" | "lg" | "xl";
-    backgroundColor?: ThemeableColorValue | ColorValue | string;
-    centered?: boolean;
-} & PuckProps;
-declare function Container({ maxWidth, padding, paddingX, paddingY, backgroundColor, centered, id, puck, }: ContainerProps): react_jsx_runtime.JSX.Element;
-
-type ColumnsProps = {
-    columns?: 2 | 3 | 4;
-    gap?: "none" | "sm" | "md" | "lg" | "xl";
-    verticalAlign?: "top" | "center" | "bottom" | "stretch";
-    stackOnMobile?: boolean;
-} & PuckProps;
-declare function Columns({ columns, gap, verticalAlign, stackOnMobile, id, puck, }: ColumnsProps): react_jsx_runtime.JSX.Element;
-
-type CardProps = {
-    backgroundColor?: ThemeableColorValue | ColorValue | string;
-    borderColor?: ThemeableColorValue | ColorValue | string;
-    borderWidth?: "none" | "thin" | "medium" | "thick";
-    borderRadius?: "none" | "sm" | "md" | "lg" | "xl";
-    shadow?: "none" | "sm" | "md" | "lg" | "xl";
-    padding?: "none" | "sm" | "md" | "lg" | "xl";
-} & PuckProps;
-declare function Card({ backgroundColor, borderColor, borderWidth, borderRadius, shadow, padding, id, puck, }: CardProps): react_jsx_runtime.JSX.Element;
-
-type DividerProps = {
-    style?: "solid" | "dashed" | "dotted";
-    thickness?: "thin" | "medium" | "thick";
-    color?: ThemeableColorValue | ColorValue | string;
-    width?: "full" | "3/4" | "1/2" | "1/4";
-    align?: "left" | "center" | "right";
-    spacing?: "sm" | "md" | "lg" | "xl";
-    id?: string;
-    puck?: unknown;
-    editMode?: boolean;
-};
-declare function Divider({ style: lineStyle, thickness, color, width, align, spacing, id, }: DividerProps): react_jsx_runtime.JSX.Element;
-
-type SpacerProps = {
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
-    id?: string;
-    puck?: unknown;
-    editMode?: boolean;
-};
-declare function Spacer({ size, id }: SpacerProps): react_jsx_runtime.JSX.Element;
-
-type TextBlockProps = {
-    title?: EntryBoundValue<string> | string;
-    subtitle?: EntryBoundValue<string> | string;
-    body?: EntryBoundValue<string> | string;
-    alignment?: "left" | "center" | "right";
-    textSize?: "small" | "medium-small" | "medium" | "large" | "xlarge";
-    textColor?: ThemeableColorValue | ColorValue | string;
-    subtitleBodyColor?: ThemeableColorValue | ColorValue | string;
-    useGradientText?: boolean;
-    gradientColor1?: ThemeableColorValue | ColorValue | string;
-    gradientColor2?: ThemeableColorValue | ColorValue | string;
-    anchorLink?: string;
-    puck?: unknown;
-    editMode?: boolean;
-    id?: string;
-};
-declare function TextBlock({ title, subtitle, body, alignment, textSize, textColor, subtitleBodyColor, useGradientText, gradientColor1, gradientColor2, anchorLink, }: TextBlockProps): react_jsx_runtime.JSX.Element;
-
-type CustomImageProps = {
-    image?: string;
-    alt?: string;
-    maxWidth?: number;
-    alignment?: "left" | "center" | "right";
-    fitContent?: boolean;
-} & PuckProps;
-declare function CustomImage({ image, alt, maxWidth, alignment, fitContent, }: CustomImageProps): react_jsx_runtime.JSX.Element;
-
-type Feature$1 = {
-    icon?: string;
-    image?: string;
-    title?: string;
-    description?: string;
-};
-type FeaturesListProps = {
-    features?: Feature$1[];
-    align?: "left" | "center" | "right";
-    size?: "small" | "medium" | "large";
-    iconColor?: string;
-    anchorLink?: string;
-} & Record<string, unknown>;
-declare function FeaturesList({ features, align, size, iconColor, anchorLink, }: FeaturesListProps): react_jsx_runtime.JSX.Element;
-
-type Feature = {
-    icon?: string;
-    image?: string;
-    title?: string;
-    description?: string;
-};
-type FeatureGridProps = {
-    heading?: string;
-    description?: string;
-    features?: Feature[];
-    columns?: 2 | 3 | 4;
-    align?: "left" | "center" | "right";
-    size?: "small" | "medium" | "large";
-    iconColor?: string;
-    textColor?: string;
-    anchorLink?: string;
-} & Record<string, unknown>;
-declare function FeatureGrid({ heading, description, features, columns, align, size, iconColor, textColor, anchorLink, }: FeatureGridProps): react_jsx_runtime.JSX.Element;
-
-type FooterProps = {
-    logo?: string;
-    copyright?: string;
-    backgroundColor?: string;
-    textColor?: string;
-    facebookUrl?: string;
-    instagramUrl?: string;
-    twitterUrl?: string;
-    tiktokUrl?: string;
-} & Record<string, unknown> & PuckProps;
-declare function Footer({ logo, copyright, backgroundColor, textColor, facebookUrl, instagramUrl, twitterUrl, puck, }: FooterProps): react_jsx_runtime.JSX.Element;
-
-type NavItem = {
-    name: string;
-    url: string;
-    linkType?: "internal" | "external" | "scrollTo";
-};
-type TopbarProps = {
-    logo?: string;
-    logoUrl?: string;
-    navItems?: NavItem[];
-    backgroundColor?: string;
-    textColor?: string;
-    maxWidth?: string;
-} & Record<string, unknown> & PuckProps;
-declare function Topbar({ logo, logoUrl, navItems, backgroundColor, textColor, maxWidth, puck, }: TopbarProps): react_jsx_runtime.JSX.Element;
-
-type PopupProps = {
-    ctaText?: string;
-    buttonColor?: string;
-    textColor?: string;
-    icon?: string;
-    iconPosition?: "left" | "right";
-    size?: "small" | "medium" | "large";
-    width?: "small" | "medium" | "large";
-    textLink?: boolean;
-} & Record<string, unknown> & PuckProps;
-declare function Popup({ ctaText, buttonColor, textColor, icon, iconPosition, size, width, textLink, puck, }: PopupProps): react_jsx_runtime.JSX.Element;
-
-export { Button, type ButtonProps, Card, type CardProps, type CarouselImage, Columns, type ColumnsProps, Container, type ContainerProps, CustomImage, type CustomImageProps, Divider, type DividerProps, FeatureGrid, type FeatureGridProps, FeaturesList, type FeaturesListProps, Footer, type FooterProps, Heading, type HeadingProps, Icon, type IconProps, Image, ImageCarousel, type ImageCarouselProps, type ImageProps, Paragraph, type ParagraphProps, Popup, type PopupProps, Section, type SectionProps, Spacer, type SpacerProps, TextBlock, type TextBlockProps, ThemeableColorValue, Topbar, type TopbarProps, VideoEmbed, type VideoEmbedProps, availableIcons };
+export { Button, ButtonProps, Card, CardProps, CarouselImage, Columns, ColumnsProps, Container, ContainerProps, CustomImage, CustomImageProps, Divider, DividerProps, FeatureGrid, FeatureGridProps, FeaturesList, FeaturesListProps, Footer, FooterProps, Heading, HeadingProps, Icon, IconProps, Image, ImageCarousel, ImageCarouselProps, ImageProps, Paragraph, ParagraphProps, Popup, PopupProps, Section, SectionProps, Spacer, SpacerProps, TextBlock, TextBlockProps, Topbar, TopbarProps, VideoEmbed, VideoEmbedProps, availableIcons } from './renderer.js';
+export { D as DEFAULT_THEME, P as PageTheme, T as ThemeBorderKey, a as ThemeBorders, b as ThemeColorKey, c as ThemeColors, d as ThemeProvider, e as ThemeShadowKey, f as ThemeShadows, g as ThemeSpacing, h as ThemeSpacingKey, i as ThemeTypography, j as ThemeableBorderRadiusValue, k as ThemeableColorValue, l as ThemeableShadowValue, m as ThemeableSpacingValue, u as useTheme } from './ResponsiveToggleField-BGofgB3u.js';
+export { B as BorderRadiusPreset, C as ColorPreset, F as FontFamilyPreset, a as FontSizePreset, b as FontWeightPreset, S as ShadowPreset, c as SpacingPreset, d as allColorPresets, e as borderRadiusScale, f as fontFamilies, g as fontSizes, h as fontWeights, i as getBorderRadiusCSS, j as getClosestBorderRadiusValue, k as getClosestSpacingValue, l as getFontSizeCSS, m as getShadowCSS, n as neutralColors, s as shadowPresets, o as spacingScale } from './typography-DwjKOx3F.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@measured/puck';

package/dist/index.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // index.ts
@@ -332,8 +322,15 @@ function Paragraph({
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { id, style, children: resolvedText });
 }
 
-// components/page/Button.tsx
-var import_google = require("@next/third-parties/google");
+// 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");
@@ -425,6 +422,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;
@@ -437,14 +435,13 @@ function Button({
     return "Button";
   })();
   const handleClick = () => {
-    (0, import_google.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 = (() => {
@@ -659,7 +656,6 @@ 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",
@@ -689,6 +685,7 @@ function ImageCarousel({
   const [currentIndex, setCurrentIndex] = (0, import_react4.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")
@@ -711,39 +708,30 @@ function ImageCarousel({
   const goToPrevious = () => {
     const newIndex = currentIndex === 0 ? images.length - 1 : currentIndex - 1;
     setCurrentIndex(newIndex);
-    (0, import_google2.sendGTMEvent)({
-      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);
-    (0, import_google2.sendGTMEvent)({
-      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);
-    (0, import_google2.sendGTMEvent)({
-      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) {
@@ -1873,7 +1861,6 @@ 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,6 +1874,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";
@@ -1895,13 +1883,10 @@ function Footer({
   };
   const handleSocialClick = (url) => {
     const platform = getSocialPlatform(url);
-    (0, import_google3.sendGTMEvent)({
-      event: "social_click",
-      value: {
-        platform,
-        url,
-        ...utm
-      }
+    sendEvent("social_click", {
+      platform,
+      url,
+      ...utm
     });
   };
   const socialLinks = [
@@ -1939,9 +1924,7 @@ function Footer({
 
 // components/page/Topbar.tsx
 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,
@@ -1955,26 +1938,21 @@ function Topbar({
   const DropZone = puck?.renderDropZone;
   const [mobileMenuOpen, setMobileMenuOpen] = (0, import_react5.useState)(false);
   const utm = useUtmParams();
+  const sendEvent = useGtmEvent();
   const handleNavClick = (item) => {
-    (0, import_google4.sendGTMEvent)({
-      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);
-    (0, import_google4.sendGTMEvent)({
-      event: "mobile_menu_toggle",
-      value: {
-        open: newState,
-        ...utm
-      }
+    sendEvent("mobile_menu_toggle", {
+      open: newState,
+      ...utm
     });
   };
   const renderLink = (item, index) => {
@@ -2006,7 +1984,7 @@ function Topbar({
       );
     }
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-      import_link.default,
+      "a",
       {
         href: item.url,
         className,
@@ -2029,18 +2007,15 @@ function Topbar({
             style: { maxWidth },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                import_link.default,
+                "a",
                 {
                   href: logoUrl,
                   className: "flex-shrink-0",
-                  onClick: () => (0, import_google4.sendGTMEvent)({
-                    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__ */ (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" })
                 }
@@ -2072,7 +2047,6 @@ 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);
@@ -2103,23 +2077,18 @@ function Popup({
 }) {
   const [isOpen, setIsOpen] = (0, import_react6.useState)(false);
   const utm = useUtmParams();
+  const sendEvent = useGtmEvent();
   const handleOpen = () => {
     setIsOpen(true);
-    (0, import_google5.sendGTMEvent)({
-      event: "popup_open",
-      value: {
-        ctaText,
-        type: textLink ? "link" : "button",
-        ...utm
-      }
+    sendEvent("popup_open", {
+      ctaText,
+      type: textLink ? "link" : "button",
+      ...utm
     });
   };
   const handleClose = () => {
     setIsOpen(false);
-    (0, import_google5.sendGTMEvent)({
-      event: "popup_close",
-      value: { ctaText, ...utm }
-    });
+    sendEvent("popup_close", { ctaText, ...utm });
   };
   const trigger = textLink ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "button",

package/dist/index.mjs

@@ -1,3 +1,18 @@
+import {
+  allColorPresets,
+  neutralColors
+} from "./chunk-UJTTHDZA.mjs";
+import {
+  borderRadiusScale,
+  fontFamilies,
+  fontSizes,
+  fontWeights,
+  getBorderRadiusCSS,
+  getClosestBorderRadiusValue,
+  getClosestSpacingValue,
+  getFontSizeCSS,
+  spacingScale
+} from "./chunk-A3QDUUOF.mjs";
 import {
   Button,
   Card,
@@ -20,27 +35,15 @@ import {
   Topbar,
   VideoEmbed,
   availableIcons
-} from "./chunk-F47J7QDM.mjs";
-import {
-  allColorPresets,
-  neutralColors
-} from "./chunk-UJTTHDZA.mjs";
+} from "./chunk-HHHD5TX2.mjs";
 import {
   DEFAULT_THEME,
   ThemeProvider,
-  borderRadiusScale,
-  fontFamilies,
-  fontSizes,
-  fontWeights,
-  getBorderRadiusCSS,
-  getClosestBorderRadiusValue,
-  getClosestSpacingValue,
-  getFontSizeCSS,
   getShadowCSS,
   shadowPresets,
-  spacingScale,
   useTheme
-} from "./chunk-TTKY3YGP.mjs";
+} from "./chunk-XRKFMCSS.mjs";
+import "./chunk-QSWQDR6M.mjs";
 export {
   Button,
   Card,