@delmaredigital/payload-puck 0.1.0

package/dist/theme/index.d.ts

@@ -0,0 +1,155 @@
+import { T as ThemeConfig, R as ResolvedTheme, B as ButtonVariantStyles, a as BackgroundStyles, C as ColorPreset } from '../types-_6MvjyKv.js';
+export { b as ButtonVariantConfig, c as ThemeContextValue } from '../types-_6MvjyKv.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface ThemeProviderProps {
+    children: ReactNode;
+    /** Theme configuration to apply */
+    theme?: ThemeConfig;
+}
+/**
+ * Provides theme configuration to descendant Puck components
+ *
+ * @example
+ * ```tsx
+ * <ThemeProvider theme={{
+ *   buttonVariants: {
+ *     default: { classes: 'bg-primary text-white hover:bg-primary/90' }
+ *   }
+ * }}>
+ *   <PageRenderer data={data} />
+ * </ThemeProvider>
+ * ```
+ */
+declare function ThemeProvider({ children, theme }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access the current theme
+ *
+ * Returns DEFAULT_THEME if no ThemeProvider is present,
+ * ensuring components work standalone for backwards compatibility.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const theme = useTheme()
+ *   const buttonClasses = getVariantClasses(theme.buttonVariants, 'primary')
+ *   return <button className={buttonClasses}>Click me</button>
+ * }
+ * ```
+ */
+declare function useTheme(): ResolvedTheme;
+/**
+ * Gets the default theme for server components
+ *
+ * Use this when you need theme values in a server component
+ * where hooks cannot be used.
+ */
+declare function getDefaultTheme(): ResolvedTheme;
+/**
+ * Hook to check if a ThemeProvider is present
+ *
+ * Useful for conditional logic based on whether theming is configured.
+ */
+declare function useHasThemeProvider(): boolean;
+
+/**
+ * Default Theme Values
+ *
+ * These defaults ensure backwards compatibility - components render
+ * identically to before theming was introduced when no theme is provided.
+ */
+
+/**
+ * Default button variant styles
+ * Uses semantic Tailwind classes that map to CSS variables (--primary, --secondary, etc.)
+ * This allows consuming apps to customize colors via their theme CSS variables.
+ */
+declare const DEFAULT_BUTTON_VARIANTS: ButtonVariantStyles;
+/**
+ * Default CTA button variant styles
+ * Uses semantic Tailwind classes that map to CSS variables.
+ */
+declare const DEFAULT_CTA_BUTTON_VARIANTS: ButtonVariantStyles;
+/**
+ * Default CTA background styles
+ * Uses semantic Tailwind classes that map to CSS variables.
+ */
+declare const DEFAULT_CTA_BACKGROUND_STYLES: BackgroundStyles;
+/**
+ * Default color picker presets
+ * Matches DEFAULT_PRESETS from ColorPickerField.tsx
+ */
+declare const DEFAULT_COLOR_PRESETS: ColorPreset[];
+/**
+ * Default focus ring color class
+ * Uses semantic ring color from CSS variables
+ */
+declare const DEFAULT_FOCUS_RING = "focus:ring-ring";
+/**
+ * Complete default theme
+ * Used when no ThemeProvider is present or no theme config is provided
+ */
+declare const DEFAULT_THEME: ResolvedTheme;
+
+/**
+ * Theme Resolution Utilities
+ *
+ * Functions for merging user-provided theme config with defaults
+ * and safely accessing theme values.
+ */
+
+/**
+ * Merges user-provided theme config with defaults to create a fully resolved theme
+ */
+declare function resolveTheme(config?: ThemeConfig): ResolvedTheme;
+/**
+ * Safely gets variant classes from a variant styles object
+ *
+ * @param variants - The button variant styles object
+ * @param variant - The variant key to look up
+ * @param fallback - Fallback variant key if the requested variant doesn't exist
+ * @returns The CSS classes string for the variant
+ */
+declare function getVariantClasses(variants: ButtonVariantStyles, variant: string, fallback?: string): string;
+/**
+ * Safely gets background style classes
+ *
+ * @param styles - The background styles object
+ * @param style - The style key to look up
+ * @param fallback - Fallback style key if the requested style doesn't exist
+ * @returns The CSS classes string for the background
+ */
+declare function getBackgroundClasses(styles: BackgroundStyles, style: string, fallback?: string): string;
+
+/**
+ * Example Theme Configuration
+ *
+ * Copy this file to your project and customize it to match your design system.
+ *
+ * Usage:
+ * 1. Copy this file to your project (e.g., src/lib/puck-theme.ts)
+ * 2. Customize the values to match your CSS variables/design tokens
+ * 3. Import and pass to PageRenderer or PuckEditor:
+ *
+ * ```tsx
+ * import { puckTheme } from '@/lib/puck-theme'
+ *
+ * <PageRenderer data={data} config={config} theme={puckTheme} />
+ * ```
+ */
+
+/**
+ * Example theme using shadcn/ui CSS variables
+ *
+ * This example assumes you have CSS variables like:
+ * --primary, --primary-foreground
+ * --secondary, --secondary-foreground
+ * --accent, --accent-foreground
+ * --muted, --muted-foreground
+ * --destructive, --destructive-foreground
+ * --ring (for focus rings)
+ */
+declare const exampleTheme: ThemeConfig;
+
+export { BackgroundStyles, ButtonVariantStyles, ColorPreset, DEFAULT_BUTTON_VARIANTS, DEFAULT_COLOR_PRESETS, DEFAULT_CTA_BACKGROUND_STYLES, DEFAULT_CTA_BUTTON_VARIANTS, DEFAULT_FOCUS_RING, DEFAULT_THEME, ResolvedTheme, ThemeConfig, ThemeProvider, type ThemeProviderProps, exampleTheme, getBackgroundClasses, getDefaultTheme, getVariantClasses, resolveTheme, useHasThemeProvider, useTheme };

package/dist/theme/index.js

@@ -0,0 +1,201 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/theme/context.tsx
+
+// src/theme/defaults.ts
+var DEFAULT_BUTTON_VARIANTS = {
+  default: { classes: "bg-primary text-primary-foreground hover:bg-primary/90" },
+  secondary: { classes: "bg-secondary text-secondary-foreground hover:bg-secondary/80" },
+  outline: { classes: "border border-input bg-background hover:bg-accent hover:text-accent-foreground" },
+  ghost: { classes: "bg-transparent hover:bg-accent hover:text-accent-foreground" },
+  destructive: { classes: "bg-destructive text-destructive-foreground hover:bg-destructive/90" },
+  link: { classes: "text-primary underline-offset-4 hover:underline bg-transparent" }
+};
+var DEFAULT_CTA_BUTTON_VARIANTS = {
+  primary: { classes: "bg-primary text-primary-foreground hover:bg-primary/90" },
+  secondary: { classes: "bg-secondary text-secondary-foreground hover:bg-secondary/80" },
+  outline: { classes: "border border-input bg-background hover:bg-accent hover:text-accent-foreground" },
+  ghost: { classes: "bg-transparent hover:bg-accent hover:text-accent-foreground" },
+  link: { classes: "text-primary underline-offset-4 hover:underline bg-transparent" }
+};
+var DEFAULT_CTA_BACKGROUND_STYLES = {
+  default: "bg-muted",
+  dark: "bg-foreground text-background",
+  light: "bg-background"
+};
+var DEFAULT_COLOR_PRESETS = [
+  { hex: "#ffffff", label: "White" },
+  { hex: "#f9fafb", label: "Gray 50" },
+  { hex: "#f3f4f6", label: "Gray 100" },
+  { hex: "#1f2937", label: "Gray 800" },
+  { hex: "#111827", label: "Gray 900" },
+  { hex: "#000000", label: "Black" },
+  { hex: "#3b82f6", label: "Blue" },
+  { hex: "#10b981", label: "Green" },
+  { hex: "#f59e0b", label: "Amber" },
+  { hex: "#ef4444", label: "Red" }
+];
+var DEFAULT_FOCUS_RING = "focus:ring-ring";
+var DEFAULT_THEME = {
+  buttonVariants: DEFAULT_BUTTON_VARIANTS,
+  ctaButtonVariants: DEFAULT_CTA_BUTTON_VARIANTS,
+  ctaBackgroundStyles: DEFAULT_CTA_BACKGROUND_STYLES,
+  colorPresets: DEFAULT_COLOR_PRESETS,
+  focusRingColor: DEFAULT_FOCUS_RING
+};
+
+// src/theme/utils.ts
+function resolveTheme(config) {
+  if (!config) return DEFAULT_THEME;
+  return {
+    buttonVariants: mergeVariants(DEFAULT_BUTTON_VARIANTS, config.buttonVariants),
+    ctaButtonVariants: mergeVariants(DEFAULT_CTA_BUTTON_VARIANTS, config.ctaButtonVariants),
+    ctaBackgroundStyles: mergeBackgroundStyles(
+      DEFAULT_CTA_BACKGROUND_STYLES,
+      config.ctaBackgroundStyles
+    ),
+    colorPresets: resolveColorPresets(config),
+    focusRingColor: config.focusRingColor ?? DEFAULT_FOCUS_RING
+  };
+}
+function mergeVariants(defaults, overrides) {
+  if (!overrides) return defaults;
+  const result = { ...defaults };
+  for (const key of Object.keys(overrides)) {
+    const override = overrides[key];
+    if (override) {
+      result[key] = override;
+    }
+  }
+  return result;
+}
+function mergeBackgroundStyles(defaults, overrides) {
+  if (!overrides) return defaults;
+  return { ...defaults, ...overrides };
+}
+function resolveColorPresets(config) {
+  if (!config.colorPresets) {
+    return DEFAULT_COLOR_PRESETS;
+  }
+  if (config.extendColorPresets) {
+    return [...DEFAULT_COLOR_PRESETS, ...config.colorPresets];
+  }
+  return config.colorPresets;
+}
+function getVariantClasses(variants, variant, fallback = "default") {
+  const config = variants[variant];
+  if (config?.classes) {
+    return config.classes;
+  }
+  const fallbackConfig = variants[fallback];
+  return fallbackConfig?.classes ?? "";
+}
+function getBackgroundClasses(styles, style, fallback = "default") {
+  return styles[style] ?? styles[fallback] ?? "";
+}
+var ThemeContext = react.createContext(null);
+function ThemeProvider({ children, theme }) {
+  const resolvedTheme = react.useMemo(() => resolveTheme(theme), [theme]);
+  const value = react.useMemo(
+    () => ({
+      theme: resolvedTheme
+    }),
+    [resolvedTheme]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  const context = react.useContext(ThemeContext);
+  return context?.theme ?? DEFAULT_THEME;
+}
+function getDefaultTheme() {
+  return DEFAULT_THEME;
+}
+function useHasThemeProvider() {
+  const context = react.useContext(ThemeContext);
+  return context !== null;
+}
+
+// src/theme/example.ts
+var exampleTheme = {
+  // Button component variants
+  buttonVariants: {
+    default: {
+      classes: "bg-primary text-primary-foreground hover:bg-primary/90"
+    },
+    secondary: {
+      classes: "bg-secondary text-secondary-foreground hover:bg-secondary/80"
+    },
+    outline: {
+      classes: "border border-input bg-background hover:bg-accent hover:text-accent-foreground"
+    },
+    ghost: {
+      classes: "hover:bg-accent hover:text-accent-foreground"
+    },
+    destructive: {
+      classes: "bg-destructive text-destructive-foreground hover:bg-destructive/90"
+    },
+    link: {
+      classes: "text-primary underline-offset-4 hover:underline"
+    }
+  },
+  // CTA button variants
+  ctaButtonVariants: {
+    primary: {
+      classes: "bg-primary text-primary-foreground hover:bg-primary/90"
+    },
+    secondary: {
+      classes: "bg-secondary text-secondary-foreground hover:bg-secondary/80"
+    },
+    outline: {
+      classes: "border border-input bg-background hover:bg-accent hover:text-accent-foreground"
+    }
+  },
+  // CTA background styles
+  ctaBackgroundStyles: {
+    default: "bg-muted",
+    dark: "bg-primary text-primary-foreground",
+    light: "bg-background"
+  },
+  // Focus ring class
+  focusRingColor: "focus:ring-ring",
+  // Color picker presets - customize with your brand colors
+  colorPresets: [
+    { hex: "#ffffff", label: "White" },
+    { hex: "#f8fafc", label: "Slate 50" },
+    { hex: "#f1f5f9", label: "Slate 100" },
+    { hex: "#e2e8f0", label: "Slate 200" },
+    { hex: "#64748b", label: "Slate 500" },
+    { hex: "#334155", label: "Slate 700" },
+    { hex: "#1e293b", label: "Slate 800" },
+    { hex: "#0f172a", label: "Slate 900" },
+    { hex: "#000000", label: "Black" },
+    { hex: "#3b82f6", label: "Blue" },
+    { hex: "#10b981", label: "Green" },
+    { hex: "#f59e0b", label: "Amber" },
+    { hex: "#ef4444", label: "Red" }
+  ],
+  // Set to true to add your presets to defaults instead of replacing
+  extendColorPresets: false
+};
+
+exports.DEFAULT_BUTTON_VARIANTS = DEFAULT_BUTTON_VARIANTS;
+exports.DEFAULT_COLOR_PRESETS = DEFAULT_COLOR_PRESETS;
+exports.DEFAULT_CTA_BACKGROUND_STYLES = DEFAULT_CTA_BACKGROUND_STYLES;
+exports.DEFAULT_CTA_BUTTON_VARIANTS = DEFAULT_CTA_BUTTON_VARIANTS;
+exports.DEFAULT_FOCUS_RING = DEFAULT_FOCUS_RING;
+exports.DEFAULT_THEME = DEFAULT_THEME;
+exports.ThemeProvider = ThemeProvider;
+exports.exampleTheme = exampleTheme;
+exports.getBackgroundClasses = getBackgroundClasses;
+exports.getDefaultTheme = getDefaultTheme;
+exports.getVariantClasses = getVariantClasses;
+exports.resolveTheme = resolveTheme;
+exports.useHasThemeProvider = useHasThemeProvider;
+exports.useTheme = useTheme;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/theme/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/theme/defaults.ts","../../src/theme/utils.ts","../../src/theme/context.tsx","../../src/theme/example.ts"],"names":["createContext","useMemo","jsx","useContext"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Default Theme Values\n *\n * These defaults ensure backwards compatibility - components render\n * identically to before theming was introduced when no theme is provided.\n */\n\nimport type {\n  ButtonVariantStyles,\n  BackgroundStyles,\n  ColorPreset,\n  ResolvedTheme,\n} from './types'\n\n/**\n * Default button variant styles\n * Uses semantic Tailwind classes that map to CSS variables (--primary, --secondary, etc.)\n * This allows consuming apps to customize colors via their theme CSS variables.\n */\nexport const DEFAULT_BUTTON_VARIANTS: ButtonVariantStyles = {\n  default: { classes: 'bg-primary text-primary-foreground hover:bg-primary/90' },\n  secondary: { classes: 'bg-secondary text-secondary-foreground hover:bg-secondary/80' },\n  outline: { classes: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground' },\n  ghost: { classes: 'bg-transparent hover:bg-accent hover:text-accent-foreground' },\n  destructive: { classes: 'bg-destructive text-destructive-foreground hover:bg-destructive/90' },\n  link: { classes: 'text-primary underline-offset-4 hover:underline bg-transparent' },\n}\n\n/**\n * Default CTA button variant styles\n * Uses semantic Tailwind classes that map to CSS variables.\n */\nexport const DEFAULT_CTA_BUTTON_VARIANTS: ButtonVariantStyles = {\n  primary: { classes: 'bg-primary text-primary-foreground hover:bg-primary/90' },\n  secondary: { classes: 'bg-secondary text-secondary-foreground hover:bg-secondary/80' },\n  outline: { classes: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground' },\n  ghost: { classes: 'bg-transparent hover:bg-accent hover:text-accent-foreground' },\n  link: { classes: 'text-primary underline-offset-4 hover:underline bg-transparent' },\n}\n\n/**\n * Default CTA background styles\n * Uses semantic Tailwind classes that map to CSS variables.\n */\nexport const DEFAULT_CTA_BACKGROUND_STYLES: BackgroundStyles = {\n  default: 'bg-muted',\n  dark: 'bg-foreground text-background',\n  light: 'bg-background',\n}\n\n/**\n * Default color picker presets\n * Matches DEFAULT_PRESETS from ColorPickerField.tsx\n */\nexport const DEFAULT_COLOR_PRESETS: ColorPreset[] = [\n  { hex: '#ffffff', label: 'White' },\n  { hex: '#f9fafb', label: 'Gray 50' },\n  { hex: '#f3f4f6', label: 'Gray 100' },\n  { hex: '#1f2937', label: 'Gray 800' },\n  { hex: '#111827', label: 'Gray 900' },\n  { hex: '#000000', label: 'Black' },\n  { hex: '#3b82f6', label: 'Blue' },\n  { hex: '#10b981', label: 'Green' },\n  { hex: '#f59e0b', label: 'Amber' },\n  { hex: '#ef4444', label: 'Red' },\n]\n\n/**\n * Default focus ring color class\n * Uses semantic ring color from CSS variables\n */\nexport const DEFAULT_FOCUS_RING = 'focus:ring-ring'\n\n/**\n * Complete default theme\n * Used when no ThemeProvider is present or no theme config is provided\n */\nexport const DEFAULT_THEME: ResolvedTheme = {\n  buttonVariants: DEFAULT_BUTTON_VARIANTS,\n  ctaButtonVariants: DEFAULT_CTA_BUTTON_VARIANTS,\n  ctaBackgroundStyles: DEFAULT_CTA_BACKGROUND_STYLES,\n  colorPresets: DEFAULT_COLOR_PRESETS,\n  focusRingColor: DEFAULT_FOCUS_RING,\n}\n","/**\n * Theme Resolution Utilities\n *\n * Functions for merging user-provided theme config with defaults\n * and safely accessing theme values.\n */\n\nimport type {\n  ThemeConfig,\n  ResolvedTheme,\n  ButtonVariantStyles,\n  BackgroundStyles,\n} from './types'\nimport {\n  DEFAULT_BUTTON_VARIANTS,\n  DEFAULT_CTA_BUTTON_VARIANTS,\n  DEFAULT_CTA_BACKGROUND_STYLES,\n  DEFAULT_COLOR_PRESETS,\n  DEFAULT_FOCUS_RING,\n  DEFAULT_THEME,\n} from './defaults'\n\n/**\n * Merges user-provided theme config with defaults to create a fully resolved theme\n */\nexport function resolveTheme(config?: ThemeConfig): ResolvedTheme {\n  if (!config) return DEFAULT_THEME\n\n  return {\n    buttonVariants: mergeVariants(DEFAULT_BUTTON_VARIANTS, config.buttonVariants),\n    ctaButtonVariants: mergeVariants(DEFAULT_CTA_BUTTON_VARIANTS, config.ctaButtonVariants),\n    ctaBackgroundStyles: mergeBackgroundStyles(\n      DEFAULT_CTA_BACKGROUND_STYLES,\n      config.ctaBackgroundStyles\n    ),\n    colorPresets: resolveColorPresets(config),\n    focusRingColor: config.focusRingColor ?? DEFAULT_FOCUS_RING,\n  }\n}\n\n/**\n * Merges variant overrides with defaults\n */\nfunction mergeVariants(\n  defaults: ButtonVariantStyles,\n  overrides?: Partial<ButtonVariantStyles>\n): ButtonVariantStyles {\n  if (!overrides) return defaults\n\n  const result: ButtonVariantStyles = { ...defaults }\n  for (const key of Object.keys(overrides)) {\n    const override = overrides[key]\n    if (override) {\n      result[key] = override\n    }\n  }\n  return result\n}\n\n/**\n * Merges background style overrides with defaults\n */\nfunction mergeBackgroundStyles(\n  defaults: BackgroundStyles,\n  overrides?: Partial<BackgroundStyles>\n): BackgroundStyles {\n  if (!overrides) return defaults\n  return { ...defaults, ...overrides }\n}\n\n/**\n * Resolves color presets based on config\n */\nfunction resolveColorPresets(config: ThemeConfig) {\n  if (!config.colorPresets) {\n    return DEFAULT_COLOR_PRESETS\n  }\n\n  if (config.extendColorPresets) {\n    return [...DEFAULT_COLOR_PRESETS, ...config.colorPresets]\n  }\n\n  return config.colorPresets\n}\n\n/**\n * Safely gets variant classes from a variant styles object\n *\n * @param variants - The button variant styles object\n * @param variant - The variant key to look up\n * @param fallback - Fallback variant key if the requested variant doesn't exist\n * @returns The CSS classes string for the variant\n */\nexport function getVariantClasses(\n  variants: ButtonVariantStyles,\n  variant: string,\n  fallback = 'default'\n): string {\n  const config = variants[variant]\n  if (config?.classes) {\n    return config.classes\n  }\n\n  const fallbackConfig = variants[fallback]\n  return fallbackConfig?.classes ?? ''\n}\n\n/**\n * Safely gets background style classes\n *\n * @param styles - The background styles object\n * @param style - The style key to look up\n * @param fallback - Fallback style key if the requested style doesn't exist\n * @returns The CSS classes string for the background\n */\nexport function getBackgroundClasses(\n  styles: BackgroundStyles,\n  style: string,\n  fallback = 'default'\n): string {\n  return styles[style] ?? styles[fallback] ?? ''\n}\n","'use client'\n\n/**\n * Theme Context\n *\n * React context for distributing theme configuration to Puck components.\n * The useTheme() hook returns defaults when no provider is present,\n * ensuring backwards compatibility.\n */\n\nimport { createContext, useContext, useMemo, type ReactNode } from 'react'\nimport type { ThemeConfig, ThemeContextValue, ResolvedTheme } from './types'\nimport { DEFAULT_THEME } from './defaults'\nimport { resolveTheme } from './utils'\n\nconst ThemeContext = createContext<ThemeContextValue | null>(null)\n\nexport interface ThemeProviderProps {\n  children: ReactNode\n  /** Theme configuration to apply */\n  theme?: ThemeConfig\n}\n\n/**\n * Provides theme configuration to descendant Puck components\n *\n * @example\n * ```tsx\n * <ThemeProvider theme={{\n *   buttonVariants: {\n *     default: { classes: 'bg-primary text-white hover:bg-primary/90' }\n *   }\n * }}>\n *   <PageRenderer data={data} />\n * </ThemeProvider>\n * ```\n */\nexport function ThemeProvider({ children, theme }: ThemeProviderProps) {\n  const resolvedTheme = useMemo(() => resolveTheme(theme), [theme])\n\n  const value = useMemo<ThemeContextValue>(\n    () => ({\n      theme: resolvedTheme,\n    }),\n    [resolvedTheme]\n  )\n\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>\n}\n\n/**\n * Hook to access the current theme\n *\n * Returns DEFAULT_THEME if no ThemeProvider is present,\n * ensuring components work standalone for backwards compatibility.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const theme = useTheme()\n *   const buttonClasses = getVariantClasses(theme.buttonVariants, 'primary')\n *   return <button className={buttonClasses}>Click me</button>\n * }\n * ```\n */\nexport function useTheme(): ResolvedTheme {\n  const context = useContext(ThemeContext)\n  // Return defaults if no provider - ensures backwards compatibility\n  return context?.theme ?? DEFAULT_THEME\n}\n\n/**\n * Gets the default theme for server components\n *\n * Use this when you need theme values in a server component\n * where hooks cannot be used.\n */\nexport function getDefaultTheme(): ResolvedTheme {\n  return DEFAULT_THEME\n}\n\n/**\n * Hook to check if a ThemeProvider is present\n *\n * Useful for conditional logic based on whether theming is configured.\n */\nexport function useHasThemeProvider(): boolean {\n  const context = useContext(ThemeContext)\n  return context !== null\n}\n","/**\n * Example Theme Configuration\n *\n * Copy this file to your project and customize it to match your design system.\n *\n * Usage:\n * 1. Copy this file to your project (e.g., src/lib/puck-theme.ts)\n * 2. Customize the values to match your CSS variables/design tokens\n * 3. Import and pass to PageRenderer or PuckEditor:\n *\n * ```tsx\n * import { puckTheme } from '@/lib/puck-theme'\n *\n * <PageRenderer data={data} config={config} theme={puckTheme} />\n * ```\n */\n\nimport type { ThemeConfig } from './types'\n\n/**\n * Example theme using shadcn/ui CSS variables\n *\n * This example assumes you have CSS variables like:\n * --primary, --primary-foreground\n * --secondary, --secondary-foreground\n * --accent, --accent-foreground\n * --muted, --muted-foreground\n * --destructive, --destructive-foreground\n * --ring (for focus rings)\n */\nexport const exampleTheme: ThemeConfig = {\n  // Button component variants\n  buttonVariants: {\n    default: {\n      classes: 'bg-primary text-primary-foreground hover:bg-primary/90',\n    },\n    secondary: {\n      classes: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n    },\n    outline: {\n      classes: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n    },\n    ghost: {\n      classes: 'hover:bg-accent hover:text-accent-foreground',\n    },\n    destructive: {\n      classes: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n    },\n    link: {\n      classes: 'text-primary underline-offset-4 hover:underline',\n    },\n  },\n\n  // CTA button variants\n  ctaButtonVariants: {\n    primary: {\n      classes: 'bg-primary text-primary-foreground hover:bg-primary/90',\n    },\n    secondary: {\n      classes: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n    },\n    outline: {\n      classes: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n    },\n  },\n\n  // CTA background styles\n  ctaBackgroundStyles: {\n    default: 'bg-muted',\n    dark: 'bg-primary text-primary-foreground',\n    light: 'bg-background',\n  },\n\n  // Focus ring class\n  focusRingColor: 'focus:ring-ring',\n\n  // Color picker presets - customize with your brand colors\n  colorPresets: [\n    { hex: '#ffffff', label: 'White' },\n    { hex: '#f8fafc', label: 'Slate 50' },\n    { hex: '#f1f5f9', label: 'Slate 100' },\n    { hex: '#e2e8f0', label: 'Slate 200' },\n    { hex: '#64748b', label: 'Slate 500' },\n    { hex: '#334155', label: 'Slate 700' },\n    { hex: '#1e293b', label: 'Slate 800' },\n    { hex: '#0f172a', label: 'Slate 900' },\n    { hex: '#000000', label: 'Black' },\n    { hex: '#3b82f6', label: 'Blue' },\n    { hex: '#10b981', label: 'Green' },\n    { hex: '#f59e0b', label: 'Amber' },\n    { hex: '#ef4444', label: 'Red' },\n  ],\n\n  // Set to true to add your presets to defaults instead of replacing\n  extendColorPresets: false,\n}\n"]}

package/dist/theme/index.mjs

@@ -0,0 +1,186 @@
+"use client";
+import { createContext, useMemo, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/theme/context.tsx
+
+// src/theme/defaults.ts
+var DEFAULT_BUTTON_VARIANTS = {
+  default: { classes: "bg-primary text-primary-foreground hover:bg-primary/90" },
+  secondary: { classes: "bg-secondary text-secondary-foreground hover:bg-secondary/80" },
+  outline: { classes: "border border-input bg-background hover:bg-accent hover:text-accent-foreground" },
+  ghost: { classes: "bg-transparent hover:bg-accent hover:text-accent-foreground" },
+  destructive: { classes: "bg-destructive text-destructive-foreground hover:bg-destructive/90" },
+  link: { classes: "text-primary underline-offset-4 hover:underline bg-transparent" }
+};
+var DEFAULT_CTA_BUTTON_VARIANTS = {
+  primary: { classes: "bg-primary text-primary-foreground hover:bg-primary/90" },
+  secondary: { classes: "bg-secondary text-secondary-foreground hover:bg-secondary/80" },
+  outline: { classes: "border border-input bg-background hover:bg-accent hover:text-accent-foreground" },
+  ghost: { classes: "bg-transparent hover:bg-accent hover:text-accent-foreground" },
+  link: { classes: "text-primary underline-offset-4 hover:underline bg-transparent" }
+};
+var DEFAULT_CTA_BACKGROUND_STYLES = {
+  default: "bg-muted",
+  dark: "bg-foreground text-background",
+  light: "bg-background"
+};
+var DEFAULT_COLOR_PRESETS = [
+  { hex: "#ffffff", label: "White" },
+  { hex: "#f9fafb", label: "Gray 50" },
+  { hex: "#f3f4f6", label: "Gray 100" },
+  { hex: "#1f2937", label: "Gray 800" },
+  { hex: "#111827", label: "Gray 900" },
+  { hex: "#000000", label: "Black" },
+  { hex: "#3b82f6", label: "Blue" },
+  { hex: "#10b981", label: "Green" },
+  { hex: "#f59e0b", label: "Amber" },
+  { hex: "#ef4444", label: "Red" }
+];
+var DEFAULT_FOCUS_RING = "focus:ring-ring";
+var DEFAULT_THEME = {
+  buttonVariants: DEFAULT_BUTTON_VARIANTS,
+  ctaButtonVariants: DEFAULT_CTA_BUTTON_VARIANTS,
+  ctaBackgroundStyles: DEFAULT_CTA_BACKGROUND_STYLES,
+  colorPresets: DEFAULT_COLOR_PRESETS,
+  focusRingColor: DEFAULT_FOCUS_RING
+};
+
+// src/theme/utils.ts
+function resolveTheme(config) {
+  if (!config) return DEFAULT_THEME;
+  return {
+    buttonVariants: mergeVariants(DEFAULT_BUTTON_VARIANTS, config.buttonVariants),
+    ctaButtonVariants: mergeVariants(DEFAULT_CTA_BUTTON_VARIANTS, config.ctaButtonVariants),
+    ctaBackgroundStyles: mergeBackgroundStyles(
+      DEFAULT_CTA_BACKGROUND_STYLES,
+      config.ctaBackgroundStyles
+    ),
+    colorPresets: resolveColorPresets(config),
+    focusRingColor: config.focusRingColor ?? DEFAULT_FOCUS_RING
+  };
+}
+function mergeVariants(defaults, overrides) {
+  if (!overrides) return defaults;
+  const result = { ...defaults };
+  for (const key of Object.keys(overrides)) {
+    const override = overrides[key];
+    if (override) {
+      result[key] = override;
+    }
+  }
+  return result;
+}
+function mergeBackgroundStyles(defaults, overrides) {
+  if (!overrides) return defaults;
+  return { ...defaults, ...overrides };
+}
+function resolveColorPresets(config) {
+  if (!config.colorPresets) {
+    return DEFAULT_COLOR_PRESETS;
+  }
+  if (config.extendColorPresets) {
+    return [...DEFAULT_COLOR_PRESETS, ...config.colorPresets];
+  }
+  return config.colorPresets;
+}
+function getVariantClasses(variants, variant, fallback = "default") {
+  const config = variants[variant];
+  if (config?.classes) {
+    return config.classes;
+  }
+  const fallbackConfig = variants[fallback];
+  return fallbackConfig?.classes ?? "";
+}
+function getBackgroundClasses(styles, style, fallback = "default") {
+  return styles[style] ?? styles[fallback] ?? "";
+}
+var ThemeContext = createContext(null);
+function ThemeProvider({ children, theme }) {
+  const resolvedTheme = useMemo(() => resolveTheme(theme), [theme]);
+  const value = useMemo(
+    () => ({
+      theme: resolvedTheme
+    }),
+    [resolvedTheme]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  const context = useContext(ThemeContext);
+  return context?.theme ?? DEFAULT_THEME;
+}
+function getDefaultTheme() {
+  return DEFAULT_THEME;
+}
+function useHasThemeProvider() {
+  const context = useContext(ThemeContext);
+  return context !== null;
+}
+
+// src/theme/example.ts
+var exampleTheme = {
+  // Button component variants
+  buttonVariants: {
+    default: {
+      classes: "bg-primary text-primary-foreground hover:bg-primary/90"
+    },
+    secondary: {
+      classes: "bg-secondary text-secondary-foreground hover:bg-secondary/80"
+    },
+    outline: {
+      classes: "border border-input bg-background hover:bg-accent hover:text-accent-foreground"
+    },
+    ghost: {
+      classes: "hover:bg-accent hover:text-accent-foreground"
+    },
+    destructive: {
+      classes: "bg-destructive text-destructive-foreground hover:bg-destructive/90"
+    },
+    link: {
+      classes: "text-primary underline-offset-4 hover:underline"
+    }
+  },
+  // CTA button variants
+  ctaButtonVariants: {
+    primary: {
+      classes: "bg-primary text-primary-foreground hover:bg-primary/90"
+    },
+    secondary: {
+      classes: "bg-secondary text-secondary-foreground hover:bg-secondary/80"
+    },
+    outline: {
+      classes: "border border-input bg-background hover:bg-accent hover:text-accent-foreground"
+    }
+  },
+  // CTA background styles
+  ctaBackgroundStyles: {
+    default: "bg-muted",
+    dark: "bg-primary text-primary-foreground",
+    light: "bg-background"
+  },
+  // Focus ring class
+  focusRingColor: "focus:ring-ring",
+  // Color picker presets - customize with your brand colors
+  colorPresets: [
+    { hex: "#ffffff", label: "White" },
+    { hex: "#f8fafc", label: "Slate 50" },
+    { hex: "#f1f5f9", label: "Slate 100" },
+    { hex: "#e2e8f0", label: "Slate 200" },
+    { hex: "#64748b", label: "Slate 500" },
+    { hex: "#334155", label: "Slate 700" },
+    { hex: "#1e293b", label: "Slate 800" },
+    { hex: "#0f172a", label: "Slate 900" },
+    { hex: "#000000", label: "Black" },
+    { hex: "#3b82f6", label: "Blue" },
+    { hex: "#10b981", label: "Green" },
+    { hex: "#f59e0b", label: "Amber" },
+    { hex: "#ef4444", label: "Red" }
+  ],
+  // Set to true to add your presets to defaults instead of replacing
+  extendColorPresets: false
+};
+
+export { DEFAULT_BUTTON_VARIANTS, DEFAULT_COLOR_PRESETS, DEFAULT_CTA_BACKGROUND_STYLES, DEFAULT_CTA_BUTTON_VARIANTS, DEFAULT_FOCUS_RING, DEFAULT_THEME, ThemeProvider, exampleTheme, getBackgroundClasses, getDefaultTheme, getVariantClasses, resolveTheme, useHasThemeProvider, useTheme };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/theme/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/theme/defaults.ts","../../src/theme/utils.ts","../../src/theme/context.tsx","../../src/theme/example.ts"],"names":[],"mappings":"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","file":"index.mjs","sourcesContent":["/**\n * Default Theme Values\n *\n * These defaults ensure backwards compatibility - components render\n * identically to before theming was introduced when no theme is provided.\n */\n\nimport type {\n  ButtonVariantStyles,\n  BackgroundStyles,\n  ColorPreset,\n  ResolvedTheme,\n} from './types'\n\n/**\n * Default button variant styles\n * Uses semantic Tailwind classes that map to CSS variables (--primary, --secondary, etc.)\n * This allows consuming apps to customize colors via their theme CSS variables.\n */\nexport const DEFAULT_BUTTON_VARIANTS: ButtonVariantStyles = {\n  default: { classes: 'bg-primary text-primary-foreground hover:bg-primary/90' },\n  secondary: { classes: 'bg-secondary text-secondary-foreground hover:bg-secondary/80' },\n  outline: { classes: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground' },\n  ghost: { classes: 'bg-transparent hover:bg-accent hover:text-accent-foreground' },\n  destructive: { classes: 'bg-destructive text-destructive-foreground hover:bg-destructive/90' },\n  link: { classes: 'text-primary underline-offset-4 hover:underline bg-transparent' },\n}\n\n/**\n * Default CTA button variant styles\n * Uses semantic Tailwind classes that map to CSS variables.\n */\nexport const DEFAULT_CTA_BUTTON_VARIANTS: ButtonVariantStyles = {\n  primary: { classes: 'bg-primary text-primary-foreground hover:bg-primary/90' },\n  secondary: { classes: 'bg-secondary text-secondary-foreground hover:bg-secondary/80' },\n  outline: { classes: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground' },\n  ghost: { classes: 'bg-transparent hover:bg-accent hover:text-accent-foreground' },\n  link: { classes: 'text-primary underline-offset-4 hover:underline bg-transparent' },\n}\n\n/**\n * Default CTA background styles\n * Uses semantic Tailwind classes that map to CSS variables.\n */\nexport const DEFAULT_CTA_BACKGROUND_STYLES: BackgroundStyles = {\n  default: 'bg-muted',\n  dark: 'bg-foreground text-background',\n  light: 'bg-background',\n}\n\n/**\n * Default color picker presets\n * Matches DEFAULT_PRESETS from ColorPickerField.tsx\n */\nexport const DEFAULT_COLOR_PRESETS: ColorPreset[] = [\n  { hex: '#ffffff', label: 'White' },\n  { hex: '#f9fafb', label: 'Gray 50' },\n  { hex: '#f3f4f6', label: 'Gray 100' },\n  { hex: '#1f2937', label: 'Gray 800' },\n  { hex: '#111827', label: 'Gray 900' },\n  { hex: '#000000', label: 'Black' },\n  { hex: '#3b82f6', label: 'Blue' },\n  { hex: '#10b981', label: 'Green' },\n  { hex: '#f59e0b', label: 'Amber' },\n  { hex: '#ef4444', label: 'Red' },\n]\n\n/**\n * Default focus ring color class\n * Uses semantic ring color from CSS variables\n */\nexport const DEFAULT_FOCUS_RING = 'focus:ring-ring'\n\n/**\n * Complete default theme\n * Used when no ThemeProvider is present or no theme config is provided\n */\nexport const DEFAULT_THEME: ResolvedTheme = {\n  buttonVariants: DEFAULT_BUTTON_VARIANTS,\n  ctaButtonVariants: DEFAULT_CTA_BUTTON_VARIANTS,\n  ctaBackgroundStyles: DEFAULT_CTA_BACKGROUND_STYLES,\n  colorPresets: DEFAULT_COLOR_PRESETS,\n  focusRingColor: DEFAULT_FOCUS_RING,\n}\n","/**\n * Theme Resolution Utilities\n *\n * Functions for merging user-provided theme config with defaults\n * and safely accessing theme values.\n */\n\nimport type {\n  ThemeConfig,\n  ResolvedTheme,\n  ButtonVariantStyles,\n  BackgroundStyles,\n} from './types'\nimport {\n  DEFAULT_BUTTON_VARIANTS,\n  DEFAULT_CTA_BUTTON_VARIANTS,\n  DEFAULT_CTA_BACKGROUND_STYLES,\n  DEFAULT_COLOR_PRESETS,\n  DEFAULT_FOCUS_RING,\n  DEFAULT_THEME,\n} from './defaults'\n\n/**\n * Merges user-provided theme config with defaults to create a fully resolved theme\n */\nexport function resolveTheme(config?: ThemeConfig): ResolvedTheme {\n  if (!config) return DEFAULT_THEME\n\n  return {\n    buttonVariants: mergeVariants(DEFAULT_BUTTON_VARIANTS, config.buttonVariants),\n    ctaButtonVariants: mergeVariants(DEFAULT_CTA_BUTTON_VARIANTS, config.ctaButtonVariants),\n    ctaBackgroundStyles: mergeBackgroundStyles(\n      DEFAULT_CTA_BACKGROUND_STYLES,\n      config.ctaBackgroundStyles\n    ),\n    colorPresets: resolveColorPresets(config),\n    focusRingColor: config.focusRingColor ?? DEFAULT_FOCUS_RING,\n  }\n}\n\n/**\n * Merges variant overrides with defaults\n */\nfunction mergeVariants(\n  defaults: ButtonVariantStyles,\n  overrides?: Partial<ButtonVariantStyles>\n): ButtonVariantStyles {\n  if (!overrides) return defaults\n\n  const result: ButtonVariantStyles = { ...defaults }\n  for (const key of Object.keys(overrides)) {\n    const override = overrides[key]\n    if (override) {\n      result[key] = override\n    }\n  }\n  return result\n}\n\n/**\n * Merges background style overrides with defaults\n */\nfunction mergeBackgroundStyles(\n  defaults: BackgroundStyles,\n  overrides?: Partial<BackgroundStyles>\n): BackgroundStyles {\n  if (!overrides) return defaults\n  return { ...defaults, ...overrides }\n}\n\n/**\n * Resolves color presets based on config\n */\nfunction resolveColorPresets(config: ThemeConfig) {\n  if (!config.colorPresets) {\n    return DEFAULT_COLOR_PRESETS\n  }\n\n  if (config.extendColorPresets) {\n    return [...DEFAULT_COLOR_PRESETS, ...config.colorPresets]\n  }\n\n  return config.colorPresets\n}\n\n/**\n * Safely gets variant classes from a variant styles object\n *\n * @param variants - The button variant styles object\n * @param variant - The variant key to look up\n * @param fallback - Fallback variant key if the requested variant doesn't exist\n * @returns The CSS classes string for the variant\n */\nexport function getVariantClasses(\n  variants: ButtonVariantStyles,\n  variant: string,\n  fallback = 'default'\n): string {\n  const config = variants[variant]\n  if (config?.classes) {\n    return config.classes\n  }\n\n  const fallbackConfig = variants[fallback]\n  return fallbackConfig?.classes ?? ''\n}\n\n/**\n * Safely gets background style classes\n *\n * @param styles - The background styles object\n * @param style - The style key to look up\n * @param fallback - Fallback style key if the requested style doesn't exist\n * @returns The CSS classes string for the background\n */\nexport function getBackgroundClasses(\n  styles: BackgroundStyles,\n  style: string,\n  fallback = 'default'\n): string {\n  return styles[style] ?? styles[fallback] ?? ''\n}\n","'use client'\n\n/**\n * Theme Context\n *\n * React context for distributing theme configuration to Puck components.\n * The useTheme() hook returns defaults when no provider is present,\n * ensuring backwards compatibility.\n */\n\nimport { createContext, useContext, useMemo, type ReactNode } from 'react'\nimport type { ThemeConfig, ThemeContextValue, ResolvedTheme } from './types'\nimport { DEFAULT_THEME } from './defaults'\nimport { resolveTheme } from './utils'\n\nconst ThemeContext = createContext<ThemeContextValue | null>(null)\n\nexport interface ThemeProviderProps {\n  children: ReactNode\n  /** Theme configuration to apply */\n  theme?: ThemeConfig\n}\n\n/**\n * Provides theme configuration to descendant Puck components\n *\n * @example\n * ```tsx\n * <ThemeProvider theme={{\n *   buttonVariants: {\n *     default: { classes: 'bg-primary text-white hover:bg-primary/90' }\n *   }\n * }}>\n *   <PageRenderer data={data} />\n * </ThemeProvider>\n * ```\n */\nexport function ThemeProvider({ children, theme }: ThemeProviderProps) {\n  const resolvedTheme = useMemo(() => resolveTheme(theme), [theme])\n\n  const value = useMemo<ThemeContextValue>(\n    () => ({\n      theme: resolvedTheme,\n    }),\n    [resolvedTheme]\n  )\n\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>\n}\n\n/**\n * Hook to access the current theme\n *\n * Returns DEFAULT_THEME if no ThemeProvider is present,\n * ensuring components work standalone for backwards compatibility.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const theme = useTheme()\n *   const buttonClasses = getVariantClasses(theme.buttonVariants, 'primary')\n *   return <button className={buttonClasses}>Click me</button>\n * }\n * ```\n */\nexport function useTheme(): ResolvedTheme {\n  const context = useContext(ThemeContext)\n  // Return defaults if no provider - ensures backwards compatibility\n  return context?.theme ?? DEFAULT_THEME\n}\n\n/**\n * Gets the default theme for server components\n *\n * Use this when you need theme values in a server component\n * where hooks cannot be used.\n */\nexport function getDefaultTheme(): ResolvedTheme {\n  return DEFAULT_THEME\n}\n\n/**\n * Hook to check if a ThemeProvider is present\n *\n * Useful for conditional logic based on whether theming is configured.\n */\nexport function useHasThemeProvider(): boolean {\n  const context = useContext(ThemeContext)\n  return context !== null\n}\n","/**\n * Example Theme Configuration\n *\n * Copy this file to your project and customize it to match your design system.\n *\n * Usage:\n * 1. Copy this file to your project (e.g., src/lib/puck-theme.ts)\n * 2. Customize the values to match your CSS variables/design tokens\n * 3. Import and pass to PageRenderer or PuckEditor:\n *\n * ```tsx\n * import { puckTheme } from '@/lib/puck-theme'\n *\n * <PageRenderer data={data} config={config} theme={puckTheme} />\n * ```\n */\n\nimport type { ThemeConfig } from './types'\n\n/**\n * Example theme using shadcn/ui CSS variables\n *\n * This example assumes you have CSS variables like:\n * --primary, --primary-foreground\n * --secondary, --secondary-foreground\n * --accent, --accent-foreground\n * --muted, --muted-foreground\n * --destructive, --destructive-foreground\n * --ring (for focus rings)\n */\nexport const exampleTheme: ThemeConfig = {\n  // Button component variants\n  buttonVariants: {\n    default: {\n      classes: 'bg-primary text-primary-foreground hover:bg-primary/90',\n    },\n    secondary: {\n      classes: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n    },\n    outline: {\n      classes: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n    },\n    ghost: {\n      classes: 'hover:bg-accent hover:text-accent-foreground',\n    },\n    destructive: {\n      classes: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n    },\n    link: {\n      classes: 'text-primary underline-offset-4 hover:underline',\n    },\n  },\n\n  // CTA button variants\n  ctaButtonVariants: {\n    primary: {\n      classes: 'bg-primary text-primary-foreground hover:bg-primary/90',\n    },\n    secondary: {\n      classes: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n    },\n    outline: {\n      classes: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n    },\n  },\n\n  // CTA background styles\n  ctaBackgroundStyles: {\n    default: 'bg-muted',\n    dark: 'bg-primary text-primary-foreground',\n    light: 'bg-background',\n  },\n\n  // Focus ring class\n  focusRingColor: 'focus:ring-ring',\n\n  // Color picker presets - customize with your brand colors\n  colorPresets: [\n    { hex: '#ffffff', label: 'White' },\n    { hex: '#f8fafc', label: 'Slate 50' },\n    { hex: '#f1f5f9', label: 'Slate 100' },\n    { hex: '#e2e8f0', label: 'Slate 200' },\n    { hex: '#64748b', label: 'Slate 500' },\n    { hex: '#334155', label: 'Slate 700' },\n    { hex: '#1e293b', label: 'Slate 800' },\n    { hex: '#0f172a', label: 'Slate 900' },\n    { hex: '#000000', label: 'Black' },\n    { hex: '#3b82f6', label: 'Blue' },\n    { hex: '#10b981', label: 'Green' },\n    { hex: '#f59e0b', label: 'Amber' },\n    { hex: '#ef4444', label: 'Red' },\n  ],\n\n  // Set to true to add your presets to defaults instead of replacing\n  extendColorPresets: false,\n}\n"]}