@ory/elements-react 1.0.0-rc.6 → 1.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 (29) hide show
  1. package/DEVELOPMENT.md +22 -19
  2. package/dist/client/config.js +1 -1
  3. package/dist/client/config.js.map +1 -1
  4. package/dist/client/config.mjs +1 -1
  5. package/dist/client/config.mjs.map +1 -1
  6. package/dist/index.d.mts +0 -1
  7. package/dist/index.d.ts +0 -1
  8. package/dist/index.js +14 -13
  9. package/dist/index.js.map +1 -1
  10. package/dist/index.mjs +14 -13
  11. package/dist/index.mjs.map +1 -1
  12. package/dist/theme/default/index.css +1445 -1283
  13. package/dist/theme/default/index.css.map +1 -1
  14. package/dist/theme/default/index.d.mts +4 -4
  15. package/dist/theme/default/index.d.ts +4 -4
  16. package/dist/theme/default/index.js +164 -181
  17. package/dist/theme/default/index.js.map +1 -1
  18. package/dist/theme/default/index.mjs +165 -182
  19. package/dist/theme/default/index.mjs.map +1 -1
  20. package/package.json +3 -2
  21. package/tailwind/generated/variables-processed.json +6 -6
  22. package/tailwind/generated/variables.css +495 -0
  23. package/dist/theme/default/tailwind/defaults.d.mts +0 -737
  24. package/dist/theme/default/tailwind/defaults.d.ts +0 -737
  25. package/dist/theme/default/tailwind/defaults.js +0 -219
  26. package/dist/theme/default/tailwind/defaults.js.map +0 -1
  27. package/dist/theme/default/tailwind/defaults.mjs +0 -196
  28. package/dist/theme/default/tailwind/defaults.mjs.map +0 -1
  29. package/tailwind/defaults.ts +0 -34
package/dist/theme/default/index.css CHANGED
@@ -1,1727 +1,1889 @@
1
- /* tailwind/generated/default-variables.css */
2
- :root {
3
- --ui-100: #f1f5f9;
4
- --ui-200: #e2e8f0;
5
- --ui-300: #cbd5e1;
6
- --ui-400: #94a3b8;
7
- --ui-50: #f8fafc;
8
- --ui-500: #64748b;
9
- --ui-600: #475569;
10
- --ui-700: #334155;
11
- --ui-800: #1e293b;
12
- --ui-900: #0f172a;
13
- --ui-950: #020617;
14
- --ui-black: #000000;
15
- --ui-danger: #dc2626;
16
- --ui-success: #22c55e;
17
- --ui-transparent: #ffffff00;
18
- --ui-warning: #eab308;
19
- --ui-white: #ffffff;
20
- --button-identifier-background-default: var( --interface-background-brand-secondary );
21
- --button-identifier-background-hover: var( --interface-background-brand-secondary-hover );
22
- --button-identifier-border-border-default: var( --interface-border-brand-brand );
23
- --button-identifier-border-border-hover: var(--interface-border-brand-brand);
24
- --button-identifier-foreground-default: var( --interface-foreground-brand-on-secondary );
25
- --button-identifier-foreground-hover: var( --interface-foreground-brand-on-secondary );
26
- --button-link-brand-brand: var(--interface-foreground-brand-primary);
27
- --button-link-brand-brand-hover: var(--interface-foreground-default-primary);
28
- --button-link-default-primary: var(--interface-foreground-default-primary);
29
- --button-link-default-primary-hover: var( --interface-foreground-brand-primary );
30
- --button-link-default-secondary: var( --interface-foreground-default-secondary );
31
- --button-link-default-secondary-hover: var( --interface-foreground-default-tertiary );
32
- --button-link-disabled-disabled: var( --interface-foreground-disabled-disabled );
33
- --button-primary-background-default: var( --interface-background-brand-primary );
34
- --button-primary-background-disabled: var( --interface-background-disabled-disabled );
35
- --button-primary-background-hover: var( --interface-background-brand-primary-hover );
36
- --button-primary-border-default: var(--interface-border-default-none);
37
- --button-primary-border-disabled: var(--interface-border-disabled-disabled);
38
- --button-primary-border-hover: var(--interface-border-default-none);
39
- --button-primary-foreground-default: var( --interface-foreground-brand-on-primary );
40
- --button-primary-foreground-disabled: var( --interface-foreground-disabled-on-disabled );
41
- --button-primary-foreground-hover: var( --interface-foreground-brand-on-primary );
42
- --button-secondary-background-default: var( --interface-background-default-primary );
43
- --button-secondary-background-disabled: var( --interface-background-disabled-disabled );
44
- --button-secondary-background-hover: var( --interface-background-default-primary-hover );
45
- --button-secondary-border-default: var(--interface-border-default-primary);
46
- --button-secondary-border-disabled: var(--interface-border-disabled-disabled);
47
- --button-secondary-border-hover: var(--interface-border-default-primary);
48
- --button-secondary-foreground-default: var( --interface-foreground-default-primary );
49
- --button-secondary-foreground-disabled: var( --interface-foreground-disabled-on-disabled );
50
- --button-secondary-foreground-hover: var( --interface-foreground-default-secondary );
51
- --button-social-background-default: var( --interface-background-default-primary );
52
- --button-social-background-disabled: var( --interface-background-disabled-disabled );
53
- --button-social-background-generic-provider: var( --interface-background-default-inverted );
54
- --button-social-background-hover: var( --interface-background-default-primary-hover );
55
- --button-social-border-default: var(--interface-border-default-primary);
56
- --button-social-border-disabled: var(--interface-border-disabled-disabled);
57
- --button-social-border-generic-provider: var(--interface-border-default-none);
58
- --button-social-border-hover: var(--interface-border-default-primary);
59
- --button-social-foreground-default: var( --interface-foreground-default-primary );
60
- --button-social-foreground-disabled: var( --interface-foreground-disabled-on-disabled );
61
- --button-social-foreground-generic-provider: var( --interface-foreground-default-inverted );
62
- --button-social-foreground-hover: var( --interface-foreground-default-secondary );
63
- --checkbox-background-checked: var(--interface-background-brand-primary);
64
- --checkbox-background-default: var(--interface-background-default-secondary);
65
- --checkbox-border-checkbox-border-checked: var( --interface-border-brand-brand );
66
- --checkbox-border-checkbox-border-default: var( --interface-border-default-primary );
67
- --checkbox-foreground-checked: var(--interface-foreground-brand-on-primary);
68
- --checkbox-foreground-default: var(--interface-foreground-default-primary);
69
- --form-background-default: var(--interface-background-default-primary);
70
- --form-border-default: var(--interface-border-default-primary);
71
- --input-background-default: var(--interface-background-default-primary);
72
- --input-background-disabled: var(--interface-background-disabled-disabled);
73
- --input-background-hover: var(--interface-background-default-primary-hover);
74
- --input-border-default: var(--interface-border-default-primary);
75
- --input-border-disabled: var(--interface-border-disabled-disabled);
76
- --input-border-focus: var(--interface-border-brand-brand);
77
- --input-border-hover: var(--interface-border-default-primary);
78
- --input-foreground-disabled: var(--interface-foreground-disabled-on-disabled);
79
- --input-foreground-primary: var(--interface-foreground-default-primary);
80
- --input-foreground-secondary: var(--interface-foreground-default-secondary);
81
- --input-foreground-tertiary: var(--interface-foreground-default-tertiary);
82
- --interface-background-brand-primary: var(--brand-500);
83
- --interface-background-brand-primary-hover: var(--brand-400);
84
- --interface-background-brand-secondary: var(--brand-50);
85
- --interface-background-brand-secondary-hover: var(--brand-100);
86
- --interface-background-default-inverted: var(--ui-900);
87
- --interface-background-default-inverted-hover: var(--ui-800);
88
- --interface-background-default-none: var(--ui-transparent);
89
- --interface-background-default-primary: var(--ui-white);
90
- --interface-background-default-primary-hover: var(--ui-50);
91
- --interface-background-default-secondary: var(--ui-50);
92
- --interface-background-default-secondary-hover: var(--ui-200);
93
- --interface-background-default-tertiary: var(--ui-200);
94
- --interface-background-default-tertiary-hover: var(--ui-300);
95
- --interface-background-disabled-disabled: var(--ui-200);
96
- --interface-background-validation-danger: var(--ui-danger);
97
- --interface-background-validation-success: var(--ui-success);
98
- --interface-background-validation-warning: var(--ui-warning);
99
- --interface-border-brand-brand: var(--brand-500);
100
- --interface-border-default-inverted: var(--ui-700);
101
- --interface-border-default-none: var(--ui-transparent);
102
- --interface-border-default-primary: var(--ui-300);
103
- --interface-border-disabled-disabled: var(--ui-300);
104
- --interface-border-validation-danger: var(--ui-danger);
105
- --interface-border-validation-success: var(--ui-success);
106
- --interface-border-validation-warning: var(--ui-warning);
107
- --interface-foreground-brand-on-primary: var(--brand-50);
108
- --interface-foreground-brand-on-secondary: var(--brand-950);
109
- --interface-foreground-brand-primary: var(--brand-500);
110
- --interface-foreground-brand-secondary: var(--brand-50);
111
- --interface-foreground-default-inverted: var(--ui-white);
112
- --interface-foreground-default-primary: var(--ui-900);
113
- --interface-foreground-default-secondary: var(--ui-700);
114
- --interface-foreground-default-tertiary: var(--ui-500);
115
- --interface-foreground-disabled-disabled: var(--ui-300);
116
- --interface-foreground-disabled-on-disabled: var(--ui-400);
117
- --interface-foreground-validation-danger: var(--ui-danger);
118
- --interface-foreground-validation-success: var(--ui-success);
119
- --interface-foreground-validation-warning: var(--ui-warning);
120
- --ory-background-default: var(--interface-background-default-primary);
121
- --ory-border-default: var(--interface-border-default-primary);
122
- --ory-foreground-default: var(--interface-foreground-default-primary);
123
- --radio-background-checked: var(--interface-background-brand-primary);
124
- --radio-background-default: var(--interface-background-default-secondary);
125
- --radio-border-checked: var(--interface-border-brand-brand);
126
- --radio-border-default: var(--interface-border-default-primary);
127
- --radio-foreground-checked: var(--interface-foreground-brand-on-primary);
128
- --radio-foreground-default: var(--interface-foreground-default-primary);
129
- --toggle-background-checked: var(--interface-background-brand-primary);
130
- --toggle-background-default: var(--interface-background-default-secondary);
131
- --toggle-border-checked: var(--interface-border-default-none);
132
- --toggle-border-default: var(--interface-border-default-primary);
133
- --toggle-foreground-checked: var(--interface-foreground-brand-on-primary);
134
- --toggle-foreground-default: var(--interface-foreground-brand-primary);
135
- --brand-100: var(--ui-100);
136
- --brand-200: var(--ui-300);
137
- --brand-300: var(--ui-500);
138
- --brand-400: var(--ui-700);
139
- --brand-50: var(--ui-50);
140
- --brand-500: var(--ui-900);
141
- --brand-600: var(--ui-white);
142
- --brand-700: var(--ui-200);
143
- --brand-800: var(--ui-400);
144
- --brand-900: var(--ui-600);
145
- --brand-950: var(--ui-800);
146
- --border-radius-buttons: 0.25rem;
147
- --border-radius-forms: 0.25rem;
148
- --border-radius-general: 0.25rem;
149
- --border-radius-branding: 0.5rem;
150
- --border-radius-cards: 0.75rem;
151
- --border-radius-identifier: 62.4375rem;
152
- }
153
- [data-theme=dark] {
154
- --button-identifier-background-default: var( --interface-background-brand-secondary );
155
- --button-identifier-background-hover: var( --interface-background-brand-secondary-hover );
156
- --button-identifier-border-border-default: var( --interface-border-brand-brand );
157
- --button-identifier-border-border-hover: var(--interface-border-brand-brand);
158
- --button-identifier-foreground-default: var( --interface-foreground-brand-on-secondary );
159
- --button-identifier-foreground-hover: var( --interface-foreground-brand-on-secondary );
160
- --button-link-brand-brand: var(--interface-foreground-brand-primary);
161
- --button-link-brand-brand-hover: var(--interface-foreground-default-primary);
162
- --button-link-default-primary: var(--interface-foreground-default-primary);
163
- --button-link-default-primary-hover: var( --interface-foreground-brand-primary );
164
- --button-link-default-secondary: var( --interface-foreground-default-secondary );
165
- --button-link-default-secondary-hover: var( --interface-foreground-default-tertiary );
166
- --button-link-disabled-disabled: var( --interface-foreground-disabled-disabled );
167
- --button-primary-background-default: var( --interface-background-brand-primary );
168
- --button-primary-background-disabled: var( --interface-foreground-disabled-disabled );
169
- --button-primary-background-hover: var( --interface-background-brand-primary-hover );
170
- --button-primary-border-default: var(--interface-border-default-none);
171
- --button-primary-border-disabled: var(--interface-border-disabled-disabled);
172
- --button-primary-border-hover: var(--interface-border-default-none);
173
- --button-primary-foreground-default: var( --interface-foreground-brand-on-primary );
174
- --button-primary-foreground-disabled: var( --interface-foreground-disabled-on-disabled );
175
- --button-primary-foreground-hover: var( --interface-foreground-brand-on-primary );
176
- --button-secondary-background-default: var( --interface-background-default-primary );
177
- --button-secondary-background-disabled: var( --interface-background-disabled-disabled );
178
- --button-secondary-background-hover: var( --interface-background-default-primary-hover );
179
- --button-secondary-border-default: var(--interface-border-default-primary);
180
- --button-secondary-border-disabled: var(--interface-border-disabled-disabled);
181
- --button-secondary-border-hover: var(--interface-border-default-primary);
182
- --button-secondary-foreground-default: var( --interface-foreground-default-primary );
183
- --button-secondary-foreground-disabled: var( --interface-foreground-disabled-on-disabled );
184
- --button-secondary-foreground-hover: var( --interface-foreground-default-secondary );
185
- --button-social-background-default: var( --interface-background-default-primary );
186
- --button-social-background-disabled: var( --interface-background-disabled-disabled );
187
- --button-social-background-generic-provider: var( --interface-background-default-inverted );
188
- --button-social-background-hover: var( --interface-background-default-primary-hover );
189
- --button-social-border-default: var(--interface-border-default-primary);
190
- --button-social-border-disabled: var(--interface-border-disabled-disabled);
191
- --button-social-border-generic-provider: var(--interface-border-default-none);
192
- --button-social-border-hover: var(--interface-border-default-primary);
193
- --button-social-foreground-default: var( --interface-foreground-default-primary );
194
- --button-social-foreground-disabled: var( --interface-foreground-disabled-on-disabled );
195
- --button-social-foreground-generic-provider: var( --interface-foreground-default-inverted );
196
- --button-social-foreground-hover: var( --interface-foreground-default-secondary );
197
- --checkbox-background-checked: var(--interface-background-brand-primary);
198
- --checkbox-background-default: var(--interface-background-default-secondary);
199
- --checkbox-border-checkbox-border-checked: var( --interface-border-brand-brand );
200
- --checkbox-border-checkbox-border-default: var( --interface-border-default-primary );
201
- --checkbox-foreground-checked: var(--interface-foreground-brand-on-primary);
202
- --checkbox-foreground-default: var(--interface-foreground-default-primary);
203
- --form-background-default: var(--interface-background-default-primary);
204
- --form-border-default: var(--interface-border-default-primary);
205
- --input-background-default: var(--interface-background-default-primary);
206
- --input-background-disabled: var(--interface-background-disabled-disabled);
207
- --input-background-hover: var(--interface-background-default-primary-hover);
208
- --input-border-default: var(--interface-border-default-primary);
209
- --input-border-disabled: var(--interface-border-disabled-disabled);
210
- --input-border-focus: var(--interface-border-brand-brand);
211
- --input-border-hover: var(--interface-border-default-primary);
212
- --input-foreground-disabled: var(--interface-foreground-disabled-on-disabled);
213
- --input-foreground-primary: var(--interface-foreground-default-primary);
214
- --input-foreground-secondary: var(--interface-foreground-default-secondary);
215
- --input-foreground-tertiary: var(--interface-foreground-default-tertiary);
216
- --interface-background-brand-primary: var(--brand-600);
217
- --interface-background-brand-primary-hover: var(--brand-700);
218
- --interface-background-brand-secondary: var(--brand-950);
219
- --interface-background-brand-secondary-hover: var(--brand-900);
220
- --interface-background-default-inverted: var(--ui-white);
221
- --interface-background-default-inverted-hover: var(--ui-50);
222
- --interface-background-default-none: var(--ui-transparent);
223
- --interface-background-default-primary: var(--ui-900);
224
- --interface-background-default-primary-hover: var(--ui-950);
225
- --interface-background-default-secondary: var(--ui-950);
226
- --interface-background-default-secondary-hover: var(--ui-800);
227
- --interface-background-default-tertiary: var(--ui-800);
228
- --interface-background-default-tertiary-hover: var(--ui-700);
229
- --interface-background-disabled-disabled: var(--ui-700);
230
- --interface-background-validation-danger: var(--ui-danger);
231
- --interface-background-validation-success: var(--ui-success);
232
- --interface-background-validation-warning: var(--ui-warning);
233
- --interface-border-brand-brand: var(--brand-600);
234
- --interface-border-default-inverted: var(--ui-300);
235
- --interface-border-default-none: var(--ui-transparent);
236
- --interface-border-default-primary: var(--ui-700);
237
- --interface-border-disabled-disabled: var(--ui-700);
238
- --interface-border-validation-danger: var(--ui-danger);
239
- --interface-border-validation-success: var(--ui-success);
240
- --interface-border-validation-warning: var(--ui-warning);
241
- --interface-foreground-brand-on-primary: var(--brand-950);
242
- --interface-foreground-brand-on-secondary: var(--brand-50);
243
- --interface-foreground-brand-primary: var(--brand-600);
244
- --interface-foreground-brand-secondary: var(--brand-950);
245
- --interface-foreground-default-inverted: var(--ui-900);
246
- --interface-foreground-default-primary: var(--ui-white);
247
- --interface-foreground-default-secondary: var(--ui-200);
248
- --interface-foreground-default-tertiary: var(--ui-400);
249
- --interface-foreground-disabled-disabled: var(--ui-700);
250
- --interface-foreground-disabled-on-disabled: var(--ui-500);
251
- --interface-foreground-validation-danger: var(--ui-danger);
252
- --interface-foreground-validation-success: var(--ui-success);
253
- --interface-foreground-validation-warning: var(--ui-warning);
254
- --ory-background-default: var(--interface-background-default-primary);
255
- --ory-border-default: var(--interface-border-default-primary);
256
- --ory-foreground-default: var(--interface-foreground-default-primary);
257
- --radio-background-checked: var(--interface-background-brand-primary);
258
- --radio-background-default: var(--interface-background-default-secondary);
259
- --radio-border-checked: var(--interface-border-brand-brand);
260
- --radio-border-default: var(--interface-border-default-primary);
261
- --radio-foreground-checked: var(--interface-foreground-brand-on-primary);
262
- --radio-foreground-default: var(--interface-foreground-default-primary);
263
- --toggle-background-checked: var(--interface-background-brand-primary);
264
- --toggle-background-default: var(--interface-background-default-secondary);
265
- --toggle-border-checked: var(--interface-border-default-none);
266
- --toggle-border-default: var(--interface-border-default-primary);
267
- --toggle-foreground-checked: var(--interface-foreground-brand-on-primary);
268
- --toggle-foreground-default: var(--interface-foreground-brand-primary);
269
- }
270
-
271
1
  /* src/theme/default/global.css */
272
- *,
273
- ::before,
274
- ::after {
275
- --tw-border-spacing-x: 0;
276
- --tw-border-spacing-y: 0;
277
- --tw-translate-x: 0;
278
- --tw-translate-y: 0;
279
- --tw-rotate: 0;
280
- --tw-skew-x: 0;
281
- --tw-skew-y: 0;
282
- --tw-scale-x: 1;
283
- --tw-scale-y: 1;
284
- --tw-pan-x: ;
285
- --tw-pan-y: ;
286
- --tw-pinch-zoom: ;
287
- --tw-scroll-snap-strictness: proximity;
288
- --tw-gradient-from-position: ;
289
- --tw-gradient-via-position: ;
290
- --tw-gradient-to-position: ;
291
- --tw-ordinal: ;
292
- --tw-slashed-zero: ;
293
- --tw-numeric-figure: ;
294
- --tw-numeric-spacing: ;
295
- --tw-numeric-fraction: ;
296
- --tw-ring-inset: ;
297
- --tw-ring-offset-width: 0px;
298
- --tw-ring-offset-color: #fff;
299
- --tw-ring-color: rgb(147 197 253 / 0.5);
300
- --tw-ring-offset-shadow: 0 0 #0000;
301
- --tw-ring-shadow: 0 0 #0000;
302
- --tw-shadow: 0 0 #0000;
303
- --tw-shadow-colored: 0 0 #0000;
304
- --tw-blur: ;
305
- --tw-brightness: ;
306
- --tw-contrast: ;
307
- --tw-grayscale: ;
308
- --tw-hue-rotate: ;
309
- --tw-invert: ;
310
- --tw-saturate: ;
311
- --tw-sepia: ;
312
- --tw-drop-shadow: ;
313
- --tw-backdrop-blur: ;
314
- --tw-backdrop-brightness: ;
315
- --tw-backdrop-contrast: ;
316
- --tw-backdrop-grayscale: ;
317
- --tw-backdrop-hue-rotate: ;
318
- --tw-backdrop-invert: ;
319
- --tw-backdrop-opacity: ;
320
- --tw-backdrop-saturate: ;
321
- --tw-backdrop-sepia: ;
322
- --tw-contain-size: ;
323
- --tw-contain-layout: ;
324
- --tw-contain-paint: ;
325
- --tw-contain-style: ;
326
- }
327
- ::backdrop {
328
- --tw-border-spacing-x: 0;
329
- --tw-border-spacing-y: 0;
330
- --tw-translate-x: 0;
331
- --tw-translate-y: 0;
332
- --tw-rotate: 0;
333
- --tw-skew-x: 0;
334
- --tw-skew-y: 0;
335
- --tw-scale-x: 1;
336
- --tw-scale-y: 1;
337
- --tw-pan-x: ;
338
- --tw-pan-y: ;
339
- --tw-pinch-zoom: ;
340
- --tw-scroll-snap-strictness: proximity;
341
- --tw-gradient-from-position: ;
342
- --tw-gradient-via-position: ;
343
- --tw-gradient-to-position: ;
344
- --tw-ordinal: ;
345
- --tw-slashed-zero: ;
346
- --tw-numeric-figure: ;
347
- --tw-numeric-spacing: ;
348
- --tw-numeric-fraction: ;
349
- --tw-ring-inset: ;
350
- --tw-ring-offset-width: 0px;
351
- --tw-ring-offset-color: #fff;
352
- --tw-ring-color: rgb(147 197 253 / 0.5);
353
- --tw-ring-offset-shadow: 0 0 #0000;
354
- --tw-ring-shadow: 0 0 #0000;
355
- --tw-shadow: 0 0 #0000;
356
- --tw-shadow-colored: 0 0 #0000;
357
- --tw-blur: ;
358
- --tw-brightness: ;
359
- --tw-contrast: ;
360
- --tw-grayscale: ;
361
- --tw-hue-rotate: ;
362
- --tw-invert: ;
363
- --tw-saturate: ;
364
- --tw-sepia: ;
365
- --tw-drop-shadow: ;
366
- --tw-backdrop-blur: ;
367
- --tw-backdrop-brightness: ;
368
- --tw-backdrop-contrast: ;
369
- --tw-backdrop-grayscale: ;
370
- --tw-backdrop-hue-rotate: ;
371
- --tw-backdrop-invert: ;
372
- --tw-backdrop-opacity: ;
373
- --tw-backdrop-saturate: ;
374
- --tw-backdrop-sepia: ;
375
- --tw-contain-size: ;
376
- --tw-contain-layout: ;
377
- --tw-contain-paint: ;
378
- --tw-contain-style: ;
379
- }
380
- *,
381
- ::before,
382
- ::after {
2
+ @layer properties;
3
+ .ory-elements *,
4
+ .ory-elements ::after,
5
+ .ory-elements ::before,
6
+ .ory-elements ::backdrop,
7
+ .ory-elements ::file-selector-button {
383
8
  box-sizing: border-box;
384
- border-width: 0;
385
- border-style: solid;
386
- border-color: currentColor;
387
- }
388
- ::before,
389
- ::after {
390
- --tw-content: "";
9
+ margin: 0;
10
+ padding: 0;
11
+ border: 0 solid;
391
12
  }
392
- html,
13
+ .ory-elements,
393
14
  :host {
394
15
  line-height: 1.5;
395
16
  -webkit-text-size-adjust: 100%;
396
- -moz-tab-size: 4;
397
- -o-tab-size: 4;
398
17
  tab-size: 4;
399
- font-family: var(--font-sans);
400
- font-feature-settings: normal;
401
- font-variation-settings: normal;
18
+ font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
19
+ font-feature-settings: var(--default-font-feature-settings, normal);
20
+ font-variation-settings: var(--default-font-variation-settings, normal);
402
21
  -webkit-tap-highlight-color: transparent;
403
22
  }
404
- body {
405
- margin: 0;
406
- line-height: inherit;
407
- }
408
- hr {
23
+ .ory-elements hr {
409
24
  height: 0;
410
25
  color: inherit;
411
26
  border-top-width: 1px;
412
27
  }
413
- abbr:where([title]) {
28
+ .ory-elements abbr:where([title]) {
414
29
  -webkit-text-decoration: underline dotted;
415
30
  text-decoration: underline dotted;
416
31
  }
417
- h1,
418
- h2,
419
- h3,
420
- h4,
421
- h5,
422
- h6 {
32
+ .ory-elements h1,
33
+ .ory-elements h2,
34
+ .ory-elements h3,
35
+ .ory-elements h4,
36
+ .ory-elements h5,
37
+ .ory-elements h6 {
423
38
  font-size: inherit;
424
39
  font-weight: inherit;
425
40
  }
426
- a {
41
+ .ory-elements a {
427
42
  color: inherit;
43
+ -webkit-text-decoration: inherit;
428
44
  text-decoration: inherit;
429
45
  }
430
- b,
431
- strong {
46
+ .ory-elements b,
47
+ .ory-elements strong {
432
48
  font-weight: bolder;
433
49
  }
434
- code,
435
- kbd,
436
- samp,
437
- pre {
438
- font-family:
439
- ui-monospace,
440
- SFMono-Regular,
441
- Menlo,
442
- Monaco,
443
- Consolas,
444
- "Liberation Mono",
445
- "Courier New",
446
- monospace;
447
- font-feature-settings: normal;
448
- font-variation-settings: normal;
50
+ .ory-elements code,
51
+ .ory-elements kbd,
52
+ .ory-elements samp,
53
+ .ory-elements pre {
54
+ font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
55
+ font-feature-settings: var(--default-mono-font-feature-settings, normal);
56
+ font-variation-settings: var(--default-mono-font-variation-settings, normal);
449
57
  font-size: 1em;
450
58
  }
451
- small {
59
+ .ory-elements small {
452
60
  font-size: 80%;
453
61
  }
454
- sub,
455
- sup {
62
+ .ory-elements sub,
63
+ .ory-elements sup {
456
64
  font-size: 75%;
457
65
  line-height: 0;
458
66
  position: relative;
459
67
  vertical-align: baseline;
460
68
  }
461
- sub {
69
+ .ory-elements sub {
462
70
  bottom: -0.25em;
463
71
  }
464
- sup {
72
+ .ory-elements sup {
465
73
  top: -0.5em;
466
74
  }
467
- table {
75
+ .ory-elements table {
468
76
  text-indent: 0;
469
77
  border-color: inherit;
470
78
  border-collapse: collapse;
471
79
  }
472
- button,
473
- input,
474
- optgroup,
475
- select,
476
- textarea {
477
- font-family: inherit;
478
- font-feature-settings: inherit;
479
- font-variation-settings: inherit;
480
- font-size: 100%;
481
- font-weight: inherit;
482
- line-height: inherit;
483
- letter-spacing: inherit;
484
- color: inherit;
485
- margin: 0;
486
- padding: 0;
487
- }
488
- button,
489
- select {
490
- text-transform: none;
491
- }
492
- button,
493
- input:where([type=button]),
494
- input:where([type=reset]),
495
- input:where([type=submit]) {
496
- -webkit-appearance: button;
497
- background-color: transparent;
498
- background-image: none;
499
- }
500
- :-moz-focusring {
80
+ .ory-elements :-moz-focusring {
501
81
  outline: auto;
502
82
  }
503
- :-moz-ui-invalid {
504
- box-shadow: none;
505
- }
506
- progress {
83
+ .ory-elements progress {
507
84
  vertical-align: baseline;
508
85
  }
509
- ::-webkit-inner-spin-button,
510
- ::-webkit-outer-spin-button {
511
- height: auto;
512
- }
513
- [type=search] {
514
- -webkit-appearance: textfield;
515
- outline-offset: -2px;
516
- }
517
- ::-webkit-search-decoration {
518
- -webkit-appearance: none;
519
- }
520
- ::-webkit-file-upload-button {
521
- -webkit-appearance: button;
522
- font: inherit;
523
- }
524
- summary {
86
+ .ory-elements summary {
525
87
  display: list-item;
526
88
  }
527
- blockquote,
528
- dl,
529
- dd,
530
- h1,
531
- h2,
532
- h3,
533
- h4,
534
- h5,
535
- h6,
536
- hr,
537
- figure,
538
- p,
539
- pre {
540
- margin: 0;
89
+ .ory-elements ol,
90
+ .ory-elements ul,
91
+ .ory-elements menu {
92
+ list-style: none;
541
93
  }
542
- fieldset {
543
- margin: 0;
544
- padding: 0;
94
+ .ory-elements img,
95
+ .ory-elements svg,
96
+ .ory-elements video,
97
+ .ory-elements canvas,
98
+ .ory-elements audio,
99
+ .ory-elements iframe,
100
+ .ory-elements embed,
101
+ .ory-elements object {
102
+ display: block;
103
+ vertical-align: middle;
545
104
  }
546
- legend {
547
- padding: 0;
105
+ .ory-elements img,
106
+ .ory-elements video {
107
+ max-width: 100%;
108
+ height: auto;
548
109
  }
549
- ol,
550
- ul,
551
- menu {
552
- list-style: none;
553
- margin: 0;
554
- padding: 0;
110
+ .ory-elements button,
111
+ .ory-elements input,
112
+ .ory-elements select,
113
+ .ory-elements optgroup,
114
+ .ory-elements textarea,
115
+ .ory-elements ::file-selector-button {
116
+ font: inherit;
117
+ font-feature-settings: inherit;
118
+ font-variation-settings: inherit;
119
+ letter-spacing: inherit;
120
+ color: inherit;
121
+ border-radius: 0;
122
+ background-color: transparent;
123
+ opacity: 1;
555
124
  }
556
- dialog {
557
- padding: 0;
125
+ .ory-elements :where(select:is([multiple], [size])) optgroup {
126
+ font-weight: bolder;
558
127
  }
559
- textarea {
560
- resize: vertical;
128
+ .ory-elements :where(select:is([multiple], [size])) optgroup option {
129
+ padding-inline-start: 20px;
561
130
  }
562
- input::-moz-placeholder,
563
- textarea::-moz-placeholder {
564
- opacity: 1;
565
- color: #9ca3af;
131
+ .ory-elements ::file-selector-button {
132
+ margin-inline-end: 4px;
566
133
  }
567
- input::placeholder,
568
- textarea::placeholder {
134
+ .ory-elements ::placeholder {
569
135
  opacity: 1;
570
- color: #9ca3af;
571
136
  }
572
- button,
573
- [role=button] {
574
- cursor: pointer;
137
+ @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
138
+ .ory-elements ::placeholder {
139
+ color: currentcolor;
140
+ @supports (color: color-mix(in lab, red, red)) {
141
+ color: color-mix(in oklab, currentcolor 50%, transparent);
142
+ }
143
+ }
575
144
  }
576
- :disabled {
577
- cursor: default;
578
- }
579
- img,
580
- svg,
581
- video,
582
- canvas,
583
- audio,
584
- iframe,
585
- embed,
586
- object {
587
- display: block;
588
- vertical-align: middle;
145
+ .ory-elements textarea {
146
+ resize: vertical;
589
147
  }
590
- img,
591
- video {
592
- max-width: 100%;
593
- height: auto;
148
+ .ory-elements ::-webkit-search-decoration {
149
+ -webkit-appearance: none;
594
150
  }
595
- [hidden]:where(:not([hidden=until-found])) {
596
- display: none;
151
+ .ory-elements ::-webkit-date-and-time-value {
152
+ min-height: 1lh;
153
+ text-align: inherit;
597
154
  }
598
- .container {
599
- width: 100%;
155
+ .ory-elements ::-webkit-datetime-edit {
156
+ display: inline-flex;
600
157
  }
601
- @media (min-width: 640px) {
602
- .container {
603
- max-width: 640px;
604
- }
158
+ .ory-elements ::-webkit-datetime-edit-fields-wrapper {
159
+ padding: 0;
605
160
  }
606
- @media (min-width: 768px) {
607
- .container {
608
- max-width: 768px;
609
- }
161
+ .ory-elements ::-webkit-datetime-edit,
162
+ .ory-elements ::-webkit-datetime-edit-year-field,
163
+ .ory-elements ::-webkit-datetime-edit-month-field,
164
+ .ory-elements ::-webkit-datetime-edit-day-field,
165
+ .ory-elements ::-webkit-datetime-edit-hour-field,
166
+ .ory-elements ::-webkit-datetime-edit-minute-field,
167
+ .ory-elements ::-webkit-datetime-edit-second-field,
168
+ .ory-elements ::-webkit-datetime-edit-millisecond-field,
169
+ .ory-elements ::-webkit-datetime-edit-meridiem-field {
170
+ padding-block: 0;
171
+ }
172
+ .ory-elements ::-webkit-calendar-picker-indicator {
173
+ line-height: 1;
610
174
  }
611
- @media (min-width: 1024px) {
612
- .container {
613
- max-width: 1024px;
614
- }
175
+ .ory-elements :-moz-ui-invalid {
176
+ box-shadow: none;
615
177
  }
616
- @media (min-width: 1280px) {
617
- .container {
618
- max-width: 1280px;
619
- }
178
+ .ory-elements button,
179
+ .ory-elements input:where([type=button], [type=reset], [type=submit]),
180
+ .ory-elements ::file-selector-button {
181
+ appearance: button;
620
182
  }
621
- @media (min-width: 1536px) {
622
- .container {
623
- max-width: 1536px;
624
- }
183
+ .ory-elements ::-webkit-inner-spin-button,
184
+ .ory-elements ::-webkit-outer-spin-button {
185
+ height: auto;
625
186
  }
626
- .pointer-events-none {
627
- pointer-events: none;
187
+ .ory-elements [hidden]:where(:not([hidden=until-found])) {
188
+ display: none !important;
628
189
  }
629
- .visible {
630
- visibility: visible;
190
+ .ory-elements .pointer-events-none {
191
+ pointer-events: none;
631
192
  }
632
- .invisible {
193
+ .ory-elements .invisible {
633
194
  visibility: hidden;
634
195
  }
635
- .fixed {
636
- position: fixed;
196
+ .ory-elements .visible {
197
+ visibility: visible;
637
198
  }
638
- .absolute {
199
+ .ory-elements .absolute {
639
200
  position: absolute;
640
201
  }
641
- .relative {
202
+ .ory-elements .fixed {
203
+ position: fixed;
204
+ }
205
+ .ory-elements .relative {
642
206
  position: relative;
643
207
  }
644
- .inset-0 {
645
- inset: 0px;
208
+ .ory-elements .inset-0 {
209
+ inset: calc(var(--spacing) * 0);
646
210
  }
647
- .right-0 {
648
- right: 0px;
211
+ .ory-elements .right-0 {
212
+ right: calc(var(--spacing) * 0);
649
213
  }
650
- .z-50 {
214
+ .ory-elements .z-50 {
651
215
  z-index: 50;
652
216
  }
653
- .col-span-2 {
217
+ .ory-elements .col-span-2 {
654
218
  grid-column: span 2 / span 2;
655
219
  }
656
- .col-span-full {
220
+ .ory-elements .col-span-full {
657
221
  grid-column: 1 / -1;
658
222
  }
659
- .-m-3 {
660
- margin: -0.75rem;
223
+ .ory-elements .container {
224
+ width: 100%;
225
+ @media (width >= 40rem) {
226
+ max-width: 40rem;
227
+ }
228
+ @media (width >= 48rem) {
229
+ max-width: 48rem;
230
+ }
231
+ @media (width >= 64rem) {
232
+ max-width: 64rem;
233
+ }
234
+ @media (width >= 80rem) {
235
+ max-width: 80rem;
236
+ }
237
+ @media (width >= 96rem) {
238
+ max-width: 96rem;
239
+ }
240
+ }
241
+ .ory-elements .-m-3 {
242
+ margin: calc(var(--spacing) * -3);
661
243
  }
662
- .m-auto {
244
+ .ory-elements .m-auto {
663
245
  margin: auto;
664
246
  }
665
- .ml-auto {
666
- margin-left: auto;
247
+ .ory-elements .mt-1 {
248
+ margin-top: calc(var(--spacing) * 1);
667
249
  }
668
- .mr-auto {
669
- margin-right: auto;
250
+ .ory-elements .mt-16 {
251
+ margin-top: calc(var(--spacing) * 16);
670
252
  }
671
- .mt-1 {
672
- margin-top: 0.25rem;
253
+ .ory-elements .mr-auto {
254
+ margin-right: auto;
673
255
  }
674
- .mt-16 {
675
- margin-top: 4rem;
256
+ .ory-elements .ml-auto {
257
+ margin-left: auto;
676
258
  }
677
- .block {
259
+ .ory-elements .block {
678
260
  display: block;
679
261
  }
680
- .inline-block {
681
- display: inline-block;
262
+ .ory-elements .contents {
263
+ display: contents;
682
264
  }
683
- .flex {
265
+ .ory-elements .flex {
684
266
  display: flex;
685
267
  }
686
- .inline-flex {
687
- display: inline-flex;
688
- }
689
- .grid {
268
+ .ory-elements .grid {
690
269
  display: grid;
691
270
  }
692
- .list-item {
693
- display: list-item;
694
- }
695
- .hidden {
271
+ .ory-elements .hidden {
696
272
  display: none;
697
273
  }
698
- .aspect-square {
274
+ .ory-elements .inline {
275
+ display: inline;
276
+ }
277
+ .ory-elements .inline-block {
278
+ display: inline-block;
279
+ }
280
+ .ory-elements .inline-flex {
281
+ display: inline-flex;
282
+ }
283
+ .ory-elements .table {
284
+ display: table;
285
+ }
286
+ .ory-elements .aspect-square {
699
287
  aspect-ratio: 1 / 1;
700
288
  }
701
- .size-10 {
702
- width: 2.5rem;
703
- height: 2.5rem;
289
+ .ory-elements .size-2 {
290
+ width: calc(var(--spacing) * 2);
291
+ height: calc(var(--spacing) * 2);
704
292
  }
705
- .size-2 {
706
- width: 0.5rem;
707
- height: 0.5rem;
293
+ .ory-elements .size-4 {
294
+ width: calc(var(--spacing) * 4);
295
+ height: calc(var(--spacing) * 4);
708
296
  }
709
- .size-4 {
710
- width: 1rem;
711
- height: 1rem;
297
+ .ory-elements .size-5 {
298
+ width: calc(var(--spacing) * 5);
299
+ height: calc(var(--spacing) * 5);
712
300
  }
713
- .size-5 {
714
- width: 1.25rem;
715
- height: 1.25rem;
301
+ .ory-elements .size-8 {
302
+ width: calc(var(--spacing) * 8);
303
+ height: calc(var(--spacing) * 8);
716
304
  }
717
- .size-8 {
718
- width: 2rem;
719
- height: 2rem;
305
+ .ory-elements .size-10 {
306
+ width: calc(var(--spacing) * 10);
307
+ height: calc(var(--spacing) * 10);
720
308
  }
721
- .size-full {
309
+ .ory-elements .size-full {
722
310
  width: 100%;
723
311
  height: 100%;
724
312
  }
725
- .h-4 {
726
- height: 1rem;
313
+ .ory-elements .h-4 {
314
+ height: calc(var(--spacing) * 4);
727
315
  }
728
- .h-44 {
729
- height: 11rem;
316
+ .ory-elements .h-5 {
317
+ height: calc(var(--spacing) * 5);
730
318
  }
731
- .h-5 {
732
- height: 1.25rem;
319
+ .ory-elements .h-9 {
320
+ height: calc(var(--spacing) * 9);
733
321
  }
734
- .h-9 {
735
- height: 2.25rem;
322
+ .ory-elements .h-44 {
323
+ height: calc(var(--spacing) * 44);
736
324
  }
737
- .h-full {
325
+ .ory-elements .h-full {
738
326
  height: 100%;
739
327
  }
740
- .max-h-10 {
741
- max-height: 2.5rem;
328
+ .ory-elements .max-h-9 {
329
+ max-height: calc(var(--spacing) * 9);
742
330
  }
743
- .max-h-9 {
744
- max-height: 2.25rem;
331
+ .ory-elements .max-h-10 {
332
+ max-height: calc(var(--spacing) * 10);
745
333
  }
746
- .min-h-5 {
747
- min-height: 1.25rem;
334
+ .ory-elements .min-h-5 {
335
+ min-height: calc(var(--spacing) * 5);
748
336
  }
749
- .min-h-\[72px\] {
337
+ .ory-elements .min-h-\[72px\] {
750
338
  min-height: 72px;
751
339
  }
752
- .w-12 {
753
- width: 3rem;
340
+ .ory-elements .w-7 {
341
+ width: calc(var(--spacing) * 7);
754
342
  }
755
- .w-7 {
756
- width: 1.75rem;
343
+ .ory-elements .w-12 {
344
+ width: calc(var(--spacing) * 12);
757
345
  }
758
- .w-full {
346
+ .ory-elements .w-full {
759
347
  width: 100%;
760
348
  }
761
- .w-px {
349
+ .ory-elements .w-px {
762
350
  width: 1px;
763
351
  }
764
- .min-w-1 {
765
- min-width: 0.25rem;
352
+ .ory-elements .max-w-\(--breakpoint-sm\) {
353
+ max-width: var(--breakpoint-sm);
766
354
  }
767
- .min-w-\[19rem\] {
768
- min-width: 19rem;
355
+ .ory-elements .max-w-\[60\%\] {
356
+ max-width: 60%;
769
357
  }
770
- .max-w-\[488px\] {
358
+ .ory-elements .max-w-\[488px\] {
771
359
  max-width: 488px;
772
360
  }
773
- .max-w-\[60\%\] {
774
- max-width: 60%;
775
- }
776
- .max-w-full {
361
+ .ory-elements .max-w-full {
777
362
  max-width: 100%;
778
363
  }
779
- .max-w-screen-sm {
780
- max-width: 640px;
364
+ .ory-elements .min-w-1 {
365
+ min-width: calc(var(--spacing) * 1);
781
366
  }
782
- .flex-1 {
783
- flex: 1 1 0%;
367
+ .ory-elements .min-w-76 {
368
+ min-width: calc(var(--spacing) * 76);
784
369
  }
785
- .shrink-0 {
370
+ .ory-elements .flex-1 {
371
+ flex: 1;
372
+ }
373
+ .ory-elements .shrink-0 {
786
374
  flex-shrink: 0;
787
375
  }
788
- .grow {
376
+ .ory-elements .grow {
789
377
  flex-grow: 1;
790
378
  }
791
- .transform {
792
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
379
+ .ory-elements .origin-top-right {
380
+ transform-origin: top right;
793
381
  }
794
- @keyframes caret-blink {
795
- 0%, 70%, 100% {
796
- opacity: 1;
797
- }
798
- 20%, 50% {
799
- opacity: 0;
800
- }
382
+ .ory-elements .transform {
383
+ transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
801
384
  }
802
- .animate-caret-blink {
803
- animation: caret-blink 1.25s ease-out infinite;
385
+ .ory-elements .animate-caret-blink {
386
+ animation: var(--animate-caret-blink);
804
387
  }
805
- @keyframes spin {
806
- to {
807
- transform: rotate(360deg);
808
- }
388
+ .ory-elements .animate-drop-down-in {
389
+ animation: var(--animate-drop-down-in);
809
390
  }
810
- .animate-spin {
811
- animation: spin 1s linear infinite;
391
+ .ory-elements .animate-spin {
392
+ animation: var(--animate-spin);
812
393
  }
813
- .cursor-pointer {
394
+ .ory-elements .cursor-pointer {
814
395
  cursor: pointer;
815
396
  }
816
- .select-none {
817
- -webkit-user-select: none;
818
- -moz-user-select: none;
819
- user-select: none;
820
- }
821
- .appearance-none {
822
- -webkit-appearance: none;
823
- -moz-appearance: none;
397
+ .ory-elements .appearance-none {
824
398
  appearance: none;
825
399
  }
826
- .grid-cols-1 {
400
+ .ory-elements .grid-cols-1 {
827
401
  grid-template-columns: repeat(1, minmax(0, 1fr));
828
402
  }
829
- .grid-cols-2 {
403
+ .ory-elements .grid-cols-2 {
830
404
  grid-template-columns: repeat(2, minmax(0, 1fr));
831
405
  }
832
- .grid-cols-3 {
406
+ .ory-elements .grid-cols-3 {
833
407
  grid-template-columns: repeat(3, minmax(0, 1fr));
834
408
  }
835
- .grid-cols-4 {
409
+ .ory-elements .grid-cols-4 {
836
410
  grid-template-columns: repeat(4, minmax(0, 1fr));
837
411
  }
838
- .flex-col {
412
+ .ory-elements .flex-col {
839
413
  flex-direction: column;
840
414
  }
841
- .flex-wrap {
415
+ .ory-elements .flex-wrap {
842
416
  flex-wrap: wrap;
843
417
  }
844
- .items-start {
845
- align-items: flex-start;
418
+ .ory-elements .items-center {
419
+ align-items: center;
846
420
  }
847
- .items-end {
421
+ .ory-elements .items-end {
848
422
  align-items: flex-end;
849
423
  }
850
- .items-center {
851
- align-items: center;
424
+ .ory-elements .items-start {
425
+ align-items: flex-start;
852
426
  }
853
- .justify-center {
427
+ .ory-elements .justify-between {
428
+ justify-content: space-between;
429
+ }
430
+ .ory-elements .justify-center {
854
431
  justify-content: center;
855
432
  }
856
- .justify-between {
857
- justify-content: space-between;
433
+ .ory-elements .justify-start {
434
+ justify-content: flex-start;
858
435
  }
859
- .justify-stretch {
436
+ .ory-elements .justify-stretch {
860
437
  justify-content: stretch;
861
438
  }
862
- .gap-1 {
863
- gap: 0.25rem;
439
+ .ory-elements .gap-1 {
440
+ gap: calc(var(--spacing) * 1);
864
441
  }
865
- .gap-12 {
866
- gap: 3rem;
442
+ .ory-elements .gap-2 {
443
+ gap: calc(var(--spacing) * 2);
867
444
  }
868
- .gap-2 {
869
- gap: 0.5rem;
445
+ .ory-elements .gap-3 {
446
+ gap: calc(var(--spacing) * 3);
870
447
  }
871
- .gap-3 {
872
- gap: 0.75rem;
448
+ .ory-elements .gap-4 {
449
+ gap: calc(var(--spacing) * 4);
873
450
  }
874
- .gap-4 {
875
- gap: 1rem;
451
+ .ory-elements .gap-6 {
452
+ gap: calc(var(--spacing) * 6);
876
453
  }
877
- .gap-6 {
878
- gap: 1.5rem;
454
+ .ory-elements .gap-8 {
455
+ gap: calc(var(--spacing) * 8);
879
456
  }
880
- .gap-8 {
881
- gap: 2rem;
457
+ .ory-elements .gap-12 {
458
+ gap: calc(var(--spacing) * 12);
882
459
  }
883
- .self-start {
460
+ .ory-elements .self-start {
884
461
  align-self: flex-start;
885
462
  }
886
- .self-stretch {
463
+ .ory-elements .self-stretch {
887
464
  align-self: stretch;
888
465
  }
889
- .overflow-hidden {
890
- overflow: hidden;
891
- }
892
- .truncate {
466
+ .ory-elements .truncate {
893
467
  overflow: hidden;
894
468
  text-overflow: ellipsis;
895
469
  white-space: nowrap;
896
470
  }
897
- .text-ellipsis {
898
- text-overflow: ellipsis;
899
- }
900
- .text-nowrap {
901
- text-wrap: nowrap;
902
- }
903
- .break-words {
904
- overflow-wrap: break-word;
471
+ .ory-elements .overflow-hidden {
472
+ overflow: hidden;
905
473
  }
906
- .rounded-\[999px\] {
474
+ .ory-elements .rounded-\[999px\] {
907
475
  border-radius: 999px;
908
476
  }
909
- .rounded-buttons {
910
- border-radius: var(--border-radius-buttons);
477
+ .ory-elements .rounded-buttons {
478
+ border-radius: var(--radius-buttons);
911
479
  }
912
- .rounded-cards {
913
- border-radius: var(--border-radius-cards);
480
+ .ory-elements .rounded-cards {
481
+ border-radius: var(--radius-cards);
914
482
  }
915
- .rounded-forms {
916
- border-radius: var(--border-radius-forms);
483
+ .ory-elements .rounded-forms {
484
+ border-radius: var(--radius-forms);
917
485
  }
918
- .rounded-general {
919
- border-radius: var(--border-radius-general);
486
+ .ory-elements .rounded-general {
487
+ border-radius: var(--radius-general);
920
488
  }
921
- .rounded-identifier {
922
- border-radius: var(--border-radius-identifier);
489
+ .ory-elements .rounded-identifier {
490
+ border-radius: var(--radius-identifier);
923
491
  }
924
- .rounded-b-cards {
925
- border-bottom-right-radius: var(--border-radius-cards);
926
- border-bottom-left-radius: var(--border-radius-cards);
492
+ .ory-elements .rounded-t-cards {
493
+ border-top-left-radius: var(--radius-cards);
494
+ border-top-right-radius: var(--radius-cards);
927
495
  }
928
- .rounded-t-cards {
929
- border-top-left-radius: var(--border-radius-cards);
930
- border-top-right-radius: var(--border-radius-cards);
496
+ .ory-elements .rounded-b-cards {
497
+ border-bottom-right-radius: var(--radius-cards);
498
+ border-bottom-left-radius: var(--radius-cards);
931
499
  }
932
- .border {
500
+ .ory-elements .border {
501
+ border-style: var(--tw-border-style);
933
502
  border-width: 1px;
934
503
  }
935
- .border-b {
504
+ .ory-elements .border-t {
505
+ border-top-style: var(--tw-border-style);
506
+ border-top-width: 1px;
507
+ }
508
+ .ory-elements .border-b {
509
+ border-bottom-style: var(--tw-border-style);
936
510
  border-bottom-width: 1px;
937
511
  }
938
- .border-b-0 {
512
+ .ory-elements .border-b-0 {
513
+ border-bottom-style: var(--tw-border-style);
939
514
  border-bottom-width: 0px;
940
515
  }
941
- .border-t {
942
- border-top-width: 1px;
943
- }
944
- .border-solid {
516
+ .ory-elements .border-solid {
517
+ --tw-border-style: solid;
945
518
  border-style: solid;
946
519
  }
947
- .border-button-identifier-border-border-default {
948
- border-color: var(--button-identifier-border-border-default);
520
+ .ory-elements .border-button-identifier-border-border-default {
521
+ border-color: var(--color-button-identifier-border-border-default);
949
522
  }
950
- .border-button-secondary-border-default {
951
- border-color: var(--button-secondary-border-default);
523
+ .ory-elements .border-button-secondary-border-default {
524
+ border-color: var(--color-button-secondary-border-default);
952
525
  }
953
- .border-button-social-border-default {
954
- border-color: var(--button-social-border-default);
526
+ .ory-elements .border-button-social-border-default {
527
+ border-color: var(--color-button-social-border-default);
955
528
  }
956
- .border-button-social-border-generic-provider {
957
- border-color: var(--button-social-border-generic-provider);
529
+ .ory-elements .border-button-social-border-generic-provider {
530
+ border-color: var(--color-button-social-border-generic-provider);
958
531
  }
959
- .border-checkbox-border-checkbox-border-default {
960
- border-color: var(--checkbox-border-checkbox-border-default);
532
+ .ory-elements .border-checkbox-border-checkbox-border-default {
533
+ border-color: var(--color-checkbox-border-checkbox-border-default);
961
534
  }
962
- .border-form-border-default {
963
- border-color: var(--form-border-default);
535
+ .ory-elements .border-form-border-default {
536
+ border-color: var(--color-form-border-default);
964
537
  }
965
- .border-input-border-default {
966
- border-color: var(--input-border-default);
538
+ .ory-elements .border-input-border-default {
539
+ border-color: var(--color-input-border-default);
967
540
  }
968
- .border-input-border-focus {
969
- border-color: var(--input-border-focus);
541
+ .ory-elements .border-input-border-focus {
542
+ border-color: var(--color-input-border-focus);
970
543
  }
971
- .border-interface-border-default-primary {
972
- border-color: var(--interface-border-default-primary);
544
+ .ory-elements .border-interface-border-default-primary {
545
+ border-color: var(--color-interface-border-default-primary);
973
546
  }
974
- .border-interface-border-validation-danger {
975
- border-color: var(--interface-border-validation-danger);
547
+ .ory-elements .border-interface-border-validation-danger {
548
+ border-color: var(--color-interface-border-validation-danger);
976
549
  }
977
- .border-ory-border-default {
978
- border-color: var(--ory-border-default);
550
+ .ory-elements .border-ory-border-default {
551
+ border-color: var(--color-ory-border-default);
979
552
  }
980
- .border-toggle-border-default {
981
- border-color: var(--toggle-border-default);
553
+ .ory-elements .border-toggle-border-default {
554
+ border-color: var(--color-toggle-border-default);
982
555
  }
983
- .bg-\[white\] {
984
- --tw-bg-opacity: 1;
985
- background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
556
+ .ory-elements .bg-\[white\] {
557
+ background-color: white;
986
558
  }
987
- .bg-button-identifier-background-default {
988
- background-color: var(--button-identifier-background-default);
559
+ .ory-elements .bg-button-identifier-background-default {
560
+ background-color: var(--color-button-identifier-background-default);
989
561
  }
990
- .bg-button-primary-background-default {
991
- background-color: var(--button-primary-background-default);
562
+ .ory-elements .bg-button-primary-background-default {
563
+ background-color: var(--color-button-primary-background-default);
992
564
  }
993
- .bg-button-secondary-background-default {
994
- background-color: var(--button-secondary-background-default);
565
+ .ory-elements .bg-button-secondary-background-default {
566
+ background-color: var(--color-button-secondary-background-default);
995
567
  }
996
- .bg-button-social-background-default {
997
- background-color: var(--button-social-background-default);
568
+ .ory-elements .bg-button-social-background-default {
569
+ background-color: var(--color-button-social-background-default);
998
570
  }
999
- .bg-button-social-background-generic-provider {
1000
- background-color: var(--button-social-background-generic-provider);
571
+ .ory-elements .bg-button-social-background-generic-provider {
572
+ background-color: var(--color-button-social-background-generic-provider);
1001
573
  }
1002
- .bg-checkbox-background-default {
1003
- background-color: var(--checkbox-background-default);
574
+ .ory-elements .bg-checkbox-background-default {
575
+ background-color: var(--color-checkbox-background-default);
1004
576
  }
1005
- .bg-form-background-default {
1006
- background-color: var(--form-background-default);
577
+ .ory-elements .bg-form-background-default {
578
+ background-color: var(--color-form-background-default);
1007
579
  }
1008
- .bg-input-background-default {
1009
- background-color: var(--input-background-default);
580
+ .ory-elements .bg-input-background-default {
581
+ background-color: var(--color-input-background-default);
1010
582
  }
1011
- .bg-interface-background-brand-primary {
1012
- background-color: var(--interface-background-brand-primary);
583
+ .ory-elements .bg-interface-background-brand-primary {
584
+ background-color: var(--color-interface-background-brand-primary);
1013
585
  }
1014
- .bg-interface-background-default-inverted {
1015
- background-color: var(--interface-background-default-inverted);
586
+ .ory-elements .bg-interface-background-default-inverted {
587
+ background-color: var(--color-interface-background-default-inverted);
1016
588
  }
1017
- .bg-interface-background-default-primary {
1018
- background-color: var(--interface-background-default-primary);
589
+ .ory-elements .bg-interface-background-default-primary {
590
+ background-color: var(--color-interface-background-default-primary);
1019
591
  }
1020
- .bg-interface-background-default-secondary {
1021
- background-color: var(--interface-background-default-secondary);
592
+ .ory-elements .bg-interface-background-default-secondary {
593
+ background-color: var(--color-interface-background-default-secondary);
1022
594
  }
1023
- .bg-ory-background-default {
1024
- background-color: var(--ory-background-default);
595
+ .ory-elements .bg-ory-background-default {
596
+ background-color: var(--color-ory-background-default);
1025
597
  }
1026
- .bg-toggle-background-default {
1027
- background-color: var(--toggle-background-default);
598
+ .ory-elements .bg-toggle-background-default {
599
+ background-color: var(--color-toggle-background-default);
1028
600
  }
1029
- .bg-toggle-foreground-default {
1030
- background-color: var(--toggle-foreground-default);
601
+ .ory-elements .bg-toggle-foreground-default {
602
+ background-color: var(--color-toggle-foreground-default);
1031
603
  }
1032
- .fill-checkbox-foreground-checked {
1033
- fill: var(--checkbox-foreground-checked);
604
+ .ory-elements .fill-checkbox-foreground-checked {
605
+ fill: var(--color-checkbox-foreground-checked);
1034
606
  }
1035
- .object-contain {
1036
- -o-object-fit: contain;
607
+ .ory-elements .object-contain {
1037
608
  object-fit: contain;
1038
609
  }
1039
- .p-2 {
1040
- padding: 0.5rem;
610
+ .ory-elements .p-2 {
611
+ padding: calc(var(--spacing) * 2);
1041
612
  }
1042
- .p-4 {
1043
- padding: 1rem;
613
+ .ory-elements .p-4 {
614
+ padding: calc(var(--spacing) * 4);
1044
615
  }
1045
- .p-5 {
1046
- padding: 1.25rem;
616
+ .ory-elements .p-5 {
617
+ padding: calc(var(--spacing) * 5);
1047
618
  }
1048
- .p-6 {
1049
- padding: 1.5rem;
619
+ .ory-elements .p-6 {
620
+ padding: calc(var(--spacing) * 6);
1050
621
  }
1051
- .p-8 {
1052
- padding: 2rem;
622
+ .ory-elements .p-8 {
623
+ padding: calc(var(--spacing) * 8);
1053
624
  }
1054
- .p-\[3px\] {
625
+ .ory-elements .p-\[3px\] {
1055
626
  padding: 3px;
1056
627
  }
1057
- .px-2 {
1058
- padding-left: 0.5rem;
1059
- padding-right: 0.5rem;
628
+ .ory-elements .px-2 {
629
+ padding-inline: calc(var(--spacing) * 2);
1060
630
  }
1061
- .px-4 {
1062
- padding-left: 1rem;
1063
- padding-right: 1rem;
631
+ .ory-elements .px-4 {
632
+ padding-inline: calc(var(--spacing) * 4);
1064
633
  }
1065
- .px-5 {
1066
- padding-left: 1.25rem;
1067
- padding-right: 1.25rem;
634
+ .ory-elements .px-5 {
635
+ padding-inline: calc(var(--spacing) * 5);
1068
636
  }
1069
- .px-6 {
1070
- padding-left: 1.5rem;
1071
- padding-right: 1.5rem;
637
+ .ory-elements .px-6 {
638
+ padding-inline: calc(var(--spacing) * 6);
1072
639
  }
1073
- .px-8 {
1074
- padding-left: 2rem;
1075
- padding-right: 2rem;
640
+ .ory-elements .px-8 {
641
+ padding-inline: calc(var(--spacing) * 8);
1076
642
  }
1077
- .px-\[11px\] {
1078
- padding-left: 11px;
1079
- padding-right: 11px;
643
+ .ory-elements .px-\[11px\] {
644
+ padding-inline: 11px;
1080
645
  }
1081
- .py-1\.5 {
1082
- padding-top: 0.375rem;
1083
- padding-bottom: 0.375rem;
646
+ .ory-elements .py-1\.5 {
647
+ padding-block: calc(var(--spacing) * 1.5);
1084
648
  }
1085
- .py-12 {
1086
- padding-top: 3rem;
1087
- padding-bottom: 3rem;
649
+ .ory-elements .py-3 {
650
+ padding-block: calc(var(--spacing) * 3);
1088
651
  }
1089
- .py-3 {
1090
- padding-top: 0.75rem;
1091
- padding-bottom: 0.75rem;
652
+ .ory-elements .py-4 {
653
+ padding-block: calc(var(--spacing) * 4);
1092
654
  }
1093
- .py-4 {
1094
- padding-top: 1rem;
1095
- padding-bottom: 1rem;
655
+ .ory-elements .py-4\.5 {
656
+ padding-block: calc(var(--spacing) * 4.5);
1096
657
  }
1097
- .py-4\.5 {
1098
- padding-top: 1.125rem;
1099
- padding-bottom: 1.125rem;
658
+ .ory-elements .py-8 {
659
+ padding-block: calc(var(--spacing) * 8);
1100
660
  }
1101
- .py-8 {
1102
- padding-top: 2rem;
1103
- padding-bottom: 2rem;
661
+ .ory-elements .py-12 {
662
+ padding-block: calc(var(--spacing) * 12);
1104
663
  }
1105
- .py-\[13px\] {
1106
- padding-top: 13px;
1107
- padding-bottom: 13px;
664
+ .ory-elements .py-\[5px\] {
665
+ padding-block: 5px;
1108
666
  }
1109
- .py-\[15px\] {
1110
- padding-top: 15px;
1111
- padding-bottom: 15px;
667
+ .ory-elements .py-\[13px\] {
668
+ padding-block: 13px;
1112
669
  }
1113
- .py-\[5px\] {
1114
- padding-top: 5px;
1115
- padding-bottom: 5px;
670
+ .ory-elements .py-\[15px\] {
671
+ padding-block: 15px;
1116
672
  }
1117
- .pl-8 {
1118
- padding-left: 2rem;
673
+ .ory-elements .pb-12 {
674
+ padding-bottom: calc(var(--spacing) * 12);
1119
675
  }
1120
- .text-left {
1121
- text-align: left;
676
+ .ory-elements .pl-8 {
677
+ padding-left: calc(var(--spacing) * 8);
1122
678
  }
1123
- .text-center {
679
+ .ory-elements .text-center {
1124
680
  text-align: center;
1125
681
  }
1126
- .font-sans {
1127
- font-family: var(--font-sans);
682
+ .ory-elements .text-left {
683
+ text-align: left;
1128
684
  }
1129
- .text-lg {
1130
- font-size: 1.125rem;
1131
- line-height: 1.75rem;
685
+ .ory-elements .font-sans-default {
686
+ font-family: var(--font-sans-default);
1132
687
  }
1133
- .text-sm {
1134
- font-size: 0.875rem;
1135
- line-height: 1.25rem;
688
+ .ory-elements .text-lg {
689
+ font-size: var(--text-lg);
690
+ line-height: var(--tw-leading, var(--text-lg--line-height));
1136
691
  }
1137
- .text-xl {
1138
- font-size: 1.25rem;
1139
- line-height: 1.75rem;
692
+ .ory-elements .text-sm {
693
+ font-size: var(--text-sm);
694
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1140
695
  }
1141
- .text-xs {
1142
- font-size: 0.75rem;
1143
- line-height: 1rem;
696
+ .ory-elements .text-xl {
697
+ font-size: var(--text-xl);
698
+ line-height: var(--tw-leading, var(--text-xl--line-height));
1144
699
  }
1145
- .font-bold {
1146
- font-weight: 700;
700
+ .ory-elements .text-xs {
701
+ font-size: var(--text-xs);
702
+ line-height: var(--tw-leading, var(--text-xs--line-height));
1147
703
  }
1148
- .font-medium {
1149
- font-weight: 500;
704
+ .ory-elements .leading-none {
705
+ --tw-leading: 1;
706
+ line-height: 1;
1150
707
  }
1151
- .font-normal {
1152
- font-weight: 400;
708
+ .ory-elements .leading-normal {
709
+ --tw-leading: var(--leading-normal);
710
+ line-height: var(--leading-normal);
1153
711
  }
1154
- .font-semibold {
1155
- font-weight: 600;
712
+ .ory-elements .leading-tight {
713
+ --tw-leading: var(--leading-tight);
714
+ line-height: var(--leading-tight);
1156
715
  }
1157
- .leading-none {
1158
- line-height: 1;
716
+ .ory-elements .font-bold {
717
+ --tw-font-weight: var(--font-weight-bold);
718
+ font-weight: var(--font-weight-bold);
1159
719
  }
1160
- .leading-normal {
1161
- line-height: 1.5;
720
+ .ory-elements .font-medium {
721
+ --tw-font-weight: var(--font-weight-medium);
722
+ font-weight: var(--font-weight-medium);
723
+ }
724
+ .ory-elements .font-normal {
725
+ --tw-font-weight: var(--font-weight-normal);
726
+ font-weight: var(--font-weight-normal);
727
+ }
728
+ .ory-elements .font-semibold {
729
+ --tw-font-weight: var(--font-weight-semibold);
730
+ font-weight: var(--font-weight-semibold);
731
+ }
732
+ .ory-elements .text-nowrap {
733
+ text-wrap: nowrap;
734
+ }
735
+ .ory-elements .break-words {
736
+ overflow-wrap: break-word;
737
+ }
738
+ .ory-elements .text-ellipsis {
739
+ text-overflow: ellipsis;
1162
740
  }
1163
- .leading-tight {
1164
- line-height: 1.25;
741
+ .ory-elements .text-button-identifier-foreground-default {
742
+ color: var(--color-button-identifier-foreground-default);
1165
743
  }
1166
- .text-button-identifier-foreground-default {
1167
- color: var(--button-identifier-foreground-default);
744
+ .ory-elements .text-button-link-brand-brand {
745
+ color: var(--color-button-link-brand-brand);
1168
746
  }
1169
- .text-button-link-brand-brand {
1170
- color: var(--button-link-brand-brand);
747
+ .ory-elements .text-button-link-default-primary {
748
+ color: var(--color-button-link-default-primary);
1171
749
  }
1172
- .text-button-link-default-primary {
1173
- color: var(--button-link-default-primary);
750
+ .ory-elements .text-button-link-default-secondary {
751
+ color: var(--color-button-link-default-secondary);
1174
752
  }
1175
- .text-button-link-default-secondary {
1176
- color: var(--button-link-default-secondary);
753
+ .ory-elements .text-button-primary-foreground-default {
754
+ color: var(--color-button-primary-foreground-default);
1177
755
  }
1178
- .text-button-primary-foreground-default {
1179
- color: var(--button-primary-foreground-default);
756
+ .ory-elements .text-button-secondary-foreground-default {
757
+ color: var(--color-button-secondary-foreground-default);
1180
758
  }
1181
- .text-button-secondary-foreground-default {
1182
- color: var(--button-secondary-foreground-default);
759
+ .ory-elements .text-button-social-foreground-default {
760
+ color: var(--color-button-social-foreground-default);
1183
761
  }
1184
- .text-button-social-foreground-default {
1185
- color: var(--button-social-foreground-default);
762
+ .ory-elements .text-button-social-foreground-generic-provider {
763
+ color: var(--color-button-social-foreground-generic-provider);
1186
764
  }
1187
- .text-button-social-foreground-generic-provider {
1188
- color: var(--button-social-foreground-generic-provider);
765
+ .ory-elements .text-input-foreground-primary {
766
+ color: var(--color-input-foreground-primary);
1189
767
  }
1190
- .text-input-foreground-primary {
1191
- color: var(--input-foreground-primary);
768
+ .ory-elements .text-interface-foreground-brand-primary {
769
+ color: var(--color-interface-foreground-brand-primary);
1192
770
  }
1193
- .text-interface-foreground-brand-primary {
1194
- color: var(--interface-foreground-brand-primary);
771
+ .ory-elements .text-interface-foreground-default-inverted {
772
+ color: var(--color-interface-foreground-default-inverted);
1195
773
  }
1196
- .text-interface-foreground-default-inverted {
1197
- color: var(--interface-foreground-default-inverted);
774
+ .ory-elements .text-interface-foreground-default-primary {
775
+ color: var(--color-interface-foreground-default-primary);
1198
776
  }
1199
- .text-interface-foreground-default-primary {
1200
- color: var(--interface-foreground-default-primary);
777
+ .ory-elements .text-interface-foreground-default-secondary {
778
+ color: var(--color-interface-foreground-default-secondary);
1201
779
  }
1202
- .text-interface-foreground-default-secondary {
1203
- color: var(--interface-foreground-default-secondary);
780
+ .ory-elements .text-interface-foreground-default-tertiary {
781
+ color: var(--color-interface-foreground-default-tertiary);
1204
782
  }
1205
- .text-interface-foreground-default-tertiary {
1206
- color: var(--interface-foreground-default-tertiary);
783
+ .ory-elements .text-interface-foreground-validation-danger {
784
+ color: var(--color-interface-foreground-validation-danger);
1207
785
  }
1208
- .text-interface-foreground-validation-danger {
1209
- color: var(--interface-foreground-validation-danger);
786
+ .ory-elements .text-interface-foreground-validation-success {
787
+ color: var(--color-interface-foreground-validation-success);
1210
788
  }
1211
- .text-interface-foreground-validation-success {
1212
- color: var(--interface-foreground-validation-success);
789
+ .ory-elements .text-interface-foreground-validation-warning {
790
+ color: var(--color-interface-foreground-validation-warning);
1213
791
  }
1214
- .text-interface-foreground-validation-warning {
1215
- color: var(--interface-foreground-validation-warning);
792
+ .ory-elements .text-ory-foreground-default {
793
+ color: var(--color-ory-foreground-default);
1216
794
  }
1217
- .text-ory-foreground-default {
1218
- color: var(--ory-foreground-default);
795
+ .ory-elements .capitalize {
796
+ text-transform: capitalize;
1219
797
  }
1220
- .underline {
798
+ .ory-elements .underline {
1221
799
  text-decoration-line: underline;
1222
800
  }
1223
- .antialiased {
801
+ .ory-elements .antialiased {
1224
802
  -webkit-font-smoothing: antialiased;
1225
803
  -moz-osx-font-smoothing: grayscale;
1226
804
  }
1227
- .mix-blend-multiply {
805
+ .ory-elements .mix-blend-multiply {
1228
806
  mix-blend-mode: multiply;
1229
807
  }
1230
- .outline-none {
1231
- outline: 2px solid transparent;
1232
- outline-offset: 2px;
1233
- }
1234
- .ring-1 {
1235
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1236
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
808
+ .ory-elements .ring-1 {
809
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1237
810
  box-shadow:
811
+ var(--tw-inset-shadow),
812
+ var(--tw-inset-ring-shadow),
1238
813
  var(--tw-ring-offset-shadow),
1239
814
  var(--tw-ring-shadow),
1240
- var(--tw-shadow, 0 0 #0000);
815
+ var(--tw-shadow);
1241
816
  }
1242
- .ring-inset {
1243
- --tw-ring-inset: inset;
817
+ .ory-elements .ring-button-primary-border-default {
818
+ --tw-ring-color: var(--color-button-primary-border-default);
1244
819
  }
1245
- .ring-button-primary-border-default {
1246
- --tw-ring-color: var(--button-primary-border-default);
820
+ .ory-elements .ring-button-secondary-border-default {
821
+ --tw-ring-color: var(--color-button-secondary-border-default);
1247
822
  }
1248
- .ring-button-secondary-border-default {
1249
- --tw-ring-color: var(--button-secondary-border-default);
823
+ .ory-elements .outline-hidden {
824
+ --tw-outline-style: none;
825
+ outline-style: none;
826
+ @media (forced-colors: active) {
827
+ outline: 2px solid transparent;
828
+ outline-offset: 2px;
829
+ }
1250
830
  }
1251
- .filter {
1252
- filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
831
+ .ory-elements .filter {
832
+ filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
1253
833
  }
1254
- .transition {
1255
- transition-property:
1256
- color,
1257
- background-color,
1258
- border-color,
1259
- text-decoration-color,
1260
- fill,
1261
- stroke,
1262
- opacity,
1263
- box-shadow,
1264
- transform,
1265
- filter,
1266
- -webkit-backdrop-filter;
1267
- transition-property:
1268
- color,
1269
- background-color,
1270
- border-color,
1271
- text-decoration-color,
1272
- fill,
1273
- stroke,
1274
- opacity,
1275
- box-shadow,
1276
- transform,
1277
- filter,
1278
- backdrop-filter;
834
+ .ory-elements .transition {
1279
835
  transition-property:
1280
836
  color,
1281
837
  background-color,
1282
838
  border-color,
839
+ outline-color,
1283
840
  text-decoration-color,
1284
841
  fill,
1285
842
  stroke,
843
+ --tw-gradient-from,
844
+ --tw-gradient-via,
845
+ --tw-gradient-to,
1286
846
  opacity,
1287
847
  box-shadow,
1288
848
  transform,
849
+ translate,
850
+ scale,
851
+ rotate,
1289
852
  filter,
853
+ -webkit-backdrop-filter,
1290
854
  backdrop-filter,
1291
- -webkit-backdrop-filter;
1292
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1293
- transition-duration: 150ms;
1294
- }
1295
- .transition-all {
855
+ display,
856
+ visibility,
857
+ content-visibility,
858
+ overlay,
859
+ pointer-events;
860
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
861
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
862
+ }
863
+ .ory-elements .transition-all {
1296
864
  transition-property: all;
1297
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1298
- transition-duration: 150ms;
865
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
866
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
1299
867
  }
1300
- .transition-colors {
868
+ .ory-elements .transition-colors {
1301
869
  transition-property:
1302
870
  color,
1303
871
  background-color,
1304
872
  border-color,
873
+ outline-color,
1305
874
  text-decoration-color,
1306
875
  fill,
1307
- stroke;
1308
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1309
- transition-duration: 150ms;
1310
- }
1311
- .duration-100 {
876
+ stroke,
877
+ --tw-gradient-from,
878
+ --tw-gradient-via,
879
+ --tw-gradient-to;
880
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
881
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
882
+ }
883
+ .ory-elements .duration-100 {
884
+ --tw-duration: 100ms;
1312
885
  transition-duration: 100ms;
1313
886
  }
1314
- .duration-700 {
887
+ .ory-elements .duration-700 {
888
+ --tw-duration: 700ms;
1315
889
  transition-duration: 700ms;
1316
890
  }
1317
- .ease-linear {
891
+ .ory-elements .ease-linear {
892
+ --tw-ease: linear;
1318
893
  transition-timing-function: linear;
1319
894
  }
1320
- @keyframes enter {
1321
- from {
1322
- opacity: var(--tw-enter-opacity, 1);
1323
- transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
1324
- }
1325
- }
1326
- @keyframes exit {
1327
- to {
1328
- opacity: var(--tw-exit-opacity, 1);
1329
- transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
1330
- }
1331
- }
1332
- .duration-100 {
1333
- animation-duration: 100ms;
1334
- }
1335
- .duration-700 {
1336
- animation-duration: 700ms;
1337
- }
1338
- .ease-linear {
1339
- animation-timing-function: linear;
1340
- }
1341
- .running {
1342
- animation-play-state: running;
1343
- }
1344
- .placeholder\:h-\[20px\]::-moz-placeholder {
1345
- height: 20px;
1346
- }
1347
- .placeholder\:h-\[20px\]::placeholder {
1348
- height: 20px;
1349
- }
1350
- .placeholder\:text-input-foreground-tertiary::-moz-placeholder {
1351
- color: var(--input-foreground-tertiary);
1352
- }
1353
- .placeholder\:text-input-foreground-tertiary::placeholder {
1354
- color: var(--input-foreground-tertiary);
1355
- }
1356
- .first\:border-0:first-child {
1357
- border-width: 0px;
1358
- }
1359
- .checked\:border-checkbox-border-checkbox-border-checked:checked {
1360
- border-color: var(--checkbox-border-checkbox-border-checked);
1361
- }
1362
- .checked\:bg-checkbox-background-checked:checked {
1363
- background-color: var(--checkbox-background-checked);
1364
- }
1365
- .hover\:border-button-identifier-border-border-hover:hover {
1366
- border-color: var(--button-identifier-border-border-hover);
1367
- }
1368
- .hover\:border-button-social-border-hover:hover {
1369
- border-color: var(--button-social-border-hover);
1370
- }
1371
- .hover\:border-input-border-hover:hover {
1372
- border-color: var(--input-border-hover);
1373
- }
1374
- .hover\:bg-button-identifier-background-hover:hover {
1375
- background-color: var(--button-identifier-background-hover);
1376
- }
1377
- .hover\:bg-button-primary-background-hover:hover {
1378
- background-color: var(--button-primary-background-hover);
1379
- }
1380
- .hover\:bg-button-secondary-background-hover:hover {
1381
- background-color: var(--button-secondary-background-hover);
1382
- }
1383
- .hover\:bg-button-social-background-hover:hover {
1384
- background-color: var(--button-social-background-hover);
1385
- }
1386
- .hover\:bg-input-background-hover:hover {
1387
- background-color: var(--input-background-hover);
1388
- }
1389
- .hover\:bg-interface-background-default-primary-hover:hover {
1390
- background-color: var(--interface-background-default-primary-hover);
1391
- }
1392
- .hover\:text-button-link-brand-brand-hover:hover {
1393
- color: var(--button-link-brand-brand-hover);
895
+ .ory-elements .will-change-\[opacity\,transform\] {
896
+ will-change: opacity, transform;
1394
897
  }
1395
- .hover\:text-button-link-default-primary-hover:hover {
1396
- color: var(--button-link-default-primary-hover);
1397
- }
1398
- .hover\:text-button-link-default-secondary-hover:hover {
1399
- color: var(--button-link-default-secondary-hover);
1400
- }
1401
- .hover\:text-button-primary-foreground-hover:hover {
1402
- color: var(--button-primary-foreground-hover);
1403
- }
1404
- .hover\:text-button-secondary-foreground-hover:hover {
1405
- color: var(--button-secondary-foreground-hover);
1406
- }
1407
- .hover\:text-button-social-foreground-hover:hover {
1408
- color: var(--button-social-foreground-hover);
1409
- }
1410
- .hover\:ring-button-primary-border-hover:hover {
1411
- --tw-ring-color: var(--button-primary-border-hover);
1412
- }
1413
- .hover\:ring-button-secondary-border-hover:hover {
1414
- --tw-ring-color: var(--button-secondary-border-hover);
1415
- }
1416
- .focus\:border-input-border-focus:focus {
1417
- border-color: var(--input-border-focus);
1418
- }
1419
- .focus\:ring-0:focus {
1420
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1421
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1422
- box-shadow:
1423
- var(--tw-ring-offset-shadow),
1424
- var(--tw-ring-shadow),
1425
- var(--tw-shadow, 0 0 #0000);
1426
- }
1427
- .focus-visible\:border-input-border-focus:focus-visible {
1428
- border-color: var(--input-border-focus);
898
+ .ory-elements .select-none {
899
+ -webkit-user-select: none;
900
+ user-select: none;
1429
901
  }
1430
- .focus-visible\:outline-none:focus-visible {
1431
- outline: 2px solid transparent;
1432
- outline-offset: 2px;
902
+ .ory-elements .ring-inset {
903
+ --tw-ring-inset: inset;
1433
904
  }
1434
- .disabled\:cursor-default:disabled {
1435
- cursor: default;
905
+ .ory-elements .group-hover\:text-button-identifier-foreground-hover {
906
+ &:is(:where(.group):hover *) {
907
+ @media (hover: hover) {
908
+ color: var(--color-button-identifier-foreground-hover);
909
+ }
910
+ }
1436
911
  }
1437
- .disabled\:cursor-not-allowed:disabled {
1438
- cursor: not-allowed;
912
+ .ory-elements .peer-checked\:block {
913
+ &:is(:where(.peer):checked ~ *) {
914
+ display: block;
915
+ }
1439
916
  }
1440
- .disabled\:border-input-border-disabled:disabled {
1441
- border-color: var(--input-border-disabled);
917
+ .ory-elements .placeholder\:h-\[20px\] {
918
+ &::placeholder {
919
+ height: 20px;
920
+ }
1442
921
  }
1443
- .disabled\:bg-button-primary-background-disabled:disabled {
1444
- background-color: var(--button-primary-background-disabled);
922
+ .ory-elements .placeholder\:text-input-foreground-tertiary {
923
+ &::placeholder {
924
+ color: var(--color-input-foreground-tertiary);
925
+ }
1445
926
  }
1446
- .disabled\:bg-button-secondary-background-disabled:disabled {
1447
- background-color: var(--button-secondary-background-disabled);
927
+ .ory-elements .first\:border-0 {
928
+ &:first-child {
929
+ border-style: var(--tw-border-style);
930
+ border-width: 0px;
931
+ }
1448
932
  }
1449
- .disabled\:bg-input-background-disabled:disabled {
1450
- background-color: var(--input-background-disabled);
933
+ .ory-elements .checked\:border-checkbox-border-checkbox-border-checked {
934
+ &:checked {
935
+ border-color: var(--color-checkbox-border-checkbox-border-checked);
936
+ }
1451
937
  }
1452
- .disabled\:text-button-primary-foreground-disabled:disabled {
1453
- color: var(--button-primary-foreground-disabled);
938
+ .ory-elements .checked\:bg-checkbox-background-checked {
939
+ &:checked {
940
+ background-color: var(--color-checkbox-background-checked);
941
+ }
1454
942
  }
1455
- .disabled\:text-button-secondary-foreground-disabled:disabled {
1456
- color: var(--button-secondary-foreground-disabled);
943
+ .ory-elements .hover\:border-button-identifier-border-border-hover {
944
+ &:hover {
945
+ @media (hover: hover) {
946
+ border-color: var(--color-button-identifier-border-border-hover);
947
+ }
948
+ }
1457
949
  }
1458
- .disabled\:text-input-foreground-disabled:disabled {
1459
- color: var(--input-foreground-disabled);
950
+ .ory-elements .hover\:border-button-social-border-hover {
951
+ &:hover {
952
+ @media (hover: hover) {
953
+ border-color: var(--color-button-social-border-hover);
954
+ }
955
+ }
1460
956
  }
1461
- .disabled\:opacity-50:disabled {
1462
- opacity: 0.5;
957
+ .ory-elements .hover\:border-input-border-hover {
958
+ &:hover {
959
+ @media (hover: hover) {
960
+ border-color: var(--color-input-border-hover);
961
+ }
962
+ }
1463
963
  }
1464
- .disabled\:ring-button-primary-border-disabled:disabled {
1465
- --tw-ring-color: var(--button-primary-border-disabled);
964
+ .ory-elements .hover\:bg-button-identifier-background-hover {
965
+ &:hover {
966
+ @media (hover: hover) {
967
+ background-color: var(--color-button-identifier-background-hover);
968
+ }
969
+ }
1466
970
  }
1467
- .disabled\:ring-button-secondary-border-disabled:disabled {
1468
- --tw-ring-color: var(--button-secondary-border-disabled);
971
+ .ory-elements .hover\:bg-button-primary-background-hover {
972
+ &:hover {
973
+ @media (hover: hover) {
974
+ background-color: var(--color-button-primary-background-hover);
975
+ }
976
+ }
1469
977
  }
1470
- .disabled\:hover\:bg-ui-transparent:hover:disabled {
1471
- background-color: var(--ui-transparent);
978
+ .ory-elements .hover\:bg-button-secondary-background-hover {
979
+ &:hover {
980
+ @media (hover: hover) {
981
+ background-color: var(--color-button-secondary-background-hover);
982
+ }
983
+ }
1472
984
  }
1473
- .group:hover .group-hover\:text-button-identifier-foreground-hover {
1474
- color: var(--button-identifier-foreground-hover);
985
+ .ory-elements .hover\:bg-button-social-background-hover {
986
+ &:hover {
987
+ @media (hover: hover) {
988
+ background-color: var(--color-button-social-background-hover);
989
+ }
990
+ }
1475
991
  }
1476
- .peer:checked ~ .peer-checked\:block {
1477
- display: block;
992
+ .ory-elements .hover\:bg-input-background-hover {
993
+ &:hover {
994
+ @media (hover: hover) {
995
+ background-color: var(--color-input-background-hover);
996
+ }
997
+ }
1478
998
  }
1479
- .has-\[\:disabled\]\:opacity-50:has(:disabled) {
1480
- opacity: 0.5;
999
+ .ory-elements .hover\:bg-interface-background-default-primary-hover {
1000
+ &:hover {
1001
+ @media (hover: hover) {
1002
+ background-color: var(--color-interface-background-default-primary-hover);
1003
+ }
1004
+ }
1481
1005
  }
1482
- .data-\[disabled\]\:pointer-events-none[data-disabled] {
1483
- pointer-events: none;
1006
+ .ory-elements .hover\:text-button-link-brand-brand-hover {
1007
+ &:hover {
1008
+ @media (hover: hover) {
1009
+ color: var(--color-button-link-brand-brand-hover);
1010
+ }
1011
+ }
1484
1012
  }
1485
- .data-\[state\=checked\]\:translate-x-3[data-state=checked] {
1486
- --tw-translate-x: 0.75rem;
1487
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1013
+ .ory-elements .hover\:text-button-link-default-primary-hover {
1014
+ &:hover {
1015
+ @media (hover: hover) {
1016
+ color: var(--color-button-link-default-primary-hover);
1017
+ }
1018
+ }
1488
1019
  }
1489
- .data-\[state\=checked\]\:border-toggle-border-checked[data-state=checked] {
1490
- border-color: var(--toggle-border-checked);
1020
+ .ory-elements .hover\:text-button-link-default-secondary-hover {
1021
+ &:hover {
1022
+ @media (hover: hover) {
1023
+ color: var(--color-button-link-default-secondary-hover);
1024
+ }
1025
+ }
1491
1026
  }
1492
- .data-\[disabled\]\:bg-button-secondary-background-disabled[data-disabled] {
1493
- background-color: var(--button-secondary-background-disabled);
1027
+ .ory-elements .hover\:text-button-primary-foreground-hover {
1028
+ &:hover {
1029
+ @media (hover: hover) {
1030
+ color: var(--color-button-primary-foreground-hover);
1031
+ }
1032
+ }
1494
1033
  }
1495
- .data-\[state\=checked\]\:bg-toggle-background-checked[data-state=checked] {
1496
- background-color: var(--toggle-background-checked);
1034
+ .ory-elements .hover\:text-button-secondary-foreground-hover {
1035
+ &:hover {
1036
+ @media (hover: hover) {
1037
+ color: var(--color-button-secondary-foreground-hover);
1038
+ }
1039
+ }
1497
1040
  }
1498
- .data-\[state\=checked\]\:bg-toggle-foreground-checked[data-state=checked] {
1499
- background-color: var(--toggle-foreground-checked);
1041
+ .ory-elements .hover\:text-button-social-foreground-hover {
1042
+ &:hover {
1043
+ @media (hover: hover) {
1044
+ color: var(--color-button-social-foreground-hover);
1045
+ }
1046
+ }
1500
1047
  }
1501
- .data-\[disabled\]\:text-button-secondary-foreground-disabled[data-disabled] {
1502
- color: var(--button-secondary-foreground-disabled);
1048
+ .ory-elements .hover\:ring-button-primary-border-hover {
1049
+ &:hover {
1050
+ @media (hover: hover) {
1051
+ --tw-ring-color: var(--color-button-primary-border-hover);
1052
+ }
1053
+ }
1503
1054
  }
1504
- .data-\[state\=open\]\:animate-in[data-state=open] {
1505
- animation-name: enter;
1506
- animation-duration: 150ms;
1507
- --tw-enter-opacity: initial;
1508
- --tw-enter-scale: initial;
1509
- --tw-enter-rotate: initial;
1510
- --tw-enter-translate-x: initial;
1511
- --tw-enter-translate-y: initial;
1055
+ .ory-elements .hover\:ring-button-secondary-border-hover {
1056
+ &:hover {
1057
+ @media (hover: hover) {
1058
+ --tw-ring-color: var(--color-button-secondary-border-hover);
1059
+ }
1060
+ }
1512
1061
  }
1513
- .data-\[state\=closed\]\:animate-out[data-state=closed] {
1514
- animation-name: exit;
1515
- animation-duration: 150ms;
1516
- --tw-exit-opacity: initial;
1517
- --tw-exit-scale: initial;
1518
- --tw-exit-rotate: initial;
1519
- --tw-exit-translate-x: initial;
1520
- --tw-exit-translate-y: initial;
1062
+ .ory-elements .focus\:border-input-border-focus {
1063
+ &:focus {
1064
+ border-color: var(--color-input-border-focus);
1065
+ }
1521
1066
  }
1522
- .data-\[state\=closed\]\:fade-out-0[data-state=closed] {
1523
- --tw-exit-opacity: 0;
1067
+ .ory-elements .focus\:ring-0 {
1068
+ &:focus {
1069
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1070
+ box-shadow:
1071
+ var(--tw-inset-shadow),
1072
+ var(--tw-inset-ring-shadow),
1073
+ var(--tw-ring-offset-shadow),
1074
+ var(--tw-ring-shadow),
1075
+ var(--tw-shadow);
1076
+ }
1524
1077
  }
1525
- .data-\[state\=open\]\:fade-in-0[data-state=open] {
1526
- --tw-enter-opacity: 0;
1078
+ .ory-elements .focus-visible\:border-input-border-focus {
1079
+ &:focus-visible {
1080
+ border-color: var(--color-input-border-focus);
1081
+ }
1527
1082
  }
1528
- .data-\[state\=closed\]\:zoom-out-95[data-state=closed] {
1529
- --tw-exit-scale: .95;
1083
+ .ory-elements .focus-visible\:outline-hidden {
1084
+ &:focus-visible {
1085
+ --tw-outline-style: none;
1086
+ outline-style: none;
1087
+ @media (forced-colors: active) {
1088
+ outline: 2px solid transparent;
1089
+ outline-offset: 2px;
1090
+ }
1091
+ }
1530
1092
  }
1531
- .data-\[state\=open\]\:zoom-in-95[data-state=open] {
1532
- --tw-enter-scale: .95;
1093
+ .ory-elements .disabled\:cursor-default {
1094
+ &:disabled {
1095
+ cursor: default;
1096
+ }
1533
1097
  }
1534
- .data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom] {
1535
- --tw-enter-translate-y: -0.5rem;
1098
+ .ory-elements .disabled\:cursor-not-allowed {
1099
+ &:disabled {
1100
+ cursor: not-allowed;
1101
+ }
1536
1102
  }
1537
- .data-\[side\=left\]\:slide-in-from-right-2[data-side=left] {
1538
- --tw-enter-translate-x: 0.5rem;
1103
+ .ory-elements .disabled\:border-input-border-disabled {
1104
+ &:disabled {
1105
+ border-color: var(--color-input-border-disabled);
1106
+ }
1539
1107
  }
1540
- .data-\[side\=right\]\:slide-in-from-left-2[data-side=right] {
1541
- --tw-enter-translate-x: -0.5rem;
1108
+ .ory-elements .disabled\:bg-button-primary-background-disabled {
1109
+ &:disabled {
1110
+ background-color: var(--color-button-primary-background-disabled);
1111
+ }
1542
1112
  }
1543
- .data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top] {
1544
- --tw-enter-translate-y: 0.5rem;
1113
+ .ory-elements .disabled\:bg-button-secondary-background-disabled {
1114
+ &:disabled {
1115
+ background-color: var(--color-button-secondary-background-disabled);
1116
+ }
1545
1117
  }
1546
- .loading\:cursor-wait[data-loading=true] {
1547
- cursor: wait;
1118
+ .ory-elements .disabled\:bg-input-background-disabled {
1119
+ &:disabled {
1120
+ background-color: var(--color-input-background-disabled);
1121
+ }
1548
1122
  }
1549
- .loading\:border-button-social-border-disabled[data-loading=true] {
1550
- border-color: var(--button-social-border-disabled);
1123
+ .ory-elements .disabled\:text-button-primary-foreground-disabled {
1124
+ &:disabled {
1125
+ color: var(--color-button-primary-foreground-disabled);
1126
+ }
1551
1127
  }
1552
- .loading\:bg-button-primary-background-default[data-loading=true] {
1553
- background-color: var(--button-primary-background-default);
1128
+ .ory-elements .disabled\:text-button-secondary-foreground-disabled {
1129
+ &:disabled {
1130
+ color: var(--color-button-secondary-foreground-disabled);
1131
+ }
1554
1132
  }
1555
- .loading\:bg-button-secondary-background-default[data-loading=true] {
1556
- background-color: var(--button-secondary-background-default);
1133
+ .ory-elements .disabled\:text-input-foreground-disabled {
1134
+ &:disabled {
1135
+ color: var(--color-input-foreground-disabled);
1136
+ }
1557
1137
  }
1558
- .loading\:bg-button-social-background-disabled[data-loading=true] {
1559
- background-color: var(--button-social-background-disabled);
1138
+ .ory-elements .disabled\:opacity-50 {
1139
+ &:disabled {
1140
+ opacity: 50%;
1141
+ }
1560
1142
  }
1561
- .loading\:text-button-primary-foreground-default[data-loading=true] {
1562
- color: var(--button-primary-foreground-default);
1143
+ .ory-elements .disabled\:ring-button-primary-border-disabled {
1144
+ &:disabled {
1145
+ --tw-ring-color: var(--color-button-primary-border-disabled);
1146
+ }
1563
1147
  }
1564
- .loading\:text-button-secondary-foreground-default[data-loading=true] {
1565
- color: var(--button-secondary-foreground-default);
1148
+ .ory-elements .disabled\:ring-button-secondary-border-disabled {
1149
+ &:disabled {
1150
+ --tw-ring-color: var(--color-button-secondary-border-disabled);
1151
+ }
1566
1152
  }
1567
- .loading\:text-button-social-foreground-disabled[data-loading=true] {
1568
- color: var(--button-social-foreground-disabled);
1153
+ .ory-elements .disabled\:hover\:bg-ui-transparent {
1154
+ &:disabled {
1155
+ &:hover {
1156
+ @media (hover: hover) {
1157
+ background-color: var(--color-ui-transparent);
1158
+ }
1159
+ }
1160
+ }
1569
1161
  }
1570
- .loading\:ring-button-primary-border-default[data-loading=true] {
1571
- --tw-ring-color: var(--button-primary-border-default);
1162
+ .ory-elements .has-disabled\:opacity-50 {
1163
+ &:has(*:disabled) {
1164
+ opacity: 50%;
1165
+ }
1572
1166
  }
1573
- .loading\:ring-button-secondary-border-default[data-loading=true] {
1574
- --tw-ring-color: var(--button-secondary-border-default);
1167
+ .ory-elements .data-disabled\:pointer-events-none {
1168
+ &[data-disabled] {
1169
+ pointer-events: none;
1170
+ }
1575
1171
  }
1576
- .loading\:before\:pointer-events-none[data-loading=true]::before {
1577
- content: var(--tw-content);
1578
- pointer-events: none;
1172
+ .ory-elements .data-\[disabled\]\:bg-button-secondary-background-disabled {
1173
+ &[data-disabled] {
1174
+ background-color: var(--color-button-secondary-background-disabled);
1175
+ }
1579
1176
  }
1580
- .loading\:before\:absolute[data-loading=true]::before {
1581
- content: var(--tw-content);
1582
- position: absolute;
1177
+ .ory-elements .data-\[disabled\]\:text-button-secondary-foreground-disabled {
1178
+ &[data-disabled] {
1179
+ color: var(--color-button-secondary-foreground-disabled);
1180
+ }
1583
1181
  }
1584
- .loading\:before\:inset-0[data-loading=true]::before {
1585
- content: var(--tw-content);
1586
- inset: 0px;
1182
+ .ory-elements .data-\[state\=checked\]\:translate-x-3 {
1183
+ &[data-state=checked] {
1184
+ --tw-translate-x: calc(var(--spacing) * 3);
1185
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1186
+ }
1587
1187
  }
1588
- .loading\:before\:bg-button-primary-background-default[data-loading=true]::before {
1589
- content: var(--tw-content);
1590
- background-color: var(--button-primary-background-default);
1188
+ .ory-elements .data-\[state\=checked\]\:border-toggle-border-checked {
1189
+ &[data-state=checked] {
1190
+ border-color: var(--color-toggle-border-checked);
1191
+ }
1591
1192
  }
1592
- .loading\:before\:bg-button-secondary-background-default[data-loading=true]::before {
1593
- content: var(--tw-content);
1594
- background-color: var(--button-secondary-background-default);
1193
+ .ory-elements .data-\[state\=checked\]\:bg-toggle-background-checked {
1194
+ &[data-state=checked] {
1195
+ background-color: var(--color-toggle-background-checked);
1196
+ }
1595
1197
  }
1596
- .loading\:before\:opacity-80[data-loading=true]::before {
1597
- content: var(--tw-content);
1598
- opacity: 0.8;
1198
+ .ory-elements .data-\[state\=checked\]\:bg-toggle-foreground-checked {
1199
+ &[data-state=checked] {
1200
+ background-color: var(--color-toggle-foreground-checked);
1201
+ }
1599
1202
  }
1600
- .loading\:before\:content-\[\'\'\][data-loading=true]::before {
1601
- --tw-content: "";
1602
- content: var(--tw-content);
1203
+ .ory-elements .data-\[state\=closed\]\:animate-drop-down-out {
1204
+ &[data-state=closed] {
1205
+ animation: var(--animate-drop-down-out);
1206
+ }
1603
1207
  }
1604
- @media not all and (min-width: 640px) {
1605
- .max-sm\:bottom-0 {
1606
- bottom: 0px;
1208
+ .ory-elements .max-sm\:bottom-0 {
1209
+ @media (width < 40rem) {
1210
+ bottom: calc(var(--spacing) * 0);
1607
1211
  }
1608
- .max-sm\:left-8 {
1609
- left: 2rem;
1212
+ }
1213
+ .ory-elements .max-sm\:left-8 {
1214
+ @media (width < 40rem) {
1215
+ left: calc(var(--spacing) * 8);
1610
1216
  }
1611
- .max-sm\:hidden {
1217
+ }
1218
+ .ory-elements .max-sm\:hidden {
1219
+ @media (width < 40rem) {
1612
1220
  display: none;
1613
1221
  }
1614
- .max-sm\:translate-y-full {
1222
+ }
1223
+ .ory-elements .max-sm\:translate-y-full {
1224
+ @media (width < 40rem) {
1615
1225
  --tw-translate-y: 100%;
1616
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1226
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1617
1227
  }
1618
- .max-sm\:rounded-b-branding {
1619
- border-bottom-right-radius: var(--border-radius-branding);
1620
- border-bottom-left-radius: var(--border-radius-branding);
1228
+ }
1229
+ .ory-elements .max-sm\:rounded-b-branding {
1230
+ @media (width < 40rem) {
1231
+ border-bottom-right-radius: var(--radius-branding);
1232
+ border-bottom-left-radius: var(--radius-branding);
1621
1233
  }
1622
- .max-sm\:py-\[7px\] {
1623
- padding-top: 7px;
1624
- padding-bottom: 7px;
1234
+ }
1235
+ .ory-elements .max-sm\:py-\[7px\] {
1236
+ @media (width < 40rem) {
1237
+ padding-block: 7px;
1625
1238
  }
1626
1239
  }
1627
- @media (min-width: 640px) {
1628
- .sm\:right-0 {
1629
- right: 0px;
1240
+ .ory-elements .sm\:top-8 {
1241
+ @media (width >= 40rem) {
1242
+ top: calc(var(--spacing) * 8);
1630
1243
  }
1631
- .sm\:top-8 {
1632
- top: 2rem;
1244
+ }
1245
+ .ory-elements .sm\:right-0 {
1246
+ @media (width >= 40rem) {
1247
+ right: calc(var(--spacing) * 0);
1633
1248
  }
1634
- .sm\:block {
1249
+ }
1250
+ .ory-elements .sm\:block {
1251
+ @media (width >= 40rem) {
1635
1252
  display: block;
1636
1253
  }
1637
- .sm\:hidden {
1254
+ }
1255
+ .ory-elements .sm\:hidden {
1256
+ @media (width >= 40rem) {
1638
1257
  display: none;
1639
1258
  }
1640
- .sm\:w-\[480px\] {
1259
+ }
1260
+ .ory-elements .sm\:w-\[480px\] {
1261
+ @media (width >= 40rem) {
1641
1262
  width: 480px;
1642
1263
  }
1643
- .sm\:max-w-\[480px\] {
1264
+ }
1265
+ .ory-elements .sm\:max-w-\[480px\] {
1266
+ @media (width >= 40rem) {
1644
1267
  max-width: 480px;
1645
1268
  }
1646
- .sm\:translate-x-full {
1269
+ }
1270
+ .ory-elements .sm\:translate-x-full {
1271
+ @media (width >= 40rem) {
1647
1272
  --tw-translate-x: 100%;
1648
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1273
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1649
1274
  }
1650
- .sm\:grid-cols-2 {
1275
+ }
1276
+ .ory-elements .sm\:grid-cols-2 {
1277
+ @media (width >= 40rem) {
1651
1278
  grid-template-columns: repeat(2, minmax(0, 1fr));
1652
1279
  }
1653
- .sm\:grid-cols-3 {
1280
+ }
1281
+ .ory-elements .sm\:grid-cols-3 {
1282
+ @media (width >= 40rem) {
1654
1283
  grid-template-columns: repeat(3, minmax(0, 1fr));
1655
1284
  }
1656
- .sm\:flex-row {
1285
+ }
1286
+ .ory-elements .sm\:flex-row {
1287
+ @media (width >= 40rem) {
1657
1288
  flex-direction: row;
1658
1289
  }
1659
- .sm\:items-end {
1660
- align-items: flex-end;
1661
- }
1662
- .sm\:items-center {
1290
+ }
1291
+ .ory-elements .sm\:items-center {
1292
+ @media (width >= 40rem) {
1663
1293
  align-items: center;
1664
1294
  }
1665
- .sm\:rounded-cards {
1666
- border-radius: var(--border-radius-cards);
1295
+ }
1296
+ .ory-elements .sm\:items-end {
1297
+ @media (width >= 40rem) {
1298
+ align-items: flex-end;
1299
+ }
1300
+ }
1301
+ .ory-elements .sm\:rounded-cards {
1302
+ @media (width >= 40rem) {
1303
+ border-radius: var(--radius-cards);
1667
1304
  }
1668
- .sm\:rounded-r-branding {
1669
- border-top-right-radius: var(--border-radius-branding);
1670
- border-bottom-right-radius: var(--border-radius-branding);
1305
+ }
1306
+ .ory-elements .sm\:rounded-r-branding {
1307
+ @media (width >= 40rem) {
1308
+ border-top-right-radius: var(--radius-branding);
1309
+ border-bottom-right-radius: var(--radius-branding);
1671
1310
  }
1672
- .sm\:border {
1311
+ }
1312
+ .ory-elements .sm\:border {
1313
+ @media (width >= 40rem) {
1314
+ border-style: var(--tw-border-style);
1673
1315
  border-width: 1px;
1674
1316
  }
1675
- .sm\:px-12 {
1676
- padding-left: 3rem;
1677
- padding-right: 3rem;
1317
+ }
1318
+ .ory-elements .sm\:px-12 {
1319
+ @media (width >= 40rem) {
1320
+ padding-inline: calc(var(--spacing) * 12);
1678
1321
  }
1679
- .sm\:py-14 {
1680
- padding-top: 3.5rem;
1681
- padding-bottom: 3.5rem;
1322
+ }
1323
+ .ory-elements .sm\:py-14 {
1324
+ @media (width >= 40rem) {
1325
+ padding-block: calc(var(--spacing) * 14);
1682
1326
  }
1683
- .sm\:pl-\[7px\] {
1327
+ }
1328
+ .ory-elements .sm\:pl-\[7px\] {
1329
+ @media (width >= 40rem) {
1684
1330
  padding-left: 7px;
1685
1331
  }
1686
1332
  }
1687
- @media (min-width: 768px) {
1688
- .md\:max-w-96 {
1689
- max-width: 24rem;
1333
+ .ory-elements .md\:max-w-96 {
1334
+ @media (width >= 48rem) {
1335
+ max-width: calc(var(--spacing) * 96);
1690
1336
  }
1691
- .md\:max-w-\[712px\] {
1337
+ }
1338
+ .ory-elements .md\:max-w-\[712px\] {
1339
+ @media (width >= 48rem) {
1692
1340
  max-width: 712px;
1693
1341
  }
1694
- .md\:grid-cols-2 {
1342
+ }
1343
+ .ory-elements .md\:grid-cols-2 {
1344
+ @media (width >= 48rem) {
1695
1345
  grid-template-columns: repeat(2, minmax(0, 1fr));
1696
1346
  }
1697
- .md\:grid-cols-3 {
1347
+ }
1348
+ .ory-elements .md\:grid-cols-3 {
1349
+ @media (width >= 48rem) {
1698
1350
  grid-template-columns: repeat(3, minmax(0, 1fr));
1699
1351
  }
1700
- .md\:grid-cols-5 {
1352
+ }
1353
+ .ory-elements .md\:grid-cols-5 {
1354
+ @media (width >= 48rem) {
1701
1355
  grid-template-columns: repeat(5, minmax(0, 1fr));
1702
1356
  }
1703
- .md\:flex-row {
1357
+ }
1358
+ .ory-elements .md\:flex-row {
1359
+ @media (width >= 48rem) {
1704
1360
  flex-direction: row;
1705
1361
  }
1706
- .md\:items-center {
1362
+ }
1363
+ .ory-elements .md\:items-center {
1364
+ @media (width >= 48rem) {
1707
1365
  align-items: center;
1708
1366
  }
1709
- .md\:justify-between {
1367
+ }
1368
+ .ory-elements .md\:justify-between {
1369
+ @media (width >= 48rem) {
1710
1370
  justify-content: space-between;
1711
1371
  }
1712
1372
  }
1713
- @media (min-width: 1024px) {
1714
- .lg\:max-w-\[802px\] {
1373
+ .ory-elements .lg\:max-w-\[802px\] {
1374
+ @media (width >= 64rem) {
1715
1375
  max-width: 802px;
1716
1376
  }
1717
- .lg\:py-4\.5 {
1718
- padding-top: 1.125rem;
1719
- padding-bottom: 1.125rem;
1377
+ }
1378
+ .ory-elements .lg\:py-4\.5 {
1379
+ @media (width >= 64rem) {
1380
+ padding-block: calc(var(--spacing) * 4.5);
1720
1381
  }
1721
1382
  }
1722
- @media (min-width: 1280px) {
1723
- .xl\:max-w-\[896px\] {
1383
+ .ory-elements .xl\:max-w-\[896px\] {
1384
+ @media (width >= 80rem) {
1724
1385
  max-width: 896px;
1725
1386
  }
1726
1387
  }
1388
+ .ory-elements .loading\:cursor-wait {
1389
+ &[data-loading=true] {
1390
+ cursor: wait;
1391
+ }
1392
+ }
1393
+ .ory-elements .loading\:border-button-social-border-disabled {
1394
+ &[data-loading=true] {
1395
+ border-color: var(--color-button-social-border-disabled);
1396
+ }
1397
+ }
1398
+ .ory-elements .loading\:bg-button-primary-background-default {
1399
+ &[data-loading=true] {
1400
+ background-color: var(--color-button-primary-background-default);
1401
+ }
1402
+ }
1403
+ .ory-elements .loading\:bg-button-secondary-background-default {
1404
+ &[data-loading=true] {
1405
+ background-color: var(--color-button-secondary-background-default);
1406
+ }
1407
+ }
1408
+ .ory-elements .loading\:bg-button-social-background-disabled {
1409
+ &[data-loading=true] {
1410
+ background-color: var(--color-button-social-background-disabled);
1411
+ }
1412
+ }
1413
+ .ory-elements .loading\:text-button-primary-foreground-default {
1414
+ &[data-loading=true] {
1415
+ color: var(--color-button-primary-foreground-default);
1416
+ }
1417
+ }
1418
+ .ory-elements .loading\:text-button-secondary-foreground-default {
1419
+ &[data-loading=true] {
1420
+ color: var(--color-button-secondary-foreground-default);
1421
+ }
1422
+ }
1423
+ .ory-elements .loading\:text-button-social-foreground-disabled {
1424
+ &[data-loading=true] {
1425
+ color: var(--color-button-social-foreground-disabled);
1426
+ }
1427
+ }
1428
+ .ory-elements .loading\:ring-button-primary-border-default {
1429
+ &[data-loading=true] {
1430
+ --tw-ring-color: var(--color-button-primary-border-default);
1431
+ }
1432
+ }
1433
+ .ory-elements .loading\:ring-button-secondary-border-default {
1434
+ &[data-loading=true] {
1435
+ --tw-ring-color: var(--color-button-secondary-border-default);
1436
+ }
1437
+ }
1438
+ .ory-elements .loading\:before\:pointer-events-none {
1439
+ &[data-loading=true] {
1440
+ &::before {
1441
+ content: var(--tw-content);
1442
+ pointer-events: none;
1443
+ }
1444
+ }
1445
+ }
1446
+ .ory-elements .loading\:before\:absolute {
1447
+ &[data-loading=true] {
1448
+ &::before {
1449
+ content: var(--tw-content);
1450
+ position: absolute;
1451
+ }
1452
+ }
1453
+ }
1454
+ .ory-elements .loading\:before\:inset-0 {
1455
+ &[data-loading=true] {
1456
+ &::before {
1457
+ content: var(--tw-content);
1458
+ inset: calc(var(--spacing) * 0);
1459
+ }
1460
+ }
1461
+ }
1462
+ .ory-elements .loading\:before\:bg-button-primary-background-default {
1463
+ &[data-loading=true] {
1464
+ &::before {
1465
+ content: var(--tw-content);
1466
+ background-color: var(--color-button-primary-background-default);
1467
+ }
1468
+ }
1469
+ }
1470
+ .ory-elements .loading\:before\:bg-button-secondary-background-default {
1471
+ &[data-loading=true] {
1472
+ &::before {
1473
+ content: var(--tw-content);
1474
+ background-color: var(--color-button-secondary-background-default);
1475
+ }
1476
+ }
1477
+ }
1478
+ .ory-elements .loading\:before\:opacity-80 {
1479
+ &[data-loading=true] {
1480
+ &::before {
1481
+ content: var(--tw-content);
1482
+ opacity: 80%;
1483
+ }
1484
+ }
1485
+ }
1486
+ .ory-elements .loading\:before\:content-\[\'\'\] {
1487
+ &[data-loading=true] {
1488
+ &::before {
1489
+ content: var(--tw-content);
1490
+ --tw-content: "";
1491
+ content: var(--tw-content);
1492
+ }
1493
+ }
1494
+ }
1495
+ .ory-elements,
1496
+ :host {
1497
+ --font-mono:
1498
+ ui-monospace,
1499
+ SFMono-Regular,
1500
+ Menlo,
1501
+ Monaco,
1502
+ Consolas,
1503
+ "Liberation Mono",
1504
+ "Courier New",
1505
+ monospace;
1506
+ --spacing: 0.25rem;
1507
+ --breakpoint-sm: 40rem;
1508
+ --text-xs: 0.75rem;
1509
+ --text-xs--line-height: calc(1 / 0.75);
1510
+ --text-sm: 0.875rem;
1511
+ --text-sm--line-height: calc(1.25 / 0.875);
1512
+ --text-lg: 1.125rem;
1513
+ --text-lg--line-height: calc(1.75 / 1.125);
1514
+ --text-xl: 1.25rem;
1515
+ --text-xl--line-height: calc(1.75 / 1.25);
1516
+ --font-weight-normal: 400;
1517
+ --font-weight-medium: 500;
1518
+ --font-weight-semibold: 600;
1519
+ --font-weight-bold: 700;
1520
+ --leading-tight: 1.25;
1521
+ --leading-normal: 1.5;
1522
+ --animate-spin: spin 1s linear infinite;
1523
+ --default-transition-duration: 150ms;
1524
+ --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1525
+ --default-mono-font-family: var(--font-mono);
1526
+ --ui-100: #f1f5f9;
1527
+ --ui-200: #e2e8f0;
1528
+ --ui-300: #cbd5e1;
1529
+ --ui-400: #94a3b8;
1530
+ --ui-50: #f8fafc;
1531
+ --ui-500: #64748b;
1532
+ --ui-600: #475569;
1533
+ --ui-700: #334155;
1534
+ --ui-800: #1e293b;
1535
+ --ui-900: #0f172a;
1536
+ --ui-950: #020617;
1537
+ --ui-black: #000000;
1538
+ --ui-danger: #dc2626;
1539
+ --ui-success: #22c55e;
1540
+ --ui-transparent: #ffffff00;
1541
+ --ui-warning: #eab308;
1542
+ --ui-white: #ffffff;
1543
+ --button-identifier-background-default: var( --interface-background-brand-secondary );
1544
+ --button-identifier-background-hover: var( --interface-background-brand-secondary-hover );
1545
+ --button-identifier-border-border-default: var( --interface-border-brand-brand );
1546
+ --button-identifier-border-border-hover: var(--interface-border-brand-brand);
1547
+ --button-identifier-foreground-default: var( --interface-foreground-brand-on-secondary );
1548
+ --button-identifier-foreground-hover: var( --interface-foreground-brand-on-secondary );
1549
+ --button-link-brand-brand: var(--interface-foreground-brand-primary);
1550
+ --button-link-brand-brand-hover: var(--interface-foreground-default-primary);
1551
+ --button-link-default-primary: var(--interface-foreground-default-primary);
1552
+ --button-link-default-primary-hover: var( --interface-foreground-brand-primary );
1553
+ --button-link-default-secondary: var( --interface-foreground-default-secondary );
1554
+ --button-link-default-secondary-hover: var( --interface-foreground-default-tertiary );
1555
+ --button-link-disabled-disabled: var( --interface-foreground-disabled-disabled );
1556
+ --button-primary-background-default: var( --interface-background-brand-primary );
1557
+ --button-primary-background-disabled: var( --interface-background-disabled-disabled );
1558
+ --button-primary-background-hover: var( --interface-background-brand-primary-hover );
1559
+ --button-primary-border-default: var(--interface-border-default-none);
1560
+ --button-primary-border-disabled: var(--interface-border-disabled-disabled);
1561
+ --button-primary-border-hover: var(--interface-border-default-none);
1562
+ --button-primary-foreground-default: var( --interface-foreground-brand-on-primary );
1563
+ --button-primary-foreground-disabled: var( --interface-foreground-disabled-on-disabled );
1564
+ --button-primary-foreground-hover: var( --interface-foreground-brand-on-primary );
1565
+ --button-secondary-background-default: var( --interface-background-default-primary );
1566
+ --button-secondary-background-disabled: var( --interface-background-disabled-disabled );
1567
+ --button-secondary-background-hover: var( --interface-background-default-primary-hover );
1568
+ --button-secondary-border-default: var(--interface-border-default-primary);
1569
+ --button-secondary-border-disabled: var(--interface-border-disabled-disabled);
1570
+ --button-secondary-border-hover: var(--interface-border-default-primary);
1571
+ --button-secondary-foreground-default: var( --interface-foreground-default-primary );
1572
+ --button-secondary-foreground-disabled: var( --interface-foreground-disabled-on-disabled );
1573
+ --button-secondary-foreground-hover: var( --interface-foreground-default-secondary );
1574
+ --button-social-background-default: var( --interface-background-default-primary );
1575
+ --button-social-background-disabled: var( --interface-background-disabled-disabled );
1576
+ --button-social-background-generic-provider: var( --interface-background-default-inverted );
1577
+ --button-social-background-hover: var( --interface-background-default-primary-hover );
1578
+ --button-social-border-default: var(--interface-border-default-primary);
1579
+ --button-social-border-disabled: var(--interface-border-disabled-disabled);
1580
+ --button-social-border-generic-provider: var(--interface-border-default-none);
1581
+ --button-social-border-hover: var(--interface-border-default-primary);
1582
+ --button-social-foreground-default: var( --interface-foreground-default-primary );
1583
+ --button-social-foreground-disabled: var( --interface-foreground-disabled-on-disabled );
1584
+ --button-social-foreground-generic-provider: var( --interface-foreground-default-inverted );
1585
+ --button-social-foreground-hover: var( --interface-foreground-default-secondary );
1586
+ --checkbox-background-checked: var(--interface-background-brand-primary);
1587
+ --checkbox-background-default: var(--interface-background-default-secondary);
1588
+ --checkbox-border-checkbox-border-checked: var( --interface-border-brand-brand );
1589
+ --checkbox-border-checkbox-border-default: var( --interface-border-default-primary );
1590
+ --checkbox-foreground-checked: var(--interface-foreground-brand-on-primary);
1591
+ --checkbox-foreground-default: var(--interface-foreground-default-primary);
1592
+ --form-background-default: var(--interface-background-default-primary);
1593
+ --form-border-default: var(--interface-border-default-primary);
1594
+ --input-background-default: var(--interface-background-default-primary);
1595
+ --input-background-disabled: var(--interface-background-disabled-disabled);
1596
+ --input-background-hover: var(--interface-background-default-primary-hover);
1597
+ --input-border-default: var(--interface-border-default-primary);
1598
+ --input-border-disabled: var(--interface-border-disabled-disabled);
1599
+ --input-border-focus: var(--interface-border-brand-brand);
1600
+ --input-border-hover: var(--interface-border-default-primary);
1601
+ --input-foreground-disabled: var(--interface-foreground-disabled-on-disabled);
1602
+ --input-foreground-primary: var(--interface-foreground-default-primary);
1603
+ --input-foreground-secondary: var(--interface-foreground-default-secondary);
1604
+ --input-foreground-tertiary: var(--interface-foreground-default-tertiary);
1605
+ --interface-background-brand-primary: var(--brand-500);
1606
+ --interface-background-brand-primary-hover: var(--brand-400);
1607
+ --interface-background-brand-secondary: var(--brand-50);
1608
+ --interface-background-brand-secondary-hover: var(--brand-100);
1609
+ --interface-background-default-inverted: var(--ui-900);
1610
+ --interface-background-default-inverted-hover: var(--ui-800);
1611
+ --interface-background-default-none: var(--ui-transparent);
1612
+ --interface-background-default-primary: var(--ui-white);
1613
+ --interface-background-default-primary-hover: var(--ui-50);
1614
+ --interface-background-default-secondary: var(--ui-50);
1615
+ --interface-background-default-secondary-hover: var(--ui-200);
1616
+ --interface-background-default-tertiary: var(--ui-200);
1617
+ --interface-background-default-tertiary-hover: var(--ui-300);
1618
+ --interface-background-disabled-disabled: var(--ui-200);
1619
+ --interface-background-validation-danger: var(--ui-danger);
1620
+ --interface-background-validation-success: var(--ui-success);
1621
+ --interface-background-validation-warning: var(--ui-warning);
1622
+ --interface-border-brand-brand: var(--brand-500);
1623
+ --interface-border-default-inverted: var(--ui-700);
1624
+ --interface-border-default-none: var(--ui-transparent);
1625
+ --interface-border-default-primary: var(--ui-300);
1626
+ --interface-border-disabled-disabled: var(--ui-300);
1627
+ --interface-border-validation-danger: var(--ui-danger);
1628
+ --interface-border-validation-success: var(--ui-success);
1629
+ --interface-border-validation-warning: var(--ui-warning);
1630
+ --interface-foreground-brand-on-primary: var(--brand-50);
1631
+ --interface-foreground-brand-on-secondary: var(--brand-950);
1632
+ --interface-foreground-brand-primary: var(--brand-500);
1633
+ --interface-foreground-brand-secondary: var(--brand-50);
1634
+ --interface-foreground-default-inverted: var(--ui-white);
1635
+ --interface-foreground-default-primary: var(--ui-900);
1636
+ --interface-foreground-default-secondary: var(--ui-700);
1637
+ --interface-foreground-default-tertiary: var(--ui-500);
1638
+ --interface-foreground-disabled-disabled: var(--ui-300);
1639
+ --interface-foreground-disabled-on-disabled: var(--ui-400);
1640
+ --interface-foreground-validation-danger: var(--ui-danger);
1641
+ --interface-foreground-validation-success: var(--ui-success);
1642
+ --interface-foreground-validation-warning: var(--ui-warning);
1643
+ --ory-background-default: var(--interface-background-default-primary);
1644
+ --ory-border-default: var(--interface-border-default-primary);
1645
+ --ory-foreground-default: var(--interface-foreground-default-primary);
1646
+ --radio-background-checked: var(--interface-background-brand-primary);
1647
+ --radio-background-default: var(--interface-background-default-secondary);
1648
+ --radio-border-checked: var(--interface-border-brand-brand);
1649
+ --radio-border-default: var(--interface-border-default-primary);
1650
+ --radio-foreground-checked: var(--interface-foreground-brand-on-primary);
1651
+ --radio-foreground-default: var(--interface-foreground-default-primary);
1652
+ --toggle-background-checked: var(--interface-background-brand-primary);
1653
+ --toggle-background-default: var(--interface-background-default-secondary);
1654
+ --toggle-border-checked: var(--interface-border-default-none);
1655
+ --toggle-border-default: var(--interface-border-default-primary);
1656
+ --toggle-foreground-checked: var(--interface-foreground-brand-on-primary);
1657
+ --toggle-foreground-default: var(--interface-foreground-brand-primary);
1658
+ --brand-100: var(--ui-100);
1659
+ --brand-200: var(--ui-300);
1660
+ --brand-300: var(--ui-500);
1661
+ --brand-400: var(--ui-700);
1662
+ --brand-50: var(--ui-50);
1663
+ --brand-500: var(--ui-900);
1664
+ --brand-600: var(--ui-white);
1665
+ --brand-700: var(--ui-200);
1666
+ --brand-800: var(--ui-400);
1667
+ --brand-900: var(--ui-600);
1668
+ --brand-950: var(--ui-800);
1669
+ --color-ui-transparent: var(--ui-transparent);
1670
+ --color-button-identifier-background-default: var( --button-identifier-background-default );
1671
+ --color-button-identifier-background-hover: var( --button-identifier-background-hover );
1672
+ --color-button-identifier-border-border-default: var( --button-identifier-border-border-default );
1673
+ --color-button-identifier-border-border-hover: var( --button-identifier-border-border-hover );
1674
+ --color-button-identifier-foreground-default: var( --button-identifier-foreground-default );
1675
+ --color-button-identifier-foreground-hover: var( --button-identifier-foreground-hover );
1676
+ --color-button-link-brand-brand: var(--button-link-brand-brand);
1677
+ --color-button-link-brand-brand-hover: var(--button-link-brand-brand-hover);
1678
+ --color-button-link-default-primary: var(--button-link-default-primary);
1679
+ --color-button-link-default-primary-hover: var( --button-link-default-primary-hover );
1680
+ --color-button-link-default-secondary: var(--button-link-default-secondary);
1681
+ --color-button-link-default-secondary-hover: var( --button-link-default-secondary-hover );
1682
+ --color-button-primary-background-default: var( --button-primary-background-default );
1683
+ --color-button-primary-background-disabled: var( --button-primary-background-disabled );
1684
+ --color-button-primary-background-hover: var( --button-primary-background-hover );
1685
+ --color-button-primary-border-default: var(--button-primary-border-default);
1686
+ --color-button-primary-border-disabled: var(--button-primary-border-disabled);
1687
+ --color-button-primary-border-hover: var(--button-primary-border-hover);
1688
+ --color-button-primary-foreground-default: var( --button-primary-foreground-default );
1689
+ --color-button-primary-foreground-disabled: var( --button-primary-foreground-disabled );
1690
+ --color-button-primary-foreground-hover: var( --button-primary-foreground-hover );
1691
+ --color-button-secondary-background-default: var( --button-secondary-background-default );
1692
+ --color-button-secondary-background-disabled: var( --button-secondary-background-disabled );
1693
+ --color-button-secondary-background-hover: var( --button-secondary-background-hover );
1694
+ --color-button-secondary-border-default: var( --button-secondary-border-default );
1695
+ --color-button-secondary-border-disabled: var( --button-secondary-border-disabled );
1696
+ --color-button-secondary-border-hover: var(--button-secondary-border-hover);
1697
+ --color-button-secondary-foreground-default: var( --button-secondary-foreground-default );
1698
+ --color-button-secondary-foreground-disabled: var( --button-secondary-foreground-disabled );
1699
+ --color-button-secondary-foreground-hover: var( --button-secondary-foreground-hover );
1700
+ --color-button-social-background-default: var( --button-social-background-default );
1701
+ --color-button-social-background-disabled: var( --button-social-background-disabled );
1702
+ --color-button-social-background-generic-provider: var( --button-social-background-generic-provider );
1703
+ --color-button-social-background-hover: var(--button-social-background-hover);
1704
+ --color-button-social-border-default: var(--button-social-border-default);
1705
+ --color-button-social-border-disabled: var(--button-social-border-disabled);
1706
+ --color-button-social-border-generic-provider: var( --button-social-border-generic-provider );
1707
+ --color-button-social-border-hover: var(--button-social-border-hover);
1708
+ --color-button-social-foreground-default: var( --button-social-foreground-default );
1709
+ --color-button-social-foreground-disabled: var( --button-social-foreground-disabled );
1710
+ --color-button-social-foreground-generic-provider: var( --button-social-foreground-generic-provider );
1711
+ --color-button-social-foreground-hover: var(--button-social-foreground-hover);
1712
+ --color-checkbox-background-checked: var(--checkbox-background-checked);
1713
+ --color-checkbox-background-default: var(--checkbox-background-default);
1714
+ --color-checkbox-border-checkbox-border-checked: var( --checkbox-border-checkbox-border-checked );
1715
+ --color-checkbox-border-checkbox-border-default: var( --checkbox-border-checkbox-border-default );
1716
+ --color-checkbox-foreground-checked: var(--checkbox-foreground-checked);
1717
+ --color-form-background-default: var(--form-background-default);
1718
+ --color-form-border-default: var(--form-border-default);
1719
+ --color-input-background-default: var(--input-background-default);
1720
+ --color-input-background-disabled: var(--input-background-disabled);
1721
+ --color-input-background-hover: var(--input-background-hover);
1722
+ --color-input-border-default: var(--input-border-default);
1723
+ --color-input-border-disabled: var(--input-border-disabled);
1724
+ --color-input-border-focus: var(--input-border-focus);
1725
+ --color-input-border-hover: var(--input-border-hover);
1726
+ --color-input-foreground-disabled: var(--input-foreground-disabled);
1727
+ --color-input-foreground-primary: var(--input-foreground-primary);
1728
+ --color-input-foreground-tertiary: var(--input-foreground-tertiary);
1729
+ --color-interface-background-brand-primary: var( --interface-background-brand-primary );
1730
+ --color-interface-background-default-inverted: var( --interface-background-default-inverted );
1731
+ --color-interface-background-default-primary: var( --interface-background-default-primary );
1732
+ --color-interface-background-default-primary-hover: var( --interface-background-default-primary-hover );
1733
+ --color-interface-background-default-secondary: var( --interface-background-default-secondary );
1734
+ --color-interface-border-default-primary: var( --interface-border-default-primary );
1735
+ --color-interface-border-validation-danger: var( --interface-border-validation-danger );
1736
+ --color-interface-foreground-brand-primary: var( --interface-foreground-brand-primary );
1737
+ --color-interface-foreground-default-inverted: var( --interface-foreground-default-inverted );
1738
+ --color-interface-foreground-default-primary: var( --interface-foreground-default-primary );
1739
+ --color-interface-foreground-default-secondary: var( --interface-foreground-default-secondary );
1740
+ --color-interface-foreground-default-tertiary: var( --interface-foreground-default-tertiary );
1741
+ --color-interface-foreground-validation-danger: var( --interface-foreground-validation-danger );
1742
+ --color-interface-foreground-validation-success: var( --interface-foreground-validation-success );
1743
+ --color-interface-foreground-validation-warning: var( --interface-foreground-validation-warning );
1744
+ --color-ory-background-default: var(--ory-background-default);
1745
+ --color-ory-border-default: var(--ory-border-default);
1746
+ --color-ory-foreground-default: var(--ory-foreground-default);
1747
+ --color-toggle-background-checked: var(--toggle-background-checked);
1748
+ --color-toggle-background-default: var(--toggle-background-default);
1749
+ --color-toggle-border-checked: var(--toggle-border-checked);
1750
+ --color-toggle-border-default: var(--toggle-border-default);
1751
+ --color-toggle-foreground-checked: var(--toggle-foreground-checked);
1752
+ --color-toggle-foreground-default: var(--toggle-foreground-default);
1753
+ --radius-buttons: 0.25rem;
1754
+ --radius-forms: 0.25rem;
1755
+ --radius-general: 0.25rem;
1756
+ --radius-branding: 0.5rem;
1757
+ --radius-cards: 0.75rem;
1758
+ --radius-identifier: 62.4375rem;
1759
+ --font-sans-default: var(--font-sans);
1760
+ --animate-caret-blink: caret-blink 1.25s ease-out infinite;
1761
+ --animate-drop-down-in: drop-down-in 400ms cubic-bezier(0.16, 1, 0.3, 1);
1762
+ --animate-drop-down-out: drop-down-out 400ms cubic-bezier(0.16, 1, 0.3, 1);
1763
+ }
1764
+ @property --tw-rotate-x { syntax: "*"; inherits: false; }
1765
+ @property --tw-rotate-y { syntax: "*"; inherits: false; }
1766
+ @property --tw-rotate-z { syntax: "*"; inherits: false; }
1767
+ @property --tw-skew-x { syntax: "*"; inherits: false; }
1768
+ @property --tw-skew-y { syntax: "*"; inherits: false; }
1769
+ @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
1770
+ @property --tw-leading { syntax: "*"; inherits: false; }
1771
+ @property --tw-font-weight { syntax: "*"; inherits: false; }
1772
+ @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
1773
+ @property --tw-shadow-color { syntax: "*"; inherits: false; }
1774
+ @property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
1775
+ @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
1776
+ @property --tw-inset-shadow-color { syntax: "*"; inherits: false; }
1777
+ @property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
1778
+ @property --tw-ring-color { syntax: "*"; inherits: false; }
1779
+ @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
1780
+ @property --tw-inset-ring-color { syntax: "*"; inherits: false; }
1781
+ @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
1782
+ @property --tw-ring-inset { syntax: "*"; inherits: false; }
1783
+ @property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }
1784
+ @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
1785
+ @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
1786
+ @property --tw-blur { syntax: "*"; inherits: false; }
1787
+ @property --tw-brightness { syntax: "*"; inherits: false; }
1788
+ @property --tw-contrast { syntax: "*"; inherits: false; }
1789
+ @property --tw-grayscale { syntax: "*"; inherits: false; }
1790
+ @property --tw-hue-rotate { syntax: "*"; inherits: false; }
1791
+ @property --tw-invert { syntax: "*"; inherits: false; }
1792
+ @property --tw-opacity { syntax: "*"; inherits: false; }
1793
+ @property --tw-saturate { syntax: "*"; inherits: false; }
1794
+ @property --tw-sepia { syntax: "*"; inherits: false; }
1795
+ @property --tw-drop-shadow { syntax: "*"; inherits: false; }
1796
+ @property --tw-drop-shadow-color { syntax: "*"; inherits: false; }
1797
+ @property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
1798
+ @property --tw-drop-shadow-size { syntax: "*"; inherits: false; }
1799
+ @property --tw-duration { syntax: "*"; inherits: false; }
1800
+ @property --tw-ease { syntax: "*"; inherits: false; }
1801
+ @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
1802
+ @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
1803
+ @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }
1804
+ @property --tw-content { syntax: "*"; initial-value: ""; inherits: false; }
1805
+ @keyframes spin {
1806
+ to {
1807
+ transform: rotate(360deg);
1808
+ }
1809
+ }
1810
+ @keyframes caret-blink {
1811
+ 0%, 70%, 100% {
1812
+ opacity: 1;
1813
+ }
1814
+ 20%, 50% {
1815
+ opacity: 0;
1816
+ }
1817
+ }
1818
+ @keyframes drop-down-in {
1819
+ from {
1820
+ opacity: 0;
1821
+ transform: scale(0.75);
1822
+ }
1823
+ to {
1824
+ opacity: 1;
1825
+ transform: scale(1);
1826
+ }
1827
+ }
1828
+ @keyframes drop-down-out {
1829
+ from {
1830
+ opacity: 1;
1831
+ transform: scale(1);
1832
+ }
1833
+ to {
1834
+ opacity: 0;
1835
+ transform: scale(0.96);
1836
+ }
1837
+ }
1838
+ @layer properties {
1839
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
1840
+ .ory-elements *,
1841
+ .ory-elements ::before,
1842
+ .ory-elements ::after,
1843
+ .ory-elements ::backdrop {
1844
+ --tw-rotate-x: initial;
1845
+ --tw-rotate-y: initial;
1846
+ --tw-rotate-z: initial;
1847
+ --tw-skew-x: initial;
1848
+ --tw-skew-y: initial;
1849
+ --tw-border-style: solid;
1850
+ --tw-leading: initial;
1851
+ --tw-font-weight: initial;
1852
+ --tw-shadow: 0 0 #0000;
1853
+ --tw-shadow-color: initial;
1854
+ --tw-shadow-alpha: 100%;
1855
+ --tw-inset-shadow: 0 0 #0000;
1856
+ --tw-inset-shadow-color: initial;
1857
+ --tw-inset-shadow-alpha: 100%;
1858
+ --tw-ring-color: initial;
1859
+ --tw-ring-shadow: 0 0 #0000;
1860
+ --tw-inset-ring-color: initial;
1861
+ --tw-inset-ring-shadow: 0 0 #0000;
1862
+ --tw-ring-inset: initial;
1863
+ --tw-ring-offset-width: 0px;
1864
+ --tw-ring-offset-color: #fff;
1865
+ --tw-ring-offset-shadow: 0 0 #0000;
1866
+ --tw-blur: initial;
1867
+ --tw-brightness: initial;
1868
+ --tw-contrast: initial;
1869
+ --tw-grayscale: initial;
1870
+ --tw-hue-rotate: initial;
1871
+ --tw-invert: initial;
1872
+ --tw-opacity: initial;
1873
+ --tw-saturate: initial;
1874
+ --tw-sepia: initial;
1875
+ --tw-drop-shadow: initial;
1876
+ --tw-drop-shadow-color: initial;
1877
+ --tw-drop-shadow-alpha: 100%;
1878
+ --tw-drop-shadow-size: initial;
1879
+ --tw-duration: initial;
1880
+ --tw-ease: initial;
1881
+ --tw-translate-x: 0;
1882
+ --tw-translate-y: 0;
1883
+ --tw-translate-z: 0;
1884
+ --tw-content: "";
1885
+ }
1886
+ }
1887
+ }
1888
+ /*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
1727
1889
  /*# sourceMappingURL=index.css.map */