@kilivi/payloadcms-theme-management 2.0.0 → 2.1.0

package/dist/fields/AppearancePreviewField.js

@@ -0,0 +1,763 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFormFields } from '@payloadcms/ui';
+import { Monitor, Moon, Smartphone, Sparkles, Sun, Tablet } from 'lucide-react';
+import { useId, useMemo, useState } from 'react';
+import { DEFAULT_DEVICE_PREVIEW_ID, DEVICE_PREVIEWS, getDevicePreview } from '../constants/devicePreviews.js';
+import { useThemeLanguage, useThemeTranslations } from '../hooks/useThemeTranslations.js';
+import { resolveTypographyPreview } from '../components/typographyPreviewUtils.js';
+import { borderRadiusPresets } from '../providers/Theme/themeConfig.js';
+const DEVICE_ICONS = {
+    mobile: Smartphone,
+    tablet: Tablet,
+    desktop: Monitor
+};
+const SHADOW_MAP = {
+    none: 'none',
+    subtle: '0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)',
+    medium: '0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)',
+    strong: '0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)',
+    dramatic: '0 25px 50px -12px rgba(0,0,0,0.25)'
+};
+const BLUR_PX_MAP = {
+    none: '0px',
+    slight: '4px',
+    medium: '8px',
+    strong: '16px',
+    heavy: '24px'
+};
+const BUTTON_SIZE_MAP = {
+    small: {
+        padding: '6px 12px',
+        fontSize: '12px'
+    },
+    medium: {
+        padding: '8px 16px',
+        fontSize: '13px'
+    },
+    large: {
+        padding: '10px 24px',
+        fontSize: '15px'
+    },
+    xl: {
+        padding: '14px 32px',
+        fontSize: '17px'
+    }
+};
+function radiusToPx(token) {
+    const preset = borderRadiusPresets[token ?? 'medium'];
+    const css = preset?.css;
+    return css?.['--radius-large'] ?? css?.['--radius-default'] ?? '0.75rem';
+}
+function cardSurface(c, p, radius) {
+    const base = {
+        background: p.card,
+        color: p.cardForeground,
+        borderRadius: radius,
+        border: `${c.borderWidth} ${c.borderStyle === 'none' ? 'solid' : c.borderStyle} ${p.border}`,
+        padding: '16px',
+        transition: 'transform 200ms ease, box-shadow 200ms ease'
+    };
+    // Card style takes precedence for the structural look, effect style for depth.
+    if (c.cardStyle === 'bordered') {
+        return {
+            ...base,
+            border: `2px solid ${p.foreground}`,
+            borderRadius: 0,
+            boxShadow: `4px 4px 0 ${p.foreground}`
+        };
+    }
+    if (c.cardStyle === 'gradient-border') {
+        return {
+            ...base,
+            border: '2px solid transparent',
+            borderImage: `linear-gradient(135deg, ${p.gradientFrom}, ${p.gradientVia}, ${p.gradientTo}) 1`,
+            boxShadow: SHADOW_MAP[c.shadowIntensity] ?? SHADOW_MAP.medium
+        };
+    }
+    switch(c.effectStyle){
+        case 'glass':
+            return {
+                ...base,
+                background: `color-mix(in srgb, ${p.card} ${c.glassOpacity}%, transparent)`,
+                backdropFilter: `blur(${BLUR_PX_MAP[c.backdropBlur] ?? '8px'}) saturate(150%)`,
+                border: `1px solid color-mix(in srgb, ${p.border} 50%, transparent)`,
+                boxShadow: '0 4px 24px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.15)'
+            };
+        case 'neumorphic':
+            return {
+                ...base,
+                background: p.background,
+                border: 'none',
+                boxShadow: '6px 6px 12px rgba(0,0,0,0.12), -6px -6px 12px rgba(255,255,255,0.7)'
+            };
+        case 'clay':
+            return {
+                ...base,
+                border: 'none',
+                boxShadow: '4px 4px 0 rgba(0,0,0,0.22), 0 8px 20px rgba(0,0,0,0.08)'
+            };
+        case 'elevated':
+            return {
+                ...base,
+                border: 'none',
+                boxShadow: SHADOW_MAP[c.shadowIntensity] ?? SHADOW_MAP.medium
+            };
+        case 'flat':
+        default:
+            return {
+                ...base,
+                boxShadow: 'none'
+            };
+    }
+}
+function buttonStyle(c, p, radius) {
+    const size = BUTTON_SIZE_MAP[c.buttonSize] ?? BUTTON_SIZE_MAP.medium;
+    const base = {
+        ...size,
+        fontWeight: 600,
+        cursor: 'pointer',
+        borderRadius: radius,
+        border: 'none',
+        transition: 'transform 120ms ease, box-shadow 120ms ease',
+        whiteSpace: 'nowrap'
+    };
+    switch(c.buttonVariant){
+        case 'outlined':
+            return {
+                ...base,
+                background: 'transparent',
+                color: p.primary,
+                border: `1.5px solid ${p.primary}`
+            };
+        case 'ghost':
+            return {
+                ...base,
+                background: 'transparent',
+                color: p.primary
+            };
+        case 'gradient':
+            return {
+                ...base,
+                backgroundImage: `linear-gradient(135deg, ${p.gradientFrom}, ${p.gradientVia}, ${p.gradientTo})`,
+                color: p.primaryForeground
+            };
+        case 'pill':
+            return {
+                ...base,
+                background: p.primary,
+                color: p.primaryForeground,
+                borderRadius: '9999px'
+            };
+        case 'brutal':
+            return {
+                ...base,
+                background: p.card,
+                color: p.foreground,
+                border: `2px solid ${p.foreground}`,
+                borderRadius: 0,
+                boxShadow: `3px 3px 0 ${p.foreground}`
+            };
+        case 'filled':
+        default:
+            return {
+                ...base,
+                background: p.primary,
+                color: p.primaryForeground
+            };
+    }
+}
+function navbarStyle(c, p) {
+    const base = {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: '10px 14px',
+        background: p.background,
+        color: p.foreground,
+        borderBottom: `1px solid ${p.border}`
+    };
+    switch(c.navbarStyle){
+        case 'transparent':
+            return {
+                ...base,
+                background: 'transparent',
+                borderBottom: '1px solid transparent'
+            };
+        case 'blur':
+            return {
+                ...base,
+                background: `color-mix(in srgb, ${p.background} 70%, transparent)`,
+                backdropFilter: 'blur(12px)'
+            };
+        case 'floating':
+            return {
+                ...base,
+                margin: '8px',
+                borderRadius: radiusToPx(c.borderRadius),
+                border: `1px solid ${p.border}`,
+                boxShadow: '0 4px 24px rgba(0,0,0,0.10)'
+            };
+        case 'minimal':
+            return {
+                ...base,
+                borderBottom: `1px solid ${p.border}`,
+                boxShadow: 'none'
+            };
+        case 'solid':
+        default:
+            return base;
+    }
+}
+function linkStyle(c, p) {
+    switch(c.linkStyle){
+        case 'underline':
+            return {
+                color: p.primary,
+                textDecoration: 'underline',
+                textUnderlineOffset: '0.15em'
+            };
+        case 'none':
+            return {
+                color: p.primary,
+                textDecoration: 'none'
+            };
+        case 'highlight':
+            return {
+                color: p.foreground,
+                textDecoration: 'none',
+                backgroundImage: `linear-gradient(transparent 60%, color-mix(in srgb, ${p.primary} 28%, transparent) 0)`
+            };
+        case 'animated':
+            return {
+                color: p.primary,
+                textDecoration: 'none',
+                borderBottom: `2px solid ${p.primary}`,
+                paddingBottom: '1px'
+            };
+        case 'underline-hover':
+        default:
+            return {
+                color: p.primary,
+                textDecoration: 'none'
+            };
+    }
+}
+export default function AppearancePreviewField() {
+    const formFields = useFormFields(([state])=>state);
+    const lang = useThemeLanguage();
+    const translations = useThemeTranslations();
+    const t = translations.appearancePreview;
+    const site = translations.preview;
+    const [mode, setMode] = useState('light');
+    const [device, setDevice] = useState(DEFAULT_DEVICE_PREVIEW_ID);
+    const uid = useId().replace(/[:]/g, '');
+    const activeDevice = getDevicePreview(device);
+    // Fonts follow the Typography section (or the theme preset when set to "Use theme preset"),
+    // so this single preview shows colours, type and component styles together.
+    const typographyValue = (key)=>formFields?.[`themeConfiguration.typography.${key}`]?.value;
+    const typography = resolveTypographyPreview({
+        bodyFont: typographyValue('bodyFont'),
+        headingFont: typographyValue('headingFont'),
+        bodyFontCustom: typographyValue('bodyFontCustom'),
+        headingFontCustom: typographyValue('headingFontCustom'),
+        baseFontSize: typographyValue('baseFontSize'),
+        lineHeight: typographyValue('lineHeight')
+    }, formFields?.['themeConfiguration.theme']?.value);
+    const str = (key, fallback)=>{
+        const v = formFields?.[`themeConfiguration.${key}`]?.value;
+        return typeof v === 'string' && v.trim().length > 0 ? v : fallback;
+    };
+    const num = (key, fallback)=>{
+        const v = formFields?.[`themeConfiguration.${key}`]?.value;
+        return typeof v === 'number' ? v : fallback;
+    };
+    const choices = {
+        effectStyle: str('visualEffects.effectStyle', 'flat'),
+        shadowIntensity: str('visualEffects.shadowIntensity', 'medium'),
+        backdropBlur: str('visualEffects.backdropBlur', 'none'),
+        borderStyle: str('visualEffects.borderStyle', 'solid'),
+        borderWidth: str('visualEffects.borderWidth', '1px'),
+        glassOpacity: num('visualEffects.glassOpacity', 60),
+        buttonVariant: str('componentStyles.buttonVariant', 'filled'),
+        buttonSize: str('componentStyles.buttonSize', 'medium'),
+        cardStyle: str('componentStyles.cardStyle', 'elevated'),
+        cardHoverEffect: str('componentStyles.cardHoverEffect', 'lift'),
+        imageStyle: str('componentStyles.imageStyle', 'default'),
+        navbarStyle: str('componentStyles.navbarStyle', 'solid'),
+        footerStyle: str('componentStyles.footerStyle', 'standard'),
+        linkStyle: str('componentStyles.linkStyle', 'underline-hover'),
+        borderRadius: str('borderRadius', 'medium')
+    };
+    const modeKey = mode === 'light' ? 'lightMode' : 'darkMode';
+    const fallback = mode === 'light' ? {
+        background: '#ffffff',
+        foreground: '#0a0a0a',
+        card: '#ffffff',
+        cardForeground: '#0a0a0a',
+        primary: '#9372f7',
+        primaryForeground: '#fafafa',
+        secondary: '#f4f4f5',
+        secondaryForeground: '#18181b',
+        muted: '#f4f4f5',
+        mutedForeground: '#71717a',
+        accent: '#f4f4f5',
+        accentForeground: '#18181b',
+        border: '#e4e4e7',
+        gradientFrom: '#9372f7',
+        gradientVia: '#7c6ff0',
+        gradientTo: '#22d3ee'
+    } : {
+        background: '#0a0a0a',
+        foreground: '#fafafa',
+        card: '#09090b',
+        cardForeground: '#fafafa',
+        primary: '#9372f7',
+        primaryForeground: '#09090b',
+        secondary: '#27272a',
+        secondaryForeground: '#fafafa',
+        muted: '#27272a',
+        mutedForeground: '#a1a1aa',
+        accent: '#27272a',
+        accentForeground: '#fafafa',
+        border: '#27272a',
+        gradientFrom: '#9372f7',
+        gradientVia: '#7c6ff0',
+        gradientTo: '#22d3ee'
+    };
+    const palette = useMemo(()=>{
+        const p = {
+            ...fallback
+        };
+        Object.keys(fallback).forEach((key)=>{
+            p[key] = str(`${modeKey}.${key}`, fallback[key]);
+        });
+        return p;
+    }, [
+        formFields,
+        mode
+    ]);
+    const radius = radiusToPx(choices.borderRadius);
+    const card = cardSurface(choices, palette, radius);
+    const btn = buttonStyle(choices, palette, radius);
+    const nav = navbarStyle(choices, palette);
+    // Hover effects can't be expressed inline, so emit a scoped style block.
+    const hoverCSS = (()=>{
+        const sel = `.${uid} .tm-prev-card`;
+        switch(choices.cardHoverEffect){
+            case 'lift':
+                return `${sel}:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(0,0,0,0.14)}`;
+            case 'scale':
+                return `${sel}:hover{transform:scale(1.02)}`;
+            case 'glow':
+                return `${sel}:hover{box-shadow:0 0 0 3px color-mix(in srgb, ${palette.primary} 25%, transparent),0 8px 32px rgba(0,0,0,0.12)}`;
+            case 'shadow':
+                return `${sel}:hover{box-shadow:0 24px 50px -12px rgba(0,0,0,0.35)}`;
+            case 'tilt':
+                return `${sel}:hover{transform:perspective(800px) rotateX(3deg) rotateY(-3deg)}`;
+            default:
+                return '';
+        }
+    })();
+    const btnHoverCSS = `.${uid} .tm-prev-btn:hover{filter:brightness(1.05)}${choices.buttonVariant === 'brutal' ? `.${uid} .tm-prev-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 ${palette.foreground}}` : ''}`;
+    // Movement-based hover effects only run for users who haven't asked for reduced motion.
+    const previewCSS = `@media (prefers-reduced-motion: no-preference){${hoverCSS}${btnHoverCSS}}`;
+    const chipLabels = t.chips;
+    const chips = [
+        [
+            chipLabels.effect,
+            choices.effectStyle
+        ],
+        [
+            chipLabels.shadow,
+            choices.shadowIntensity
+        ],
+        [
+            chipLabels.card,
+            choices.cardStyle
+        ],
+        [
+            chipLabels.hover,
+            choices.cardHoverEffect
+        ],
+        [
+            chipLabels.button,
+            `${choices.buttonVariant} / ${choices.buttonSize}`
+        ],
+        [
+            chipLabels.navbar,
+            choices.navbarStyle
+        ],
+        [
+            chipLabels.footer,
+            choices.footerStyle
+        ],
+        [
+            chipLabels.link,
+            choices.linkStyle
+        ],
+        [
+            chipLabels.radius,
+            choices.borderRadius
+        ]
+    ];
+    const footerStyleCss = choices.footerStyle === 'dark' ? {
+        background: palette.foreground,
+        color: palette.background
+    } : choices.footerStyle === 'full-color' ? {
+        background: palette.primary,
+        color: palette.primaryForeground
+    } : choices.footerStyle === 'gradient-top' ? {
+        background: palette.background,
+        color: palette.mutedForeground,
+        borderTop: '3px solid transparent',
+        borderImage: `linear-gradient(135deg, ${palette.gradientFrom}, ${palette.gradientVia}, ${palette.gradientTo}) 1`
+    } : choices.footerStyle === 'minimal' ? {
+        background: 'transparent',
+        color: palette.mutedForeground,
+        borderTop: `1px solid ${palette.border}`
+    } : {
+        background: palette.muted,
+        color: palette.mutedForeground,
+        borderTop: `1px solid ${palette.border}`
+    };
+    return(// The slot spans the whole right column of the Appearance tab on wide admins;
+    // its inner panel is sticky so the preview stays in view while editing.
+    /*#__PURE__*/ _jsx("div", {
+        className: `tm-live-preview-slot ${uid}`,
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "tm-live-preview",
+            children: [
+                /*#__PURE__*/ _jsx("style", {
+                    dangerouslySetInnerHTML: {
+                        __html: previewCSS
+                    }
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        marginBottom: '8px',
+                        gap: '8px',
+                        flexWrap: 'wrap'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            children: [
+                                /*#__PURE__*/ _jsxs("div", {
+                                    style: {
+                                        display: 'inline-flex',
+                                        alignItems: 'center',
+                                        gap: '6px',
+                                        fontSize: '13px',
+                                        fontWeight: 600,
+                                        color: 'var(--theme-elevation-800)'
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Sparkles, {
+                                            size: 14,
+                                            "aria-hidden": true
+                                        }),
+                                        t.title
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx("div", {
+                                    style: {
+                                        fontSize: '12px',
+                                        color: 'var(--theme-elevation-600)'
+                                    },
+                                    children: t.subtitle
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            style: {
+                                display: 'inline-flex',
+                                gap: '8px',
+                                flexWrap: 'wrap'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx("div", {
+                                    role: "group",
+                                    "aria-label": t.viewport,
+                                    style: {
+                                        display: 'inline-flex',
+                                        borderRadius: '8px',
+                                        overflow: 'hidden',
+                                        border: '1px solid var(--theme-elevation-200)'
+                                    },
+                                    children: DEVICE_PREVIEWS.map((d)=>{
+                                        const Icon = DEVICE_ICONS[d.id];
+                                        return /*#__PURE__*/ _jsxs("button", {
+                                            type: "button",
+                                            "aria-pressed": device === d.id,
+                                            onClick: ()=>setDevice(d.id),
+                                            title: `${lang === 'cs' ? d.labelCs : d.label} — ${d.width}×${d.height}`,
+                                            style: {
+                                                display: 'inline-flex',
+                                                alignItems: 'center',
+                                                gap: '5px',
+                                                minHeight: '28px',
+                                                padding: '5px 10px',
+                                                fontSize: '12px',
+                                                fontWeight: 600,
+                                                cursor: 'pointer',
+                                                border: 'none',
+                                                background: device === d.id ? 'var(--theme-elevation-800)' : 'transparent',
+                                                color: device === d.id ? 'var(--theme-elevation-0)' : 'var(--theme-elevation-600)'
+                                            },
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Icon, {
+                                                    size: 13,
+                                                    "aria-hidden": true
+                                                }),
+                                                lang === 'cs' ? d.labelCs : d.label
+                                            ]
+                                        }, d.id);
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx("div", {
+                                    role: "group",
+                                    "aria-label": `${t.light} / ${t.dark}`,
+                                    style: {
+                                        display: 'inline-flex',
+                                        borderRadius: '8px',
+                                        overflow: 'hidden',
+                                        border: '1px solid var(--theme-elevation-200)'
+                                    },
+                                    children: [
+                                        'light',
+                                        'dark'
+                                    ].map((m)=>{
+                                        const Icon = m === 'light' ? Sun : Moon;
+                                        return /*#__PURE__*/ _jsxs("button", {
+                                            type: "button",
+                                            "aria-pressed": mode === m,
+                                            onClick: ()=>setMode(m),
+                                            style: {
+                                                display: 'inline-flex',
+                                                alignItems: 'center',
+                                                gap: '5px',
+                                                minHeight: '28px',
+                                                padding: '5px 12px',
+                                                fontSize: '12px',
+                                                fontWeight: 600,
+                                                cursor: 'pointer',
+                                                border: 'none',
+                                                background: mode === m ? 'var(--theme-elevation-800)' : 'transparent',
+                                                color: mode === m ? 'var(--theme-elevation-0)' : 'var(--theme-elevation-600)'
+                                            },
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Icon, {
+                                                    size: 13,
+                                                    "aria-hidden": true
+                                                }),
+                                                m === 'light' ? t.light : t.dark
+                                            ]
+                                        }, m);
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    style: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                        background: 'var(--theme-elevation-50)',
+                        borderRadius: '14px',
+                        padding: device === 'desktop' ? '0' : '16px'
+                    },
+                    children: /*#__PURE__*/ _jsxs("div", {
+                        ref: (el)=>el?.setAttribute('inert', ''),
+                        style: {
+                            width: '100%',
+                            maxWidth: device === 'desktop' ? '100%' : `${activeDevice.width}px`,
+                            borderRadius: '14px',
+                            overflow: 'hidden',
+                            border: '1px solid var(--theme-elevation-200)',
+                            boxShadow: '0 8px 24px rgba(0,0,0,0.10)',
+                            background: palette.background,
+                            color: palette.foreground,
+                            fontFamily: typography.bodyFont,
+                            lineHeight: typography.lineHeight
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsxs("nav", {
+                                style: nav,
+                                children: [
+                                    /*#__PURE__*/ _jsx("span", {
+                                        style: {
+                                            fontWeight: 700,
+                                            fontSize: '13px'
+                                        },
+                                        children: site.siteTitle
+                                    }),
+                                    /*#__PURE__*/ _jsxs("span", {
+                                        style: {
+                                            display: 'flex',
+                                            gap: '14px',
+                                            fontSize: '12px',
+                                            opacity: 0.85
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsx("span", {
+                                                children: site.nav.home
+                                            }),
+                                            /*#__PURE__*/ _jsx("span", {
+                                                children: site.nav.about
+                                            }),
+                                            /*#__PURE__*/ _jsx("span", {
+                                                style: {
+                                                    ...linkStyle(choices, palette)
+                                                },
+                                                children: site.nav.services
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                style: {
+                                    padding: '20px',
+                                    display: 'grid',
+                                    gap: '14px'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        children: [
+                                            /*#__PURE__*/ _jsx("div", {
+                                                style: {
+                                                    fontFamily: typography.headingFont,
+                                                    fontSize: '22px',
+                                                    fontWeight: 700,
+                                                    lineHeight: 1.2
+                                                },
+                                                children: t.heading
+                                            }),
+                                            /*#__PURE__*/ _jsxs("p", {
+                                                style: {
+                                                    margin: '6px 0 0',
+                                                    fontSize: `calc(${typography.baseFontSize} * 0.8125)`,
+                                                    lineHeight: typography.lineHeight,
+                                                    color: palette.mutedForeground
+                                                },
+                                                children: [
+                                                    t.body,
+                                                    /*#__PURE__*/ _jsx("a", {
+                                                        style: linkStyle(choices, palette),
+                                                        children: t.link
+                                                    }),
+                                                    "."
+                                                ]
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: "tm-prev-card",
+                                        style: card,
+                                        children: /*#__PURE__*/ _jsxs("div", {
+                                            style: {
+                                                display: 'flex',
+                                                gap: '10px',
+                                                alignItems: 'center',
+                                                flexWrap: 'wrap'
+                                            },
+                                            children: [
+                                                /*#__PURE__*/ _jsx("button", {
+                                                    type: "button",
+                                                    className: "tm-prev-btn",
+                                                    style: btn,
+                                                    children: t.primary
+                                                }),
+                                                /*#__PURE__*/ _jsx("button", {
+                                                    type: "button",
+                                                    style: {
+                                                        ...BUTTON_SIZE_MAP[choices.buttonSize] ?? BUTTON_SIZE_MAP.medium,
+                                                        fontWeight: 600,
+                                                        cursor: 'pointer',
+                                                        borderRadius: radius,
+                                                        background: palette.secondary,
+                                                        color: palette.secondaryForeground,
+                                                        border: 'none'
+                                                    },
+                                                    children: t.secondary
+                                                }),
+                                                /*#__PURE__*/ _jsx("span", {
+                                                    "aria-hidden": true,
+                                                    style: {
+                                                        marginLeft: 'auto',
+                                                        width: '54px',
+                                                        height: '22px',
+                                                        borderRadius: '6px',
+                                                        backgroundImage: `linear-gradient(135deg, ${palette.gradientFrom}, ${palette.gradientVia}, ${palette.gradientTo})`,
+                                                        boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.08)'
+                                                    }
+                                                })
+                                            ]
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                style: {
+                                    padding: '12px 16px',
+                                    fontSize: '11px',
+                                    ...footerStyleCss
+                                },
+                                children: [
+                                    "© ",
+                                    new Date().getFullYear(),
+                                    " ",
+                                    site.siteTitle,
+                                    " — ",
+                                    t.footer
+                                ]
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    style: {
+                        display: 'flex',
+                        flexWrap: 'wrap',
+                        gap: '5px',
+                        marginTop: '10px'
+                    },
+                    children: chips.map(([k, v])=>/*#__PURE__*/ _jsxs("span", {
+                            style: {
+                                fontSize: '11px',
+                                padding: '2px 7px',
+                                borderRadius: '999px',
+                                background: 'var(--theme-elevation-50)',
+                                border: '1px solid var(--theme-elevation-150)',
+                                color: 'var(--theme-elevation-700)'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsxs("span", {
+                                    style: {
+                                        color: 'var(--theme-elevation-600)'
+                                    },
+                                    children: [
+                                        k,
+                                        ":"
+                                    ]
+                                }),
+                                " ",
+                                /*#__PURE__*/ _jsx("strong", {
+                                    style: {
+                                        fontWeight: 600
+                                    },
+                                    children: v
+                                })
+                            ]
+                        }, k))
+                })
+            ]
+        })
+    }));
+}
+
+//# sourceMappingURL=AppearancePreviewField.js.map