@sanity/ui 3.0.0-static.4 → 3.0.0-static.6

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 (51) hide show
  1. package/dist/_chunks-cjs/_visual-editing.js +81 -31
  2. package/dist/_chunks-cjs/_visual-editing.js.map +1 -1
  3. package/dist/_chunks-es/_visual-editing.mjs +82 -32
  4. package/dist/_chunks-es/_visual-editing.mjs.map +1 -1
  5. package/dist/_visual-editing.d.mts +14 -11
  6. package/dist/_visual-editing.d.ts +14 -11
  7. package/dist/cli.js +1 -1
  8. package/dist/css.d.mts +144 -852
  9. package/dist/css.d.ts +144 -852
  10. package/dist/css.js +155 -141
  11. package/dist/css.js.map +1 -1
  12. package/dist/css.mjs +154 -141
  13. package/dist/css.mjs.map +1 -1
  14. package/dist/index.d.mts +14 -11
  15. package/dist/index.d.ts +14 -11
  16. package/dist/index.js +2 -4
  17. package/dist/index.js.map +1 -1
  18. package/dist/index.mjs +4 -6
  19. package/dist/index.mjs.map +1 -1
  20. package/dist/sanity-theme.css +1 -1
  21. package/dist/system.css +54 -49
  22. package/dist/theme.js +271 -33
  23. package/dist/theme.js.map +1 -1
  24. package/dist/theme.mjs +252 -16
  25. package/dist/theme.mjs.map +1 -1
  26. package/package.json +2 -2
  27. package/src/css/aspects/flex/flexJustify.style.ts +3 -3
  28. package/src/css/aspects/grid/types.ts +2 -2
  29. package/src/css/index.ts +2 -2
  30. package/src/css/primitives/_input/__workshop__/index.ts +1 -1
  31. package/src/css/primitives/button/button.style.ts +6 -4
  32. package/src/css/primitives/stack/index.ts +1 -0
  33. package/src/css/primitives/stack/stack.style.ts +9 -0
  34. package/src/css/primitives/stack/stack.ts +6 -0
  35. package/src/css/system.style.ts +2 -0
  36. package/src/theme/v3/defaults.ts +1 -1
  37. package/src/ui/components/autocomplete/__workshop__/index.ts +1 -1
  38. package/src/ui/components/dialog/dialog.tsx +3 -4
  39. package/src/ui/constants.ts +6 -0
  40. package/src/ui/hooks/useMediaIndex/useMediaIndex.ts +0 -2
  41. package/src/ui/primitives/box/box.tsx +6 -0
  42. package/src/ui/primitives/button/button.tsx +11 -10
  43. package/src/ui/primitives/code/code.tsx +1 -1
  44. package/src/ui/primitives/popover/popover.tsx +5 -75
  45. package/src/ui/primitives/stack/stack.tsx +10 -5
  46. package/src/ui/primitives/textInput/textInput.tsx +1 -1
  47. package/src/ui/primitives/tooltip/tooltip.tsx +2 -3
  48. package/dist/_chunks-cjs/v3_v2.js +0 -251
  49. package/dist/_chunks-cjs/v3_v2.js.map +0 -1
  50. package/dist/_chunks-es/v3_v2.mjs +0 -252
  51. package/dist/_chunks-es/v3_v2.mjs.map +0 -1
package/dist/system.css CHANGED
@@ -185,15 +185,15 @@
185
185
  justify-content: center;
186
186
  }
187
187
 
188
- .s-flex-justify-between {
188
+ .s-flex-justify-space-between {
189
189
  justify-content: space-between;
190
190
  }
191
191
 
192
- .s-flex-justify-around {
192
+ .s-flex-justify-space-around {
193
193
  justify-content: space-around;
194
194
  }
195
195
 
196
- .s-flex-justify-evenly {
196
+ .s-flex-justify-space-evenly {
197
197
  justify-content: space-evenly;
198
198
  }
199
199
 
@@ -1787,15 +1787,15 @@
1787
1787
  justify-content: center;
1788
1788
  }
1789
1789
 
1790
- .s-1\:flex-justify-between {
1790
+ .s-1\:flex-justify-space-between {
1791
1791
  justify-content: space-between;
1792
1792
  }
1793
1793
 
1794
- .s-1\:flex-justify-around {
1794
+ .s-1\:flex-justify-space-around {
1795
1795
  justify-content: space-around;
1796
1796
  }
1797
1797
 
1798
- .s-1\:flex-justify-evenly {
1798
+ .s-1\:flex-justify-space-evenly {
1799
1799
  justify-content: space-evenly;
1800
1800
  }
1801
1801
 
@@ -3363,15 +3363,15 @@
3363
3363
  justify-content: center;
3364
3364
  }
3365
3365
 
3366
- .s-2\:flex-justify-between {
3366
+ .s-2\:flex-justify-space-between {
3367
3367
  justify-content: space-between;
3368
3368
  }
3369
3369
 
3370
- .s-2\:flex-justify-around {
3370
+ .s-2\:flex-justify-space-around {
3371
3371
  justify-content: space-around;
3372
3372
  }
3373
3373
 
3374
- .s-2\:flex-justify-evenly {
3374
+ .s-2\:flex-justify-space-evenly {
3375
3375
  justify-content: space-evenly;
3376
3376
  }
3377
3377
 
@@ -4939,15 +4939,15 @@
4939
4939
  justify-content: center;
4940
4940
  }
4941
4941
 
4942
- .s-3\:flex-justify-between {
4942
+ .s-3\:flex-justify-space-between {
4943
4943
  justify-content: space-between;
4944
4944
  }
4945
4945
 
4946
- .s-3\:flex-justify-around {
4946
+ .s-3\:flex-justify-space-around {
4947
4947
  justify-content: space-around;
4948
4948
  }
4949
4949
 
4950
- .s-3\:flex-justify-evenly {
4950
+ .s-3\:flex-justify-space-evenly {
4951
4951
  justify-content: space-evenly;
4952
4952
  }
4953
4953
 
@@ -6515,15 +6515,15 @@
6515
6515
  justify-content: center;
6516
6516
  }
6517
6517
 
6518
- .s-4\:flex-justify-between {
6518
+ .s-4\:flex-justify-space-between {
6519
6519
  justify-content: space-between;
6520
6520
  }
6521
6521
 
6522
- .s-4\:flex-justify-around {
6522
+ .s-4\:flex-justify-space-around {
6523
6523
  justify-content: space-around;
6524
6524
  }
6525
6525
 
6526
- .s-4\:flex-justify-evenly {
6526
+ .s-4\:flex-justify-space-evenly {
6527
6527
  justify-content: space-evenly;
6528
6528
  }
6529
6529
 
@@ -8091,15 +8091,15 @@
8091
8091
  justify-content: center;
8092
8092
  }
8093
8093
 
8094
- .s-5\:flex-justify-between {
8094
+ .s-5\:flex-justify-space-between {
8095
8095
  justify-content: space-between;
8096
8096
  }
8097
8097
 
8098
- .s-5\:flex-justify-around {
8098
+ .s-5\:flex-justify-space-around {
8099
8099
  justify-content: space-around;
8100
8100
  }
8101
8101
 
8102
- .s-5\:flex-justify-evenly {
8102
+ .s-5\:flex-justify-space-evenly {
8103
8103
  justify-content: space-evenly;
8104
8104
  }
8105
8105
 
@@ -9667,15 +9667,15 @@
9667
9667
  justify-content: center;
9668
9668
  }
9669
9669
 
9670
- .s-6\:flex-justify-between {
9670
+ .s-6\:flex-justify-space-between {
9671
9671
  justify-content: space-between;
9672
9672
  }
9673
9673
 
9674
- .s-6\:flex-justify-around {
9674
+ .s-6\:flex-justify-space-around {
9675
9675
  justify-content: space-around;
9676
9676
  }
9677
9677
 
9678
- .s-6\:flex-justify-evenly {
9678
+ .s-6\:flex-justify-space-evenly {
9679
9679
  justify-content: space-evenly;
9680
9680
  }
9681
9681
 
@@ -11999,6 +11999,7 @@
11999
11999
  background-color: var(--color-bg);
12000
12000
  color: var(--color-fg);
12001
12001
  box-shadow: var(--button-box-shadow);
12002
+ align-items: center;
12002
12003
  }
12003
12004
 
12004
12005
  .s-button::-moz-focus-inner {
@@ -12065,27 +12066,27 @@
12065
12066
 
12066
12067
  .s-button.s-ghost.s-default {
12067
12068
  --color-bg: var(--color-tinted-default-bg-1);
12068
- --color-border: var(--color-tinted-default-border-1);
12069
+ --color-border: var(--color-tinted-default-border-0);
12069
12070
  --color-fg: var(--color-tinted-default-fg-2);
12070
12071
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12071
12072
  }
12072
12073
 
12073
12074
  .s-button.s-ghost.s-default:not([data-disabled]):hover {
12074
12075
  --color-bg: var(--color-tinted-default-bg-2);
12075
- --color-border: var(--color-tinted-default-border-2);
12076
+ --color-border: var(--color-tinted-default-border-1);
12076
12077
  --color-fg: var(--color-tinted-default-fg-1);
12077
12078
  }
12078
12079
 
12079
12080
  .s-button.s-ghost.s-default:not([data-disabled]):active {
12080
12081
  --color-bg: var(--color-tinted-default-bg-3);
12081
- --color-border: var(--color-tinted-default-border-3);
12082
+ --color-border: var(--color-tinted-default-border-2);
12082
12083
  --color-fg: var(--color-tinted-default-fg-1);
12083
12084
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12084
12085
  }
12085
12086
 
12086
12087
  .s-button.s-ghost.s-default:not([data-disabled])[data-selected] {
12087
12088
  --color-bg: var(--color-tinted-default-bg-3);
12088
- --color-border: var(--color-tinted-default-border-3);
12089
+ --color-border: var(--color-tinted-default-border-2);
12089
12090
  --color-fg: var(--color-tinted-default-fg-1);
12090
12091
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12091
12092
  }
@@ -12171,27 +12172,27 @@
12171
12172
 
12172
12173
  .s-button.s-ghost.s-neutral {
12173
12174
  --color-bg: var(--color-tinted-neutral-bg-1);
12174
- --color-border: var(--color-tinted-neutral-border-1);
12175
+ --color-border: var(--color-tinted-neutral-border-0);
12175
12176
  --color-fg: var(--color-tinted-neutral-fg-2);
12176
12177
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12177
12178
  }
12178
12179
 
12179
12180
  .s-button.s-ghost.s-neutral:not([data-disabled]):hover {
12180
12181
  --color-bg: var(--color-tinted-neutral-bg-2);
12181
- --color-border: var(--color-tinted-neutral-border-2);
12182
+ --color-border: var(--color-tinted-neutral-border-1);
12182
12183
  --color-fg: var(--color-tinted-neutral-fg-1);
12183
12184
  }
12184
12185
 
12185
12186
  .s-button.s-ghost.s-neutral:not([data-disabled]):active {
12186
12187
  --color-bg: var(--color-tinted-neutral-bg-3);
12187
- --color-border: var(--color-tinted-neutral-border-3);
12188
+ --color-border: var(--color-tinted-neutral-border-2);
12188
12189
  --color-fg: var(--color-tinted-neutral-fg-1);
12189
12190
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12190
12191
  }
12191
12192
 
12192
12193
  .s-button.s-ghost.s-neutral:not([data-disabled])[data-selected] {
12193
12194
  --color-bg: var(--color-tinted-neutral-bg-3);
12194
- --color-border: var(--color-tinted-neutral-border-3);
12195
+ --color-border: var(--color-tinted-neutral-border-2);
12195
12196
  --color-fg: var(--color-tinted-neutral-fg-1);
12196
12197
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12197
12198
  }
@@ -12277,27 +12278,27 @@
12277
12278
 
12278
12279
  .s-button.s-ghost.s-accent {
12279
12280
  --color-bg: var(--color-tinted-primary-bg-1);
12280
- --color-border: var(--color-tinted-primary-border-1);
12281
+ --color-border: var(--color-tinted-primary-border-0);
12281
12282
  --color-fg: var(--color-tinted-primary-fg-2);
12282
12283
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12283
12284
  }
12284
12285
 
12285
12286
  .s-button.s-ghost.s-accent:not([data-disabled]):hover {
12286
12287
  --color-bg: var(--color-tinted-primary-bg-2);
12287
- --color-border: var(--color-tinted-primary-border-2);
12288
+ --color-border: var(--color-tinted-primary-border-1);
12288
12289
  --color-fg: var(--color-tinted-primary-fg-1);
12289
12290
  }
12290
12291
 
12291
12292
  .s-button.s-ghost.s-accent:not([data-disabled]):active {
12292
12293
  --color-bg: var(--color-tinted-primary-bg-3);
12293
- --color-border: var(--color-tinted-primary-border-3);
12294
+ --color-border: var(--color-tinted-primary-border-2);
12294
12295
  --color-fg: var(--color-tinted-primary-fg-1);
12295
12296
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12296
12297
  }
12297
12298
 
12298
12299
  .s-button.s-ghost.s-accent:not([data-disabled])[data-selected] {
12299
12300
  --color-bg: var(--color-tinted-primary-bg-3);
12300
- --color-border: var(--color-tinted-primary-border-3);
12301
+ --color-border: var(--color-tinted-primary-border-2);
12301
12302
  --color-fg: var(--color-tinted-primary-fg-1);
12302
12303
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12303
12304
  }
@@ -12383,27 +12384,27 @@
12383
12384
 
12384
12385
  .s-button.s-ghost.s-suggest {
12385
12386
  --color-bg: var(--color-tinted-suggest-bg-1);
12386
- --color-border: var(--color-tinted-suggest-border-1);
12387
+ --color-border: var(--color-tinted-suggest-border-0);
12387
12388
  --color-fg: var(--color-tinted-suggest-fg-2);
12388
12389
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12389
12390
  }
12390
12391
 
12391
12392
  .s-button.s-ghost.s-suggest:not([data-disabled]):hover {
12392
12393
  --color-bg: var(--color-tinted-suggest-bg-2);
12393
- --color-border: var(--color-tinted-suggest-border-2);
12394
+ --color-border: var(--color-tinted-suggest-border-1);
12394
12395
  --color-fg: var(--color-tinted-suggest-fg-1);
12395
12396
  }
12396
12397
 
12397
12398
  .s-button.s-ghost.s-suggest:not([data-disabled]):active {
12398
12399
  --color-bg: var(--color-tinted-suggest-bg-3);
12399
- --color-border: var(--color-tinted-suggest-border-3);
12400
+ --color-border: var(--color-tinted-suggest-border-2);
12400
12401
  --color-fg: var(--color-tinted-suggest-fg-1);
12401
12402
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12402
12403
  }
12403
12404
 
12404
12405
  .s-button.s-ghost.s-suggest:not([data-disabled])[data-selected] {
12405
12406
  --color-bg: var(--color-tinted-suggest-bg-3);
12406
- --color-border: var(--color-tinted-suggest-border-3);
12407
+ --color-border: var(--color-tinted-suggest-border-2);
12407
12408
  --color-fg: var(--color-tinted-suggest-fg-1);
12408
12409
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12409
12410
  }
@@ -12489,27 +12490,27 @@
12489
12490
 
12490
12491
  .s-button.s-ghost.s-positive {
12491
12492
  --color-bg: var(--color-tinted-positive-bg-1);
12492
- --color-border: var(--color-tinted-positive-border-1);
12493
+ --color-border: var(--color-tinted-positive-border-0);
12493
12494
  --color-fg: var(--color-tinted-positive-fg-2);
12494
12495
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12495
12496
  }
12496
12497
 
12497
12498
  .s-button.s-ghost.s-positive:not([data-disabled]):hover {
12498
12499
  --color-bg: var(--color-tinted-positive-bg-2);
12499
- --color-border: var(--color-tinted-positive-border-2);
12500
+ --color-border: var(--color-tinted-positive-border-1);
12500
12501
  --color-fg: var(--color-tinted-positive-fg-1);
12501
12502
  }
12502
12503
 
12503
12504
  .s-button.s-ghost.s-positive:not([data-disabled]):active {
12504
12505
  --color-bg: var(--color-tinted-positive-bg-3);
12505
- --color-border: var(--color-tinted-positive-border-3);
12506
+ --color-border: var(--color-tinted-positive-border-2);
12506
12507
  --color-fg: var(--color-tinted-positive-fg-1);
12507
12508
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12508
12509
  }
12509
12510
 
12510
12511
  .s-button.s-ghost.s-positive:not([data-disabled])[data-selected] {
12511
12512
  --color-bg: var(--color-tinted-positive-bg-3);
12512
- --color-border: var(--color-tinted-positive-border-3);
12513
+ --color-border: var(--color-tinted-positive-border-2);
12513
12514
  --color-fg: var(--color-tinted-positive-fg-1);
12514
12515
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12515
12516
  }
@@ -12595,27 +12596,27 @@
12595
12596
 
12596
12597
  .s-button.s-ghost.s-caution {
12597
12598
  --color-bg: var(--color-tinted-caution-bg-1);
12598
- --color-border: var(--color-tinted-caution-border-1);
12599
+ --color-border: var(--color-tinted-caution-border-0);
12599
12600
  --color-fg: var(--color-tinted-caution-fg-2);
12600
12601
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12601
12602
  }
12602
12603
 
12603
12604
  .s-button.s-ghost.s-caution:not([data-disabled]):hover {
12604
12605
  --color-bg: var(--color-tinted-caution-bg-2);
12605
- --color-border: var(--color-tinted-caution-border-2);
12606
+ --color-border: var(--color-tinted-caution-border-1);
12606
12607
  --color-fg: var(--color-tinted-caution-fg-1);
12607
12608
  }
12608
12609
 
12609
12610
  .s-button.s-ghost.s-caution:not([data-disabled]):active {
12610
12611
  --color-bg: var(--color-tinted-caution-bg-3);
12611
- --color-border: var(--color-tinted-caution-border-3);
12612
+ --color-border: var(--color-tinted-caution-border-2);
12612
12613
  --color-fg: var(--color-tinted-caution-fg-1);
12613
12614
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12614
12615
  }
12615
12616
 
12616
12617
  .s-button.s-ghost.s-caution:not([data-disabled])[data-selected] {
12617
12618
  --color-bg: var(--color-tinted-caution-bg-3);
12618
- --color-border: var(--color-tinted-caution-border-3);
12619
+ --color-border: var(--color-tinted-caution-border-2);
12619
12620
  --color-fg: var(--color-tinted-caution-fg-1);
12620
12621
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12621
12622
  }
@@ -12701,27 +12702,27 @@
12701
12702
 
12702
12703
  .s-button.s-ghost.s-critical {
12703
12704
  --color-bg: var(--color-tinted-critical-bg-1);
12704
- --color-border: var(--color-tinted-critical-border-1);
12705
+ --color-border: var(--color-tinted-critical-border-0);
12705
12706
  --color-fg: var(--color-tinted-critical-fg-2);
12706
12707
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12707
12708
  }
12708
12709
 
12709
12710
  .s-button.s-ghost.s-critical:not([data-disabled]):hover {
12710
12711
  --color-bg: var(--color-tinted-critical-bg-2);
12711
- --color-border: var(--color-tinted-critical-border-2);
12712
+ --color-border: var(--color-tinted-critical-border-1);
12712
12713
  --color-fg: var(--color-tinted-critical-fg-1);
12713
12714
  }
12714
12715
 
12715
12716
  .s-button.s-ghost.s-critical:not([data-disabled]):active {
12716
12717
  --color-bg: var(--color-tinted-critical-bg-3);
12717
- --color-border: var(--color-tinted-critical-border-3);
12718
+ --color-border: var(--color-tinted-critical-border-2);
12718
12719
  --color-fg: var(--color-tinted-critical-fg-1);
12719
12720
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12720
12721
  }
12721
12722
 
12722
12723
  .s-button.s-ghost.s-critical:not([data-disabled])[data-selected] {
12723
12724
  --color-bg: var(--color-tinted-critical-bg-3);
12724
- --color-border: var(--color-tinted-critical-border-3);
12725
+ --color-border: var(--color-tinted-critical-border-2);
12725
12726
  --color-fg: var(--color-tinted-critical-fg-1);
12726
12727
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12727
12728
  }
@@ -19910,6 +19911,10 @@
19910
19911
  animation: spinner-rotate 500ms linear infinite;
19911
19912
  }
19912
19913
 
19914
+ .s-stack {
19915
+ grid-template-columns: minmax(0, 1fr);
19916
+ }
19917
+
19913
19918
  .s-switch-element {
19914
19919
  position: absolute;
19915
19920
  top: 0;