@kilivi/payloadcms-theme-management 0.1.6 → 0.1.8

package/dist/fields/RadiusField.jsx

@@ -1,123 +0,0 @@
-'use client';
-import { useField } from '@payloadcms/ui';
-import { useMemo } from 'react';
-import { borderRadiusPresets } from '@/providers/Theme/themeConfig';
-export default function RadiusField({ field, ...props }) {
-    const { value, setValue } = useField({ path: props.path });
-    const label = typeof field.label === 'string' ? field.label : '';
-    const radiusOptions = useMemo(() => {
-        const entries = Object.entries(borderRadiusPresets);
-        return entries.map(([key, preset]) => ({
-            key,
-            label: preset.label,
-            css: preset.css,
-        }));
-    }, []);
-    const fallbackKey = radiusOptions[2]?.key ?? radiusOptions[0]?.key ?? 'medium';
-    const currentKey = typeof value === 'string' && value in borderRadiusPresets
-        ? value
-        : fallbackKey;
-    const description = typeof field.admin?.description === 'string'
-        ? field.admin.description
-        : field.admin?.description?.en || field.admin?.description?.cs || null;
-    return (<div className="field-type">
-      <label className="field-label" htmlFor={props.path}>
-        {label}
-        {field.required && <span className="required">*</span>}
-      </label>
-
-      {description && (<p style={{
-                marginTop: '4px',
-                fontSize: '12px',
-                lineHeight: 1.5,
-                color: 'var(--theme-elevation-600)',
-            }}>
-          {description}
-        </p>)}
-
-      <div style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))',
-            gap: '16px',
-            marginTop: '16px',
-        }}>
-  {radiusOptions.map((option) => {
-            const isSelected = option.key === currentKey;
-            const cardRadius = option.css['--radius-large'] ??
-                option.css['--radius-default'] ??
-                option.css['--radius-medium'];
-            const chipRadius = option.css['--radius-default'] ?? option.css['--radius-small'];
-            const pillRadius = option.css['--radius-xl'] ?? option.css['--radius-large'] ?? '999px';
-            return (<button key={option.key} type="button" onClick={() => setValue(option.key)} aria-pressed={isSelected} style={{
-                    border: isSelected
-                        ? '2px solid var(--theme-success-500)'
-                        : '1px solid var(--theme-elevation-150)',
-                    borderRadius: '14px',
-                    backgroundColor: 'var(--theme-elevation-25)',
-                    padding: '16px',
-                    display: 'grid',
-                    gap: '10px',
-                    textAlign: 'left',
-                    cursor: 'pointer',
-                    transition: 'border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease',
-                    boxShadow: isSelected
-                        ? '0 10px 20px rgba(34, 197, 94, 0.18)'
-                        : '0 6px 18px rgba(15, 23, 42, 0.08)',
-                    transform: isSelected ? 'translateY(-2px)' : 'translateY(0)',
-                }}>
-              <div style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                    fontWeight: 600,
-                    fontSize: '13px',
-                    color: 'var(--theme-elevation-800)',
-                }}>
-                <span>{option.label}</span>
-                  <span style={{ fontSize: '11px', opacity: 0.7 }}>{option.key}</span>
-              </div>
-
-              <div style={{
-                    display: 'grid',
-                    gap: '10px',
-                }}>
-                <div style={{
-                    display: 'flex',
-                    gap: '8px',
-                    alignItems: 'center',
-                }}>
-                  <div style={{
-                    width: '50px',
-                    height: '34px',
-                    backgroundColor: 'var(--theme-elevation-100)',
-                    border: '1px solid var(--theme-elevation-200)',
-                    borderRadius: cardRadius ?? '0',
-                }}/>
-                  <div style={{
-                    flex: 1,
-                    height: '14px',
-                    backgroundColor: 'var(--theme-primary-500)',
-                    borderRadius: pillRadius,
-                }}/>
-                </div>
-
-                <div style={{
-                    display: 'flex',
-                    gap: '6px',
-                    flexWrap: 'wrap',
-                    fontSize: '11px',
-                    color: 'var(--theme-elevation-600)',
-                }}>
-                  <span>Card {cardRadius ?? '—'}</span>
-                  <span>Chip {chipRadius ?? '—'}</span>
-                  <span>Pill {pillRadius}</span>
-                </div>
-              </div>
-            </button>);
-        })}
-      </div>
-
-  <input type="hidden" id={props.path} value={currentKey} readOnly/>
-    </div>);
-}
-//# sourceMappingURL=RadiusField.jsx.map

package/dist/fields/RadiusField.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"RadiusField.jsx","sourceRoot":"","sources":["../../src/fields/RadiusField.tsx"],"names":[],"mappings":"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"}

package/dist/fields/ThemeColorPickerField.jsx

@@ -1,110 +0,0 @@
-'use client';
-import { useField, useFormFields } from '@payloadcms/ui';
-import { useEffect, useMemo, useState } from 'react';
-import './ThemeColorPickerField.css';
-function resolveLocalizedValue(value, fallback) {
-    if (typeof value === 'string') {
-        return value;
-    }
-    if (typeof value === 'object' && value !== null) {
-        const localized = value;
-        const resolved = localized.en ?? localized.cs ?? localized[''];
-        if (typeof resolved === 'string') {
-            return resolved;
-        }
-    }
-    return fallback;
-}
-const ThemeColorPickerField = ({ field, path }) => {
-    const { value, setValue } = useField({ path });
-    const [localValue, setLocalValue] = useState(value || '');
-    const allFields = useFormFields(([fields]) => fields);
-    const mode = path.includes('lightMode') ? 'lightMode' : 'darkMode';
-    const modePrefix = `themeConfiguration.${mode}`;
-    useEffect(() => {
-        setLocalValue(value || '');
-    }, [value]);
-    const colorValues = useMemo(() => {
-        if (!allFields) {
-            return {};
-        }
-        const names = [
-            'background',
-            'foreground',
-            'card',
-            'cardForeground',
-            'popover',
-            'popoverForeground',
-            'primary',
-            'primaryForeground',
-            'secondary',
-            'secondaryForeground',
-            'muted',
-            'mutedForeground',
-            'accent',
-            'accentForeground',
-            'destructive',
-            'destructiveForeground',
-            'border',
-            'input',
-            'ring',
-        ];
-        return names.reduce((accumulator, name) => {
-            const fieldState = allFields[`${modePrefix}.${name}`];
-            const parsedValue = typeof fieldState?.value === 'string' ? fieldState.value : undefined;
-            accumulator[name] = parsedValue ?? '';
-            return accumulator;
-        }, {});
-    }, [allFields, modePrefix]);
-    function handleChange(nextValue) {
-        setLocalValue(nextValue);
-        setValue(nextValue);
-    }
-    const fieldName = path.split('.').pop() || '';
-    const label = resolveLocalizedValue(field.label, fieldName);
-    const description = resolveLocalizedValue(field.admin?.description, '');
-    return (<div className="theme-color-picker-field">
-      <div className="field-header">
-        <label className="field-label">{label}</label>
-        {description && <div className="field-description">{description}</div>}
-      </div>
-
-      <div className="color-picker-container">
-        <div className="color-input-wrapper">
-          <input type="color" value={localValue || '#000000'} onChange={(event) => handleChange(event.target.value)} className="color-input"/>
-          <input type="text" value={localValue || ''} onChange={(event) => handleChange(event.target.value)} placeholder="#000000" className="text-input" pattern="^#[0-9A-Fa-f]{6}$"/>
-        </div>
-
-        <div className="color-preview" style={{ backgroundColor: localValue || '#000000' }}>
-          <span className="preview-label">{localValue || 'Not set'}</span>
-        </div>
-      </div>
-
-      {(fieldName === 'primary' || fieldName === 'background') && (<div className="mini-preview" style={{
-                backgroundColor: colorValues.background || '#ffffff',
-                color: colorValues.foreground || '#000000',
-                borderColor: colorValues.border || '#e2e8f0',
-            }}>
-          <div className="preview-card" style={{
-                backgroundColor: colorValues.card || '#ffffff',
-                color: colorValues.cardForeground || '#000000',
-                borderColor: colorValues.border || '#e2e8f0',
-            }}>
-            <button className="preview-button" style={{
-                backgroundColor: colorValues.primary || '#0070f3',
-                color: colorValues.primaryForeground || '#ffffff',
-            }}>
-              Primary Button
-            </button>
-            <button className="preview-button secondary" style={{
-                backgroundColor: colorValues.secondary || '#f1f5f9',
-                color: colorValues.secondaryForeground || '#0f172a',
-            }}>
-              Secondary
-            </button>
-          </div>
-        </div>)}
-    </div>);
-};
-export default ThemeColorPickerField;
-//# sourceMappingURL=ThemeColorPickerField.jsx.map

package/dist/fields/ThemeColorPickerField.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"ThemeColorPickerField.jsx","sourceRoot":"","sources":["../../src/fields/ThemeColorPickerField.tsx"],"names":[],"mappings":"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"}

package/dist/fields/ThemePreviewField.jsx

@@ -1,420 +0,0 @@
-'use client';
-import { useField, useForm, useFormFields } from '@payloadcms/ui';
-import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { borderRadiusPresets } from '@/providers/Theme/themeConfig';
-import { resolveTypographyPreview } from '../components/typographyPreviewUtils';
-import { defaultThemePresets } from '../index';
-import { darkModeDefaults, lightModeDefaults } from './colorModeFields';
-const FALLBACK_THEME = defaultThemePresets[0]?.name ?? 'cool';
-const themePresets = defaultThemePresets.reduce((acc, preset) => {
-    acc[preset.name] = {
-        label: preset.label,
-        lightMode: { ...lightModeDefaults, ...(preset.lightMode ?? {}) },
-        darkMode: { ...darkModeDefaults, ...(preset.darkMode ?? {}) },
-        typography: preset.typography,
-        borderRadius: preset.borderRadius,
-    };
-    return acc;
-}, {});
-const colorKeys = Object.keys(lightModeDefaults);
-function ModePreview({ icon, title, colors, typography, radius }) {
-    const background = colors.background ?? '#ffffff';
-    const foreground = colors.foreground ?? '#0a0a0a';
-    const borderColor = colors.border ?? 'rgba(148, 163, 184, 0.35)';
-    const cardBackground = colors.card ?? background;
-    const cardForeground = colors.cardForeground ?? foreground;
-    const primary = colors.primary ?? foreground;
-    const primaryForeground = colors.primaryForeground ?? background;
-    const secondary = colors.secondary ?? '#f4f4f5';
-    const secondaryForeground = colors.secondaryForeground ?? foreground;
-    const muted = colors.muted ?? secondary;
-    const mutedForeground = colors.mutedForeground ?? secondaryForeground;
-    const accent = colors.accent ?? secondary;
-    const accentForeground = colors.accentForeground ?? secondaryForeground;
-    const headingFont = typography.headingFont;
-    const bodyFont = typography.bodyFont;
-    const baseFontSize = typography.baseFontSize;
-    const lineHeight = typography.lineHeight;
-    return (<div style={{
-            display: 'grid',
-            gap: '16px',
-            padding: '18px',
-            borderRadius: '12px',
-            backgroundColor: background,
-            color: foreground,
-            border: `1px solid ${borderColor}`,
-            boxShadow: '0 8px 20px rgba(15, 23, 42, 0.08)',
-            fontFamily: bodyFont,
-        }}>
-      <div style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            fontSize: '12px',
-            fontWeight: 600,
-            letterSpacing: '0.08em',
-            textTransform: 'uppercase',
-            opacity: 0.7,
-        }}>
-        <span>
-          {icon} {title}
-        </span>
-        <span style={{ fontFamily: 'monospace', fontSize: '11px' }}>
-          {background.toUpperCase()}
-        </span>
-      </div>
-
-      <div style={{
-            backgroundColor: cardBackground,
-            color: cardForeground,
-            borderRadius: radius.card,
-            border: `1px solid ${borderColor}`,
-            padding: '16px',
-            display: 'flex',
-            gap: '12px',
-            flexWrap: 'wrap',
-        }}>
-        <button type="button" style={{
-            padding: '10px 18px',
-            borderRadius: radius.pill,
-            border: 'none',
-            cursor: 'pointer',
-            fontSize: '12px',
-            fontWeight: 600,
-            letterSpacing: '0.02em',
-            backgroundColor: primary,
-            color: primaryForeground,
-            boxShadow: '0 6px 14px rgba(15, 23, 42, 0.15)',
-        }}>
-          Primary Action
-        </button>
-        <button type="button" style={{
-            padding: '10px 18px',
-            borderRadius: radius.chip,
-            border: '1px solid transparent',
-            cursor: 'pointer',
-            fontSize: '12px',
-            fontWeight: 600,
-            letterSpacing: '0.02em',
-            backgroundColor: secondary,
-            color: secondaryForeground,
-            boxShadow: 'inset 0 0 0 1px rgba(15, 23, 42, 0.08)',
-        }}>
-          Secondary
-        </button>
-      </div>
-
-      <div style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',
-            gap: '10px',
-        }}>
-        <div style={{
-            borderRadius: radius.chip,
-            padding: '10px 12px',
-            fontSize: '12px',
-            fontWeight: 500,
-            backgroundColor: muted,
-            color: mutedForeground,
-        }}>
-          Muted Card
-        </div>
-        <div style={{
-            borderRadius: radius.chip,
-            padding: '10px 12px',
-            fontSize: '12px',
-            fontWeight: 500,
-            backgroundColor: accent,
-            color: accentForeground,
-        }}>
-          Accent Tag
-        </div>
-      </div>
-
-      <div style={{
-            display: 'grid',
-            gap: '8px',
-            borderRadius: '10px',
-            border: `1px dashed ${borderColor}`,
-            padding: '14px',
-            backgroundColor: 'rgba(148, 163, 184, 0.08)',
-        }}>
-        <div style={{
-            fontFamily: headingFont,
-            fontSize: 'clamp(24px, 3vw, 32px)',
-            fontWeight: 600,
-            lineHeight: 1.2,
-        }}>
-          Nadpis / Heading preview
-        </div>
-        <p style={{
-            margin: 0,
-            fontFamily: bodyFont,
-            fontSize: baseFontSize,
-            lineHeight,
-            color: foreground,
-            opacity: 0.85,
-        }}>
-          Sphinx of black quartz, judge my vow. Příliš žluťoučký kůň úpěl ďábelské ódy.
-        </p>
-        <div style={{
-            display: 'flex',
-            flexWrap: 'wrap',
-            gap: '10px',
-            fontSize: '11px',
-            color: 'rgba(15, 23, 42, 0.7)',
-        }}>
-          <span>Body: {typography.bodyLabel}</span>
-          <span>Heading: {typography.headingLabel}</span>
-          <span>Base size: {baseFontSize}</span>
-          <span>Line height: {lineHeight}</span>
-        </div>
-      </div>
-    </div>);
-}
-export default function ThemePreviewField(props) {
-    const { field, path } = props;
-    const { value: selectedTheme, setValue } = useField({ path });
-    const { dispatchFields } = useForm();
-    const formFields = useFormFields(([formState]) => formState);
-    const hasAppliedInitialPresetRef = useRef(false);
-    const applyPreset = useCallback((presetName) => {
-        const preset = themePresets[presetName];
-        if (!preset) {
-            return;
-        }
-        colorKeys.forEach((key) => {
-            const lightValue = preset.lightMode[key];
-            const darkValue = preset.darkMode[key];
-            if (lightValue) {
-                dispatchFields({
-                    type: 'UPDATE',
-                    path: `themeConfiguration.lightMode.${key}`,
-                    value: lightValue,
-                });
-            }
-            if (darkValue) {
-                dispatchFields({
-                    type: 'UPDATE',
-                    path: `themeConfiguration.darkMode.${key}`,
-                    value: darkValue,
-                });
-            }
-        });
-    }, [dispatchFields]);
-    const handleThemeChange = useCallback((event) => {
-        const value = event.target.value;
-        setValue(value);
-        if (!value) {
-            return;
-        }
-        hasAppliedInitialPresetRef.current = true;
-        applyPreset(value);
-    }, [applyPreset, setValue]);
-    useEffect(() => {
-        if (!selectedTheme) {
-            return;
-        }
-        if (themePresets[selectedTheme]) {
-            return;
-        }
-        hasAppliedInitialPresetRef.current = false;
-        setValue(FALLBACK_THEME);
-    }, [selectedTheme, setValue]);
-    useEffect(() => {
-        if (hasAppliedInitialPresetRef.current) {
-            return;
-        }
-        if (!selectedTheme) {
-            return;
-        }
-        if (!formFields) {
-            return;
-        }
-        const preset = themePresets[selectedTheme];
-        if (!preset) {
-            hasAppliedInitialPresetRef.current = true;
-            return;
-        }
-        const hasExistingValues = colorKeys.some((key) => {
-            const lightField = formFields[`themeConfiguration.lightMode.${key}`];
-            const darkField = formFields[`themeConfiguration.darkMode.${key}`];
-            const lightValue = typeof lightField?.value === 'string' && lightField.value.trim().length > 0;
-            const darkValue = typeof darkField?.value === 'string' && darkField.value.trim().length > 0;
-            return lightValue || darkValue;
-        });
-        if (hasExistingValues) {
-            hasAppliedInitialPresetRef.current = true;
-            return;
-        }
-        applyPreset(selectedTheme);
-        hasAppliedInitialPresetRef.current = true;
-    }, [selectedTheme, formFields, applyPreset]);
-    const lightModeColors = useMemo(() => {
-        const presetLightMode = selectedTheme ? themePresets[selectedTheme]?.lightMode : undefined;
-        return colorKeys.reduce((acc, key) => {
-            const fieldState = formFields?.[`themeConfiguration.lightMode.${key}`];
-            const rawValue = typeof fieldState?.value === 'string' && fieldState.value.trim().length > 0
-                ? fieldState.value
-                : undefined;
-            acc[key] = rawValue ?? presetLightMode?.[key] ?? lightModeDefaults[key];
-            return acc;
-        }, {});
-    }, [formFields, selectedTheme]);
-    const darkModeColors = useMemo(() => {
-        const presetDarkMode = selectedTheme ? themePresets[selectedTheme]?.darkMode : undefined;
-        return colorKeys.reduce((acc, key) => {
-            const fieldState = formFields?.[`themeConfiguration.darkMode.${key}`];
-            const rawValue = typeof fieldState?.value === 'string' && fieldState.value.trim().length > 0
-                ? fieldState.value
-                : undefined;
-            acc[key] = rawValue ?? presetDarkMode?.[key] ?? darkModeDefaults[key];
-            return acc;
-        }, {});
-    }, [formFields, selectedTheme]);
-    const activePreset = selectedTheme ? themePresets[selectedTheme] : undefined;
-    const formTypographySelection = useMemo(() => {
-        if (!formFields) {
-            return null;
-        }
-        const getValue = (key) => formFields[`themeConfiguration.typography.${key}`]?.value;
-        return {
-            bodyFont: getValue('bodyFont') ?? undefined,
-            headingFont: getValue('headingFont') ?? undefined,
-            bodyFontCustom: getValue('bodyFontCustom') ?? undefined,
-            headingFontCustom: getValue('headingFontCustom') ?? undefined,
-            baseFontSize: getValue('baseFontSize') ?? undefined,
-            lineHeight: getValue('lineHeight') ?? undefined,
-        };
-    }, [formFields]);
-    const previewTypography = useMemo(() => {
-        return resolveTypographyPreview(formTypographySelection, selectedTheme);
-    }, [formTypographySelection, selectedTheme]);
-    const borderRadiusValue = formFields?.['themeConfiguration.borderRadius']?.value;
-    const presetRadius = activePreset?.borderRadius ?? 'medium';
-    const resolvedBorderRadius = (typeof borderRadiusValue === 'string' && borderRadiusValue.length
-        ? borderRadiusValue
-        : presetRadius);
-    const borderRadiusPreset = borderRadiusPresets[resolvedBorderRadius] ?? borderRadiusPresets.medium;
-    const borderRadiusCSS = typeof borderRadiusPreset.css === 'string'
-        ? { '--radius-default': borderRadiusPreset.css }
-        : borderRadiusPreset.css;
-    const previewRadius = {
-        card: borderRadiusCSS['--radius-large'] ?? '1rem',
-        chip: borderRadiusCSS['--radius-default'] ?? '0.75rem',
-        pill: borderRadiusCSS['--radius-xl'] ?? borderRadiusCSS['--radius-large'] ?? '999px',
-    };
-    const fieldLabel = typeof field.label === 'string' ? field.label : field.label?.en || field.label?.cs || 'Theme';
-    return (<div style={{ marginBottom: '24px' }}>
-      <label style={{
-            display: 'block',
-            marginBottom: '10px',
-            fontSize: '13px',
-            fontWeight: 600,
-            color: 'var(--theme-elevation-800)',
-        }}>
-        {fieldLabel}
-      </label>
-
-      <div style={{
-            display: 'flex',
-            flexWrap: 'wrap',
-            gap: '24px',
-            alignItems: 'flex-start',
-        }}>
-        <div style={{
-            flex: '0 0 320px',
-            minWidth: '260px',
-            maxWidth: '420px',
-            display: 'grid',
-            gap: '12px',
-        }}>
-          <select value={selectedTheme || ''} onChange={handleThemeChange} style={{
-            width: '100%',
-            padding: '12px 14px',
-            fontSize: '14px',
-            borderRadius: '8px',
-            border: '1px solid var(--theme-elevation-250)',
-            backgroundColor: 'var(--theme-input-bg)',
-            color: 'var(--theme-elevation-800)',
-            cursor: 'pointer',
-        }}>
-            <option value="">Select a theme…</option>
-            {Object.entries(themePresets).map(([key, preset]) => (<option key={key} value={key}>
-                {preset.label}
-              </option>))}
-          </select>
-
-          {activePreset && (<div style={{
-                padding: '12px',
-                borderRadius: '10px',
-                border: '1px solid var(--theme-elevation-200)',
-                backgroundColor: 'var(--theme-elevation-50)',
-                display: 'grid',
-                gap: '6px',
-                fontSize: '12px',
-                color: 'var(--theme-elevation-600)',
-            }}>
-              <div style={{ fontWeight: 600, color: 'var(--theme-elevation-800)' }}>
-                {activePreset.label}
-              </div>
-              <div>Primary color: {activePreset.lightMode.primary}</div>
-              <div>Accent color: {activePreset.lightMode.accent}</div>
-            </div>)}
-
-          {field.admin?.description && (<div style={{
-                fontSize: '12px',
-                color: 'var(--theme-elevation-600)',
-                lineHeight: 1.5,
-            }}>
-              {typeof field.admin.description === 'string'
-                ? field.admin.description
-                : field.admin.description?.en || field.admin.description?.cs || ''}
-            </div>)}
-        </div>
-
-        <div style={{
-            flex: '1 1 420px',
-            minWidth: '320px',
-            position: 'sticky',
-            top: '96px',
-            alignSelf: 'flex-start',
-        }}>
-          <div style={{
-            width: '100%',
-            borderRadius: '16px',
-            border: '1px solid var(--theme-elevation-200)',
-            backgroundColor: 'var(--theme-elevation-25)',
-            padding: '20px',
-            display: 'grid',
-            gap: '18px',
-            maxHeight: 'calc(100vh - 140px)',
-            overflowY: 'auto',
-        }}>
-            <div style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            fontWeight: 600,
-            fontSize: '13px',
-            color: 'var(--theme-elevation-800)',
-        }}>
-              <span>🎨 Live Preview</span>
-              <span style={{ fontSize: '12px', color: 'var(--theme-elevation-600)' }}>
-                {activePreset ? activePreset.label : 'Custom palette'}
-              </span>
-            </div>
-
-            <div style={{
-            display: 'grid',
-            gap: '16px',
-        }}>
-              <ModePreview icon="☀️" title="Light Mode" colors={lightModeColors} typography={previewTypography} radius={previewRadius}/>
-              <ModePreview icon="🌙" title="Dark Mode" colors={darkModeColors} typography={previewTypography} radius={previewRadius}/>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>);
-}
-//# sourceMappingURL=ThemePreviewField.jsx.map