@mission-studio/puck 1.0.3 → 1.0.15

package/dist/editor.mjs

@@ -16,15 +16,12 @@ import {
   createSpacingField,
   createThemeableColorField,
   createTypographyField
-} from "./chunk-OZYZPWP7.mjs";
+} from "./chunk-JD6CULMT.mjs";
 import {
   allColorPresets,
   neutralColors
 } from "./chunk-UJTTHDZA.mjs";
 import {
-  DEFAULT_THEME,
-  EntriesProvider,
-  ThemeProvider,
   borderRadiusScale,
   fontFamilies,
   fontSizes,
@@ -33,12 +30,17 @@ import {
   getClosestBorderRadiusValue,
   getClosestSpacingValue,
   getFontSizeCSS,
+  spacingScale
+} from "./chunk-A3QDUUOF.mjs";
+import {
+  DEFAULT_THEME,
+  EntriesProvider,
+  ThemeProvider,
   getShadowCSS,
   shadowPresets,
-  spacingScale,
   useEntries,
   useTheme
-} from "./chunk-TTKY3YGP.mjs";
+} from "./chunk-XRKFMCSS.mjs";
 
 // components/editor/TemplatesList.tsx
 import { usePuck } from "@measured/puck";

package/dist/hooks/index.d.mts

@@ -0,0 +1,33 @@
+/**
+ * Hook to fire Google Tag Manager events via window.gtag.
+ * Framework-agnostic — works in Next.js, Astro, or any setup that loads GTM
+ * and exposes window.gtag. Silently no-ops if gtag is not present (e.g. SSR).
+ * @example
+ * const sendEvent = useGtmEvent();
+ * sendEvent('button_click', { text: 'Sign Up', href: '/signup' });
+ */
+declare function useGtmEvent(): (eventName: string, data?: Record<string, any>) => void;
+declare global {
+    interface Window {
+        gtag?: (...args: any[]) => void;
+    }
+}
+
+/**
+ * UTM parameter object
+ */
+interface UtmParams {
+    source?: string;
+    medium?: string;
+    campaign?: string;
+    content?: string;
+    term?: string;
+}
+/**
+ * Hook to capture and persist UTM parameters from URL
+ * Stores in sessionStorage so they persist across navigation
+ * @returns Current UTM parameters
+ */
+declare function useUtmParams(): UtmParams;
+
+export { type UtmParams, useGtmEvent, useUtmParams };

package/dist/hooks/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Hook to fire Google Tag Manager events via window.gtag.
+ * Framework-agnostic — works in Next.js, Astro, or any setup that loads GTM
+ * and exposes window.gtag. Silently no-ops if gtag is not present (e.g. SSR).
+ * @example
+ * const sendEvent = useGtmEvent();
+ * sendEvent('button_click', { text: 'Sign Up', href: '/signup' });
+ */
+declare function useGtmEvent(): (eventName: string, data?: Record<string, any>) => void;
+declare global {
+    interface Window {
+        gtag?: (...args: any[]) => void;
+    }
+}
+
+/**
+ * UTM parameter object
+ */
+interface UtmParams {
+    source?: string;
+    medium?: string;
+    campaign?: string;
+    content?: string;
+    term?: string;
+}
+/**
+ * Hook to capture and persist UTM parameters from URL
+ * Stores in sessionStorage so they persist across navigation
+ * @returns Current UTM parameters
+ */
+declare function useUtmParams(): UtmParams;
+
+export { type UtmParams, useGtmEvent, useUtmParams };

package/dist/hooks/index.js

@@ -0,0 +1,94 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// hooks/index.ts
+var hooks_exports = {};
+__export(hooks_exports, {
+  useGtmEvent: () => useGtmEvent,
+  useUtmParams: () => useUtmParams
+});
+module.exports = __toCommonJS(hooks_exports);
+
+// 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_react = require("react");
+function useUtmParams() {
+  const [utmParams, setUtmParams] = (0, import_react.useState)({});
+  (0, import_react.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;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useGtmEvent,
+  useUtmParams
+});

package/dist/hooks/index.mjs

@@ -0,0 +1,8 @@
+import {
+  useGtmEvent,
+  useUtmParams
+} from "../chunk-QSWQDR6M.mjs";
+export {
+  useGtmEvent,
+  useUtmParams
+};

package/dist/index.d.mts

@@ -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.mjs';
-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.mjs';
-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.mjs';
+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.mjs';
+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.mjs';
+import 'react/jsx-runtime';
+import 'react';
+import '@measured/puck';