@zitadel/components 0.1.0-alpha.17 → 0.1.0-alpha.18

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 (36) hide show
  1. package/README.md +85 -19
  2. package/dist/atoms/index.d.mts +1 -1
  3. package/dist/atoms/index.mjs +1 -1
  4. package/dist/{atoms-KC7OJWXZ.mjs → atoms-5-wYIl88.mjs} +263 -188
  5. package/dist/atoms-5-wYIl88.mjs.map +1 -0
  6. package/dist/default-Bnjy2dJB.mjs +6 -0
  7. package/dist/default-Bnjy2dJB.mjs.map +1 -0
  8. package/dist/{index-BniwXaIC.d.mts → index-BRGZPZ2y.d.mts} +111 -1
  9. package/dist/index-BRGZPZ2y.d.mts.map +1 -0
  10. package/dist/{index-DjYJwejg.d.mts → index-CsJiPZtJ.d.mts} +437 -209
  11. package/dist/index-CsJiPZtJ.d.mts.map +1 -0
  12. package/dist/{index-DSZnfOJH.d.mts → index-DIGjtG4z.d.mts} +1626 -1017
  13. package/dist/index-DIGjtG4z.d.mts.map +1 -0
  14. package/dist/index.d.mts +5 -5
  15. package/dist/index.mjs +5 -5
  16. package/dist/jsx.d.ts +63 -0
  17. package/dist/manifests.mjs +1 -1
  18. package/dist/orchestrator/index.d.mts +3 -3
  19. package/dist/orchestrator/index.mjs +3 -3
  20. package/dist/{orchestrator-BWqJw4Yl.mjs → orchestrator-CctLkpmB.mjs} +1195 -764
  21. package/dist/orchestrator-CctLkpmB.mjs.map +1 -0
  22. package/dist/standalone.mjs +2484 -1284
  23. package/dist/tokens/index.d.mts +1 -1
  24. package/dist/tokens/index.mjs +1 -1
  25. package/dist/tokens-BV-PPbQd.mjs +356 -0
  26. package/dist/tokens-BV-PPbQd.mjs.map +1 -0
  27. package/package.json +14 -10
  28. package/dist/atoms-KC7OJWXZ.mjs.map +0 -1
  29. package/dist/default-CfF7GoLv.mjs +0 -6
  30. package/dist/default-CfF7GoLv.mjs.map +0 -1
  31. package/dist/index-BniwXaIC.d.mts.map +0 -1
  32. package/dist/index-DSZnfOJH.d.mts.map +0 -1
  33. package/dist/index-DjYJwejg.d.mts.map +0 -1
  34. package/dist/orchestrator-BWqJw4Yl.mjs.map +0 -1
  35. package/dist/tokens-CbH2s1jV.mjs +0 -246
  36. package/dist/tokens-CbH2s1jV.mjs.map +0 -1
package/dist/tokens/index.d.mts CHANGED
@@ -1,2 +1,2 @@
1
- import { i as tokens, n as Tokens, r as cssVars, t as CssVars } from "../index-BniwXaIC.mjs";
1
+ import { i as tokens, n as Tokens, r as cssVars, t as CssVars } from "../index-BRGZPZ2y.mjs";
2
2
  export { CssVars, Tokens, cssVars, tokens };
package/dist/tokens/index.mjs CHANGED
@@ -1,2 +1,2 @@
1
- import { n as tokens, t as cssVars } from "../tokens-CbH2s1jV.mjs";
1
+ import { n as tokens, t as cssVars } from "../tokens-BV-PPbQd.mjs";
2
2
  export { cssVars, tokens };
package/dist/tokens-BV-PPbQd.mjs ADDED
@@ -0,0 +1,356 @@
1
+ //#region ../design-tokens/dist/tokens.mjs
2
+ const tokens = {
3
+ "color": {
4
+ "surface": {
5
+ "defaultBlack": "#0f0f11",
6
+ "defaultWhite": "#f4f4f6",
7
+ "defaultPrimaryGray": "#252528",
8
+ "defaultSecondaryGray": "#37373a",
9
+ "hoverStrong": "#cfcfde",
10
+ "hoverSubtle": "#484a57"
11
+ },
12
+ "text": {
13
+ "primaryWhite": "#f4f4f6",
14
+ "secondaryGray": "#bfbfcf",
15
+ "buttonDefault": "#0f0f11",
16
+ "buttonInvert": "#f4f4f6",
17
+ "disabled": "#686883",
18
+ "error": "#ea4f70",
19
+ "success": "#33a779",
20
+ "subtitlePink": "#f48aa0",
21
+ "subtitlePurple": "#bba5e4",
22
+ "subtitleGray": "#bfbfcf",
23
+ "subtitleOrange": "#f25543"
24
+ },
25
+ "icon": {
26
+ "defaultBlack": "#0f0f11",
27
+ "defaultWhite": "#f4f4f6",
28
+ "defaultGray": "#bfbfcf",
29
+ "defaultPink": "#f48aa0",
30
+ "defaultPurple": "#bba5e4",
31
+ "defaultOrange": "#f25543",
32
+ "disabled": "#686883",
33
+ "error": "#ea4f70",
34
+ "success": "#33a779"
35
+ },
36
+ "border": {
37
+ "defaultBlack": "#252528",
38
+ "defaultWhite": "#f4f4f6",
39
+ "defaultGray100": "#37373a",
40
+ "defaultGray200": "#484a57",
41
+ "defaultGray300": "#686883",
42
+ "defaultGray400": "#82829c",
43
+ "hover": "#9e9eb2",
44
+ "error": "#ea4f70",
45
+ "success": "#33a779"
46
+ },
47
+ "gray": {
48
+ "50": "#0f0f11",
49
+ "75": "#252528",
50
+ "100": "#37373a",
51
+ "200": "#484a57",
52
+ "300": "#686883",
53
+ "400": "#82829c",
54
+ "500": "#9e9eb2",
55
+ "600": "#cfcfde",
56
+ "700": "#bfbfcf",
57
+ "800": "#e1e1e7",
58
+ "900": "#f4f4f6"
59
+ }
60
+ },
61
+ "theme": {
62
+ "accent": "#404040",
63
+ "accentForeground": "#fafafa",
64
+ "background": "#050505",
65
+ "border": "#252525",
66
+ "card": "#121212",
67
+ "cardForeground": "#fafafa",
68
+ "destructive": "#f87171",
69
+ "destructiveForeground": "#fef2f2",
70
+ "foreground": "#fafafa",
71
+ "input": "#ffffff26",
72
+ "muted": "#262626",
73
+ "mutedForeground": "#a3a3a3",
74
+ "popover": "#262626",
75
+ "popoverForeground": "#fafafa",
76
+ "primary": "#e5e5e5",
77
+ "primaryForeground": "#171717",
78
+ "ring": "#737373",
79
+ "secondary": "#262626",
80
+ "secondaryForeground": "#fafafa",
81
+ "ringOffset": "#050505",
82
+ "chart1": "#3b82f6",
83
+ "chart2": "#34d399",
84
+ "chart3": "#fbbf24",
85
+ "chart4": "#a78bfa",
86
+ "chart5": "#fb7185",
87
+ "sidebarPrimaryForeground": "#fafafa",
88
+ "sidebarPrimary": "#1d4ed8",
89
+ "sidebarForeground": "#fafafa",
90
+ "sidebar": "#171717",
91
+ "sidebarAccent": "#262626",
92
+ "sidebarAccentForeground": "#fafafa",
93
+ "sidebarBorder": "#ffffff1a",
94
+ "sidebarRing": "#525252",
95
+ "success": "#22c55e"
96
+ },
97
+ "spacing": {
98
+ "10": "4rem",
99
+ "11": "5rem",
100
+ "12": "5.5rem",
101
+ "13": "6rem",
102
+ "14": "6.5rem",
103
+ "15": "7rem",
104
+ "16": "7.5rem",
105
+ "01": "0.25rem",
106
+ "02": "0.5rem",
107
+ "03": "1rem",
108
+ "04": "1.5rem",
109
+ "05": "2rem",
110
+ "06": "1.5rem",
111
+ "07": "2.5rem",
112
+ "08": "3rem",
113
+ "09": "3.5rem"
114
+ },
115
+ "radius": {
116
+ "xs": "0.25rem",
117
+ "s": "0.5rem",
118
+ "m": "0.75rem",
119
+ "l": "1rem",
120
+ "xl": "1.5rem"
121
+ },
122
+ "font": { "family": {
123
+ "sans": "\"Arimo\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif",
124
+ "heading": "\"Arimo\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif",
125
+ "mono": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace"
126
+ } },
127
+ "motion": {
128
+ "duration": {
129
+ "instant": "0ms",
130
+ "fast": "120ms",
131
+ "base": "200ms",
132
+ "slow": "320ms"
133
+ },
134
+ "easing": {
135
+ "standard": "cubic-bezier(0.2, 0, 0, 1)",
136
+ "decelerate": "cubic-bezier(0, 0, 0, 1)",
137
+ "accelerate": "cubic-bezier(0.3, 0, 1, 1)"
138
+ }
139
+ },
140
+ "focus": {
141
+ "width": "2px",
142
+ "offset": "2px",
143
+ "color": "#f4f4f6"
144
+ },
145
+ "breakpoint": {
146
+ "xs": "26.5625rem",
147
+ "sm": "40rem",
148
+ "md": "48rem",
149
+ "lg": "64rem",
150
+ "xl": "80rem",
151
+ "2xl": "96rem",
152
+ "3xl": "120rem",
153
+ "4xl": "160rem"
154
+ },
155
+ "container": {
156
+ "authCard": "24rem",
157
+ "page": "80rem"
158
+ },
159
+ "layout": {},
160
+ "gradient": {
161
+ "purpleStart": "#401889",
162
+ "redStart": "#f25543",
163
+ "neutralStart": "#484a57",
164
+ "baseEnd": "#0f0f11",
165
+ "lavenderStart": "#bba5e4",
166
+ "roseStart": "#ea8aa0"
167
+ },
168
+ "syntax": {
169
+ "key": "#9066da",
170
+ "string": "#f25543",
171
+ "number": "#e25f7d",
172
+ "boolean": "#bba5e4",
173
+ "punctuation": "#82829c",
174
+ "comment": "#7c7c95"
175
+ }
176
+ };
177
+ const cssVars = {
178
+ "color": {
179
+ "surface": {
180
+ "defaultBlack": "var(--zl-color-surface-default-black)",
181
+ "defaultWhite": "var(--zl-color-surface-default-white)",
182
+ "defaultPrimaryGray": "var(--zl-color-surface-default-primary-gray)",
183
+ "defaultSecondaryGray": "var(--zl-color-surface-default-secondary-gray)",
184
+ "hoverStrong": "var(--zl-color-surface-hover-strong)",
185
+ "hoverSubtle": "var(--zl-color-surface-hover-subtle)"
186
+ },
187
+ "text": {
188
+ "primaryWhite": "var(--zl-color-text-primary-white)",
189
+ "secondaryGray": "var(--zl-color-text-secondary-gray)",
190
+ "buttonDefault": "var(--zl-color-text-button-default)",
191
+ "buttonInvert": "var(--zl-color-text-button-invert)",
192
+ "disabled": "var(--zl-color-text-disabled)",
193
+ "error": "var(--zl-color-text-error)",
194
+ "success": "var(--zl-color-text-success)",
195
+ "subtitlePink": "var(--zl-color-text-subtitle-pink)",
196
+ "subtitlePurple": "var(--zl-color-text-subtitle-purple)",
197
+ "subtitleGray": "var(--zl-color-text-subtitle-gray)",
198
+ "subtitleOrange": "var(--zl-color-text-subtitle-orange)"
199
+ },
200
+ "icon": {
201
+ "defaultBlack": "var(--zl-color-icon-default-black)",
202
+ "defaultWhite": "var(--zl-color-icon-default-white)",
203
+ "defaultGray": "var(--zl-color-icon-default-gray)",
204
+ "defaultPink": "var(--zl-color-icon-default-pink)",
205
+ "defaultPurple": "var(--zl-color-icon-default-purple)",
206
+ "defaultOrange": "var(--zl-color-icon-default-orange)",
207
+ "disabled": "var(--zl-color-icon-disabled)",
208
+ "error": "var(--zl-color-icon-error)",
209
+ "success": "var(--zl-color-icon-success)"
210
+ },
211
+ "border": {
212
+ "defaultBlack": "var(--zl-color-border-default-black)",
213
+ "defaultWhite": "var(--zl-color-border-default-white)",
214
+ "defaultGray100": "var(--zl-color-border-default-gray-100)",
215
+ "defaultGray200": "var(--zl-color-border-default-gray-200)",
216
+ "defaultGray300": "var(--zl-color-border-default-gray-300)",
217
+ "defaultGray400": "var(--zl-color-border-default-gray-400)",
218
+ "hover": "var(--zl-color-border-hover)",
219
+ "error": "var(--zl-color-border-error)",
220
+ "success": "var(--zl-color-border-success)"
221
+ },
222
+ "gray": {
223
+ "50": "var(--zl-color-gray-50)",
224
+ "75": "var(--zl-color-gray-75)",
225
+ "100": "var(--zl-color-gray-100)",
226
+ "200": "var(--zl-color-gray-200)",
227
+ "300": "var(--zl-color-gray-300)",
228
+ "400": "var(--zl-color-gray-400)",
229
+ "500": "var(--zl-color-gray-500)",
230
+ "600": "var(--zl-color-gray-600)",
231
+ "700": "var(--zl-color-gray-700)",
232
+ "800": "var(--zl-color-gray-800)",
233
+ "900": "var(--zl-color-gray-900)"
234
+ }
235
+ },
236
+ "theme": {
237
+ "accent": "var(--zl-accent)",
238
+ "accentForeground": "var(--zl-accent-foreground)",
239
+ "background": "var(--zl-background)",
240
+ "border": "var(--zl-border)",
241
+ "card": "var(--zl-card)",
242
+ "cardForeground": "var(--zl-card-foreground)",
243
+ "destructive": "var(--zl-destructive)",
244
+ "destructiveForeground": "var(--zl-destructive-foreground)",
245
+ "foreground": "var(--zl-foreground)",
246
+ "input": "var(--zl-input)",
247
+ "muted": "var(--zl-muted)",
248
+ "mutedForeground": "var(--zl-muted-foreground)",
249
+ "popover": "var(--zl-popover)",
250
+ "popoverForeground": "var(--zl-popover-foreground)",
251
+ "primary": "var(--zl-primary)",
252
+ "primaryForeground": "var(--zl-primary-foreground)",
253
+ "ring": "var(--zl-ring)",
254
+ "secondary": "var(--zl-secondary)",
255
+ "secondaryForeground": "var(--zl-secondary-foreground)",
256
+ "ringOffset": "var(--zl-ring-offset)",
257
+ "chart1": "var(--zl-chart-1)",
258
+ "chart2": "var(--zl-chart-2)",
259
+ "chart3": "var(--zl-chart-3)",
260
+ "chart4": "var(--zl-chart-4)",
261
+ "chart5": "var(--zl-chart-5)",
262
+ "sidebarPrimaryForeground": "var(--zl-sidebar-primary-foreground)",
263
+ "sidebarPrimary": "var(--zl-sidebar-primary)",
264
+ "sidebarForeground": "var(--zl-sidebar-foreground)",
265
+ "sidebar": "var(--zl-sidebar)",
266
+ "sidebarAccent": "var(--zl-sidebar-accent)",
267
+ "sidebarAccentForeground": "var(--zl-sidebar-accent-foreground)",
268
+ "sidebarBorder": "var(--zl-sidebar-border)",
269
+ "sidebarRing": "var(--zl-sidebar-ring)",
270
+ "success": "var(--zl-success)"
271
+ },
272
+ "spacing": {
273
+ "10": "var(--zl-spacing-10)",
274
+ "11": "var(--zl-spacing-11)",
275
+ "12": "var(--zl-spacing-12)",
276
+ "13": "var(--zl-spacing-13)",
277
+ "14": "var(--zl-spacing-14)",
278
+ "15": "var(--zl-spacing-15)",
279
+ "16": "var(--zl-spacing-16)",
280
+ "01": "var(--zl-spacing-01)",
281
+ "02": "var(--zl-spacing-02)",
282
+ "03": "var(--zl-spacing-03)",
283
+ "04": "var(--zl-spacing-04)",
284
+ "05": "var(--zl-spacing-05)",
285
+ "06": "var(--zl-spacing-06)",
286
+ "07": "var(--zl-spacing-07)",
287
+ "08": "var(--zl-spacing-08)",
288
+ "09": "var(--zl-spacing-09)"
289
+ },
290
+ "radius": {
291
+ "xs": "var(--zl-radius-xs)",
292
+ "s": "var(--zl-radius-s)",
293
+ "m": "var(--zl-radius-m)",
294
+ "l": "var(--zl-radius-l)",
295
+ "xl": "var(--zl-radius-xl)"
296
+ },
297
+ "font": { "family": {
298
+ "sans": "var(--zl-font-family-sans)",
299
+ "heading": "var(--zl-font-family-heading)",
300
+ "mono": "var(--zl-font-family-mono)"
301
+ } },
302
+ "motion": {
303
+ "duration": {
304
+ "instant": "var(--zl-duration-instant)",
305
+ "fast": "var(--zl-duration-fast)",
306
+ "base": "var(--zl-duration-base)",
307
+ "slow": "var(--zl-duration-slow)"
308
+ },
309
+ "easing": {
310
+ "standard": "var(--zl-easing-standard)",
311
+ "decelerate": "var(--zl-easing-decelerate)",
312
+ "accelerate": "var(--zl-easing-accelerate)"
313
+ }
314
+ },
315
+ "focus": {
316
+ "width": "var(--zl-focus-width)",
317
+ "offset": "var(--zl-focus-offset)",
318
+ "color": "var(--zl-focus-color)"
319
+ },
320
+ "breakpoint": {
321
+ "xs": "var(--zl-breakpoint-xs)",
322
+ "sm": "var(--zl-breakpoint-sm)",
323
+ "md": "var(--zl-breakpoint-md)",
324
+ "lg": "var(--zl-breakpoint-lg)",
325
+ "xl": "var(--zl-breakpoint-xl)",
326
+ "2xl": "var(--zl-breakpoint-2xl)",
327
+ "3xl": "var(--zl-breakpoint-3xl)",
328
+ "4xl": "var(--zl-breakpoint-4xl)"
329
+ },
330
+ "container": {
331
+ "authCard": "var(--zl-container-auth-card)",
332
+ "page": "var(--zl-container-page)"
333
+ },
334
+ "layout": {},
335
+ "gradient": {
336
+ "purpleStart": "var(--zl-gradient-purple-start)",
337
+ "redStart": "var(--zl-gradient-red-start)",
338
+ "neutralStart": "var(--zl-gradient-neutral-start)",
339
+ "baseEnd": "var(--zl-gradient-base-end)",
340
+ "lavenderStart": "var(--zl-gradient-lavender-start)",
341
+ "roseStart": "var(--zl-gradient-rose-start)"
342
+ },
343
+ "syntax": {
344
+ "key": "var(--zl-syntax-key)",
345
+ "string": "var(--zl-syntax-string)",
346
+ "number": "var(--zl-syntax-number)",
347
+ "boolean": "var(--zl-syntax-boolean)",
348
+ "punctuation": "var(--zl-syntax-punctuation)",
349
+ "comment": "var(--zl-syntax-comment)"
350
+ }
351
+ };
352
+ const tokensCss = "/* AUTOGENERATED by packages/design-tokens/scripts/build.ts — do not edit by hand.\n Source: src/legacy.tokens.json + src/generated/figma.tokens.json + src/overrides.ts.\n Re-run: moon run design-tokens:generate */\n\n:root,\n[data-theme=\"dark\"] {\n --zl-color-surface-default-black: #0f0f11;\n --zl-color-surface-default-white: #f4f4f6;\n --zl-color-surface-default-primary-gray: #252528;\n --zl-color-surface-default-secondary-gray: #37373a;\n --zl-color-surface-hover-strong: #cfcfde;\n --zl-color-surface-hover-subtle: #484a57;\n --zl-color-text-primary-white: #f4f4f6;\n --zl-color-text-secondary-gray: #bfbfcf;\n --zl-color-text-button-default: #0f0f11;\n --zl-color-text-button-invert: #f4f4f6;\n --zl-color-text-disabled: #686883;\n --zl-color-text-error: #ea4f70;\n --zl-color-text-success: #33a779;\n --zl-color-text-subtitle-pink: #f48aa0;\n --zl-color-text-subtitle-purple: #bba5e4;\n --zl-color-text-subtitle-gray: #bfbfcf;\n --zl-color-text-subtitle-orange: #f25543;\n --zl-color-icon-default-black: #0f0f11;\n --zl-color-icon-default-white: #f4f4f6;\n --zl-color-icon-default-gray: #bfbfcf;\n --zl-color-icon-default-pink: #f48aa0;\n --zl-color-icon-default-purple: #bba5e4;\n --zl-color-icon-default-orange: #f25543;\n --zl-color-icon-disabled: #686883;\n --zl-color-icon-error: #ea4f70;\n --zl-color-icon-success: #33a779;\n --zl-color-border-default-black: #252528;\n --zl-color-border-default-white: #f4f4f6;\n --zl-color-border-default-gray-100: #37373a;\n --zl-color-border-default-gray-200: #484a57;\n --zl-color-border-default-gray-300: #686883;\n --zl-color-border-default-gray-400: #82829c;\n --zl-color-border-hover: #9e9eb2;\n --zl-color-border-error: #ea4f70;\n --zl-color-border-success: #33a779;\n --zl-accent: #404040;\n --zl-accent-foreground: #fafafa;\n --zl-background: #050505;\n --zl-border: #252525;\n --zl-card: #121212;\n --zl-card-foreground: #fafafa;\n --zl-destructive: #f87171;\n --zl-destructive-foreground: #fef2f2;\n --zl-foreground: #fafafa;\n --zl-input: #ffffff26;\n --zl-muted: #262626;\n --zl-muted-foreground: #a3a3a3;\n --zl-popover: #262626;\n --zl-popover-foreground: #fafafa;\n --zl-primary: #e5e5e5;\n --zl-primary-foreground: #171717;\n --zl-ring: #737373;\n --zl-secondary: #262626;\n --zl-secondary-foreground: #fafafa;\n --zl-ring-offset: #050505;\n --zl-chart-1: #3b82f6;\n --zl-chart-2: #34d399;\n --zl-chart-3: #fbbf24;\n --zl-chart-4: #a78bfa;\n --zl-chart-5: #fb7185;\n --zl-sidebar-primary-foreground: #fafafa;\n --zl-sidebar-primary: #1d4ed8;\n --zl-sidebar-foreground: #fafafa;\n --zl-sidebar: #171717;\n --zl-sidebar-accent: #262626;\n --zl-sidebar-accent-foreground: #fafafa;\n --zl-sidebar-border: #ffffff1a;\n --zl-sidebar-ring: #525252;\n --zl-success: #22c55e;\n --zl-color-gray-50: #0f0f11;\n --zl-color-gray-75: #252528;\n --zl-color-gray-100: #37373a;\n --zl-color-gray-200: #484a57;\n --zl-color-gray-300: #686883;\n --zl-color-gray-400: #82829c;\n --zl-color-gray-500: #9e9eb2;\n --zl-color-gray-600: #cfcfde;\n --zl-color-gray-700: #bfbfcf;\n --zl-color-gray-800: #e1e1e7;\n --zl-color-gray-900: #f4f4f6;\n --zl-spacing-01: 0.25rem;\n --zl-spacing-02: 0.5rem;\n --zl-spacing-03: 1rem;\n --zl-spacing-04: 1.5rem;\n --zl-spacing-05: 2rem;\n --zl-spacing-06: 1.5rem;\n --zl-spacing-07: 2.5rem;\n --zl-spacing-08: 3rem;\n --zl-spacing-09: 3.5rem;\n --zl-spacing-10: 4rem;\n --zl-spacing-11: 5rem;\n --zl-spacing-12: 5.5rem;\n --zl-spacing-13: 6rem;\n --zl-spacing-14: 6.5rem;\n --zl-spacing-15: 7rem;\n --zl-spacing-16: 7.5rem;\n --zl-radius-xs: 0.25rem;\n --zl-radius-s: 0.5rem;\n --zl-radius-m: 0.75rem;\n --zl-radius-l: 1rem;\n --zl-radius-xl: 1.5rem;\n --zl-font-family-sans: \"Arimo\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n --zl-font-family-heading: \"Arimo\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n --zl-font-family-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --zl-duration-instant: 0ms;\n --zl-duration-fast: 120ms;\n --zl-duration-base: 200ms;\n --zl-duration-slow: 320ms;\n --zl-easing-standard: cubic-bezier(0.2, 0, 0, 1);\n --zl-easing-decelerate: cubic-bezier(0, 0, 0, 1);\n --zl-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);\n --zl-focus-width: 2px;\n --zl-focus-offset: 2px;\n --zl-focus-color: #f4f4f6;\n --zl-breakpoint-xs: 26.5625rem;\n --zl-breakpoint-sm: 40rem;\n --zl-breakpoint-md: 48rem;\n --zl-breakpoint-lg: 64rem;\n --zl-breakpoint-xl: 80rem;\n --zl-breakpoint-2xl: 96rem;\n --zl-breakpoint-3xl: 120rem;\n --zl-breakpoint-4xl: 160rem;\n --zl-container-auth-card: 24rem;\n --zl-container-page: 80rem;\n --zl-gradient-purple-start: #401889;\n --zl-gradient-red-start: #f25543;\n --zl-gradient-neutral-start: #484a57;\n --zl-gradient-base-end: #0f0f11;\n --zl-gradient-lavender-start: #bba5e4;\n --zl-gradient-rose-start: #ea8aa0;\n --zl-syntax-key: #9066da;\n --zl-syntax-string: #f25543;\n --zl-syntax-number: #e25f7d;\n --zl-syntax-boolean: #bba5e4;\n --zl-syntax-punctuation: #82829c;\n --zl-syntax-comment: #7c7c95;\n}\n\n[data-theme=\"light\"] {\n --zl-color-surface-default-black: #f4f4f6;\n --zl-color-surface-default-white: #0f0f11;\n --zl-color-surface-default-primary-gray: #ffffff;\n --zl-color-surface-default-secondary-gray: #e1e1e7;\n --zl-color-surface-hover-strong: #37373a;\n --zl-color-surface-hover-subtle: #cfcfde;\n --zl-color-text-primary-white: #0f0f11;\n --zl-color-text-secondary-gray: #686883;\n --zl-color-text-button-default: #f4f4f6;\n --zl-color-text-button-invert: #0f0f11;\n --zl-color-text-disabled: #9e9eb2;\n --zl-color-text-error: #c52247;\n --zl-color-text-success: #217a55;\n --zl-color-text-subtitle-pink: #c52247;\n --zl-color-text-subtitle-purple: #6f53b3;\n --zl-color-text-subtitle-gray: #686883;\n --zl-color-text-subtitle-orange: #c0341f;\n --zl-color-icon-default-black: #f4f4f6;\n --zl-color-icon-default-white: #0f0f11;\n --zl-color-icon-default-gray: #686883;\n --zl-color-icon-default-pink: #c52247;\n --zl-color-icon-default-purple: #6f53b3;\n --zl-color-icon-default-orange: #c0341f;\n --zl-color-icon-disabled: #9e9eb2;\n --zl-color-icon-error: #c52247;\n --zl-color-icon-success: #217a55;\n --zl-color-border-default-black: #e1e1e7;\n --zl-color-border-default-white: #0f0f11;\n --zl-color-border-default-gray-100: #e1e1e7;\n --zl-color-border-default-gray-200: #cfcfde;\n --zl-color-border-default-gray-300: #9e9eb2;\n --zl-color-border-hover: #686883;\n --zl-color-border-error: #c52247;\n --zl-color-border-success: #217a55;\n --zl-accent: #f5f5f5;\n --zl-accent-foreground: #171717;\n --zl-background: #fafafa;\n --zl-border: #e5e5e5;\n --zl-card: #ffffff;\n --zl-card-foreground: #0a0a0a;\n --zl-destructive: #dc2626;\n --zl-foreground: #0a0a0a;\n --zl-input: #e5e5e5;\n --zl-muted: #f5f5f5;\n --zl-muted-foreground: #737373;\n --zl-popover: #ffffff;\n --zl-popover-foreground: #0a0a0a;\n --zl-primary: #171717;\n --zl-primary-foreground: #fafafa;\n --zl-ring: #a3a3a3;\n --zl-secondary: #f5f5f5;\n --zl-secondary-foreground: #171717;\n --zl-ring-offset: #fafafa;\n --zl-chart-1: #ea580c;\n --zl-chart-2: #0d9488;\n --zl-chart-3: #164e63;\n --zl-chart-4: #fbbf24;\n --zl-chart-5: #f59e0b;\n --zl-sidebar-primary: #171717;\n --zl-sidebar-foreground: #0a0a0a;\n --zl-sidebar: #fafafa;\n --zl-sidebar-accent: #f5f5f5;\n --zl-sidebar-accent-foreground: #171717;\n --zl-sidebar-border: #e5e5e5;\n --zl-sidebar-ring: #a3a3a3;\n --zl-focus-color: #0f0f11;\n --zl-gradient-neutral-start: #bfbfcf;\n --zl-gradient-base-end: #fafafa;\n --zl-syntax-key: #401889;\n --zl-syntax-string: #bd2514;\n --zl-syntax-number: #c52247;\n --zl-syntax-boolean: #5a23bd;\n --zl-syntax-punctuation: #686883;\n --zl-syntax-comment: #71718b;\n}\n";
353
+ //#endregion
354
+ export { tokens as n, tokensCss as r, cssVars as t };
355
+
356
+ //# sourceMappingURL=tokens-BV-PPbQd.mjs.map
package/dist/tokens-BV-PPbQd.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tokens-BV-PPbQd.mjs","names":[],"sources":["../../design-tokens/dist/tokens.mjs"],"sourcesContent":["//#region src/generated/tokens.ts\nconst tokens = {\n\t\"color\": {\n\t\t\"surface\": {\n\t\t\t\"defaultBlack\": \"#0f0f11\",\n\t\t\t\"defaultWhite\": \"#f4f4f6\",\n\t\t\t\"defaultPrimaryGray\": \"#252528\",\n\t\t\t\"defaultSecondaryGray\": \"#37373a\",\n\t\t\t\"hoverStrong\": \"#cfcfde\",\n\t\t\t\"hoverSubtle\": \"#484a57\"\n\t\t},\n\t\t\"text\": {\n\t\t\t\"primaryWhite\": \"#f4f4f6\",\n\t\t\t\"secondaryGray\": \"#bfbfcf\",\n\t\t\t\"buttonDefault\": \"#0f0f11\",\n\t\t\t\"buttonInvert\": \"#f4f4f6\",\n\t\t\t\"disabled\": \"#686883\",\n\t\t\t\"error\": \"#ea4f70\",\n\t\t\t\"success\": \"#33a779\",\n\t\t\t\"subtitlePink\": \"#f48aa0\",\n\t\t\t\"subtitlePurple\": \"#bba5e4\",\n\t\t\t\"subtitleGray\": \"#bfbfcf\",\n\t\t\t\"subtitleOrange\": \"#f25543\"\n\t\t},\n\t\t\"icon\": {\n\t\t\t\"defaultBlack\": \"#0f0f11\",\n\t\t\t\"defaultWhite\": \"#f4f4f6\",\n\t\t\t\"defaultGray\": \"#bfbfcf\",\n\t\t\t\"defaultPink\": \"#f48aa0\",\n\t\t\t\"defaultPurple\": \"#bba5e4\",\n\t\t\t\"defaultOrange\": \"#f25543\",\n\t\t\t\"disabled\": \"#686883\",\n\t\t\t\"error\": \"#ea4f70\",\n\t\t\t\"success\": \"#33a779\"\n\t\t},\n\t\t\"border\": {\n\t\t\t\"defaultBlack\": \"#252528\",\n\t\t\t\"defaultWhite\": \"#f4f4f6\",\n\t\t\t\"defaultGray100\": \"#37373a\",\n\t\t\t\"defaultGray200\": \"#484a57\",\n\t\t\t\"defaultGray300\": \"#686883\",\n\t\t\t\"defaultGray400\": \"#82829c\",\n\t\t\t\"hover\": \"#9e9eb2\",\n\t\t\t\"error\": \"#ea4f70\",\n\t\t\t\"success\": \"#33a779\"\n\t\t},\n\t\t\"gray\": {\n\t\t\t\"50\": \"#0f0f11\",\n\t\t\t\"75\": \"#252528\",\n\t\t\t\"100\": \"#37373a\",\n\t\t\t\"200\": \"#484a57\",\n\t\t\t\"300\": \"#686883\",\n\t\t\t\"400\": \"#82829c\",\n\t\t\t\"500\": \"#9e9eb2\",\n\t\t\t\"600\": \"#cfcfde\",\n\t\t\t\"700\": \"#bfbfcf\",\n\t\t\t\"800\": \"#e1e1e7\",\n\t\t\t\"900\": \"#f4f4f6\"\n\t\t}\n\t},\n\t\"theme\": {\n\t\t\"accent\": \"#404040\",\n\t\t\"accentForeground\": \"#fafafa\",\n\t\t\"background\": \"#050505\",\n\t\t\"border\": \"#252525\",\n\t\t\"card\": \"#121212\",\n\t\t\"cardForeground\": \"#fafafa\",\n\t\t\"destructive\": \"#f87171\",\n\t\t\"destructiveForeground\": \"#fef2f2\",\n\t\t\"foreground\": \"#fafafa\",\n\t\t\"input\": \"#ffffff26\",\n\t\t\"muted\": \"#262626\",\n\t\t\"mutedForeground\": \"#a3a3a3\",\n\t\t\"popover\": \"#262626\",\n\t\t\"popoverForeground\": \"#fafafa\",\n\t\t\"primary\": \"#e5e5e5\",\n\t\t\"primaryForeground\": \"#171717\",\n\t\t\"ring\": \"#737373\",\n\t\t\"secondary\": \"#262626\",\n\t\t\"secondaryForeground\": \"#fafafa\",\n\t\t\"ringOffset\": \"#050505\",\n\t\t\"chart1\": \"#3b82f6\",\n\t\t\"chart2\": \"#34d399\",\n\t\t\"chart3\": \"#fbbf24\",\n\t\t\"chart4\": \"#a78bfa\",\n\t\t\"chart5\": \"#fb7185\",\n\t\t\"sidebarPrimaryForeground\": \"#fafafa\",\n\t\t\"sidebarPrimary\": \"#1d4ed8\",\n\t\t\"sidebarForeground\": \"#fafafa\",\n\t\t\"sidebar\": \"#171717\",\n\t\t\"sidebarAccent\": \"#262626\",\n\t\t\"sidebarAccentForeground\": \"#fafafa\",\n\t\t\"sidebarBorder\": \"#ffffff1a\",\n\t\t\"sidebarRing\": \"#525252\",\n\t\t\"success\": \"#22c55e\"\n\t},\n\t\"spacing\": {\n\t\t\"10\": \"4rem\",\n\t\t\"11\": \"5rem\",\n\t\t\"12\": \"5.5rem\",\n\t\t\"13\": \"6rem\",\n\t\t\"14\": \"6.5rem\",\n\t\t\"15\": \"7rem\",\n\t\t\"16\": \"7.5rem\",\n\t\t\"01\": \"0.25rem\",\n\t\t\"02\": \"0.5rem\",\n\t\t\"03\": \"1rem\",\n\t\t\"04\": \"1.5rem\",\n\t\t\"05\": \"2rem\",\n\t\t\"06\": \"1.5rem\",\n\t\t\"07\": \"2.5rem\",\n\t\t\"08\": \"3rem\",\n\t\t\"09\": \"3.5rem\"\n\t},\n\t\"radius\": {\n\t\t\"xs\": \"0.25rem\",\n\t\t\"s\": \"0.5rem\",\n\t\t\"m\": \"0.75rem\",\n\t\t\"l\": \"1rem\",\n\t\t\"xl\": \"1.5rem\"\n\t},\n\t\"font\": { \"family\": {\n\t\t\"sans\": \"\\\"Arimo\\\", system-ui, -apple-system, \\\"Segoe UI\\\", Helvetica, Arial, sans-serif\",\n\t\t\"heading\": \"\\\"Arimo\\\", system-ui, -apple-system, \\\"Segoe UI\\\", Helvetica, Arial, sans-serif\",\n\t\t\"mono\": \"ui-monospace, SFMono-Regular, \\\"SF Mono\\\", Menlo, Monaco, Consolas, \\\"Liberation Mono\\\", \\\"Courier New\\\", monospace\"\n\t} },\n\t\"motion\": {\n\t\t\"duration\": {\n\t\t\t\"instant\": \"0ms\",\n\t\t\t\"fast\": \"120ms\",\n\t\t\t\"base\": \"200ms\",\n\t\t\t\"slow\": \"320ms\"\n\t\t},\n\t\t\"easing\": {\n\t\t\t\"standard\": \"cubic-bezier(0.2, 0, 0, 1)\",\n\t\t\t\"decelerate\": \"cubic-bezier(0, 0, 0, 1)\",\n\t\t\t\"accelerate\": \"cubic-bezier(0.3, 0, 1, 1)\"\n\t\t}\n\t},\n\t\"focus\": {\n\t\t\"width\": \"2px\",\n\t\t\"offset\": \"2px\",\n\t\t\"color\": \"#f4f4f6\"\n\t},\n\t\"breakpoint\": {\n\t\t\"xs\": \"26.5625rem\",\n\t\t\"sm\": \"40rem\",\n\t\t\"md\": \"48rem\",\n\t\t\"lg\": \"64rem\",\n\t\t\"xl\": \"80rem\",\n\t\t\"2xl\": \"96rem\",\n\t\t\"3xl\": \"120rem\",\n\t\t\"4xl\": \"160rem\"\n\t},\n\t\"container\": {\n\t\t\"authCard\": \"24rem\",\n\t\t\"page\": \"80rem\"\n\t},\n\t\"layout\": {},\n\t\"gradient\": {\n\t\t\"purpleStart\": \"#401889\",\n\t\t\"redStart\": \"#f25543\",\n\t\t\"neutralStart\": \"#484a57\",\n\t\t\"baseEnd\": \"#0f0f11\",\n\t\t\"lavenderStart\": \"#bba5e4\",\n\t\t\"roseStart\": \"#ea8aa0\"\n\t},\n\t\"syntax\": {\n\t\t\"key\": \"#9066da\",\n\t\t\"string\": \"#f25543\",\n\t\t\"number\": \"#e25f7d\",\n\t\t\"boolean\": \"#bba5e4\",\n\t\t\"punctuation\": \"#82829c\",\n\t\t\"comment\": \"#7c7c95\"\n\t}\n};\nconst cssVars = {\n\t\"color\": {\n\t\t\"surface\": {\n\t\t\t\"defaultBlack\": \"var(--zl-color-surface-default-black)\",\n\t\t\t\"defaultWhite\": \"var(--zl-color-surface-default-white)\",\n\t\t\t\"defaultPrimaryGray\": \"var(--zl-color-surface-default-primary-gray)\",\n\t\t\t\"defaultSecondaryGray\": \"var(--zl-color-surface-default-secondary-gray)\",\n\t\t\t\"hoverStrong\": \"var(--zl-color-surface-hover-strong)\",\n\t\t\t\"hoverSubtle\": \"var(--zl-color-surface-hover-subtle)\"\n\t\t},\n\t\t\"text\": {\n\t\t\t\"primaryWhite\": \"var(--zl-color-text-primary-white)\",\n\t\t\t\"secondaryGray\": \"var(--zl-color-text-secondary-gray)\",\n\t\t\t\"buttonDefault\": \"var(--zl-color-text-button-default)\",\n\t\t\t\"buttonInvert\": \"var(--zl-color-text-button-invert)\",\n\t\t\t\"disabled\": \"var(--zl-color-text-disabled)\",\n\t\t\t\"error\": \"var(--zl-color-text-error)\",\n\t\t\t\"success\": \"var(--zl-color-text-success)\",\n\t\t\t\"subtitlePink\": \"var(--zl-color-text-subtitle-pink)\",\n\t\t\t\"subtitlePurple\": \"var(--zl-color-text-subtitle-purple)\",\n\t\t\t\"subtitleGray\": \"var(--zl-color-text-subtitle-gray)\",\n\t\t\t\"subtitleOrange\": \"var(--zl-color-text-subtitle-orange)\"\n\t\t},\n\t\t\"icon\": {\n\t\t\t\"defaultBlack\": \"var(--zl-color-icon-default-black)\",\n\t\t\t\"defaultWhite\": \"var(--zl-color-icon-default-white)\",\n\t\t\t\"defaultGray\": \"var(--zl-color-icon-default-gray)\",\n\t\t\t\"defaultPink\": \"var(--zl-color-icon-default-pink)\",\n\t\t\t\"defaultPurple\": \"var(--zl-color-icon-default-purple)\",\n\t\t\t\"defaultOrange\": \"var(--zl-color-icon-default-orange)\",\n\t\t\t\"disabled\": \"var(--zl-color-icon-disabled)\",\n\t\t\t\"error\": \"var(--zl-color-icon-error)\",\n\t\t\t\"success\": \"var(--zl-color-icon-success)\"\n\t\t},\n\t\t\"border\": {\n\t\t\t\"defaultBlack\": \"var(--zl-color-border-default-black)\",\n\t\t\t\"defaultWhite\": \"var(--zl-color-border-default-white)\",\n\t\t\t\"defaultGray100\": \"var(--zl-color-border-default-gray-100)\",\n\t\t\t\"defaultGray200\": \"var(--zl-color-border-default-gray-200)\",\n\t\t\t\"defaultGray300\": \"var(--zl-color-border-default-gray-300)\",\n\t\t\t\"defaultGray400\": \"var(--zl-color-border-default-gray-400)\",\n\t\t\t\"hover\": \"var(--zl-color-border-hover)\",\n\t\t\t\"error\": \"var(--zl-color-border-error)\",\n\t\t\t\"success\": \"var(--zl-color-border-success)\"\n\t\t},\n\t\t\"gray\": {\n\t\t\t\"50\": \"var(--zl-color-gray-50)\",\n\t\t\t\"75\": \"var(--zl-color-gray-75)\",\n\t\t\t\"100\": \"var(--zl-color-gray-100)\",\n\t\t\t\"200\": \"var(--zl-color-gray-200)\",\n\t\t\t\"300\": \"var(--zl-color-gray-300)\",\n\t\t\t\"400\": \"var(--zl-color-gray-400)\",\n\t\t\t\"500\": \"var(--zl-color-gray-500)\",\n\t\t\t\"600\": \"var(--zl-color-gray-600)\",\n\t\t\t\"700\": \"var(--zl-color-gray-700)\",\n\t\t\t\"800\": \"var(--zl-color-gray-800)\",\n\t\t\t\"900\": \"var(--zl-color-gray-900)\"\n\t\t}\n\t},\n\t\"theme\": {\n\t\t\"accent\": \"var(--zl-accent)\",\n\t\t\"accentForeground\": \"var(--zl-accent-foreground)\",\n\t\t\"background\": \"var(--zl-background)\",\n\t\t\"border\": \"var(--zl-border)\",\n\t\t\"card\": \"var(--zl-card)\",\n\t\t\"cardForeground\": \"var(--zl-card-foreground)\",\n\t\t\"destructive\": \"var(--zl-destructive)\",\n\t\t\"destructiveForeground\": \"var(--zl-destructive-foreground)\",\n\t\t\"foreground\": \"var(--zl-foreground)\",\n\t\t\"input\": \"var(--zl-input)\",\n\t\t\"muted\": \"var(--zl-muted)\",\n\t\t\"mutedForeground\": \"var(--zl-muted-foreground)\",\n\t\t\"popover\": \"var(--zl-popover)\",\n\t\t\"popoverForeground\": \"var(--zl-popover-foreground)\",\n\t\t\"primary\": \"var(--zl-primary)\",\n\t\t\"primaryForeground\": \"var(--zl-primary-foreground)\",\n\t\t\"ring\": \"var(--zl-ring)\",\n\t\t\"secondary\": \"var(--zl-secondary)\",\n\t\t\"secondaryForeground\": \"var(--zl-secondary-foreground)\",\n\t\t\"ringOffset\": \"var(--zl-ring-offset)\",\n\t\t\"chart1\": \"var(--zl-chart-1)\",\n\t\t\"chart2\": \"var(--zl-chart-2)\",\n\t\t\"chart3\": \"var(--zl-chart-3)\",\n\t\t\"chart4\": \"var(--zl-chart-4)\",\n\t\t\"chart5\": \"var(--zl-chart-5)\",\n\t\t\"sidebarPrimaryForeground\": \"var(--zl-sidebar-primary-foreground)\",\n\t\t\"sidebarPrimary\": \"var(--zl-sidebar-primary)\",\n\t\t\"sidebarForeground\": \"var(--zl-sidebar-foreground)\",\n\t\t\"sidebar\": \"var(--zl-sidebar)\",\n\t\t\"sidebarAccent\": \"var(--zl-sidebar-accent)\",\n\t\t\"sidebarAccentForeground\": \"var(--zl-sidebar-accent-foreground)\",\n\t\t\"sidebarBorder\": \"var(--zl-sidebar-border)\",\n\t\t\"sidebarRing\": \"var(--zl-sidebar-ring)\",\n\t\t\"success\": \"var(--zl-success)\"\n\t},\n\t\"spacing\": {\n\t\t\"10\": \"var(--zl-spacing-10)\",\n\t\t\"11\": \"var(--zl-spacing-11)\",\n\t\t\"12\": \"var(--zl-spacing-12)\",\n\t\t\"13\": \"var(--zl-spacing-13)\",\n\t\t\"14\": \"var(--zl-spacing-14)\",\n\t\t\"15\": \"var(--zl-spacing-15)\",\n\t\t\"16\": \"var(--zl-spacing-16)\",\n\t\t\"01\": \"var(--zl-spacing-01)\",\n\t\t\"02\": \"var(--zl-spacing-02)\",\n\t\t\"03\": \"var(--zl-spacing-03)\",\n\t\t\"04\": \"var(--zl-spacing-04)\",\n\t\t\"05\": \"var(--zl-spacing-05)\",\n\t\t\"06\": \"var(--zl-spacing-06)\",\n\t\t\"07\": \"var(--zl-spacing-07)\",\n\t\t\"08\": \"var(--zl-spacing-08)\",\n\t\t\"09\": \"var(--zl-spacing-09)\"\n\t},\n\t\"radius\": {\n\t\t\"xs\": \"var(--zl-radius-xs)\",\n\t\t\"s\": \"var(--zl-radius-s)\",\n\t\t\"m\": \"var(--zl-radius-m)\",\n\t\t\"l\": \"var(--zl-radius-l)\",\n\t\t\"xl\": \"var(--zl-radius-xl)\"\n\t},\n\t\"font\": { \"family\": {\n\t\t\"sans\": \"var(--zl-font-family-sans)\",\n\t\t\"heading\": \"var(--zl-font-family-heading)\",\n\t\t\"mono\": \"var(--zl-font-family-mono)\"\n\t} },\n\t\"motion\": {\n\t\t\"duration\": {\n\t\t\t\"instant\": \"var(--zl-duration-instant)\",\n\t\t\t\"fast\": \"var(--zl-duration-fast)\",\n\t\t\t\"base\": \"var(--zl-duration-base)\",\n\t\t\t\"slow\": \"var(--zl-duration-slow)\"\n\t\t},\n\t\t\"easing\": {\n\t\t\t\"standard\": \"var(--zl-easing-standard)\",\n\t\t\t\"decelerate\": \"var(--zl-easing-decelerate)\",\n\t\t\t\"accelerate\": \"var(--zl-easing-accelerate)\"\n\t\t}\n\t},\n\t\"focus\": {\n\t\t\"width\": \"var(--zl-focus-width)\",\n\t\t\"offset\": \"var(--zl-focus-offset)\",\n\t\t\"color\": \"var(--zl-focus-color)\"\n\t},\n\t\"breakpoint\": {\n\t\t\"xs\": \"var(--zl-breakpoint-xs)\",\n\t\t\"sm\": \"var(--zl-breakpoint-sm)\",\n\t\t\"md\": \"var(--zl-breakpoint-md)\",\n\t\t\"lg\": \"var(--zl-breakpoint-lg)\",\n\t\t\"xl\": \"var(--zl-breakpoint-xl)\",\n\t\t\"2xl\": \"var(--zl-breakpoint-2xl)\",\n\t\t\"3xl\": \"var(--zl-breakpoint-3xl)\",\n\t\t\"4xl\": \"var(--zl-breakpoint-4xl)\"\n\t},\n\t\"container\": {\n\t\t\"authCard\": \"var(--zl-container-auth-card)\",\n\t\t\"page\": \"var(--zl-container-page)\"\n\t},\n\t\"layout\": {},\n\t\"gradient\": {\n\t\t\"purpleStart\": \"var(--zl-gradient-purple-start)\",\n\t\t\"redStart\": \"var(--zl-gradient-red-start)\",\n\t\t\"neutralStart\": \"var(--zl-gradient-neutral-start)\",\n\t\t\"baseEnd\": \"var(--zl-gradient-base-end)\",\n\t\t\"lavenderStart\": \"var(--zl-gradient-lavender-start)\",\n\t\t\"roseStart\": \"var(--zl-gradient-rose-start)\"\n\t},\n\t\"syntax\": {\n\t\t\"key\": \"var(--zl-syntax-key)\",\n\t\t\"string\": \"var(--zl-syntax-string)\",\n\t\t\"number\": \"var(--zl-syntax-number)\",\n\t\t\"boolean\": \"var(--zl-syntax-boolean)\",\n\t\t\"punctuation\": \"var(--zl-syntax-punctuation)\",\n\t\t\"comment\": \"var(--zl-syntax-comment)\"\n\t}\n};\nconst tokensCss = \"/* AUTOGENERATED by packages/design-tokens/scripts/build.ts — do not edit by hand.\\n Source: src/legacy.tokens.json + src/generated/figma.tokens.json + src/overrides.ts.\\n Re-run: moon run design-tokens:generate */\\n\\n:root,\\n[data-theme=\\\"dark\\\"] {\\n --zl-color-surface-default-black: #0f0f11;\\n --zl-color-surface-default-white: #f4f4f6;\\n --zl-color-surface-default-primary-gray: #252528;\\n --zl-color-surface-default-secondary-gray: #37373a;\\n --zl-color-surface-hover-strong: #cfcfde;\\n --zl-color-surface-hover-subtle: #484a57;\\n --zl-color-text-primary-white: #f4f4f6;\\n --zl-color-text-secondary-gray: #bfbfcf;\\n --zl-color-text-button-default: #0f0f11;\\n --zl-color-text-button-invert: #f4f4f6;\\n --zl-color-text-disabled: #686883;\\n --zl-color-text-error: #ea4f70;\\n --zl-color-text-success: #33a779;\\n --zl-color-text-subtitle-pink: #f48aa0;\\n --zl-color-text-subtitle-purple: #bba5e4;\\n --zl-color-text-subtitle-gray: #bfbfcf;\\n --zl-color-text-subtitle-orange: #f25543;\\n --zl-color-icon-default-black: #0f0f11;\\n --zl-color-icon-default-white: #f4f4f6;\\n --zl-color-icon-default-gray: #bfbfcf;\\n --zl-color-icon-default-pink: #f48aa0;\\n --zl-color-icon-default-purple: #bba5e4;\\n --zl-color-icon-default-orange: #f25543;\\n --zl-color-icon-disabled: #686883;\\n --zl-color-icon-error: #ea4f70;\\n --zl-color-icon-success: #33a779;\\n --zl-color-border-default-black: #252528;\\n --zl-color-border-default-white: #f4f4f6;\\n --zl-color-border-default-gray-100: #37373a;\\n --zl-color-border-default-gray-200: #484a57;\\n --zl-color-border-default-gray-300: #686883;\\n --zl-color-border-default-gray-400: #82829c;\\n --zl-color-border-hover: #9e9eb2;\\n --zl-color-border-error: #ea4f70;\\n --zl-color-border-success: #33a779;\\n --zl-accent: #404040;\\n --zl-accent-foreground: #fafafa;\\n --zl-background: #050505;\\n --zl-border: #252525;\\n --zl-card: #121212;\\n --zl-card-foreground: #fafafa;\\n --zl-destructive: #f87171;\\n --zl-destructive-foreground: #fef2f2;\\n --zl-foreground: #fafafa;\\n --zl-input: #ffffff26;\\n --zl-muted: #262626;\\n --zl-muted-foreground: #a3a3a3;\\n --zl-popover: #262626;\\n --zl-popover-foreground: #fafafa;\\n --zl-primary: #e5e5e5;\\n --zl-primary-foreground: #171717;\\n --zl-ring: #737373;\\n --zl-secondary: #262626;\\n --zl-secondary-foreground: #fafafa;\\n --zl-ring-offset: #050505;\\n --zl-chart-1: #3b82f6;\\n --zl-chart-2: #34d399;\\n --zl-chart-3: #fbbf24;\\n --zl-chart-4: #a78bfa;\\n --zl-chart-5: #fb7185;\\n --zl-sidebar-primary-foreground: #fafafa;\\n --zl-sidebar-primary: #1d4ed8;\\n --zl-sidebar-foreground: #fafafa;\\n --zl-sidebar: #171717;\\n --zl-sidebar-accent: #262626;\\n --zl-sidebar-accent-foreground: #fafafa;\\n --zl-sidebar-border: #ffffff1a;\\n --zl-sidebar-ring: #525252;\\n --zl-success: #22c55e;\\n --zl-color-gray-50: #0f0f11;\\n --zl-color-gray-75: #252528;\\n --zl-color-gray-100: #37373a;\\n --zl-color-gray-200: #484a57;\\n --zl-color-gray-300: #686883;\\n --zl-color-gray-400: #82829c;\\n --zl-color-gray-500: #9e9eb2;\\n --zl-color-gray-600: #cfcfde;\\n --zl-color-gray-700: #bfbfcf;\\n --zl-color-gray-800: #e1e1e7;\\n --zl-color-gray-900: #f4f4f6;\\n --zl-spacing-01: 0.25rem;\\n --zl-spacing-02: 0.5rem;\\n --zl-spacing-03: 1rem;\\n --zl-spacing-04: 1.5rem;\\n --zl-spacing-05: 2rem;\\n --zl-spacing-06: 1.5rem;\\n --zl-spacing-07: 2.5rem;\\n --zl-spacing-08: 3rem;\\n --zl-spacing-09: 3.5rem;\\n --zl-spacing-10: 4rem;\\n --zl-spacing-11: 5rem;\\n --zl-spacing-12: 5.5rem;\\n --zl-spacing-13: 6rem;\\n --zl-spacing-14: 6.5rem;\\n --zl-spacing-15: 7rem;\\n --zl-spacing-16: 7.5rem;\\n --zl-radius-xs: 0.25rem;\\n --zl-radius-s: 0.5rem;\\n --zl-radius-m: 0.75rem;\\n --zl-radius-l: 1rem;\\n --zl-radius-xl: 1.5rem;\\n --zl-font-family-sans: \\\"Arimo\\\", system-ui, -apple-system, \\\"Segoe UI\\\", Helvetica, Arial, sans-serif;\\n --zl-font-family-heading: \\\"Arimo\\\", system-ui, -apple-system, \\\"Segoe UI\\\", Helvetica, Arial, sans-serif;\\n --zl-font-family-mono: ui-monospace, SFMono-Regular, \\\"SF Mono\\\", Menlo, Monaco, Consolas, \\\"Liberation Mono\\\", \\\"Courier New\\\", monospace;\\n --zl-duration-instant: 0ms;\\n --zl-duration-fast: 120ms;\\n --zl-duration-base: 200ms;\\n --zl-duration-slow: 320ms;\\n --zl-easing-standard: cubic-bezier(0.2, 0, 0, 1);\\n --zl-easing-decelerate: cubic-bezier(0, 0, 0, 1);\\n --zl-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);\\n --zl-focus-width: 2px;\\n --zl-focus-offset: 2px;\\n --zl-focus-color: #f4f4f6;\\n --zl-breakpoint-xs: 26.5625rem;\\n --zl-breakpoint-sm: 40rem;\\n --zl-breakpoint-md: 48rem;\\n --zl-breakpoint-lg: 64rem;\\n --zl-breakpoint-xl: 80rem;\\n --zl-breakpoint-2xl: 96rem;\\n --zl-breakpoint-3xl: 120rem;\\n --zl-breakpoint-4xl: 160rem;\\n --zl-container-auth-card: 24rem;\\n --zl-container-page: 80rem;\\n --zl-gradient-purple-start: #401889;\\n --zl-gradient-red-start: #f25543;\\n --zl-gradient-neutral-start: #484a57;\\n --zl-gradient-base-end: #0f0f11;\\n --zl-gradient-lavender-start: #bba5e4;\\n --zl-gradient-rose-start: #ea8aa0;\\n --zl-syntax-key: #9066da;\\n --zl-syntax-string: #f25543;\\n --zl-syntax-number: #e25f7d;\\n --zl-syntax-boolean: #bba5e4;\\n --zl-syntax-punctuation: #82829c;\\n --zl-syntax-comment: #7c7c95;\\n}\\n\\n[data-theme=\\\"light\\\"] {\\n --zl-color-surface-default-black: #f4f4f6;\\n --zl-color-surface-default-white: #0f0f11;\\n --zl-color-surface-default-primary-gray: #ffffff;\\n --zl-color-surface-default-secondary-gray: #e1e1e7;\\n --zl-color-surface-hover-strong: #37373a;\\n --zl-color-surface-hover-subtle: #cfcfde;\\n --zl-color-text-primary-white: #0f0f11;\\n --zl-color-text-secondary-gray: #686883;\\n --zl-color-text-button-default: #f4f4f6;\\n --zl-color-text-button-invert: #0f0f11;\\n --zl-color-text-disabled: #9e9eb2;\\n --zl-color-text-error: #c52247;\\n --zl-color-text-success: #217a55;\\n --zl-color-text-subtitle-pink: #c52247;\\n --zl-color-text-subtitle-purple: #6f53b3;\\n --zl-color-text-subtitle-gray: #686883;\\n --zl-color-text-subtitle-orange: #c0341f;\\n --zl-color-icon-default-black: #f4f4f6;\\n --zl-color-icon-default-white: #0f0f11;\\n --zl-color-icon-default-gray: #686883;\\n --zl-color-icon-default-pink: #c52247;\\n --zl-color-icon-default-purple: #6f53b3;\\n --zl-color-icon-default-orange: #c0341f;\\n --zl-color-icon-disabled: #9e9eb2;\\n --zl-color-icon-error: #c52247;\\n --zl-color-icon-success: #217a55;\\n --zl-color-border-default-black: #e1e1e7;\\n --zl-color-border-default-white: #0f0f11;\\n --zl-color-border-default-gray-100: #e1e1e7;\\n --zl-color-border-default-gray-200: #cfcfde;\\n --zl-color-border-default-gray-300: #9e9eb2;\\n --zl-color-border-hover: #686883;\\n --zl-color-border-error: #c52247;\\n --zl-color-border-success: #217a55;\\n --zl-accent: #f5f5f5;\\n --zl-accent-foreground: #171717;\\n --zl-background: #fafafa;\\n --zl-border: #e5e5e5;\\n --zl-card: #ffffff;\\n --zl-card-foreground: #0a0a0a;\\n --zl-destructive: #dc2626;\\n --zl-foreground: #0a0a0a;\\n --zl-input: #e5e5e5;\\n --zl-muted: #f5f5f5;\\n --zl-muted-foreground: #737373;\\n --zl-popover: #ffffff;\\n --zl-popover-foreground: #0a0a0a;\\n --zl-primary: #171717;\\n --zl-primary-foreground: #fafafa;\\n --zl-ring: #a3a3a3;\\n --zl-secondary: #f5f5f5;\\n --zl-secondary-foreground: #171717;\\n --zl-ring-offset: #fafafa;\\n --zl-chart-1: #ea580c;\\n --zl-chart-2: #0d9488;\\n --zl-chart-3: #164e63;\\n --zl-chart-4: #fbbf24;\\n --zl-chart-5: #f59e0b;\\n --zl-sidebar-primary: #171717;\\n --zl-sidebar-foreground: #0a0a0a;\\n --zl-sidebar: #fafafa;\\n --zl-sidebar-accent: #f5f5f5;\\n --zl-sidebar-accent-foreground: #171717;\\n --zl-sidebar-border: #e5e5e5;\\n --zl-sidebar-ring: #a3a3a3;\\n --zl-focus-color: #0f0f11;\\n --zl-gradient-neutral-start: #bfbfcf;\\n --zl-gradient-base-end: #fafafa;\\n --zl-syntax-key: #401889;\\n --zl-syntax-string: #bd2514;\\n --zl-syntax-number: #c52247;\\n --zl-syntax-boolean: #5a23bd;\\n --zl-syntax-punctuation: #686883;\\n --zl-syntax-comment: #71718b;\\n}\\n\";\n//#endregion\nexport { cssVars, tokens, tokensCss };\n\n//# sourceMappingURL=tokens.mjs.map"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zitadel/components",
3
- "version": "0.1.0-alpha.17",
3
+ "version": "0.1.0-alpha.18",
4
4
  "description": "Lit-based atomic web components and the <zitadel-login> orchestrator for the Zitadel auth UI.",
5
5
  "homepage": "https://github.com/zitadel/nextgen/tree/main/packages/components#readme",
6
6
  "bugs": {
@@ -47,21 +47,26 @@
47
47
  "./orchestrator": {
48
48
  "types": "./dist/orchestrator/index.d.mts",
49
49
  "import": "./dist/orchestrator/index.mjs"
50
+ },
51
+ "./jsx": {
52
+ "types": "./dist/jsx.d.ts"
50
53
  }
51
54
  },
52
55
  "publishConfig": {
53
56
  "access": "public"
54
57
  },
55
58
  "dependencies": {
56
- "dompurify": "^3.2.6",
57
- "liquidjs": "^10.26.0",
59
+ "dompurify": "^3.4.12",
60
+ "liquidjs": "^10.27.2",
58
61
  "lit": "^3.3.2",
59
- "lucide": "^1.16.0"
62
+ "lucide": "^1.16.0",
63
+ "@zitadel/config": "0.1.0-alpha.18"
60
64
  },
61
65
  "devDependencies": {
62
66
  "@tsdown/css": "^0.21.10",
63
- "@vitest/browser": "^4.1.7",
64
- "@vitest/browser-playwright": "^4.1.7",
67
+ "@types/react": "^19.2.14",
68
+ "@vitest/browser": "^4.1.9",
69
+ "@vitest/browser-playwright": "^4.1.9",
65
70
  "jsdom": "^29.0.2",
66
71
  "msw": "^2.14.6",
67
72
  "playwright": "^1.60.0",
@@ -70,10 +75,9 @@
70
75
  "tsdown": "^0.21.10",
71
76
  "tslib": "^2.8.1",
72
77
  "@zitadel/api-mock": "0.0.0",
73
- "@zitadel/config": "0.1.0-alpha.17",
74
- "@zitadel/api": "0.1.0-alpha.17",
75
- "@zitadel/design-tokens": "0.1.0-alpha.0",
76
- "@zitadel/shared-component-styles": "0.0.0"
78
+ "@zitadel/api": "0.1.0-alpha.18",
79
+ "@zitadel/shared-component-styles": "0.0.1-alpha.0",
80
+ "@zitadel/design-tokens": "0.1.0-alpha.1"
77
81
  },
78
82
  "scripts": {
79
83
  "build": "tsdown",