@kilivi/payloadcms-theme-management 1.1.2 → 2.1.0

package/dist/fields/colorFieldHelpers.d.ts

@@ -0,0 +1,90 @@
+import type { Field, GroupField } from 'payload';
+/**
+ * Out-of-the-box field builders for adding theme-aware colour controls to ANY
+ * Payload collection/block/global — without hand-writing the radio + token-select
+ * + colour-picker boilerplate every time.
+ *
+ * Pair these builders with {@link resolveColorValue} on the front-end to turn the
+ * stored value into a ready-to-use CSS colour string.
+ */
+type LocalizedLabel = string | {
+    [locale: string]: string;
+};
+export type ColorGroupOptions = {
+    /** Field label (bilingual object or plain string). */
+    label?: LocalizedLabel;
+    /** Whether the editor starts on the theme token or a custom colour. Default: `'theme'`. */
+    defaultSource?: 'theme' | 'custom';
+    /** Placeholder shown in the custom colour input. Default: `'#1d4ed8'`. */
+    placeholder?: string;
+    /** Description shown under the custom colour input. */
+    customDescription?: LocalizedLabel;
+    /** Description shown under the theme-token select. */
+    themeDescription?: LocalizedLabel;
+    /** Make the whole group required. */
+    required?: boolean;
+    /** Extra admin.condition applied to the whole group. */
+    condition?: GroupField['admin'] extends {
+        condition?: infer C;
+    } ? C : never;
+};
+/**
+ * A theme-aware colour group: editors pick either a colour token from the active
+ * theme (rendered with live swatches) or a fully custom HEX/HSL/RGB/CSS value.
+ *
+ * The stored shape is:
+ * ```ts
+ * { source: 'theme' | 'custom', themeToken?: string, customColor?: string }
+ * ```
+ *
+ * Resolve it on the front-end with {@link resolveColorValue}.
+ *
+ * @example
+ * ```ts
+ * import { createColorGroup } from '@kilivi/payloadcms-theme-management/fields/colorFieldHelpers'
+ *
+ * fields: [
+ *   createColorGroup('sectionBackground', { label: { en: 'Background', cs: 'Pozadí' } }),
+ * ]
+ * ```
+ */
+export declare const createColorGroup: (name: string, options?: ColorGroupOptions) => GroupField;
+/**
+ * A single, always-custom colour field backed by the visual colour picker.
+ * Use when you don't need the theme-token option.
+ *
+ * @example
+ * ```ts
+ * createColorField('badgeColor', { label: { en: 'Badge color', cs: 'Barva odznaku' } })
+ * ```
+ */
+export declare const createColorField: (name: string, options?: {
+    label?: LocalizedLabel;
+    placeholder?: string;
+    description?: LocalizedLabel;
+    required?: boolean;
+}) => Field;
+/** Shape produced by {@link createColorGroup}. */
+export type ColorGroupValue = {
+    source?: 'theme' | 'custom' | null;
+    themeToken?: string | null;
+    customColor?: string | null;
+};
+/**
+ * Turn a stored {@link createColorGroup} value into a CSS colour string.
+ *
+ * - `source: 'theme'` → `var(--<token>)`
+ * - `source: 'custom'` → the raw custom value
+ *
+ * @param value   The stored group value.
+ * @param fallback Returned when nothing usable is set. Defaults to `undefined`.
+ *
+ * @example
+ * ```tsx
+ * const bg = resolveColorValue(data.appearance?.sectionBackground, 'var(--background)')
+ * <section style={{ background: bg }} />
+ * ```
+ */
+export declare const resolveColorValue: (value: ColorGroupValue | null | undefined, fallback?: string) => string | undefined;
+export {};
+//# sourceMappingURL=colorFieldHelpers.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"colorFieldHelpers.d.ts","sourceRoot":"","sources":["../../src/fields/colorFieldHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEhD;;;;;;;GAOG;AAEH,KAAK,cAAc,GAAG,MAAM,GAAG;IAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAA;AAI3D,MAAM,MAAM,iBAAiB,GAAG;IAC9B,sDAAsD;IACtD,KAAK,CAAC,EAAE,cAAc,CAAA;IACtB,2FAA2F;IAC3F,aAAa,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAClC,0EAA0E;IAC1E,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uDAAuD;IACvD,iBAAiB,CAAC,EAAE,cAAc,CAAA;IAClC,sDAAsD;IACtD,gBAAgB,CAAC,EAAE,cAAc,CAAA;IACjC,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wDAAwD;IACxD,SAAS,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,SAAS;QAAE,SAAS,CAAC,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,KAAK,CAAA;CAC5E,CAAA;AAID;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,gBAAgB,GAC3B,MAAM,MAAM,EACZ,UAAS,iBAAsB,KAC9B,UA2DF,CAAA;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,GAC3B,MAAM,MAAM,EACZ,UAAS;IAAE,KAAK,CAAC,EAAE,cAAc,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,cAAc,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAO,KAC/G,KAcD,CAAA;AAEF,kDAAkD;AAClD,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,IAAI,CAAA;IAClC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC5B,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,iBAAiB,GAC5B,OAAO,eAAe,GAAG,IAAI,GAAG,SAAS,EACzC,WAAW,MAAM,KAChB,MAAM,GAAG,SAkBX,CAAA"}

package/dist/fields/colorFieldHelpers.js

@@ -0,0 +1,133 @@
+const FIELD_PREFIX = '@kilivi/payloadcms-theme-management/fields';
+const text = (en, cs)=>({
+        en,
+        cs
+    });
+/**
+ * A theme-aware colour group: editors pick either a colour token from the active
+ * theme (rendered with live swatches) or a fully custom HEX/HSL/RGB/CSS value.
+ *
+ * The stored shape is:
+ * ```ts
+ * { source: 'theme' | 'custom', themeToken?: string, customColor?: string }
+ * ```
+ *
+ * Resolve it on the front-end with {@link resolveColorValue}.
+ *
+ * @example
+ * ```ts
+ * import { createColorGroup } from '@kilivi/payloadcms-theme-management/fields/colorFieldHelpers'
+ *
+ * fields: [
+ *   createColorGroup('sectionBackground', { label: { en: 'Background', cs: 'Pozadí' } }),
+ * ]
+ * ```
+ */ export const createColorGroup = (name, options = {})=>{
+    const { label, defaultSource = 'theme', placeholder = '#1d4ed8', customDescription = text('HEX, HSL, RGB or CSS variable (e.g. var(--primary))', 'HEX, HSL, RGB nebo CSS proměnná (např. var(--primary))'), themeDescription = text('Pick a color from the active theme', 'Vyberte barvu z aktivního tématu'), required, condition } = options;
+    return {
+        name,
+        type: 'group',
+        label: label ?? false,
+        admin: condition ? {
+            condition
+        } : undefined,
+        fields: [
+            {
+                name: 'source',
+                type: 'radio',
+                label: text('Color source', 'Zdroj barvy'),
+                defaultValue: defaultSource,
+                required,
+                options: [
+                    {
+                        label: text('Theme color', 'Barva tématu'),
+                        value: 'theme'
+                    },
+                    {
+                        label: text('Custom color', 'Vlastní barva'),
+                        value: 'custom'
+                    }
+                ],
+                admin: {
+                    layout: 'horizontal'
+                }
+            },
+            {
+                name: 'themeToken',
+                type: 'text',
+                label: text('Theme color token', 'Token barvy tématu'),
+                admin: {
+                    description: themeDescription,
+                    components: {
+                        Field: `${FIELD_PREFIX}/ThemeTokenSelectField`
+                    },
+                    condition: (_, siblingData)=>siblingData?.source !== 'custom'
+                }
+            },
+            {
+                name: 'customColor',
+                type: 'text',
+                label: text('Custom color', 'Vlastní barva'),
+                admin: {
+                    placeholder,
+                    description: customDescription,
+                    components: {
+                        Field: `${FIELD_PREFIX}/ColorPickerField`
+                    },
+                    condition: (_, siblingData)=>siblingData?.source === 'custom'
+                }
+            }
+        ]
+    };
+};
+/**
+ * A single, always-custom colour field backed by the visual colour picker.
+ * Use when you don't need the theme-token option.
+ *
+ * @example
+ * ```ts
+ * createColorField('badgeColor', { label: { en: 'Badge color', cs: 'Barva odznaku' } })
+ * ```
+ */ export const createColorField = (name, options = {})=>({
+        name,
+        type: 'text',
+        label: options.label ?? false,
+        required: options.required,
+        admin: {
+            placeholder: options.placeholder ?? '#1d4ed8',
+            description: options.description ?? text('HEX, HSL, RGB or CSS variable', 'HEX, HSL, RGB nebo CSS proměnná'),
+            components: {
+                Field: `${FIELD_PREFIX}/ColorPickerField`
+            }
+        }
+    });
+/**
+ * Turn a stored {@link createColorGroup} value into a CSS colour string.
+ *
+ * - `source: 'theme'` → `var(--<token>)`
+ * - `source: 'custom'` → the raw custom value
+ *
+ * @param value   The stored group value.
+ * @param fallback Returned when nothing usable is set. Defaults to `undefined`.
+ *
+ * @example
+ * ```tsx
+ * const bg = resolveColorValue(data.appearance?.sectionBackground, 'var(--background)')
+ * <section style={{ background: bg }} />
+ * ```
+ */ export const resolveColorValue = (value, fallback)=>{
+    if (!value) return fallback;
+    if (value.source === 'custom') {
+        const custom = value.customColor?.trim();
+        return custom && custom.length > 0 ? custom : fallback;
+    }
+    // Default to theme token (covers source === 'theme' and unset).
+    const token = value.themeToken?.trim();
+    if (token && token.length > 0) {
+        // Allow callers to store either a bare token (`primary`) or a full expression.
+        return token.startsWith('var(') || token.includes('(') || token.startsWith('#') ? token : `var(--${token})`;
+    }
+    return fallback;
+};
+
+//# sourceMappingURL=colorFieldHelpers.js.map

package/dist/fields/colorFieldHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/fields/colorFieldHelpers.ts"],"sourcesContent":["import type { Field, GroupField } from 'payload'\n\n/**\n * Out-of-the-box field builders for adding theme-aware colour controls to ANY\n * Payload collection/block/global — without hand-writing the radio + token-select\n * + colour-picker boilerplate every time.\n *\n * Pair these builders with {@link resolveColorValue} on the front-end to turn the\n * stored value into a ready-to-use CSS colour string.\n */\n\ntype LocalizedLabel = string | { [locale: string]: string }\n\nconst FIELD_PREFIX = '@kilivi/payloadcms-theme-management/fields'\n\nexport type ColorGroupOptions = {\n  /** Field label (bilingual object or plain string). */\n  label?: LocalizedLabel\n  /** Whether the editor starts on the theme token or a custom colour. Default: `'theme'`. */\n  defaultSource?: 'theme' | 'custom'\n  /** Placeholder shown in the custom colour input. Default: `'#1d4ed8'`. */\n  placeholder?: string\n  /** Description shown under the custom colour input. */\n  customDescription?: LocalizedLabel\n  /** Description shown under the theme-token select. */\n  themeDescription?: LocalizedLabel\n  /** Make the whole group required. */\n  required?: boolean\n  /** Extra admin.condition applied to the whole group. */\n  condition?: GroupField['admin'] extends { condition?: infer C } ? C : never\n}\n\nconst text = (en: string, cs: string) => ({ en, cs })\n\n/**\n * A theme-aware colour group: editors pick either a colour token from the active\n * theme (rendered with live swatches) or a fully custom HEX/HSL/RGB/CSS value.\n *\n * The stored shape is:\n * ```ts\n * { source: 'theme' | 'custom', themeToken?: string, customColor?: string }\n * ```\n *\n * Resolve it on the front-end with {@link resolveColorValue}.\n *\n * @example\n * ```ts\n * import { createColorGroup } from '@kilivi/payloadcms-theme-management/fields/colorFieldHelpers'\n *\n * fields: [\n *   createColorGroup('sectionBackground', { label: { en: 'Background', cs: 'Pozadí' } }),\n * ]\n * ```\n */\nexport const createColorGroup = (\n  name: string,\n  options: ColorGroupOptions = {},\n): GroupField => {\n  const {\n    label,\n    defaultSource = 'theme',\n    placeholder = '#1d4ed8',\n    customDescription = text(\n      'HEX, HSL, RGB or CSS variable (e.g. var(--primary))',\n      'HEX, HSL, RGB nebo CSS proměnná (např. var(--primary))',\n    ),\n    themeDescription = text('Pick a color from the active theme', 'Vyberte barvu z aktivního tématu'),\n    required,\n    condition,\n  } = options\n\n  return {\n    name,\n    type: 'group',\n    label: label ?? false,\n    admin: condition ? { condition } : undefined,\n    fields: [\n      {\n        name: 'source',\n        type: 'radio',\n        label: text('Color source', 'Zdroj barvy'),\n        defaultValue: defaultSource,\n        required,\n        options: [\n          { label: text('Theme color', 'Barva tématu'), value: 'theme' },\n          { label: text('Custom color', 'Vlastní barva'), value: 'custom' },\n        ],\n        admin: { layout: 'horizontal' },\n      },\n      {\n        name: 'themeToken',\n        type: 'text',\n        label: text('Theme color token', 'Token barvy tématu'),\n        admin: {\n          description: themeDescription,\n          components: {\n            Field: `${FIELD_PREFIX}/ThemeTokenSelectField`,\n          },\n          condition: (_, siblingData) => siblingData?.source !== 'custom',\n        },\n      },\n      {\n        name: 'customColor',\n        type: 'text',\n        label: text('Custom color', 'Vlastní barva'),\n        admin: {\n          placeholder,\n          description: customDescription,\n          components: {\n            Field: `${FIELD_PREFIX}/ColorPickerField`,\n          },\n          condition: (_, siblingData) => siblingData?.source === 'custom',\n        },\n      },\n    ],\n  }\n}\n\n/**\n * A single, always-custom colour field backed by the visual colour picker.\n * Use when you don't need the theme-token option.\n *\n * @example\n * ```ts\n * createColorField('badgeColor', { label: { en: 'Badge color', cs: 'Barva odznaku' } })\n * ```\n */\nexport const createColorField = (\n  name: string,\n  options: { label?: LocalizedLabel; placeholder?: string; description?: LocalizedLabel; required?: boolean } = {},\n): Field => ({\n  name,\n  type: 'text',\n  label: options.label ?? false,\n  required: options.required,\n  admin: {\n    placeholder: options.placeholder ?? '#1d4ed8',\n    description:\n      options.description ??\n      text('HEX, HSL, RGB or CSS variable', 'HEX, HSL, RGB nebo CSS proměnná'),\n    components: {\n      Field: `${FIELD_PREFIX}/ColorPickerField`,\n    },\n  },\n})\n\n/** Shape produced by {@link createColorGroup}. */\nexport type ColorGroupValue = {\n  source?: 'theme' | 'custom' | null\n  themeToken?: string | null\n  customColor?: string | null\n}\n\n/**\n * Turn a stored {@link createColorGroup} value into a CSS colour string.\n *\n * - `source: 'theme'` → `var(--<token>)`\n * - `source: 'custom'` → the raw custom value\n *\n * @param value   The stored group value.\n * @param fallback Returned when nothing usable is set. Defaults to `undefined`.\n *\n * @example\n * ```tsx\n * const bg = resolveColorValue(data.appearance?.sectionBackground, 'var(--background)')\n * <section style={{ background: bg }} />\n * ```\n */\nexport const resolveColorValue = (\n  value: ColorGroupValue | null | undefined,\n  fallback?: string,\n): string | undefined => {\n  if (!value) return fallback\n\n  if (value.source === 'custom') {\n    const custom = value.customColor?.trim()\n    return custom && custom.length > 0 ? custom : fallback\n  }\n\n  // Default to theme token (covers source === 'theme' and unset).\n  const token = value.themeToken?.trim()\n  if (token && token.length > 0) {\n    // Allow callers to store either a bare token (`primary`) or a full expression.\n    return token.startsWith('var(') || token.includes('(') || token.startsWith('#')\n      ? token\n      : `var(--${token})`\n  }\n\n  return fallback\n}\n"],"names":["FIELD_PREFIX","text","en","cs","createColorGroup","name","options","label","defaultSource","placeholder","customDescription","themeDescription","required","condition","type","admin","undefined","fields","defaultValue","value","layout","description","components","Field","_","siblingData","source","createColorField","resolveColorValue","fallback","custom","customColor","trim","length","token","themeToken","startsWith","includes"],"mappings":"AAaA,MAAMA,eAAe;AAmBrB,MAAMC,OAAO,CAACC,IAAYC,KAAgB,CAAA;QAAED;QAAIC;IAAG,CAAA;AAEnD;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,MAAMC,mBAAmB,CAC9BC,MACAC,UAA6B,CAAC,CAAC;IAE/B,MAAM,EACJC,KAAK,EACLC,gBAAgB,OAAO,EACvBC,cAAc,SAAS,EACvBC,oBAAoBT,KAClB,uDACA,yDACD,EACDU,mBAAmBV,KAAK,sCAAsC,mCAAmC,EACjGW,QAAQ,EACRC,SAAS,EACV,GAAGP;IAEJ,OAAO;QACLD;QACAS,MAAM;QACNP,OAAOA,SAAS;QAChBQ,OAAOF,YAAY;YAAEA;QAAU,IAAIG;QACnCC,QAAQ;YACN;gBACEZ,MAAM;gBACNS,MAAM;gBACNP,OAAON,KAAK,gBAAgB;gBAC5BiB,cAAcV;gBACdI;gBACAN,SAAS;oBACP;wBAAEC,OAAON,KAAK,eAAe;wBAAiBkB,OAAO;oBAAQ;oBAC7D;wBAAEZ,OAAON,KAAK,gBAAgB;wBAAkBkB,OAAO;oBAAS;iBACjE;gBACDJ,OAAO;oBAAEK,QAAQ;gBAAa;YAChC;YACA;gBACEf,MAAM;gBACNS,MAAM;gBACNP,OAAON,KAAK,qBAAqB;gBACjCc,OAAO;oBACLM,aAAaV;oBACbW,YAAY;wBACVC,OAAO,GAAGvB,aAAa,sBAAsB,CAAC;oBAChD;oBACAa,WAAW,CAACW,GAAGC,cAAgBA,aAAaC,WAAW;gBACzD;YACF;YACA;gBACErB,MAAM;gBACNS,MAAM;gBACNP,OAAON,KAAK,gBAAgB;gBAC5Bc,OAAO;oBACLN;oBACAY,aAAaX;oBACbY,YAAY;wBACVC,OAAO,GAAGvB,aAAa,iBAAiB,CAAC;oBAC3C;oBACAa,WAAW,CAACW,GAAGC,cAAgBA,aAAaC,WAAW;gBACzD;YACF;SACD;IACH;AACF,EAAC;AAED;;;;;;;;CAQC,GACD,OAAO,MAAMC,mBAAmB,CAC9BtB,MACAC,UAA8G,CAAC,CAAC,GACrG,CAAA;QACXD;QACAS,MAAM;QACNP,OAAOD,QAAQC,KAAK,IAAI;QACxBK,UAAUN,QAAQM,QAAQ;QAC1BG,OAAO;YACLN,aAAaH,QAAQG,WAAW,IAAI;YACpCY,aACEf,QAAQe,WAAW,IACnBpB,KAAK,iCAAiC;YACxCqB,YAAY;gBACVC,OAAO,GAAGvB,aAAa,iBAAiB,CAAC;YAC3C;QACF;IACF,CAAA,EAAE;AASF;;;;;;;;;;;;;;CAcC,GACD,OAAO,MAAM4B,oBAAoB,CAC/BT,OACAU;IAEA,IAAI,CAACV,OAAO,OAAOU;IAEnB,IAAIV,MAAMO,MAAM,KAAK,UAAU;QAC7B,MAAMI,SAASX,MAAMY,WAAW,EAAEC;QAClC,OAAOF,UAAUA,OAAOG,MAAM,GAAG,IAAIH,SAASD;IAChD;IAEA,gEAAgE;IAChE,MAAMK,QAAQf,MAAMgB,UAAU,EAAEH;IAChC,IAAIE,SAASA,MAAMD,MAAM,GAAG,GAAG;QAC7B,+EAA+E;QAC/E,OAAOC,MAAME,UAAU,CAAC,WAAWF,MAAMG,QAAQ,CAAC,QAAQH,MAAME,UAAU,CAAC,OACvEF,QACA,CAAC,MAAM,EAAEA,MAAM,CAAC,CAAC;IACvB;IAEA,OAAOL;AACT,EAAC"}

package/dist/fields/colorModeFields.d.ts

@@ -1,5 +1,5 @@
 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"];
+declare const colorFieldKeys: readonly ["background", "foreground", "primary", "primaryForeground", "card", "cardForeground", "popover", "popoverForeground", "secondary", "secondaryForeground", "muted", "mutedForeground", "accent", "accentForeground", "destructive", "destructiveForeground", "border", "input", "ring", "gradientFrom", "gradientVia", "gradientTo"];
 type ColorToken = (typeof colorFieldKeys)[number];
 type ColorPalette = Record<ColorToken, string>;
 export declare const lightModeDefaults: ColorPalette;

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

@@ -1 +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"}
+{"version":3,"file":"colorModeFields.d.ts","sourceRoot":"","sources":["../../src/fields/colorModeFields.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAOpC,QAAA,MAAM,cAAc,+UAuBV,CAAA;AAEV,KAAK,UAAU,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAQjD,KAAK,YAAY,GAAG,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAA;AAkJ9C,eAAO,MAAM,iBAAiB,EAAE,YAuB/B,CAAA;AAGD,eAAO,MAAM,gBAAgB,EAAE,YAuB9B,CAAA;AAiBD,eAAO,MAAM,cAAc,EAAE,KAoB5B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAoB3B,CAAA"}

package/dist/fields/colorModeFields.js

@@ -18,7 +18,10 @@ const colorFieldKeys = [
     'destructiveForeground',
     'border',
     'input',
-    'ring'
+    'ring',
+    'gradientFrom',
+    'gradientVia',
+    'gradientTo'
 ];
 const colorFieldDefinitions = [
     {
@@ -229,6 +232,39 @@ const colorFieldDefinitions = [
             en: 'Focus ring color',
             cs: 'Barva focus prstence'
         }
+    },
+    {
+        name: 'gradientFrom',
+        label: {
+            en: 'Gradient · From',
+            cs: 'Gradient · Od'
+        },
+        description: {
+            en: 'Start colour of the brand gradient (--gradient-from)',
+            cs: 'Počáteční barva brandového gradientu (--gradient-from)'
+        }
+    },
+    {
+        name: 'gradientVia',
+        label: {
+            en: 'Gradient · Via',
+            cs: 'Gradient · Přes'
+        },
+        description: {
+            en: 'Optional middle colour of the brand gradient (--gradient-via)',
+            cs: 'Volitelná prostřední barva gradientu (--gradient-via)'
+        }
+    },
+    {
+        name: 'gradientTo',
+        label: {
+            en: 'Gradient · To',
+            cs: 'Gradient · Do'
+        },
+        description: {
+            en: 'End colour of the brand gradient (--gradient-to)',
+            cs: 'Koncová barva brandového gradientu (--gradient-to)'
+        }
     }
 ];
 // Light Mode Default Colors (Shadcn UI inspired defaults)
@@ -251,7 +287,10 @@ export const lightModeDefaults = {
     destructiveForeground: '#fafafa',
     border: '#e4e4e7',
     input: '#e4e4e7',
-    ring: '#18181b'
+    ring: '#18181b',
+    gradientFrom: '#9372f7',
+    gradientVia: '#7c6ff0',
+    gradientTo: '#22d3ee'
 };
 // Dark Mode Default Colors (Shadcn UI inspired defaults)
 export const darkModeDefaults = {
@@ -273,7 +312,10 @@ export const darkModeDefaults = {
     destructiveForeground: '#fafafa',
     border: '#27272a',
     input: '#27272a',
-    ring: '#d4d4d8'
+    ring: '#d4d4d8',
+    gradientFrom: '#9372f7',
+    gradientVia: '#7c6ff0',
+    gradientTo: '#22d3ee'
 };
 function createColorFields(defaults) {
     return colorFieldDefinitions.map(({ name, label, description })=>({
@@ -292,8 +334,8 @@ function createColorFields(defaults) {
 export const lightModeField = {
     type: 'collapsible',
     label: {
-        en: '☀️ Light Mode Colors',
-        cs: '☀️ Barvy světlého režimu'
+        en: 'Light Mode Colors',
+        cs: 'Barvy světlého režimu'
     },
     admin: {
         initCollapsed: true,
@@ -313,8 +355,8 @@ export const lightModeField = {
 export const darkModeField = {
     type: 'collapsible',
     label: {
-        en: '🌙 Dark Mode Colors',
-        cs: '🌙 Barvy tmavého režimu'
+        en: 'Dark Mode Colors',
+        cs: 'Barvy tmavého režimu'
     },
     admin: {
         initCollapsed: true,

package/dist/fields/colorModeFields.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/fields/colorModeFields.ts"],"sourcesContent":["import type { Field } from 'payload'\n\nconst themeColorPickerComponentPath = '@kilivi/payloadcms-theme-management/fields/ThemeColorPickerField'\n\ntype LocalizedText = Record<string, string>\n\nconst colorFieldKeys = [\n  'background',\n  'foreground',\n  'primary',\n  'primaryForeground',\n  'card',\n  'cardForeground',\n  'popover',\n  'popoverForeground',\n  'secondary',\n  'secondaryForeground',\n  'muted',\n  'mutedForeground',\n  'accent',\n  'accentForeground',\n  'destructive',\n  'destructiveForeground',\n  'border',\n  'input',\n  'ring',\n] as const\n\ntype ColorToken = (typeof colorFieldKeys)[number]\n\ninterface ColorFieldDefinition {\n  name: ColorToken\n  label: LocalizedText\n  description: LocalizedText\n}\n\ntype ColorPalette = Record<ColorToken, string>\n\nconst colorFieldDefinitions: ColorFieldDefinition[] = [\n  {\n    name: 'background',\n    label: { en: 'Background', cs: 'Pozadí' },\n    description: { en: 'Main background color', cs: 'Hlavní barva pozadí' },\n  },\n  {\n    name: 'foreground',\n    label: { en: 'Foreground', cs: 'Popředí' },\n    description: { en: 'Main text color', cs: 'Hlavní barva textu' },\n  },\n  {\n    name: 'primary',\n    label: { en: 'Primary', cs: 'Primární' },\n    description: {\n      en: 'Primary brand color for buttons, links',\n      cs: 'Primární barva značky pro tlačítka, odkazy',\n    },\n  },\n  {\n    name: 'primaryForeground',\n    label: { en: 'Primary Foreground', cs: 'Primární popředí' },\n    description: {\n      en: 'Text color on primary background',\n      cs: 'Barva textu na primárním pozadí',\n    },\n  },\n  {\n    name: 'card',\n    label: { en: 'Card', cs: 'Karta' },\n    description: { en: 'Card background color', cs: 'Barva pozadí karty' },\n  },\n  {\n    name: 'cardForeground',\n    label: { en: 'Card Foreground', cs: 'Karta popředí' },\n    description: {\n      en: 'Text color on card background',\n      cs: 'Barva textu na pozadí karty',\n    },\n  },\n  {\n    name: 'popover',\n    label: { en: 'Popover', cs: 'Popover' },\n    description: { en: 'Popover background color', cs: 'Barva pozadí popoveru' },\n  },\n  {\n    name: 'popoverForeground',\n    label: { en: 'Popover Foreground', cs: 'Popover popředí' },\n    description: {\n      en: 'Text color on popover background',\n      cs: 'Barva textu na pozadí popoveru',\n    },\n  },\n  {\n    name: 'secondary',\n    label: { en: 'Secondary', cs: 'Sekundární' },\n    description: { en: 'Secondary UI elements', cs: 'Sekundární UI prvky' },\n  },\n  {\n    name: 'secondaryForeground',\n    label: { en: 'Secondary Foreground', cs: 'Sekundární popředí' },\n    description: {\n      en: 'Text color on secondary background',\n      cs: 'Barva textu na sekundárním pozadí',\n    },\n  },\n  {\n    name: 'muted',\n    label: { en: 'Muted', cs: 'Ztlumený' },\n    description: { en: 'Muted backgrounds', cs: 'Ztlumená pozadí' },\n  },\n  {\n    name: 'mutedForeground',\n    label: { en: 'Muted Foreground', cs: 'Ztlumené popředí' },\n    description: { en: 'Muted text color', cs: 'Ztlumená barva textu' },\n  },\n  {\n    name: 'accent',\n    label: { en: 'Accent', cs: 'Akcent' },\n    description: { en: 'Accent color for highlights', cs: 'Akcentová barva pro zvýraznění' },\n  },\n  {\n    name: 'accentForeground',\n    label: { en: 'Accent Foreground', cs: 'Akcent popředí' },\n    description: {\n      en: 'Text color on accent background',\n      cs: 'Barva textu na akcentovém pozadí',\n    },\n  },\n  {\n    name: 'destructive',\n    label: { en: 'Destructive', cs: 'Destruktivní' },\n    description: { en: 'Error and destructive actions', cs: 'Chyby a destruktivní akce' },\n  },\n  {\n    name: 'destructiveForeground',\n    label: { en: 'Destructive Foreground', cs: 'Destruktivní popředí' },\n    description: {\n      en: 'Text color on destructive background',\n      cs: 'Barva textu na destruktivním pozadí',\n    },\n  },\n  {\n    name: 'border',\n    label: { en: 'Border', cs: 'Okraj' },\n    description: { en: 'Border color', cs: 'Barva okraje' },\n  },\n  {\n    name: 'input',\n    label: { en: 'Input', cs: 'Vstup' },\n    description: { en: 'Input border color', cs: 'Barva okraje vstupů' },\n  },\n  {\n    name: 'ring',\n    label: { en: 'Ring', cs: 'Prstenec' },\n    description: { en: 'Focus ring color', cs: 'Barva focus prstence' },\n  },\n]\n\n// Light Mode Default Colors (Shadcn UI inspired defaults)\nexport const lightModeDefaults: ColorPalette = {\n  background: '#ffffff',\n  foreground: '#0a0a0a',\n  card: '#ffffff',\n  cardForeground: '#0a0a0a',\n  popover: '#ffffff',\n  popoverForeground: '#0a0a0a',\n  primary: '#9372f7',\n  primaryForeground: '#fafafa',\n  secondary: '#f4f4f5',\n  secondaryForeground: '#18181b',\n  muted: '#f4f4f5',\n  mutedForeground: '#71717a',\n  accent: '#f4f4f5',\n  accentForeground: '#18181b',\n  destructive: '#ef4444',\n  destructiveForeground: '#fafafa',\n  border: '#e4e4e7',\n  input: '#e4e4e7',\n  ring: '#18181b',\n}\n\n// Dark Mode Default Colors (Shadcn UI inspired defaults)\nexport const darkModeDefaults: ColorPalette = {\n  background: '#0a0a0a',\n  foreground: '#fafafa',\n  card: '#09090b',\n  cardForeground: '#fafafa',\n  popover: '#09090b',\n  popoverForeground: '#fafafa',\n  primary: '#9372f7',\n  primaryForeground: '#09090b',\n  secondary: '#27272a',\n  secondaryForeground: '#fafafa',\n  muted: '#27272a',\n  mutedForeground: '#a1a1aa',\n  accent: '#27272a',\n  accentForeground: '#fafafa',\n  destructive: '#7f1d1d',\n  destructiveForeground: '#fafafa',\n  border: '#27272a',\n  input: '#27272a',\n  ring: '#d4d4d8',\n}\n\nfunction createColorFields(defaults: ColorPalette): Field[] {\n  return colorFieldDefinitions.map(({ name, label, description }) => ({\n    name,\n    type: 'text',\n    label,\n    defaultValue: defaults[name],\n    admin: {\n      components: {\n        Field: themeColorPickerComponentPath,\n      },\n      description,\n    },\n  }))\n}\n\nexport const lightModeField: Field = {\n  type: 'collapsible',\n  label: {\n    en: '☀️ Light Mode Colors',\n    cs: '☀️ Barvy světlého režimu',\n  },\n  admin: {\n    initCollapsed: true,\n    description: {\n      en: 'Configure colors for light mode',\n      cs: 'Nakonfigurujte barvy pro světlý režim',\n    },\n  },\n  fields: [\n    {\n      name: 'lightMode',\n      type: 'group',\n      fields: createColorFields(lightModeDefaults),\n    },\n  ],\n}\n\nexport const darkModeField: Field = {\n  type: 'collapsible',\n  label: {\n    en: '🌙 Dark Mode Colors',\n    cs: '🌙 Barvy tmavého režimu',\n  },\n  admin: {\n    initCollapsed: true,\n    description: {\n      en: 'Configure colors for dark mode',\n      cs: 'Nakonfigurujte barvy pro tmavý režim',\n    },\n  },\n  fields: [\n    {\n      name: 'darkMode',\n      type: 'group',\n      fields: createColorFields(darkModeDefaults),\n    },\n  ],\n}\n"],"names":["themeColorPickerComponentPath","colorFieldKeys","colorFieldDefinitions","name","label","en","cs","description","lightModeDefaults","background","foreground","card","cardForeground","popover","popoverForeground","primary","primaryForeground","secondary","secondaryForeground","muted","mutedForeground","accent","accentForeground","destructive","destructiveForeground","border","input","ring","darkModeDefaults","createColorFields","defaults","map","type","defaultValue","admin","components","Field","lightModeField","initCollapsed","fields","darkModeField"],"mappings":"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"}
+{"version":3,"sources":["../../src/fields/colorModeFields.ts"],"sourcesContent":["import type { Field } from 'payload'\n\nconst themeColorPickerComponentPath =\n  '@kilivi/payloadcms-theme-management/fields/ThemeColorPickerField'\n\ntype LocalizedText = Record<string, string>\n\nconst colorFieldKeys = [\n  'background',\n  'foreground',\n  'primary',\n  'primaryForeground',\n  'card',\n  'cardForeground',\n  'popover',\n  'popoverForeground',\n  'secondary',\n  'secondaryForeground',\n  'muted',\n  'mutedForeground',\n  'accent',\n  'accentForeground',\n  'destructive',\n  'destructiveForeground',\n  'border',\n  'input',\n  'ring',\n  'gradientFrom',\n  'gradientVia',\n  'gradientTo',\n] as const\n\ntype ColorToken = (typeof colorFieldKeys)[number]\n\ninterface ColorFieldDefinition {\n  name: ColorToken\n  label: LocalizedText\n  description: LocalizedText\n}\n\ntype ColorPalette = Record<ColorToken, string>\n\nconst colorFieldDefinitions: ColorFieldDefinition[] = [\n  {\n    name: 'background',\n    label: { en: 'Background', cs: 'Pozadí' },\n    description: { en: 'Main background color', cs: 'Hlavní barva pozadí' },\n  },\n  {\n    name: 'foreground',\n    label: { en: 'Foreground', cs: 'Popředí' },\n    description: { en: 'Main text color', cs: 'Hlavní barva textu' },\n  },\n  {\n    name: 'primary',\n    label: { en: 'Primary', cs: 'Primární' },\n    description: {\n      en: 'Primary brand color for buttons, links',\n      cs: 'Primární barva značky pro tlačítka, odkazy',\n    },\n  },\n  {\n    name: 'primaryForeground',\n    label: { en: 'Primary Foreground', cs: 'Primární popředí' },\n    description: {\n      en: 'Text color on primary background',\n      cs: 'Barva textu na primárním pozadí',\n    },\n  },\n  {\n    name: 'card',\n    label: { en: 'Card', cs: 'Karta' },\n    description: { en: 'Card background color', cs: 'Barva pozadí karty' },\n  },\n  {\n    name: 'cardForeground',\n    label: { en: 'Card Foreground', cs: 'Karta popředí' },\n    description: {\n      en: 'Text color on card background',\n      cs: 'Barva textu na pozadí karty',\n    },\n  },\n  {\n    name: 'popover',\n    label: { en: 'Popover', cs: 'Popover' },\n    description: { en: 'Popover background color', cs: 'Barva pozadí popoveru' },\n  },\n  {\n    name: 'popoverForeground',\n    label: { en: 'Popover Foreground', cs: 'Popover popředí' },\n    description: {\n      en: 'Text color on popover background',\n      cs: 'Barva textu na pozadí popoveru',\n    },\n  },\n  {\n    name: 'secondary',\n    label: { en: 'Secondary', cs: 'Sekundární' },\n    description: { en: 'Secondary UI elements', cs: 'Sekundární UI prvky' },\n  },\n  {\n    name: 'secondaryForeground',\n    label: { en: 'Secondary Foreground', cs: 'Sekundární popředí' },\n    description: {\n      en: 'Text color on secondary background',\n      cs: 'Barva textu na sekundárním pozadí',\n    },\n  },\n  {\n    name: 'muted',\n    label: { en: 'Muted', cs: 'Ztlumený' },\n    description: { en: 'Muted backgrounds', cs: 'Ztlumená pozadí' },\n  },\n  {\n    name: 'mutedForeground',\n    label: { en: 'Muted Foreground', cs: 'Ztlumené popředí' },\n    description: { en: 'Muted text color', cs: 'Ztlumená barva textu' },\n  },\n  {\n    name: 'accent',\n    label: { en: 'Accent', cs: 'Akcent' },\n    description: { en: 'Accent color for highlights', cs: 'Akcentová barva pro zvýraznění' },\n  },\n  {\n    name: 'accentForeground',\n    label: { en: 'Accent Foreground', cs: 'Akcent popředí' },\n    description: {\n      en: 'Text color on accent background',\n      cs: 'Barva textu na akcentovém pozadí',\n    },\n  },\n  {\n    name: 'destructive',\n    label: { en: 'Destructive', cs: 'Destruktivní' },\n    description: { en: 'Error and destructive actions', cs: 'Chyby a destruktivní akce' },\n  },\n  {\n    name: 'destructiveForeground',\n    label: { en: 'Destructive Foreground', cs: 'Destruktivní popředí' },\n    description: {\n      en: 'Text color on destructive background',\n      cs: 'Barva textu na destruktivním pozadí',\n    },\n  },\n  {\n    name: 'border',\n    label: { en: 'Border', cs: 'Okraj' },\n    description: { en: 'Border color', cs: 'Barva okraje' },\n  },\n  {\n    name: 'input',\n    label: { en: 'Input', cs: 'Vstup' },\n    description: { en: 'Input border color', cs: 'Barva okraje vstupů' },\n  },\n  {\n    name: 'ring',\n    label: { en: 'Ring', cs: 'Prstenec' },\n    description: { en: 'Focus ring color', cs: 'Barva focus prstence' },\n  },\n  {\n    name: 'gradientFrom',\n    label: { en: 'Gradient · From', cs: 'Gradient · Od' },\n    description: {\n      en: 'Start colour of the brand gradient (--gradient-from)',\n      cs: 'Počáteční barva brandového gradientu (--gradient-from)',\n    },\n  },\n  {\n    name: 'gradientVia',\n    label: { en: 'Gradient · Via', cs: 'Gradient · Přes' },\n    description: {\n      en: 'Optional middle colour of the brand gradient (--gradient-via)',\n      cs: 'Volitelná prostřední barva gradientu (--gradient-via)',\n    },\n  },\n  {\n    name: 'gradientTo',\n    label: { en: 'Gradient · To', cs: 'Gradient · Do' },\n    description: {\n      en: 'End colour of the brand gradient (--gradient-to)',\n      cs: 'Koncová barva brandového gradientu (--gradient-to)',\n    },\n  },\n]\n\n// Light Mode Default Colors (Shadcn UI inspired defaults)\nexport const lightModeDefaults: ColorPalette = {\n  background: '#ffffff',\n  foreground: '#0a0a0a',\n  card: '#ffffff',\n  cardForeground: '#0a0a0a',\n  popover: '#ffffff',\n  popoverForeground: '#0a0a0a',\n  primary: '#9372f7',\n  primaryForeground: '#fafafa',\n  secondary: '#f4f4f5',\n  secondaryForeground: '#18181b',\n  muted: '#f4f4f5',\n  mutedForeground: '#71717a',\n  accent: '#f4f4f5',\n  accentForeground: '#18181b',\n  destructive: '#ef4444',\n  destructiveForeground: '#fafafa',\n  border: '#e4e4e7',\n  input: '#e4e4e7',\n  ring: '#18181b',\n  gradientFrom: '#9372f7',\n  gradientVia: '#7c6ff0',\n  gradientTo: '#22d3ee',\n}\n\n// Dark Mode Default Colors (Shadcn UI inspired defaults)\nexport const darkModeDefaults: ColorPalette = {\n  background: '#0a0a0a',\n  foreground: '#fafafa',\n  card: '#09090b',\n  cardForeground: '#fafafa',\n  popover: '#09090b',\n  popoverForeground: '#fafafa',\n  primary: '#9372f7',\n  primaryForeground: '#09090b',\n  secondary: '#27272a',\n  secondaryForeground: '#fafafa',\n  muted: '#27272a',\n  mutedForeground: '#a1a1aa',\n  accent: '#27272a',\n  accentForeground: '#fafafa',\n  destructive: '#7f1d1d',\n  destructiveForeground: '#fafafa',\n  border: '#27272a',\n  input: '#27272a',\n  ring: '#d4d4d8',\n  gradientFrom: '#9372f7',\n  gradientVia: '#7c6ff0',\n  gradientTo: '#22d3ee',\n}\n\nfunction createColorFields(defaults: ColorPalette): Field[] {\n  return colorFieldDefinitions.map(({ name, label, description }) => ({\n    name,\n    type: 'text',\n    label,\n    defaultValue: defaults[name],\n    admin: {\n      components: {\n        Field: themeColorPickerComponentPath,\n      },\n      description,\n    },\n  }))\n}\n\nexport const lightModeField: Field = {\n  type: 'collapsible',\n  label: {\n    en: 'Light Mode Colors',\n    cs: 'Barvy světlého režimu',\n  },\n  admin: {\n    initCollapsed: true,\n    description: {\n      en: 'Configure colors for light mode',\n      cs: 'Nakonfigurujte barvy pro světlý režim',\n    },\n  },\n  fields: [\n    {\n      name: 'lightMode',\n      type: 'group',\n      fields: createColorFields(lightModeDefaults),\n    },\n  ],\n}\n\nexport const darkModeField: Field = {\n  type: 'collapsible',\n  label: {\n    en: 'Dark Mode Colors',\n    cs: 'Barvy tmavého režimu',\n  },\n  admin: {\n    initCollapsed: true,\n    description: {\n      en: 'Configure colors for dark mode',\n      cs: 'Nakonfigurujte barvy pro tmavý režim',\n    },\n  },\n  fields: [\n    {\n      name: 'darkMode',\n      type: 'group',\n      fields: createColorFields(darkModeDefaults),\n    },\n  ],\n}\n"],"names":["themeColorPickerComponentPath","colorFieldKeys","colorFieldDefinitions","name","label","en","cs","description","lightModeDefaults","background","foreground","card","cardForeground","popover","popoverForeground","primary","primaryForeground","secondary","secondaryForeground","muted","mutedForeground","accent","accentForeground","destructive","destructiveForeground","border","input","ring","gradientFrom","gradientVia","gradientTo","darkModeDefaults","createColorFields","defaults","map","type","defaultValue","admin","components","Field","lightModeField","initCollapsed","fields","darkModeField"],"mappings":"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"}

package/dist/fields/themeConfigurationField.d.ts

@@ -1,4 +1,4 @@
-import type { TabsField } from 'payload';
+import type { Field, TabsField } from 'payload';
 import type { ThemePreset } from '../index.js';
 interface ThemeConfigurationFieldOptions {
     themePresets: ThemePreset[];
@@ -8,6 +8,13 @@ interface ThemeConfigurationFieldOptions {
     includeBrandIdentity: boolean;
     enableAdvancedFeatures?: boolean;
     useThemePreviewField?: boolean;
+    customThemeConfigurationFields?: Field[];
+    customThemeConfigurationSections?: Array<{
+        label: string | Record<string, string>;
+        fields: Field[];
+        initCollapsed?: boolean;
+        description?: string | Record<string, string>;
+    }>;
 }
 export type ThemeTab = NonNullable<TabsField['tabs']>[number];
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"themeConfigurationField.d.ts","sourceRoot":"","sources":["../../src/fields/themeConfigurationField.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAS,SAAS,EAAE,MAAM,SAAS,CAAA;AAO/C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAG9C,UAAU,8BAA8B;IACtC,YAAY,EAAE,WAAW,EAAE,CAAA;IAC3B,YAAY,EAAE,MAAM,CAAA;IACpB,sBAAsB,EAAE,OAAO,CAAA;IAC/B,gBAAgB,EAAE,OAAO,CAAA;IACzB,oBAAoB,EAAE,OAAO,CAAA;IAC7B,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B;AASD,MAAM,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;AAE7D;;;GAGG;AACH,wBAAgB,6BAA6B,CAAC,OAAO,EAAE,8BAA8B,GAAG,QAAQ,CA+a/F"}
+{"version":3,"file":"themeConfigurationField.d.ts","sourceRoot":"","sources":["../../src/fields/themeConfigurationField.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAO/C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAI9C,UAAU,8BAA8B;IACtC,YAAY,EAAE,WAAW,EAAE,CAAA;IAC3B,YAAY,EAAE,MAAM,CAAA;IACpB,sBAAsB,EAAE,OAAO,CAAA;IAC/B,gBAAgB,EAAE,OAAO,CAAA;IACzB,oBAAoB,EAAE,OAAO,CAAA;IAC7B,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,8BAA8B,CAAC,EAAE,KAAK,EAAE,CAAA;IACxC,gCAAgC,CAAC,EAAE,KAAK,CAAC;QACvC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;QACtC,MAAM,EAAE,KAAK,EAAE,CAAA;QACf,aAAa,CAAC,EAAE,OAAO,CAAA;QACvB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAC9C,CAAC,CAAA;CACH;AASD,MAAM,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;AAE7D;;;GAGG;AACH,wBAAgB,6BAA6B,CAAC,OAAO,EAAE,8BAA8B,GAAG,QAAQ,CAu/B/F"}