@kilivi/payloadcms-theme-management 0.1.1

package/dist/fields/ThemePreviewField.js

@@ -0,0 +1,336 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+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 (_jsxs("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,
+        }, children: [_jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    fontSize: '12px',
+                    fontWeight: 600,
+                    letterSpacing: '0.08em',
+                    textTransform: 'uppercase',
+                    opacity: 0.7,
+                }, children: [_jsxs("span", { children: [icon, " ", title] }), _jsx("span", { style: { fontFamily: 'monospace', fontSize: '11px' }, children: background.toUpperCase() })] }), _jsxs("div", { style: {
+                    backgroundColor: cardBackground,
+                    color: cardForeground,
+                    borderRadius: radius.card,
+                    border: `1px solid ${borderColor}`,
+                    padding: '16px',
+                    display: 'flex',
+                    gap: '12px',
+                    flexWrap: 'wrap',
+                }, children: [_jsx("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)',
+                        }, children: "Primary Action" }), _jsx("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)',
+                        }, children: "Secondary" })] }), _jsxs("div", { style: {
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',
+                    gap: '10px',
+                }, children: [_jsx("div", { style: {
+                            borderRadius: radius.chip,
+                            padding: '10px 12px',
+                            fontSize: '12px',
+                            fontWeight: 500,
+                            backgroundColor: muted,
+                            color: mutedForeground,
+                        }, children: "Muted Card" }), _jsx("div", { style: {
+                            borderRadius: radius.chip,
+                            padding: '10px 12px',
+                            fontSize: '12px',
+                            fontWeight: 500,
+                            backgroundColor: accent,
+                            color: accentForeground,
+                        }, children: "Accent Tag" })] }), _jsxs("div", { style: {
+                    display: 'grid',
+                    gap: '8px',
+                    borderRadius: '10px',
+                    border: `1px dashed ${borderColor}`,
+                    padding: '14px',
+                    backgroundColor: 'rgba(148, 163, 184, 0.08)',
+                }, children: [_jsx("div", { style: {
+                            fontFamily: headingFont,
+                            fontSize: 'clamp(24px, 3vw, 32px)',
+                            fontWeight: 600,
+                            lineHeight: 1.2,
+                        }, children: "Nadpis / Heading preview" }), _jsx("p", { style: {
+                            margin: 0,
+                            fontFamily: bodyFont,
+                            fontSize: baseFontSize,
+                            lineHeight,
+                            color: foreground,
+                            opacity: 0.85,
+                        }, children: "Sphinx of black quartz, judge my vow. P\u0159\u00EDli\u0161 \u017Elu\u0165ou\u010Dk\u00FD k\u016F\u0148 \u00FAp\u011Bl \u010F\u00E1belsk\u00E9 \u00F3dy." }), _jsxs("div", { style: {
+                            display: 'flex',
+                            flexWrap: 'wrap',
+                            gap: '10px',
+                            fontSize: '11px',
+                            color: 'rgba(15, 23, 42, 0.7)',
+                        }, children: [_jsxs("span", { children: ["Body: ", typography.bodyLabel] }), _jsxs("span", { children: ["Heading: ", typography.headingLabel] }), _jsxs("span", { children: ["Base size: ", baseFontSize] }), _jsxs("span", { children: ["Line height: ", lineHeight] })] })] })] }));
+}
+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 (_jsxs("div", { style: { marginBottom: '24px' }, children: [_jsx("label", { style: {
+                    display: 'block',
+                    marginBottom: '10px',
+                    fontSize: '13px',
+                    fontWeight: 600,
+                    color: 'var(--theme-elevation-800)',
+                }, children: fieldLabel }), _jsxs("div", { style: {
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    gap: '24px',
+                    alignItems: 'flex-start',
+                }, children: [_jsxs("div", { style: {
+                            flex: '0 0 320px',
+                            minWidth: '260px',
+                            maxWidth: '420px',
+                            display: 'grid',
+                            gap: '12px',
+                        }, children: [_jsxs("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',
+                                }, children: [_jsx("option", { value: "", children: "Select a theme\u2026" }), Object.entries(themePresets).map(([key, preset]) => (_jsx("option", { value: key, children: preset.label }, key)))] }), activePreset && (_jsxs("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)',
+                                }, children: [_jsx("div", { style: { fontWeight: 600, color: 'var(--theme-elevation-800)' }, children: activePreset.label }), _jsxs("div", { children: ["Primary color: ", activePreset.lightMode.primary] }), _jsxs("div", { children: ["Accent color: ", activePreset.lightMode.accent] })] })), field.admin?.description && (_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 || '' }))] }), _jsx("div", { style: {
+                            flex: '1 1 420px',
+                            minWidth: '320px',
+                            position: 'sticky',
+                            top: '96px',
+                            alignSelf: 'flex-start',
+                        }, children: _jsxs("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',
+                            }, children: [_jsxs("div", { style: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'space-between',
+                                        fontWeight: 600,
+                                        fontSize: '13px',
+                                        color: 'var(--theme-elevation-800)',
+                                    }, children: [_jsx("span", { children: "\uD83C\uDFA8 Live Preview" }), _jsx("span", { style: { fontSize: '12px', color: 'var(--theme-elevation-600)' }, children: activePreset ? activePreset.label : 'Custom palette' })] }), _jsxs("div", { style: {
+                                        display: 'grid',
+                                        gap: '16px',
+                                    }, children: [_jsx(ModePreview, { icon: "\u2600\uFE0F", title: "Light Mode", colors: lightModeColors, typography: previewTypography, radius: previewRadius }), _jsx(ModePreview, { icon: "\uD83C\uDF19", title: "Dark Mode", colors: darkModeColors, typography: previewTypography, radius: previewRadius })] })] }) })] })] }));
+}
+//# sourceMappingURL=ThemePreviewField.js.map

package/dist/fields/ThemePreviewField.js.map

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

package/dist/fields/ThemeTokenSelectField.d.ts

@@ -0,0 +1,3 @@
+import type { SelectFieldClientProps } from 'payload';
+export default function ThemeTokenSelectField(props: SelectFieldClientProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ThemeTokenSelectField.d.ts.map

package/dist/fields/ThemeTokenSelectField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeTokenSelectField.d.ts","sourceRoot":"","sources":["../../src/fields/ThemeTokenSelectField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAkFrD,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,KAAK,EAAE,sBAAsB,2CA8H1E"}

package/dist/fields/ThemeTokenSelectField.js

@@ -0,0 +1,128 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useField } from '@payloadcms/ui';
+import { useCallback, useEffect, useState } from 'react';
+import { defaultThemePresets } from '../presets';
+import { resolveThemeConfiguration } from '../utils/resolveThemeConfiguration';
+const FALLBACK_TOKENS = [
+    { value: 'background', label: 'Theme background', color: 'var(--background)' },
+    { value: 'card', label: 'Card background', color: 'var(--card)' },
+    { value: 'muted', label: 'Muted surface', color: 'var(--muted)' },
+    { value: 'accent', label: 'Accent surface', color: 'var(--accent)' },
+    { value: 'secondary', label: 'Secondary surface', color: 'var(--secondary)' },
+    { value: 'primary', label: 'Primary surface', color: 'var(--primary)' },
+];
+async function fetchThemeConfiguration() {
+    try {
+        const response = await fetch('/api/site-settings');
+        if (!response.ok) {
+            return null;
+        }
+        const data = await response.json();
+        return data?.docs?.[0]?.themeConfiguration ?? null;
+    }
+    catch (error) {
+        console.warn('[ThemeTokenSelectField] Failed to fetch theme configuration:', error);
+        return null;
+    }
+}
+function buildOptionsFromConfiguration(configuration) {
+    if (!configuration) {
+        return FALLBACK_TOKENS;
+    }
+    const resolved = resolveThemeConfiguration(configuration);
+    const lightMode = resolved.lightMode ?? defaultThemePresets[0]?.lightMode ?? {};
+    const orderedKeys = [
+        'background',
+        'card',
+        'muted',
+        'accent',
+        'secondary',
+        'primary',
+        'popover',
+    ];
+    const typedLightMode = lightMode;
+    const tokens = orderedKeys
+        .map((key) => {
+        const value = typedLightMode?.[key];
+        if (typeof value !== 'string' || value.trim().length === 0) {
+            return null;
+        }
+        const labelMap = {
+            background: 'Theme background',
+            card: 'Card background',
+            muted: 'Muted surface',
+            accent: 'Accent surface',
+            secondary: 'Secondary surface',
+            primary: 'Primary surface',
+            popover: 'Popover surface',
+        };
+        return {
+            value: key,
+            label: labelMap[key] ?? key,
+            color: value,
+        };
+    })
+        .filter((token) => Boolean(token));
+    return tokens.length > 0 ? tokens : FALLBACK_TOKENS;
+}
+export default function ThemeTokenSelectField(props) {
+    const { path, field } = props;
+    const { value, setValue } = useField({ path });
+    const [options, setOptions] = useState(FALLBACK_TOKENS);
+    const selectedValue = value || 'background';
+    useEffect(() => {
+        let isMounted = true;
+        fetchThemeConfiguration().then((configuration) => {
+            if (!isMounted)
+                return;
+            setOptions(buildOptionsFromConfiguration(configuration));
+        });
+        return () => {
+            isMounted = false;
+        };
+    }, []);
+    const handleSelect = useCallback((nextValue) => {
+        setValue(nextValue);
+    }, [setValue]);
+    const label = typeof field.label === 'string' ? field.label : '';
+    let description = '';
+    if (typeof field.admin?.description === 'string') {
+        description = field.admin.description;
+    }
+    else if (field.admin?.description &&
+        typeof field.admin.description === 'object' &&
+        typeof field.admin.description.en === 'string') {
+        description = field.admin.description.en;
+    }
+    return (_jsxs("div", { className: "field-type theme-token-select", children: [label && (_jsxs("label", { className: "field-label", htmlFor: path, style: { display: 'block', marginBottom: '8px' }, children: [label, field.required && _jsx("span", { className: "required", children: "*" })] })), description && (_jsx("div", { className: "field-description", style: { marginBottom: '12px', fontSize: '13px', color: 'var(--theme-elevation-500)' }, children: description })), _jsx("div", { className: "token-grid", style: {
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
+                    gap: '10px',
+                }, children: options.map((option) => {
+                    const isActive = option.value === selectedValue;
+                    return (_jsxs("button", { type: "button", onClick: () => handleSelect(option.value), style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '10px',
+                            padding: '10px 12px',
+                            borderRadius: '10px',
+                            border: isActive
+                                ? '2px solid var(--theme-primary-500)'
+                                : '1px solid var(--theme-elevation-150)',
+                            backgroundColor: 'var(--theme-elevation-0)',
+                            boxShadow: isActive
+                                ? '0 10px 20px -10px rgba(59, 130, 246, 0.4)'
+                                : '0 1px 2px rgba(15, 23, 42, 0.08)',
+                            cursor: 'pointer',
+                            transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
+                        }, children: [_jsx("span", { "aria-hidden": true, style: {
+                                    width: '32px',
+                                    height: '32px',
+                                    borderRadius: '8px',
+                                    border: '1px solid rgba(15, 23, 42, 0.08)',
+                                    background: option.color,
+                                } }), _jsx("span", { style: { fontSize: '13px', fontWeight: 600, color: 'var(--theme-elevation-800)' }, children: option.label })] }, option.value));
+                }) }), _jsx("select", { id: path, value: selectedValue, onChange: (event) => handleSelect(event.target.value), style: { display: 'none' }, children: options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) })] }));
+}
+//# sourceMappingURL=ThemeTokenSelectField.js.map

package/dist/fields/ThemeTokenSelectField.js.map

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

package/dist/fields/colorModeFields.d.ts

@@ -0,0 +1,10 @@
+import type { Field } from 'payload';
+declare const colorFieldKeys: readonly ["background", "foreground", "primary", "primaryForeground", "card", "cardForeground", "popover", "popoverForeground", "secondary", "secondaryForeground", "muted", "mutedForeground", "accent", "accentForeground", "destructive", "destructiveForeground", "border", "input", "ring"];
+type ColorToken = (typeof colorFieldKeys)[number];
+type ColorPalette = Record<ColorToken, string>;
+export declare const lightModeDefaults: ColorPalette;
+export declare const darkModeDefaults: ColorPalette;
+export declare const lightModeField: Field;
+export declare const darkModeField: Field;
+export {};
+//# sourceMappingURL=colorModeFields.d.ts.map

package/dist/fields/colorModeFields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorModeFields.d.ts","sourceRoot":"","sources":["../../src/fields/colorModeFields.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAMpC,QAAA,MAAM,cAAc,kSAoBV,CAAA;AAEV,KAAK,UAAU,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAQjD,KAAK,YAAY,GAAG,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAA;AA0H9C,eAAO,MAAM,iBAAiB,EAAE,YAoB/B,CAAA;AAGD,eAAO,MAAM,gBAAgB,EAAE,YAoB9B,CAAA;AAiBD,eAAO,MAAM,cAAc,EAAE,KAoB5B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAoB3B,CAAA"}