@commercetools-demo/puck-theme-manager 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.d.mts +43 -0
  2. package/dist/index.d.ts +43 -0
  3. package/dist/index.js +1923 -0
  4. package/dist/index.js.map +1 -0
  5. package/dist/index.mjs +1880 -0
  6. package/dist/index.mjs.map +1 -0
  7. package/package.json +61 -0
package/dist/index.mjs ADDED
@@ -0,0 +1,1880 @@
1
+ // src/components/theme-editor.tsx
2
+ import { useEffect, useState as useState2, useCallback } from "react";
3
+ import { useHistory } from "react-router-dom";
4
+ import { PuckApiProvider, usePuckConfiguration } from "@commercetools-demo/puck-api";
5
+ import Card from "@commercetools-uikit/card";
6
+ import FlatButton from "@commercetools-uikit/flat-button";
7
+ import PrimaryButton2 from "@commercetools-uikit/primary-button";
8
+ import SecondaryButton from "@commercetools-uikit/secondary-button";
9
+ import FieldLabel2 from "@commercetools-uikit/field-label";
10
+ import NumberInput from "@commercetools-uikit/number-input";
11
+ import SelectInput2 from "@commercetools-uikit/select-input";
12
+ import Spacings2 from "@commercetools-uikit/spacings";
13
+ import Text from "@commercetools-uikit/text";
14
+ import TextInput from "@commercetools-uikit/text-input";
15
+ import LoadingSpinner from "@commercetools-uikit/loading-spinner";
16
+ import Grid from "@commercetools-uikit/grid";
17
+
18
+ // src/constants.ts
19
+ var DEFAULT_THEME = {
20
+ colorPrimary: "#0f766e",
21
+ colorPrimaryHover: "#0d9488",
22
+ colorSecondary: "#64748b",
23
+ colorBackground: "#ffffff",
24
+ colorSurface: "#f8fafc",
25
+ colorText: "#0f172a",
26
+ colorTextMuted: "#64748b",
27
+ borderRadius: "md",
28
+ borderWidth: "1",
29
+ fontFamily: "system-ui, sans-serif",
30
+ fontHeading: "system-ui, sans-serif",
31
+ spacingScale: 8,
32
+ buttonStyle: "solid",
33
+ cardShadow: "md",
34
+ headerStyle: "solid",
35
+ colorShadowLight: "#ffffff",
36
+ colorShadowDark: "#b8bec7",
37
+ colorSurfaceGlass: "rgba(255,255,255,0.18)",
38
+ shadowStyle: "none",
39
+ surfaceBlur: "none",
40
+ surfaceOpacity: 1,
41
+ fontWeightBase: "400",
42
+ fontWeightHeading: "700",
43
+ letterSpacing: "normal",
44
+ textTransform: "none",
45
+ borderStyle: "solid",
46
+ backgroundStyle: "solid"
47
+ };
48
+
49
+ // src/components/theme-preset-selector.tsx
50
+ import { useState } from "react";
51
+ import PrimaryButton from "@commercetools-uikit/primary-button";
52
+ import SelectInput from "@commercetools-uikit/select-input";
53
+ import Spacings from "@commercetools-uikit/spacings";
54
+ import FieldLabel from "@commercetools-uikit/field-label";
55
+
56
+ // src/presets.ts
57
+ var flatTheme = {
58
+ colorPrimary: "#2563EB",
59
+ colorPrimaryHover: "#1D4ED8",
60
+ colorPrimaryForeground: "#FFFFFF",
61
+ colorSecondary: "#64748B",
62
+ colorSecondaryForeground: "#FFFFFF",
63
+ colorBackground: "#F8FAFC",
64
+ colorSurface: "#FFFFFF",
65
+ colorText: "#0F172A",
66
+ colorTextMuted: "#64748B",
67
+ colorForeground: "#0F172A",
68
+ colorMuted: "#F1F5F9",
69
+ colorMutedForeground: "#64748B",
70
+ colorDestructive: "#EF4444",
71
+ colorDestructiveForeground: "#FFFFFF",
72
+ colorAccent: "#0EA5E9",
73
+ colorAccentForeground: "#FFFFFF",
74
+ colorBorder: "#E2E8F0",
75
+ colorInput: "#FFFFFF",
76
+ colorRing: "#2563EB",
77
+ colorShadowLight: "#FFFFFF",
78
+ colorShadowDark: "#CBD5E1",
79
+ colorSurfaceGlass: "rgba(255,255,255,0.9)",
80
+ borderRadius: "sm",
81
+ borderWidth: "1",
82
+ borderStyle: "solid",
83
+ fontFamily: "Inter, system-ui, sans-serif",
84
+ fontHeading: "Inter, system-ui, sans-serif",
85
+ fontWeightBase: "400",
86
+ fontWeightHeading: "700",
87
+ letterSpacing: "normal",
88
+ textTransform: "none",
89
+ spacingScale: 1,
90
+ buttonStyle: "solid",
91
+ cardShadow: "none",
92
+ shadowStyle: "none",
93
+ surfaceBlur: "none",
94
+ surfaceOpacity: 1,
95
+ backgroundStyle: "solid",
96
+ headerStyle: "solid",
97
+ animationStyle: "subtle"
98
+ };
99
+ var skeuomorphismTheme = {
100
+ colorPrimary: "#B8860B",
101
+ colorPrimaryHover: "#9A7209",
102
+ colorPrimaryForeground: "#FFFBEA",
103
+ colorSecondary: "#8B6914",
104
+ colorSecondaryForeground: "#FFFBEA",
105
+ colorBackground: "#C8B97D",
106
+ colorSurface: "#EDE0B0",
107
+ colorText: "#2C1A00",
108
+ colorTextMuted: "#6B4F1A",
109
+ colorForeground: "#2C1A00",
110
+ colorMuted: "#D9C98A",
111
+ colorMutedForeground: "#6B4F1A",
112
+ colorDestructive: "#C0392B",
113
+ colorDestructiveForeground: "#FFF8F0",
114
+ colorAccent: "#D4A017",
115
+ colorAccentForeground: "#2C1A00",
116
+ colorBorder: "#8B6914",
117
+ colorInput: "#F5EBD0",
118
+ colorRing: "#B8860B",
119
+ colorShadowLight: "rgba(255,255,255,0.5)",
120
+ colorShadowDark: "rgba(0,0,0,0.4)",
121
+ colorSurfaceGlass: "rgba(237,224,176,0.95)",
122
+ borderRadius: "sm",
123
+ borderWidth: "1",
124
+ borderStyle: "solid",
125
+ fontFamily: 'Georgia, "Times New Roman", serif',
126
+ fontHeading: 'Georgia, "Times New Roman", serif',
127
+ fontWeightBase: "400",
128
+ fontWeightHeading: "700",
129
+ letterSpacing: "normal",
130
+ textTransform: "none",
131
+ spacingScale: 1,
132
+ buttonStyle: "solid",
133
+ cardShadow: "lg",
134
+ shadowStyle: "soft",
135
+ surfaceBlur: "none",
136
+ surfaceOpacity: 1,
137
+ backgroundStyle: "noise",
138
+ headerStyle: "solid",
139
+ animationStyle: "subtle"
140
+ };
141
+ var materialTheme = {
142
+ colorPrimary: "#6200EE",
143
+ colorPrimaryHover: "#3700B3",
144
+ colorPrimaryForeground: "#FFFFFF",
145
+ colorSecondary: "#03DAC6",
146
+ colorSecondaryForeground: "#000000",
147
+ colorBackground: "#FAFAFA",
148
+ colorSurface: "#FFFFFF",
149
+ colorText: "#000000",
150
+ colorTextMuted: "#757575",
151
+ colorForeground: "#000000",
152
+ colorMuted: "#F5F5F5",
153
+ colorMutedForeground: "#757575",
154
+ colorDestructive: "#B00020",
155
+ colorDestructiveForeground: "#FFFFFF",
156
+ colorAccent: "#03DAC6",
157
+ colorAccentForeground: "#000000",
158
+ colorBorder: "#E0E0E0",
159
+ colorInput: "#FFFFFF",
160
+ colorRing: "#6200EE",
161
+ colorShadowLight: "rgba(255,255,255,0.1)",
162
+ colorShadowDark: "rgba(0,0,0,0.2)",
163
+ colorSurfaceGlass: "rgba(255,255,255,0.95)",
164
+ borderRadius: "sm",
165
+ borderWidth: "0",
166
+ borderStyle: "solid",
167
+ fontFamily: '"Roboto", system-ui, sans-serif',
168
+ fontHeading: '"Roboto", system-ui, sans-serif',
169
+ fontWeightBase: "400",
170
+ fontWeightHeading: "500",
171
+ letterSpacing: "normal",
172
+ textTransform: "none",
173
+ spacingScale: 1,
174
+ buttonStyle: "solid",
175
+ cardShadow: "md",
176
+ shadowStyle: "soft",
177
+ surfaceBlur: "none",
178
+ surfaceOpacity: 1,
179
+ backgroundStyle: "solid",
180
+ headerStyle: "solid",
181
+ animationStyle: "material-ripple"
182
+ };
183
+ var neumorphismTheme = {
184
+ colorPrimary: "#5B8DEF",
185
+ colorPrimaryHover: "#3D6ECC",
186
+ colorPrimaryForeground: "#FFFFFF",
187
+ colorSecondary: "#8B8FA8",
188
+ colorSecondaryForeground: "#FFFFFF",
189
+ colorBackground: "#E0E5EC",
190
+ colorSurface: "#E0E5EC",
191
+ colorText: "#31344B",
192
+ colorTextMuted: "#6B7280",
193
+ colorForeground: "#31344B",
194
+ colorMuted: "#E0E5EC",
195
+ colorMutedForeground: "#6B7280",
196
+ colorDestructive: "#E74C3C",
197
+ colorDestructiveForeground: "#FFFFFF",
198
+ colorAccent: "#5B8DEF",
199
+ colorAccentForeground: "#FFFFFF",
200
+ colorBorder: "#E0E5EC",
201
+ colorInput: "#E0E5EC",
202
+ colorRing: "#5B8DEF",
203
+ colorShadowLight: "#FFFFFF",
204
+ colorShadowDark: "#A3B1C6",
205
+ colorSurfaceGlass: "rgba(224,229,236,0.95)",
206
+ borderRadius: "lg",
207
+ borderWidth: "0",
208
+ borderStyle: "solid",
209
+ fontFamily: '"Nunito", system-ui, sans-serif',
210
+ fontHeading: '"Nunito", system-ui, sans-serif',
211
+ fontWeightBase: "400",
212
+ fontWeightHeading: "700",
213
+ letterSpacing: "normal",
214
+ textTransform: "none",
215
+ spacingScale: 1.1,
216
+ buttonStyle: "solid",
217
+ cardShadow: "lg",
218
+ shadowStyle: "neumorphic",
219
+ surfaceBlur: "none",
220
+ surfaceOpacity: 1,
221
+ backgroundStyle: "solid",
222
+ headerStyle: "solid",
223
+ animationStyle: "subtle"
224
+ };
225
+ var glassmorphismTheme = {
226
+ colorPrimary: "#818CF8",
227
+ colorPrimaryHover: "#6366F1",
228
+ colorPrimaryForeground: "#FFFFFF",
229
+ colorSecondary: "#C084FC",
230
+ colorSecondaryForeground: "#FFFFFF",
231
+ colorBackground: "#4F46E5",
232
+ colorSurface: "#6366F1",
233
+ colorText: "#FFFFFF",
234
+ colorTextMuted: "rgba(255,255,255,0.65)",
235
+ colorForeground: "#FFFFFF",
236
+ colorMuted: "rgba(255,255,255,0.1)",
237
+ colorMutedForeground: "rgba(255,255,255,0.55)",
238
+ colorDestructive: "#F87171",
239
+ colorDestructiveForeground: "#FFFFFF",
240
+ colorAccent: "#E879F9",
241
+ colorAccentForeground: "#FFFFFF",
242
+ colorBorder: "rgba(255,255,255,0.25)",
243
+ colorInput: "rgba(255,255,255,0.15)",
244
+ colorRing: "rgba(255,255,255,0.5)",
245
+ colorShadowLight: "rgba(255,255,255,0.25)",
246
+ colorShadowDark: "rgba(0,0,0,0.15)",
247
+ colorSurfaceGlass: "rgba(255,255,255,0.15)",
248
+ borderRadius: "lg",
249
+ borderWidth: "1",
250
+ borderStyle: "solid",
251
+ fontFamily: '"Inter", system-ui, sans-serif',
252
+ fontHeading: '"Inter", system-ui, sans-serif',
253
+ fontWeightBase: "300",
254
+ fontWeightHeading: "500",
255
+ letterSpacing: "wide",
256
+ textTransform: "none",
257
+ spacingScale: 1.1,
258
+ buttonStyle: "outline",
259
+ cardShadow: "sm",
260
+ shadowStyle: "soft",
261
+ surfaceBlur: "md",
262
+ surfaceOpacity: 0.15,
263
+ backgroundStyle: "gradient",
264
+ headerStyle: "transparent",
265
+ animationStyle: "subtle"
266
+ };
267
+ var brutalismTheme = {
268
+ colorPrimary: "#FF3C00",
269
+ colorPrimaryHover: "#CC3000",
270
+ colorPrimaryForeground: "#FFFFFF",
271
+ colorSecondary: "#FFEE00",
272
+ colorSecondaryForeground: "#000000",
273
+ colorBackground: "#FFFFFF",
274
+ colorSurface: "#FFFFFF",
275
+ colorText: "#000000",
276
+ colorTextMuted: "#333333",
277
+ colorForeground: "#000000",
278
+ colorMuted: "#F5F5F5",
279
+ colorMutedForeground: "#333333",
280
+ colorDestructive: "#FF0000",
281
+ colorDestructiveForeground: "#FFFFFF",
282
+ colorAccent: "#FFEE00",
283
+ colorAccentForeground: "#000000",
284
+ colorBorder: "#000000",
285
+ colorInput: "#FFFFFF",
286
+ colorRing: "#000000",
287
+ colorShadowLight: "#FFFFFF",
288
+ colorShadowDark: "#000000",
289
+ colorSurfaceGlass: "rgba(255,255,255,0.95)",
290
+ borderRadius: "none",
291
+ borderWidth: "2",
292
+ borderStyle: "solid",
293
+ fontFamily: '"Space Mono", "Courier New", monospace',
294
+ fontHeading: '"Space Grotesk", "Arial Black", sans-serif',
295
+ fontWeightBase: "400",
296
+ fontWeightHeading: "900",
297
+ letterSpacing: "tight",
298
+ textTransform: "uppercase",
299
+ spacingScale: 1,
300
+ buttonStyle: "solid",
301
+ cardShadow: "md",
302
+ shadowStyle: "hard-offset",
303
+ surfaceBlur: "none",
304
+ surfaceOpacity: 1,
305
+ backgroundStyle: "solid",
306
+ headerStyle: "solid",
307
+ animationStyle: "none"
308
+ };
309
+ var claymorphismTheme = {
310
+ colorPrimary: "#A855F7",
311
+ colorPrimaryHover: "#9333EA",
312
+ colorPrimaryForeground: "#FFFFFF",
313
+ colorSecondary: "#EC4899",
314
+ colorSecondaryForeground: "#FFFFFF",
315
+ colorBackground: "#F3E8FF",
316
+ colorSurface: "#FFFFFF",
317
+ colorText: "#1E1033",
318
+ colorTextMuted: "#7C3AED",
319
+ colorForeground: "#1E1033",
320
+ colorMuted: "#FAF5FF",
321
+ colorMutedForeground: "#9061C2",
322
+ colorDestructive: "#F43F5E",
323
+ colorDestructiveForeground: "#FFFFFF",
324
+ colorAccent: "#F0ABFC",
325
+ colorAccentForeground: "#701A75",
326
+ colorBorder: "#E9D5FF",
327
+ colorInput: "#FAF5FF",
328
+ colorRing: "#A855F7",
329
+ colorShadowLight: "rgba(255,255,255,0.8)",
330
+ colorShadowDark: "#7E22CE",
331
+ colorSurfaceGlass: "rgba(255,255,255,0.8)",
332
+ borderRadius: "lg",
333
+ borderWidth: "0",
334
+ borderStyle: "solid",
335
+ fontFamily: '"Nunito", "Poppins", system-ui, sans-serif',
336
+ fontHeading: '"Nunito", "Poppins", system-ui, sans-serif',
337
+ fontWeightBase: "400",
338
+ fontWeightHeading: "700",
339
+ letterSpacing: "normal",
340
+ textTransform: "none",
341
+ spacingScale: 1.15,
342
+ buttonStyle: "solid",
343
+ cardShadow: "lg",
344
+ shadowStyle: "clay",
345
+ surfaceBlur: "none",
346
+ surfaceOpacity: 1,
347
+ backgroundStyle: "solid",
348
+ headerStyle: "solid",
349
+ animationStyle: "bouncy"
350
+ };
351
+ var minimalismTheme = {
352
+ colorPrimary: "#111111",
353
+ colorPrimaryHover: "#333333",
354
+ colorPrimaryForeground: "#FFFFFF",
355
+ colorSecondary: "#666666",
356
+ colorSecondaryForeground: "#FFFFFF",
357
+ colorBackground: "#FFFFFF",
358
+ colorSurface: "#FAFAFA",
359
+ colorText: "#111111",
360
+ colorTextMuted: "#999999",
361
+ colorForeground: "#111111",
362
+ colorMuted: "#F5F5F5",
363
+ colorMutedForeground: "#999999",
364
+ colorDestructive: "#CC0000",
365
+ colorDestructiveForeground: "#FFFFFF",
366
+ colorAccent: "#111111",
367
+ colorAccentForeground: "#FFFFFF",
368
+ colorBorder: "#E5E5E5",
369
+ colorInput: "#FFFFFF",
370
+ colorRing: "#111111",
371
+ colorShadowLight: "#FFFFFF",
372
+ colorShadowDark: "#E5E5E5",
373
+ colorSurfaceGlass: "rgba(255,255,255,0.95)",
374
+ borderRadius: "none",
375
+ borderWidth: "1",
376
+ borderStyle: "solid",
377
+ fontFamily: '"DM Sans", "Helvetica Neue", sans-serif',
378
+ fontHeading: '"DM Serif Display", Georgia, serif',
379
+ fontWeightBase: "300",
380
+ fontWeightHeading: "400",
381
+ letterSpacing: "wider",
382
+ textTransform: "none",
383
+ spacingScale: 1.4,
384
+ buttonStyle: "outline",
385
+ cardShadow: "none",
386
+ shadowStyle: "none",
387
+ surfaceBlur: "none",
388
+ surfaceOpacity: 1,
389
+ backgroundStyle: "solid",
390
+ headerStyle: "minimal",
391
+ animationStyle: "subtle"
392
+ };
393
+ var darkMoodyTheme = {
394
+ colorPrimary: "#818CF8",
395
+ colorPrimaryHover: "#6366F1",
396
+ colorPrimaryForeground: "#FFFFFF",
397
+ colorSecondary: "#334155",
398
+ colorSecondaryForeground: "#E2E8F0",
399
+ colorBackground: "#0F1117",
400
+ colorSurface: "#1A1D28",
401
+ colorText: "#E2E8F0",
402
+ colorTextMuted: "#94A3B8",
403
+ colorForeground: "#E2E8F0",
404
+ colorMuted: "#1E2235",
405
+ colorMutedForeground: "#64748B",
406
+ colorDestructive: "#F87171",
407
+ colorDestructiveForeground: "#FFFFFF",
408
+ colorAccent: "#818CF8",
409
+ colorAccentForeground: "#FFFFFF",
410
+ colorBorder: "#2D3148",
411
+ colorInput: "#1A1D28",
412
+ colorRing: "#6366F1",
413
+ colorShadowLight: "rgba(129,140,248,0.25)",
414
+ colorShadowDark: "rgba(0,0,0,0.5)",
415
+ colorSurfaceGlass: "rgba(26,29,40,0.85)",
416
+ borderRadius: "md",
417
+ borderWidth: "1",
418
+ borderStyle: "solid",
419
+ fontFamily: '"Inter", system-ui, sans-serif',
420
+ fontHeading: '"Inter", system-ui, sans-serif',
421
+ fontWeightBase: "400",
422
+ fontWeightHeading: "500",
423
+ letterSpacing: "normal",
424
+ textTransform: "none",
425
+ spacingScale: 1,
426
+ buttonStyle: "solid",
427
+ cardShadow: "sm",
428
+ shadowStyle: "glow",
429
+ surfaceBlur: "none",
430
+ surfaceOpacity: 1,
431
+ backgroundStyle: "solid",
432
+ headerStyle: "solid",
433
+ animationStyle: "subtle"
434
+ };
435
+ var themePresets = {
436
+ flat: flatTheme,
437
+ skeuomorphism: skeuomorphismTheme,
438
+ material: materialTheme,
439
+ neumorphism: neumorphismTheme,
440
+ glassmorphism: glassmorphismTheme,
441
+ brutalism: brutalismTheme,
442
+ claymorphism: claymorphismTheme,
443
+ minimalism: minimalismTheme,
444
+ "dark-moody": darkMoodyTheme
445
+ };
446
+ var paradigmLabels = {
447
+ flat: "Flat design",
448
+ skeuomorphism: "Skeuomorphism",
449
+ material: "Material design",
450
+ neumorphism: "Neumorphism",
451
+ glassmorphism: "Glassmorphism",
452
+ brutalism: "Brutalism",
453
+ claymorphism: "Claymorphism",
454
+ minimalism: "Minimalism",
455
+ "dark-moody": "Dark / moody"
456
+ };
457
+ var PRESET_KEYS_SELECTOR = [
458
+ "flat",
459
+ "material",
460
+ "neumorphism",
461
+ "glassmorphism",
462
+ "brutalism",
463
+ "dark-moody"
464
+ ];
465
+ var shadowMap = {
466
+ none: "none",
467
+ soft: "0 2px 8px 0 var(--color-shadow-dark)",
468
+ "hard-offset": "4px 4px 0px 0px var(--color-shadow-dark)",
469
+ neumorphic: "6px 6px 14px var(--color-shadow-dark), -6px -6px 14px var(--color-shadow-light)",
470
+ clay: "0 8px 0 var(--color-shadow-dark), 0 12px 28px var(--color-shadow-dark)",
471
+ glow: "0 0 24px var(--color-shadow-light)"
472
+ };
473
+ var blurMap = {
474
+ none: "0px",
475
+ sm: "4px",
476
+ md: "12px",
477
+ lg: "24px"
478
+ };
479
+ var letterSpacingMap = {
480
+ tight: "-0.025em",
481
+ normal: "0em",
482
+ wide: "0.05em",
483
+ wider: "0.15em"
484
+ };
485
+ var borderRadiusMap = {
486
+ none: "0px",
487
+ sm: "4px",
488
+ md: "8px",
489
+ lg: "16px",
490
+ full: "9999px"
491
+ };
492
+ function buildCssVars(tokens) {
493
+ return {
494
+ "--color-primary": tokens.colorPrimary,
495
+ "--color-primary-hover": tokens.colorPrimaryHover,
496
+ "--color-primary-foreground": tokens.colorPrimaryForeground ?? "#ffffff",
497
+ "--color-secondary": tokens.colorSecondary,
498
+ "--color-secondary-foreground": tokens.colorSecondaryForeground ?? "#ffffff",
499
+ "--color-background": tokens.colorBackground,
500
+ "--color-surface": tokens.colorSurface,
501
+ "--color-text": tokens.colorText,
502
+ "--color-text-muted": tokens.colorTextMuted,
503
+ "--color-foreground": tokens.colorForeground ?? tokens.colorText,
504
+ "--color-muted": tokens.colorMuted ?? tokens.colorSurface,
505
+ "--color-muted-foreground": tokens.colorMutedForeground ?? tokens.colorTextMuted,
506
+ "--color-destructive": tokens.colorDestructive ?? "#ef4444",
507
+ "--color-destructive-foreground": tokens.colorDestructiveForeground ?? "#ffffff",
508
+ "--color-accent": tokens.colorAccent ?? tokens.colorPrimary,
509
+ "--color-accent-foreground": tokens.colorAccentForeground ?? "#ffffff",
510
+ "--color-border": tokens.colorBorder ?? "#e2e8f0",
511
+ "--color-input": tokens.colorInput ?? tokens.colorSurface,
512
+ "--color-ring": tokens.colorRing ?? tokens.colorPrimary,
513
+ "--color-shadow-light": tokens.colorShadowLight ?? "#ffffff",
514
+ "--color-shadow-dark": tokens.colorShadowDark ?? "#b8bec7",
515
+ "--color-surface-glass": tokens.colorSurfaceGlass ?? "rgba(255,255,255,0.15)",
516
+ "--shadow-card": shadowMap[tokens.shadowStyle ?? "none"],
517
+ "--surface-blur": blurMap[tokens.surfaceBlur ?? "none"],
518
+ "--surface-opacity": String(tokens.surfaceOpacity),
519
+ "--letter-spacing": letterSpacingMap[tokens.letterSpacing ?? "normal"],
520
+ "--border-radius": borderRadiusMap[tokens.borderRadius],
521
+ "--border-width": `${tokens.borderWidth}px`,
522
+ "--border-style": tokens.borderStyle ?? "",
523
+ "--font-family": tokens.fontFamily,
524
+ "--font-heading": tokens.fontHeading,
525
+ "--font-weight-base": tokens.fontWeightBase ?? "300",
526
+ "--font-weight-heading": tokens.fontWeightHeading ?? "700",
527
+ "--text-transform": tokens.textTransform ?? "none",
528
+ "--spacing-scale": String(tokens.spacingScale)
529
+ };
530
+ }
531
+
532
+ // src/components/theme-preset-selector.tsx
533
+ import { jsx, jsxs } from "react/jsx-runtime";
534
+ var PRESET_OPTIONS = [
535
+ { value: "", label: "Choose a preset\u2026" },
536
+ ...PRESET_KEYS_SELECTOR.map((key) => ({
537
+ value: key,
538
+ label: paradigmLabels[key]
539
+ }))
540
+ ];
541
+ var ThemePresetSelector = ({
542
+ onSelectPreset
543
+ }) => {
544
+ const [selectedKey, setSelectedKey] = useState("");
545
+ const handleApply = () => {
546
+ if (selectedKey && selectedKey in themePresets) {
547
+ onSelectPreset(themePresets[selectedKey]);
548
+ }
549
+ };
550
+ return /* @__PURE__ */ jsxs(Spacings.Stack, { scale: "s", children: [
551
+ /* @__PURE__ */ jsx(FieldLabel, { title: "Quick apply preset", htmlFor: "theme-preset-select" }),
552
+ /* @__PURE__ */ jsxs(Spacings.Inline, { scale: "s", alignItems: "center", children: [
553
+ /* @__PURE__ */ jsx(
554
+ SelectInput,
555
+ {
556
+ id: "theme-preset-select",
557
+ value: selectedKey,
558
+ onChange: (e) => {
559
+ const v = e.target.value;
560
+ setSelectedKey(typeof v === "string" ? v : Array.isArray(v) ? v[0] ?? "" : "");
561
+ },
562
+ options: PRESET_OPTIONS
563
+ }
564
+ ),
565
+ /* @__PURE__ */ jsx(
566
+ PrimaryButton,
567
+ {
568
+ label: "Apply",
569
+ onClick: handleApply,
570
+ isDisabled: !selectedKey
571
+ }
572
+ )
573
+ ] })
574
+ ] });
575
+ };
576
+ var theme_preset_selector_default = ThemePresetSelector;
577
+
578
+ // src/components/theme-editor.tsx
579
+ import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
580
+ var BORDER_RADIUS_OPTIONS = [
581
+ { value: "none", label: "None" },
582
+ { value: "sm", label: "Small" },
583
+ { value: "md", label: "Medium" },
584
+ { value: "lg", label: "Large" },
585
+ { value: "full", label: "Full" }
586
+ ];
587
+ var BORDER_WIDTH_OPTIONS = [
588
+ { value: "0", label: "0" },
589
+ { value: "1", label: "1" },
590
+ { value: "2", label: "2" }
591
+ ];
592
+ var BUTTON_STYLE_OPTIONS = [
593
+ { value: "solid", label: "Solid" },
594
+ { value: "outline", label: "Outline" },
595
+ { value: "ghost", label: "Ghost" }
596
+ ];
597
+ var CARD_SHADOW_OPTIONS = [
598
+ { value: "none", label: "None" },
599
+ { value: "sm", label: "Small" },
600
+ { value: "md", label: "Medium" },
601
+ { value: "lg", label: "Large" }
602
+ ];
603
+ var HEADER_STYLE_OPTIONS = [
604
+ { value: "transparent", label: "Transparent" },
605
+ { value: "solid", label: "Solid" },
606
+ { value: "minimal", label: "Minimal" }
607
+ ];
608
+ var SHADOW_STYLE_OPTIONS = [
609
+ { value: "none", label: "None" },
610
+ { value: "soft", label: "Soft" },
611
+ { value: "hard-offset", label: "Hard offset" },
612
+ { value: "neumorphic", label: "Neumorphic" },
613
+ { value: "clay", label: "Clay" },
614
+ { value: "glow", label: "Glow" }
615
+ ];
616
+ var SURFACE_BLUR_OPTIONS = [
617
+ { value: "none", label: "None" },
618
+ { value: "sm", label: "Small" },
619
+ { value: "md", label: "Medium" },
620
+ { value: "lg", label: "Large" }
621
+ ];
622
+ var FONT_WEIGHT_BASE_OPTIONS = [
623
+ { value: "300", label: "300" },
624
+ { value: "400", label: "400" },
625
+ { value: "500", label: "500" }
626
+ ];
627
+ var FONT_WEIGHT_HEADING_OPTIONS = [
628
+ { value: "400", label: "400" },
629
+ { value: "500", label: "500" },
630
+ { value: "700", label: "700" },
631
+ { value: "900", label: "900" }
632
+ ];
633
+ var LETTER_SPACING_OPTIONS = [
634
+ { value: "tight", label: "Tight" },
635
+ { value: "normal", label: "Normal" },
636
+ { value: "wide", label: "Wide" },
637
+ { value: "wider", label: "Wider" }
638
+ ];
639
+ var TEXT_TRANSFORM_OPTIONS = [
640
+ { value: "none", label: "None" },
641
+ { value: "uppercase", label: "Uppercase" }
642
+ ];
643
+ var BORDER_STYLE_OPTIONS = [
644
+ { value: "solid", label: "Solid" },
645
+ { value: "dashed", label: "Dashed" },
646
+ { value: "double", label: "Double" }
647
+ ];
648
+ var BACKGROUND_STYLE_OPTIONS = [
649
+ { value: "solid", label: "Solid" },
650
+ { value: "gradient", label: "Gradient" },
651
+ { value: "noise", label: "Noise" }
652
+ ];
653
+ var ThemeEditorInner = ({ backButton }) => {
654
+ const history = useHistory();
655
+ const {
656
+ theme,
657
+ loading,
658
+ error,
659
+ fetchTheme,
660
+ saveTheme,
661
+ updateTheme,
662
+ clearError
663
+ } = usePuckConfiguration();
664
+ const [formValues, setFormValues] = useState2(DEFAULT_THEME);
665
+ const [saving, setSaving] = useState2(false);
666
+ const [saveSuccess, setSaveSuccess] = useState2(false);
667
+ const [isConfigExpanded, setIsConfigExpanded] = useState2(false);
668
+ const applyThemeToForm = useCallback((t) => {
669
+ if (t == null || typeof t !== "object") {
670
+ setFormValues(DEFAULT_THEME);
671
+ return;
672
+ }
673
+ setFormValues({
674
+ ...DEFAULT_THEME,
675
+ ...t,
676
+ colorPrimary: t.colorPrimary ?? DEFAULT_THEME.colorPrimary,
677
+ colorPrimaryHover: t.colorPrimaryHover ?? DEFAULT_THEME.colorPrimaryHover,
678
+ colorSecondary: t.colorSecondary ?? DEFAULT_THEME.colorSecondary,
679
+ colorBackground: t.colorBackground ?? DEFAULT_THEME.colorBackground,
680
+ colorSurface: t.colorSurface ?? DEFAULT_THEME.colorSurface,
681
+ colorText: t.colorText ?? DEFAULT_THEME.colorText,
682
+ colorTextMuted: t.colorTextMuted ?? DEFAULT_THEME.colorTextMuted,
683
+ borderRadius: t.borderRadius ?? DEFAULT_THEME.borderRadius,
684
+ borderWidth: t.borderWidth ?? DEFAULT_THEME.borderWidth,
685
+ fontFamily: t.fontFamily ?? DEFAULT_THEME.fontFamily,
686
+ fontHeading: t.fontHeading ?? DEFAULT_THEME.fontHeading,
687
+ spacingScale: typeof t.spacingScale === "number" ? t.spacingScale : DEFAULT_THEME.spacingScale,
688
+ buttonStyle: t.buttonStyle ?? DEFAULT_THEME.buttonStyle,
689
+ cardShadow: t.cardShadow ?? DEFAULT_THEME.cardShadow,
690
+ headerStyle: t.headerStyle ?? DEFAULT_THEME.headerStyle,
691
+ colorPrimaryForeground: t.colorPrimaryForeground ?? void 0,
692
+ colorSecondaryForeground: t.colorSecondaryForeground ?? void 0,
693
+ colorForeground: t.colorForeground ?? void 0,
694
+ colorMuted: t.colorMuted ?? void 0,
695
+ colorMutedForeground: t.colorMutedForeground ?? void 0,
696
+ colorDestructive: t.colorDestructive ?? void 0,
697
+ colorDestructiveForeground: t.colorDestructiveForeground ?? void 0,
698
+ colorAccent: t.colorAccent ?? void 0,
699
+ colorAccentForeground: t.colorAccentForeground ?? void 0,
700
+ colorBorder: t.colorBorder ?? void 0,
701
+ colorInput: t.colorInput ?? void 0,
702
+ colorRing: t.colorRing ?? void 0,
703
+ colorShadowLight: t.colorShadowLight ?? DEFAULT_THEME.colorShadowLight,
704
+ colorShadowDark: t.colorShadowDark ?? DEFAULT_THEME.colorShadowDark,
705
+ colorSurfaceGlass: t.colorSurfaceGlass ?? DEFAULT_THEME.colorSurfaceGlass,
706
+ shadowStyle: t.shadowStyle ?? DEFAULT_THEME.shadowStyle,
707
+ surfaceBlur: t.surfaceBlur ?? DEFAULT_THEME.surfaceBlur,
708
+ surfaceOpacity: typeof t.surfaceOpacity === "number" ? t.surfaceOpacity : DEFAULT_THEME.surfaceOpacity,
709
+ fontWeightBase: t.fontWeightBase ?? DEFAULT_THEME.fontWeightBase,
710
+ fontWeightHeading: t.fontWeightHeading ?? DEFAULT_THEME.fontWeightHeading,
711
+ letterSpacing: t.letterSpacing ?? DEFAULT_THEME.letterSpacing,
712
+ textTransform: t.textTransform ?? DEFAULT_THEME.textTransform,
713
+ borderStyle: t.borderStyle ?? DEFAULT_THEME.borderStyle,
714
+ backgroundStyle: t.backgroundStyle ?? DEFAULT_THEME.backgroundStyle
715
+ });
716
+ }, []);
717
+ useEffect(() => {
718
+ void fetchTheme();
719
+ }, [fetchTheme]);
720
+ useEffect(() => {
721
+ applyThemeToForm(theme);
722
+ }, [theme, applyThemeToForm]);
723
+ const handleChange = useCallback(
724
+ (key, value) => {
725
+ setFormValues((prev) => ({ ...prev, [key]: value }));
726
+ setSaveSuccess(false);
727
+ },
728
+ []
729
+ );
730
+ const handleSave = useCallback(async () => {
731
+ setSaving(true);
732
+ setSaveSuccess(false);
733
+ clearError();
734
+ try {
735
+ await saveTheme(formValues);
736
+ setSaveSuccess(true);
737
+ } finally {
738
+ setSaving(false);
739
+ }
740
+ }, [formValues, saveTheme, clearError]);
741
+ const handleResetToDefault = useCallback(async () => {
742
+ setFormValues(DEFAULT_THEME);
743
+ setSaveSuccess(false);
744
+ if (theme != null) {
745
+ setSaving(true);
746
+ clearError();
747
+ try {
748
+ await updateTheme(DEFAULT_THEME);
749
+ setSaveSuccess(true);
750
+ } finally {
751
+ setSaving(false);
752
+ }
753
+ }
754
+ }, [theme, updateTheme, clearError]);
755
+ if (loading && theme == null) {
756
+ return /* @__PURE__ */ jsx2("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ jsx2(LoadingSpinner, {}) });
757
+ }
758
+ return /* @__PURE__ */ jsxs2(Spacings2.Stack, { scale: "l", children: [
759
+ backButton && /* @__PURE__ */ jsx2(
760
+ FlatButton,
761
+ {
762
+ onClick: () => history.push("/"),
763
+ label: backButton.label,
764
+ icon: backButton.icon,
765
+ children: backButton.label
766
+ }
767
+ ),
768
+ /* @__PURE__ */ jsx2("div", { style: { padding: "0 20px" }, children: /* @__PURE__ */ jsxs2(Spacings2.Stack, { scale: "l", alignItems: "flex-start", children: [
769
+ /* @__PURE__ */ jsx2(Text.Headline, { as: "h1", children: "Theme" }),
770
+ /* @__PURE__ */ jsx2(Text.Body, { tone: "secondary", children: "Customize colors, typography, spacing, and component styles." })
771
+ ] }) }),
772
+ error && /* @__PURE__ */ jsx2(Card, { children: /* @__PURE__ */ jsxs2(Spacings2.Stack, { scale: "m", children: [
773
+ /* @__PURE__ */ jsx2(Text.Headline, { as: "h2", children: "Error" }),
774
+ /* @__PURE__ */ jsx2(Text.Body, { tone: "critical", children: error })
775
+ ] }) }),
776
+ saveSuccess && /* @__PURE__ */ jsx2(Text.Body, { tone: "positive", children: "Theme saved successfully." }),
777
+ /* @__PURE__ */ jsxs2(Spacings2.Stack, { scale: "l", children: [
778
+ /* @__PURE__ */ jsx2("div", { style: { padding: "0 20px" }, children: /* @__PURE__ */ jsx2(Spacings2.Inline, { scale: "s", children: /* @__PURE__ */ jsx2(theme_preset_selector_default, { onSelectPreset: applyThemeToForm }) }) }),
779
+ /* @__PURE__ */ jsxs2(Spacings2.Stack, { scale: "s", children: [
780
+ /* @__PURE__ */ jsx2("div", { style: { padding: "0 20px" }, children: /* @__PURE__ */ jsxs2(
781
+ "button",
782
+ {
783
+ type: "button",
784
+ onClick: () => setIsConfigExpanded((prev) => !prev),
785
+ "aria-expanded": isConfigExpanded,
786
+ style: {
787
+ display: "flex",
788
+ alignItems: "center",
789
+ justifyContent: "space-between",
790
+ width: "100%",
791
+ padding: "12px 16px",
792
+ margin: 0,
793
+ border: "none",
794
+ borderRadius: "4px",
795
+ cursor: "pointer",
796
+ font: "inherit",
797
+ textAlign: "left",
798
+ background: "transparent"
799
+ },
800
+ children: [
801
+ /* @__PURE__ */ jsx2(Text.Headline, { as: "h2", children: "Theme configuration" }),
802
+ /* @__PURE__ */ jsx2(
803
+ "span",
804
+ {
805
+ style: {
806
+ display: "inline-block",
807
+ width: 0,
808
+ height: 0,
809
+ borderLeft: "5px solid transparent",
810
+ borderRight: "5px solid transparent",
811
+ borderTop: "6px solid currentColor",
812
+ transform: isConfigExpanded ? "rotate(180deg)" : "none",
813
+ opacity: 0.7
814
+ }
815
+ }
816
+ )
817
+ ]
818
+ }
819
+ ) }),
820
+ isConfigExpanded && /* @__PURE__ */ jsx2("div", { style: { padding: "0 20px" }, children: /* @__PURE__ */ jsx2(Spacings2.Stack, { scale: "l", children: /* @__PURE__ */ jsxs2(Spacings2.Stack, { scale: "xl", children: [
821
+ /* @__PURE__ */ jsx2(Text.Headline, { as: "h2", children: "Colors" }),
822
+ /* @__PURE__ */ jsxs2(
823
+ Grid,
824
+ {
825
+ gridGap: "16px",
826
+ gridAutoColumns: "1fr",
827
+ gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
828
+ children: [
829
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
830
+ /* @__PURE__ */ jsx2(FieldLabel2, { title: "Primary", htmlFor: "colorPrimary" }),
831
+ /* @__PURE__ */ jsxs2(Spacings2.Inline, { alignItems: "center", scale: "s", children: [
832
+ /* @__PURE__ */ jsx2(
833
+ "input",
834
+ {
835
+ type: "color",
836
+ id: "colorPrimary",
837
+ value: formValues.colorPrimary,
838
+ onChange: (e) => handleChange("colorPrimary", e.target.value),
839
+ style: { width: 40, height: 32, cursor: "pointer" }
840
+ }
841
+ ),
842
+ /* @__PURE__ */ jsx2(
843
+ TextInput,
844
+ {
845
+ value: formValues.colorPrimary,
846
+ onChange: (e) => handleChange("colorPrimary", e.target.value),
847
+ horizontalConstraint: 3
848
+ }
849
+ )
850
+ ] })
851
+ ] }) }),
852
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
853
+ /* @__PURE__ */ jsx2(
854
+ FieldLabel2,
855
+ {
856
+ title: "Primary Hover",
857
+ htmlFor: "colorPrimaryHover"
858
+ }
859
+ ),
860
+ /* @__PURE__ */ jsxs2(Spacings2.Inline, { alignItems: "center", scale: "s", children: [
861
+ /* @__PURE__ */ jsx2(
862
+ "input",
863
+ {
864
+ type: "color",
865
+ id: "colorPrimaryHover",
866
+ value: formValues.colorPrimaryHover,
867
+ onChange: (e) => handleChange("colorPrimaryHover", e.target.value),
868
+ style: { width: 40, height: 32, cursor: "pointer" }
869
+ }
870
+ ),
871
+ /* @__PURE__ */ jsx2(
872
+ TextInput,
873
+ {
874
+ horizontalConstraint: 3,
875
+ value: formValues.colorPrimaryHover,
876
+ onChange: (e) => handleChange("colorPrimaryHover", e.target.value)
877
+ }
878
+ )
879
+ ] })
880
+ ] }) }),
881
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
882
+ /* @__PURE__ */ jsx2(FieldLabel2, { title: "Secondary", htmlFor: "colorSecondary" }),
883
+ /* @__PURE__ */ jsxs2(Spacings2.Inline, { alignItems: "center", scale: "s", children: [
884
+ /* @__PURE__ */ jsx2(
885
+ "input",
886
+ {
887
+ type: "color",
888
+ id: "colorSecondary",
889
+ value: formValues.colorSecondary,
890
+ onChange: (e) => handleChange("colorSecondary", e.target.value),
891
+ style: { width: 40, height: 32, cursor: "pointer" }
892
+ }
893
+ ),
894
+ /* @__PURE__ */ jsx2(
895
+ TextInput,
896
+ {
897
+ horizontalConstraint: 3,
898
+ value: formValues.colorSecondary,
899
+ onChange: (e) => handleChange("colorSecondary", e.target.value)
900
+ }
901
+ )
902
+ ] })
903
+ ] }) }),
904
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
905
+ /* @__PURE__ */ jsx2(
906
+ FieldLabel2,
907
+ {
908
+ title: "Background",
909
+ htmlFor: "colorBackground"
910
+ }
911
+ ),
912
+ /* @__PURE__ */ jsxs2(Spacings2.Inline, { alignItems: "center", scale: "s", children: [
913
+ /* @__PURE__ */ jsx2(
914
+ "input",
915
+ {
916
+ type: "color",
917
+ id: "colorBackground",
918
+ value: formValues.colorBackground,
919
+ onChange: (e) => handleChange("colorBackground", e.target.value),
920
+ style: { width: 40, height: 32, cursor: "pointer" }
921
+ }
922
+ ),
923
+ /* @__PURE__ */ jsx2(
924
+ TextInput,
925
+ {
926
+ horizontalConstraint: 3,
927
+ value: formValues.colorBackground,
928
+ onChange: (e) => handleChange("colorBackground", e.target.value)
929
+ }
930
+ )
931
+ ] })
932
+ ] }) }),
933
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
934
+ /* @__PURE__ */ jsx2(FieldLabel2, { title: "Surface", htmlFor: "colorSurface" }),
935
+ /* @__PURE__ */ jsxs2(Spacings2.Inline, { alignItems: "center", scale: "s", children: [
936
+ /* @__PURE__ */ jsx2(
937
+ "input",
938
+ {
939
+ type: "color",
940
+ id: "colorSurface",
941
+ value: formValues.colorSurface,
942
+ onChange: (e) => handleChange("colorSurface", e.target.value),
943
+ style: { width: 40, height: 32, cursor: "pointer" }
944
+ }
945
+ ),
946
+ /* @__PURE__ */ jsx2(
947
+ TextInput,
948
+ {
949
+ horizontalConstraint: 3,
950
+ value: formValues.colorSurface,
951
+ onChange: (e) => handleChange("colorSurface", e.target.value)
952
+ }
953
+ )
954
+ ] })
955
+ ] }) }),
956
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
957
+ /* @__PURE__ */ jsx2(FieldLabel2, { title: "Text", htmlFor: "colorText" }),
958
+ /* @__PURE__ */ jsxs2(Spacings2.Inline, { alignItems: "center", scale: "s", children: [
959
+ /* @__PURE__ */ jsx2(
960
+ "input",
961
+ {
962
+ type: "color",
963
+ id: "colorText",
964
+ value: formValues.colorText,
965
+ onChange: (e) => handleChange("colorText", e.target.value),
966
+ style: { width: 40, height: 32, cursor: "pointer" }
967
+ }
968
+ ),
969
+ /* @__PURE__ */ jsx2(
970
+ TextInput,
971
+ {
972
+ horizontalConstraint: 3,
973
+ value: formValues.colorText,
974
+ onChange: (e) => handleChange("colorText", e.target.value)
975
+ }
976
+ )
977
+ ] })
978
+ ] }) }),
979
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
980
+ /* @__PURE__ */ jsx2(FieldLabel2, { title: "Text Muted", htmlFor: "colorTextMuted" }),
981
+ /* @__PURE__ */ jsxs2(Spacings2.Inline, { alignItems: "center", scale: "s", children: [
982
+ /* @__PURE__ */ jsx2(
983
+ "input",
984
+ {
985
+ type: "color",
986
+ id: "colorTextMuted",
987
+ value: formValues.colorTextMuted,
988
+ onChange: (e) => handleChange("colorTextMuted", e.target.value),
989
+ style: { width: 40, height: 32, cursor: "pointer" }
990
+ }
991
+ ),
992
+ /* @__PURE__ */ jsx2(
993
+ TextInput,
994
+ {
995
+ horizontalConstraint: 3,
996
+ value: formValues.colorTextMuted,
997
+ onChange: (e) => handleChange("colorTextMuted", e.target.value)
998
+ }
999
+ )
1000
+ ] })
1001
+ ] }) })
1002
+ ]
1003
+ }
1004
+ ),
1005
+ /* @__PURE__ */ jsx2(Text.Headline, { as: "h2", children: "Extended colors" }),
1006
+ /* @__PURE__ */ jsx2(Text.Body, { tone: "secondary", children: "Optional theme tokens for foregrounds, muted, destructive, accent, border, input, and ring." }),
1007
+ /* @__PURE__ */ jsxs2(
1008
+ Grid,
1009
+ {
1010
+ gridGap: "16px",
1011
+ gridAutoColumns: "1fr",
1012
+ gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
1013
+ children: [
1014
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1015
+ /* @__PURE__ */ jsx2(
1016
+ FieldLabel2,
1017
+ {
1018
+ title: "Primary Foreground",
1019
+ htmlFor: "colorPrimaryForeground"
1020
+ }
1021
+ ),
1022
+ /* @__PURE__ */ jsxs2(Spacings2.Inline, { alignItems: "center", scale: "s", children: [
1023
+ /* @__PURE__ */ jsx2(
1024
+ "input",
1025
+ {
1026
+ type: "color",
1027
+ id: "colorPrimaryForeground",
1028
+ value: formValues.colorPrimaryForeground || "#000000",
1029
+ onChange: (e) => handleChange("colorPrimaryForeground", e.target.value),
1030
+ style: { width: 40, height: 32, cursor: "pointer" }
1031
+ }
1032
+ ),
1033
+ /* @__PURE__ */ jsx2(
1034
+ TextInput,
1035
+ {
1036
+ horizontalConstraint: 3,
1037
+ value: formValues.colorPrimaryForeground ?? "",
1038
+ onChange: (e) => handleChange(
1039
+ "colorPrimaryForeground",
1040
+ e.target.value
1041
+ )
1042
+ }
1043
+ )
1044
+ ] })
1045
+ ] }) }),
1046
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1047
+ /* @__PURE__ */ jsx2(
1048
+ FieldLabel2,
1049
+ {
1050
+ title: "Secondary Foreground",
1051
+ htmlFor: "colorSecondaryForeground"
1052
+ }
1053
+ ),
1054
+ /* @__PURE__ */ jsxs2(Spacings2.Inline, { alignItems: "center", scale: "s", children: [
1055
+ /* @__PURE__ */ jsx2(
1056
+ "input",
1057
+ {
1058
+ type: "color",
1059
+ id: "colorSecondaryForeground",
1060
+ value: formValues.colorSecondaryForeground || "#000000",
1061
+ onChange: (e) => handleChange("colorSecondaryForeground", e.target.value),
1062
+ style: { width: 40, height: 32, cursor: "pointer" }
1063
+ }
1064
+ ),
1065
+ /* @__PURE__ */ jsx2(
1066
+ TextInput,
1067
+ {
1068
+ horizontalConstraint: 3,
1069
+ value: formValues.colorSecondaryForeground ?? "",
1070
+ onChange: (e) => handleChange(
1071
+ "colorSecondaryForeground",
1072
+ e.target.value
1073
+ )
1074
+ }
1075
+ )
1076
+ ] })
1077
+ ] }) }),
1078
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1079
+ /* @__PURE__ */ jsx2(FieldLabel2, { title: "Foreground", htmlFor: "colorForeground" }),
1080
+ /* @__PURE__ */ jsxs2(Spacings2.Inline, { alignItems: "center", scale: "s", children: [
1081
+ /* @__PURE__ */ jsx2(
1082
+ "input",
1083
+ {
1084
+ type: "color",
1085
+ id: "colorForeground",
1086
+ value: formValues.colorForeground || "#000000",
1087
+ onChange: (e) => handleChange("colorForeground", e.target.value),
1088
+ style: { width: 40, height: 32, cursor: "pointer" }
1089
+ }
1090
+ ),
1091
+ /* @__PURE__ */ jsx2(
1092
+ TextInput,
1093
+ {
1094
+ horizontalConstraint: 3,
1095
+ value: formValues.colorForeground ?? "",
1096
+ onChange: (e) => handleChange(
1097
+ "colorForeground",
1098
+ e.target.value
1099
+ )
1100
+ }
1101
+ )
1102
+ ] })
1103
+ ] }) }),
1104
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1105
+ /* @__PURE__ */ jsx2(FieldLabel2, { title: "Muted", htmlFor: "colorMuted" }),
1106
+ /* @__PURE__ */ jsxs2(Spacings2.Inline, { alignItems: "center", scale: "s", children: [
1107
+ /* @__PURE__ */ jsx2(
1108
+ "input",
1109
+ {
1110
+ type: "color",
1111
+ id: "colorMuted",
1112
+ value: formValues.colorMuted || "#000000",
1113
+ onChange: (e) => handleChange("colorMuted", e.target.value),
1114
+ style: { width: 40, height: 32, cursor: "pointer" }
1115
+ }
1116
+ ),
1117
+ /* @__PURE__ */ jsx2(
1118
+ TextInput,
1119
+ {
1120
+ horizontalConstraint: 3,
1121
+ value: formValues.colorMuted ?? "",
1122
+ onChange: (e) => handleChange(
1123
+ "colorMuted",
1124
+ e.target.value
1125
+ )
1126
+ }
1127
+ )
1128
+ ] })
1129
+ ] }) }),
1130
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1131
+ /* @__PURE__ */ jsx2(
1132
+ FieldLabel2,
1133
+ {
1134
+ title: "Muted Foreground",
1135
+ htmlFor: "colorMutedForeground"
1136
+ }
1137
+ ),
1138
+ /* @__PURE__ */ jsxs2(Spacings2.Inline, { alignItems: "center", scale: "s", children: [
1139
+ /* @__PURE__ */ jsx2(
1140
+ "input",
1141
+ {
1142
+ type: "color",
1143
+ id: "colorMutedForeground",
1144
+ value: formValues.colorMutedForeground || "#000000",
1145
+ onChange: (e) => handleChange("colorMutedForeground", e.target.value),
1146
+ style: { width: 40, height: 32, cursor: "pointer" }
1147
+ }
1148
+ ),
1149
+ /* @__PURE__ */ jsx2(
1150
+ TextInput,
1151
+ {
1152
+ horizontalConstraint: 3,
1153
+ value: formValues.colorMutedForeground ?? "",
1154
+ onChange: (e) => handleChange(
1155
+ "colorMutedForeground",
1156
+ e.target.value
1157
+ )
1158
+ }
1159
+ )
1160
+ ] })
1161
+ ] }) }),
1162
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1163
+ /* @__PURE__ */ jsx2(FieldLabel2, { title: "Destructive", htmlFor: "colorDestructive" }),
1164
+ /* @__PURE__ */ jsxs2(Spacings2.Inline, { alignItems: "center", scale: "s", children: [
1165
+ /* @__PURE__ */ jsx2(
1166
+ "input",
1167
+ {
1168
+ type: "color",
1169
+ id: "colorDestructive",
1170
+ value: formValues.colorDestructive || "#000000",
1171
+ onChange: (e) => handleChange("colorDestructive", e.target.value),
1172
+ style: { width: 40, height: 32, cursor: "pointer" }
1173
+ }
1174
+ ),
1175
+ /* @__PURE__ */ jsx2(
1176
+ TextInput,
1177
+ {
1178
+ horizontalConstraint: 3,
1179
+ value: formValues.colorDestructive ?? "",
1180
+ onChange: (e) => handleChange(
1181
+ "colorDestructive",
1182
+ e.target.value
1183
+ )
1184
+ }
1185
+ )
1186
+ ] })
1187
+ ] }) }),
1188
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1189
+ /* @__PURE__ */ jsx2(
1190
+ FieldLabel2,
1191
+ {
1192
+ title: "Destructive Foreground",
1193
+ htmlFor: "colorDestructiveForeground"
1194
+ }
1195
+ ),
1196
+ /* @__PURE__ */ jsxs2(Spacings2.Inline, { alignItems: "center", scale: "s", children: [
1197
+ /* @__PURE__ */ jsx2(
1198
+ "input",
1199
+ {
1200
+ type: "color",
1201
+ id: "colorDestructiveForeground",
1202
+ value: formValues.colorDestructiveForeground || "#000000",
1203
+ onChange: (e) => handleChange("colorDestructiveForeground", e.target.value),
1204
+ style: { width: 40, height: 32, cursor: "pointer" }
1205
+ }
1206
+ ),
1207
+ /* @__PURE__ */ jsx2(
1208
+ TextInput,
1209
+ {
1210
+ horizontalConstraint: 3,
1211
+ value: formValues.colorDestructiveForeground ?? "",
1212
+ onChange: (e) => handleChange(
1213
+ "colorDestructiveForeground",
1214
+ e.target.value
1215
+ )
1216
+ }
1217
+ )
1218
+ ] })
1219
+ ] }) }),
1220
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1221
+ /* @__PURE__ */ jsx2(FieldLabel2, { title: "Accent", htmlFor: "colorAccent" }),
1222
+ /* @__PURE__ */ jsxs2(Spacings2.Inline, { alignItems: "center", scale: "s", children: [
1223
+ /* @__PURE__ */ jsx2(
1224
+ "input",
1225
+ {
1226
+ type: "color",
1227
+ id: "colorAccent",
1228
+ value: formValues.colorAccent || "#000000",
1229
+ onChange: (e) => handleChange("colorAccent", e.target.value),
1230
+ style: { width: 40, height: 32, cursor: "pointer" }
1231
+ }
1232
+ ),
1233
+ /* @__PURE__ */ jsx2(
1234
+ TextInput,
1235
+ {
1236
+ horizontalConstraint: 3,
1237
+ value: formValues.colorAccent ?? "",
1238
+ onChange: (e) => handleChange(
1239
+ "colorAccent",
1240
+ e.target.value
1241
+ )
1242
+ }
1243
+ )
1244
+ ] })
1245
+ ] }) }),
1246
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1247
+ /* @__PURE__ */ jsx2(
1248
+ FieldLabel2,
1249
+ {
1250
+ title: "Accent Foreground",
1251
+ htmlFor: "colorAccentForeground"
1252
+ }
1253
+ ),
1254
+ /* @__PURE__ */ jsxs2(Spacings2.Inline, { alignItems: "center", scale: "s", children: [
1255
+ /* @__PURE__ */ jsx2(
1256
+ "input",
1257
+ {
1258
+ type: "color",
1259
+ id: "colorAccentForeground",
1260
+ value: formValues.colorAccentForeground || "#000000",
1261
+ onChange: (e) => handleChange("colorAccentForeground", e.target.value),
1262
+ style: { width: 40, height: 32, cursor: "pointer" }
1263
+ }
1264
+ ),
1265
+ /* @__PURE__ */ jsx2(
1266
+ TextInput,
1267
+ {
1268
+ horizontalConstraint: 3,
1269
+ value: formValues.colorAccentForeground ?? "",
1270
+ onChange: (e) => handleChange(
1271
+ "colorAccentForeground",
1272
+ e.target.value
1273
+ )
1274
+ }
1275
+ )
1276
+ ] })
1277
+ ] }) }),
1278
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1279
+ /* @__PURE__ */ jsx2(FieldLabel2, { title: "Border", htmlFor: "colorBorder" }),
1280
+ /* @__PURE__ */ jsxs2(Spacings2.Inline, { alignItems: "center", scale: "s", children: [
1281
+ /* @__PURE__ */ jsx2(
1282
+ "input",
1283
+ {
1284
+ type: "color",
1285
+ id: "colorBorder",
1286
+ value: formValues.colorBorder || "#000000",
1287
+ onChange: (e) => handleChange("colorBorder", e.target.value),
1288
+ style: { width: 40, height: 32, cursor: "pointer" }
1289
+ }
1290
+ ),
1291
+ /* @__PURE__ */ jsx2(
1292
+ TextInput,
1293
+ {
1294
+ horizontalConstraint: 3,
1295
+ value: formValues.colorBorder ?? "",
1296
+ onChange: (e) => handleChange(
1297
+ "colorBorder",
1298
+ e.target.value
1299
+ )
1300
+ }
1301
+ )
1302
+ ] })
1303
+ ] }) }),
1304
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1305
+ /* @__PURE__ */ jsx2(FieldLabel2, { title: "Input", htmlFor: "colorInput" }),
1306
+ /* @__PURE__ */ jsxs2(Spacings2.Inline, { alignItems: "center", scale: "s", children: [
1307
+ /* @__PURE__ */ jsx2(
1308
+ "input",
1309
+ {
1310
+ type: "color",
1311
+ id: "colorInput",
1312
+ value: formValues.colorInput || "#000000",
1313
+ onChange: (e) => handleChange("colorInput", e.target.value),
1314
+ style: { width: 40, height: 32, cursor: "pointer" }
1315
+ }
1316
+ ),
1317
+ /* @__PURE__ */ jsx2(
1318
+ TextInput,
1319
+ {
1320
+ horizontalConstraint: 3,
1321
+ value: formValues.colorInput ?? "",
1322
+ onChange: (e) => handleChange(
1323
+ "colorInput",
1324
+ e.target.value
1325
+ )
1326
+ }
1327
+ )
1328
+ ] })
1329
+ ] }) }),
1330
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1331
+ /* @__PURE__ */ jsx2(FieldLabel2, { title: "Ring", htmlFor: "colorRing" }),
1332
+ /* @__PURE__ */ jsxs2(Spacings2.Inline, { alignItems: "center", scale: "s", children: [
1333
+ /* @__PURE__ */ jsx2(
1334
+ "input",
1335
+ {
1336
+ type: "color",
1337
+ id: "colorRing",
1338
+ value: formValues.colorRing || "#000000",
1339
+ onChange: (e) => handleChange("colorRing", e.target.value),
1340
+ style: { width: 40, height: 32, cursor: "pointer" }
1341
+ }
1342
+ ),
1343
+ /* @__PURE__ */ jsx2(
1344
+ TextInput,
1345
+ {
1346
+ horizontalConstraint: 3,
1347
+ value: formValues.colorRing ?? "",
1348
+ onChange: (e) => handleChange(
1349
+ "colorRing",
1350
+ e.target.value
1351
+ )
1352
+ }
1353
+ )
1354
+ ] })
1355
+ ] }) })
1356
+ ]
1357
+ }
1358
+ ),
1359
+ /* @__PURE__ */ jsx2(Text.Headline, { as: "h2", children: "Typography" }),
1360
+ /* @__PURE__ */ jsxs2(
1361
+ Grid,
1362
+ {
1363
+ gridGap: "16px",
1364
+ gridAutoColumns: "1fr",
1365
+ gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
1366
+ children: [
1367
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1368
+ /* @__PURE__ */ jsx2(FieldLabel2, { title: "Font Family", htmlFor: "fontFamily" }),
1369
+ /* @__PURE__ */ jsx2(
1370
+ TextInput,
1371
+ {
1372
+ horizontalConstraint: 4,
1373
+ id: "fontFamily",
1374
+ value: formValues.fontFamily,
1375
+ onChange: (e) => handleChange("fontFamily", e.target.value)
1376
+ }
1377
+ )
1378
+ ] }) }),
1379
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1380
+ /* @__PURE__ */ jsx2(FieldLabel2, { title: "Heading Font", htmlFor: "fontHeading" }),
1381
+ /* @__PURE__ */ jsx2(
1382
+ TextInput,
1383
+ {
1384
+ horizontalConstraint: 4,
1385
+ id: "fontHeading",
1386
+ value: formValues.fontHeading,
1387
+ onChange: (e) => handleChange("fontHeading", e.target.value)
1388
+ }
1389
+ )
1390
+ ] }) })
1391
+ ]
1392
+ }
1393
+ ),
1394
+ /* @__PURE__ */ jsx2(Text.Headline, { as: "h2", children: "Layout & Components" }),
1395
+ /* @__PURE__ */ jsxs2(
1396
+ Grid,
1397
+ {
1398
+ gridGap: "16px",
1399
+ gridAutoColumns: "1fr",
1400
+ gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
1401
+ children: [
1402
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1403
+ /* @__PURE__ */ jsx2(FieldLabel2, { title: "Spacing Scale", htmlFor: "spacingScale" }),
1404
+ /* @__PURE__ */ jsx2(
1405
+ NumberInput,
1406
+ {
1407
+ id: "spacingScale",
1408
+ horizontalConstraint: 3,
1409
+ value: formValues.spacingScale,
1410
+ onChange: (e) => handleChange(
1411
+ "spacingScale",
1412
+ e.target.value === "" ? 0 : Number(e.target.value)
1413
+ )
1414
+ }
1415
+ )
1416
+ ] }) }),
1417
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1418
+ /* @__PURE__ */ jsx2(FieldLabel2, { title: "Border Radius", htmlFor: "borderRadius" }),
1419
+ /* @__PURE__ */ jsx2(
1420
+ SelectInput2,
1421
+ {
1422
+ id: "borderRadius",
1423
+ horizontalConstraint: 3,
1424
+ value: formValues.borderRadius,
1425
+ onChange: (e) => handleChange(
1426
+ "borderRadius",
1427
+ e.target.value
1428
+ ),
1429
+ options: BORDER_RADIUS_OPTIONS
1430
+ }
1431
+ )
1432
+ ] }) }),
1433
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1434
+ /* @__PURE__ */ jsx2(FieldLabel2, { title: "Border Width", htmlFor: "borderWidth" }),
1435
+ /* @__PURE__ */ jsx2(
1436
+ SelectInput2,
1437
+ {
1438
+ id: "borderWidth",
1439
+ horizontalConstraint: 3,
1440
+ value: formValues.borderWidth,
1441
+ onChange: (e) => handleChange(
1442
+ "borderWidth",
1443
+ e.target.value
1444
+ ),
1445
+ options: BORDER_WIDTH_OPTIONS
1446
+ }
1447
+ )
1448
+ ] }) }),
1449
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1450
+ /* @__PURE__ */ jsx2(FieldLabel2, { title: "Button Style", htmlFor: "buttonStyle" }),
1451
+ /* @__PURE__ */ jsx2(
1452
+ SelectInput2,
1453
+ {
1454
+ id: "buttonStyle",
1455
+ horizontalConstraint: 3,
1456
+ value: formValues.buttonStyle,
1457
+ onChange: (e) => handleChange(
1458
+ "buttonStyle",
1459
+ e.target.value
1460
+ ),
1461
+ options: BUTTON_STYLE_OPTIONS
1462
+ }
1463
+ )
1464
+ ] }) }),
1465
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1466
+ /* @__PURE__ */ jsx2(FieldLabel2, { title: "Card Shadow", htmlFor: "cardShadow" }),
1467
+ /* @__PURE__ */ jsx2(
1468
+ SelectInput2,
1469
+ {
1470
+ id: "cardShadow",
1471
+ horizontalConstraint: 3,
1472
+ value: formValues.cardShadow,
1473
+ onChange: (e) => handleChange(
1474
+ "cardShadow",
1475
+ e.target.value
1476
+ ),
1477
+ options: CARD_SHADOW_OPTIONS
1478
+ }
1479
+ )
1480
+ ] }) }),
1481
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1482
+ /* @__PURE__ */ jsx2(FieldLabel2, { title: "Header Style", htmlFor: "headerStyle" }),
1483
+ /* @__PURE__ */ jsx2(
1484
+ SelectInput2,
1485
+ {
1486
+ id: "headerStyle",
1487
+ horizontalConstraint: 3,
1488
+ value: formValues.headerStyle,
1489
+ onChange: (e) => handleChange(
1490
+ "headerStyle",
1491
+ e.target.value
1492
+ ),
1493
+ options: HEADER_STYLE_OPTIONS
1494
+ }
1495
+ )
1496
+ ] }) })
1497
+ ]
1498
+ }
1499
+ ),
1500
+ /* @__PURE__ */ jsx2(Text.Headline, { as: "h2", children: "Shadow & surface" }),
1501
+ /* @__PURE__ */ jsxs2(
1502
+ Grid,
1503
+ {
1504
+ gridGap: "16px",
1505
+ gridAutoColumns: "1fr",
1506
+ gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
1507
+ children: [
1508
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1509
+ /* @__PURE__ */ jsx2(FieldLabel2, { title: "Shadow Light", htmlFor: "colorShadowLight" }),
1510
+ /* @__PURE__ */ jsxs2(Spacings2.Inline, { alignItems: "center", scale: "s", children: [
1511
+ /* @__PURE__ */ jsx2(
1512
+ "input",
1513
+ {
1514
+ type: "color",
1515
+ id: "colorShadowLight",
1516
+ value: formValues.colorShadowLight ?? "#ffffff",
1517
+ onChange: (e) => handleChange("colorShadowLight", e.target.value),
1518
+ style: { width: 40, height: 32, cursor: "pointer" }
1519
+ }
1520
+ ),
1521
+ /* @__PURE__ */ jsx2(
1522
+ TextInput,
1523
+ {
1524
+ horizontalConstraint: 3,
1525
+ value: formValues.colorShadowLight ?? "",
1526
+ onChange: (e) => handleChange(
1527
+ "colorShadowLight",
1528
+ e.target.value
1529
+ )
1530
+ }
1531
+ )
1532
+ ] })
1533
+ ] }) }),
1534
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1535
+ /* @__PURE__ */ jsx2(FieldLabel2, { title: "Shadow Dark", htmlFor: "colorShadowDark" }),
1536
+ /* @__PURE__ */ jsxs2(Spacings2.Inline, { alignItems: "center", scale: "s", children: [
1537
+ /* @__PURE__ */ jsx2(
1538
+ "input",
1539
+ {
1540
+ type: "color",
1541
+ id: "colorShadowDark",
1542
+ value: formValues.colorShadowDark ?? "#b8bec7",
1543
+ onChange: (e) => handleChange("colorShadowDark", e.target.value),
1544
+ style: { width: 40, height: 32, cursor: "pointer" }
1545
+ }
1546
+ ),
1547
+ /* @__PURE__ */ jsx2(
1548
+ TextInput,
1549
+ {
1550
+ horizontalConstraint: 3,
1551
+ value: formValues.colorShadowDark ?? "",
1552
+ onChange: (e) => handleChange(
1553
+ "colorShadowDark",
1554
+ e.target.value
1555
+ )
1556
+ }
1557
+ )
1558
+ ] })
1559
+ ] }) }),
1560
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1561
+ /* @__PURE__ */ jsx2(FieldLabel2, { title: "Surface Glass", htmlFor: "colorSurfaceGlass" }),
1562
+ /* @__PURE__ */ jsx2(
1563
+ TextInput,
1564
+ {
1565
+ horizontalConstraint: 3,
1566
+ id: "colorSurfaceGlass",
1567
+ value: formValues.colorSurfaceGlass ?? "",
1568
+ onChange: (e) => handleChange(
1569
+ "colorSurfaceGlass",
1570
+ e.target.value
1571
+ )
1572
+ }
1573
+ )
1574
+ ] }) }),
1575
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1576
+ /* @__PURE__ */ jsx2(FieldLabel2, { title: "Shadow Style", htmlFor: "shadowStyle" }),
1577
+ /* @__PURE__ */ jsx2(
1578
+ SelectInput2,
1579
+ {
1580
+ id: "shadowStyle",
1581
+ horizontalConstraint: 3,
1582
+ value: formValues.shadowStyle ?? DEFAULT_THEME.shadowStyle,
1583
+ onChange: (e) => handleChange(
1584
+ "shadowStyle",
1585
+ e.target.value
1586
+ ),
1587
+ options: SHADOW_STYLE_OPTIONS
1588
+ }
1589
+ )
1590
+ ] }) }),
1591
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1592
+ /* @__PURE__ */ jsx2(FieldLabel2, { title: "Surface Blur", htmlFor: "surfaceBlur" }),
1593
+ /* @__PURE__ */ jsx2(
1594
+ SelectInput2,
1595
+ {
1596
+ id: "surfaceBlur",
1597
+ horizontalConstraint: 3,
1598
+ value: formValues.surfaceBlur ?? DEFAULT_THEME.surfaceBlur,
1599
+ onChange: (e) => handleChange(
1600
+ "surfaceBlur",
1601
+ e.target.value
1602
+ ),
1603
+ options: SURFACE_BLUR_OPTIONS
1604
+ }
1605
+ )
1606
+ ] }) }),
1607
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1608
+ /* @__PURE__ */ jsx2(FieldLabel2, { title: "Surface Opacity", htmlFor: "surfaceOpacity" }),
1609
+ /* @__PURE__ */ jsx2(
1610
+ NumberInput,
1611
+ {
1612
+ id: "surfaceOpacity",
1613
+ horizontalConstraint: 3,
1614
+ value: formValues.surfaceOpacity ?? 1,
1615
+ onChange: (e) => handleChange(
1616
+ "surfaceOpacity",
1617
+ e.target.value === "" ? 0 : Math.min(1, Math.max(0, Number(e.target.value)))
1618
+ )
1619
+ }
1620
+ )
1621
+ ] }) }),
1622
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1623
+ /* @__PURE__ */ jsx2(FieldLabel2, { title: "Border Style", htmlFor: "borderStyle" }),
1624
+ /* @__PURE__ */ jsx2(
1625
+ SelectInput2,
1626
+ {
1627
+ id: "borderStyle",
1628
+ horizontalConstraint: 3,
1629
+ value: formValues.borderStyle ?? DEFAULT_THEME.borderStyle,
1630
+ onChange: (e) => handleChange(
1631
+ "borderStyle",
1632
+ e.target.value
1633
+ ),
1634
+ options: BORDER_STYLE_OPTIONS
1635
+ }
1636
+ )
1637
+ ] }) }),
1638
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1639
+ /* @__PURE__ */ jsx2(FieldLabel2, { title: "Background Style", htmlFor: "backgroundStyle" }),
1640
+ /* @__PURE__ */ jsx2(
1641
+ SelectInput2,
1642
+ {
1643
+ id: "backgroundStyle",
1644
+ horizontalConstraint: 3,
1645
+ value: formValues.backgroundStyle ?? DEFAULT_THEME.backgroundStyle,
1646
+ onChange: (e) => handleChange(
1647
+ "backgroundStyle",
1648
+ e.target.value
1649
+ ),
1650
+ options: BACKGROUND_STYLE_OPTIONS
1651
+ }
1652
+ )
1653
+ ] }) })
1654
+ ]
1655
+ }
1656
+ ),
1657
+ /* @__PURE__ */ jsx2(Text.Headline, { as: "h2", children: "Typography (weight & transform)" }),
1658
+ /* @__PURE__ */ jsxs2(
1659
+ Grid,
1660
+ {
1661
+ gridGap: "16px",
1662
+ gridAutoColumns: "1fr",
1663
+ gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
1664
+ children: [
1665
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1666
+ /* @__PURE__ */ jsx2(FieldLabel2, { title: "Font Weight Base", htmlFor: "fontWeightBase" }),
1667
+ /* @__PURE__ */ jsx2(
1668
+ SelectInput2,
1669
+ {
1670
+ id: "fontWeightBase",
1671
+ horizontalConstraint: 3,
1672
+ value: formValues.fontWeightBase ?? DEFAULT_THEME.fontWeightBase,
1673
+ onChange: (e) => handleChange(
1674
+ "fontWeightBase",
1675
+ e.target.value
1676
+ ),
1677
+ options: FONT_WEIGHT_BASE_OPTIONS
1678
+ }
1679
+ )
1680
+ ] }) }),
1681
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1682
+ /* @__PURE__ */ jsx2(FieldLabel2, { title: "Font Weight Heading", htmlFor: "fontWeightHeading" }),
1683
+ /* @__PURE__ */ jsx2(
1684
+ SelectInput2,
1685
+ {
1686
+ id: "fontWeightHeading",
1687
+ horizontalConstraint: 3,
1688
+ value: formValues.fontWeightHeading ?? DEFAULT_THEME.fontWeightHeading,
1689
+ onChange: (e) => handleChange(
1690
+ "fontWeightHeading",
1691
+ e.target.value
1692
+ ),
1693
+ options: FONT_WEIGHT_HEADING_OPTIONS
1694
+ }
1695
+ )
1696
+ ] }) }),
1697
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1698
+ /* @__PURE__ */ jsx2(FieldLabel2, { title: "Letter Spacing", htmlFor: "letterSpacing" }),
1699
+ /* @__PURE__ */ jsx2(
1700
+ SelectInput2,
1701
+ {
1702
+ id: "letterSpacing",
1703
+ horizontalConstraint: 3,
1704
+ value: formValues.letterSpacing ?? DEFAULT_THEME.letterSpacing,
1705
+ onChange: (e) => handleChange(
1706
+ "letterSpacing",
1707
+ e.target.value
1708
+ ),
1709
+ options: LETTER_SPACING_OPTIONS
1710
+ }
1711
+ )
1712
+ ] }) }),
1713
+ /* @__PURE__ */ jsx2(Grid.Item, { children: /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "1.5rem" }, children: [
1714
+ /* @__PURE__ */ jsx2(FieldLabel2, { title: "Text Transform", htmlFor: "textTransform" }),
1715
+ /* @__PURE__ */ jsx2(
1716
+ SelectInput2,
1717
+ {
1718
+ id: "textTransform",
1719
+ horizontalConstraint: 3,
1720
+ value: formValues.textTransform ?? DEFAULT_THEME.textTransform,
1721
+ onChange: (e) => handleChange(
1722
+ "textTransform",
1723
+ e.target.value
1724
+ ),
1725
+ options: TEXT_TRANSFORM_OPTIONS
1726
+ }
1727
+ )
1728
+ ] }) })
1729
+ ]
1730
+ }
1731
+ ),
1732
+ /* @__PURE__ */ jsxs2(Spacings2.Inline, { children: [
1733
+ /* @__PURE__ */ jsx2(
1734
+ PrimaryButton2,
1735
+ {
1736
+ label: saving ? "Saving\u2026" : "Save",
1737
+ onClick: handleSave,
1738
+ isDisabled: saving
1739
+ }
1740
+ ),
1741
+ /* @__PURE__ */ jsx2(
1742
+ SecondaryButton,
1743
+ {
1744
+ label: "Reset to default",
1745
+ onClick: handleResetToDefault,
1746
+ isDisabled: saving
1747
+ }
1748
+ )
1749
+ ] })
1750
+ ] }) }) })
1751
+ ] })
1752
+ ] })
1753
+ ] });
1754
+ };
1755
+ var ThemeManager = ({
1756
+ baseURL,
1757
+ projectKey,
1758
+ businessUnitKey,
1759
+ jwtToken,
1760
+ ...innerProps
1761
+ }) => /* @__PURE__ */ jsx2(
1762
+ PuckApiProvider,
1763
+ {
1764
+ baseURL,
1765
+ projectKey,
1766
+ businessUnitKey,
1767
+ jwtToken,
1768
+ children: /* @__PURE__ */ jsx2(ThemeEditorInner, { ...innerProps })
1769
+ }
1770
+ );
1771
+ var theme_editor_default = ThemeManager;
1772
+
1773
+ // src/components/import-content-types.tsx
1774
+ import { useState as useState3, useCallback as useCallback2 } from "react";
1775
+ import { useHistory as useHistory2 } from "react-router-dom";
1776
+ import { PuckApiProvider as PuckApiProvider2, usePuckContentType } from "@commercetools-demo/puck-api";
1777
+ import Card2 from "@commercetools-uikit/card";
1778
+ import FlatButton2 from "@commercetools-uikit/flat-button";
1779
+ import PrimaryButton3 from "@commercetools-uikit/primary-button";
1780
+ import Spacings3 from "@commercetools-uikit/spacings";
1781
+ import Text2 from "@commercetools-uikit/text";
1782
+ import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
1783
+ var ImportContentTypesInner = ({ backButton }) => {
1784
+ const history = useHistory2();
1785
+ const { importDefaultContentTypes, loading, error, clearError } = usePuckContentType();
1786
+ const [result, setResult] = useState3(null);
1787
+ const handleBack = useCallback2(() => {
1788
+ if (backButton?.onClick) {
1789
+ backButton.onClick();
1790
+ } else {
1791
+ history.push("/");
1792
+ }
1793
+ }, [backButton, history]);
1794
+ const handleImport = useCallback2(async () => {
1795
+ clearError();
1796
+ setResult(null);
1797
+ try {
1798
+ const importResult = await importDefaultContentTypes();
1799
+ setResult(importResult);
1800
+ } catch {
1801
+ }
1802
+ }, [importDefaultContentTypes, clearError]);
1803
+ return /* @__PURE__ */ jsxs3(Spacings3.Stack, { scale: "l", children: [
1804
+ backButton && /* @__PURE__ */ jsx3(
1805
+ FlatButton2,
1806
+ {
1807
+ onClick: handleBack,
1808
+ label: backButton.label,
1809
+ icon: backButton.icon,
1810
+ children: backButton.label
1811
+ }
1812
+ ),
1813
+ /* @__PURE__ */ jsx3(Text2.Headline, { as: "h1", children: "Import default content types" }),
1814
+ /* @__PURE__ */ jsx3(Text2.Body, { tone: "secondary", children: "Import default content type definitions from samples. Existing content types with the same key may be skipped or cause errors." }),
1815
+ error && /* @__PURE__ */ jsx3(Card2, { children: /* @__PURE__ */ jsxs3(Spacings3.Stack, { scale: "m", children: [
1816
+ /* @__PURE__ */ jsx3(Text2.Headline, { as: "h2", children: "Error" }),
1817
+ /* @__PURE__ */ jsx3(Text2.Body, { tone: "critical", children: error })
1818
+ ] }) }),
1819
+ /* @__PURE__ */ jsx3(Spacings3.Inline, { scale: "m", justifyContent: "center", children: /* @__PURE__ */ jsx3(
1820
+ PrimaryButton3,
1821
+ {
1822
+ label: loading ? "Importing\u2026" : "Import default content types",
1823
+ onClick: handleImport,
1824
+ isDisabled: loading
1825
+ }
1826
+ ) }),
1827
+ result && /* @__PURE__ */ jsx3(Card2, { children: /* @__PURE__ */ jsxs3(Spacings3.Stack, { scale: "m", children: [
1828
+ /* @__PURE__ */ jsx3(Text2.Headline, { as: "h2", children: "Result" }),
1829
+ /* @__PURE__ */ jsxs3(Text2.Body, { children: [
1830
+ "Imported: ",
1831
+ result.imported.length,
1832
+ " content type",
1833
+ result.imported.length !== 1 ? "s" : "",
1834
+ "."
1835
+ ] }),
1836
+ result.imported.length > 0 && /* @__PURE__ */ jsx3(Text2.Body, { tone: "secondary", children: result.imported.join(", ") }),
1837
+ result.failed.length > 0 && /* @__PURE__ */ jsxs3(Fragment, { children: [
1838
+ /* @__PURE__ */ jsxs3(Text2.Body, { tone: "critical", children: [
1839
+ "Failed: ",
1840
+ result.failed.length,
1841
+ " content type",
1842
+ result.failed.length !== 1 ? "s" : "",
1843
+ "."
1844
+ ] }),
1845
+ /* @__PURE__ */ jsx3(Spacings3.Stack, { scale: "s", children: result.failed.map(({ key, error: err }) => /* @__PURE__ */ jsxs3(Text2.Body, { tone: "critical", children: [
1846
+ key,
1847
+ ": ",
1848
+ err
1849
+ ] }, key)) })
1850
+ ] })
1851
+ ] }) })
1852
+ ] });
1853
+ };
1854
+ var ImportContentTypes = ({
1855
+ baseURL,
1856
+ projectKey,
1857
+ businessUnitKey,
1858
+ jwtToken,
1859
+ ...innerProps
1860
+ }) => /* @__PURE__ */ jsx3(
1861
+ PuckApiProvider2,
1862
+ {
1863
+ baseURL,
1864
+ projectKey,
1865
+ businessUnitKey,
1866
+ jwtToken,
1867
+ children: /* @__PURE__ */ jsx3(ImportContentTypesInner, { ...innerProps })
1868
+ }
1869
+ );
1870
+ var import_content_types_default = ImportContentTypes;
1871
+ export {
1872
+ DEFAULT_THEME,
1873
+ import_content_types_default as ImportContentTypes,
1874
+ PRESET_KEYS_SELECTOR,
1875
+ theme_editor_default as ThemeManager,
1876
+ buildCssVars,
1877
+ paradigmLabels,
1878
+ themePresets
1879
+ };
1880
+ //# sourceMappingURL=index.mjs.map