@kilivi/payloadcms-theme-management 2.0.0 → 2.2.0

package/dist/fields/ThemePreviewField.js

@@ -2,17 +2,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './ThemePreviewField.css';
 import { useField, useForm, useFormFields } from '@payloadcms/ui';
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { ChevronDown, ChevronRight, Moon, Palette, Sun } from 'lucide-react';
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { resolveTypographyPreview } from '../components/typographyPreviewUtils.js';
 import { allThemePresets } from '../index.js';
+import { useThemeLanguage, useThemeTranslations } from '../hooks/useThemeTranslations.js';
+import PaletteGeneratorField from './PaletteGeneratorField.js';
 import { borderRadiusPresets } from '../providers/Theme/themeConfig.js';
-import { getTranslations } from '../translations.js';
-import { getAdminLanguage } from '../utils/getAdminLanguage.js';
 import { darkModeDefaults, lightModeDefaults } from './colorModeFields.js';
+import { parseThemePresetInput } from '../utils/customThemePresets.js';
+import { resolveLocalizedText } from '../utils/localizedText.js';
+import { AppearanceLocks, AppearanceUndoBar } from '../components/AppearanceSessionControls.js';
+import { createBulkWriter, getAppearanceSession } from '../hooks/useAppearanceSession.js';
+import { useNativeLivePreview } from '../hooks/useNativeLivePreview.js';
 // FALLBACK_THEME and runtime theme presets are computed inside the component
 const colorKeys = Object.keys(lightModeDefaults);
-function ModePreview({ icon, title, colors, typography, radius }) {
-    const t = getTranslations(getAdminLanguage());
+function ModePreview({ icon: Icon, title, colors, typography, radius }) {
+    const t = useThemeTranslations();
     const background = colors.background ?? '#ffffff';
     const foreground = colors.foreground ?? '#0a0a0a';
     const borderColor = colors.border ?? 'rgba(148, 163, 184, 0.35)';
@@ -31,6 +37,8 @@ function ModePreview({ icon, title, colors, typography, radius }) {
     const baseFontSize = typography.baseFontSize;
     const lineHeight = typography.lineHeight;
     return /*#__PURE__*/ _jsxs("div", {
+        // A picture of the site: its sample buttons must not become dead tab stops.
+        ref: (el)=>el?.setAttribute('inert', ''),
         style: {
             display: 'grid',
             gap: '16px',
@@ -56,9 +64,16 @@ function ModePreview({ icon, title, colors, typography, radius }) {
                 },
                 children: [
                     /*#__PURE__*/ _jsxs("span", {
+                        style: {
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            gap: '6px'
+                        },
                         children: [
-                            icon,
-                            " ",
+                            /*#__PURE__*/ _jsx(Icon, {
+                                size: 13,
+                                "aria-hidden": true
+                            }),
                             title
                         ]
                     }),
@@ -133,7 +148,7 @@ function ModePreview({ icon, title, colors, typography, radius }) {
                             backgroundColor: muted,
                             color: mutedForeground
                         },
-                        children: "Muted Card"
+                        children: t.ui.mutedSample
                     }),
                     /*#__PURE__*/ _jsx("div", {
                         style: {
@@ -144,7 +159,7 @@ function ModePreview({ icon, title, colors, typography, radius }) {
                             backgroundColor: accent,
                             color: accentForeground
                         },
-                        children: "Accent Tag"
+                        children: t.ui.accentSample
                     })
                 ]
             }),
@@ -165,7 +180,7 @@ function ModePreview({ icon, title, colors, typography, radius }) {
                             fontWeight: 600,
                             lineHeight: 1.2
                         },
-                        children: "Nadpis / Heading preview"
+                        children: t.ui.headingSample
                     }),
                     /*#__PURE__*/ _jsx("p", {
                         style: {
@@ -176,38 +191,43 @@ function ModePreview({ icon, title, colors, typography, radius }) {
                             color: foreground,
                             opacity: 0.85
                         },
-                        children: "Sphinx of black quartz, judge my vow. Příliš žluťoučký kůň úpěl ďábelské ódy."
+                        children: t.ui.bodySample
                     }),
                     /*#__PURE__*/ _jsxs("div", {
                         style: {
                             display: 'flex',
                             flexWrap: 'wrap',
                             gap: '10px',
-                            fontSize: '11px',
-                            color: 'rgba(15, 23, 42, 0.7)'
+                            fontSize: '12px',
+                            // Follow the previewed palette so the meta line stays readable in dark mode.
+                            color: mutedForeground
                         },
                         children: [
                             /*#__PURE__*/ _jsxs("span", {
                                 children: [
-                                    "Body: ",
+                                    t.ui.bodyFontLabel,
+                                    ": ",
                                     typography.bodyLabel
                                 ]
                             }),
                             /*#__PURE__*/ _jsxs("span", {
                                 children: [
-                                    "Heading: ",
+                                    t.ui.headingFontLabel,
+                                    ": ",
                                     typography.headingLabel
                                 ]
                             }),
                             /*#__PURE__*/ _jsxs("span", {
                                 children: [
-                                    "Base size: ",
+                                    t.ui.baseSizeLabel,
+                                    ": ",
                                     baseFontSize
                                 ]
                             }),
                             /*#__PURE__*/ _jsxs("span", {
                                 children: [
-                                    "Line height: ",
+                                    t.ui.lineHeightLabel,
+                                    ": ",
                                     lineHeight
                                 ]
                             })
@@ -220,13 +240,43 @@ function ModePreview({ icon, title, colors, typography, radius }) {
 }
 export default function ThemePreviewField(props) {
     const { field, path } = props;
-    const showPreviewPanel = field?.admin?.custom?.useThemePreviewField ?? true;
+    // useThemePreviewField: explicit opt-out via admin.custom.useThemePreviewField = false
+    // Plugin always passes true; advanced users can override to permanently hide the panel.
+    const configuredShowPreview = field?.admin?.custom?.useThemePreviewField ?? true;
+    // isLivePreviewing: true only when the user actively clicked Preview and the iframe/popup is open.
+    // While editing (before clicking Preview), the panel is always shown regardless of livePreview config.
+    // Default context value is false, so the panel shows by default even without LivePreview provider.
+    const { isOpen: isLivePreviewing } = useNativeLivePreview();
+    const showPreviewPanel = configuredShowPreview && !isLivePreviewing;
     // If the plugin provided theme presets via admin config, prefer those;
     // support both `field.admin.themePresets` (legacy) and `field.admin.custom.themePresets`
     // otherwise fallback to `allThemePresets`.
     // Prefer presets passed via `admin.custom.themePresets` (set by the field factory / plugin).
     // Fall back to legacy `admin.themePresets` for backwards compatibility, then to `allThemePresets`.
-    const baseThemePresets = field?.admin?.custom?.themePresets ?? field?.admin?.themePresets ?? allThemePresets;
+    const configuredThemePresets = field?.admin?.custom?.themePresets ?? field?.admin?.themePresets ?? allThemePresets;
+    // Presets imported through the "Custom Theme Presets" JSON field live next to
+    // this field. Merge them in (overriding built-ins by name) so they show up in
+    // the picker as soon as they are imported.
+    const customPresetsPath = [
+        ...path.split('.').slice(0, -1),
+        'customThemePresets'
+    ].join('.');
+    const customPresetsValue = useFormFields(([formState])=>formState?.[customPresetsPath]?.value);
+    const baseThemePresets = useMemo(()=>{
+        const custom = parseThemePresetInput(customPresetsValue);
+        if (custom.length === 0) return configuredThemePresets;
+        const byName = new Map(configuredThemePresets.map((preset)=>[
+                preset.name,
+                preset
+            ]));
+        custom.forEach((preset)=>byName.set(preset.name, preset));
+        return [
+            ...byName.values()
+        ];
+    }, [
+        configuredThemePresets,
+        customPresetsValue
+    ]);
     const runtimeThemePresets = useMemo(()=>{
         return baseThemePresets.reduce((acc, preset)=>{
             acc[preset.name] = {
@@ -240,7 +290,8 @@ export default function ThemePreviewField(props) {
                     ...preset.darkMode ?? {}
                 },
                 typography: preset.typography,
-                borderRadius: preset.borderRadius
+                borderRadius: preset.borderRadius,
+                visualEffects: preset.visualEffects
             };
             return acc;
         }, {});
@@ -254,42 +305,84 @@ export default function ThemePreviewField(props) {
     const { dispatchFields } = useForm();
     const formFields = useFormFields(([formState])=>formState);
     const hasAppliedInitialPresetRef = useRef(false);
-    const applyPreset = useCallback((presetName)=>{
+    const [previewOpen, setPreviewOpen] = useState(true);
+    // Preset list starts collapsed once a theme is already selected so the
+    // preview panel — not the long preset list — dominates the layout.
+    const [presetsOpen, setPresetsOpen] = useState(false);
+    const { setModified } = useForm();
+    /**
+   * Write a theme preset into the form, honouring the session locks:
+   * colours (Colours lock), visual effects (Style lock). Theme fonts apply
+   * implicitly through the "Use theme preset" font option, so with the Fonts lock
+   * on we pin the current preset font as a custom value before switching.
+   */ const applyPreset = useCallback((presetName, writer)=>{
         const preset = runtimeThemePresets[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
-                });
-            }
-        });
+        const { locks } = getAppearanceSession();
+        if (!locks.colors) {
+            colorKeys.forEach((key)=>{
+                const lightValue = preset.lightMode[key];
+                const darkValue = preset.darkMode[key];
+                if (lightValue) writer.write(`themeConfiguration.lightMode.${key}`, lightValue);
+                if (darkValue) writer.write(`themeConfiguration.darkMode.${key}`, darkValue);
+            });
+        }
+        if (locks.fonts && selectedTheme) {
+            const typographyValue = (key)=>formFields?.[`themeConfiguration.typography.${key}`]?.value;
+            const current = resolveTypographyPreview({
+                bodyFont: typographyValue('bodyFont'),
+                headingFont: typographyValue('headingFont')
+            }, selectedTheme);
+            const pin = (key, family)=>{
+                const value = typographyValue(key);
+                if (!value || value === 'preset') {
+                    writer.write(`themeConfiguration.typography.${key}`, 'custom');
+                    writer.write(`themeConfiguration.typography.${key}Custom`, family);
+                }
+            };
+            pin('bodyFont', current.bodyFont);
+            pin('headingFont', current.headingFont);
+        }
+        if (!locks.style && preset.visualEffects) {
+            const vfKeys = [
+                'effectStyle',
+                'shadowIntensity',
+                'backdropBlur',
+                'borderStyle',
+                'borderWidth',
+                'glassOpacity'
+            ];
+            vfKeys.forEach((key)=>{
+                const value = preset.visualEffects?.[key];
+                if (value !== undefined) writer.write(`themeConfiguration.visualEffects.${key}`, value);
+            });
+        }
     }, [
-        dispatchFields
+        runtimeThemePresets,
+        formFields,
+        selectedTheme
     ]);
     const handleThemeSelect = useCallback((value)=>{
-        setValue(value);
         if (!value) {
+            setValue(value);
             return;
         }
         hasAppliedInitialPresetRef.current = true;
-        applyPreset(value);
+        const writer = createBulkWriter(formFields, dispatchFields);
+        writer.write(path, value);
+        applyPreset(value, writer);
+        setModified(true);
+        writer.commit('theme', runtimeThemePresets[value]?.label ?? value);
     }, [
         applyPreset,
-        setValue
+        setValue,
+        formFields,
+        dispatchFields,
+        path,
+        setModified,
+        runtimeThemePresets
     ]);
     useEffect(()=>{
         if (!selectedTheme) {
@@ -330,7 +423,8 @@ export default function ThemePreviewField(props) {
             hasAppliedInitialPresetRef.current = true;
             return;
         }
-        applyPreset(selectedTheme);
+        // First-time fill of empty colour fields: not an editor action, so no undo entry.
+        applyPreset(selectedTheme, createBulkWriter(formFields, dispatchFields));
         hasAppliedInitialPresetRef.current = true;
     }, [
         selectedTheme,
@@ -396,8 +490,9 @@ export default function ThemePreviewField(props) {
         chip: borderRadiusCSS['--radius-default'] ?? '0.75rem',
         pill: borderRadiusCSS['--radius-xl'] ?? borderRadiusCSS['--radius-large'] ?? '999px'
     };
-    // Translate labels at runtime based on admin language
-    const t = getTranslations(getAdminLanguage());
+    // Translate labels at runtime based on the active Payload admin language
+    const t = useThemeTranslations();
+    const fieldId = `tm-theme-${useId().replace(/:/g, '')}`;
     // Explicitly type keys as `keyof ColorModeColors` to satisfy TypeScript when indexing `lightMode`/`darkMode`
     const highlightSwatches = [
         {
@@ -421,61 +516,130 @@ export default function ThemePreviewField(props) {
             label: t.colors.foreground
         }
     ];
-    const fieldLabel = typeof field.label === 'string' ? field.label : field.label?.en || field.label?.cs || 'Theme';
+    const presetCount = Object.keys(runtimeThemePresets).length;
+    const summarySwatches = highlightSwatches.map(({ key })=>activePreset ? activePreset.lightMode[key] : lightModeColors[key]).filter((v)=>typeof v === 'string' && v.trim().length > 0);
+    // Field labels/descriptions arrive as `{ en, cs, … }` objects. Resolve them
+    // against the active admin language (Payload i18n) instead of hard-coding `en`,
+    // otherwise the theme selection stays English in every locale.
+    const adminLanguage = useThemeLanguage();
+    const resolveLocalized = (value, fallback = '')=>resolveLocalizedText(value, adminLanguage, fallback);
+    const fieldLabel = resolveLocalized(field.label, 'Theme');
+    const fieldDescription = resolveLocalized(field.admin?.description);
     return /*#__PURE__*/ _jsxs("div", {
         style: {
             marginBottom: '24px'
         },
         children: [
-            /*#__PURE__*/ _jsx("label", {
-                style: {
-                    display: 'block',
-                    marginBottom: '10px',
-                    fontSize: '13px',
-                    fontWeight: 600,
-                    color: 'var(--theme-elevation-800)'
-                },
-                children: fieldLabel
-            }),
             /*#__PURE__*/ _jsxs("div", {
                 style: {
                     display: 'flex',
-                    flexWrap: 'wrap',
-                    gap: '24px',
-                    alignItems: 'flex-start'
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    marginBottom: '10px'
                 },
                 children: [
-                    /*#__PURE__*/ _jsxs("div", {
+                    /*#__PURE__*/ _jsx("div", {
+                        id: `${fieldId}-label`,
                         style: {
-                            flex: '0 0 320px',
-                            minWidth: '260px',
-                            maxWidth: '420px',
-                            display: 'grid',
-                            gap: '12px'
+                            fontSize: '13px',
+                            fontWeight: 600,
+                            color: 'var(--theme-elevation-800)'
                         },
+                        children: fieldLabel
+                    }),
+                    showPreviewPanel && /*#__PURE__*/ _jsxs("button", {
+                        type: "button",
+                        onClick: ()=>setPreviewOpen((v)=>!v),
+                        className: "theme-preview-toggle",
+                        "aria-expanded": previewOpen,
+                        "aria-controls": `${fieldId}-preview`,
+                        children: [
+                            previewOpen ? /*#__PURE__*/ _jsx(ChevronDown, {
+                                size: 12,
+                                "aria-hidden": true
+                            }) : /*#__PURE__*/ _jsx(ChevronRight, {
+                                size: 12,
+                                "aria-hidden": true
+                            }),
+                            previewOpen ? t.ui.hidePreview : t.ui.showPreview
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: `theme-preview-layout${showPreviewPanel && previewOpen ? '' : ' theme-preview-layout--single'}`,
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "theme-preset-column",
                         children: [
-                            /*#__PURE__*/ _jsx("div", {
+                            /*#__PURE__*/ _jsx(AppearanceLocks, {}),
+                            /*#__PURE__*/ _jsx(AppearanceUndoBar, {
+                                sources: [
+                                    'theme',
+                                    'palette'
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(PaletteGeneratorField, {}),
+                            /*#__PURE__*/ _jsxs("button", {
+                                type: "button",
+                                className: `theme-preset-summary${presetsOpen ? ' is-open' : ''}`,
+                                onClick: ()=>setPresetsOpen((v)=>!v),
+                                "aria-expanded": presetsOpen,
+                                "aria-controls": `${fieldId}-presets`,
+                                "aria-label": activePreset ? `${t.ui.choosePreset}: ${activePreset.label}` : t.ui.choosePreset,
+                                children: [
+                                    presetsOpen ? /*#__PURE__*/ _jsx(ChevronDown, {
+                                        size: 14,
+                                        "aria-hidden": true
+                                    }) : /*#__PURE__*/ _jsx(ChevronRight, {
+                                        size: 14,
+                                        "aria-hidden": true
+                                    }),
+                                    /*#__PURE__*/ _jsxs("span", {
+                                        className: "theme-preset-summary__info",
+                                        children: [
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: "theme-label",
+                                                children: activePreset?.label ?? t.ui.choosePreset
+                                            }),
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: "theme-name",
+                                                children: `${presetCount} ${t.ui.presetCount}`
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: "theme-swatches",
+                                        "aria-hidden": "true",
+                                        children: summarySwatches.map((color, index)=>/*#__PURE__*/ _jsx("span", {
+                                                className: "color-swatch",
+                                                style: {
+                                                    backgroundColor: color
+                                                }
+                                            }, `summary-swatch-${color}-${index}`))
+                                    })
+                                ]
+                            }),
+                            presetsOpen && /*#__PURE__*/ _jsx("div", {
                                 className: "theme-preset-list",
+                                id: `${fieldId}-presets`,
+                                role: "group",
+                                "aria-labelledby": `${fieldId}-label`,
                                 children: Object.entries(runtimeThemePresets).map(([key, preset])=>{
                                     const isSelected = key === selectedTheme;
                                     const swatches = highlightSwatches.map(({ key: colorKey })=>preset.lightMode[colorKey]).filter((v)=>typeof v === 'string' && v.trim().length > 0);
                                     return /*#__PURE__*/ _jsxs("button", {
                                         type: "button",
+                                        "aria-pressed": isSelected,
                                         onClick: ()=>handleThemeSelect(key),
                                         className: `theme-preset-button ${isSelected ? 'selected' : ''}`,
                                         children: [
-                                            /*#__PURE__*/ _jsxs("div", {
+                                            /*#__PURE__*/ _jsx("div", {
                                                 className: "theme-info",
-                                                children: [
-                                                    /*#__PURE__*/ _jsx("span", {
-                                                        className: "theme-label",
-                                                        children: preset.label
-                                                    }),
-                                                    /*#__PURE__*/ _jsx("span", {
-                                                        className: "theme-name",
-                                                        children: key
-                                                    })
-                                                ]
+                                                children: /*#__PURE__*/ _jsx("span", {
+                                                    className: "theme-label",
+                                                    children: preset.label
+                                                })
                                             }),
                                             /*#__PURE__*/ _jsx("div", {
                                                 className: "theme-swatches",
@@ -491,99 +655,19 @@ export default function ThemePreviewField(props) {
                                     }, key);
                                 })
                             }),
-                            activePreset && /*#__PURE__*/ _jsxs("div", {
-                                style: {
-                                    padding: '12px',
-                                    borderRadius: '10px',
-                                    border: '1px solid var(--theme-elevation-200)',
-                                    backgroundColor: 'var(--theme-elevation-50)',
-                                    display: 'grid',
-                                    gap: '8px',
-                                    fontSize: '12px',
-                                    color: 'var(--theme-elevation-600)'
-                                },
-                                children: [
-                                    /*#__PURE__*/ _jsx("div", {
-                                        style: {
-                                            fontWeight: 600,
-                                            color: 'var(--theme-elevation-800)'
-                                        },
-                                        children: activePreset.label
-                                    }),
-                                    /*#__PURE__*/ _jsxs("div", {
-                                        children: [
-                                            "Primary color: ",
-                                            activePreset.lightMode.primary
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ _jsxs("div", {
-                                        children: [
-                                            "Accent color: ",
-                                            activePreset.lightMode.accent
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ _jsx("div", {
-                                        style: {
-                                            display: 'flex',
-                                            flexWrap: 'wrap',
-                                            gap: '12px',
-                                            marginTop: '4px'
-                                        },
-                                        children: highlightSwatches.map(({ key, label })=>{
-                                            const swatchValue = activePreset.lightMode[key];
-                                            if (!swatchValue) {
-                                                return null;
-                                            }
-                                            return /*#__PURE__*/ _jsxs("div", {
-                                                style: {
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    gap: '6px',
-                                                    minWidth: 'fit-content'
-                                                },
-                                                children: [
-                                                    /*#__PURE__*/ _jsx("span", {
-                                                        style: {
-                                                            width: '22px',
-                                                            height: '22px',
-                                                            borderRadius: '999px',
-                                                            border: '1px solid rgba(15, 23, 42, 0.12)',
-                                                            backgroundColor: swatchValue,
-                                                            boxShadow: 'inset 0 1px 2px rgba(15, 23, 42, 0.08)'
-                                                        },
-                                                        "aria-hidden": "true"
-                                                    }),
-                                                    /*#__PURE__*/ _jsx("span", {
-                                                        style: {
-                                                            fontSize: '11px',
-                                                            color: 'var(--theme-elevation-700)'
-                                                        },
-                                                        children: label
-                                                    })
-                                                ]
-                                            }, key);
-                                        })
-                                    })
-                                ]
-                            }),
-                            field.admin?.description && /*#__PURE__*/ _jsx("div", {
+                            fieldDescription && /*#__PURE__*/ _jsx("div", {
                                 style: {
                                     fontSize: '12px',
                                     color: 'var(--theme-elevation-600)',
                                     lineHeight: 1.5
                                 },
-                                children: typeof field.admin.description === 'string' ? field.admin.description : field.admin.description?.en || field.admin.description?.cs || ''
+                                children: fieldDescription
                             })
                         ]
                     }),
-                    showPreviewPanel && /*#__PURE__*/ _jsx("div", {
-                        style: {
-                            flex: '1 1 420px',
-                            minWidth: '320px',
-                            position: 'sticky',
-                            top: '96px',
-                            alignSelf: 'flex-start'
-                        },
+                    showPreviewPanel && previewOpen && /*#__PURE__*/ _jsx("div", {
+                        className: "theme-preview-panel",
+                        id: `${fieldId}-preview`,
                         children: /*#__PURE__*/ _jsxs("div", {
                             style: {
                                 width: '100%',
@@ -607,15 +691,26 @@ export default function ThemePreviewField(props) {
                                         color: 'var(--theme-elevation-800)'
                                     },
                                     children: [
-                                        /*#__PURE__*/ _jsx("span", {
-                                            children: getTranslations('en').livePreview.smallTitle
+                                        /*#__PURE__*/ _jsxs("span", {
+                                            style: {
+                                                display: 'inline-flex',
+                                                alignItems: 'center',
+                                                gap: '6px'
+                                            },
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Palette, {
+                                                    size: 14,
+                                                    "aria-hidden": true
+                                                }),
+                                                t.ui.colorsAndTypography
+                                            ]
                                         }),
                                         /*#__PURE__*/ _jsx("span", {
                                             style: {
                                                 fontSize: '12px',
                                                 color: 'var(--theme-elevation-600)'
                                             },
-                                            children: activePreset ? activePreset.label : getTranslations('en').preview.customPalette
+                                            children: activePreset ? activePreset.label : t.preview.customPalette
                                         })
                                     ]
                                 }),
@@ -626,15 +721,15 @@ export default function ThemePreviewField(props) {
                                     },
                                     children: [
                                         /*#__PURE__*/ _jsx(ModePreview, {
-                                            icon: "☀️",
-                                            title: getTranslations('en').ui.lightMode,
+                                            icon: Sun,
+                                            title: t.ui.lightMode,
                                             colors: lightModeColors,
                                             typography: previewTypography,
                                             radius: previewRadius
                                         }),
                                         /*#__PURE__*/ _jsx(ModePreview, {
-                                            icon: "🌙",
-                                            title: getTranslations('en').ui.darkMode,
+                                            icon: Moon,
+                                            title: t.ui.darkMode,
                                             colors: darkModeColors,
                                             typography: previewTypography,
                                             radius: previewRadius