@ory/elements-react 0.0.0-pr.8e964fc1 → 0.0.0-pr.f3c2f07

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.
@@ -154,6 +154,114 @@
154
154
  /* src/theme/default/global.css */
155
155
  *,
156
156
  ::before,
157
+ ::after {
158
+ --tw-border-spacing-x: 0;
159
+ --tw-border-spacing-y: 0;
160
+ --tw-translate-x: 0;
161
+ --tw-translate-y: 0;
162
+ --tw-rotate: 0;
163
+ --tw-skew-x: 0;
164
+ --tw-skew-y: 0;
165
+ --tw-scale-x: 1;
166
+ --tw-scale-y: 1;
167
+ --tw-pan-x: ;
168
+ --tw-pan-y: ;
169
+ --tw-pinch-zoom: ;
170
+ --tw-scroll-snap-strictness: proximity;
171
+ --tw-gradient-from-position: ;
172
+ --tw-gradient-via-position: ;
173
+ --tw-gradient-to-position: ;
174
+ --tw-ordinal: ;
175
+ --tw-slashed-zero: ;
176
+ --tw-numeric-figure: ;
177
+ --tw-numeric-spacing: ;
178
+ --tw-numeric-fraction: ;
179
+ --tw-ring-inset: ;
180
+ --tw-ring-offset-width: 0px;
181
+ --tw-ring-offset-color: #fff;
182
+ --tw-ring-color: rgb(147 197 253 / 0.5);
183
+ --tw-ring-offset-shadow: 0 0 #0000;
184
+ --tw-ring-shadow: 0 0 #0000;
185
+ --tw-shadow: 0 0 #0000;
186
+ --tw-shadow-colored: 0 0 #0000;
187
+ --tw-blur: ;
188
+ --tw-brightness: ;
189
+ --tw-contrast: ;
190
+ --tw-grayscale: ;
191
+ --tw-hue-rotate: ;
192
+ --tw-invert: ;
193
+ --tw-saturate: ;
194
+ --tw-sepia: ;
195
+ --tw-drop-shadow: ;
196
+ --tw-backdrop-blur: ;
197
+ --tw-backdrop-brightness: ;
198
+ --tw-backdrop-contrast: ;
199
+ --tw-backdrop-grayscale: ;
200
+ --tw-backdrop-hue-rotate: ;
201
+ --tw-backdrop-invert: ;
202
+ --tw-backdrop-opacity: ;
203
+ --tw-backdrop-saturate: ;
204
+ --tw-backdrop-sepia: ;
205
+ --tw-contain-size: ;
206
+ --tw-contain-layout: ;
207
+ --tw-contain-paint: ;
208
+ --tw-contain-style: ;
209
+ }
210
+ ::backdrop {
211
+ --tw-border-spacing-x: 0;
212
+ --tw-border-spacing-y: 0;
213
+ --tw-translate-x: 0;
214
+ --tw-translate-y: 0;
215
+ --tw-rotate: 0;
216
+ --tw-skew-x: 0;
217
+ --tw-skew-y: 0;
218
+ --tw-scale-x: 1;
219
+ --tw-scale-y: 1;
220
+ --tw-pan-x: ;
221
+ --tw-pan-y: ;
222
+ --tw-pinch-zoom: ;
223
+ --tw-scroll-snap-strictness: proximity;
224
+ --tw-gradient-from-position: ;
225
+ --tw-gradient-via-position: ;
226
+ --tw-gradient-to-position: ;
227
+ --tw-ordinal: ;
228
+ --tw-slashed-zero: ;
229
+ --tw-numeric-figure: ;
230
+ --tw-numeric-spacing: ;
231
+ --tw-numeric-fraction: ;
232
+ --tw-ring-inset: ;
233
+ --tw-ring-offset-width: 0px;
234
+ --tw-ring-offset-color: #fff;
235
+ --tw-ring-color: rgb(147 197 253 / 0.5);
236
+ --tw-ring-offset-shadow: 0 0 #0000;
237
+ --tw-ring-shadow: 0 0 #0000;
238
+ --tw-shadow: 0 0 #0000;
239
+ --tw-shadow-colored: 0 0 #0000;
240
+ --tw-blur: ;
241
+ --tw-brightness: ;
242
+ --tw-contrast: ;
243
+ --tw-grayscale: ;
244
+ --tw-hue-rotate: ;
245
+ --tw-invert: ;
246
+ --tw-saturate: ;
247
+ --tw-sepia: ;
248
+ --tw-drop-shadow: ;
249
+ --tw-backdrop-blur: ;
250
+ --tw-backdrop-brightness: ;
251
+ --tw-backdrop-contrast: ;
252
+ --tw-backdrop-grayscale: ;
253
+ --tw-backdrop-hue-rotate: ;
254
+ --tw-backdrop-invert: ;
255
+ --tw-backdrop-opacity: ;
256
+ --tw-backdrop-saturate: ;
257
+ --tw-backdrop-sepia: ;
258
+ --tw-contain-size: ;
259
+ --tw-contain-layout: ;
260
+ --tw-contain-paint: ;
261
+ --tw-contain-style: ;
262
+ }
263
+ *,
264
+ ::before,
157
265
  ::after {
158
266
  box-sizing: border-box;
159
267
  border-width: 0;
@@ -367,117 +475,9 @@ video {
367
475
  max-width: 100%;
368
476
  height: auto;
369
477
  }
370
- [hidden] {
478
+ [hidden]:where(:not([hidden=until-found])) {
371
479
  display: none;
372
480
  }
373
- *,
374
- ::before,
375
- ::after {
376
- --tw-border-spacing-x: 0;
377
- --tw-border-spacing-y: 0;
378
- --tw-translate-x: 0;
379
- --tw-translate-y: 0;
380
- --tw-rotate: 0;
381
- --tw-skew-x: 0;
382
- --tw-skew-y: 0;
383
- --tw-scale-x: 1;
384
- --tw-scale-y: 1;
385
- --tw-pan-x: ;
386
- --tw-pan-y: ;
387
- --tw-pinch-zoom: ;
388
- --tw-scroll-snap-strictness: proximity;
389
- --tw-gradient-from-position: ;
390
- --tw-gradient-via-position: ;
391
- --tw-gradient-to-position: ;
392
- --tw-ordinal: ;
393
- --tw-slashed-zero: ;
394
- --tw-numeric-figure: ;
395
- --tw-numeric-spacing: ;
396
- --tw-numeric-fraction: ;
397
- --tw-ring-inset: ;
398
- --tw-ring-offset-width: 0px;
399
- --tw-ring-offset-color: #fff;
400
- --tw-ring-color: rgb(147 197 253 / 0.5);
401
- --tw-ring-offset-shadow: 0 0 #0000;
402
- --tw-ring-shadow: 0 0 #0000;
403
- --tw-shadow: 0 0 #0000;
404
- --tw-shadow-colored: 0 0 #0000;
405
- --tw-blur: ;
406
- --tw-brightness: ;
407
- --tw-contrast: ;
408
- --tw-grayscale: ;
409
- --tw-hue-rotate: ;
410
- --tw-invert: ;
411
- --tw-saturate: ;
412
- --tw-sepia: ;
413
- --tw-drop-shadow: ;
414
- --tw-backdrop-blur: ;
415
- --tw-backdrop-brightness: ;
416
- --tw-backdrop-contrast: ;
417
- --tw-backdrop-grayscale: ;
418
- --tw-backdrop-hue-rotate: ;
419
- --tw-backdrop-invert: ;
420
- --tw-backdrop-opacity: ;
421
- --tw-backdrop-saturate: ;
422
- --tw-backdrop-sepia: ;
423
- --tw-contain-size: ;
424
- --tw-contain-layout: ;
425
- --tw-contain-paint: ;
426
- --tw-contain-style: ;
427
- }
428
- ::backdrop {
429
- --tw-border-spacing-x: 0;
430
- --tw-border-spacing-y: 0;
431
- --tw-translate-x: 0;
432
- --tw-translate-y: 0;
433
- --tw-rotate: 0;
434
- --tw-skew-x: 0;
435
- --tw-skew-y: 0;
436
- --tw-scale-x: 1;
437
- --tw-scale-y: 1;
438
- --tw-pan-x: ;
439
- --tw-pan-y: ;
440
- --tw-pinch-zoom: ;
441
- --tw-scroll-snap-strictness: proximity;
442
- --tw-gradient-from-position: ;
443
- --tw-gradient-via-position: ;
444
- --tw-gradient-to-position: ;
445
- --tw-ordinal: ;
446
- --tw-slashed-zero: ;
447
- --tw-numeric-figure: ;
448
- --tw-numeric-spacing: ;
449
- --tw-numeric-fraction: ;
450
- --tw-ring-inset: ;
451
- --tw-ring-offset-width: 0px;
452
- --tw-ring-offset-color: #fff;
453
- --tw-ring-color: rgb(147 197 253 / 0.5);
454
- --tw-ring-offset-shadow: 0 0 #0000;
455
- --tw-ring-shadow: 0 0 #0000;
456
- --tw-shadow: 0 0 #0000;
457
- --tw-shadow-colored: 0 0 #0000;
458
- --tw-blur: ;
459
- --tw-brightness: ;
460
- --tw-contrast: ;
461
- --tw-grayscale: ;
462
- --tw-hue-rotate: ;
463
- --tw-invert: ;
464
- --tw-saturate: ;
465
- --tw-sepia: ;
466
- --tw-drop-shadow: ;
467
- --tw-backdrop-blur: ;
468
- --tw-backdrop-brightness: ;
469
- --tw-backdrop-contrast: ;
470
- --tw-backdrop-grayscale: ;
471
- --tw-backdrop-hue-rotate: ;
472
- --tw-backdrop-invert: ;
473
- --tw-backdrop-opacity: ;
474
- --tw-backdrop-saturate: ;
475
- --tw-backdrop-sepia: ;
476
- --tw-contain-size: ;
477
- --tw-contain-layout: ;
478
- --tw-contain-paint: ;
479
- --tw-contain-style: ;
480
- }
481
481
  .container {
482
482
  width: 100%;
483
483
  }
@@ -521,9 +521,15 @@ video {
521
521
  .inset-0 {
522
522
  inset: 0px;
523
523
  }
524
+ .right-0 {
525
+ right: 0px;
526
+ }
524
527
  .z-50 {
525
528
  z-index: 50;
526
529
  }
530
+ .col-span-2 {
531
+ grid-column: span 2 / span 2;
532
+ }
527
533
  .col-span-full {
528
534
  grid-column: 1 / -1;
529
535
  }
@@ -545,6 +551,9 @@ video {
545
551
  .mt-16 {
546
552
  margin-top: 4rem;
547
553
  }
554
+ .block {
555
+ display: block;
556
+ }
548
557
  .inline-block {
549
558
  display: inline-block;
550
559
  }
@@ -557,6 +566,9 @@ video {
557
566
  .grid {
558
567
  display: grid;
559
568
  }
569
+ .list-item {
570
+ display: list-item;
571
+ }
560
572
  .hidden {
561
573
  display: none;
562
574
  }
@@ -567,6 +579,10 @@ video {
567
579
  width: 2.5rem;
568
580
  height: 2.5rem;
569
581
  }
582
+ .size-2 {
583
+ width: 0.5rem;
584
+ height: 0.5rem;
585
+ }
570
586
  .size-4 {
571
587
  width: 1rem;
572
588
  height: 1rem;
@@ -595,6 +611,9 @@ video {
595
611
  .h-5 {
596
612
  height: 1.25rem;
597
613
  }
614
+ .h-full {
615
+ height: 100%;
616
+ }
598
617
  .max-h-10 {
599
618
  max-height: 2.5rem;
600
619
  }
@@ -607,12 +626,21 @@ video {
607
626
  .min-h-screen {
608
627
  min-height: 100vh;
609
628
  }
629
+ .w-12 {
630
+ width: 3rem;
631
+ }
632
+ .w-7 {
633
+ width: 1.75rem;
634
+ }
610
635
  .w-full {
611
636
  width: 100%;
612
637
  }
613
638
  .w-px {
614
639
  width: 1px;
615
640
  }
641
+ .min-w-1 {
642
+ min-width: 0.25rem;
643
+ }
616
644
  .min-w-\[19rem\] {
617
645
  min-width: 19rem;
618
646
  }
@@ -738,12 +766,20 @@ video {
738
766
  .overflow-hidden {
739
767
  overflow: hidden;
740
768
  }
769
+ .truncate {
770
+ overflow: hidden;
771
+ text-overflow: ellipsis;
772
+ white-space: nowrap;
773
+ }
741
774
  .text-ellipsis {
742
775
  text-overflow: ellipsis;
743
776
  }
744
777
  .text-nowrap {
745
778
  text-wrap: nowrap;
746
779
  }
780
+ .break-words {
781
+ overflow-wrap: break-word;
782
+ }
747
783
  .rounded-\[999px\] {
748
784
  border-radius: 999px;
749
785
  }
@@ -815,9 +851,12 @@ video {
815
851
  .border-ory-border-default {
816
852
  border-color: var(--ory-border-default);
817
853
  }
854
+ .border-toggle-border-default {
855
+ border-color: var(--toggle-border-default);
856
+ }
818
857
  .bg-\[white\] {
819
858
  --tw-bg-opacity: 1;
820
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
859
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
821
860
  }
822
861
  .bg-button-identifier-background-default {
823
862
  background-color: var(--button-identifier-background-default);
@@ -852,6 +891,12 @@ video {
852
891
  .bg-ory-background-default {
853
892
  background-color: var(--ory-background-default);
854
893
  }
894
+ .bg-toggle-background-default {
895
+ background-color: var(--toggle-background-default);
896
+ }
897
+ .bg-toggle-foreground-default {
898
+ background-color: var(--toggle-foreground-default);
899
+ }
855
900
  .fill-checkbox-foreground-checked {
856
901
  fill: var(--checkbox-foreground-checked);
857
902
  }
@@ -871,6 +916,9 @@ video {
871
916
  .p-8 {
872
917
  padding: 2rem;
873
918
  }
919
+ .p-\[3px\] {
920
+ padding: 3px;
921
+ }
874
922
  .px-2 {
875
923
  padding-left: 0.5rem;
876
924
  padding-right: 0.5rem;
@@ -1278,9 +1326,22 @@ video {
1278
1326
  .data-\[disabled\]\:pointer-events-none[data-disabled] {
1279
1327
  pointer-events: none;
1280
1328
  }
1329
+ .data-\[state\=checked\]\:translate-x-3[data-state=checked] {
1330
+ --tw-translate-x: 0.75rem;
1331
+ 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));
1332
+ }
1333
+ .data-\[state\=checked\]\:border-toggle-border-checked[data-state=checked] {
1334
+ border-color: var(--toggle-border-checked);
1335
+ }
1281
1336
  .data-\[disabled\]\:bg-button-secondary-background-disabled[data-disabled] {
1282
1337
  background-color: var(--button-secondary-background-disabled);
1283
1338
  }
1339
+ .data-\[state\=checked\]\:bg-toggle-background-checked[data-state=checked] {
1340
+ background-color: var(--toggle-background-checked);
1341
+ }
1342
+ .data-\[state\=checked\]\:bg-toggle-foreground-checked[data-state=checked] {
1343
+ background-color: var(--toggle-foreground-checked);
1344
+ }
1284
1345
  .data-\[disabled\]\:text-button-secondary-foreground-disabled[data-disabled] {
1285
1346
  color: var(--button-secondary-foreground-disabled);
1286
1347
  }